@fayz-ai/ui 0.8.4 → 0.8.5

package/src/dashboard/ChartWidget.tsx

@@ -1,27 +1,8 @@
 import * as React from 'react'
-import {
-  ResponsiveContainer,
-  LineChart, Line,
-  BarChart, Bar,
-  AreaChart, Area,
-  PieChart, Pie, Cell,
-  XAxis, YAxis, CartesianGrid, Tooltip, Legend,
-} from 'recharts'
 import { Card, CardContent, CardHeader, CardTitle } from '../primitives/card'
 import { renderIcon } from './icon'
 import type { ChartSeries, ChartType, IconRef } from './types'
 
-/** Theme-driven palette (HSL triplet CSS vars defined in styles.css). */
-const PALETTE = [
-  'hsl(var(--info))',
-  'hsl(var(--magic))',
-  'hsl(var(--success))',
-  'hsl(var(--warning))',
-  'hsl(var(--destructive))',
-]
-const AXIS = 'hsl(var(--muted-foreground))'
-const GRID = 'hsl(var(--border))'
-
 export interface ChartWidgetProps {
   type: ChartType
   /** Rows of data; each key referenced by a series.dataKey. */
@@ -37,12 +18,15 @@ export interface ChartWidgetProps {
   className?: string
 }
 
+// The recharts body is lazy so recharts ships as an async chunk instead of in
+// every consumer's entry bundle; the Card shell renders immediately and the
+// fallback reserves the chart's height to avoid layout shift.
+const ChartWidgetInner = React.lazy(() => import('./ChartWidgetInner'))
+
 /** recharts-backed chart in a Card. Replaces the hand-rolled CSS bar charts. */
 export function ChartWidget({
   type, data, series, categoryKey = 'name', title, icon, headerAction, height = 240, className,
 }: ChartWidgetProps) {
-  const color = (i: number, explicit?: string) => explicit ?? PALETTE[i % PALETTE.length]
-
   return (
     <Card className={className}>
       {(title || headerAction) && (
@@ -57,50 +41,9 @@ export function ChartWidget({
         </CardHeader>
       )}
       <CardContent className="p-4 pt-2">
-        <ResponsiveContainer width="100%" height={height}>
-          {type === 'pie' ? (
-            <PieChart>
-              <Tooltip />
-              <Pie data={data} dataKey={series[0]?.dataKey ?? 'value'} nameKey={categoryKey} innerRadius={50} outerRadius={80} paddingAngle={2}>
-                {data.map((_, i) => <Cell key={i} fill={color(i, series[0]?.color)} />)}
-              </Pie>
-              <Legend />
-            </PieChart>
-          ) : type === 'bar' ? (
-            <BarChart data={data}>
-              <CartesianGrid strokeDasharray="3 3" stroke={GRID} vertical={false} />
-              <XAxis dataKey={categoryKey} stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} />
-              <YAxis stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} width={36} />
-              <Tooltip cursor={{ fill: GRID, opacity: 0.3 }} />
-              {series.length > 1 && <Legend />}
-              {series.map((s, i) => (
-                <Bar key={s.dataKey} dataKey={s.dataKey} name={s.label ?? s.dataKey} fill={color(i, s.color)} radius={[4, 4, 0, 0]} />
-              ))}
-            </BarChart>
-          ) : type === 'area' ? (
-            <AreaChart data={data}>
-              <CartesianGrid strokeDasharray="3 3" stroke={GRID} vertical={false} />
-              <XAxis dataKey={categoryKey} stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} />
-              <YAxis stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} width={36} />
-              <Tooltip />
-              {series.length > 1 && <Legend />}
-              {series.map((s, i) => (
-                <Area key={s.dataKey} dataKey={s.dataKey} name={s.label ?? s.dataKey} stroke={color(i, s.color)} fill={color(i, s.color)} fillOpacity={0.15} />
-              ))}
-            </AreaChart>
-          ) : (
-            <LineChart data={data}>
-              <CartesianGrid strokeDasharray="3 3" stroke={GRID} vertical={false} />
-              <XAxis dataKey={categoryKey} stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} />
-              <YAxis stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} width={36} />
-              <Tooltip />
-              {series.length > 1 && <Legend />}
-              {series.map((s, i) => (
-                <Line key={s.dataKey} dataKey={s.dataKey} name={s.label ?? s.dataKey} stroke={color(i, s.color)} strokeWidth={2} dot={false} />
-              ))}
-            </LineChart>
-          )}
-        </ResponsiveContainer>
+        <React.Suspense fallback={<div style={{ height }} />}>
+          <ChartWidgetInner type={type} data={data} series={series} categoryKey={categoryKey} height={height} />
+        </React.Suspense>
       </CardContent>
     </Card>
   )

