{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-select",
  "title": "Glass Select",
  "description": "A wide pill that states its current choice in full, on Radix Select. Solid, glass, ink and hairline materials.",
  "dependencies": [
    "class-variance-authority",
    "radix-ui",
    "lucide-react"
  ],
  "registryDependencies": [
    "http://localhost:5173/r/liquid-theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/glass-select.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Check, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * The `Double Shared Room ⌄` / `Deposit — €500 ⌄` control from the booking\n * bar: a wide pill that states the current choice in full rather than\n * abbreviating it behind a label.\n *\n * Built on Radix Select, so the listbox is a real listbox — typeahead,\n * arrow-key navigation, `aria-activedescendant` and focus return all come\n * from the primitive. This file owns the light and the shape only.\n *\n * The trigger is deliberately not a fixed width. A select that says\n * \"Double Shared Room\" is doing the job of a label and a value at once, and\n * truncating it to a tidy column undoes that.\n */\nconst trigger = cva(\n  \"group/select inline-flex select-none items-center justify-between gap-3 rounded-full font-sans whitespace-nowrap lq-ease transition-[background-color,border-color,color,transform,box-shadow] duration-300 outline-none focus-visible:ring-3 focus-visible:ring-current/25 disabled:pointer-events-none disabled:opacity-40 data-[placeholder]:text-current/45\",\n  {\n    variants: {\n      material: {\n        /** Opaque white pill — the reference booking control. */\n        solid: \"lq-solid text-ink dark:text-white hover:brightness-[0.98]\",\n        /** Frosted — for placement directly over photography. */\n        glass: \"lq-glass text-white\",\n        /** Filled black. Pairs with a `solid` sibling as the committed choice. */\n        ink: \"bg-ink text-white shadow-[var(--lq-cast)] hover:bg-ink/90\",\n        /** Hairline only — the quietest reading, for dense panels. */\n        hairline:\n          \"border border-current/20 text-current hover:border-current/40 hover:bg-current/5\",\n      },\n      size: {\n        sm: \"h-9 px-4 text-[13px] [&_svg]:size-3.5\",\n        md: \"h-11 px-5 text-[14px] [&_svg]:size-4\",\n        lg: \"h-13 px-6 text-[15px] [&_svg]:size-[18px]\",\n      },\n    },\n    defaultVariants: { material: \"solid\", size: \"md\" },\n  },\n)\n\nconst panel = cva(\n  \"relative z-50 overflow-hidden lq-squircle [--lq-corner:20px] p-1.5 origin-(--radix-select-content-transform-origin) data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n  {\n    variants: {\n      material: {\n        solid: \"lq-solid text-ink dark:text-white\",\n        glass: \"lq-glass text-white\",\n        ink: \"bg-ink text-white shadow-[var(--lq-cast)]\",\n        hairline:\n          \"border border-current/15 bg-paper text-ink shadow-[var(--lq-cast)] dark:bg-ink dark:text-white\",\n      },\n    },\n    defaultVariants: { material: \"solid\" },\n  },\n)\n\nexport type GlassSelectOption = {\n  value: string\n  label: React.ReactNode\n  /** Quiet trailing text — a price, a count, a duration. */\n  hint?: React.ReactNode\n  disabled?: boolean\n}\n\nexport interface GlassSelectProps\n  extends Omit<React.ComponentProps<typeof SelectPrimitive.Root>, \"children\">,\n    VariantProps<typeof trigger> {\n  options: GlassSelectOption[]\n  placeholder?: string\n  /**\n   * Text shown ahead of the value inside the trigger, e.g. `Deposit` in\n   * `Deposit — €500`. Not a form label; use `aria-label` for that.\n   */\n  prefix?: React.ReactNode\n  /** Match the panel's material to the trigger's unless told otherwise. */\n  panelMaterial?: VariantProps<typeof panel>[\"material\"]\n  className?: string\n  contentClassName?: string\n  \"aria-label\"?: string\n}\n\nexport function GlassSelect({\n  options,\n  placeholder = \"Select\",\n  prefix,\n  material = \"solid\",\n  panelMaterial,\n  size = \"md\",\n  className,\n  contentClassName,\n  \"aria-label\": ariaLabel,\n  ...props\n}: GlassSelectProps) {\n  return (\n    <SelectPrimitive.Root {...props}>\n      <SelectPrimitive.Trigger\n        data-slot=\"glass-select\"\n        aria-label={ariaLabel}\n        className={cn(trigger({ material, size }), className)}\n      >\n        <span className=\"flex min-w-0 items-baseline gap-1.5\">\n          {prefix ? (\n            <span className=\"shrink-0 text-current/50\">{prefix}</span>\n          ) : null}\n          <SelectPrimitive.Value placeholder={placeholder} />\n        </span>\n        <SelectPrimitive.Icon asChild>\n          {/* Rotating the chevron rather than swapping it keeps the open and\n              closed states on one continuous motion. */}\n          <ChevronDown className=\"shrink-0 opacity-55 lq-ease transition-transform duration-300 group-data-open/select:rotate-180\" />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n\n      <SelectPrimitive.Portal>\n        <SelectPrimitive.Content\n          position=\"popper\"\n          sideOffset={8}\n          className={cn(\n            panel({ material: panelMaterial ?? material }),\n            \"min-w-(--radix-select-trigger-width)\",\n            contentClassName,\n          )}\n        >\n          <SelectPrimitive.Viewport className=\"max-h-(--radix-select-content-available-height)\">\n            {options.map((o) => (\n              <SelectPrimitive.Item\n                key={o.value}\n                value={o.value}\n                disabled={o.disabled}\n                className={cn(\n                  \"relative flex cursor-pointer select-none items-center gap-3 rounded-[14px] py-2.5 pr-3 pl-9 font-sans outline-none lq-ease transition-colors duration-200\",\n                  size === \"sm\" ? \"text-[13px]\" : \"text-[14px]\",\n                  \"data-highlighted:bg-current/10 data-[state=checked]:bg-current/8\",\n                  \"data-disabled:pointer-events-none data-disabled:opacity-40\",\n                )}\n              >\n                <SelectPrimitive.ItemIndicator className=\"absolute left-3 inline-flex\">\n                  <Check className=\"size-3.5\" />\n                </SelectPrimitive.ItemIndicator>\n                <SelectPrimitive.ItemText>{o.label}</SelectPrimitive.ItemText>\n                {o.hint ? (\n                  <span className=\"ml-auto shrink-0 text-[12px] text-current/45\">\n                    {o.hint}\n                  </span>\n                ) : null}\n              </SelectPrimitive.Item>\n            ))}\n          </SelectPrimitive.Viewport>\n        </SelectPrimitive.Content>\n      </SelectPrimitive.Portal>\n    </SelectPrimitive.Root>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}