{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "betting-panel-01",
  "title": "Betting Panel 01",
  "description": "A betting panel with inline ½ / 2× multipliers inside the bet amount field and risk-level toggles.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "field",
    "input-group",
    "select",
    "tabs",
    "toggle-group"
  ],
  "files": [
    {
      "path": "registry/default/blocks/betting-panel-01/components/betting-panel.tsx",
      "content": "\"use client\";\n\nimport { DollarSign } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Field, FieldGroup, FieldLabel } from \"@/components/ui/field\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\n\nconst ROW_OPTIONS = [8, 9, 10, 11, 12, 13, 14, 15, 16];\n\nexport function BettingPanel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const [betAmount, setBetAmount] = useState(\"0.01\");\n  const [risk, setRisk] = useState<string[]>([\"medium\"]);\n  const [rows, setRows] = useState(\"12\");\n\n  const handleHalf = () => {\n    const current = Number.parseFloat(betAmount) || 0;\n    setBetAmount((current / 2).toFixed(2));\n  };\n\n  const handleDouble = () => {\n    const current = Number.parseFloat(betAmount) || 0;\n    setBetAmount((current * 2).toFixed(2));\n  };\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          <FieldGroup className=\"mt-5\">\n            <Field>\n              <FieldLabel>Balance</FieldLabel>\n              <div className=\"flex items-center justify-between rounded-md bg-muted/50 px-4 py-3\">\n                <span className=\"font-semibold text-base\">$1,000.00</span>\n                <span className=\"text-muted-foreground text-xs\">USD</span>\n              </div>\n            </Field>\n\n            <Field>\n              <FieldLabel htmlFor=\"bet-amount\">Bet Amount</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon align=\"inline-start\">\n                  <DollarSign />\n                </InputGroupAddon>\n                <InputGroupInput\n                  id=\"bet-amount\"\n                  inputMode=\"decimal\"\n                  onChange={(e) => setBetAmount(e.target.value)}\n                  type=\"text\"\n                  value={betAmount}\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <InputGroupButton onClick={handleHalf} variant=\"secondary\">\n                    ½\n                  </InputGroupButton>\n                  <InputGroupButton onClick={handleDouble} variant=\"secondary\">\n                    2×\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n\n            <Field>\n              <FieldLabel>Risk Level</FieldLabel>\n              <ToggleGroup\n                className=\"w-full\"\n                onValueChange={setRisk}\n                size=\"lg\"\n                spacing={2}\n                value={risk}\n                variant=\"secondary\"\n              >\n                <ToggleGroupItem\n                  className=\"flex-1 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=\"flex-1 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=\"flex-1 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            </Field>\n\n            <Field>\n              <FieldLabel htmlFor=\"rows\">Rows</FieldLabel>\n              <Select\n                onValueChange={(v) => v !== null && setRows(v)}\n                value={rows}\n              >\n                <SelectTrigger className=\"w-full\" id=\"rows\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  {ROW_OPTIONS.map((num) => (\n                    <SelectItem key={num} value={num.toString()}>\n                      {num} rows\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </Field>\n\n            <Button className=\"mt-2\" fullWidth>\n              Place Bet\n            </Button>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n\nexport default function BettingPanel01() {\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"
}