{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-sculpted-selector",
  "type": "registry:ui",
  "title": "Sculpted Selector",
  "description": "A dark luminous character display with custom icon slots, paging buttons and direct choice dots.",
  "dependencies": [],
  "registryDependencies": [
    "https://pluginui.com/r/gallery-sculpted-control-styles.json"
  ],
  "files": [
    {
      "path": "components/ui/sculpted-selector.tsx",
      "content": "/**\n * Source: https://maru.audio/ui-kit/sculpted-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 type { ReactNode } from \"react\"\nimport \"@/components/ui/sculpted-controls.css\"\n\nexport interface SculptedSelectorOption {\n  label: string\n  icon: ReactNode\n}\nexport interface SculptedSelectorProps {\n  options: readonly SculptedSelectorOption[]\n  value: number\n  onChange: (value: number) => void\n  label?: string\n  disabled?: boolean\n}\n/** Native buttons make the display's paging and direct choices keyboard accessible. */\nexport function SculptedSelector({\n  options,\n  value,\n  onChange,\n  label = \"Mode\",\n  disabled = false,\n}: SculptedSelectorProps) {\n  if (!options.length) return null\n  const requestedIndex = Number.isFinite(value) ? Math.round(value) : 0\n  const index =\n    ((requestedIndex % options.length) + options.length) % options.length\n  const current = options[index]\n  return (\n    <div className=\"sculpted-selector\" role=\"group\" aria-label={label}>\n      <div className=\"sculpted-selector__glow\" aria-hidden=\"true\" />\n      <button\n        className=\"sculpted-selector__previous\"\n        type=\"button\"\n        aria-label={`Previous ${label}`}\n        disabled={disabled}\n        onClick={() => onChange((index - 1 + options.length) % options.length)}\n      >\n        ‹\n      </button>\n      <span className=\"sculpted-selector__icon\" aria-hidden=\"true\">\n        {current?.icon}\n      </span>\n      <button\n        className=\"sculpted-selector__next\"\n        type=\"button\"\n        aria-label={`Next ${label}`}\n        disabled={disabled}\n        onClick={() => onChange((index + 1) % options.length)}\n      >\n        ›\n      </button>\n      <output>{current?.label}</output>\n      <div className=\"sculpted-selector__dots\">\n        {options.map((option, optionIndex) => (\n          <button\n            type=\"button\"\n            key={option.label}\n            aria-label={`${label}: ${option.label}`}\n            aria-pressed={optionIndex === index}\n            disabled={disabled}\n            onClick={() => onChange(optionIndex)}\n          >\n            <i />\n          </button>\n        ))}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "@ui/sculpted-selector.tsx"
    }
  ]
}