Adopt Tamagui defaults for tabs and filters

resources/js/admin/mobile/__tests__/BrandingPage.test.tsx

@@ -50,6 +50,7 @@ vi.mock('../components/FormControls', () => ({
   MobileColorInput: (props: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
   MobileFileInput: (props: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
   MobileInput: (props: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
+  MobileTextArea: (props: React.TextareaHTMLAttributes<HTMLTextAreaElement>) => <textarea {...props} />,
   MobileSelect: ({ children, ...props }: React.SelectHTMLAttributes<HTMLSelectElement>) => (
     <select {...props}>{children}</select>
   ),
@@ -111,16 +112,53 @@ vi.mock('@tamagui/react-native-web-lite', () => ({
   ),
 }));
 
-vi.mock('tamagui', () => ({
-  Slider: Object.assign(
-    ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-    {
-      Track: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-      TrackActive: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
-      Thumb: () => <div />,
-    }
-  ),
-}));
+vi.mock('tamagui', () => {
+  const TabsValueContext = React.createContext<string | null>(null);
+  const TabsSetterContext = React.createContext<((value: string) => void) | null>(null);
+  const TabsRoot = ({
+    children,
+    value,
+    onValueChange,
+  }: {
+    children: React.ReactNode;
+    value?: string;
+    onValueChange?: (value: string) => void;
+  }) => (
+    <TabsValueContext.Provider value={value ?? null}>
+      <TabsSetterContext.Provider value={onValueChange ?? null}>{children}</TabsSetterContext.Provider>
+    </TabsValueContext.Provider>
+  );
+  const Tabs = Object.assign(TabsRoot, {
+    List: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    Tab: ({ children, value }: { children: React.ReactNode; value: string }) => {
+      const setValue = React.useContext(TabsSetterContext);
+      return (
+        <button type="button" onClick={() => setValue?.(value)}>
+          {children}
+        </button>
+      );
+    },
+    Content: ({ children, value }: { children: React.ReactNode; value: string }) => {
+      const active = React.useContext(TabsValueContext);
+      if (active !== value) {
+        return null;
+      }
+      return <div>{children}</div>;
+    },
+  });
+
+  return {
+    Slider: Object.assign(
+      ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+      {
+        Track: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+        TrackActive: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
+        Thumb: () => <div />,
+      }
+    ),
+    Tabs,
+  };
+});
 
 const getEventMock = vi.fn();
 const updateEventMock = vi.fn();

resources/js/admin/mobile/__tests__/EventRecapPage.test.tsx

@@ -113,6 +113,14 @@ vi.mock('@tamagui/text', () => ({
   SizableText: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
 }));
 
+vi.mock('tamagui', () => ({
+  Tabs: Object.assign(({ children }: { children: React.ReactNode }) => <div>{children}</div>, {
+    List: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    Tab: ({ children }: { children: React.ReactNode }) => <button type="button">{children}</button>,
+    Content: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  }),
+}));
+
 vi.mock('@tamagui/react-native-web-lite', () => ({
   Pressable: ({ children, onPress }: { children: React.ReactNode; onPress?: () => void }) => (
     <button type="button" onClick={onPress}>

resources/js/admin/mobile/__tests__/EventTasksPage.test.tsx

@@ -111,7 +111,11 @@ vi.mock('@tamagui/scroll-view', () => ({
 vi.mock('tamagui', () => ({
   Tabs: Object.assign(({ children }: { children: React.ReactNode }) => <div>{children}</div>, {
     List: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-    Tab: ({ children }: { children: React.ReactNode }) => <button type="button">{children}</button>,
+    Tab: ({ children }: { children: React.ReactNode }) => (
+      <button type="button" role="tab">
+        {children}
+      </button>
+    ),
     Content: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   }),
 }));
@@ -278,10 +282,10 @@ describe('MobileEventTasksPage', () => {
     render(<MobileEventTasksPage />);
 
     expect(await screen.findByText('Photo tasks for guests')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Tasks' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Task Library' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Emotions' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Collections' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Tasks' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Task Library' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Emotions' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Collections' })).toBeInTheDocument();
     expect(screen.getByPlaceholderText('Search photo tasks')).toBeInTheDocument();
     expect(screen.getByText('Emotion')).toBeInTheDocument();
 

resources/js/admin/mobile/__tests__/NotificationsPage.test.tsx

@@ -82,6 +82,12 @@ vi.mock('@tamagui/text', () => ({
   SizableText: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
 }));
 
+vi.mock('@tamagui/toggle-group', () => ({
+  ToggleGroup: Object.assign(({ children }: { children: React.ReactNode }) => <div>{children}</div>, {
+    Item: ({ children }: { children: React.ReactNode }) => <button type="button">{children}</button>,
+  }),
+}));
+
 vi.mock('../components/MobileShell', () => ({
   MobileShell: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   HeaderActionButton: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,

resources/js/admin/mobile/__tests__/ProfileAccountPage.test.tsx

@@ -63,6 +63,14 @@ vi.mock('@tamagui/text', () => ({
   SizableText: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
 }));
 
+vi.mock('tamagui', () => ({
+  Tabs: Object.assign(({ children }: { children: React.ReactNode }) => <div>{children}</div>, {
+    List: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    Tab: ({ children }: { children: React.ReactNode }) => <button type="button">{children}</button>,
+    Content: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  }),
+}));
+
 vi.mock('@tamagui/react-native-web-lite', () => ({
   Pressable: ({ children, ...props }: { children: React.ReactNode } & React.ButtonHTMLAttributes<HTMLButtonElement>) => (
     <button type="button" {...props}>