I think monorepo is fairly correct now but I don't know for sure

packages/ui/src/avatar.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import * as React from 'react';
+import type * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-import { cn } from '@gib/ui';
+import { cn } from '.';
 
 function Avatar({
   className,

packages/ui/src/based-avatar.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { type ComponentProps } from 'react';
-import { AvatarImage } from '@/components/ui/avatar';
-import { cn } from '@/lib/utils';
+import type { ComponentProps } from 'react';
+import { cn, AvatarImage } from '@gib/ui';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { User } from 'lucide-react';
 
@@ -58,7 +57,7 @@ const BasedAvatar = ({
           ) : (
             <User
               {...userIconProps}
-              className={cn('', userIconProps?.className)}
+              className={cn('', userIconProps.className)}
             />
           )}
         </AvatarPrimitive.Fallback>

packages/ui/src/based-progress.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '@gib/ui';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 
 type BasedProgressProps = React.ComponentProps<

packages/ui/src/button.tsx

@@ -1,6 +1,6 @@
 import type { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '@gib/ui';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 

packages/ui/src/card.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '@gib/ui';
 
 function Card({ className, ...props }: React.ComponentProps<'div'>) {
   return (

packages/ui/src/checkbox.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '@gib/ui';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from 'lucide-react';
 

packages/ui/src/drawer.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '@gib/ui';
 import { Drawer as DrawerPrimitive } from 'vaul';
 
 function Drawer({

packages/ui/src/dropdown-menu.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '@gib/ui';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
 

packages/ui/src/field.tsx

@@ -2,9 +2,7 @@
 
 import type { VariantProps } from 'class-variance-authority';
 import { useMemo } from 'react';
-import { cn } from '@acme/ui';
-import { Label } from '@acme/ui/label';
-import { Separator } from '@acme/ui/separator';
+import { cn, Label, Separator } from '@gib/ui';
 import { cva } from 'class-variance-authority';
 
 export function FieldSet({

packages/ui/src/form.tsx

@@ -2,9 +2,8 @@
 
 import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import * as React from 'react';
-import { Label } from '@/components/ui/label';
-import { cn } from '@/lib/utils';
-import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn, Label } from '@gib/ui';
+import type * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
 import {
   Controller,

packages/ui/src/index.ts

@@ -1,16 +0,0 @@
-import { cx } from 'class-variance-authority';
-import { twMerge } from 'tailwind-merge';
-
-export const cn = (...inputs: Parameters<typeof cx>) => twMerge(cx(inputs));
-
-export const ccn = ({
-  context,
-  className,
-  on = '',
-  off = '',
-}: {
-  context: boolean;
-  className: string;
-  on: string;
-  off: string;
-}) => twMerge(className, context ? on : off);

packages/ui/src/index.tsx

@@ -0,0 +1,109 @@
+import { cx } from 'class-variance-authority';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: Parameters<typeof cx>) => twMerge(cx(inputs));
+
+export const ccn = ({
+  context,
+  className,
+  on = '',
+  off = '',
+}: {
+  context: boolean;
+  className: string;
+  on: string;
+  off: string;
+}) => twMerge(className, context ? on : off);
+
+export { Avatar, AvatarImage, AvatarFallback } from './avatar';
+export { BasedAvatar } from './based-avatar';
+export { BasedProgress } from './based-progress';
+export { Button, buttonVariants } from './button';
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+} from './card';
+export { Checkbox } from './checkbox';
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+} from './drawer';
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+} from './form';
+export {
+  type ImageCropProps,
+  type ImageCropApplyProps,
+  type ImageCropContentProps,
+  type ImageCropResetProps,
+  type CropperProps,
+  Cropper,
+  ImageCrop,
+  ImageCropApply,
+  ImageCropContent,
+  ImageCropReset,
+} from './shadcn-io/image-crop';
+export { Input } from './input';
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+} from './input-otp';
+export { Label } from './label';
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+} from './pagination';
+export { Progress } from './progress';
+export { ScrollArea, ScrollBar } from './scroll-area';
+export { Separator } from './separator';
+export { StatusMessage } from './status-message';
+export { SubmitButton } from './submit-button';
+export { Switch } from './switch';
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from './table';
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
+export { Toaster } from './sonner';
+export { ThemeProvider, ThemeToggle, type ThemeToggleProps } from './theme';

packages/ui/src/input-otp.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '@gib/ui';
 import { OTPInput, OTPInputContext } from 'input-otp';
 import { MinusIcon } from 'lucide-react';
 

packages/ui/src/input.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '@gib/ui';
 
 function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
   return (

packages/ui/src/label.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '@gib/ui';
 import * as LabelPrimitive from '@radix-ui/react-label';
 
 function Label({

packages/ui/src/pagination.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { Button, buttonVariants } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
+import type * as React from 'react';
+import type { Button } from '@gib/ui';
+import { cn, buttonVariants } from '@gib/ui';
 import {
   ChevronLeftIcon,
   ChevronRightIcon,

packages/ui/src/progress.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
-import { cn } from '@/lib/utils';
+import type * as React from 'react';
+import { cn } from '@gib/ui';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 
 function Progress({

packages/ui/src/scroll-area.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
-import { cn } from '@/lib/utils';
+import type * as React from 'react';
+import { cn } from '@gib/ui';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
 function ScrollArea({

packages/ui/src/separator.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '@gib/ui';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
 function Separator({

packages/ui/src/shadcn-io/image-crop/index.tsx

@@ -17,8 +17,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Button } from '@/components/ui';
-import { cn } from '@/lib/utils';
+import { cn, Button } from '@gib/ui';
 import { CropIcon, RotateCcwIcon } from 'lucide-react';
 import { Slot } from 'radix-ui';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
@@ -94,7 +93,7 @@ const getCroppedPngImage = async (
   return croppedImageUrl;
 };
 
-type ImageCropContextType = {
+interface ImageCropContextType {
   file: File;
   maxImageSize: number;
   imgSrc: string;
@@ -150,7 +149,7 @@ export const ImageCrop = ({
   useEffect(() => {
     const reader = new FileReader();
     reader.addEventListener('load', () =>
-      setImgSrc(reader.result?.toString() || ''),
+      setImgSrc(reader.result?.toString() ?? ''),
     );
     reader.readAsDataURL(file);
   }, [file]);

packages/ui/src/sonner.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useTheme } from 'next-themes';
-import { Toaster as Sonner, ToasterProps } from 'sonner';
+import type { ToasterProps } from 'sonner';
+import { Toaster as Sonner } from 'sonner';
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = 'system' } = useTheme();

packages/ui/src/status-message.tsx

@@ -1,9 +1,9 @@
-import { type ComponentProps } from 'react';
-import { cn } from '@/lib/utils';
+import type { ComponentProps } from 'react';
+import { cn } from '@gib/ui';
 
 type Message = { success: string } | { error: string } | { message: string };
 
-type StatusMessageProps = {
+interface StatusMessageProps {
   message: Message;
   containerProps?: ComponentProps<'div'>;
   textProps?: ComponentProps<'div'>;

packages/ui/src/submit-button.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { type ComponentProps } from 'react';
-import { Button } from '@/components/ui';
-import { cn } from '@/lib/utils';
+import type { ComponentProps } from 'react';
+import { cn, Button } from '@gib/ui';
 import { Loader2 } from 'lucide-react';
 import { useFormStatus } from 'react-dom';
 

packages/ui/src/switch.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
-import { cn } from '@/lib/utils';
+import type * as React from 'react';
+import { cn } from '@gib/ui';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 
 function Switch({

packages/ui/src/table.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
-import { cn } from '@/lib/utils';
+import type * as React from 'react';
+import { cn } from '@gib/ui';
 
 function Table({ className, ...props }: React.ComponentProps<'table'>) {
   return (

packages/ui/src/tabs.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
-import { cn } from '@/lib/utils';
+import type * as React from 'react';
+import { cn } from '@gib/ui';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 function Tabs({

packages/ui/src/theme.tsx

@@ -1,184 +1,70 @@
 'use client';
 
-import * as React from 'react';
-import { DesktopIcon, MoonIcon, SunIcon } from '@radix-ui/react-icons';
-import * as z from 'zod/v4';
+import type { ComponentProps } from 'react';
+import { useEffect, useState } from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';
 
-import { Button } from './button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from './dropdown-menu';
+import { Button, cn } from '@gib/ui';
 
-const ThemeModeSchema = z.enum(['light', 'dark', 'auto']);
+const ThemeProvider = ({
+  children,
+  ...props
+}: ComponentProps<typeof NextThemesProvider>) => {
+  const [mounted, setMounted] = useState(false);
 
-const themeKey = 'theme-mode';
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
-export type ThemeMode = z.output<typeof ThemeModeSchema>;
-export type ResolvedTheme = Exclude<ThemeMode, 'auto'>;
+  if (!mounted) return null;
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+};
 
-const getStoredThemeMode = (): ThemeMode => {
-  if (typeof window === 'undefined') return 'auto';
-  try {
-    const storedTheme = localStorage.getItem(themeKey);
-    return ThemeModeSchema.parse(storedTheme);
-  } catch {
-    return 'auto';
+interface ThemeToggleProps {
+  size?: number;
+  buttonProps?: Omit<ComponentProps<typeof Button>, 'onClick'>;
+};
+
+const ThemeToggle = ({ size = 1, buttonProps }: ThemeToggleProps) => {
+  const { setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button {...buttonProps}>
+        <span style={{ height: `${size}rem`, width: `${size}rem` }} />
+      </Button>
+    );
   }
-};
 
-const setStoredThemeMode = (theme: ThemeMode) => {
-  try {
-    const parsedTheme = ThemeModeSchema.parse(theme);
-    localStorage.setItem(themeKey, parsedTheme);
-  } catch {
-    // Silently fail if localStorage is unavailable
-  }
-};
-
-const getSystemTheme = () => {
-  if (typeof window === 'undefined') return 'light';
-  return window.matchMedia('(prefers-color-scheme: dark)').matches
-    ? 'dark'
-    : 'light';
-};
-
-const updateThemeClass = (themeMode: ThemeMode) => {
-  const root = document.documentElement;
-  root.classList.remove('light', 'dark', 'auto');
-  const newTheme = themeMode === 'auto' ? getSystemTheme() : themeMode;
-  root.classList.add(newTheme);
-
-  if (themeMode === 'auto') {
-    root.classList.add('auto');
-  }
-};
-
-const setupPreferredListener = () => {
-  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-  const handler = () => updateThemeClass('auto');
-  mediaQuery.addEventListener('change', handler);
-  return () => mediaQuery.removeEventListener('change', handler);
-};
-
-const getNextTheme = (current: ThemeMode): ThemeMode => {
-  const themes: ThemeMode[] =
-    getSystemTheme() === 'dark'
-      ? ['auto', 'light', 'dark']
-      : ['auto', 'dark', 'light'];
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  return themes[(themes.indexOf(current) + 1) % themes.length]!;
-};
-
-export const themeDetectorScript = (function () {
-  function themeFn() {
-    const isValidTheme = (theme: string): theme is ThemeMode => {
-      const validThemes = ['light', 'dark', 'auto'] as const;
-      return validThemes.includes(theme as ThemeMode);
-    };
-
-    const storedTheme = localStorage.getItem('theme-mode') ?? 'auto';
-    const validTheme = isValidTheme(storedTheme) ? storedTheme : 'auto';
-
-    if (validTheme === 'auto') {
-      const autoTheme = window.matchMedia('(prefers-color-scheme: dark)')
-        .matches
-        ? 'dark'
-        : 'light';
-      document.documentElement.classList.add(autoTheme, 'auto');
-    } else {
-      document.documentElement.classList.add(validTheme);
-    }
-  }
-  return `(${themeFn.toString()})();`;
-})();
-
-interface ThemeContextProps {
-  themeMode: ThemeMode;
-  resolvedTheme: ResolvedTheme;
-  setTheme: (theme: ThemeMode) => void;
-  toggleMode: () => void;
-}
-const ThemeContext = React.createContext<ThemeContextProps | undefined>(
-  undefined,
-);
-
-export function ThemeProvider({ children }: React.PropsWithChildren) {
-  const [themeMode, setThemeMode] = React.useState(getStoredThemeMode);
-
-  React.useEffect(() => {
-    if (themeMode !== 'auto') return;
-    return setupPreferredListener();
-  }, [themeMode]);
-
-  const resolvedTheme = themeMode === 'auto' ? getSystemTheme() : themeMode;
-
-  const setTheme = (newTheme: ThemeMode) => {
-    setThemeMode(newTheme);
-    setStoredThemeMode(newTheme);
-    updateThemeClass(newTheme);
-  };
-
-  const toggleMode = () => {
-    setTheme(getNextTheme(themeMode));
+  const toggleTheme = () => {
+    if (resolvedTheme === 'dark') setTheme('light');
+    else setTheme('dark');
   };
 
   return (
-    <ThemeContext
-      value={{
-        themeMode,
-        resolvedTheme,
-        setTheme,
-        toggleMode,
-      }}
+    <Button
+      variant="outline"
+      size="icon"
+      {...buttonProps}
+      onClick={toggleTheme}
+      className={cn('cursor-pointer', buttonProps?.className)}
     >
-      <script
-        dangerouslySetInnerHTML={{ __html: themeDetectorScript }}
-        suppressHydrationWarning
+      <Sun
+        style={{ height: `${size}rem`, width: `${size}rem` }}
+        className="scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
       />
-      {children}
-    </ThemeContext>
+      <Moon
+        style={{ height: `${size}rem`, width: `${size}rem` }}
+        className="absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
+      />
+    </Button>
   );
-}
+};
 
-export function useTheme() {
-  const context = React.use(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-}
-
-export function ThemeToggle() {
-  const { setTheme } = useTheme();
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          size="icon"
-          className="[&>svg]:absolute [&>svg]:size-5 [&>svg]:scale-0"
-        >
-          <SunIcon className="light:scale-100! auto:scale-0!" />
-          <MoonIcon className="auto:scale-0! dark:scale-100!" />
-          <DesktopIcon className="auto:scale-100!" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme('light')}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('auto')}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
+export { ThemeProvider, ThemeToggle, type ThemeToggleProps };

packages/ui/src/toast.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-import type { ToasterProps } from 'sonner';
-import { Toaster as Sonner, toast } from 'sonner';
-
-import { useTheme } from './theme';
-
-export const Toaster = ({ ...props }: ToasterProps) => {
-  const { themeMode } = useTheme();
-
-  return (
-    <Sonner
-      theme={themeMode === 'auto' ? 'system' : themeMode}
-      className="toaster group"
-      style={
-        {
-          '--normal-bg': 'var(--popover)',
-          '--normal-text': 'var(--popover-foreground)',
-          '--normal-border': 'var(--border)',
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  );
-};
-
-export { toast };