{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "halo-select-demo",
  "type": "registry:component",
  "registryDependencies": [
    "halo-select",
    "button"
  ],
  "files": [
    {
      "path": "registry/default/example/halo-select-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  HaloSelect,\n  HaloSelectContent,\n  HaloSelectItem,\n  HaloSelectTrailingIndicator,\n  HaloSelectTrigger,\n  HaloSelectValue,\n  type PolishedSelectItem,\n} from \"@/registry/default/ui/halo-select\"\n\nconst MOCK_ITEMS: PolishedSelectItem[] = [\n  { value: \"prod\", label: \"Production\" },\n  { value: \"staging\", label: \"Staging\" },\n  { value: \"dev\", label: \"Development\" },\n  { value: \"preview\", label: \"Preview\", disabled: true },\n  { value: \"edge\", label: \"Edge\" },\n]\n\nconst NO_ITEMS: PolishedSelectItem[] = []\n\n/** How long the demo keeps `isLoading` true. */\nconst MOCK_LOADING_MS = 2000\n\nfunction itemEqual(a: unknown, b: unknown) {\n  return (\n    (a as PolishedSelectItem | null | undefined)?.value ===\n    (b as PolishedSelectItem | null | undefined)?.value\n  )\n}\n\nexport default function HaloSelectDemo() {\n  const [value, setValue] = useState<PolishedSelectItem | null>(null)\n  const [isLoading, setIsLoading] = useState(false)\n\n  return (\n    <main className=\"flex w-full flex-col items-center justify-center\">\n      <div className=\"w-full max-w-2xl space-y-10\">\n        <section aria-labelledby=\"demo-heading\" className=\"space-y-3\">\n          <h2\n            className=\"font-medium text-foreground text-sm tracking-tight\"\n            id=\"demo-heading\"\n          >\n            Select\n          </h2>\n          <p className=\"text-muted-foreground text-sm\">\n            Opens a frosted listbox from a trigger: pick one option, show a\n            loading state on the trigger, and flash the selection when it\n            changes.\n          </p>\n          <HaloSelect\n            isItemEqualToValue={itemEqual}\n            isLoading={isLoading}\n            items={MOCK_ITEMS}\n            onValueChange={(next) =>\n              setValue(next as PolishedSelectItem | null)\n            }\n            placeholder=\"Choose environment\"\n            showSelectionFlash\n            translucent\n            value={value}\n          >\n            <HaloSelectTrigger id=\"demo-halo-select\">\n              <HaloSelectValue />\n              <HaloSelectTrailingIndicator />\n            </HaloSelectTrigger>\n            <HaloSelectContent>\n              {MOCK_ITEMS.map((item, listIndex) => (\n                <HaloSelectItem\n                  disabled={item.disabled}\n                  index={listIndex}\n                  key={item.value}\n                  label={item.label}\n                  value={item}\n                >\n                  {item.label}\n                </HaloSelectItem>\n              ))}\n            </HaloSelectContent>\n          </HaloSelect>\n        </section>\n\n        <section aria-labelledby=\"empty-heading\" className=\"space-y-3\">\n          <h2\n            className=\"font-medium text-foreground text-sm tracking-tight\"\n            id=\"empty-heading\"\n          >\n            Empty list\n          </h2>\n          <p className=\"text-muted-foreground text-sm\">\n            When the list is empty, show placeholder copy in the dropdown panel\n            instead of options.\n          </p>\n          <HaloSelect\n            isItemEqualToValue={itemEqual}\n            items={NO_ITEMS}\n            placeholder=\"No data\"\n            value={null}\n          >\n            <HaloSelectTrigger id=\"demo-empty-select\">\n              <HaloSelectValue />\n              <HaloSelectTrailingIndicator />\n            </HaloSelectTrigger>\n            <HaloSelectContent>\n              <p className=\"px-3 py-6 text-center text-muted-foreground text-sm\">\n                No options.\n              </p>\n            </HaloSelectContent>\n          </HaloSelect>\n        </section>\n\n        <div className=\"flex flex-wrap gap-3 border-border border-t pt-8\">\n          <Button\n            disabled={isLoading}\n            onClick={() => {\n              setIsLoading(true)\n              window.setTimeout(() => setIsLoading(false), MOCK_LOADING_MS)\n            }}\n            type=\"button\"\n            variant=\"secondary\"\n          >\n            Simulate load\n          </Button>\n          <Button\n            onClick={() => setValue(null)}\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Clear selection\n          </Button>\n        </div>\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}