{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-lavender-knob",
  "type": "registry:ui",
  "title": "Porcelain scale dial",
  "description": "Reusable pale lavender material with controlled state.",
  "dependencies": [
    "maruaudio@>=0.0.3 <0.1.0"
  ],
  "registryDependencies": [
    "https://pluginui.com/r/core-knob.json",
    "https://pluginui.com/r/gallery-lavender-control-styles.json"
  ],
  "files": [
    {
      "path": "components/ui/lavender-knob.tsx",
      "content": "/**\n * Source: https://maru.audio/ui-kit/lavender-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/lavender-controls.css\"\nimport {\n  Knob,\n  type KnobProps,\n  type KnobDesignState,\n} from \"@/components/ui/knob\"\n\nexport interface LavenderKnobProps extends KnobProps {\n  scale?: \"ticks\" | \"dots\" | \"arc\"\n  readout?: string\n}\n\n/** Pure artwork. The shared Knob owns values, gestures, formatting and reset. */\nexport function LavenderKnobDesign({\n  value01,\n  size,\n  disabled,\n  scale = \"ticks\",\n}: KnobDesignState & Pick<LavenderKnobProps, \"scale\">) {\n  return (\n    <div\n      className=\"lavender-knob\"\n      style={{ width: size, height: size } as CSSProperties}\n      aria-disabled={disabled || undefined}\n    >\n      <svg\n        className=\"lavender-knob__scale\"\n        viewBox=\"0 0 120 120\"\n        aria-hidden=\"true\"\n      >\n        {scale === \"arc\" ? (\n          <>\n            <circle\n              cx=\"60\"\n              cy=\"60\"\n              r=\"55\"\n              fill=\"none\"\n              stroke=\"#e2def0\"\n              strokeWidth=\"1.5\"\n            />\n            <path\n              d=\"M 25 102 A 55 55 0 0 1 8 42\"\n              fill=\"none\"\n              stroke=\"#b6a5d2\"\n              strokeWidth=\"1.2\"\n            />\n          </>\n        ) : (\n          Array.from({ length: 29 }, (_, i) => {\n            const a = ((-225 + (i * 270) / 28) * Math.PI) / 180\n            return scale === \"dots\" ? (\n              <circle\n                key={i}\n                cx={60 + Math.cos(a) * 55}\n                cy={60 + Math.sin(a) * 55}\n                r=\"1.8\"\n                fill=\"#d1c5eb\"\n              />\n            ) : (\n              <line\n                key={i}\n                x1={60 + Math.cos(a) * 54}\n                y1={60 + Math.sin(a) * 54}\n                x2={60 + Math.cos(a) * 58}\n                y2={60 + Math.sin(a) * 58}\n                stroke=\"#d9d2e7\"\n                strokeWidth=\"1\"\n              />\n            )\n          })\n        )}\n      </svg>\n      <span className=\"lavender-knob__cap\" aria-hidden=\"true\" />\n      <span\n        className=\"lavender-knob__rotor\"\n        aria-hidden=\"true\"\n        style={{ transform: `rotate(${-135 + value01 * 270}deg)` }}\n      >\n        <i className={scale === \"arc\" ? \"is-line\" : \"\"} />\n      </span>\n    </div>\n  )\n}\n\n/** Convenience visual preset with the ordinary Knob contract. */\nexport function LavenderKnob({\n  label = \"Value\",\n  size = 100,\n  scale = \"ticks\",\n  readout,\n  ...control\n}: LavenderKnobProps) {\n  return (\n    <Knob\n      {...control}\n      size={size}\n      label={label}\n      hideLabel\n      hideValue\n      display={readout ?? control.display}\n      renderDesign={(state) => <LavenderKnobDesign {...state} scale={scale} />}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "@ui/lavender-knob.tsx"
    }
  ]
}