{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "betting-panel-04",
  "title": "Betting Panel 04",
  "description": "A stepper-based betting panel with circular +/− controls for bet amount and rows.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "tabs",
    "toggle-group"
  ],
  "files": [
    {
      "path": "registry/default/blocks/betting-panel-04/components/betting-panel.tsx",
      "content": "\"use client\";\n\nimport { Minus, Plus } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\n\nconst BALANCE = 1000;\nconst MIN_BET = 0.01;\nconst MIN_ROWS = 8;\nconst MAX_ROWS = 16;\n\nexport function BettingPanel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const [betAmount, setBetAmount] = useState(1);\n  const [risk, setRisk] = useState<string[]>([\"medium\"]);\n  const [rows, setRows] = useState(12);\n\n  const incrementBet = () =>\n    setBetAmount((prev) => Math.min(prev + 1, BALANCE));\n  const decrementBet = () =>\n    setBetAmount((prev) => Math.max(prev - 1, MIN_BET));\n  const incrementRows = () => setRows((prev) => Math.min(prev + 1, MAX_ROWS));\n  const decrementRows = () => setRows((prev) => Math.max(prev - 1, MIN_ROWS));\n\n  return (\n    <div className={className} {...props}>\n      <Card>\n        <CardContent>\n          <Tabs defaultValue=\"manual\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger className=\"flex-1\" value=\"manual\">\n                Manual\n              </TabsTrigger>\n              <TabsTrigger className=\"flex-1\" value=\"auto\">\n                Auto\n              </TabsTrigger>\n            </TabsList>\n          </Tabs>\n\n          <div className=\"mt-5 flex flex-col gap-4\">\n            <div className=\"rounded-md bg-muted/30 py-3 text-center\">\n              <span className=\"block text-muted-foreground text-xs uppercase tracking-wider\">\n                Balance\n              </span>\n              <span className=\"font-bold text-2xl\">${BALANCE.toFixed(2)}</span>\n            </div>\n\n            <div className=\"flex flex-col gap-2\">\n              <span className=\"block text-center text-muted-foreground text-xs uppercase tracking-wide\">\n                Bet Amount\n              </span>\n              <div className=\"flex items-center justify-center gap-4\">\n                <Button\n                  aria-label=\"Decrease bet amount\"\n                  className=\"size-12 rounded-full\"\n                  onClick={decrementBet}\n                  size=\"icon\"\n                  variant=\"secondary\"\n                >\n                  <Minus />\n                </Button>\n                <span className=\"w-32 text-center font-bold text-3xl tabular-nums\">\n                  ${betAmount.toFixed(2)}\n                </span>\n                <Button\n                  aria-label=\"Increase bet amount\"\n                  className=\"size-12 rounded-full\"\n                  onClick={incrementBet}\n                  size=\"icon\"\n                  variant=\"secondary\"\n                >\n                  <Plus />\n                </Button>\n              </div>\n            </div>\n\n            <div className=\"flex flex-col gap-2\">\n              <span className=\"block text-center text-muted-foreground text-xs uppercase tracking-wide\">\n                Risk\n              </span>\n              <ToggleGroup\n                className=\"justify-center\"\n                onValueChange={setRisk}\n                spacing={2}\n                value={risk}\n                variant=\"secondary\"\n              >\n                <ToggleGroupItem\n                  className=\"rounded-full px-8 aria-pressed:bg-emerald-500 aria-pressed:text-white dark:aria-pressed:bg-emerald-600\"\n                  value=\"low\"\n                >\n                  Low\n                </ToggleGroupItem>\n                <ToggleGroupItem\n                  className=\"rounded-full px-8 aria-pressed:bg-amber-500 aria-pressed:text-white dark:aria-pressed:bg-amber-600\"\n                  value=\"medium\"\n                >\n                  Medium\n                </ToggleGroupItem>\n                <ToggleGroupItem\n                  className=\"rounded-full px-8 aria-pressed:bg-red-500 aria-pressed:text-white dark:aria-pressed:bg-red-600\"\n                  value=\"high\"\n                >\n                  High\n                </ToggleGroupItem>\n              </ToggleGroup>\n            </div>\n\n            <div className=\"flex flex-col gap-2\">\n              <span className=\"block text-center text-muted-foreground text-xs uppercase tracking-wide\">\n                Rows\n              </span>\n              <div className=\"flex items-center justify-center gap-4\">\n                <Button\n                  aria-label=\"Decrease rows\"\n                  className=\"size-10 rounded-full\"\n                  onClick={decrementRows}\n                  size=\"icon\"\n                  variant=\"secondary\"\n                >\n                  <Minus />\n                </Button>\n                <span className=\"w-16 text-center font-bold text-2xl tabular-nums\">\n                  {rows}\n                </span>\n                <Button\n                  aria-label=\"Increase rows\"\n                  className=\"size-10 rounded-full\"\n                  onClick={incrementRows}\n                  size=\"icon\"\n                  variant=\"secondary\"\n                >\n                  <Plus />\n                </Button>\n              </div>\n            </div>\n\n            <Button className=\"mt-2\" fullWidth>\n              Place Bet\n            </Button>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n\nexport default function BettingPanel04() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <BettingPanel />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "betting"
  ],
  "type": "registry:block"
}