package/src/dashboard/ChartWidgetInner.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react'
+import {
+  ResponsiveContainer,
+  LineChart, Line,
+  BarChart, Bar,
+  AreaChart, Area,
+  PieChart, Pie, Cell,
+  XAxis, YAxis, CartesianGrid, Tooltip, Legend,
+} from 'recharts'
+import type { ChartSeries, ChartType } from './types'
+
+/** Theme-driven palette (HSL triplet CSS vars defined in styles.css). */
+const PALETTE = [
+  'hsl(var(--info))',
+  'hsl(var(--magic))',
+  'hsl(var(--success))',
+  'hsl(var(--warning))',
+  'hsl(var(--destructive))',
+]
+const AXIS = 'hsl(var(--muted-foreground))'
+const GRID = 'hsl(var(--border))'
+
+export interface ChartWidgetInnerProps {
+  type: ChartType
+  data: Array<Record<string, string | number>>
+  series: ChartSeries[]
+  categoryKey: string
+  height: number
+}
+
+// recharts-backed chart body. Default export + own module so ChartWidget can
+// React.lazy it — recharts (~400 KB min) then lives in an async chunk instead
+// of every consumer's entry bundle.
+export default function ChartWidgetInner({ type, data, series, categoryKey, height }: ChartWidgetInnerProps) {
+  const color = (i: number, explicit?: string) => explicit ?? PALETTE[i % PALETTE.length]
+
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      {type === 'pie' ? (
+        <PieChart>
+          <Tooltip />
+          <Pie data={data} dataKey={series[0]?.dataKey ?? 'value'} nameKey={categoryKey} innerRadius={50} outerRadius={80} paddingAngle={2}>
+            {data.map((_, i) => <Cell key={i} fill={color(i, series[0]?.color)} />)}
+          </Pie>
+          <Legend />
+        </PieChart>
+      ) : type === 'bar' ? (
+        <BarChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" stroke={GRID} vertical={false} />
+          <XAxis dataKey={categoryKey} stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} />
+          <YAxis stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} width={36} />
+          <Tooltip cursor={{ fill: GRID, opacity: 0.3 }} />
+          {series.length > 1 && <Legend />}
+          {series.map((s, i) => (
+            <Bar key={s.dataKey} dataKey={s.dataKey} name={s.label ?? s.dataKey} fill={color(i, s.color)} radius={[4, 4, 0, 0]} />
+          ))}
+        </BarChart>
+      ) : type === 'area' ? (
+        <AreaChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" stroke={GRID} vertical={false} />
+          <XAxis dataKey={categoryKey} stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} />
+          <YAxis stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} width={36} />
+          <Tooltip />
+          {series.length > 1 && <Legend />}
+          {series.map((s, i) => (
+            <Area key={s.dataKey} dataKey={s.dataKey} name={s.label ?? s.dataKey} stroke={color(i, s.color)} fill={color(i, s.color)} fillOpacity={0.15} />
+          ))}
+        </AreaChart>
+      ) : (
+        <LineChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" stroke={GRID} vertical={false} />
+          <XAxis dataKey={categoryKey} stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} />
+          <YAxis stroke={AXIS} fontSize={12} tickLine={false} axisLine={false} width={36} />
+          <Tooltip />
+          {series.length > 1 && <Legend />}
+          {series.map((s, i) => (
+            <Line key={s.dataKey} dataKey={s.dataKey} name={s.label ?? s.dataKey} stroke={color(i, s.color)} strokeWidth={2} dot={false} />
+          ))}
+        </LineChart>
+      )}
+    </ResponsiveContainer>
+  )
+}

package/src/dashboard/icon.ts

