@open-mercato/ui 0.4.2-canary-c02407ff85

package/src/primitives/tabs.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+type TabsContextValue = {
+  value: string
+  onValueChange: (value: string) => void
+}
+
+const TabsContext = React.createContext<TabsContextValue | undefined>(undefined)
+
+function useTabsContext() {
+  const context = React.useContext(TabsContext)
+  if (!context) {
+    throw new Error('Tabs components must be used within a Tabs provider')
+  }
+  return context
+}
+
+export type TabsProps = {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  children: React.ReactNode
+  className?: string
+}
+
+export function Tabs({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  children,
+  className,
+}: TabsProps) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '')
+  const isControlled = controlledValue !== undefined
+  const value = isControlled ? controlledValue : uncontrolledValue
+
+  const handleValueChange = React.useCallback(
+    (newValue: string) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue)
+      }
+      onValueChange?.(newValue)
+    },
+    [isControlled, onValueChange],
+  )
+
+  return (
+    <TabsContext.Provider value={{ value, onValueChange: handleValueChange }}>
+      <div className={className}>{children}</div>
+    </TabsContext.Provider>
+  )
+}
+
+export type TabsListProps = {
+  children: React.ReactNode
+  className?: string
+}
+
+export function TabsList({ children, className }: TabsListProps) {
+  return (
+    <div
+      className={cn(
+        'inline-flex h-9 items-center justify-start rounded-lg bg-muted p-1 text-muted-foreground',
+        className,
+      )}
+      role="tablist"
+    >
+      {children}
+    </div>
+  )
+}
+
+export type TabsTriggerProps = {
+  value: string
+  children: React.ReactNode
+  className?: string
+  disabled?: boolean
+}
+
+export function TabsTrigger({ value, children, className, disabled }: TabsTriggerProps) {
+  const { value: selectedValue, onValueChange } = useTabsContext()
+  const isSelected = selectedValue === value
+
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={isSelected}
+      disabled={disabled}
+      onClick={() => onValueChange(value)}
+      className={cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        isSelected
+          ? 'bg-background text-foreground shadow'
+          : 'hover:bg-background/50 hover:text-foreground',
+        className,
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+export type TabsContentProps = {
+  value: string
+  children: React.ReactNode
+  className?: string
+}
+
+export function TabsContent({ value, children, className }: TabsContentProps) {
+  const { value: selectedValue } = useTabsContext()
+
+  if (selectedValue !== value) {
+    return null
+  }
+
+  return (
+    <div
+      role="tabpanel"
+      className={cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className)}
+    >
+      {children}
+    </div>
+  )
+}

package/src/primitives/textarea.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+import { cn } from '@open-mercato/shared/lib/utils'
+
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cn(
+        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+
+Textarea.displayName = 'Textarea'

package/src/primitives/tooltip.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export const TooltipProvider = TooltipPrimitive.Provider
+
+export const Tooltip = TooltipPrimitive.Root
+
+export const TooltipTrigger = TooltipPrimitive.Trigger
+
+export 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 bg-slate-900 px-3 py-1.5 text-xs text-slate-50 animate-in fade-in-0 zoom-in-95',
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+        'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'max-w-xs break-words',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export type TooltipProps = {
+  content: React.ReactNode
+  children: React.ReactNode
+  delayDuration?: number
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  disabled?: boolean
+}
+
+/**
+ * Simple tooltip wrapper component for common use cases.
+ *
+ * @example
+ * <SimpleTooltip content="Full text here">
+ *   <span>Truncated...</span>
+ * </SimpleTooltip>
+ */
+export function SimpleTooltip({
+  content,
+  children,
+  delayDuration = 300,
+  side = 'top',
+  align = 'center',
+  open,
+  onOpenChange,
+  disabled = false,
+}: TooltipProps) {
+  // If disabled or no content, just render children without tooltip
+  const isDisabled = disabled || !content
+
+  if (isDisabled) {
+    return <>{children}</>
+  }
+
+  return (
+    <Tooltip
+      open={open}
+      onOpenChange={onOpenChange}
+      delayDuration={delayDuration}
+    >
+      <TooltipTrigger asChild>
+        {children}
+      </TooltipTrigger>
+      <TooltipContent side={side} align={align}>
+        {content}
+      </TooltipContent>
+    </Tooltip>
+  )
+}

package/src/theme/QueryProvider.tsx

@@ -0,0 +1,46 @@
+"use client"
+import * as React from 'react'
+import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { redirectToSessionRefresh, redirectToForbiddenLogin, UnauthorizedError, ForbiddenError, apiFetch, setAuthRedirectConfig } from '../backend/utils/api'
+
+// Ensure global fetch calls also respect our redirect-on-401/403 policy.
+function ensureGlobalFetchInterception() {
+  if (typeof window === 'undefined') return
+  const w = window as any
+  if (w.__omFetchPatched) return
+  w.__omFetchPatched = true
+  w.__omOriginalFetch = window.fetch
+  window.fetch = ((input: RequestInfo | URL, init?: RequestInit) => apiFetch(input, init)) as any
+}
+
+const client = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      if (error instanceof UnauthorizedError) redirectToSessionRefresh()
+      else if (error instanceof ForbiddenError) redirectToForbiddenLogin()
+      // As a fallback, try to detect common cases
+      else if ((error as any)?.status === 401) redirectToSessionRefresh()
+      else if ((error as any)?.status === 403) redirectToForbiddenLogin()
+    },
+  }),
+  mutationCache: new MutationCache({
+    onError: (error) => {
+      if (error instanceof UnauthorizedError) redirectToSessionRefresh()
+      else if (error instanceof ForbiddenError) redirectToForbiddenLogin()
+      else if ((error as any)?.status === 401) redirectToSessionRefresh()
+      else if ((error as any)?.status === 403) redirectToForbiddenLogin()
+    },
+  }),
+})
+
+type QueryProviderProps = { children: React.ReactNode; defaultForbiddenRoles?: string[] }
+
+export function QueryProvider({ children, defaultForbiddenRoles }: QueryProviderProps) {
+  React.useEffect(() => {
+    ensureGlobalFetchInterception()
+    if (defaultForbiddenRoles && defaultForbiddenRoles.length) {
+      setAuthRedirectConfig({ defaultForbiddenRoles })
+    }
+  }, [])
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>
+}

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import * as React from 'react'
+
+export type Theme = 'light' | 'dark' | 'system'
+
+type ThemeContextValue = {
+  theme: Theme
+  resolvedTheme: 'light' | 'dark'
+  setTheme: (theme: Theme) => void
+}
+
+const ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined)
+
+const THEME_STORAGE_KEY = 'om-theme'
+
+function getSystemTheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined') return 'light'
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+function getStoredTheme(): Theme {
+  if (typeof window === 'undefined') return 'system'
+  try {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY)
+    if (stored === 'light' || stored === 'dark' || stored === 'system') {
+      return stored
+    }
+  } catch (error) {
+    // localStorage may be unavailable in private browsing, iframes, or restricted contexts
+    // Theme will default to system preference - this is expected graceful degradation
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('[ThemeProvider] localStorage read failed:', error)
+    }
+  }
+  return 'system'
+}
+
+function applyTheme(resolvedTheme: 'light' | 'dark') {
+  const root = document.documentElement
+  if (resolvedTheme === 'dark') {
+    root.classList.add('dark')
+  } else {
+    root.classList.remove('dark')
+  }
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setThemeState] = React.useState<Theme>('system')
+  const [resolvedTheme, setResolvedTheme] = React.useState<'light' | 'dark'>('light')
+  const [mounted, setMounted] = React.useState(false)
+
+  // Initialize theme from localStorage on mount
+  React.useEffect(() => {
+    const stored = getStoredTheme()
+    setThemeState(stored)
+    const resolved = stored === 'system' ? getSystemTheme() : stored
+    setResolvedTheme(resolved)
+    applyTheme(resolved)
+    setMounted(true)
+  }, [])
+
+  // Listen for system theme changes
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleChange = () => {
+      if (theme === 'system') {
+        const newResolved = getSystemTheme()
+        setResolvedTheme(newResolved)
+        applyTheme(newResolved)
+      }
+    }
+
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [theme])
+
+  const setTheme = React.useCallback((newTheme: Theme) => {
+    setThemeState(newTheme)
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, newTheme)
+    } catch (error) {
+      // localStorage may be unavailable - theme still works for this session, just won't persist
+      if (process.env.NODE_ENV === 'development') {
+        console.warn('[ThemeProvider] localStorage write failed:', error)
+      }
+    }
+    const resolved = newTheme === 'system' ? getSystemTheme() : newTheme
+    setResolvedTheme(resolved)
+    applyTheme(resolved)
+  }, [])
+
+  const value = React.useMemo(
+    () => ({ theme, resolvedTheme, setTheme }),
+    [theme, resolvedTheme, setTheme]
+  )
+
+  // Prevent flash of wrong theme during hydration
+  if (!mounted) {
+    return <>{children}</>
+  }
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+
+export function useTheme(): ThemeContextValue {
+  const context = React.useContext(ThemeContext)
+  if (context === undefined) {
+    // Return safe defaults when not in provider (e.g., server render)
+    return {
+      theme: 'system',
+      resolvedTheme: 'light',
+      setTheme: () => {},
+    }
+  }
+  return context
+}
+

