{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "type": "registry:ui",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://usva.build/r/overlay-core.json"
  ],
  "files": [
    {
      "path": "select.tsx",
      "target": "components/ui/select.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport { Select as Base } from \"@base-ui/react/select\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { useScopedTheme } from \"./use-scoped-theme\";\n\nexport type SelectProps<Value = string> = Base.Root.Props<Value>;\n\nfunction SelectImpl<Value = string>(\n  props: SelectProps<Value>,\n  ref: React.Ref<HTMLInputElement>,\n) {\n  return <Base.Root inputRef={ref} {...props} />;\n}\n\nconst SelectRoot = React.forwardRef(SelectImpl) as (<Value = string>(\n  props: SelectProps<Value> & { ref?: React.Ref<HTMLInputElement> },\n) => React.ReactElement) & {\n  displayName?: string;\n};\nSelectRoot.displayName = \"Select\";\n\nexport const SelectTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<typeof Base.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <Base.Trigger\n    ref={ref}\n    className={cn(\n      \"group flex h-10 w-full items-center justify-between gap-2 rounded-lg border border-border bg-surface px-3 text-sm text-ink outline-none\",\n      \"transition-control duration-base ease-soft\",\n      \"hover:border-border-strong\",\n      \"focus-visible:border-transparent focus-visible:ring-focus\",\n      \"data-[popup-open]:border-transparent data-[popup-open]:ring-focus\",\n      \"aria-invalid:border-danger\",\n      \"disabled:cursor-not-allowed disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    <Base.Icon className=\"text-muted transition-control duration-base ease-soft group-data-[popup-open]:rotate-180\">\n      <ChevronIcon />\n    </Base.Icon>\n  </Base.Trigger>\n));\nSelectTrigger.displayName = \"SelectTrigger\";\n\nexport const SelectValue = Base.Value;\n\nexport const SelectContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof Base.Popup> & { sideOffset?: number }\n>(({ className, sideOffset = 6, children, ...props }, ref) => {\n  const [probe, theme] = useScopedTheme();\n\n  return (\n    <>\n      <span ref={probe} hidden />\n      <Base.Portal>\n        <Base.Positioner\n          data-theme={theme}\n          sideOffset={sideOffset}\n          className=\"z-dropdown\"\n        >\n          <Base.Popup\n            ref={ref}\n            className={cn(\n              \"rim-light max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-auto rounded-lg border border-border bg-surface-2 p-1 text-sm text-ink shadow-floating\",\n              \"origin-[var(--transform-origin)] transition-enter duration-base ease-spring motion-reduce:transition-none motion-reduce:transform-none\",\n              \"data-[starting-style]:translate-y-1 data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0 data-[starting-style]:blur-[2px]\",\n              \"data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-fast data-[ending-style]:ease-soft\",\n              className,\n            )}\n            {...props}\n          >\n            <Base.List>{children}</Base.List>\n          </Base.Popup>\n        </Base.Positioner>\n      </Base.Portal>\n    </>\n  );\n});\nSelectContent.displayName = \"SelectContent\";\n\nexport type SelectItemProps = React.ComponentPropsWithoutRef<typeof Base.Item>;\n\nexport const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(\n  ({ className, children, ...props }, ref) => (\n    <Base.Item\n      ref={ref}\n      className={cn(\n        \"relative flex cursor-default select-none items-center justify-between gap-2 rounded-md px-2.5 py-2 text-muted outline-none\",\n        \"ring-1 ring-inset ring-transparent\",\n        \"before:absolute before:inset-0 before:rounded-[inherit] before:bg-ink/0 before:transition-tint before:duration-fast before:content-[''] motion-reduce:before:transition-none\",\n        \"transition-control duration-fast ease-soft motion-reduce:transition-none\",\n        \"data-[highlighted]:text-ink data-[highlighted]:before:bg-ink/5\",\n        \"data-[selected]:bg-accent/[0.08] data-[selected]:text-ink data-[selected]:ring-accent/30\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <Base.ItemText className=\"relative\">{children}</Base.ItemText>\n      <Base.ItemIndicator className=\"relative text-accent\">\n        <CheckIcon />\n      </Base.ItemIndicator>\n    </Base.Item>\n  ),\n);\nSelectItem.displayName = \"SelectItem\";\n\nexport const Select = Object.assign(SelectRoot, {\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Content: SelectContent,\n  Item: SelectItem,\n});\n\nfunction ChevronIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"h-3.5 w-3.5\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M3 4.5 6 7.5 9 4.5\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"h-3.5 w-3.5\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M2.5 6.5 5 9l4.5-5.5\" />\n    </svg>\n  );\n}\n"
    }
  ]
}