{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-sculpted-fader",
  "type": "registry:ui",
  "title": "Sculpted Fader",
  "description": "An opaque raised capsule cap over inset rails, with vertical and horizontal layouts and optional meter decoration.",
  "dependencies": [
    "maruaudio@>=0.0.3 <0.1.0"
  ],
  "registryDependencies": [
    "https://pluginui.com/r/core-fader.json",
    "https://pluginui.com/r/gallery-sculpted-control-styles.json"
  ],
  "files": [
    {
      "path": "components/ui/sculpted-fader.tsx",
      "content": "/**\n * Source: https://maru.audio/ui-kit/sculpted-fader\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 \"@/components/ui/sculpted-controls.css\"\nimport {\n  Fader,\n  type FaderProps,\n  type FaderDesignState,\n} from \"@/components/ui/fader\"\n\nexport interface SculptedFaderProps extends FaderProps {\n  scale?: boolean\n  meter?: boolean\n}\n\n/** Pure artwork; the shared Fader owns track gestures and formatted values. */\nexport function SculptedFaderDesign({\n  value01,\n  length,\n  capInset,\n  orientation,\n  disabled,\n  scale = true,\n  meter = false,\n}: FaderDesignState & Pick<SculptedFaderProps, \"scale\" | \"meter\">) {\n  const vertical = orientation === \"vertical\"\n  return (\n    <div\n      className=\"sculpted-fader\"\n      data-orientation={orientation}\n      data-scale={scale || undefined}\n      data-meter={meter || undefined}\n      style={\n        vertical ? { height: length, width: 34 } : { width: length, height: 26 }\n      }\n      aria-disabled={disabled || undefined}\n    >\n      <>\n        <span className=\"sculpted-fader__scale\" aria-hidden=\"true\" />\n        <span className=\"sculpted-fader__rail\" aria-hidden=\"true\">\n          {meter && (\n            <i style={{ height: `${Math.min(100, value01 * 65 + 12)}%` }} />\n          )}\n        </span>\n        <span\n          className=\"sculpted-fader__cap\"\n          aria-hidden=\"true\"\n          style={\n            vertical\n              ? {\n                  top: `calc(${(1 - value01) * 100}% + ${(value01 * 2 - 1) * (capInset / 2)}px)`,\n                }\n              : {\n                  left: `calc(${value01 * 100}% + ${(1 - value01 * 2) * (capInset / 2)}px)`,\n                }\n          }\n        >\n          <i />\n        </span>\n      </>\n    </div>\n  )\n}\n\n/** Convenience visual preset with the ordinary Fader contract. */\nexport function SculptedFader({\n  label = \"Level\",\n  length = 140,\n  scale = true,\n  meter = false,\n  orientation = \"vertical\",\n  ...control\n}: SculptedFaderProps) {\n  return (\n    <Fader\n      {...control}\n      label={label}\n      hideLabel\n      hideValue\n      length={length}\n      orientation={orientation}\n      thickness={orientation === \"vertical\" ? 34 : 26}\n      capInset={12}\n      renderDesign={(state) => (\n        <SculptedFaderDesign {...state} scale={scale} meter={meter} />\n      )}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "@ui/sculpted-fader.tsx"
    }
  ]
}