{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-disc-knob",
  "type": "registry:ui",
  "title": "Porcelain drive dial",
  "description": "Portable controlled disc console artwork.",
  "dependencies": [
    "maruaudio@>=0.0.3 <0.1.0"
  ],
  "registryDependencies": [
    "https://pluginui.com/r/gallery-disc-control-styles.json",
    "https://pluginui.com/r/core-knob.json"
  ],
  "files": [
    {
      "path": "components/ui/disc-knob.tsx",
      "content": "/**\n * Source: https://maru.audio/ui-kit/disc-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/disc-controls.css\"\nimport {\n  Knob,\n  type KnobProps,\n  type KnobDesignState,\n} from \"@/components/ui/knob\"\n\nexport interface DiscKnobProps extends KnobProps {}\n\n/** Pure artwork. The shared Knob owns values, gestures, formatting and reset. */\nexport function DiscKnobDesign({ value01, size, disabled }: KnobDesignState) {\n  return (\n    <div\n      className=\"disc-knob\"\n      style={{ width: size, height: size } as CSSProperties}\n      aria-disabled={disabled || undefined}\n    >\n      <svg viewBox=\"0 0 160 160\" aria-hidden=\"true\">\n        <circle\n          cx=\"80\"\n          cy=\"80\"\n          r=\"73\"\n          fill=\"none\"\n          stroke=\"#99adb5\"\n          strokeWidth=\"2\"\n        />\n        {Array.from({ length: 25 }, (_, i) => {\n          const a = ((-225 + i * 11.25) * Math.PI) / 180\n          return (\n            <line\n              key={i}\n              x1={80 + Math.cos(a) * 76}\n              y1={80 + Math.sin(a) * 76}\n              x2={80 + Math.cos(a) * 79}\n              y2={80 + Math.sin(a) * 79}\n              stroke=\"#94a8b0\"\n              strokeWidth=\"1\"\n            />\n          )\n        })}\n        <circle\n          cx=\"80\"\n          cy=\"80\"\n          r=\"66\"\n          fill=\"none\"\n          stroke=\"#354a55\"\n          strokeWidth=\"2.6\"\n          strokeDasharray={`${value01 * 311} 999`}\n          transform=\"rotate(135 80 80)\"\n        />\n      </svg>\n      <span className=\"disc-knob__cap\" />\n      <span\n        className=\"disc-knob__index\"\n        style={{ transform: `rotate(${-180 + value01 * 360}deg)` }}\n      >\n        <i />\n      </span>\n      <span className=\"disc-knob__ticks\" />\n    </div>\n  )\n}\n\n/** Convenience visual preset with the ordinary Knob contract. */\nexport function DiscKnob({\n  label = \"Drive\",\n  size = 132,\n  ...control\n}: DiscKnobProps) {\n  return (\n    <Knob\n      {...control}\n      size={size}\n      label={label}\n      hideLabel\n      hideValue\n      renderDesign={(state) => <DiscKnobDesign {...state} />}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "@ui/disc-knob.tsx"
    }
  ]
}