{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-104",
  "type": "registry:component",
  "registryDependencies": [
    "https://coss.com/origin/r/button.json"
  ],
  "files": [
    {
      "path": "registry/default/components/comp-104.tsx",
      "content": "\"use client\";\n\nimport {\n  MinusIcon,\n  PlusIcon,\n  Volume1Icon,\n  Volume2Icon,\n  VolumeIcon,\n  VolumeXIcon,\n} from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [volume, setVolume] = useState(3); // Initialize volume state (0-9)\n\n  const decreaseVolume = () => setVolume((prev) => Math.max(0, prev - 1));\n  const increaseVolume = () => setVolume((prev) => Math.min(6, prev + 1));\n\n  // Optimized volume icon selection\n  const Icon =\n    volume === 0\n      ? VolumeXIcon\n      : volume < 3\n        ? VolumeIcon\n        : volume < 5\n          ? Volume1Icon\n          : Volume2Icon;\n\n  return (\n    <div\n      aria-labelledby=\"volume-control\"\n      className=\"inline-flex items-center\"\n      role=\"group\"\n    >\n      <span className=\"sr-only\" id=\"volume-control\">\n        Volume Control\n      </span>\n      <Button\n        aria-label=\"Decrease volume\"\n        className=\"rounded-full\"\n        disabled={volume === 0}\n        onClick={decreaseVolume}\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <MinusIcon aria-hidden=\"true\" size={16} />\n      </Button>\n      <div\n        aria-live=\"polite\"\n        className=\"flex items-center px-3 font-medium text-sm tabular-nums\"\n      >\n        <Icon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n        <span aria-label={`Current volume is ${volume}`} className=\"ms-2\">\n          {volume}\n        </span>\n      </div>\n      <Button\n        aria-label=\"Increase volume\"\n        className=\"rounded-full\"\n        disabled={volume === 6}\n        onClick={increaseVolume}\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <PlusIcon aria-hidden=\"true\" size={16} />\n      </Button>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "style": 2,
    "tags": [
      "button",
      "volume",
      "controls"
    ]
  }
}