{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chips",
  "title": "Chips",
  "description": "Poker chips colored by size in big blinds, a chip stack with its amount, and the pot.",
  "files": [
    {
      "path": "src/components/trainer/chips.tsx",
      "content": "\"use client\";\n\n/**\n * Poker chip glyphs, the mobile app's design redrawn as SVG: a colored disc\n * with eight white edge ticks and an inner ring — the classic casino chip read\n * at a glance. Color encodes the amount (grey sub-blind, blue, red, green,\n * purple as the stakes climb), the same ramp as the mobile trainer, so both\n * tables stay one visual system.\n */\n\n/** Denomination color for an amount in big blinds — the mobile app's ramp. */\nexport function chipColor(bb: number): string {\n  if (bb < 1) return \"#9ca3af\"; // grey — sub-blind\n  if (bb < 5) return \"#2f6be0\"; // blue\n  if (bb < 25) return \"#e0392b\"; // red\n  if (bb < 100) return \"#1ea05f\"; // green\n  return \"#8b5cf6\"; // purple — the big stacks\n}\n\n/** One chip, face-on. `size` is the rendered diameter in px. `color` overrides the denomination ramp. */\nexport function Chip({ value, size = 24, color }: { value: number; size?: number; color?: string }) {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 32 32\"\n      aria-hidden\n      className=\"block drop-shadow-[0_1px_1px_rgba(0,0,0,0.5)]\"\n    >\n      <circle cx=\"16\" cy=\"16\" r=\"15\" fill={color ?? chipColor(value)} stroke=\"rgba(0,0,0,0.35)\" strokeWidth=\"1\" />\n      {/* Eight edge ticks as one dashed ring, so they stay evenly spaced at any\n          size. 2π·13 ≈ 81.7 → 8 × (3.5 dash + 6.7 gap). */}\n      <circle\n        cx=\"16\"\n        cy=\"16\"\n        r=\"13\"\n        fill=\"none\"\n        stroke=\"rgba(255,255,255,0.9)\"\n        strokeWidth=\"4\"\n        strokeDasharray=\"3.5 6.7\"\n        transform=\"rotate(-90 16 16)\"\n      />\n      <circle cx=\"16\" cy=\"16\" r=\"8.8\" fill=\"none\" stroke=\"rgba(255,255,255,0.75)\" strokeWidth=\"1.2\" />\n    </svg>\n  );\n}\n\n/**\n * A bet: one chip colored by the amount with the amount beside it — the mobile\n * app's ChipAmount, not a denomination breakdown.\n */\nexport function ChipStack({\n  amount,\n  size = 24,\n  label,\n  className = \"\",\n  color,\n  variant = \"pill\",\n}: {\n  amount: number;\n  size?: number;\n  /** Amount text; omit to render the chip only. */\n  label?: string;\n  className?: string;\n  /** Face color. The table variant defaults to a red chip. */\n  color?: string;\n  /** `table` is a red chip with the amount beside it. `pill` is the replayer chip. */\n  variant?: \"pill\" | \"table\";\n}) {\n  if (amount <= 0) return null;\n  const fill = color ?? (variant === \"table\" ? \"var(--table-chip, #d3121c)\" : undefined);\n  return (\n    <span className={`flex items-center ${variant === \"table\" ? \"gap-1\" : \"gap-1.5\"} ${className}`}>\n      <Chip value={amount} size={size} color={fill} />\n      {label &&\n        (variant === \"table\" ? (\n          <span className=\"text-[12px] font-bold tabular-nums text-[var(--table-chip-ink,#fff)] drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)] @[32rem]:text-[13px]\">\n            {label}\n          </span>\n        ) : (\n          <span className=\"rounded-full bg-background/80 px-2 py-0.5 font-mono text-[13px] font-semibold text-foreground\">\n            {label}\n          </span>\n        ))}\n    </span>\n  );\n}\n\n/**\n * The pot: a short overlapping spread whose chip count scales with the amount,\n * so a big pot visibly weighs more — the mobile app's ChipStackIcon.\n */\nexport function PotChips({ amount, size = 24 }: { amount: number; size?: number }) {\n  if (amount <= 0) return null;\n  const count = amount < 5 ? 1 : amount < 25 ? 2 : 3;\n  const overlap = Math.round(size * 0.45);\n  return (\n    <span className=\"flex items-center\" aria-hidden>\n      {Array.from({ length: count }, (_, i) => (\n        <span key={i} style={{ marginLeft: i === 0 ? 0 : -overlap }}>\n          <Chip value={amount / count} size={size} />\n        </span>\n      ))}\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/trainer/chips.tsx"
    }
  ],
  "type": "registry:component"
}