{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-fluted-knob",
  "type": "registry:ui",
  "title": "Fluted dial",
  "description": "Cobalt or graphite ribbed rim, silver inset and stationary lighting on the shared Knob.",
  "dependencies": [
    "maruaudio@>=0.0.3 <0.1.0"
  ],
  "registryDependencies": [
    "https://pluginui.com/r/core-knob.json"
  ],
  "files": [
    {
      "path": "components/ui/fluted-knob.tsx",
      "content": "/**\n * Source: https://maru.audio/ui-kit/fluted-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 {\n  Knob,\n  type KnobProps,\n  type KnobDesignState,\n} from \"@/components/ui/knob\"\nimport \"@/components/ui/fluted-knob.css\"\n\n/** Stationary machined lighting with a rotating pointer; no interaction logic. */\nexport function FlutedKnobDesign({\n  value01,\n  size,\n  disabled,\n  dark = false,\n}: KnobDesignState & { dark?: boolean }) {\n  return (\n    <div\n      className=\"fluted-knob\"\n      data-dark={dark || undefined}\n      data-disabled={disabled || undefined}\n      style={{ width: size, height: size } as CSSProperties}\n    >\n      <svg\n        viewBox=\"0 0 100 100\"\n        aria-hidden=\"true\"\n        className=\"fluted-knob__scale\"\n      >\n        {Array.from({ length: 13 }, (_, i) => {\n          const a = ((-225 + i * 22.5) * Math.PI) / 180\n          return (\n            <circle\n              key={i}\n              cx={50 + 46 * Math.cos(a)}\n              cy={50 + 46 * Math.sin(a)}\n              r={i % 3 === 0 ? 1.35 : 0.9}\n              fill=\"currentColor\"\n            />\n          )\n        })}\n      </svg>\n      <span className=\"fluted-knob__rim\" aria-hidden=\"true\" />\n      <span className=\"fluted-knob__cap\" aria-hidden=\"true\" />\n      <span\n        className=\"fluted-knob__pointer\"\n        aria-hidden=\"true\"\n        style={{ transform: `rotate(${-135 + 270 * value01}deg)` }}\n      >\n        <i />\n      </span>\n    </div>\n  )\n}\n\nexport function FlutedKnob({\n  dark = false,\n  ...props\n}: KnobProps & { dark?: boolean }) {\n  return (\n    <Knob\n      {...props}\n      renderDesign={(state) => <FlutedKnobDesign {...state} dark={dark} />}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "@ui/fluted-knob.tsx"
    },
    {
      "path": "components/ui/fluted-knob.css",
      "content": "/**\n * Source: https://maru.audio/ui-kit/fluted-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 */\n.fluted-knob {\n  position: relative;\n  color: var(--fluted-ink, #507fa0);\n}\n.fluted-knob span {\n  position: absolute;\n  display: block;\n  pointer-events: none;\n  border-radius: 50%;\n}\n.fluted-knob__scale {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.fluted-knob__rim {\n  inset: 12%;\n  background:\n    repeating-conic-gradient(\n      from 2deg,\n      #ffffff25 0deg 2deg,\n      #00000026 3deg 4deg,\n      transparent 5deg 9deg\n    ),\n    radial-gradient(circle at 35% 24%, #4cafe1, #267eb8 65%, #1a5e8f);\n  box-shadow:\n    inset 0 1px 2px #e6f5ff99,\n    inset 0 -2px 2px #193a5c66,\n    0 2px 3px #0003;\n}\n.fluted-knob__cap {\n  inset: 30%;\n  background: radial-gradient(\n    circle at 33% 22%,\n    #fafaf3,\n    #e2e5df 35%,\n    #b4bdc1 72%,\n    #7e939e\n  );\n  box-shadow:\n    0 1px 3px #14384a88,\n    inset 0 1px 2px #fff;\n}\n.fluted-knob__pointer {\n  inset: 12%;\n}\n.fluted-knob__pointer i {\n  position: absolute;\n  width: 3%;\n  height: 45%;\n  left: 48.5%;\n  top: 2%;\n  border-radius: 1px;\n  background: #183f58;\n  box-shadow: 1px 0 1px #e6f3f966;\n}\n.fluted-knob[data-dark] .fluted-knob__rim {\n  background:\n    repeating-conic-gradient(\n      #ffffff12 0deg 2deg,\n      #0005 3deg 5deg,\n      transparent 6deg 10deg\n    ),\n    radial-gradient(circle at 33% 22%, #414548, #111416 80%);\n}\n.fluted-knob[data-dark] .fluted-knob__pointer i {\n  background: #eff3ed;\n}\n.fluted-knob[data-disabled] {\n  opacity: 0.45;\n}\n",
      "type": "registry:file",
      "target": "@ui/fluted-knob.css"
    }
  ]
}