canvas-ui-sdk 0.3.21 → 0.3.23

package/registry/layout/sidebar.json

@@ -6,7 +6,7 @@
     {
       "path": "components/layout/sidebar.tsx",
       "type": "registry:layout",
-      "content": "\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { ScrollArea } from \"../ui/scroll-area\";\nimport { SidebarNav, NavSection, NavItem } from \"./sidebar-nav\";\nimport { useThemeImages, useThemeBranding } from \"../../context/theme-context\";\n\n// Phosphor Icons (Bold variant) - same curated set as variables-modal\nimport {\n  Diamond,\n  Hexagon,\n  Star,\n  Lightning,\n  Sparkle,\n  Infinity,\n  Code,\n  Terminal,\n  Cpu,\n  Database,\n  Globe,\n  Cloud,\n  WifiHigh,\n  Briefcase,\n  Buildings,\n  Storefront,\n  Handshake,\n  ChartLine,\n  Palette as PaletteIcon,\n  PencilSimple,\n  Camera,\n  MusicNote,\n  Lightbulb,\n  Leaf,\n  Tree,\n  Sun,\n  Moon,\n  Fire,\n  Drop,\n  ChatCircle,\n  Envelope,\n  Phone,\n  Megaphone,\n  Heart,\n  Shield,\n  Trophy,\n  Rocket,\n  Target,\n  Flag,\n  type Icon as PhosphorIcon,\n} from \"@phosphor-icons/react\";\n\n// ============================================\n// Icon Shape Presets for Logo Creator\n// ============================================\n\ntype IconShapeId = \"rounded\" | \"circle\" | \"square\";\n\ninterface IconShape {\n  id: IconShapeId;\n  renderBackground: (bgColor: string) => React.ReactNode;\n}\n\nconst iconShapes: IconShape[] = [\n  {\n    id: \"rounded\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <rect width=\"32\" height=\"32\" rx=\"10\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n  {\n    id: \"circle\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <circle cx=\"16\" cy=\"16\" r=\"16\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n  {\n    id: \"square\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <rect width=\"32\" height=\"32\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n];\n\n// Map icon names to components\nconst iconMap: Record<string, PhosphorIcon> = {\n  Diamond,\n  Hexagon,\n  Star,\n  Lightning,\n  Sparkle,\n  Infinity,\n  Code,\n  Terminal,\n  Cpu,\n  Database,\n  Globe,\n  Cloud,\n  WifiHigh,\n  Briefcase,\n  Buildings,\n  Storefront,\n  Handshake,\n  ChartLine,\n  Palette: PaletteIcon,\n  PencilSimple,\n  Camera,\n  MusicNote,\n  Lightbulb,\n  Leaf,\n  Tree,\n  Sun,\n  Moon,\n  Fire,\n  Drop,\n  ChatCircle,\n  Envelope,\n  Phone,\n  Megaphone,\n  Heart,\n  Shield,\n  Trophy,\n  Rocket,\n  Target,\n  Flag,\n};\n\n// Helper to resolve CSS variable references to actual hex colors\nfunction resolveBrandingColor(value: string): string {\n  if (!value) return \"#ffffff\";\n  if (value.startsWith(\"var(\")) {\n    const varName = value.replace(\"var(\", \"\").replace(\")\", \"\");\n    if (typeof window !== \"undefined\") {\n      const computed = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();\n      return computed || \"#ffffff\";\n    }\n    return \"#ffffff\";\n  }\n  return value;\n}\n\ninterface SidebarProps {\n  /** Navigation sections to display */\n  sections: NavSection[];\n  /** Visual variant - dark for desktop, light for mobile sheet */\n  variant?: \"dark\" | \"light\";\n  /** Callback when a nav item or subtab is clicked */\n  onItemClick?: (item: NavItem | Omit<NavItem, \"children\" | \"icon\">) => void;\n  /** Additional class names */\n  className?: string;\n}\n\n/**\n * Canvas Design System - Sidebar Component\n * \n * Desktop: Fixed dark sidebar (320px width) on the left\n * Mobile: Light theme sidebar rendered inside a Sheet\n */\nexport function Sidebar({ \n  sections, \n  variant = \"dark\", \n  onItemClick,\n  className \n}: SidebarProps) {\n  const isDark = variant === \"dark\";\n  const themeImages = useThemeImages();\n  const { branding, isMounted } = useThemeBranding();\n  \n  // Get the appropriate logo based on variant\n  const logoUrl = isDark ? themeImages.logoDark : themeImages.logoLight;\n  \n  // Get the icon shape renderer\n  const iconShape = iconShapes.find(s => s.id === branding.iconShape) || iconShapes[0];\n  \n  return (\n    <aside\n      className={cn(\n        \"flex flex-col h-full w-[var(--sidebar-width)]\",\n        isDark && \"bg-[var(--canvas-sidebar-dark-bg)] border-r border-[var(--canvas-sidebar-dark-border)]\",\n        !isDark && \"bg-[var(--canvas-background)] border-r border-[var(--canvas-border)]\",\n        className\n      )}\n    >\n      {/* Logo Section */}\n      <div className={cn(\n        \"flex items-center h-8 shrink-0\",\n        \"pt-11 pb-0 pr-[var(--spacing-2xl)] pl-9\"\n      )}>\n        {logoUrl ? (\n          // Custom logo replaces entire lockup (icon + wordmark)\n          <img \n            src={logoUrl} \n            alt=\"Logo\" \n            className={`h-8 w-auto object-contain ${isMounted ? 'opacity-100' : 'opacity-0'}`}\n          />\n        ) : (\n          // Logo creator: dynamic icon shape + Phosphor icon + wordmark\n          // Uses CSS variables directly - no JavaScript resolution needed\n          <div className=\"flex items-center\">\n            <div className=\"relative size-8 shrink-0\">\n              {iconShape.renderBackground(branding.bgColor || \"var(--canvas-primary)\")}\n              <div className=\"absolute inset-0 flex items-center justify-center z-10\">\n                {(() => {\n                  const IconComponent = iconMap[branding.iconName || \"Buildings\"] || Buildings;\n                  return <IconComponent weight=\"bold\" size={18} color={branding.iconColor || \"var(--canvas-primary-foreground)\"} />;\n                })()}\n              </div>\n            </div>\n            <span className={cn(\n              \"font-semibold ml-[var(--spacing-md)]\",\n              isDark ? \"text-white\" : \"text-[var(--canvas-text)]\"\n            )} style={{ fontSize: \"var(--typo-body-xl-size)\" }}>\n              {branding.wordmark || \"canvas\"}\n            </span>\n          </div>\n        )}\n      </div>\n\n      {/* Navigation */}\n      <ScrollArea className=\"flex-1 px-[var(--spacing-2xl)] pb-[var(--spacing-5xl)]\">\n        <SidebarNav \n          sections={sections} \n          variant={variant} \n          onItemClick={onItemClick}\n        />\n      </ScrollArea>\n    </aside>\n  );\n}\n\n// Re-export types for convenience\nexport type { NavSection, NavItem } from \"./sidebar-nav\";\n\n"
+      "content": "\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { ScrollArea } from \"../ui/scroll-area\";\nimport { SidebarNav, NavSection, NavItem } from \"./sidebar-nav\";\nimport { useThemeImages, useThemeBranding } from \"../../context/theme-context\";\n\n// Phosphor Icons (Bold variant) - same curated set as variables-modal\nimport {\n  Diamond,\n  Hexagon,\n  Star,\n  Lightning,\n  Sparkle,\n  Infinity,\n  Code,\n  Terminal,\n  Cpu,\n  Database,\n  Globe,\n  Cloud,\n  WifiHigh,\n  Briefcase,\n  Buildings,\n  Storefront,\n  Handshake,\n  ChartLine,\n  Palette as PaletteIcon,\n  PencilSimple,\n  Camera,\n  MusicNote,\n  Lightbulb,\n  Leaf,\n  Tree,\n  Sun,\n  Moon,\n  Fire,\n  Drop,\n  ChatCircle,\n  Envelope,\n  Phone,\n  Megaphone,\n  Heart,\n  Shield,\n  Trophy,\n  Rocket,\n  Target,\n  Flag,\n  type Icon as PhosphorIcon,\n} from \"@phosphor-icons/react\";\n\n// ============================================\n// Icon Shape Presets for Logo Creator\n// ============================================\n\ntype IconShapeId = \"rounded\" | \"circle\" | \"square\";\n\ninterface IconShape {\n  id: IconShapeId;\n  renderBackground: (bgColor: string) => React.ReactNode;\n}\n\nconst iconShapes: IconShape[] = [\n  {\n    id: \"rounded\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <rect width=\"32\" height=\"32\" rx=\"10\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n  {\n    id: \"circle\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <circle cx=\"16\" cy=\"16\" r=\"16\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n  {\n    id: \"square\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <rect width=\"32\" height=\"32\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n];\n\n// Map icon names to components\nconst iconMap: Record<string, PhosphorIcon> = {\n  Diamond,\n  Hexagon,\n  Star,\n  Lightning,\n  Sparkle,\n  Infinity,\n  Code,\n  Terminal,\n  Cpu,\n  Database,\n  Globe,\n  Cloud,\n  WifiHigh,\n  Briefcase,\n  Buildings,\n  Storefront,\n  Handshake,\n  ChartLine,\n  Palette: PaletteIcon,\n  PencilSimple,\n  Camera,\n  MusicNote,\n  Lightbulb,\n  Leaf,\n  Tree,\n  Sun,\n  Moon,\n  Fire,\n  Drop,\n  ChatCircle,\n  Envelope,\n  Phone,\n  Megaphone,\n  Heart,\n  Shield,\n  Trophy,\n  Rocket,\n  Target,\n  Flag,\n};\n\n// Helper to resolve CSS variable references to actual hex colors\nfunction resolveBrandingColor(value: string): string {\n  if (!value) return \"#ffffff\";\n  if (value.startsWith(\"var(\")) {\n    const varName = value.replace(\"var(\", \"\").replace(\")\", \"\");\n    if (typeof window !== \"undefined\") {\n      const computed = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();\n      return computed || \"#ffffff\";\n    }\n    return \"#ffffff\";\n  }\n  return value;\n}\n\ninterface SidebarProps {\n  /** Navigation sections to display */\n  sections: NavSection[];\n  /** Visual variant - dark for desktop, light for mobile sheet */\n  variant?: \"dark\" | \"light\";\n  /** Callback when a nav item or subtab is clicked */\n  onItemClick?: (item: NavItem | Omit<NavItem, \"children\" | \"icon\">) => void;\n  /** Additional class names */\n  className?: string;\n}\n\n/**\n * Canvas Design System - Sidebar Component\n * \n * Desktop: Fixed dark sidebar (320px width) on the left\n * Mobile: Light theme sidebar rendered inside a Sheet\n */\nexport function Sidebar({ \n  sections, \n  variant = \"dark\", \n  onItemClick,\n  className \n}: SidebarProps) {\n  const isDark = variant === \"dark\";\n  const themeImages = useThemeImages();\n  const { branding, isMounted } = useThemeBranding();\n  \n  // Get the appropriate logo based on variant\n  const logoUrl = isDark ? themeImages.logoDark : themeImages.logoLight;\n  \n  // Get the icon shape renderer\n  const iconShape = iconShapes.find(s => s.id === branding.iconShape) || iconShapes[0];\n  \n  return (\n    <aside\n      className={cn(\n        \"flex flex-col h-full w-[var(--sidebar-width)]\",\n        isDark && \"bg-[var(--canvas-sidebar-dark-bg)] border-r border-[var(--canvas-sidebar-dark-border)]\",\n        !isDark && \"bg-[var(--canvas-background)] border-r border-[var(--canvas-border)]\",\n        className\n      )}\n    >\n      {/* Logo Section */}\n      <div className={cn(\n        \"flex items-center h-8 shrink-0\",\n        \"pt-11 pb-0 pr-[var(--spacing-2xl)] pl-9\"\n      )}>\n        {logoUrl ? (\n          // Custom logo replaces entire lockup (icon + wordmark)\n          <img \n            src={logoUrl} \n            alt=\"Logo\" \n            className={`h-8 w-auto object-contain ${isMounted ? 'opacity-100' : 'opacity-0'}`}\n          />\n        ) : (\n          // Logo creator: dynamic icon shape + Phosphor icon + wordmark\n          // Uses CSS variables directly - no JavaScript resolution needed\n          <div className=\"flex items-center\">\n            <div className=\"relative size-8 shrink-0\">\n              {iconShape.renderBackground(branding.bgColor || \"var(--canvas-primary)\")}\n              <div className=\"absolute inset-0 flex items-center justify-center z-10\">\n                {(() => {\n                  const IconComponent = iconMap[branding.iconName || \"Buildings\"] || Buildings;\n                  return <IconComponent weight=\"bold\" size={18} color={branding.iconColor || \"var(--canvas-primary-foreground)\"} />;\n                })()}\n              </div>\n            </div>\n            <span className={cn(\n              \"font-semibold ml-[var(--spacing-md)]\",\n              isDark ? \"text-[var(--canvas-sidebar-dark-active-text)]\" : \"text-[var(--canvas-text)]\"\n            )} style={{ fontSize: \"var(--typo-body-xl-size)\" }}>\n              {branding.wordmark || \"canvas\"}\n            </span>\n          </div>\n        )}\n      </div>\n\n      {/* Navigation */}\n      <ScrollArea className=\"flex-1 px-[var(--spacing-2xl)] pb-[var(--spacing-5xl)]\">\n        <SidebarNav \n          sections={sections} \n          variant={variant} \n          onItemClick={onItemClick}\n        />\n      </ScrollArea>\n    </aside>\n  );\n}\n\n// Re-export types for convenience\nexport type { NavSection, NavItem } from \"./sidebar-nav\";\n\n"
     }
   ],
   "dependencies": [

package/registry/ui/checkbox.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/checkbox.tsx",
       "type": "registry:ui",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { Check } from \"lucide-react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer size-4 shrink-0 rounded-[var(--radius-xs)] border border-[var(--canvas-border-input)]\",\n      \"bg-[var(--canvas-background)] transition-colors cursor-pointer\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]\",\n      \"disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)]\",\n      \"data-[state=checked]:bg-[var(--canvas-primary)] data-[state=checked]:border-[var(--canvas-primary)]\",\n      \"data-[state=checked]:disabled:bg-[var(--canvas-input-disabled-text)] data-[state=checked]:disabled:border-[var(--canvas-input-disabled-border)]\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-[var(--canvas-primary-foreground)]\")}\n    >\n      <Check className=\"size-3\" strokeWidth={2.5} />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n));\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\ninterface CheckboxWithLabelProps\n  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n  children: React.ReactNode;\n  size?: \"default\" | \"sm\";\n}\n\nconst CheckboxWithLabel = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxWithLabelProps\n>(({ children, className, id, size = \"default\", ...props }, ref) => {\n  const generatedId = React.useId();\n  const checkboxId = id || generatedId;\n\n  const isSmall = size === \"sm\";\n\n  return (\n    <div className={cn(\"flex items-center\", isSmall ? \"gap-1.5\" : \"gap-2\")}>\n      <Checkbox \n        ref={ref} \n        id={checkboxId} \n        className={cn(isSmall && \"size-3.5\", className)} \n        {...props} \n      />\n      <label\n        htmlFor={checkboxId}\n        className={cn(\n          \"cursor-pointer select-none\",\n          isSmall ? \"text-xs text-[var(--canvas-text-muted)]\" : \"text-[var(--canvas-text)]\"\n        )}\n        style={!isSmall ? { fontSize: \"var(--input-standard-font-size)\" } : undefined}\n      >\n        {children}\n      </label>\n    </div>\n  );\n});\nCheckboxWithLabel.displayName = \"CheckboxWithLabel\";\n\nexport { Checkbox, CheckboxWithLabel };\n\n"
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { Check } from \"lucide-react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer size-4 shrink-0 rounded-[var(--radius-xs)] border border-[var(--canvas-border-input)]\",\n      \"bg-[var(--canvas-background)] transition-colors cursor-pointer\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]\",\n      \"disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)]\",\n      \"data-[state=checked]:bg-[var(--canvas-primary)] data-[state=checked]:border-[var(--canvas-primary)]\",\n      \"data-[state=checked]:disabled:bg-[var(--canvas-input-disabled-text)] data-[state=checked]:disabled:border-[var(--canvas-input-disabled-border)]\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-[var(--canvas-primary-foreground)]\")}\n    >\n      <Check className=\"size-3\" strokeWidth={2.5} />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n));\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\ninterface CheckboxWithLabelProps\n  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n  children: React.ReactNode;\n  size?: \"default\" | \"sm\";\n}\n\nconst CheckboxWithLabel = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxWithLabelProps\n>(({ children, className, id, size = \"default\", ...props }, ref) => {\n  const generatedId = React.useId();\n  const checkboxId = id || generatedId;\n\n  const isSmall = size === \"sm\";\n\n  return (\n    <div className={cn(\"flex items-center\", isSmall ? \"gap-1.5\" : \"gap-2\")}>\n      <Checkbox \n        ref={ref} \n        id={checkboxId} \n        className={cn(isSmall && \"size-3.5\", className)} \n        {...props} \n      />\n      <label\n        htmlFor={checkboxId}\n        className={cn(\n          \"cursor-pointer select-none\",\n          isSmall ? \"text-xs text-[var(--canvas-text-muted)]\" : \"text-[var(--canvas-text)]\"\n        )}\n        style={!isSmall ? { fontSize: \"var(--input-standard-font-size)\", fontFamily: \"var(--typo-global-font)\" } : { fontFamily: \"var(--typo-global-font)\" }}\n      >\n        {children}\n      </label>\n    </div>\n  );\n});\nCheckboxWithLabel.displayName = \"CheckboxWithLabel\";\n\nexport { Checkbox, CheckboxWithLabel };\n\n"
     }
   ],
   "dependencies": [

package/registry/ui/date-input.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/date-input.tsx",
       "type": "registry:ui",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Calendar } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface DateInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"onChange\"> {\n  inputSize?: \"sm\" | \"default\" | \"lg\";\n  value?: string;\n  onChange?: (value: string) => void;\n}\n\nconst DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  ({ className, inputSize = \"default\", placeholder = \"mm/dd/yyyy\", disabled, value, onChange, ...props }, ref) => {\n    const sizeVar = inputSize === \"default\" ? \"standard\" : inputSize === \"sm\" ? \"small\" : \"large\";\n\n    return (\n      <div\n        className={cn(\n          \"flex items-center gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)]\",\n          \"focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)]\",\n          \"has-[:disabled]:cursor-not-allowed has-[:disabled]:bg-[var(--canvas-input-disabled-bg)] has-[:disabled]:border-[var(--canvas-input-disabled-border)]\",\n          className\n        )}\n        style={{\n          height: `var(--input-${sizeVar}-height)`,\n          paddingLeft: `var(--input-${sizeVar}-px)`,\n          paddingRight: `var(--input-${sizeVar}-px)`,\n          borderRadius: `var(--input-${sizeVar}-radius)`,\n        }}\n      >\n        <Calendar className=\"size-4 shrink-0 text-[var(--canvas-text-muted)]\" />\n        <input\n          type=\"text\"\n          ref={ref}\n          placeholder={placeholder}\n          disabled={disabled}\n          value={value}\n          onChange={(e) => onChange?.(e.target.value)}\n          className={cn(\n            \"flex-1 bg-transparent outline-none\",\n            \"text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)]\",\n            \"disabled:text-[var(--canvas-input-disabled-text)] disabled:cursor-not-allowed\"\n          )}\n          style={{\n            fontSize: `var(--input-${sizeVar}-font-size)`,\n          }}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nDateInput.displayName = \"DateInput\";\n\nexport { DateInput };\n\n\n\n\n\n\n\n"
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Calendar } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface DateInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"onChange\"> {\n  inputSize?: \"sm\" | \"default\" | \"lg\";\n  value?: string;\n  onChange?: (value: string) => void;\n}\n\nconst DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  ({ className, inputSize = \"default\", placeholder = \"mm/dd/yyyy\", disabled, value, onChange, ...props }, ref) => {\n    const sizeVar = inputSize === \"default\" ? \"standard\" : inputSize === \"sm\" ? \"small\" : \"large\";\n\n    return (\n      <div\n        className={cn(\n          \"flex items-center gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)]\",\n          \"focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)]\",\n          \"has-[:disabled]:cursor-not-allowed has-[:disabled]:bg-[var(--canvas-input-disabled-bg)] has-[:disabled]:border-[var(--canvas-input-disabled-border)]\",\n          className\n        )}\n        style={{\n          height: `var(--input-${sizeVar}-height)`,\n          paddingLeft: `var(--input-${sizeVar}-px)`,\n          paddingRight: `var(--input-${sizeVar}-px)`,\n          borderRadius: `var(--input-${sizeVar}-radius)`,\n        }}\n      >\n        <Calendar className=\"size-4 shrink-0 text-[var(--canvas-text-muted)]\" />\n        <input\n          type=\"text\"\n          ref={ref}\n          placeholder={placeholder}\n          disabled={disabled}\n          value={value}\n          onChange={(e) => onChange?.(e.target.value)}\n          className={cn(\n            \"flex-1 bg-transparent outline-none\",\n            \"text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)]\",\n            \"disabled:text-[var(--canvas-input-disabled-text)] disabled:cursor-not-allowed\"\n          )}\n          style={{\n            fontSize: `var(--input-${sizeVar}-font-size)`,\n            fontFamily: \"var(--typo-global-font)\",\n          }}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nDateInput.displayName = \"DateInput\";\n\nexport { DateInput };\n\n\n\n\n\n\n\n"
     }
   ],
   "dependencies": [

package/registry/ui/dialog.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/dialog.tsx",
       "type": "registry:ui",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-[var(--canvas-border)] p-6 shadow-lg duration-200 outline-none sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"cursor-pointer ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[var(--canvas-overlay-bg)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-[var(--canvas-border)] p-6 shadow-lg duration-200 outline-none sm:max-w-lg font-[family-name:var(--typo-global-font)]\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"cursor-pointer ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"
     }
   ],
   "dependencies": [

package/registry/ui/dropdown-menu.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/dropdown-menu.tsx",
       "type": "registry:ui",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-[var(--canvas-border)] p-1 shadow-md\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground relative flex cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-[var(--canvas-border)] p-1 shadow-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-[var(--canvas-border)] p-1 shadow-md font-[family-name:var(--typo-global-font)]\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground relative flex cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-[var(--canvas-border)] p-1 shadow-lg font-[family-name:var(--typo-global-font)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n"
     }
   ],
   "dependencies": [

package/registry/ui/input.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/input.tsx",
       "type": "registry:ui",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n        \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"w-full min-w-0 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)]\",\n        \"text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)]\",\n        \"transition-[color,box-shadow] outline-none\",\n        \"focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)]\",\n        \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)]\",\n        \"aria-invalid:border-[var(--canvas-border-input-invalid)]\",\n        \"file:text-[var(--canvas-text)] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n        className\n      )}\n      style={{\n        height: \"var(--input-standard-height)\",\n        paddingLeft: \"var(--input-standard-px)\",\n        paddingRight: \"var(--input-standard-px)\",\n        borderRadius: \"var(--input-standard-radius)\",\n        fontSize: \"var(--input-standard-font-size)\",\n        fontFamily: \"var(--typo-global-font)\",\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"
     }
   ],
   "dependencies": [],

