{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-knob-gallery-contrast",
  "type": "registry:ui",
  "title": "Contrast Dial Kit",
  "description": "Two minimal monochrome SVG dials: a solid disc with a cut-in notch and an outlined circle with a matching inward pointer.",
  "dependencies": [
    "maruaudio@>=0.0.3 <0.1.0"
  ],
  "registryDependencies": [
    "https://pluginui.com/r/gallery-knob-gallery-core.json"
  ],
  "files": [
    {
      "path": "components/ui/knob-gallery-contrast.tsx",
      "content": "/**\n * Source: https://pluginui.com/controls\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 { useId } from \"react\"\nimport { knobAngle } from \"maruaudio/ui/shared/knob-gallery-types\"\nimport type {\n  GalleryKnobDesignProps,\n  KnobOption,\n} from \"maruaudio/ui/shared/knob-gallery-types\"\n\nfunction ContrastDisc({\n  value,\n  size,\n  accent,\n  outlined = false,\n}: GalleryKnobDesignProps & { outlined?: boolean }) {\n  const maskId = useId()\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      aria-hidden=\"true\"\n      style={{ display: \"block\" }}\n    >\n      <defs>\n        <mask id={maskId}>\n          <rect width=\"100\" height=\"100\" fill=\"white\" />\n          <path\n            d=\"M 50 3 V 28\"\n            transform={`rotate(${knobAngle(value)} 50 50)`}\n            stroke=\"black\"\n            strokeWidth=\"6\"\n          />\n        </mask>\n      </defs>\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"46\"\n        fill={outlined ? \"none\" : accent}\n        stroke={accent}\n        strokeWidth={outlined ? 6 : 0}\n        mask={outlined ? undefined : `url(#${maskId})`}\n      />\n      {outlined && (\n        <path\n          d=\"M 50 3 V 28\"\n          transform={`rotate(${knobAngle(value)} 50 50)`}\n          stroke={accent}\n          strokeWidth=\"6\"\n        />\n      )}\n    </svg>\n  )\n}\nfunction OutlineDesign(props: GalleryKnobDesignProps) {\n  return <ContrastDisc {...props} outlined />\n}\nexport const CONTRAST_FILLED_OPTION: KnobOption = {\n  id: \"contrast-filled\",\n  name: \"Contrast filled dial\",\n  family: \"Contrast\",\n  technique: \"Flat SVG · cut-in notch\",\n  description:\n    \"A solid monochrome disc with a transparent square notch that reveals any background. A CSS variable accent lets each section carry its own ink.\",\n  Design: ContrastDisc,\n}\nexport const CONTRAST_OUTLINE_OPTION: KnobOption = {\n  id: \"contrast-outline\",\n  name: \"Contrast outline dial\",\n  family: \"Contrast\",\n  technique: \"Flat SVG · continuous outline and pointer\",\n  description:\n    \"An open circle with a straight inward pointer, both in the same section accent. No bevels, shadows or extra value arcs.\",\n  Design: OutlineDesign,\n}\nexport const CONTRAST_OPTIONS = [\n  CONTRAST_FILLED_OPTION,\n  CONTRAST_OUTLINE_OPTION,\n]\n",
      "type": "registry:component",
      "target": "@ui/knob-gallery-contrast.tsx"
    }
  ]
}