{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "type": "registry:block",
  "title": "Select",
  "description": "A refined select for filters, settings, and onboarding choices.",
  "author": "Wensity <hey@wensity.com>",
  "dependencies": [
    "@base-ui/react",
    "@tabler/icons-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/wensity/lib/utils.ts",
      "type": "registry:lib",
      "target": "@lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    },
    {
      "path": "registry/wensity/select.tsx",
      "type": "registry:component",
      "target": "@components/wensity/select.tsx",
      "content": "\"use client\";\n\n/**\n * Select — Base UI Select foundation (Phase 4B).\n * Form integration via Root name/required/disabled (hidden native input from Base UI).\n * D-17: onOpenChange → (open: boolean) => void; `modal` not exposed publicly\n * (always non-modal dropdown). data-open replaces data-state=open.\n */\n\nimport * as React from \"react\";\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { IconCheck, IconChevronDown } from \"@tabler/icons-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\nexport type SelectVariant = \"field\" | \"filled\" | \"command\" | \"pill\";\n\nexport type SelectOption = {\n  value: string;\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n  disabled?: boolean;\n};\n\nexport type SelectGroup = {\n  label?: React.ReactNode;\n  options: SelectOption[];\n};\n\nexport interface SelectProps {\n  id?: string;\n  options: SelectOption[] | SelectGroup[];\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  name?: string;\n  required?: boolean;\n  disabled?: boolean;\n  /**\n   * Accessible name for a Select with no visible `label` — compact selects in\n   * tables, toolbars, and icon-only contexts. Nearby column-header text is not\n   * automatically associated with the trigger, so one of `label`,\n   * `aria-label`, or `aria-labelledby` is required for a usable control.\n   */\n  \"aria-label\"?: string;\n  /** Ids of existing visible text that names this Select. */\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n  label?: React.ReactNode;\n  hint?: React.ReactNode;\n  error?: React.ReactNode;\n  placeholder?: React.ReactNode;\n  selectSize?: SelectSize;\n  variant?: SelectVariant;\n  fullWidth?: boolean;\n  leadingIcon?: React.ReactNode;\n  containerClassName?: string;\n  triggerClassName?: string;\n  contentClassName?: string;\n}\n\nconst triggerHeights: Record<SelectSize, string> = {\n  sm: \"min-h-[var(--primitive-control-height-sm)] px-3 py-1 text-xs\",\n  md: \"min-h-[var(--primitive-control-height-md)] px-3.5 py-1 text-sm\",\n  lg: \"min-h-[var(--primitive-control-height-lg)] px-4 py-1 text-[15px]\",\n};\n\nconst contentWidths: Record<SelectSize, string> = {\n  sm: \"min-w-[12rem]\",\n  md: \"min-w-[15rem]\",\n  lg: \"min-w-[17rem]\",\n};\n\nconst overlaySurfaceClass = cn(\n  \"border border-[var(--border)] bg-[var(--primitive-surface-overlay)]\",\n  \"[box-shadow:var(--primitive-shadow-overlay)]\",\n);\n\nconst focusRing = cn(\n  \"focus-visible:outline-none\",\n  \"focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)]\",\n  \"focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]\",\n);\n\nconst triggerBase = cn(\n  \"group/select-trigger inline-flex items-center justify-between gap-2\",\n  \"rounded-[var(--primitive-radius-control)] border text-left\",\n  \"disabled:cursor-not-allowed disabled:opacity-45\",\n  \"transition-[background-color,border-color,color] duration-160 ease-[var(--primitive-ease)]\",\n  \"motion-reduce:transition-none\",\n  focusRing,\n);\n\nconst variantClasses: Record<SelectVariant, string> = {\n  field: cn(\n    \"border-[var(--border)] bg-[var(--background)] text-[var(--foreground)]\",\n    \"hover:border-[color-mix(in_srgb,var(--foreground)_16%,transparent)]\",\n    \"data-[popup-open]:border-[color-mix(in_srgb,var(--foreground)_24%,transparent)]\",\n  ),\n  filled: cn(\n    \"border-transparent bg-[var(--primitive-surface-hover)] text-[var(--foreground)]\",\n    \"hover:bg-[var(--primitive-surface-active)]\",\n  ),\n  command: cn(\n    \"border-[var(--border)] bg-[var(--primitive-surface-elevated)] text-[var(--foreground)]\",\n    \"[box-shadow:var(--primitive-shadow-raised)]\",\n    \"hover:border-[color-mix(in_srgb,var(--foreground)_18%,transparent)]\",\n    \"data-[popup-open]:border-[color-mix(in_srgb,var(--foreground)_24%,transparent)]\",\n  ),\n  pill: cn(\n    \"rounded-full border-[var(--border)] bg-[var(--primitive-surface-hover)] text-[var(--foreground)]\",\n    \"hover:border-[color-mix(in_srgb,var(--foreground)_18%,transparent)]\",\n  ),\n};\n\nconst popupMotionClass = cn(\n  \"origin-[var(--transform-origin)] transform-gpu outline-none\",\n  \"transition-[opacity,scale] duration-[180ms] ease-[var(--primitive-ease,cubic-bezier(0.23,1,0.32,1))]\",\n  \"data-[ending-style]:duration-[120ms]\",\n  \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\n  \"data-[starting-style]:scale-[0.96] data-[ending-style]:scale-[0.96]\",\n  \"motion-reduce:transition-none motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:scale-100\",\n);\n\nfunction adaptOpenChange(\n  onOpenChange?: (open: boolean) => void,\n): ((open: boolean, details: unknown) => void) | undefined {\n  if (!onOpenChange) return undefined;\n  return (open) => onOpenChange(open);\n}\n\nfunction adaptValueChange(\n  onValueChange?: (value: string) => void,\n):\n  | ((value: string | null, eventDetails: unknown) => void)\n  | undefined {\n  if (!onValueChange) return undefined;\n  return (value) => {\n    if (value != null) onValueChange(value);\n  };\n}\n\nfunction isGroupedOptions(\n  options: SelectOption[] | SelectGroup[],\n): options is SelectGroup[] {\n  return options.length > 0 && \"options\" in options[0];\n}\n\nfunction flattenOptions(options: SelectOption[] | SelectGroup[]) {\n  return isGroupedOptions(options)\n    ? options.flatMap((group) => group.options)\n    : options;\n}\n\nexport function Select({\n  options,\n  id,\n  value,\n  defaultValue,\n  onValueChange,\n  open,\n  defaultOpen,\n  onOpenChange,\n  name,\n  required,\n  disabled,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-required\": ariaRequired,\n  label,\n  hint,\n  error,\n  placeholder = \"Select option\",\n  selectSize = \"md\",\n  variant = \"field\",\n  fullWidth = true,\n  leadingIcon,\n  containerClassName,\n  triggerClassName,\n  contentClassName,\n}: SelectProps) {\n  const reactId = React.useId();\n  const selectId = id ?? `wensity-select-${reactId}`;\n  const hintId = hint ? `${selectId}-hint` : undefined;\n  const errorId = error ? `${selectId}-error` : undefined;\n  const flattenedOptions = React.useMemo(\n    () => flattenOptions(options),\n    [options],\n  );\n  const selectedOption = flattenedOptions.find(\n    (option) => option.value === value,\n  );\n  const describedBy =\n    [ariaDescribedBy, errorId, hintId].filter(Boolean).join(\" \") || undefined;\n\n  const renderOption = (option: SelectOption) => (\n    <BaseSelect.Item\n      key={option.value}\n      value={option.value}\n      disabled={option.disabled}\n      className={cn(\n        \"group/select-item relative flex min-h-9 cursor-default select-none items-center gap-3\",\n        \"rounded-[var(--primitive-radius-item)] px-2.5 py-2 pr-9\",\n        \"text-sm text-[var(--foreground)] outline-none\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-40\",\n        \"data-[highlighted]:bg-[var(--primitive-surface-hover)]\",\n        \"data-[selected]:bg-[var(--primitive-surface-selected)]\",\n      )}\n    >\n      {option.leading ? (\n        <span className=\"grid size-7 shrink-0 place-items-center rounded-[var(--primitive-radius-control-sm)] border border-[var(--border)] bg-[var(--primitive-surface-hover)] text-[var(--muted-foreground)] [&_svg]:size-4\">\n          {option.leading}\n        </span>\n      ) : null}\n      <span className=\"flex min-w-0 flex-1 items-baseline gap-2\">\n        <BaseSelect.ItemText className=\"min-w-0 truncate font-medium tracking-[-0.01em]\">\n          {option.label}\n        </BaseSelect.ItemText>\n        {option.description ? (\n          <span className=\"min-w-0 flex-1 truncate text-[12px] leading-none text-[var(--muted-foreground)]\">\n            {option.description}\n          </span>\n        ) : null}\n      </span>\n      {option.trailing ? (\n        <span className=\"mt-0.5 shrink-0 text-[12px] font-medium text-[var(--muted-foreground)]\">\n          {option.trailing}\n        </span>\n      ) : null}\n      <BaseSelect.ItemIndicator className=\"absolute right-3 top-1/2 -translate-y-1/2 text-[var(--foreground)]\">\n        <IconCheck stroke={1.75} className=\"size-4\" />\n      </BaseSelect.ItemIndicator>\n    </BaseSelect.Item>\n  );\n\n  const renderOptions = () => {\n    if (isGroupedOptions(options)) {\n      return options.map((group, groupIndex) => (\n        <BaseSelect.Group key={groupIndex}>\n          {group.label ? (\n            <BaseSelect.GroupLabel className=\"px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-[0.07em] text-[var(--muted-foreground)]\">\n              {group.label}\n            </BaseSelect.GroupLabel>\n          ) : null}\n          <div className=\"space-y-0.5\">\n            {group.options.map((option) => renderOption(option))}\n          </div>\n        </BaseSelect.Group>\n      ));\n    }\n\n    return options.map((option) => renderOption(option));\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-1.5\",\n        fullWidth ? \"w-full\" : \"w-fit\",\n        containerClassName,\n      )}\n    >\n      {label ? (\n        <label\n          htmlFor={selectId}\n          className=\"text-[13px] font-medium leading-none tracking-[-0.01em] text-[var(--foreground)]\"\n        >\n          {label}\n        </label>\n      ) : null}\n\n      <BaseSelect.Root data-wensity-primitive=\"\"\n        id={selectId}\n        name={name}\n        required={required}\n        disabled={disabled}\n        value={value}\n        defaultValue={defaultValue}\n        open={open}\n        defaultOpen={defaultOpen}\n        modal={false}\n        onOpenChange={adaptOpenChange(onOpenChange)}\n        onValueChange={adaptValueChange(onValueChange)}\n      >\n        <BaseSelect.Trigger\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-invalid={ariaInvalid ?? (error ? true : undefined)}\n          aria-describedby={describedBy}\n          aria-required={ariaRequired ?? required ?? undefined}\n          className={cn(\n            triggerBase,\n            variantClasses[variant],\n            triggerHeights[selectSize],\n            fullWidth ? \"w-full\" : \"w-fit\",\n            error &&\n              \"border-[var(--primitive-destructive-border)] data-[popup-open]:border-[var(--primitive-destructive)]\",\n            triggerClassName,\n          )}\n        >\n          <span className=\"flex min-w-0 flex-1 items-center gap-2.5\">\n            {leadingIcon || selectedOption?.leading ? (\n              <span className=\"grid size-5 shrink-0 place-items-center text-[var(--muted-foreground)] [&_svg]:size-4\">\n                {leadingIcon ?? selectedOption?.leading}\n              </span>\n            ) : null}\n            <BaseSelect.Value\n              placeholder={placeholder}\n              className={cn(\n                \"min-w-0 flex-1 truncate data-[placeholder]:text-[var(--primitive-text-placeholder)]\",\n              )}\n            >\n              {(selected) => {\n                const match = flattenedOptions.find(\n                  (option) => option.value === selected,\n                );\n                if (!match) return placeholder;\n                if (variant === \"command\" && match.description) {\n                  return (\n                    <>\n                      <span className=\"block truncate font-medium tracking-[-0.015em] text-[var(--foreground)]\">\n                        {match.label}\n                      </span>\n                      <span className=\"mt-0.5 block truncate text-[12px] leading-none text-[var(--muted-foreground)]\">\n                        {match.description}\n                      </span>\n                    </>\n                  );\n                }\n                return (\n                  <span className=\"block truncate font-medium tracking-[-0.015em]\">\n                    {match.label}\n                  </span>\n                );\n              }}\n            </BaseSelect.Value>\n          </span>\n          <BaseSelect.Icon className=\"flex shrink-0 text-[var(--muted-foreground)]\">\n            <IconChevronDown\n              stroke={1.75}\n              className=\"size-4 transition-transform duration-200 ease-[var(--primitive-ease)] group-data-[popup-open]/select-trigger:rotate-180 motion-reduce:transition-none\"\n            />\n          </BaseSelect.Icon>\n        </BaseSelect.Trigger>\n\n        <BaseSelect.Portal>\n          <BaseSelect.Positioner\n            sideOffset={8}\n            collisionPadding={12}\n            alignItemWithTrigger={false}\n            className=\"z-[var(--primitive-z-popover)] outline-none\"\n          >\n            <BaseSelect.Popup data-wensity-primitive=\"\"\n              className={cn(\n                overlaySurfaceClass,\n                \"relative max-h-[min(22rem,var(--available-height))] w-[var(--anchor-width)] overflow-x-hidden overflow-y-auto rounded-[var(--primitive-radius-surface)] p-1.5 text-[var(--foreground)]\",\n                contentWidths[selectSize],\n                popupMotionClass,\n                contentClassName,\n              )}\n            >\n              <BaseSelect.List className=\"outline-none\">\n                {renderOptions()}\n              </BaseSelect.List>\n            </BaseSelect.Popup>\n          </BaseSelect.Positioner>\n        </BaseSelect.Portal>\n      </BaseSelect.Root>\n\n      {hint ? (\n        <p\n          id={hintId}\n          className=\"text-[12px] leading-[1.45] text-[var(--muted-foreground)]\"\n        >\n          {hint}\n        </p>\n      ) : null}\n      {error ? (\n        <p\n          id={errorId}\n          className=\"text-[12px] font-medium leading-[1.45] text-[var(--primitive-destructive)]\"\n        >\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n"
    }
  ],
  "cssVars": {
    "theme": {
      "font-sans": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-display": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-heading": "var(--font-cabinet, ui-sans-serif, system-ui, sans-serif)",
      "color-background": "var(--background)",
      "color-foreground": "var(--foreground)",
      "color-surface": "var(--surface)",
      "color-surface-muted": "var(--surface-muted)",
      "color-border": "var(--border)",
      "color-border-strong": "var(--border-strong)",
      "color-muted": "var(--muted)",
      "color-muted-foreground": "var(--muted-foreground)",
      "color-ring": "var(--ring)",
      "color-chili-50": "#fff1ee",
      "color-chili-100": "#ffe2db",
      "color-chili-200": "#ffa896",
      "color-chili-300": "#ff8a73",
      "color-chili-400": "#f15a45",
      "color-chili-500": "#cd1c18",
      "color-chili-600": "#b31614",
      "color-chili-700": "#9b1313",
      "color-chili-800": "#6a0d0e",
      "color-chili-900": "#38000a",
      "color-chili-950": "#1f0006",
      "color-primitive-surface-elevated": "var(--primitive-surface-elevated)",
      "color-primitive-surface-overlay": "var(--primitive-surface-overlay)",
      "color-primitive-surface-hover": "var(--primitive-surface-hover)",
      "color-primitive-surface-active": "var(--primitive-surface-active)",
      "color-primitive-surface-selected": "var(--primitive-surface-selected)",
      "color-primitive-border-subtle": "var(--primitive-border-subtle)",
      "color-primitive-ring": "var(--primitive-ring)",
      "color-primitive-text-secondary": "var(--primitive-text-secondary)",
      "color-primitive-text-placeholder": "var(--primitive-text-placeholder)",
      "color-primitive-text-inverse": "var(--primitive-text-inverse)",
      "color-primitive-destructive": "var(--primitive-destructive)",
      "color-primitive-destructive-hover": "var(--primitive-destructive-hover)",
      "color-primitive-destructive-active": "var(--primitive-destructive-active)",
      "color-primitive-destructive-foreground": "var(--primitive-destructive-foreground)",
      "color-primitive-destructive-surface": "var(--primitive-destructive-surface)",
      "color-primitive-destructive-border": "var(--primitive-destructive-border)",
      "color-primitive-success": "var(--primitive-success)",
      "color-primitive-warning": "var(--primitive-warning)",
      "color-primitive-info": "var(--primitive-info)",
      "color-primitive-control-solid": "var(--primitive-control-solid)",
      "color-primitive-control-solid-hover": "var(--primitive-control-solid-hover)",
      "color-primitive-control-solid-active": "var(--primitive-control-solid-active)",
      "color-primitive-control-solid-foreground": "var(--primitive-control-solid-foreground)",
      "color-primitive-chart-1": "var(--primitive-chart-1)",
      "color-primitive-chart-2": "var(--primitive-chart-2)",
      "color-primitive-chart-3": "var(--primitive-chart-3)",
      "color-primitive-chart-4": "var(--primitive-chart-4)",
      "color-primitive-chart-5": "var(--primitive-chart-5)",
      "color-primitive-chart-6": "var(--primitive-chart-6)",
      "radius-primitive": "var(--primitive-radius)",
      "radius-primitive-control": "var(--primitive-radius-control)",
      "radius-primitive-control-sm": "var(--primitive-radius-control-sm)",
      "radius-primitive-surface": "var(--primitive-radius-surface)",
      "radius-primitive-item": "var(--primitive-radius-item)",
      "font-primitive-sans": "var(--primitive-font-sans)",
      "font-primitive-display": "var(--primitive-font-display)",
      "font-primitive-mono": "var(--primitive-font-mono)",
      "spacing-primitive-control-height-sm": "var(--primitive-control-height-sm)",
      "spacing-primitive-control-height-md": "var(--primitive-control-height-md)",
      "spacing-primitive-control-height-lg": "var(--primitive-control-height-lg)"
    },
    "light": {
      "background": "#fafafa",
      "foreground": "#0a0a0a",
      "surface": "#ffffff",
      "surface-muted": "#f4f4f5",
      "border": "rgba(10, 10, 10, 0.08)",
      "border-strong": "rgba(10, 10, 10, 0.16)",
      "muted": "#f4f4f5",
      "muted-foreground": "#52525b",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(10, 10, 10, 0.07)",
      "llb-primary": "#18181b",
      "llb-primary-fg": "#ffffff",
      "llb-success": "#1f883d",
      "llb-error": "#cf222e",
      "primitive-surface-elevated": "#ffffff",
      "primitive-surface-overlay": "#ffffff",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 4%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 7%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 6%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#24292d",
      "primitive-control-solid-hover": "#2c3237",
      "primitive-control-solid-active": "#1e2326",
      "primitive-control-solid-foreground": "#ffffff",
      "primitive-chart-1": "#2a78d6",
      "primitive-chart-2": "#1baf7a",
      "primitive-chart-3": "#eda100",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#4a3aa7",
      "primitive-chart-6": "#e34948",
      "primitive-text-inverse": "#ffffff",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#dc2626",
      "primitive-destructive-hover": "#b91c1c",
      "primitive-destructive-active": "#991b1b",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(220, 38, 38, 0.10)",
      "primitive-destructive-border": "rgba(220, 38, 38, 0.45)",
      "primitive-success": "#047857",
      "primitive-success-surface": "rgba(4, 120, 87, 0.10)",
      "primitive-success-border": "rgba(4, 120, 87, 0.45)",
      "primitive-warning": "#b45309",
      "primitive-warning-surface": "rgba(180, 83, 9, 0.10)",
      "primitive-warning-border": "rgba(180, 83, 9, 0.45)",
      "primitive-info": "#0369a1",
      "primitive-info-surface": "rgba(3, 105, 161, 0.10)",
      "primitive-info-border": "rgba(3, 105, 161, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 48px -24px rgba(0, 0, 0, 0.35)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.08), 0 24px 64px -28px rgba(0, 0, 0, 0.42)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "dark": {
      "background": "#0a0a0b",
      "foreground": "#f5f5f6",
      "surface": "#111113",
      "surface-muted": "#18181b",
      "border": "rgba(255, 255, 255, 0.08)",
      "border-strong": "rgba(255, 255, 255, 0.14)",
      "muted": "#1c1c1f",
      "muted-foreground": "#a1a1aa",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(255, 255, 255, 0.06)",
      "llb-primary": "#f5f5f6",
      "llb-primary-fg": "#0a0a0b",
      "llb-success": "#2da44e",
      "llb-error": "#f85149",
      "primitive-surface-elevated": "#0f0f10",
      "primitive-surface-overlay": "#141415",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 5%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 10%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 8%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#f5f3ee",
      "primitive-control-solid-hover": "#ffffff",
      "primitive-control-solid-active": "#e8e4da",
      "primitive-control-solid-foreground": "#151719",
      "primitive-chart-1": "#3987e5",
      "primitive-chart-2": "#199e70",
      "primitive-chart-3": "#c98500",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#9085e9",
      "primitive-chart-6": "#e66767",
      "primitive-text-inverse": "#151719",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#e11d2e",
      "primitive-destructive-hover": "#c1121f",
      "primitive-destructive-active": "#a4161a",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(225, 29, 46, 0.12)",
      "primitive-destructive-border": "rgba(225, 29, 46, 0.52)",
      "primitive-success": "#34d399",
      "primitive-success-surface": "rgba(52, 211, 153, 0.12)",
      "primitive-success-border": "rgba(52, 211, 153, 0.45)",
      "primitive-warning": "#fbbf24",
      "primitive-warning-surface": "rgba(251, 191, 36, 0.12)",
      "primitive-warning-border": "rgba(251, 191, 36, 0.45)",
      "primitive-info": "#38bdf8",
      "primitive-info-surface": "rgba(56, 189, 248, 0.12)",
      "primitive-info-border": "rgba(56, 189, 248, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 56px -28px rgba(0, 0, 0, 0.72)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.45), 0 28px 72px -32px rgba(0, 0, 0, 0.8)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    }
  },
  "css": {
    "@layer base": {
      ":where([data-wensity-primitive])": {
        "font-family": "var(--primitive-font-sans)"
      }
    },
    "@utility scrollbar-hidden": {
      "scrollbar-width": "none",
      "-ms-overflow-style": "none",
      "&::-webkit-scrollbar": {
        "display": "none"
      }
    },
    "@keyframes wensity-marquee-x": {
      "from": {
        "transform": "translate3d(0, 0, 0)"
      },
      "to": {
        "transform": "translate3d(-50%, 0, 0)"
      }
    },
    "@keyframes wensity-marquee-x-reverse": {
      "from": {
        "transform": "translate3d(-50%, 0, 0)"
      },
      "to": {
        "transform": "translate3d(0, 0, 0)"
      }
    },
    "@keyframes wensity-morph-rot-cw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(360deg)"
      }
    },
    "@keyframes wensity-morph-rot-ccw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(-360deg)"
      }
    }
  },
  "docs": "Free Wensity component. Installs to @components/wensity/select.tsx. For Pro components and updates, use pnpm dlx wensity@latest add select.",
  "categories": [
    "UI Primitives",
    "wensity",
    "free"
  ],
  "meta": {
    "wensity": {
      "slug": "select",
      "access": "free",
      "category": "UI Primitives",
      "kind": "component",
      "componentUrl": "https://ui.wensity.com/primitives/select",
      "shadcnUrl": "https://ui.wensity.com/r/select",
      "cliInstall": "pnpm dlx wensity@latest add select"
    }
  }
}