package/registry/ui/label.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/label.tsx",
       "type": "registry:ui",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Label({\n  className,\n  style,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      style={{\n        fontFamily: \"var(--typo-input-label-font)\",\n        fontSize: \"var(--typo-input-label-size)\",\n        fontWeight: \"var(--typo-input-label-weight)\",\n        letterSpacing: \"var(--typo-input-label-spacing)\",\n        lineHeight: \"var(--typo-input-label-line-height)\",\n        color: \"var(--typo-input-label-color)\",\n        ...style,\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Label({\n  className,\n  style,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      style={{\n        fontFamily: \"var(--typo-input-label-font, var(--typo-global-font))\",\n        fontSize: \"var(--typo-input-label-size)\",\n        fontWeight: \"var(--typo-input-label-weight)\",\n        letterSpacing: \"var(--typo-input-label-spacing)\",\n        lineHeight: \"var(--typo-input-label-line-height)\",\n        color: \"var(--typo-input-label-color)\",\n        ...style,\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n"
     }
   ],
   "dependencies": [

package/registry/ui/line-tabs.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/line-tabs.tsx",
       "type": "registry:ui",
-      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface LineTab {\n  id: string;\n  label: string;\n}\n\ninterface LineTabsProps {\n  /** Array of tab items */\n  tabs: LineTab[];\n  /** ID of the currently active tab */\n  activeTab?: string;\n  /** Callback when a tab is clicked */\n  onTabChange?: (tabId: string) => void;\n  /** Additional class names */\n  className?: string;\n}\n\n/**\n * Canvas Design System - Line Tabs Component\n * \n * Horizontal underline-style tabs for page navigation.\n * Active tab has blue text with 2px blue bottom border.\n * Inactive tabs have gray text with 1px gray bottom border.\n * \n * @example\n * ```tsx\n * <LineTabs \n *   tabs={[\n *     { id: \"tab1\", label: \"Tab 1\" },\n *     { id: \"tab2\", label: \"Tab 2\" },\n *   ]} \n *   activeTab=\"tab1\"\n *   onTabChange={(id) => console.log(id)}\n * />\n * ```\n */\nexport function LineTabs({\n  tabs,\n  activeTab: controlledActiveTab,\n  onTabChange,\n  className,\n}: LineTabsProps) {\n  // Use internal state if not controlled\n  const [internalActiveTab, setInternalActiveTab] = useState(tabs[0]?.id || \"\");\n  const activeTab = controlledActiveTab ?? internalActiveTab;\n\n  const handleTabClick = (tabId: string) => {\n    if (!controlledActiveTab) {\n      setInternalActiveTab(tabId);\n    }\n    onTabChange?.(tabId);\n  };\n\n  return (\n    <div className={cn(\"flex items-end w-full\", className)}>\n      {tabs.map((tab, index) => {\n        const isActive = tab.id === activeTab;\n        const isLast = index === tabs.length - 1;\n\n        return (\n          <div key={tab.id} className=\"flex items-end h-12\">\n            {/* Tab Button */}\n            <button\n              onClick={() => handleTabClick(tab.id)}\n              className={cn(\n                \"flex items-center justify-center h-full px-0 transition-colors cursor-pointer\",\n                isActive\n                  ? \"border-b-2 border-[var(--canvas-primary)] text-[var(--canvas-primary)]\"\n                  : \"border-b border-[var(--canvas-border)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)]\"\n              )}\n            >\n              <span className=\"text-base font-medium leading-6\">\n                {tab.label}\n              </span>\n            </button>\n\n            {/* Divider - 24px wide line */}\n            {!isLast && (\n              <div className=\"w-6 h-0 border-b border-[var(--canvas-border)]\" />\n            )}\n          </div>\n        );\n      })}\n\n      {/* Trailing line to fill remaining space */}\n      <div className=\"flex-1 h-0 border-b border-[var(--canvas-border)]\" />\n    </div>\n  );\n}\n\n"
+      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface LineTab {\n  id: string;\n  label: string;\n}\n\ninterface LineTabsProps {\n  /** Array of tab items */\n  tabs: LineTab[];\n  /** ID of the currently active tab */\n  activeTab?: string;\n  /** Callback when a tab is clicked */\n  onTabChange?: (tabId: string) => void;\n  /** Additional class names */\n  className?: string;\n}\n\n/**\n * Canvas Design System - Line Tabs Component\n * \n * Horizontal underline-style tabs for page navigation.\n * Active tab has blue text with 2px blue bottom border.\n * Inactive tabs have gray text with 1px gray bottom border.\n * \n * @example\n * ```tsx\n * <LineTabs \n *   tabs={[\n *     { id: \"tab1\", label: \"Tab 1\" },\n *     { id: \"tab2\", label: \"Tab 2\" },\n *   ]} \n *   activeTab=\"tab1\"\n *   onTabChange={(id) => console.log(id)}\n * />\n * ```\n */\nexport function LineTabs({\n  tabs,\n  activeTab: controlledActiveTab,\n  onTabChange,\n  className,\n}: LineTabsProps) {\n  // Use internal state if not controlled\n  const [internalActiveTab, setInternalActiveTab] = useState(tabs[0]?.id || \"\");\n  const activeTab = controlledActiveTab ?? internalActiveTab;\n\n  const handleTabClick = (tabId: string) => {\n    if (!controlledActiveTab) {\n      setInternalActiveTab(tabId);\n    }\n    onTabChange?.(tabId);\n  };\n\n  return (\n    <div className={cn(\"flex items-end w-full\", className)}>\n      {tabs.map((tab, index) => {\n        const isActive = tab.id === activeTab;\n        const isLast = index === tabs.length - 1;\n\n        return (\n          <div key={tab.id} className=\"flex items-end h-12\">\n            {/* Tab Button */}\n            <button\n              onClick={() => handleTabClick(tab.id)}\n              className={cn(\n                \"flex items-center justify-center h-full px-0 transition-colors cursor-pointer font-[family-name:var(--typo-global-font)]\",\n                isActive\n                  ? \"border-b-2 border-[var(--canvas-primary)] text-[var(--canvas-primary)]\"\n                  : \"border-b border-[var(--canvas-border)] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)]\"\n              )}\n            >\n              <span\n                style={{\n                  fontFamily: \"var(--typo-body-m-font, var(--typo-global-font))\",\n                  fontSize: \"var(--typo-body-m-size)\",\n                  fontWeight: \"var(--btn-standard-font-weight)\",\n                  lineHeight: \"var(--typo-body-m-line-height)\",\n                }}\n              >\n                {tab.label}\n              </span>\n            </button>\n\n            {/* Divider - 24px wide line */}\n            {!isLast && (\n              <div className=\"w-6 h-0 border-b border-[var(--canvas-border)]\" />\n            )}\n          </div>\n        );\n      })}\n\n      {/* Trailing line to fill remaining space */}\n      <div className=\"flex-1 h-0 border-b border-[var(--canvas-border)]\" />\n    </div>\n  );\n}\n\n"
     }
   ],
   "dependencies": [],

package/registry/ui/multiselect-checkbox-field.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/multiselect-checkbox-field.tsx",
       "type": "registry:ui",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface CheckboxOption {\n  id: string;\n  label: string;\n}\n\nexport interface MultiselectCheckboxFieldProps {\n  options?: CheckboxOption[];\n  selectedValues?: string[];\n  onChange?: (values: string[]) => void;\n  inputSize?: \"sm\" | \"default\" | \"lg\";\n  disabled?: boolean;\n  className?: string;\n}\n\nconst MultiselectCheckboxField = React.forwardRef<\n  HTMLDivElement,\n  MultiselectCheckboxFieldProps\n>(\n  (\n    {\n      options = [],\n      selectedValues = [],\n      onChange,\n      inputSize = \"default\",\n      disabled,\n      className,\n    },\n    ref\n  ) => {\n    const sizeVar =\n      inputSize === \"default\"\n        ? \"standard\"\n        : inputSize === \"sm\"\n        ? \"small\"\n        : \"large\";\n\n    const handleToggle = (optionId: string) => {\n      if (disabled) return;\n\n      const newValues = selectedValues.includes(optionId)\n        ? selectedValues.filter((v) => v !== optionId)\n        : [...selectedValues, optionId];\n\n      onChange?.(newValues);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-wrap items-start overflow-hidden\",\n          className\n        )}\n        style={{ gap: \"var(--spacing-xl)\" }}\n      >\n        {options.map((option) => {\n          const isSelected = selectedValues.includes(option.id);\n\n          return (\n            <button\n              key={option.id}\n              type=\"button\"\n              onClick={() => handleToggle(option.id)}\n              disabled={disabled}\n              className={cn(\n                \"cursor-pointer flex items-center gap-2 bg-[var(--canvas-background)] border overflow-hidden transition-colors\",\n                \"focus:outline-none focus:ring-2 focus:ring-[var(--canvas-border-input-focus)]\",\n                isSelected\n                  ? \"border-[var(--canvas-primary)]\"\n                  : \"border-[var(--canvas-border-input)]\",\n                disabled &&\n                  \"cursor-not-allowed bg-[var(--canvas-input-disabled-bg)] border-[var(--canvas-input-disabled-border)] opacity-60\"\n              )}\n              style={{\n                height: `var(--input-${sizeVar}-height)`,\n                paddingLeft: `var(--input-${sizeVar}-px)`,\n                paddingRight: `var(--input-${sizeVar}-px)`,\n                borderRadius: `var(--input-${sizeVar}-radius)`,\n                minWidth: \"fit-content\",\n                flexShrink: 0,\n                flexGrow: 1,\n                flexBasis: 0,\n                minHeight: `var(--input-${sizeVar}-height)`,\n              }}\n            >\n              {/* Checkbox indicator */}\n              <span\n                className={cn(\n                  \"flex items-center justify-center shrink-0 rounded-[var(--radius-xs)] border transition-colors\",\n                  isSelected\n                    ? \"bg-[var(--canvas-primary)] border-[var(--canvas-primary)]\"\n                    : \"bg-[var(--canvas-background)] border-[var(--canvas-border-input)]\",\n                  disabled && \"opacity-60\"\n                )}\n                style={{\n                  width: inputSize === \"sm\" ? \"16px\" : \"20px\",\n                  height: inputSize === \"sm\" ? \"16px\" : \"20px\",\n                }}\n              >\n                {isSelected && (\n                  <Check\n                    className=\"text-[var(--canvas-primary-foreground)]\"\n                    style={{\n                      width: inputSize === \"sm\" ? \"12px\" : \"16px\",\n                      height: inputSize === \"sm\" ? \"12px\" : \"16px\",\n                    }}\n                    strokeWidth={2.5}\n                  />\n                )}\n              </span>\n\n              {/* Label */}\n              <span\n                className={cn(\n                  \"whitespace-nowrap\",\n                  isSelected\n                    ? \"text-[var(--canvas-primary)]\"\n                    : \"text-[var(--canvas-text-muted)]\",\n                  disabled && \"text-[var(--canvas-input-disabled-text)]\"\n                )}\n                style={{\n                  fontSize: `var(--input-${sizeVar}-font-size)`,\n                }}\n              >\n                {option.label}\n              </span>\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n);\nMultiselectCheckboxField.displayName = \"MultiselectCheckboxField\";\n\nexport { MultiselectCheckboxField };\n"
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface CheckboxOption {\n  id: string;\n  label: string;\n}\n\nexport interface MultiselectCheckboxFieldProps {\n  options?: CheckboxOption[];\n  selectedValues?: string[];\n  onChange?: (values: string[]) => void;\n  inputSize?: \"sm\" | \"default\" | \"lg\";\n  disabled?: boolean;\n  className?: string;\n}\n\nconst MultiselectCheckboxField = React.forwardRef<\n  HTMLDivElement,\n  MultiselectCheckboxFieldProps\n>(\n  (\n    {\n      options = [],\n      selectedValues = [],\n      onChange,\n      inputSize = \"default\",\n      disabled,\n      className,\n    },\n    ref\n  ) => {\n    const sizeVar =\n      inputSize === \"default\"\n        ? \"standard\"\n        : inputSize === \"sm\"\n        ? \"small\"\n        : \"large\";\n\n    const handleToggle = (optionId: string) => {\n      if (disabled) return;\n\n      const newValues = selectedValues.includes(optionId)\n        ? selectedValues.filter((v) => v !== optionId)\n        : [...selectedValues, optionId];\n\n      onChange?.(newValues);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-wrap items-start overflow-hidden\",\n          className\n        )}\n        style={{ gap: \"var(--spacing-xl)\" }}\n      >\n        {options.map((option) => {\n          const isSelected = selectedValues.includes(option.id);\n\n          return (\n            <button\n              key={option.id}\n              type=\"button\"\n              onClick={() => handleToggle(option.id)}\n              disabled={disabled}\n              className={cn(\n                \"cursor-pointer flex items-center gap-2 bg-[var(--canvas-background)] border overflow-hidden transition-colors\",\n                \"focus:outline-none focus:ring-2 focus:ring-[var(--canvas-border-input-focus)]\",\n                isSelected\n                  ? \"border-[var(--canvas-primary)]\"\n                  : \"border-[var(--canvas-border-input)]\",\n                disabled &&\n                  \"cursor-not-allowed bg-[var(--canvas-input-disabled-bg)] border-[var(--canvas-input-disabled-border)] opacity-60\"\n              )}\n              style={{\n                height: `var(--input-${sizeVar}-height)`,\n                paddingLeft: `var(--input-${sizeVar}-px)`,\n                paddingRight: `var(--input-${sizeVar}-px)`,\n                borderRadius: `var(--input-${sizeVar}-radius)`,\n                minWidth: \"fit-content\",\n                flexShrink: 0,\n                flexGrow: 1,\n                flexBasis: 0,\n                minHeight: `var(--input-${sizeVar}-height)`,\n                fontFamily: \"var(--typo-global-font)\",\n              }}\n            >\n              {/* Checkbox indicator */}\n              <span\n                className={cn(\n                  \"flex items-center justify-center shrink-0 rounded-[var(--radius-xs)] border transition-colors\",\n                  isSelected\n                    ? \"bg-[var(--canvas-primary)] border-[var(--canvas-primary)]\"\n                    : \"bg-[var(--canvas-background)] border-[var(--canvas-border-input)]\",\n                  disabled && \"opacity-60\"\n                )}\n                style={{\n                  width: inputSize === \"sm\" ? \"16px\" : \"20px\",\n                  height: inputSize === \"sm\" ? \"16px\" : \"20px\",\n                }}\n              >\n                {isSelected && (\n                  <Check\n                    className=\"text-[var(--canvas-primary-foreground)]\"\n                    style={{\n                      width: inputSize === \"sm\" ? \"12px\" : \"16px\",\n                      height: inputSize === \"sm\" ? \"12px\" : \"16px\",\n                    }}\n                    strokeWidth={2.5}\n                  />\n                )}\n              </span>\n\n              {/* Label */}\n              <span\n                className={cn(\n                  \"whitespace-nowrap\",\n                  isSelected\n                    ? \"text-[var(--canvas-primary)]\"\n                    : \"text-[var(--canvas-text-muted)]\",\n                  disabled && \"text-[var(--canvas-input-disabled-text)]\"\n                )}\n                style={{\n                  fontSize: `var(--input-${sizeVar}-font-size)`,\n                }}\n              >\n                {option.label}\n              </span>\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n);\nMultiselectCheckboxField.displayName = \"MultiselectCheckboxField\";\n\nexport { MultiselectCheckboxField };\n"
     }
   ],
   "dependencies": [

package/registry/ui/multiselect-tags.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/multiselect-tags.tsx",
       "type": "registry:ui",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface MultiselectTagsProps {\n  tags?: string[];\n  placeholder?: string;\n  inputSize?: \"sm\" | \"default\" | \"lg\";\n  onAdd?: (tag: string) => void;\n  onRemove?: (tag: string) => void;\n  disabled?: boolean;\n  className?: string;\n}\n\nconst MultiselectTags = React.forwardRef<HTMLInputElement, MultiselectTagsProps>(\n  ({ \n    tags = [], \n    placeholder = \"Add...\", \n    inputSize = \"default\", \n    onAdd, \n    onRemove, \n    disabled,\n    className \n  }, ref) => {\n    const [inputValue, setInputValue] = React.useState(\"\");\n    const sizeVar = inputSize === \"default\" ? \"standard\" : inputSize === \"sm\" ? \"small\" : \"large\";\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\" && inputValue.trim()) {\n        e.preventDefault();\n        onAdd?.(inputValue.trim());\n        setInputValue(\"\");\n      }\n    };\n\n    return (\n      <div\n        className={cn(\n          \"flex flex-wrap items-center gap-1.5 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] p-1.5\",\n          \"focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)]\",\n          disabled && \"cursor-not-allowed bg-[var(--canvas-input-disabled-bg)] border-[var(--canvas-input-disabled-border)]\",\n          className\n        )}\n        style={{\n          minHeight: `var(--input-${sizeVar}-height)`,\n          borderRadius: `var(--input-${sizeVar}-radius)`,\n        }}\n      >\n        {tags.map((tag) => (\n          <span\n            key={tag}\n            className=\"inline-flex items-center gap-1 px-2 py-0.5 bg-[var(--canvas-surface-brand)] text-[var(--canvas-primary)] rounded text-xs\"\n          >\n            {tag}\n            {!disabled && (\n              <span\n                role=\"button\"\n                tabIndex={0}\n                onClick={() => onRemove?.(tag)}\n                onKeyDown={(e) => e.key === \"Enter\" && onRemove?.(tag)}\n                className=\"cursor-pointer hover:opacity-70\"\n              >\n                <X className=\"size-3\" />\n              </span>\n            )}\n          </span>\n        ))}\n        <input\n          type=\"text\"\n          ref={ref}\n          placeholder={placeholder}\n          disabled={disabled}\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          className={cn(\n            \"flex-1 min-w-[60px] bg-transparent outline-none\",\n            \"text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)]\",\n            \"disabled:text-[var(--canvas-input-disabled-text)] disabled:cursor-not-allowed\"\n          )}\n          style={{\n            fontSize: `var(--input-${sizeVar}-font-size)`,\n          }}\n        />\n      </div>\n    );\n  }\n);\nMultiselectTags.displayName = \"MultiselectTags\";\n\nexport { MultiselectTags };\n\n\n\n\n\n\n\n"
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface MultiselectTagsProps {\n  tags?: string[];\n  placeholder?: string;\n  inputSize?: \"sm\" | \"default\" | \"lg\";\n  onAdd?: (tag: string) => void;\n  onRemove?: (tag: string) => void;\n  disabled?: boolean;\n  className?: string;\n}\n\nconst MultiselectTags = React.forwardRef<HTMLInputElement, MultiselectTagsProps>(\n  ({ \n    tags = [], \n    placeholder = \"Add...\", \n    inputSize = \"default\", \n    onAdd, \n    onRemove, \n    disabled,\n    className \n  }, ref) => {\n    const [inputValue, setInputValue] = React.useState(\"\");\n    const sizeVar = inputSize === \"default\" ? \"standard\" : inputSize === \"sm\" ? \"small\" : \"large\";\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\" && inputValue.trim()) {\n        e.preventDefault();\n        onAdd?.(inputValue.trim());\n        setInputValue(\"\");\n      }\n    };\n\n    return (\n      <div\n        className={cn(\n          \"flex flex-wrap items-center gap-1.5 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] p-1.5\",\n          \"focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)]\",\n          disabled && \"cursor-not-allowed bg-[var(--canvas-input-disabled-bg)] border-[var(--canvas-input-disabled-border)]\",\n          className\n        )}\n        style={{\n          minHeight: `var(--input-${sizeVar}-height)`,\n          borderRadius: `var(--input-${sizeVar}-radius)`,\n        }}\n      >\n        {tags.map((tag) => (\n          <span\n            key={tag}\n            className=\"inline-flex items-center gap-1 px-2 py-0.5 bg-[var(--canvas-surface-brand)] text-[var(--canvas-primary)] rounded text-xs\"\n          >\n            {tag}\n            {!disabled && (\n              <span\n                role=\"button\"\n                tabIndex={0}\n                onClick={() => onRemove?.(tag)}\n                onKeyDown={(e) => e.key === \"Enter\" && onRemove?.(tag)}\n                className=\"cursor-pointer hover:opacity-70\"\n              >\n                <X className=\"size-3\" />\n              </span>\n            )}\n          </span>\n        ))}\n        <input\n          type=\"text\"\n          ref={ref}\n          placeholder={placeholder}\n          disabled={disabled}\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          className={cn(\n            \"flex-1 min-w-[60px] bg-transparent outline-none\",\n            \"text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)]\",\n            \"disabled:text-[var(--canvas-input-disabled-text)] disabled:cursor-not-allowed\"\n          )}\n          style={{\n            fontSize: `var(--input-${sizeVar}-font-size)`,\n            fontFamily: \"var(--typo-global-font)\",\n          }}\n        />\n      </div>\n    );\n  }\n);\nMultiselectTags.displayName = \"MultiselectTags\";\n\nexport { MultiselectTags };\n\n\n\n\n\n\n\n"
     }
   ],
   "dependencies": [

package/registry/ui/popover.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/popover.tsx",
       "type": "registry:ui",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-[var(--canvas-border)] p-4 shadow-md outline-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-[var(--canvas-border)] p-4 shadow-md outline-hidden font-[family-name:var(--typo-global-font)]\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n"
     }
   ],
   "dependencies": [

package/registry/ui/searchbox.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/searchbox.tsx",
       "type": "registry:ui",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Search } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface SearchboxProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"onChange\"> {\n  inputSize?: \"sm\" | \"default\" | \"lg\";\n  value?: string;\n  onChange?: (value: string) => void;\n}\n\nconst Searchbox = React.forwardRef<HTMLInputElement, SearchboxProps>(\n  ({ className, inputSize = \"default\", placeholder = \"Search...\", disabled, value, onChange, ...props }, ref) => {\n    const sizeVar = inputSize === \"default\" ? \"standard\" : inputSize === \"sm\" ? \"small\" : \"large\";\n\n    return (\n      <div\n        className={cn(\n          \"flex items-center gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)]\",\n          \"focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)]\",\n          \"has-[:disabled]:cursor-not-allowed has-[:disabled]:bg-[var(--canvas-input-disabled-bg)] has-[:disabled]:border-[var(--canvas-input-disabled-border)]\",\n          className\n        )}\n        style={{\n          height: `var(--input-${sizeVar}-height)`,\n          paddingLeft: `var(--input-${sizeVar}-px)`,\n          paddingRight: `var(--input-${sizeVar}-px)`,\n          borderRadius: `var(--input-${sizeVar}-radius)`,\n        }}\n      >\n        <Search className=\"size-4 shrink-0 text-[var(--canvas-text-muted)]\" />\n        <input\n          type=\"text\"\n          ref={ref}\n          placeholder={placeholder}\n          disabled={disabled}\n          value={value}\n          onChange={(e) => onChange?.(e.target.value)}\n          className={cn(\n            \"flex-1 bg-transparent outline-none\",\n            \"text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)]\",\n            \"disabled:text-[var(--canvas-input-disabled-text)] disabled:cursor-not-allowed\"\n          )}\n          style={{\n            fontSize: `var(--input-${sizeVar}-font-size)`,\n          }}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nSearchbox.displayName = \"Searchbox\";\n\nexport { Searchbox };\n\n\n\n\n\n\n\n"
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Search } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface SearchboxProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"onChange\"> {\n  inputSize?: \"sm\" | \"default\" | \"lg\";\n  value?: string;\n  onChange?: (value: string) => void;\n}\n\nconst Searchbox = React.forwardRef<HTMLInputElement, SearchboxProps>(\n  ({ className, inputSize = \"default\", placeholder = \"Search...\", disabled, value, onChange, ...props }, ref) => {\n    const sizeVar = inputSize === \"default\" ? \"standard\" : inputSize === \"sm\" ? \"small\" : \"large\";\n\n    return (\n      <div\n        className={cn(\n          \"flex items-center gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)]\",\n          \"focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)]\",\n          \"has-[:disabled]:cursor-not-allowed has-[:disabled]:bg-[var(--canvas-input-disabled-bg)] has-[:disabled]:border-[var(--canvas-input-disabled-border)]\",\n          className\n        )}\n        style={{\n          height: `var(--input-${sizeVar}-height)`,\n          paddingLeft: `var(--input-${sizeVar}-px)`,\n          paddingRight: `var(--input-${sizeVar}-px)`,\n          borderRadius: `var(--input-${sizeVar}-radius)`,\n        }}\n      >\n        <Search className=\"size-4 shrink-0 text-[var(--canvas-text-muted)]\" />\n        <input\n          type=\"text\"\n          ref={ref}\n          placeholder={placeholder}\n          disabled={disabled}\n          value={value}\n          onChange={(e) => onChange?.(e.target.value)}\n          className={cn(\n            \"flex-1 bg-transparent outline-none\",\n            \"text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)]\",\n            \"disabled:text-[var(--canvas-input-disabled-text)] disabled:cursor-not-allowed\"\n          )}\n          style={{\n            fontSize: `var(--input-${sizeVar}-font-size)`,\n            fontFamily: \"var(--typo-global-font)\",\n          }}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nSearchbox.displayName = \"Searchbox\";\n\nexport { Searchbox };\n\n\n\n\n\n\n\n"
     }
   ],
   "dependencies": [

package/registry/ui/select.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/select.tsx",
       "type": "registry:ui",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst selectTriggerVariants = cva(\n  // Base styles using CSS variables\n  \"cursor-pointer flex w-full items-center justify-between gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)] data-[placeholder]:text-[var(--canvas-text-placeholder)] [&_svg:not([class*='text-'])]:text-[var(--canvas-text-muted)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 font-[family-name:var(--typo-global-font)]\",\n  {\n    variants: {\n      inputSize: {\n        sm: \"h-[var(--input-small-height)] px-[var(--input-small-px)] text-[length:var(--input-small-font-size)] rounded-[var(--input-small-radius)]\",\n        default: \"h-[var(--input-standard-height)] px-[var(--input-standard-px)] text-[length:var(--input-standard-font-size)] rounded-[var(--input-standard-radius)]\",\n        lg: \"h-[var(--input-large-height)] px-[var(--input-large-px)] text-[length:var(--input-large-font-size)] rounded-[var(--input-large-radius)]\",\n      },\n    },\n    defaultVariants: {\n      inputSize: \"default\",\n    },\n  }\n)\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  inputSize,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> &\n  VariantProps<typeof selectTriggerVariants>) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={inputSize}\n      className={cn(selectTriggerVariants({ inputSize, className }))}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"size-4 opacity-50\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"popper\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-[var(--canvas-border)] shadow-md\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        sideOffset={sideOffset}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=checked]:text-[var(--canvas-primary)] [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 font-[family-name:var(--typo-global-font)]\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"select-item-indicator\"\n        className=\"absolute right-2 flex size-3.5 items-center justify-center\"\n      >\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  selectTriggerVariants,\n}\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst selectTriggerVariants = cva(\n  // Base styles using CSS variables\n  \"cursor-pointer flex w-full items-center justify-between gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)] data-[placeholder]:text-[var(--canvas-text-placeholder)] [&_svg:not([class*='text-'])]:text-[var(--canvas-text-muted)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 font-[family-name:var(--typo-global-font)]\",\n  {\n    variants: {\n      inputSize: {\n        sm: \"h-[var(--input-small-height)] px-[var(--input-small-px)] text-[length:var(--input-small-font-size)] rounded-[var(--input-small-radius)]\",\n        default: \"h-[var(--input-standard-height)] px-[var(--input-standard-px)] text-[length:var(--input-standard-font-size)] rounded-[var(--input-standard-radius)]\",\n        lg: \"h-[var(--input-large-height)] px-[var(--input-large-px)] text-[length:var(--input-large-font-size)] rounded-[var(--input-large-radius)]\",\n      },\n    },\n    defaultVariants: {\n      inputSize: \"default\",\n    },\n  }\n)\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  inputSize,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> &\n  VariantProps<typeof selectTriggerVariants>) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={inputSize}\n      className={cn(selectTriggerVariants({ inputSize, className }))}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"size-4 opacity-50\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"popper\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-[var(--canvas-border)] shadow-md font-[family-name:var(--typo-global-font)]\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        sideOffset={sideOffset}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=checked]:text-[var(--canvas-primary)] [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 font-[family-name:var(--typo-global-font)]\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"select-item-indicator\"\n        className=\"absolute right-2 flex size-3.5 items-center justify-center\"\n      >\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  selectTriggerVariants,\n}\n"
     }
   ],
   "dependencies": [

package/registry/ui/selectable-pills.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/selectable-pills.tsx",
       "type": "registry:ui",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface PillOption {\n  id: string;\n  label: string;\n}\n\nexport interface SelectablePillsProps {\n  inputSize?: \"sm\" | \"default\" | \"lg\";\n  options: PillOption[];\n  selected: string[];\n  onSelectionChange: (selected: string[]) => void;\n  allowMultiple?: boolean;\n  className?: string;\n  disabled?: boolean;\n}\n\nconst SelectablePills = React.forwardRef<HTMLDivElement, SelectablePillsProps>(\n  ({ \n    inputSize = \"default\", \n    options, \n    selected, \n    onSelectionChange,\n    allowMultiple = true,\n    className,\n    disabled,\n  }, ref) => {\n    // Size mappings - using fixed values that scale appropriately\n    const sizeStyles = {\n      sm: {\n        pill: \"h-7 px-2.5 text-xs gap-1\",\n        container: \"gap-2\",\n      },\n      default: {\n        pill: \"h-9 px-3.5 text-sm gap-1.5\",\n        container: \"gap-3\",\n      },\n      lg: {\n        pill: \"h-11 px-4 text-base gap-2\",\n        container: \"gap-4\",\n      },\n    };\n\n    const styles = sizeStyles[inputSize];\n\n    const handlePillClick = (optionId: string) => {\n      if (disabled) return;\n\n      if (allowMultiple) {\n        // Toggle selection\n        if (selected.includes(optionId)) {\n          onSelectionChange(selected.filter(id => id !== optionId));\n        } else {\n          onSelectionChange([...selected, optionId]);\n        }\n      } else {\n        // Single selection - toggle or replace\n        if (selected.includes(optionId)) {\n          onSelectionChange([]);\n        } else {\n          onSelectionChange([optionId]);\n        }\n      }\n    };\n\n    return (\n      <div \n        ref={ref}\n        className={cn(\n          \"flex flex-wrap\",\n          styles.container,\n          className\n        )}\n      >\n        {options.map((option) => {\n          const isSelected = selected.includes(option.id);\n          \n          return (\n            <button\n              key={option.id}\n              type=\"button\"\n              onClick={() => handlePillClick(option.id)}\n              disabled={disabled}\n              className={cn(\n                \"inline-flex items-center justify-center rounded-[var(--radius-xs)] border transition-colors cursor-pointer\",\n                \"font-medium whitespace-nowrap\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]\",\n                \"disabled:cursor-not-allowed disabled:opacity-50\",\n                styles.pill,\n                isSelected\n                  ? \"bg-[var(--canvas-surface-brand)] border-[var(--canvas-primary)] text-[var(--canvas-primary)]\"\n                  : \"bg-[var(--canvas-background)] border-[var(--canvas-border)] text-[var(--canvas-text-muted)] hover:border-[var(--canvas-text-muted)]\"\n              )}\n            >\n              {option.label}\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nSelectablePills.displayName = \"SelectablePills\";\n\nexport { SelectablePills };\n\n"
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface PillOption {\n  id: string;\n  label: string;\n}\n\nexport interface SelectablePillsProps {\n  inputSize?: \"sm\" | \"default\" | \"lg\";\n  options: PillOption[];\n  selected: string[];\n  onSelectionChange: (selected: string[]) => void;\n  allowMultiple?: boolean;\n  className?: string;\n  disabled?: boolean;\n}\n\nconst SelectablePills = React.forwardRef<HTMLDivElement, SelectablePillsProps>(\n  ({ \n    inputSize = \"default\", \n    options, \n    selected, \n    onSelectionChange,\n    allowMultiple = true,\n    className,\n    disabled,\n  }, ref) => {\n    // Size mappings - using fixed values that scale appropriately\n    const sizeStyles = {\n      sm: {\n        pill: \"h-[var(--input-small-height)] px-[var(--input-small-px)] text-[length:var(--input-small-font-size)] gap-1\",\n        container: \"gap-2\",\n      },\n      default: {\n        pill: \"h-[var(--input-standard-height)] px-[var(--input-standard-px)] text-[length:var(--input-standard-font-size)] gap-1.5\",\n        container: \"gap-3\",\n      },\n      lg: {\n        pill: \"h-[var(--input-large-height)] px-[var(--input-large-px)] text-[length:var(--input-large-font-size)] gap-2\",\n        container: \"gap-4\",\n      },\n    };\n\n    const styles = sizeStyles[inputSize];\n\n    const handlePillClick = (optionId: string) => {\n      if (disabled) return;\n\n      if (allowMultiple) {\n        // Toggle selection\n        if (selected.includes(optionId)) {\n          onSelectionChange(selected.filter(id => id !== optionId));\n        } else {\n          onSelectionChange([...selected, optionId]);\n        }\n      } else {\n        // Single selection - toggle or replace\n        if (selected.includes(optionId)) {\n          onSelectionChange([]);\n        } else {\n          onSelectionChange([optionId]);\n        }\n      }\n    };\n\n    return (\n      <div \n        ref={ref}\n        className={cn(\n          \"flex flex-wrap\",\n          styles.container,\n          className\n        )}\n      >\n        {options.map((option) => {\n          const isSelected = selected.includes(option.id);\n          \n          return (\n            <button\n              key={option.id}\n              type=\"button\"\n              onClick={() => handlePillClick(option.id)}\n              disabled={disabled}\n              className={cn(\n                \"inline-flex items-center justify-center rounded-[var(--radius-xs)] border transition-colors cursor-pointer\",\n                \"font-medium whitespace-nowrap font-[family-name:var(--typo-global-font)]\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]\",\n                \"disabled:cursor-not-allowed disabled:opacity-50\",\n                styles.pill,\n                isSelected\n                  ? \"bg-[var(--canvas-surface-brand)] border-[var(--canvas-primary)] text-[var(--canvas-primary)]\"\n                  : \"bg-[var(--canvas-background)] border-[var(--canvas-border)] text-[var(--canvas-text-muted)] hover:border-[var(--canvas-text-muted)]\"\n              )}\n            >\n              {option.label}\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nSelectablePills.displayName = \"SelectablePills\";\n\nexport { SelectablePills };\n\n"
     }
   ],
   "dependencies": [],

package/registry/ui/sheet.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/sheet.tsx",
       "type": "registry:ui",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  overlayClassName,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  overlayClassName?: string\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay className={overlayClassName} />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l border-[var(--canvas-border)] sm:max-w-sm\",\n          side === \"left\" &&\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r border-[var(--canvas-border)] sm:max-w-sm\",\n          side === \"top\" &&\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b border-[var(--canvas-border)]\",\n          side === \"bottom\" &&\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t border-[var(--canvas-border)]\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <SheetPrimitive.Close className=\"cursor-pointer ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n          <XIcon className=\"size-4\" />\n          <span className=\"sr-only\">Close</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[var(--canvas-overlay-bg)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  overlayClassName,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  overlayClassName?: string\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay className={overlayClassName} />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 font-[family-name:var(--typo-global-font)]\",\n          side === \"right\" &&\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l border-[var(--canvas-border)] sm:max-w-sm\",\n          side === \"left\" &&\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r border-[var(--canvas-border)] sm:max-w-sm\",\n          side === \"top\" &&\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b border-[var(--canvas-border)]\",\n          side === \"bottom\" &&\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t border-[var(--canvas-border)]\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <SheetPrimitive.Close className=\"cursor-pointer ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n          <XIcon className=\"size-4\" />\n          <span className=\"sr-only\">Close</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n"
     }
   ],
   "dependencies": [

package/registry/ui/tabs.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/tabs.tsx",
       "type": "registry:ui",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Tabs({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsList({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      className={cn(\n        \"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] cursor-pointer focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Tabs({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsList({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      className={cn(\n        \"bg-muted text-muted-foreground inline-flex h-[var(--btn-standard-height)] w-fit items-center justify-center rounded-lg p-[3px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-[var(--radius-sm)] border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] cursor-pointer focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 font-[family-name:var(--typo-global-font)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"
     }
   ],
   "dependencies": [

package/registry/ui/text-input.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/text-input.tsx",
       "type": "registry:ui",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface TextInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n  inputSize?: \"sm\" | \"default\" | \"lg\";\n}\n\nconst TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  ({ className, inputSize = \"default\", disabled, ...props }, ref) => {\n    const sizeVar = inputSize === \"default\" ? \"standard\" : inputSize === \"sm\" ? \"small\" : \"large\";\n\n    return (\n      <input\n        type=\"text\"\n        ref={ref}\n        disabled={disabled}\n        className={cn(\n          \"w-full bg-[var(--canvas-background)] border border-[var(--canvas-border-input)]\",\n          \"text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)]\",\n          \"focus:outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)]\",\n          \"disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)]\",\n          className\n        )}\n        style={{\n          height: `var(--input-${sizeVar}-height)`,\n          paddingLeft: `var(--input-${sizeVar}-px)`,\n          paddingRight: `var(--input-${sizeVar}-px)`,\n          borderRadius: `var(--input-${sizeVar}-radius)`,\n          fontSize: `var(--input-${sizeVar}-font-size)`,\n        }}\n        {...props}\n      />\n    );\n  }\n);\nTextInput.displayName = \"TextInput\";\n\nexport { TextInput };\n\n\n\n\n\n\n\n"
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface TextInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n  inputSize?: \"sm\" | \"default\" | \"lg\";\n}\n\nconst TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  ({ className, inputSize = \"default\", disabled, ...props }, ref) => {\n    const sizeVar = inputSize === \"default\" ? \"standard\" : inputSize === \"sm\" ? \"small\" : \"large\";\n\n    return (\n      <input\n        type=\"text\"\n        ref={ref}\n        disabled={disabled}\n        className={cn(\n          \"w-full bg-[var(--canvas-background)] border border-[var(--canvas-border-input)]\",\n          \"text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)]\",\n          \"focus:outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)]\",\n          \"disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)]\",\n          className\n        )}\n        style={{\n          height: `var(--input-${sizeVar}-height)`,\n          paddingLeft: `var(--input-${sizeVar}-px)`,\n          paddingRight: `var(--input-${sizeVar}-px)`,\n          borderRadius: `var(--input-${sizeVar}-radius)`,\n          fontSize: `var(--input-${sizeVar}-font-size)`,\n          fontFamily: \"var(--typo-global-font)\",\n        }}\n        {...props}\n      />\n    );\n  }\n);\nTextInput.displayName = \"TextInput\";\n\nexport { TextInput };\n\n\n\n\n\n\n\n"
     }
   ],
   "dependencies": [],

package/registry/ui/textarea.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/textarea.tsx",
       "type": "registry:ui",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"../../lib/utils\"\n\nconst textareaVariants = cva(\n  // Base styles using CSS variables\n  \"flex w-full bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)] transition-colors resize-none focus:outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)]\",\n  {\n    variants: {\n      inputSize: {\n        sm: \"min-h-[60px] px-[var(--input-small-px)] py-2 text-[length:var(--input-small-font-size)] rounded-[var(--input-small-radius)]\",\n        default: \"min-h-[80px] px-[var(--input-standard-px)] py-2 text-[length:var(--input-standard-font-size)] rounded-[var(--input-standard-radius)]\",\n        lg: \"min-h-[120px] px-[var(--input-large-px)] py-3 text-[length:var(--input-large-font-size)] rounded-[var(--input-large-radius)]\",\n        expandable: \"min-h-[var(--input-expandable-height)] px-[var(--input-expandable-px)] py-2 text-[length:var(--input-expandable-font-size)] rounded-[var(--input-expandable-radius)]\",\n      },\n    },\n    defaultVariants: {\n      inputSize: \"default\",\n    },\n  }\n)\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    VariantProps<typeof textareaVariants> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, inputSize, ...props }, ref) => {\n    return (\n      <textarea\n        className={cn(textareaVariants({ inputSize, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea, textareaVariants }\n\n\n\n\n\n\n\n\n"
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"../../lib/utils\"\n\nconst textareaVariants = cva(\n  // Base styles using CSS variables\n  \"flex w-full bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)] transition-colors resize-none focus:outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)] font-[family-name:var(--typo-global-font)]\",\n  {\n    variants: {\n      inputSize: {\n        sm: \"min-h-[60px] px-[var(--input-small-px)] py-2 text-[length:var(--input-small-font-size)] rounded-[var(--input-small-radius)]\",\n        default: \"min-h-[80px] px-[var(--input-standard-px)] py-2 text-[length:var(--input-standard-font-size)] rounded-[var(--input-standard-radius)]\",\n        lg: \"min-h-[120px] px-[var(--input-large-px)] py-3 text-[length:var(--input-large-font-size)] rounded-[var(--input-large-radius)]\",\n        expandable: \"min-h-[var(--input-expandable-height)] px-[var(--input-expandable-px)] py-2 text-[length:var(--input-expandable-font-size)] rounded-[var(--input-expandable-radius)]\",\n      },\n    },\n    defaultVariants: {\n      inputSize: \"default\",\n    },\n  }\n)\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    VariantProps<typeof textareaVariants> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, inputSize, ...props }, ref) => {\n    return (\n      <textarea\n        className={cn(textareaVariants({ inputSize, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea, textareaVariants }\n\n\n\n\n\n\n\n\n"
     }
   ],
   "dependencies": [

package/registry/ui/tooltip.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/tooltip.tsx",
       "type": "registry:ui",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-foreground text-background 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-foreground text-background 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance font-[family-name:var(--typo-global-font)]\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"
     }
   ],
   "dependencies": [

package/styles/tokens.reference.css

@@ -62,6 +62,9 @@
   --canvas-sidebar-dark-text: #7e92b0;
   --canvas-sidebar-dark-border: #1e3a5f;
 
+  /* Overlay */
+  --canvas-overlay-bg: rgba(0, 0, 0, 0.5);
+
   /* Layout */
   --sidebar-width: 320px;
   --header-height: 64px;
@@ -180,8 +183,8 @@
   --typo-body-l-color-muted: var(--canvas-text-muted);
   
   /* Body M - Standard Body Text */
-  --typo-body-m-size: 16px;
-  --typo-body-m-size-mobile: 15px;
+  --typo-body-m-size: 14px;
+  --typo-body-m-size-mobile: 13px;
   --typo-body-m-weight: 400;
   --typo-body-m-spacing: 0em;
   --typo-body-m-line-height: 1.5;