{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "description": "A ruled dropdown for choosing from a short list.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://spotcheckui.com/r/spotcheck-base.json"
  ],
  "files": [
    {
      "path": "registry/spotcheck/components/spotcheck/select.tsx",
      "content": "\"use client\"\n\nimport { Select as BaseSelect } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type SelectOption = { value: string; label: string }\n\ntype SelectProps = {\n  /** Names the control for screen readers, unless it sits inside a Field. */\n  label?: string\n  options: SelectOption[]\n  /** The selected value, when you control it. */\n  value?: string\n  /** The starting value, when it manages itself. */\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  placeholder?: string\n  className?: string\n}\n\nexport function Select({\n  label,\n  options,\n  value,\n  defaultValue,\n  onValueChange,\n  placeholder = \"Choose\",\n  className,\n}: SelectProps) {\n  return (\n    <BaseSelect.Root\n      items={options}\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={(next) => next !== null && onValueChange?.(next as string)}\n    >\n      <BaseSelect.Trigger\n        aria-label={label}\n        className={cn(\n          \"spotcheck-focus border-ink flex min-w-40 cursor-pointer items-center justify-between gap-3 border-(length:--rule) bg-transparent px-3 py-2 text-left font-(family-name:--f-body) text-sm\",\n          className,\n        )}\n      >\n        <BaseSelect.Value placeholder={placeholder} />\n        <BaseSelect.Icon aria-hidden className=\"font-(family-name:--f-mono) text-xs\">\n          ↓\n        </BaseSelect.Icon>\n      </BaseSelect.Trigger>\n      <BaseSelect.Portal>\n        <BaseSelect.Positioner alignItemWithTrigger={false} sideOffset={4} className=\"z-50\">\n          <BaseSelect.Popup className=\"border-ink bg-paper text-ink min-w-(--anchor-width) border-(length:--rule) font-(family-name:--f-body) shadow-[6px_6px_0_var(--ink)] outline-none\">\n            <BaseSelect.List className=\"max-h-[min(280px,var(--available-height))] overflow-auto py-1\">\n              {options.map((option) => (\n                <BaseSelect.Item\n                  key={option.value}\n                  value={option.value}\n                  label={option.label}\n                  className=\"data-highlighted:bg-ink data-highlighted:text-paper flex cursor-pointer items-center justify-between gap-3 px-3 py-1.5 text-sm outline-none\"\n                >\n                  <BaseSelect.ItemText>{option.label}</BaseSelect.ItemText>\n                  <BaseSelect.ItemIndicator aria-hidden>✓</BaseSelect.ItemIndicator>\n                </BaseSelect.Item>\n              ))}\n            </BaseSelect.List>\n          </BaseSelect.Popup>\n        </BaseSelect.Positioner>\n      </BaseSelect.Portal>\n    </BaseSelect.Root>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "core"
  ],
  "type": "registry:component"
}