@fayz-ai/ui 0.9.0 → 0.10.1

package/src/primitives/sheet.tsx

@@ -1,181 +0,0 @@
-import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { X } from 'lucide-react'
-
-import { cn } from '../utils/cn'
-
-// ---------------------------------------------------------------------------
-// Inject sheet animations once (module-level side effect)
-// ---------------------------------------------------------------------------
-
-const STYLE_ID = 'saas-sheet-styles'
-if (typeof document !== 'undefined' && !document.getElementById(STYLE_ID)) {
-  const style = document.createElement('style')
-  style.id = STYLE_ID
-  style.textContent = `
-    @keyframes saas-sheet-fade-in { from { opacity: 0 } to { opacity: 1 } }
-    @keyframes saas-sheet-fade-out { from { opacity: 1 } to { opacity: 0 } }
-    @keyframes saas-sheet-slide-in { from { transform: translateX(100%) } to { transform: translateX(0) } }
-    @keyframes saas-sheet-slide-out { from { transform: translateX(0) } to { transform: translateX(100%) } }
-    .saas-sheet-overlay[data-state="open"] { animation: saas-sheet-fade-in 200ms ease-out }
-    .saas-sheet-overlay[data-state="closed"] { animation: saas-sheet-fade-out 150ms ease-in }
-    .saas-sheet-content[data-state="open"] { animation: saas-sheet-slide-in 280ms cubic-bezier(0.16, 1, 0.3, 1) }
-    .saas-sheet-content[data-state="closed"] { animation: saas-sheet-slide-out 200ms ease-in }
-  `
-  document.head.appendChild(style)
-}
-
-// ---------------------------------------------------------------------------
-// Root, Trigger, Close — re-exported from Radix
-// ---------------------------------------------------------------------------
-
-const Sheet = DialogPrimitive.Root
-const SheetTrigger = DialogPrimitive.Trigger
-const SheetClose = DialogPrimitive.Close
-const SheetPortal = DialogPrimitive.Portal
-
-// ---------------------------------------------------------------------------
-// Overlay
-// ---------------------------------------------------------------------------
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'saas-sheet-overlay fixed inset-0 z-50 bg-black/40 backdrop-blur-[2px]',
-      className
-    )}
-    {...props}
-  />
-))
-SheetOverlay.displayName = 'SheetOverlay'
-
-// ---------------------------------------------------------------------------
-// Content — slides in from the right
-// ---------------------------------------------------------------------------
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-    /** Width class override — defaults to max-w-md */
-    width?: string
-    /** Hide the built-in close button */
-    hideClose?: boolean
-    /** Overlay style: "blur" (default), "dim" (no blur), "none" (transparent) */
-    overlay?: 'blur' | 'dim' | 'none'
-  }
->(({ className, children, width, hideClose, overlay = 'blur', ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay className={overlay === 'none' ? 'bg-transparent backdrop-blur-0' : overlay === 'dim' ? 'backdrop-blur-0' : undefined} />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fayz-glass-surface saas-sheet-content fixed inset-y-0 right-0 z-50 flex flex-col border-l bg-card shadow-2xl outline-none',
-        'w-full',
-        width ?? 'max-w-md',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {!hideClose && (
-        <DialogPrimitive.Close className="absolute right-4 top-4 z-10 flex h-7 w-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring">
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      )}
-    </DialogPrimitive.Content>
-  </SheetPortal>
-))
-SheetContent.displayName = 'SheetContent'
-
-// ---------------------------------------------------------------------------
-// Header — top section with title + description
-// ---------------------------------------------------------------------------
-
-function SheetHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('flex flex-col gap-1 px-5 py-4 border-b shrink-0', className)}
-      {...props}
-    />
-  )
-}
-SheetHeader.displayName = 'SheetHeader'
-
-// ---------------------------------------------------------------------------
-// Footer — bottom section for actions
-// ---------------------------------------------------------------------------
-
-function SheetFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('flex items-center gap-2 px-5 py-3 border-t shrink-0', className)}
-      {...props}
-    />
-  )
-}
-SheetFooter.displayName = 'SheetFooter'
-
-// ---------------------------------------------------------------------------
-// Title
-// ---------------------------------------------------------------------------
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn('text-sm font-semibold leading-none tracking-tight', className)}
-    {...props}
-  />
-))
-SheetTitle.displayName = 'SheetTitle'
-
-// ---------------------------------------------------------------------------
-// Description
-// ---------------------------------------------------------------------------
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn('text-xs text-muted-foreground', className)}
-    {...props}
-  />
-))
-SheetDescription.displayName = 'SheetDescription'
-
-// ---------------------------------------------------------------------------
-// Body — scrollable content area
-// ---------------------------------------------------------------------------
-
-function SheetBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('flex-1 overflow-y-auto px-5 py-5', className)}
-      {...props}
-    />
-  )
-}
-SheetBody.displayName = 'SheetBody'
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetBody,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}

