canvas-ui-sdk 0.3.7 → 0.3.9

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                \"flex items-center gap-2 bg-white border overflow-hidden transition-colors\",\n                \"focus:outline-none focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2\",\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-white 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-white\"\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                \"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)] focus:ring-offset-2\",\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"
     }
   ],
   "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-white 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)] focus-within:ring-offset-2\",\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)] focus-within:ring-offset-2\",\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"
     }
   ],
   "dependencies": [

package/registry/ui/radio-group.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/radio-group.tsx",
       "type": "registry:ui",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"aspect-square size-4 shrink-0 rounded-full border border-[var(--canvas-border-input)] bg-white transition-colors\",\n        \"outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2\",\n        \"aria-invalid:border-[var(--canvas-border-input-invalid)] aria-invalid:ring-[var(--canvas-border-input-invalid)]/20\",\n        \"disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)]\",\n        \"data-[state=checked]:border-[var(--canvas-primary)]\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <CircleIcon className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-[var(--canvas-primary)] text-[var(--canvas-primary)]\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"aspect-square size-4 shrink-0 rounded-full border border-[var(--canvas-border-input)] bg-[var(--canvas-background)] transition-colors\",\n        \"outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2\",\n        \"aria-invalid:border-[var(--canvas-border-input-invalid)] aria-invalid:ring-[var(--canvas-border-input-invalid)]/20\",\n        \"disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)]\",\n        \"data-[state=checked]:border-[var(--canvas-primary)]\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <CircleIcon className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-[var(--canvas-primary)] text-[var(--canvas-primary)]\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\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-white 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)] focus-within:ring-offset-2\",\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)] focus-within:ring-offset-2\",\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"
     }
   ],
   "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  \"flex w-full items-center justify-between gap-2 bg-white 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)] focus:ring-offset-2 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 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 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default 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  \"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)] focus:ring-offset-2 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 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 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default 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\",\n                \"font-medium whitespace-nowrap\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2\",\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-white 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-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)] focus-visible:ring-offset-2\",\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/slider.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/slider.tsx",
       "type": "registry:ui",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface SliderProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, \"value\" | \"onValueChange\"> {\n  inputSize?: \"sm\" | \"default\" | \"lg\";\n  value?: number[];\n  onValueChange?: (value: number[]) => void;\n  showLabel?: boolean;\n  labelFormatter?: (value: number[]) => string;\n}\n\nconst Slider = React.forwardRef<\n  React.ComponentRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ \n  className, \n  inputSize = \"default\", \n  value, \n  onValueChange, \n  showLabel = true,\n  labelFormatter,\n  min = 0,\n  max = 100,\n  step = 1,\n  ...props \n}, ref) => {\n  // Size mappings\n  const sizeStyles = {\n    sm: {\n      trackHeight: \"h-1\",\n      thumbSize: \"size-3\",\n      labelClass: \"text-xs\",\n    },\n    default: {\n      trackHeight: \"h-1.5\",\n      thumbSize: \"size-4\",\n      labelClass: \"text-sm\",\n    },\n    lg: {\n      trackHeight: \"h-2\",\n      thumbSize: \"size-5\",\n      labelClass: \"text-base\",\n    },\n  };\n\n  const styles = sizeStyles[inputSize];\n\n  // Default label formatter\n  const formatLabel = labelFormatter || ((values: number[]) => {\n    if (values.length === 2) {\n      return `${values[0]} - ${values[1]}`;\n    }\n    return `${values[0]}`;\n  });\n\n  return (\n    <div className=\"flex flex-col gap-[var(--spacing-xs)]\">\n      <SliderPrimitive.Root\n        ref={ref}\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        onValueChange={onValueChange}\n        className={cn(\n          \"relative flex w-full touch-none select-none items-center\",\n          className\n        )}\n        {...props}\n      >\n        <SliderPrimitive.Track\n          className={cn(\n            \"relative w-full grow overflow-hidden rounded-full bg-[var(--canvas-border)]\",\n            styles.trackHeight\n          )}\n        >\n          <SliderPrimitive.Range className=\"absolute h-full bg-[var(--canvas-primary)]\" />\n        </SliderPrimitive.Track>\n        {(value || [0]).map((_, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            className={cn(\n              \"block rounded-full border-2 border-white bg-[var(--canvas-primary)]\",\n              \"shadow-[0px_1px_2px_0px_rgba(0,0,0,0.08)]\",\n              \"ring-offset-background transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2\",\n              \"disabled:pointer-events-none disabled:opacity-50\",\n              styles.thumbSize\n            )}\n          />\n        ))}\n      </SliderPrimitive.Root>\n      {showLabel && value && (\n        <p \n          className={cn(\n            \"text-center text-[var(--canvas-text-muted)]\",\n            styles.labelClass\n          )}\n        >\n          {formatLabel(value)}\n        </p>\n      )}\n    </div>\n  );\n});\n\nSlider.displayName = \"Slider\";\n\nexport { Slider };\n\n"
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface SliderProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, \"value\" | \"onValueChange\"> {\n  inputSize?: \"sm\" | \"default\" | \"lg\";\n  value?: number[];\n  onValueChange?: (value: number[]) => void;\n  showLabel?: boolean;\n  labelFormatter?: (value: number[]) => string;\n}\n\nconst Slider = React.forwardRef<\n  React.ComponentRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ \n  className, \n  inputSize = \"default\", \n  value, \n  onValueChange, \n  showLabel = true,\n  labelFormatter,\n  min = 0,\n  max = 100,\n  step = 1,\n  ...props \n}, ref) => {\n  // Size mappings\n  const sizeStyles = {\n    sm: {\n      trackHeight: \"h-1\",\n      thumbSize: \"size-3\",\n      labelClass: \"text-xs\",\n    },\n    default: {\n      trackHeight: \"h-1.5\",\n      thumbSize: \"size-4\",\n      labelClass: \"text-sm\",\n    },\n    lg: {\n      trackHeight: \"h-2\",\n      thumbSize: \"size-5\",\n      labelClass: \"text-base\",\n    },\n  };\n\n  const styles = sizeStyles[inputSize];\n\n  // Default label formatter\n  const formatLabel = labelFormatter || ((values: number[]) => {\n    if (values.length === 2) {\n      return `${values[0]} - ${values[1]}`;\n    }\n    return `${values[0]}`;\n  });\n\n  return (\n    <div className=\"flex flex-col gap-[var(--spacing-xs)]\">\n      <SliderPrimitive.Root\n        ref={ref}\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        onValueChange={onValueChange}\n        className={cn(\n          \"relative flex w-full touch-none select-none items-center\",\n          className\n        )}\n        {...props}\n      >\n        <SliderPrimitive.Track\n          className={cn(\n            \"relative w-full grow overflow-hidden rounded-full bg-[var(--canvas-border)]\",\n            styles.trackHeight\n          )}\n        >\n          <SliderPrimitive.Range className=\"absolute h-full bg-[var(--canvas-primary)]\" />\n        </SliderPrimitive.Track>\n        {(value || [0]).map((_, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            className={cn(\n              \"block rounded-full border-2 border-[var(--canvas-background)] bg-[var(--canvas-primary)]\",\n              \"shadow-[0px_1px_2px_0px_rgba(0,0,0,0.08)]\",\n              \"ring-offset-background transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2\",\n              \"disabled:pointer-events-none disabled:opacity-50\",\n              styles.thumbSize\n            )}\n          />\n        ))}\n      </SliderPrimitive.Root>\n      {showLabel && value && (\n        <p \n          className={cn(\n            \"text-center text-[var(--canvas-text-muted)]\",\n            styles.labelClass\n          )}\n        >\n          {formatLabel(value)}\n        </p>\n      )}\n    </div>\n  );\n});\n\nSlider.displayName = \"Slider\";\n\nexport { Slider };\n\n"
     }
   ],
   "dependencies": [

package/registry/ui/switch.json

@@ -6,7 +6,7 @@
     {
       "path": "components/ui/switch.tsx",
       "type": "registry:ui",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Switch({\n  className,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        \"peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-colors\",\n        \"data-[state=checked]:bg-[var(--canvas-primary)] data-[state=unchecked]:bg-[var(--canvas-border)]\",\n        \"outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2\",\n        \"disabled:cursor-not-allowed disabled:data-[state=checked]:bg-[var(--canvas-input-disabled-text)] disabled:data-[state=unchecked]:bg-[var(--canvas-input-disabled-border)]\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"pointer-events-none block size-4 rounded-full bg-white ring-0 transition-transform\",\n          \"data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Switch({\n  className,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        \"peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-colors\",\n        \"data-[state=checked]:bg-[var(--canvas-primary)] data-[state=unchecked]:bg-[var(--canvas-border)]\",\n        \"outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2\",\n        \"disabled:cursor-not-allowed disabled:data-[state=checked]:bg-[var(--canvas-input-disabled-text)] disabled:data-[state=unchecked]:bg-[var(--canvas-input-disabled-border)]\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"pointer-events-none block size-4 rounded-full bg-[var(--canvas-background)] ring-0 transition-transform\",\n          \"data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\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] 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-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"
     }
   ],
   "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-white 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)] focus:ring-offset-2\",\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)] focus:ring-offset-2\",\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"
     }
   ],
   "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-white 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)] focus:ring-offset-2 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)] focus:ring-offset-2 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"
     }
   ],
   "dependencies": [

package/styles/tokens.reference.css

@@ -19,6 +19,15 @@
   --canvas-flair-bg: #093378;
   --canvas-destructive: #ef4444;
   --canvas-transparent: transparent;
+
+  /* Status Colors */
+  --canvas-success: #08875d;
+  --canvas-success-surface: #edfdf8;
+  --canvas-warning: #d97706;
+  --canvas-warning-surface: #fffbeb;
+  --canvas-info: #2563eb;
+  --canvas-info-surface: #eff6ff;
+  --canvas-destructive-surface: #fef2f2;
   
   /* Text Colors */
   --canvas-text: #0d121c;