package/src/theme/ThemeToggle.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import * as React from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from './ThemeProvider'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+type ThemeToggleProps = {
+  className?: string
+}
+
+export function ThemeToggle({ className }: ThemeToggleProps) {
+  const { resolvedTheme, setTheme } = useTheme()
+  const t = useT()
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const isDark = resolvedTheme === 'dark'
+  const toggleLabel = t('common.theme.toggle', 'Toggle theme')
+
+  const toggle = () => {
+    setTheme(isDark ? 'light' : 'dark')
+  }
+
+  // Render placeholder during SSR to prevent hydration mismatch
+  if (!mounted) {
+    return (
+      <div
+        className={cn(
+          'relative flex h-7 w-14 items-center rounded-full bg-muted p-1',
+          className
+        )}
+        aria-hidden="true"
+      >
+        <div className="flex w-full justify-between px-1">
+          <Sun className="size-3.5 text-muted-foreground" />
+          <Moon className="size-3.5 text-muted-foreground" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isDark}
+      aria-label={toggleLabel}
+      onClick={toggle}
+      className={cn(
+        'relative flex h-7 w-14 cursor-pointer items-center rounded-full p-1 transition-colors',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        isDark ? 'bg-primary' : 'bg-muted',
+        className
+      )}
+    >
+      {/* Sliding indicator */}
+      <span
+        className={cn(
+          'absolute size-5 rounded-full bg-background shadow-sm transition-transform duration-200 motion-reduce:transition-none',
+          isDark ? 'translate-x-7' : 'translate-x-0'
+        )}
+      />
+      {/* Icons */}
+      <span className="relative flex w-full justify-between px-0.5">
+        <Sun
+          className={cn(
+            'size-3.5 transition-colors motion-reduce:transition-none',
+            isDark ? 'text-muted-foreground' : 'text-amber-500'
+          )}
+        />
+        <Moon
+          className={cn(
+            'size-3.5 transition-colors motion-reduce:transition-none',
+            isDark ? 'text-primary-foreground' : 'text-muted-foreground'
+          )}
+        />
+      </span>
+      <span className="sr-only">
+        {isDark ? t('common.theme.dark', 'Dark') : t('common.theme.light', 'Light')}
+      </span>
+    </button>
+  )
+}

package/src/theme/index.ts

@@ -0,0 +1,3 @@
+export { ThemeProvider, useTheme } from './ThemeProvider'
+export { ThemeToggle } from './ThemeToggle'
+export { QueryProvider } from './QueryProvider'

package/src/types/react-big-calendar.d.ts

@@ -0,0 +1,16 @@
+declare module 'react-big-calendar' {
+  import * as React from 'react'
+
+  export type View = 'month' | 'week' | 'day' | 'agenda' | string
+
+  export type SlotInfo = {
+    start: Date
+    end: Date
+    slots: Date[]
+    action: 'select' | 'click' | 'doubleClick'
+  }
+
+  export function dateFnsLocalizer(_config: Record<string, unknown>): unknown
+
+  export const Calendar: React.ComponentType<Record<string, unknown>>
+}

package/tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": false,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"]
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/__tests__/**"]
+}

package/watch.mjs

@@ -0,0 +1,6 @@
+import { watch } from '../../scripts/watch.mjs'
+import { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+watch(__dirname)