{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-with-left-right-buttons",
  "type": "registry:component",
  "title": "Input with Left and Right Buttons",
  "description": "A component for inputting text with buttons on both sides",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "input",
    "button",
    "label"
  ],
  "files": [
    {
      "path": "registry/default/components/input/input-with-left-right-buttons.tsx",
      "content": "'use client'\r\n\r\nimport { Button } from '@/registry/default/ui/button'\r\nimport { Input } from '@/registry/default/ui/input'\r\nimport { Label } from '@/registry/default/ui/label'\r\nimport { MinusIcon, PlusIcon } from 'lucide-react'\r\nimport React, { useId } from 'react'\r\n\r\nexport default function InputWithLeftRightButtons() {\r\n    const id = useId()\r\n    const [count, setCount] = React.useState<number>(99)\r\n\r\n    return (\r\n        <div className=\"flex w-full max-w-4/5 flex-col gap-2\">\r\n            <Label htmlFor={id}>Input with left right button</Label>\r\n\r\n            <div className=\"flex items-center\">\r\n                <Button\r\n                    variant=\"outline\"\r\n                    size=\"icon\"\r\n                    className=\"dark:bg-input/30 cursor-pointer rounded-r-none border-r-0 bg-transparent\"\r\n                    onClick={() => setCount((prev) => Math.max(prev - 1, 0))}\r\n                >\r\n                    <MinusIcon />\r\n                </Button>\r\n                <Input\r\n                    id={id}\r\n                    placeholder=\"Counter\"\r\n                    className=\"flex rounded-none text-center\"\r\n                    value={count}\r\n                    onChange={(e) => {\r\n                        const value = parseInt(e.target.value)\r\n                        if (!isNaN(value)) {\r\n                            setCount(value)\r\n                        }\r\n                    }}\r\n                />\r\n                <Button\r\n                    variant=\"outline\"\r\n                    size=\"icon\"\r\n                    className=\"dark:bg-input/30 cursor-pointer rounded-l-none border-l-0 bg-transparent\"\r\n                    onClick={() => setCount((prev) => prev + 1)}\r\n                >\r\n                    <PlusIcon />\r\n                </Button>\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/input-with-left-right-buttons.tsx"
    }
  ]
}