@@ -1,12 +1,12 @@
 import * as React from 'react'
-import * as LucideIcons from 'lucide-react'
+import { getLucideIcon } from '../icons'
 import type { IconRef } from './types'
 
 /** Resolve an IconRef (lucide name or component) to a renderable element. */
 export function renderIcon(icon: IconRef | undefined, className = 'h-4 w-4'): React.ReactNode {
   if (!icon) return null
   if (typeof icon === 'string') {
-    const Comp = (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[icon]
+    const Comp = getLucideIcon(icon)
     return Comp ? React.createElement(Comp, { className }) : null
   }
   return React.createElement(icon, { className })

package/src/icons.ts

@@ -0,0 +1,66 @@
+import type { LucideIcon } from 'lucide-react'
+import {
+  Activity, AlertTriangle, Apple, ArrowDownCircle, ArrowDownRight, ArrowLeftRight, ArrowUpCircle, ArrowUpRight,
+  Award, BadgeDollarSign, Ban, Banknote, BarChart3, Bell, Bike, BookOpen,
+  BookOpenCheck, Box, Boxes, Briefcase, Building2, Calendar, CalendarCheck, CalendarCheck2,
+  CalendarClock, CalendarDays, CalendarPlus, CalendarX, Camera, Cat, Check, CheckCircle,
+  CheckSquare, ChefHat, ChevronsUpDown, Circle, CircleCheck, CircleDollarSign, Clapperboard, ClipboardList,
+  Clock, Clock3, Command, Compass, Contact, CreditCard, Disc3, Dog,
+  DollarSign, DoorOpen, Egg, ExternalLink, Eye, FileCheck2, FileDown,
+  FileText, Filter, Flame, FolderOpen, Globe, GraduationCap, Handshake, Heart,
+  Home, Image, Inbox, Instagram, Landmark, Layers, LayoutDashboard, LayoutTemplate,
+  Leaf, LeafyGreen, Link, List, ListChecks, ListMusic, ListPlus, Lock,
+  Mail, Map, MapPin, Megaphone, MessageCircle, MessageSquare, Mic, MoreHorizontal,
+  MousePointerClick, Music, Newspaper, Package, PackageCheck, Palette, PartyPopper, PawPrint,
+  Pencil, Percent, Phone, PieChart, Plug, Plus, PlusCircle, Puzzle, Radio,
+  Receipt, Repeat, RotateCcw, Ruler, Search, Send, Settings, Shield,
+  ShieldCheck, ShoppingBag, ShoppingCart, Sigma, SlidersHorizontal, Sparkles, Star, Tag,
+  Tags, Target, ToggleLeft, TreePalm, TrendingDown, TrendingUp, Trophy, Truck,
+  User, UserCheck, UserCog, UserPlus, UserX, Users, UsersRound, Utensils,
+  UtensilsCrossed, Wallet, Warehouse, Wheat, Workflow, Wrench, X, XCircle,
+  Zap,
+} from 'lucide-react'
+
+// ---------------------------------------------------------------------------
+// Central lucide icon registry. The SDK's manifest-driven surfaces resolve
+// icons by string name; a namespace import (`import * as LucideIcons`) defeats
+// tree-shaking and drags all ~1,500 icons (~500 KB min) into every bundle, so
+// the SDK ships this curated set instead — the union of every icon name the
+// SDK, plugins, and app templates reference. Apps using names outside the set
+// call registerIcons({ Name: Component }) with their own named imports.
+// ---------------------------------------------------------------------------
+
+const registry: Record<string, LucideIcon> = {
+  Activity, AlertTriangle, Apple, ArrowDownCircle, ArrowDownRight, ArrowLeftRight, ArrowUpCircle, ArrowUpRight,
+  Award, BadgeDollarSign, Ban, Banknote, BarChart3, Bell, Bike, BookOpen,
+  BookOpenCheck, Box, Boxes, Briefcase, Building2, Calendar, CalendarCheck, CalendarCheck2,
+  CalendarClock, CalendarDays, CalendarPlus, CalendarX, Camera, Cat, Check, CheckCircle,
+  CheckSquare, ChefHat, ChevronsUpDown, Circle, CircleCheck, CircleDollarSign, Clapperboard, ClipboardList,
+  Clock, Clock3, Command, Compass, Contact, CreditCard, Disc3, Dog,
+  DollarSign, DoorOpen, Egg, ExternalLink, Eye, FileCheck2, FileDown,
+  FileText, Filter, Flame, FolderOpen, Globe, GraduationCap, Handshake, Heart,
+  Home, Image, Inbox, Instagram, Landmark, Layers, LayoutDashboard, LayoutTemplate,
+  Leaf, LeafyGreen, Link, List, ListChecks, ListMusic, ListPlus, Lock,
+  Mail, Map, MapPin, Megaphone, MessageCircle, MessageSquare, Mic, MoreHorizontal,
+  MousePointerClick, Music, Newspaper, Package, PackageCheck, Palette, PartyPopper, PawPrint,
+  Pencil, Percent, Phone, PieChart, Plug, Plus, PlusCircle, Puzzle, Radio,
+  Receipt, Repeat, RotateCcw, Ruler, Search, Send, Settings, Shield,
+  ShieldCheck, ShoppingBag, ShoppingCart, Sigma, SlidersHorizontal, Sparkles, Star, Tag,
+  Tags, Target, ToggleLeft, TreePalm, TrendingDown, TrendingUp, Trophy, Truck,
+  User, UserCheck, UserCog, UserPlus, UserX, Users, UsersRound, Utensils,
+  UtensilsCrossed, Wallet, Warehouse, Wheat, Workflow, Wrench, X, XCircle,
+  Zap,
+}
+
+/** Add or override icons resolvable by string name (e.g. from app manifests). */
+export function registerIcons(icons: Record<string, LucideIcon>): void {
+  Object.assign(registry, icons)
+}
+
+/** Resolve a lucide icon by name; undefined when not registered. */
+export function getLucideIcon(name: string): LucideIcon | undefined {
+  return registry[name]
+}
+
+/** The registered icon map (live reference — do not mutate directly). */
+export const ICON_MAP = registry

package/src/index.ts

@@ -228,3 +228,7 @@ export {
   type ChartType,
   type ChartSeries,
 } from './dashboard'
+
+// Central lucide icon registry — curated tree-shakable set + escape hatch for
+// apps that need icon names outside it (registerIcons({ Name: Component })).
+export { registerIcons, getLucideIcon } from './icons'

package/src/layout/Sidebar.tsx

@@ -1,106 +1,10 @@
 import * as React from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import {
-  Crown,
-  ExternalLink,
-  Home,
-  Users,
-  Settings,
-  CreditCard,
-  Bell,
-  Calendar,
-  CalendarClock,
-  Package,
-  Activity,
-  BarChart3,
-  FileText,
-  Mail,
-  PanelLeftClose,
-  PanelLeft,
-  Search,
-  Shield,
-  DollarSign,
-  Megaphone,
-  Receipt,
-  ShoppingCart,
-  ShoppingBag,
-  Target,
-  Wrench,
-  Truck,
-  ClipboardList,
-  ListChecks,
-  Briefcase,
-  UserCog,
-  BookOpen,
-  BookOpenCheck,
-  MessageCircle,
-  Globe,
-  Percent,
-  Tag,
-  Tags,
-  Camera,
-  UtensilsCrossed,
-  MapPin,
-  Map,
-  Handshake,
-  Contact,
-  Building2,
-  Filter,
-  Plus,
-  List,
-  ListPlus,
-  ChevronDown,
-  Ban,
-  Clock,
-  Dog,
-  Cat,
-  PawPrint,
-  Heart,
-  FolderOpen,
-  LayoutTemplate,
-  LeafyGreen,
-  Apple,
-  Egg,
-  Wheat,
-  PartyPopper,
-  Radio,
-  CalendarDays,
-  CalendarCheck2,
-  CalendarX,
-  BadgeDollarSign,
-  Banknote,
-  Landmark,
-  CircleDollarSign,
-  Layers,
-  Music,
-  Eye,
-  ListMusic,
-  Disc3,
-  UsersRound,
-  Mic,
-  Zap,
-  Award,
-  LayoutDashboard,
-  MessageSquare,
-  Inbox,
-  Star,
-  TrendingUp,
-  GraduationCap,
-  Repeat,
-  UserCheck,
-  UserPlus,
-  UserX,
-  Workflow,
-  Boxes,
-  Clock3,
-  FileCheck2,
-  User,
-  Palette,
-  ShieldCheck,
-  SlidersHorizontal,
-  Puzzle,
+  Bell, ChevronDown, Crown, ExternalLink, Home, PanelLeft, PanelLeftClose, Search, Settings, User,
   type LucideIcon,
 } from 'lucide-react'
+import { ICON_MAP } from '../icons'
 import { cn } from '../utils/cn'
 import { useLayoutStore } from '../stores/layout.store'
 
@@ -166,18 +70,8 @@ export interface SidebarProps {
   navDirection?: 'forward' | 'back'
 }
 
-const ICON_MAP: Record<string, LucideIcon> = {
-  Home, Users, Settings, CreditCard, Bell, Calendar, CalendarClock, Package, Activity, BarChart3,
-  FileText, Mail, DollarSign, Megaphone, ShoppingCart, Target, Wrench, Truck,
-  Receipt, ShoppingBag, ClipboardList, ListChecks, Briefcase, UserCog, BookOpen, BookOpenCheck, MessageCircle, Globe,
-  Percent, Tag, Tags, Camera, UtensilsCrossed, MapPin, Map, Handshake, Contact,
-  Building2, Filter, Plus, List, ListPlus, Search, Shield, Ban, Clock, Dog, Cat, PawPrint, Heart, FolderOpen, LayoutTemplate, LeafyGreen, Apple, Egg, Wheat,
-  PartyPopper, Radio, CalendarDays, CalendarCheck2, CalendarX, BadgeDollarSign, Banknote, Landmark, CircleDollarSign, Layers, Music, Eye, ListMusic, Disc3, UsersRound, Mic,
-  Zap, Award, LayoutDashboard, MessageSquare, Inbox, Star, TrendingUp, UserCheck, UserPlus, UserX, Workflow, Boxes, Clock3, FileCheck2,
-  GraduationCap, Repeat,
-  User, Palette, ShieldCheck, SlidersHorizontal, Puzzle,
-}
-
+// ICON_MAP now lives in ../icons (central curated registry, shared by every
+// string-name icon lookup in the SDK); re-exported here for compat.
 export { ICON_MAP }
 
 /** Kept in sync with --saas-rail-duration in styles.css. */

package/src/primitives/date-picker.tsx

@@ -28,6 +28,17 @@ function formatDate(date: Date, locale: string) {
   return date.toLocaleDateString(toDateLocale(locale), { month: 'short', day: 'numeric', year: 'numeric' })
 }
 
+/** Toolbar label: the year is noise while you're inside it, and two of these sit
+ *  side by side in a range — it only earns its space on another year. */
+function formatDateCompact(date: Date, locale: string) {
+  const sameYear = date.getFullYear() === new Date().getFullYear()
+  return date.toLocaleDateString(toDateLocale(locale), {
+    month: 'short',
+    day: 'numeric',
+    ...(sameYear ? {} : { year: 'numeric' }),
+  })
+}
+
 function toDateStr(d: Date) {
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
 }
@@ -42,13 +53,24 @@ interface DatePickerProps {
   value: string
   onChange: (value: string) => void
   className?: string
+  /**
+   * `input` (default) is the form-field trigger. `toolbar` is the 26px pill that
+   * matches SegmentedControl/Button `sm`, for filter bars where a full-height
+   * form field towers over everything beside it.
+   */
+  variant?: 'input' | 'toolbar'
   /** Open the dropdown immediately on mount */
   defaultOpen?: boolean
   /** Called when the dropdown opens or closes */
   onOpenChange?: (open: boolean) => void
 }
 
-export function DatePicker({ value, onChange, className, defaultOpen, onOpenChange }: DatePickerProps) {
+const TRIGGER_VARIANT: Record<'input' | 'toolbar', string> = {
+  input: 'rounded-input border border-input bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm w-full',
+  toolbar: 'h-[26px] rounded-button border border-border bg-card shadow-button px-2.5 text-xs font-medium',
+}
+
+export function DatePicker({ value, onChange, className, variant = 'input', defaultOpen, onOpenChange }: DatePickerProps) {
   const t = useTranslation()
   const locale = getCurrentLocale()
   const [open, setOpen] = useState(defaultOpen ?? false)
@@ -129,9 +151,13 @@ export function DatePicker({ value, onChange, className, defaultOpen, onOpenChan
     <div ref={ref} className={`relative ${className ?? ''}`}>
       {/* Trigger */}
       <button ref={triggerRef} type="button" onClick={() => setOpen((p) => !p)}
-        className="flex items-center gap-2 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm hover:bg-muted/30  transition-colors w-full text-left">
-        <Calendar className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-        <span>{value ? formatDate(selectedDate, locale) : t('common.selectDate')}</span>
+        className={`flex items-center gap-2 text-left transition-colors hover:bg-muted/30 ${TRIGGER_VARIANT[variant]}`}>
+        <Calendar className={`shrink-0 text-muted-foreground ${variant === 'toolbar' ? 'h-3 w-3' : 'h-3.5 w-3.5'}`} />
+        <span className="whitespace-nowrap">
+          {value
+            ? (variant === 'toolbar' ? formatDateCompact : formatDate)(selectedDate, locale)
+            : t('common.selectDate')}
+        </span>
       </button>
 
       {/* Dropdown — portal to escape overflow containers */}

package/dist/chunk-2P7T6QQK.cjs

@@ -1,206 +0,0 @@
-'use strict';
-
-// src/theme/preset.ts
-var fayzUiPreset = {
-  darkMode: "class",
-  theme: {
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))"
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))"
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))"
-        },
-        success: {
-          DEFAULT: "hsl(var(--success))",
-          foreground: "hsl(var(--success-foreground))"
-        },
-        warning: {
-          DEFAULT: "hsl(var(--warning))",
-          foreground: "hsl(var(--warning-foreground))"
-        },
-        info: {
-          DEFAULT: "hsl(var(--info))",
-          foreground: "hsl(var(--info-foreground))"
-        },
-        magic: {
-          DEFAULT: "hsl(var(--magic))",
-          foreground: "hsl(var(--magic-foreground))"
-        },
-        "info-soft": {
-          DEFAULT: "hsl(var(--info-soft))",
-          foreground: "hsl(var(--info-soft-foreground))"
-        },
-        "success-soft": {
-          DEFAULT: "hsl(var(--success-soft))",
-          foreground: "hsl(var(--success-soft-foreground))"
-        },
-        "warning-soft": {
-          DEFAULT: "hsl(var(--warning-soft))",
-          foreground: "hsl(var(--warning-soft-foreground))"
-        },
-        "destructive-soft": {
-          DEFAULT: "hsl(var(--destructive-soft))",
-          foreground: "hsl(var(--destructive-soft-foreground))"
-        },
-        "magic-soft": {
-          DEFAULT: "hsl(var(--magic-soft))",
-          foreground: "hsl(var(--magic-soft-foreground))"
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))"
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))"
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))"
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))"
-        },
-        // Layout surface tokens
-        sidebar: {
-          DEFAULT: "hsl(var(--sidebar))",
-          foreground: "hsl(var(--sidebar-foreground))",
-          border: "hsl(var(--sidebar-border))",
-          accent: "hsl(var(--sidebar-accent))",
-          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-          muted: "hsl(var(--sidebar-muted))"
-        },
-        content: "hsl(var(--content))"
-      },
-      borderRadius: {
-        button: "var(--button-radius)",
-        card: "var(--card-radius)",
-        input: "var(--input-radius)",
-        modal: "var(--modal-radius)"
-      },
-      fontFamily: {
-        sans: ["var(--font-family)"],
-        mono: ["var(--font-family-mono)"]
-      },
-      boxShadow: {
-        sm: "var(--shadow-sm)",
-        md: "var(--shadow-md)",
-        lg: "var(--shadow-lg)",
-        button: "var(--shadow-button)",
-        "button-primary": "var(--shadow-button-primary)",
-        "button-inset": "var(--shadow-button-inset)"
-      },
-      keyframes: {
-        "fade-in": {
-          from: { opacity: "0" },
-          to: { opacity: "1" }
-        },
-        "fade-out": {
-          from: { opacity: "1" },
-          to: { opacity: "0" }
-        },
-        "zoom-in": {
-          from: { transform: "scale(0.95)", opacity: "0" },
-          to: { transform: "scale(1)", opacity: "1" }
-        },
-        "zoom-out": {
-          from: { transform: "scale(1)", opacity: "1" },
-          to: { transform: "scale(0.95)", opacity: "0" }
-        },
-        "slide-in-from-top": {
-          from: { transform: "translateY(-4px)", opacity: "0" },
-          to: { transform: "translateY(0)", opacity: "1" }
-        },
-        "slide-in-from-bottom": {
-          from: { transform: "translateY(4px)", opacity: "0" },
-          to: { transform: "translateY(0)", opacity: "1" }
-        },
-        "slide-out-to-top": {
-          from: { transform: "translateY(0)", opacity: "1" },
-          to: { transform: "translateY(-4px)", opacity: "0" }
-        },
-        "page-in": {
-          from: { opacity: "0", transform: "translateY(6px)" },
-          to: { opacity: "1", transform: "translateY(0)" }
-        },
-        "slide-in-from-right": {
-          from: { transform: "translateX(100%)" },
-          to: { transform: "translateX(0)" }
-        },
-        "slide-out-to-right": {
-          from: { transform: "translateX(0)" },
-          to: { transform: "translateX(100%)" }
-        },
-        "fade-up": {
-          from: { opacity: "0", transform: "translateY(18px)" },
-          to: { opacity: "1", transform: "translateY(0)" }
-        },
-        kenburns: {
-          from: { transform: "scale(1)" },
-          to: { transform: "scale(1.07)" }
-        },
-        "badge-pop": {
-          "0%": { transform: "scale(0.6)" },
-          "60%": { transform: "scale(1.25)" },
-          "100%": { transform: "scale(1)" }
-        },
-        "draw-check": {
-          from: { "stroke-dashoffset": "48" },
-          to: { "stroke-dashoffset": "0" }
-        },
-        "pop-in": {
-          "0%": { transform: "scale(0)", opacity: "0" },
-          "70%": { transform: "scale(1.15)", opacity: "1" },
-          "100%": { transform: "scale(1)", opacity: "1" }
-        },
-        "confetti-fall": {
-          "0%": { transform: "translateY(-10px) rotate(0deg)", opacity: "1" },
-          "100%": { transform: "translateY(140px) rotate(540deg)", opacity: "0" }
-        },
-        "pulse-soft": {
-          "0%, 100%": { opacity: "1" },
-          "50%": { opacity: "0.55" }
-        }
-      },
-      animation: {
-        "fade-in": "fade-in 200ms ease-out",
-        "fade-out": "fade-out 150ms ease-in",
-        "zoom-in": "zoom-in 200ms ease-out",
-        "zoom-out": "zoom-out 150ms ease-in",
-        "slide-in-from-top": "slide-in-from-top 200ms ease-out",
-        "slide-in-from-bottom": "slide-in-from-bottom 200ms ease-out",
-        "slide-out-to-top": "slide-out-to-top 150ms ease-in",
-        "slide-in-from-right": "slide-in-from-right 250ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "slide-out-to-right": "slide-out-to-right 200ms ease-in",
-        "page-in": "page-in 250ms ease-out",
-        "fade-up": "fade-up 600ms cubic-bezier(0.16, 1, 0.3, 1) both",
-        kenburns: "kenburns 9s ease-out both",
-        "badge-pop": "badge-pop 350ms cubic-bezier(0.34, 1.56, 0.64, 1)",
-        "draw-check": "draw-check 600ms ease-out 250ms both",
-        "pop-in": "pop-in 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both",
-        "confetti-fall": "confetti-fall 1100ms ease-in both",
-        "pulse-soft": "pulse-soft 1.6s ease-in-out infinite"
-      }
-    }
-  }
-};
-var preset_default = fayzUiPreset;
-
-exports.fayzUiPreset = fayzUiPreset;
-exports.preset_default = preset_default;
-//# sourceMappingURL=chunk-2P7T6QQK.cjs.map
-//# sourceMappingURL=chunk-2P7T6QQK.cjs.map