{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "description": "A neumorphic select/dropdown component.",
  "dependencies": [
    "@base-ui/react",
    "@phosphor-icons/react",
    "class-variance-authority"
  ],
  "registryDependencies": ["utils"],
  "files": [
    {
      "path": "src/components/ui/select.tsx",
      "content": "\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { CaretUpDown, Check } from \"@phosphor-icons/react\";\nimport * as React from \"react\";\nimport { type ComponentProps, createContext, useContext } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst selectTriggerVariants = cva(\n  [\n    \"flex w-full items-center justify-between bg-surface shadow-neu-sm transition-all outline-none cursor-pointer\",\n    \"data-[popup-open]:shadow-neu-pressed-sm\",\n    \"data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed\",\n    \"focus-visible:outline-2 focus-visible:outline-primary focus-visible:-outline-offset-2\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-8 px-3 text-sm rounded-lg\",\n        md: \"h-10 px-4 text-base rounded-xl\",\n        lg: \"h-12 px-5 text-lg rounded-xl\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  },\n);\n\ntype SelectSize = \"sm\" | \"md\" | \"lg\";\n\ntype SelectItemType = { value: string | null; label: string };\n\nconst SelectContext = createContext<{\n  size: SelectSize;\n}>({\n  size: \"md\",\n});\n\ntype SelectProps = ComponentProps<typeof BaseSelect.Root> &\n  VariantProps<typeof selectTriggerVariants> & {\n    items?: SelectItemType[];\n  };\n\nfunction Select({ size = \"md\", children, items, ...props }: SelectProps) {\n  return (\n    <SelectContext.Provider value={{ size: size ?? \"md\" }}>\n      <BaseSelect.Root items={items} {...props}>\n        {children}\n      </BaseSelect.Root>\n    </SelectContext.Provider>\n  );\n}\n\nfunction SelectTrigger({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof BaseSelect.Trigger>) {\n  const { size } = useContext(SelectContext);\n\n  return (\n    <BaseSelect.Trigger\n      className={cn(selectTriggerVariants({ size }), className)}\n      {...props}\n    >\n      {children}\n      <BaseSelect.Icon className=\"ml-2\">\n        <CaretUpDown weight=\"bold\" className=\"size-4 opacity-50\" />\n      </BaseSelect.Icon>\n    </BaseSelect.Trigger>\n  );\n}\n\nconst SelectValue = BaseSelect.Value;\n\nfunction SelectContent({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof BaseSelect.Popup>) {\n  return (\n    <BaseSelect.Portal>\n      <BaseSelect.Positioner sideOffset={8}>\n        <BaseSelect.Popup\n          className={cn(\n            \"z-50 min-w-[var(--anchor-width)] overflow-hidden rounded-xl bg-surface p-1 shadow-neu\",\n            \"data-[open]:animate-in data-[open]:fade-in data-[open]:slide-in-from-top-2 data-[closed]:animate-out data-[closed]:fade-out data-[closed]:slide-out-to-top-2 duration-150\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </BaseSelect.Popup>\n      </BaseSelect.Positioner>\n    </BaseSelect.Portal>\n  );\n}\n\ntype SelectItemProps = ComponentProps<typeof BaseSelect.Item> & {\n  children: React.ReactNode;\n  label?: string;\n};\n\nfunction SelectItem({\n  className,\n  children,\n  label,\n  value,\n  ...props\n}: SelectItemProps) {\n  return (\n    <BaseSelect.Item\n      className={cn(\n        \"relative flex w-full select-none items-center justify-between rounded-lg px-3 py-2 outline-none transition-all cursor-pointer\",\n        \"hover:shadow-neu-pressed-xs hover:bg-surface\",\n        \"data-[highlighted]:shadow-neu-pressed-xs data-[highlighted]:bg-surface\",\n        \"data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed\",\n        className,\n      )}\n      value={value}\n      {...props}\n    >\n      <BaseSelect.ItemText>{children}</BaseSelect.ItemText>\n      <BaseSelect.ItemIndicator>\n        <Check weight=\"bold\" className=\"size-4\" />\n      </BaseSelect.ItemIndicator>\n    </BaseSelect.Item>\n  );\n}\n\nexport {\n  Select,\n  SelectTrigger,\n  SelectValue,\n  SelectContent,\n  SelectItem,\n  selectTriggerVariants,\n};\nexport type { SelectProps, SelectItemProps };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}