package/src/primitives/skeleton.tsx

@@ -1,46 +0,0 @@
-import { cn } from '../utils/cn'
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('animate-pulse rounded-md bg-muted', className)}
-      {...props}
-    />
-  )
-}
-
-/**
- * Skeleton loader that mimics a table with rows and columns.
- * Drop-in replacement for "Loading..." text in list views.
- */
-function TableSkeleton({ columns = 4, rows = 2 }: { columns?: number; rows?: number }) {
-  return (
-    <div className="rounded-lg border overflow-hidden">
-      <div className="border-b bg-muted/30 flex gap-4 px-4 py-2.5">
-        {Array.from({ length: columns }).map((_, i) => (
-          <Skeleton key={i} className="h-3 flex-1 rounded bg-muted-foreground/10" />
-        ))}
-      </div>
-      <div className="divide-y">
-        {Array.from({ length: rows }).map((_, r) => (
-          <div key={r} className="flex items-center gap-4 px-4 py-3.5">
-            {Array.from({ length: columns }).map((_, c) => (
-              <Skeleton
-                key={c}
-                className={cn(
-                  'h-3 rounded',
-                  c === 0 ? 'flex-[2]' : 'flex-1',
-                )}
-              />
-            ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export { Skeleton, TableSkeleton }

package/src/primitives/tabs.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
-
-import { cn } from '../utils/cn'
-
-const Tabs = TabsPrimitive.Root
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
-      className
-    )}
-    {...props}
-  />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 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 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-      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',
-      className
-    )}
-    {...props}
-  />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/primitives/time-picker.tsx

@@ -1,148 +0,0 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react'
-import { createPortal } from 'react-dom'
-import { Clock } from 'lucide-react'
-
-// ---------------------------------------------------------------------------
-// TimePicker — dropdown time slot selector, Google Calendar style
-// ---------------------------------------------------------------------------
-
-function formatTime12(h: number, m: number) {
-  const period = h >= 12 ? 'pm' : 'am'
-  const h12 = h % 12 || 12
-  return `${h12}:${String(m).padStart(2, '0')}${period}`
-}
-
-function formatTime24(h: number, m: number) {
-  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
-}
-
-interface TimePickerProps {
-  /** Value as HH:MM (24h) */
-  value: string
-  onChange: (value: string) => void
-  /** Interval in minutes between slots (default: 15) */
-  interval?: number
-  /** Min time as HH:MM (default: '00:00') */
-  min?: string
-  /** Max time as HH:MM (default: '23:45') */
-  max?: string
-  /** Use 12h format for display (default: false) */
-  use12h?: boolean
-  /** Read-only mode */
-  readOnly?: boolean
-  className?: string
-  /** Open the dropdown immediately on mount */
-  defaultOpen?: boolean
-  /** Called when the dropdown opens or closes */
-  onOpenChange?: (open: boolean) => void
-}
-
-export function TimePicker({ value, onChange, interval = 15, min = '00:00', max = '23:45', use12h = false, readOnly, className, defaultOpen, onOpenChange }: TimePickerProps) {
-  const [open, setOpen] = useState(defaultOpen ?? false)
-  const ref = useRef<HTMLDivElement>(null)
-  const triggerRef = useRef<HTMLButtonElement>(null)
-  const listRef = useRef<HTMLDivElement>(null)
-  const [pos, setPos] = useState<{ top: number; left: number; width: number }>({ top: 0, left: 0, width: 0 })
-
-  // Position the portal dropdown
-  useEffect(() => {
-    if (!open || !triggerRef.current) return
-    const rect = triggerRef.current.getBoundingClientRect()
-    setPos({ top: rect.bottom + 4, left: rect.left, width: Math.max(rect.width, 120) })
-  }, [open])
-
-  useEffect(() => {
-    if (!open) return
-    const handler = (e: MouseEvent) => {
-      const target = e.target as Node
-      if (ref.current?.contains(target)) return
-      if (listRef.current?.contains(target)) return
-      setOpen(false)
-      onOpenChange?.(false)
-    }
-    document.addEventListener('mousedown', handler)
-    return () => document.removeEventListener('mousedown', handler)
-  }, [open])
-
-  // Scroll to selected time when opening
-  useEffect(() => {
-    if (!open || !listRef.current || !value) return
-    const el = listRef.current.querySelector('[data-selected="true"]')
-    if (el) el.scrollIntoView({ block: 'center' })
-  }, [open, value])
-
-  const slots = useMemo(() => {
-    const [minH, minM] = min.split(':').map(Number)
-    const [maxH, maxM] = max.split(':').map(Number)
-    const minTotal = minH * 60 + minM
-    const maxTotal = maxH * 60 + maxM
-    const result: { value: string; label: string }[] = []
-
-    for (let t = minTotal; t <= maxTotal; t += interval) {
-      const h = Math.floor(t / 60)
-      const m = t % 60
-      result.push({
-        value: formatTime24(h, m),
-        label: use12h ? formatTime12(h, m) : formatTime24(h, m),
-      })
-    }
-    return result
-  }, [interval, min, max, use12h])
-
-  const displayValue = useMemo(() => {
-    if (!value) return ''
-    const [h, m] = value.split(':').map(Number)
-    return use12h ? formatTime12(h, m) : formatTime24(h, m)
-  }, [value, use12h])
-
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (readOnly) return
-    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-      e.preventDefault()
-      const idx = slots.findIndex((s) => s.value === value)
-      const next = e.key === 'ArrowDown'
-        ? Math.min(idx + 1, slots.length - 1)
-        : Math.max(idx - 1, 0)
-      if (slots[next]) onChange(slots[next].value)
-    } else if (e.key === 'Enter' || e.key === 'Escape') {
-      setOpen(false)
-    }
-  }
-
-  return (
-    <div ref={ref} className={`relative ${className ?? ''}`}>
-      {/* Trigger */}
-      <button ref={triggerRef} type="button"
-        onClick={() => !readOnly && setOpen((p) => !p)}
-        onKeyDown={handleKeyDown}
-        disabled={readOnly}
-        className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm w-full text-left transition-colors ${
-          readOnly ? 'bg-muted/40 text-muted-foreground cursor-default' : 'bg-background hover:bg-muted/30'
-        }`}>
-        <Clock className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-        <span>{displayValue || '--:--'}</span>
-      </button>
-
-      {/* Dropdown — portal to escape overflow containers */}
-      {open && !readOnly && createPortal(
-        <div ref={listRef} data-modal-passthrough
-          style={{ position: 'fixed', top: pos.top, left: pos.left, width: pos.width, zIndex: 9999, pointerEvents: 'auto' }}
-          className="fayz-glass-surface min-w-[120px] max-h-48 overflow-y-auto rounded-xl border bg-popover shadow-xl py-1">
-          {slots.map((slot) => {
-            const selected = slot.value === value
-            return (
-              <button key={slot.value} type="button" data-selected={selected}
-                onClick={() => { onChange(slot.value); setOpen(false) }}
-                className={`block w-full px-3 py-1.5 text-sm text-left transition-colors ${
-                  selected ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-muted/50'
-                }`}>
-                {slot.label}
-              </button>
-            )
-          })}
-        </div>,
-        document.body,
-      )}
-    </div>
-  )
-}

package/src/primitives/toast.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react'
-import { Toaster, toast } from 'sonner'
-import { useSaveBarVisible } from '../layout/SaveBar'
-
-interface ToastProviderProps {
-  position?:
-    | 'top-left'
-    | 'top-center'
-    | 'top-right'
-    | 'bottom-left'
-    | 'bottom-center'
-    | 'bottom-right'
-  theme?: 'light' | 'dark' | 'system'
-}
-
-function ToastProvider({
-  position = 'bottom-center',
-  theme = 'system',
-}: ToastProviderProps) {
-  // Stack toasts ABOVE the floating SaveBar (instead of overlapping it) by
-  // lifting the bottom offset while the bar is on screen.
-  const saveBarVisible = useSaveBarVisible()
-  const bottomOffset = position.startsWith('bottom') && saveBarVisible ? 84 : 24
-  return (
-    <Toaster
-      position={position}
-      theme={theme}
-      offset={bottomOffset}
-      closeButton
-      richColors
-      toastOptions={{
-        classNames: {
-          // Format harmonized with the SaveBar island: soft ring + xl shadow,
-          // generous rounded-2xl radius (full-pill looks wrong on multi-line
-          // toasts). Colors stay semantic (richColors).
-          toast: 'group !gap-3 !rounded-3xl !border !px-4 !py-3 !shadow-xl !ring-1 !ring-black/5',
-          title: '!text-sm !font-semibold',
-          description: '!text-xs !mt-0.5',
-          closeButton: '!opacity-0 group-hover:!opacity-60 hover:!opacity-100 !transition-opacity',
-        },
-      }}
-    />
-  )
-}
-
-export { ToastProvider, toast }

package/src/primitives/tooltip.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
-
-import { cn } from '../utils/cn'
-
-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.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      'fayz-glass-surface z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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',
-      className
-    )}
-    {...props}
-  />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/stores/index.ts

@@ -1,10 +0,0 @@
-export { useLayoutStore } from './layout.store'
-export {
-  useThemeStore,
-  lightTheme,
-  darkTheme,
-  type ThemeTokens,
-  type SemanticColors,
-  type UIPerceptionTokens,
-  type CreateThemeOptions,
-} from './theme.store'

package/src/stores/layout.store.ts

@@ -1,31 +0,0 @@
-import { create } from 'zustand'
-
-interface LayoutState {
-  sidebarOpen: boolean
-  sidebarCollapsed: boolean
-  mobileDrawerOpen: boolean
-  commandPaletteOpen: boolean
-  toggleSidebar: () => void
-  setSidebarCollapsed: (collapsed: boolean) => void
-  toggleMobileDrawer: () => void
-  setCommandPaletteOpen: (open: boolean) => void
-}
-
-export const useLayoutStore = create<LayoutState>((set) => ({
-  sidebarOpen: true,
-  sidebarCollapsed: false,
-  mobileDrawerOpen: false,
-  commandPaletteOpen: false,
-
-  toggleSidebar: () =>
-    set((state) => ({ sidebarOpen: !state.sidebarOpen })),
-
-  setSidebarCollapsed: (collapsed) =>
-    set({ sidebarCollapsed: collapsed }),
-
-  toggleMobileDrawer: () =>
-    set((state) => ({ mobileDrawerOpen: !state.mobileDrawerOpen })),
-
-  setCommandPaletteOpen: (open) =>
-    set({ commandPaletteOpen: open }),
-}))