{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "description": "A select whose list grows out of its button.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://liquikit.dev/r/button.json",
    "https://liquikit.dev/r/core.json",
    "https://liquikit.dev/r/glass.json",
    "https://liquikit.dev/r/popup.json"
  ],
  "files": [
    {
      "path": "src/select.tsx",
      "content": "\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { type ReactNode, useMemo, useRef, useState } from \"react\";\nimport { Button, type ButtonProps } from \"./button\";\nimport type { GlassRefraction, GlassTheme } from \"./glass\";\nimport { MorphPane, PopupState, usePopupState } from \"./popup\";\nimport { cx } from \"./types\";\nimport \"./liquikit.css\";\n\nexport type SelectRootProps<Value> = Omit<\n\tBaseSelect.Root.Props<Value>,\n\t\"open\"\n> & {\n\topen?: boolean;\n};\n\nfunction Root<Value>({\n\topen: openProp,\n\tdefaultOpen = false,\n\tonOpenChange,\n\t...rootProps\n}: SelectRootProps<Value>) {\n\tconst [uncontrolled, setUncontrolled] = useState(defaultOpen);\n\tconst open = openProp ?? uncontrolled;\n\tconst trigger = useRef<HTMLElement | null>(null);\n\tconst state = useMemo(() => ({ open, trigger }), [open]);\n\n\treturn (\n\t\t<PopupState.Provider value={state}>\n\t\t\t<BaseSelect.Root\n\t\t\t\t{...rootProps}\n\t\t\t\topen={open}\n\t\t\t\tonOpenChange={(next, eventDetails) => {\n\t\t\t\t\tif (openProp === undefined) setUncontrolled(next);\n\t\t\t\t\tonOpenChange?.(next, eventDetails);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</PopupState.Provider>\n\t);\n}\n\nexport type SelectTriggerProps = Omit<ButtonProps, \"children\"> & {\n\tplaceholder?: ReactNode;\n};\n\nfunction Trigger({ placeholder, ...props }: SelectTriggerProps) {\n\tconst { trigger } = usePopupState();\n\treturn (\n\t\t<BaseSelect.Trigger\n\t\t\tref={(element: HTMLElement | null) => {\n\t\t\t\ttrigger.current = element;\n\t\t\t}}\n\t\t\trender={\n\t\t\t\t<Button {...props}>\n\t\t\t\t\t<BaseSelect.Value\n\t\t\t\t\t\tclassName=\"glass-ui-select__value\"\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t/>\n\t\t\t\t\t<BaseSelect.Icon className=\"glass-ui-select__icon\">\n\t\t\t\t\t\t<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path d=\"M5 6.5 8 3.5l3 3M5 9.5l3 3 3-3\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</BaseSelect.Icon>\n\t\t\t\t</Button>\n\t\t\t}\n\t\t/>\n\t);\n}\n\nconst overTrigger: NonNullable<BaseSelect.Positioner.Props[\"sideOffset\"]> = ({\n\tside,\n\tanchor,\n}) => -(side === \"top\" || side === \"bottom\" ? anchor.height : anchor.width);\n\nexport type SelectPopupProps = Omit<\n\tBaseSelect.Popup.Props,\n\t\"className\" | \"render\"\n> & {\n\tside?: BaseSelect.Positioner.Props[\"side\"];\n\talign?: BaseSelect.Positioner.Props[\"align\"];\n\tsideOffset?: BaseSelect.Positioner.Props[\"sideOffset\"];\n\ttheme?: GlassTheme;\n\trefraction?: GlassRefraction;\n\tclassName?: string;\n\tchildren?: ReactNode;\n};\n\nfunction Popup({\n\tside = \"bottom\",\n\talign = \"start\",\n\tsideOffset = overTrigger,\n\ttheme,\n\trefraction,\n\tclassName,\n\tchildren,\n\t...popupProps\n}: SelectPopupProps) {\n\treturn (\n\t\t<BaseSelect.Portal>\n\t\t\t<BaseSelect.Positioner\n\t\t\t\tclassName=\"glass-ui-positioner glass-ui-select__positioner\"\n\t\t\t\tside={side}\n\t\t\t\talign={align}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\talignItemWithTrigger={false}\n\t\t\t>\n\t\t\t\t<BaseSelect.Popup\n\t\t\t\t\t{...popupProps}\n\t\t\t\t\tclassName={cx(\"glass-ui-popup glass-ui-menu\", className)}\n\t\t\t\t\trender={(props) => (\n\t\t\t\t\t\t<MorphPane {...props} theme={theme} refraction={refraction} />\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<BaseSelect.List className=\"glass-ui-menu__list\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</BaseSelect.List>\n\t\t\t\t</BaseSelect.Popup>\n\t\t\t</BaseSelect.Positioner>\n\t\t</BaseSelect.Portal>\n\t);\n}\n\nfunction Item({\n\tclassName,\n\tchildren,\n\t...itemProps\n}: Omit<BaseSelect.Item.Props, \"className\"> & { className?: string }) {\n\treturn (\n\t\t<BaseSelect.Item\n\t\t\t{...itemProps}\n\t\t\tclassName={cx(\"glass-ui-menu__item glass-ui-menu__check\", className)}\n\t\t>\n\t\t\t<span className=\"glass-ui-select__slot\" aria-hidden=\"true\">\n\t\t\t\t<BaseSelect.ItemIndicator className=\"glass-ui-select__indicator\">\n\t\t\t\t\t<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path d=\"M3.5 8.5l3 3 6-7\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</BaseSelect.ItemIndicator>\n\t\t\t</span>\n\t\t\t<BaseSelect.ItemText className=\"glass-ui-menu__text\">\n\t\t\t\t{children}\n\t\t\t</BaseSelect.ItemText>\n\t\t</BaseSelect.Item>\n\t);\n}\n\nfunction Separator({\n\tclassName,\n\t...separatorProps\n}: Omit<BaseSelect.Separator.Props, \"className\"> & { className?: string }) {\n\treturn (\n\t\t<BaseSelect.Separator\n\t\t\t{...separatorProps}\n\t\t\tclassName={cx(\"glass-ui-menu__separator\", className)}\n\t\t/>\n\t);\n}\n\nfunction Group(props: BaseSelect.Group.Props) {\n\treturn <BaseSelect.Group {...props} />;\n}\n\nfunction GroupLabel({\n\tclassName,\n\t...labelProps\n}: Omit<BaseSelect.GroupLabel.Props, \"className\"> & { className?: string }) {\n\treturn (\n\t\t<BaseSelect.GroupLabel\n\t\t\t{...labelProps}\n\t\t\tclassName={cx(\"glass-ui-menu__label\", className)}\n\t\t/>\n\t);\n}\n\nexport const Select = {\n\tRoot,\n\tTrigger,\n\tPopup,\n\tItem,\n\tSeparator,\n\tGroup,\n\tGroupLabel,\n};\n\nexport const SelectRoot = Select.Root;\nexport const SelectTrigger = Select.Trigger;\nexport const SelectPopup = Select.Popup;\nexport const SelectItem = Select.Item;\nexport const SelectSeparator = Select.Separator;\nexport const SelectGroup = Select.Group;\nexport const SelectGroupLabel = Select.GroupLabel;\n",
      "type": "registry:ui",
      "target": "@components/liquikit/select.tsx"
    }
  ],
  "type": "registry:ui"
}