{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-spectral-selector",
  "type": "registry:ui",
  "title": "Spectral Selector",
  "description": "Reusable controlled graphite choice with scoped material artwork.",
  "dependencies": [
    "@base-ui/react",
    "maruaudio@>=0.0.3 <0.1.0"
  ],
  "registryDependencies": [
    "https://pluginui.com/r/core-segmented-control.json",
    "https://pluginui.com/r/gallery-spectral-control-styles.json"
  ],
  "files": [
    {
      "path": "components/ui/spectral-selector.tsx",
      "content": "/**\n * Source: https://maru.audio/ui-kit/spectral-selector\n * Copyright © [Maru](https://maru.audio)\n *\n * Maru UI Kit — https://maru.audio/ui-kit\n *\n * Installed from the Maru UI registry. This file is yours now: edit it\n * freely, it will not be overwritten unless you re-run the add command.\n *\n * Keep this item’s companion files and CSS imports together. Dependencies\n * declared by the registry are installed with the source.\n */\nimport { SegmentedControl } from \"@/components/ui/segmented-control\"\nimport type { CSSProperties } from \"react\"\nimport \"@/components/ui/spectral-controls.css\"\nexport interface SpectralSelectorProps {\n  value: number\n  onChange: (value: number) => void\n  options: readonly string[]\n  label?: string\n  accent?: string\n  curved?: boolean\n  height?: number\n  disabled?: boolean\n}\n/** Native buttons own activation; arrow keys move through the ordered choices. */\nexport function SpectralSelector({\n  value,\n  onChange,\n  options,\n  label = \"Character\",\n  accent = \"#67c7c3\",\n  curved = false,\n  height,\n  disabled = false,\n}: SpectralSelectorProps) {\n  const index = Math.max(0, Math.min(options.length - 1, Math.round(value)))\n  return (\n    <SegmentedControl\n      unstyled\n      value={String(index)}\n      onValueChange={(next) => onChange(Number(next))}\n      onReselect={(next) => onChange(Number(next))}\n      options={options.map((option, i) => ({\n        value: String(i),\n        label: (\n          <>\n            <span>{option}</span>\n            {curved && <i />}\n          </>\n        ),\n      }))}\n      aria-label={label}\n      disabled={disabled}\n      orientation={curved ? \"vertical\" : \"horizontal\"}\n      className={`spectral-selector${curved ? \"spectral-selector--curved\" : \"\"}`}\n      style={\n        {\n          \"--spectral-accent\": accent,\n          height: curved ? height : undefined,\n        } as CSSProperties\n      }\n      decoration={\n        curved ? (\n          <svg viewBox=\"0 0 80 240\" aria-hidden=\"true\">\n            <path\n              d=\"M65 12 Q5 100 65 228\"\n              fill=\"none\"\n              stroke=\"#535659\"\n              strokeWidth=\"3\"\n            />\n          </svg>\n        ) : undefined\n      }\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "@ui/spectral-selector.tsx"
    }
  ]
}