@automa8e/ui 0.2.0

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Shape variant */
+  variant?: 'rectangle' | 'circle' | 'text'
+  /** Number of text lines to render (only when variant='text') */
+  lines?: number
+}
+
+function Skeleton({ className, variant = 'rectangle', lines = 1, ...props }: SkeletonProps) {
+  const base = cn(
+    'bg-muted animate-[shimmer_2s_linear_infinite]',
+    '[background:linear-gradient(90deg,hsl(var(--muted))_25%,hsl(var(--muted-foreground)/0.1)_50%,hsl(var(--muted))_75%)]',
+    '[background-size:200%_100%]',
+    variant === 'circle' && 'rounded-full',
+    variant !== 'circle' && 'rounded-md',
+    className
+  )
+
+  if (variant === 'text') {
+    return (
+      <div className="space-y-2" {...props}>
+        {Array.from({ length: lines }, (_, i) => (
+          <div
+            key={i}
+            className={cn(
+              base,
+              'h-4',
+              i === lines - 1 && lines > 1 ? 'w-4/5' : 'w-full'
+            )}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  return <div className={base} {...props} />
+}
+
+export { Skeleton }

package/src/components/ui/spinner.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const spinnerVariants = cva(
+  'animate-spin rounded-full border-2 border-current border-t-transparent',
+  {
+    variants: {
+      size: {
+        xs: 'h-3 w-3',
+        sm: 'h-4 w-4',
+        md: 'h-6 w-6',
+        lg: 'h-8 w-8',
+        xl: 'h-12 w-12',
+      },
+      color: {
+        default: 'text-muted-foreground',
+        primary: 'text-primary',
+        foreground: 'text-foreground',
+        white: 'text-white',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      color: 'primary',
+    },
+  }
+)
+
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'default' | 'primary' | 'foreground' | 'white'
+  /** Accessible label for screen readers */
+  label?: string
+}
+
+function Spinner({ className, size, color, label = 'Loading...', ...props }: SpinnerProps) {
+  return (
+    <div
+      role="status"
+      aria-label={label}
+      className={cn(spinnerVariants({ size, color }), className)}
+      {...props}
+    >
+      <span className="sr-only">{label}</span>
+    </div>
+  )
+}
+
+export { Spinner, spinnerVariants }

package/src/components/ui/switch.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+import { cn } from '@/lib/utils'
+
+export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  SwitchProps
+>(({ className, size = 'md', ...props }, ref) => {
+  const sizeClasses = {
+    sm: { root: 'h-4 w-7', thumb: 'h-3 w-3 data-[state=checked]:translate-x-3' },
+    md: { root: 'h-5 w-9', thumb: 'h-4 w-4 data-[state=checked]:translate-x-4' },
+    lg: { root: 'h-6 w-11', thumb: 'h-5 w-5 data-[state=checked]:translate-x-5' },
+  }[size]
+
+  return (
+    <SwitchPrimitive.Root
+      className={cn(
+        'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent',
+        'transition-colors duration-200',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=unchecked]:bg-input data-[state=checked]:bg-primary',
+        sizeClasses.root,
+        className
+      )}
+      {...props}
+      ref={ref}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          'pointer-events-none block rounded-full bg-background shadow-lg ring-0',
+          'transition-transform duration-200',
+          'data-[state=unchecked]:translate-x-0',
+          sizeClasses.thumb
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+})
+Switch.displayName = SwitchPrimitive.Root.displayName
+
+export { Switch }

package/src/components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table
+        ref={ref}
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  )
+)
+Table.displayName = 'Table'
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b [&_tr]:border-border', className)} {...props} />
+))
+TableHeader.displayName = 'TableHeader'
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+))
+TableBody.displayName = 'TableBody'
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn('border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+    {...props}
+  />
+))
+TableFooter.displayName = 'TableFooter'
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        'border-b border-border transition-colors duration-100',
+        'hover:bg-muted/50 data-[state=selected]:bg-muted',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+TableRow.displayName = 'TableRow'
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-10 px-4 text-left align-middle font-medium text-muted-foreground',
+      '[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = 'TableHead'
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      'p-4 align-middle',
+      '[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = 'TableCell'
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+TableCaption.displayName = 'TableCaption'
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/components/ui/tabs.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const Tabs = TabsPrimitive.Root
+
+const tabsListVariants = cva(
+  'inline-flex items-center',
+  {
+    variants: {
+      variant: {
+        default: 'h-9 rounded-lg bg-muted p-1 text-muted-foreground',
+        underline: 'border-b border-border gap-0',
+        pills: 'gap-1',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+const tabsTriggerVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all',
+  {
+    variants: {
+      variant: {
+        default: [
+          'rounded-md px-3 py-1 ring-offset-background',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'disabled:pointer-events-none disabled:opacity-50',
+          'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+        ],
+        underline: [
+          'px-4 py-2 border-b-2 border-transparent rounded-none -mb-px',
+          'focus-visible:outline-none',
+          'disabled:pointer-events-none disabled:opacity-50',
+          'data-[state=active]:border-primary data-[state=active]:text-foreground',
+          'text-muted-foreground hover:text-foreground',
+        ],
+        pills: [
+          'rounded-full px-4 py-1.5',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:pointer-events-none disabled:opacity-50',
+          'data-[state=active]:bg-primary data-[state=active]:text-primary-foreground',
+          'text-muted-foreground hover:text-foreground hover:bg-muted',
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+interface TabsListProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,
+    VariantProps<typeof tabsListVariants> {}
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(({ className, variant, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(tabsListVariants({ variant }), className)}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+interface TabsTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,
+    VariantProps<typeof tabsTriggerVariants> {}
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  TabsTriggerProps
+>(({ className, variant, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(tabsTriggerVariants({ variant }), className)}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'animate-fade-in',
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
+export type { TabsListProps, TabsTriggerProps }

package/src/components/ui/textarea.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Error state */
+  error?: boolean
+  /** Error message shown below */
+  errorMessage?: string
+  /** Auto-resize based on content */
+  autoResize?: boolean
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, error, errorMessage, autoResize, onChange, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      if (autoResize) {
+        e.target.style.height = 'auto'
+        e.target.style.height = `${e.target.scrollHeight}px`
+      }
+      onChange?.(e)
+    }
+
+    return (
+      <div className="w-full">
+        <textarea
+          className={cn(
+            'flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm',
+            'placeholder:text-muted-foreground',
+            'transition-colors duration-150',
+            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            'resize-y',
+            error && 'border-destructive focus-visible:ring-destructive',
+            autoResize && 'resize-none overflow-hidden',
+            className
+          )}
+          ref={ref}
+          onChange={handleChange}
+          {...props}
+        />
+        {errorMessage && (
+          <p className="mt-1 text-xs text-destructive">{errorMessage}</p>
+        )}
+      </div>
+    )
+  }
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }

package/src/components/ui/toast.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react'
+import * as ToastPrimitive from '@radix-ui/react-toast'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const ToastProvider = ToastPrimitive.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitive.Viewport
+    ref={ref}
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4',
+      'sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitive.Viewport.displayName
+
+const toastVariants = cva(
+  [
+    'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg',
+    'transition-all duration-200',
+    'data-[swipe=cancel]:translate-x-0',
+    'data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]',
+    'data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]',
+    'data-[swipe=move]:transition-none',
+    'data-[state=open]:animate-slide-in-right',
+    'data-[state=closed]:opacity-0',
+  ],
+  {
+    variants: {
+      variant: {
+        default: 'border-border bg-background text-foreground',
+        success: 'border-success/30 bg-success/10 text-foreground',
+        destructive: 'border-destructive/30 bg-destructive/10 text-foreground',
+        warning: 'border-warning/30 bg-warning/10 text-foreground',
+        info: 'border-info/30 bg-info/10 text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => (
+  <ToastPrimitive.Root
+    ref={ref}
+    className={cn(toastVariants({ variant }), className)}
+    {...props}
+  />
+))
+Toast.displayName = ToastPrimitive.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitive.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-border bg-transparent px-3 text-sm font-medium',
+      'transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring',
+      'disabled:pointer-events-none disabled:opacity-50',
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitive.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitive.Close
+    ref={ref}
+    className={cn(
+      'absolute right-1 top-1 rounded-md p-1 text-muted-foreground opacity-0 transition-opacity',
+      'hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring',
+      'group-hover:opacity-100',
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitive.Close>
+))
+ToastClose.displayName = ToastPrimitive.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitive.Title
+    ref={ref}
+    className={cn('text-sm font-semibold [&+div]:text-xs', className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitive.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitive.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn } from '@/lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+const Tooltip = TooltipPrimitive.Root
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md',
+        'animate-fade-in',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/hooks/use-debounce.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react'
+
+/**
+ * Returns a debounced version of the given value.
+ * Useful for search inputs and API calls.
+ *
+ * @example
+ * const [search, setSearch] = useState('')
+ * const debouncedSearch = useDebounce(search, 300)
+ *
+ * useEffect(() => {
+ *   // Only fires 300ms after the user stops typing
+ *   fetchResults(debouncedSearch)
+ * }, [debouncedSearch])
+ */
+export function useDebounce<T>(value: T, delay = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => clearTimeout(timer)
+  }, [value, delay])
+
+  return debouncedValue
+}

package/src/hooks/use-local-storage.ts

@@ -0,0 +1,63 @@
+import { useState, useEffect, useCallback } from 'react'
+
+/**
+ * Persists state in localStorage with JSON serialization.
+ * SSR-safe — reads from storage only on the client.
+ *
+ * @example
+ * const [theme, setTheme] = useLocalStorage('theme', 'dark')
+ */
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T
+): [T, (value: T | ((prev: T) => T)) => void, () => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === 'undefined') return initialValue
+    try {
+      const item = window.localStorage.getItem(key)
+      return item !== null ? (JSON.parse(item) as T) : initialValue
+    } catch {
+      return initialValue
+    }
+  })
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    try {
+      const item = window.localStorage.getItem(key)
+      if (item !== null) {
+        setStoredValue(JSON.parse(item) as T)
+      }
+    } catch {
+      // ignore
+    }
+  }, [key])
+
+  const setValue = useCallback(
+    (value: T | ((prev: T) => T)) => {
+      try {
+        const valueToStore = value instanceof Function ? value(storedValue) : value
+        setStoredValue(valueToStore)
+        if (typeof window !== 'undefined') {
+          window.localStorage.setItem(key, JSON.stringify(valueToStore))
+        }
+      } catch {
+        // ignore
+      }
+    },
+    [key, storedValue]
+  )
+
+  const removeValue = useCallback(() => {
+    try {
+      setStoredValue(initialValue)
+      if (typeof window !== 'undefined') {
+        window.localStorage.removeItem(key)
+      }
+    } catch {
+      // ignore
+    }
+  }, [key, initialValue])
+
+  return [storedValue, setValue, removeValue]
+}