{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-sculpted-knob",
  "type": "registry:ui",
  "title": "Sculpted Knob",
  "description": "A porcelain dial with stationary directional shadows, inset rotating marker, dot scale and optional raised pedestal.",
  "dependencies": [
    "maruaudio@>=0.0.3 <0.1.0"
  ],
  "registryDependencies": [
    "https://pluginui.com/r/core-knob.json",
    "https://pluginui.com/r/gallery-sculpted-control-styles.json"
  ],
  "files": [
    {
      "path": "components/ui/sculpted-knob.tsx",
      "content": "/**\n * Source: https://maru.audio/ui-kit/sculpted-knob\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 { CSSProperties } from \"react\"\nimport \"@/components/ui/sculpted-controls.css\"\nimport {\n  Knob,\n  type KnobProps,\n  type KnobDesignState,\n} from \"@/components/ui/knob\"\n\nexport interface SculptedKnobProps extends KnobProps {\n  scale?: boolean\n  pedestal?: boolean\n}\n\n/** Pure artwork. The shared Knob owns values, gestures, formatting and reset. */\nexport function SculptedKnobDesign({\n  value01,\n  size,\n  disabled,\n  scale = true,\n  pedestal = false,\n}: KnobDesignState & Pick<SculptedKnobProps, \"scale\" | \"pedestal\">) {\n  return (\n    <div\n      className=\"sculpted-knob\"\n      data-pedestal={pedestal || undefined}\n      style={\n        {\n          width: size,\n          height: size,\n          \"--sculpted-size\": `${size}px`,\n        } as CSSProperties\n      }\n      aria-disabled={disabled || undefined}\n    >\n      {scale && (\n        <svg\n          className=\"sculpted-knob__scale\"\n          viewBox=\"0 0 100 100\"\n          aria-hidden=\"true\"\n        >\n          {Array.from({ length: 37 }, (_, index) => {\n            const angle = (((index / 36) * 270 - 225) * Math.PI) / 180\n            return (\n              <circle\n                key={index}\n                cx={50 + Math.cos(angle) * 48}\n                cy={50 + Math.sin(angle) * 48}\n                r=\"0.65\"\n                fill={index < 13 ? \"#777b7e\" : \"#bdc0c3\"}\n              />\n            )\n          })}\n        </svg>\n      )}\n      <span className=\"sculpted-knob__base\" aria-hidden=\"true\" />\n      <span className=\"sculpted-knob__cap\" aria-hidden=\"true\">\n        <i style={{ transform: `rotate(${-135 + value01 * 270}deg)` }}>\n          <b />\n        </i>\n      </span>\n    </div>\n  )\n}\n\n/** Convenience visual preset with the ordinary Knob contract. */\nexport function SculptedKnob({\n  label = \"Level\",\n  size = 64,\n  scale = true,\n  pedestal = false,\n  ...control\n}: SculptedKnobProps) {\n  return (\n    <Knob\n      {...control}\n      size={size}\n      label={label}\n      hideLabel\n      hideValue\n      renderDesign={(state) => (\n        <SculptedKnobDesign {...state} scale={scale} pedestal={pedestal} />\n      )}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "@ui/sculpted-knob.tsx"
    }
  ]
}