{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "files": [
    {
      "path": "registry/new-york/ui/select.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface SelectContextValue {\n\tvalue?: string;\n\tonValueChange?: (value: string) => void;\n\topen: boolean;\n\tsetOpen: (open: boolean) => void;\n\tdisabled?: boolean;\n}\n\nconst SelectContext = React.createContext<SelectContextValue | null>(null);\n\nfunction useSelectContext() {\n\tconst context = React.useContext(SelectContext);\n\tif (!context) {\n\t\tthrow new Error(\"Select components must be used within a Select\");\n\t}\n\treturn context;\n}\n\ninterface SelectProps {\n\tvalue?: string;\n\tonValueChange?: (value: string) => void;\n\tdisabled?: boolean;\n\tchildren: React.ReactNode;\n}\n\nfunction Select({ value, onValueChange, disabled, children }: SelectProps) {\n\tconst [open, setOpen] = React.useState(false);\n\n\treturn (\n\t\t<SelectContext.Provider\n\t\t\tvalue={{ value, onValueChange, open, setOpen, disabled }}\n\t\t>\n\t\t\t<div className=\"relative inline-block w-full\">{children}</div>\n\t\t</SelectContext.Provider>\n\t);\n}\n\ninterface SelectTriggerProps extends React.ComponentProps<\"button\"> {\n\tchildren: React.ReactNode;\n}\n\nfunction SelectTrigger({ className, children, ...props }: SelectTriggerProps) {\n\tconst { open, setOpen, disabled } = useSelectContext();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\trole=\"combobox\"\n\t\t\taria-expanded={open}\n\t\t\tdata-slot=\"select-trigger\"\n\t\t\tdisabled={disabled}\n\t\t\tonClick={() => !disabled && setOpen(!open)}\n\t\t\tclassName={cn(\n\t\t\t\t\"border-input flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs outline-none\",\n\t\t\t\t\"focus:border-ring focus:ring-ring/50 focus:ring-[3px]\",\n\t\t\t\t\"disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<svg\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\twidth=\"16\"\n\t\t\t\theight=\"16\"\n\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\tclassName=\"ml-2 shrink-0 opacity-50\"\n\t\t\t>\n\t\t\t\t<path d=\"m6 9 6 6 6-6\" />\n\t\t\t</svg>\n\t\t</button>\n\t);\n}\n\ninterface SelectValueProps {\n\tplaceholder?: string;\n}\n\nfunction SelectValue({ placeholder }: SelectValueProps) {\n\tconst { value } = useSelectContext();\n\treturn (\n\t\t<span className={cn(!value && \"text-muted-foreground\")}>\n\t\t\t{value || placeholder}\n\t\t</span>\n\t);\n}\n\ninterface SelectContentProps extends React.ComponentProps<\"div\"> {\n\tchildren: React.ReactNode;\n}\n\nfunction SelectContent({ className, children, ...props }: SelectContentProps) {\n\tconst { open, setOpen } = useSelectContext();\n\tconst ref = React.useRef<HTMLDivElement>(null);\n\n\tReact.useEffect(() => {\n\t\tconst handleClickOutside = (e: MouseEvent) => {\n\t\t\tif (ref.current && !ref.current.contains(e.target as Node)) {\n\t\t\t\tsetOpen(false);\n\t\t\t}\n\t\t};\n\n\t\tif (open) {\n\t\t\tdocument.addEventListener(\"mousedown\", handleClickOutside);\n\t\t}\n\n\t\treturn () => document.removeEventListener(\"mousedown\", handleClickOutside);\n\t}, [open, setOpen]);\n\n\tif (!open) return null;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tdata-slot=\"select-content\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-popover text-popover-foreground absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border p-1 shadow-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\ninterface SelectItemProps extends React.ComponentProps<\"div\"> {\n\tvalue: string;\n\tchildren: React.ReactNode;\n}\n\nfunction SelectItem({ className, value, children, ...props }: SelectItemProps) {\n\tconst { value: selectedValue, onValueChange, setOpen } = useSelectContext();\n\tconst isSelected = selectedValue === value;\n\n\treturn (\n\t\t<div\n\t\t\trole=\"option\"\n\t\t\taria-selected={isSelected}\n\t\t\tdata-slot=\"select-item\"\n\t\t\tonClick={() => {\n\t\t\t\tonValueChange?.(value);\n\t\t\t\tsetOpen(false);\n\t\t\t}}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none\",\n\t\t\t\t\"hover:bg-accent hover:text-accent-foreground\",\n\t\t\t\t\"focus:bg-accent focus:text-accent-foreground\",\n\t\t\t\tisSelected && \"bg-accent text-accent-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isSelected && (\n\t\t\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport { Select, SelectTrigger, SelectValue, SelectContent, SelectItem };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}