@stargazeryan/poker-ui 0.0.0-stage → 0.2.0

package/dist/index.d.cts

@@ -0,0 +1,130 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare function cn(...parts: Array<string | false | null | undefined>): string;
+
+/** Big Blind value used for stack display. */
+declare const BB = 20;
+/** Format a chip amount as a Big-Blind string, e.g. 1234 -> "61.7 BB". */
+declare function formatBB(amount: number): string;
+
+/**
+ * Seat-ring helpers. Pure functions — they contain no game-specific rules.
+ */
+interface NextSeatOptions {
+    /** +1 for clockwise, -1 for counter-clockwise. Default +1. */
+    dir?: 1 | -1;
+    /** Return true to skip a seat (e.g. folded / empty / out). */
+    skip?: (index: number) => boolean;
+}
+/**
+ * Return the index of the next seat on the ring after `current`, skipping any
+ * seat matched by `opts.skip`. Wraps around. Returns `current` if every other
+ * seat is skipped.
+ */
+declare function nextSeatIndex(current: number, seatCount: number, opts?: NextSeatOptions): number;
+
+type CardSize = "xs" | "sm" | "md" | "lg";
+/** Parse a compact card code like "As", "10h", "kd" into rank + suit. */
+declare function parseCard(card: string): {
+    rank: string;
+    suit: string;
+};
+declare function getSuitSymbol(suit: string): string;
+interface PlayingCardProps {
+    /** Compact card code ("As", "10h") or null to render a face-down card back. */
+    card: string | null;
+    size?: CardSize;
+    className?: string;
+}
+/**
+ * A single playing card. Size is driven by the `size` prop (never viewport
+ * breakpoints) so cards scale predictably inside any container.
+ */
+declare function PlayingCard({ card, size, className }: PlayingCardProps): react.JSX.Element;
+interface CardBackProps {
+    size?: CardSize;
+    className?: string;
+}
+/** The face-down card back (dark red + gold rosette). */
+declare function CardBack({ size, className }: CardBackProps): react.JSX.Element;
+interface HoleCardsProps {
+    cards: (string | null)[];
+    size?: CardSize;
+    className?: string;
+}
+/** A row of a player's two hole cards. */
+declare function HoleCards({ cards, size, className }: HoleCardsProps): react.JSX.Element;
+interface CommunityCardsProps {
+    cards: (string | null)[];
+    size?: CardSize;
+    className?: string;
+}
+/** The five community cards, each dealt with a staggered flip animation. */
+declare function CommunityCards({ cards, size, className }: CommunityCardsProps): react.JSX.Element;
+
+interface SeatProps {
+    /** Turn/active highlight (generic). */
+    isActive?: boolean;
+    /** Winner highlight (generic). */
+    isWinner?: boolean;
+    /** Dimmed, e.g. folded or out (generic). */
+    isDimmed?: boolean;
+    /** Optional click handler (e.g. "sit here"). */
+    onClick?: () => void;
+    /** Slot: top row — name / badges. */
+    header?: ReactNode;
+    /** Slot: top-right floating element — e.g. a dealer button. */
+    badge?: ReactNode;
+    /** Slot: center content — 0..N cards, avatar, anything. */
+    children?: ReactNode;
+    /** Slot: bottom row — stack / bet / status. */
+    footer?: ReactNode;
+    /** Slot: overlay — e.g. an "All-in" label. */
+    overlay?: ReactNode;
+    width?: number;
+    height?: number;
+    className?: string;
+}
+/**
+ * A neutral seat: a frame with generic visual states and named slots.
+ * It knows nothing about any particular game — put whatever you want into
+ * `header` / `children` / `footer` / `badge` / `overlay`.
+ */
+declare function Seat({ isActive, isWinner, isDimmed, onClick, header, badge, children, footer, overlay, width, height, className, }: SeatProps): react.JSX.Element;
+
+interface PotProps {
+    amount: number;
+    /** Optional label, e.g. "Main" / "Side". */
+    label?: string;
+    /** Formatter for the amount; defaults to Big-Blind formatting. */
+    format?: (amount: number) => string;
+    className?: string;
+}
+/** A small, standalone pot pill. Optional — the table does not require it. */
+declare function Pot({ amount, label, format, className }: PotProps): react.JSX.Element;
+
+interface CardTableProps {
+    /** Number of seats (2–10). Default 6. */
+    seatCount?: number;
+    /** Optional per-seat content. Length should equal `seatCount`. */
+    seats?: (ReactNode | null)[];
+    /** Alternative to `seats`: render a seat by index. */
+    renderSeat?: (index: number, isYou: boolean) => ReactNode;
+    /** Which seat belongs to the viewer; rotates that seat to the bottom. */
+    yourSeatIndex?: number | null;
+    /** Optional content in the middle of the table (cards, pot, anything). */
+    center?: ReactNode;
+    /** Seat frame size used for layout. */
+    seatWidth?: number;
+    seatHeight?: number;
+    className?: string;
+}
+/**
+ * A responsive, game-agnostic card table. It scales a fixed 1200x900 design
+ * onto its container and arranges `seatCount` seats around the felt. Purely
+ * presentational: supply seat content and an optional `center` slot.
+ */
+declare function CardTable({ seatCount, seats, renderSeat, yourSeatIndex, center, seatWidth, seatHeight, className, }: CardTableProps): react.JSX.Element;
+
+export { BB, CardBack, type CardBackProps, type CardSize, CardTable, type CardTableProps, CommunityCards, type CommunityCardsProps, HoleCards, type HoleCardsProps, type NextSeatOptions, PlayingCard, type PlayingCardProps, CardTable as PokerTable, type CardTableProps as PokerTableProps, Pot, type PotProps, Seat, type SeatProps, cn, formatBB, getSuitSymbol, nextSeatIndex, parseCard };

package/dist/index.d.ts

@@ -0,0 +1,130 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare function cn(...parts: Array<string | false | null | undefined>): string;
+
+/** Big Blind value used for stack display. */
+declare const BB = 20;
+/** Format a chip amount as a Big-Blind string, e.g. 1234 -> "61.7 BB". */
+declare function formatBB(amount: number): string;
+
+/**
+ * Seat-ring helpers. Pure functions — they contain no game-specific rules.
+ */
+interface NextSeatOptions {
+    /** +1 for clockwise, -1 for counter-clockwise. Default +1. */
+    dir?: 1 | -1;
+    /** Return true to skip a seat (e.g. folded / empty / out). */
+    skip?: (index: number) => boolean;
+}
+/**
+ * Return the index of the next seat on the ring after `current`, skipping any
+ * seat matched by `opts.skip`. Wraps around. Returns `current` if every other
+ * seat is skipped.
+ */
+declare function nextSeatIndex(current: number, seatCount: number, opts?: NextSeatOptions): number;
+
+type CardSize = "xs" | "sm" | "md" | "lg";
+/** Parse a compact card code like "As", "10h", "kd" into rank + suit. */
+declare function parseCard(card: string): {
+    rank: string;
+    suit: string;
+};
+declare function getSuitSymbol(suit: string): string;
+interface PlayingCardProps {
+    /** Compact card code ("As", "10h") or null to render a face-down card back. */
+    card: string | null;
+    size?: CardSize;
+    className?: string;
+}
+/**
+ * A single playing card. Size is driven by the `size` prop (never viewport
+ * breakpoints) so cards scale predictably inside any container.
+ */
+declare function PlayingCard({ card, size, className }: PlayingCardProps): react.JSX.Element;
+interface CardBackProps {
+    size?: CardSize;
+    className?: string;
+}
+/** The face-down card back (dark red + gold rosette). */
+declare function CardBack({ size, className }: CardBackProps): react.JSX.Element;
+interface HoleCardsProps {
+    cards: (string | null)[];
+    size?: CardSize;
+    className?: string;
+}
+/** A row of a player's two hole cards. */
+declare function HoleCards({ cards, size, className }: HoleCardsProps): react.JSX.Element;
+interface CommunityCardsProps {
+    cards: (string | null)[];
+    size?: CardSize;
+    className?: string;
+}
+/** The five community cards, each dealt with a staggered flip animation. */
+declare function CommunityCards({ cards, size, className }: CommunityCardsProps): react.JSX.Element;
+
+interface SeatProps {
+    /** Turn/active highlight (generic). */
+    isActive?: boolean;
+    /** Winner highlight (generic). */
+    isWinner?: boolean;
+    /** Dimmed, e.g. folded or out (generic). */
+    isDimmed?: boolean;
+    /** Optional click handler (e.g. "sit here"). */
+    onClick?: () => void;
+    /** Slot: top row — name / badges. */
+    header?: ReactNode;
+    /** Slot: top-right floating element — e.g. a dealer button. */
+    badge?: ReactNode;
+    /** Slot: center content — 0..N cards, avatar, anything. */
+    children?: ReactNode;
+    /** Slot: bottom row — stack / bet / status. */
+    footer?: ReactNode;
+    /** Slot: overlay — e.g. an "All-in" label. */
+    overlay?: ReactNode;
+    width?: number;
+    height?: number;
+    className?: string;
+}
+/**
+ * A neutral seat: a frame with generic visual states and named slots.
+ * It knows nothing about any particular game — put whatever you want into
+ * `header` / `children` / `footer` / `badge` / `overlay`.
+ */
+declare function Seat({ isActive, isWinner, isDimmed, onClick, header, badge, children, footer, overlay, width, height, className, }: SeatProps): react.JSX.Element;
+
+interface PotProps {
+    amount: number;
+    /** Optional label, e.g. "Main" / "Side". */
+    label?: string;
+    /** Formatter for the amount; defaults to Big-Blind formatting. */
+    format?: (amount: number) => string;
+    className?: string;
+}
+/** A small, standalone pot pill. Optional — the table does not require it. */
+declare function Pot({ amount, label, format, className }: PotProps): react.JSX.Element;
+
+interface CardTableProps {
+    /** Number of seats (2–10). Default 6. */
+    seatCount?: number;
+    /** Optional per-seat content. Length should equal `seatCount`. */
+    seats?: (ReactNode | null)[];
+    /** Alternative to `seats`: render a seat by index. */
+    renderSeat?: (index: number, isYou: boolean) => ReactNode;
+    /** Which seat belongs to the viewer; rotates that seat to the bottom. */
+    yourSeatIndex?: number | null;
+    /** Optional content in the middle of the table (cards, pot, anything). */
+    center?: ReactNode;
+    /** Seat frame size used for layout. */
+    seatWidth?: number;
+    seatHeight?: number;
+    className?: string;
+}
+/**
+ * A responsive, game-agnostic card table. It scales a fixed 1200x900 design
+ * onto its container and arranges `seatCount` seats around the felt. Purely
+ * presentational: supply seat content and an optional `center` slot.
+ */
+declare function CardTable({ seatCount, seats, renderSeat, yourSeatIndex, center, seatWidth, seatHeight, className, }: CardTableProps): react.JSX.Element;
+
+export { BB, CardBack, type CardBackProps, type CardSize, CardTable, type CardTableProps, CommunityCards, type CommunityCardsProps, HoleCards, type HoleCardsProps, type NextSeatOptions, PlayingCard, type PlayingCardProps, CardTable as PokerTable, type CardTableProps as PokerTableProps, Pot, type PotProps, Seat, type SeatProps, cn, formatBB, getSuitSymbol, nextSeatIndex, parseCard };

package/dist/index.js

@@ -0,0 +1,357 @@
+"use client";
+
+// src/cn.ts
+function cn(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/format.ts
+var BB = 20;
+function formatBB(amount) {
+  const bb = amount / BB;
+  return `${Number.isInteger(bb) ? bb : bb.toFixed(1)} BB`;
+}
+
+// src/seat.ts
+function nextSeatIndex(current, seatCount, opts = {}) {
+  const n = Math.max(1, Math.floor(seatCount));
+  const dir = opts.dir ?? 1;
+  const skip = opts.skip;
+  const start = (Math.floor(current) % n + n) % n;
+  let i = start;
+  for (let step = 0; step < n - 1; step++) {
+    i = (i + dir + n) % n;
+    if (!skip || !skip(i)) return i;
+  }
+  return start;
+}
+
+// src/components/PlayingCard.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SIZE_CLASSES = {
+  xs: "w-8 h-11",
+  sm: "w-10 h-14",
+  md: "w-16 h-22",
+  lg: "w-24 h-32"
+};
+var CORNER_RANK = {
+  xs: "text-[11px]",
+  sm: "text-sm",
+  md: "text-lg",
+  lg: "text-2xl"
+};
+var CORNER_SUIT = {
+  xs: "text-[9px]",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var CENTER_SUIT = {
+  xs: "text-base",
+  sm: "text-xl",
+  md: "text-3xl",
+  lg: "text-5xl"
+};
+var BACK_EMBLEM_SIZE = {
+  xs: 14,
+  sm: 18,
+  md: 28,
+  lg: 42
+};
+function parseCard(card) {
+  if (!card || card.length < 2) return { rank: "", suit: "" };
+  return { rank: card.slice(0, -1), suit: card.slice(-1) };
+}
+function getSuitSymbol(suit) {
+  switch (suit) {
+    case "s":
+      return "\u2660";
+    case "h":
+      return "\u2665";
+    case "d":
+      return "\u2666";
+    case "c":
+      return "\u2663";
+    default:
+      return suit;
+  }
+}
+function getSuitClass(suit) {
+  switch (suit) {
+    case "s":
+    case "c":
+      return "text-neutral-900";
+    case "h":
+    case "d":
+      return "text-red-600";
+    default:
+      return "";
+  }
+}
+function PlayingCard({ card, size = "md", className }) {
+  if (!card) return /* @__PURE__ */ jsx(CardBack, { size, className });
+  const { rank, suit } = parseCard(card);
+  const suitSymbol = getSuitSymbol(suit);
+  const suitClass = getSuitClass(suit);
+  const showCenter = size === "md" || size === "lg";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        SIZE_CLASSES[size],
+        "relative bg-gradient-to-br from-white via-white to-neutral-100",
+        "rounded-md border border-neutral-300/90 overflow-hidden",
+        "shadow-[0_2px_6px_rgba(0,0,0,0.45),inset_0_1px_0_rgba(255,255,255,0.9)]",
+        className
+      ),
+      style: { aspectRatio: "10/14" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("absolute top-[3px] left-[5px] flex flex-col items-center leading-none", suitClass), children: [
+          /* @__PURE__ */ jsx("span", { className: cn(CORNER_RANK[size], "font-bold tracking-tight"), children: rank }),
+          /* @__PURE__ */ jsx("span", { className: cn(CORNER_SUIT[size], "-mt-[1px]"), children: suitSymbol })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: cn("absolute bottom-[3px] right-[5px] flex flex-col items-center leading-none rotate-180", suitClass), children: [
+          /* @__PURE__ */ jsx("span", { className: cn(CORNER_RANK[size], "font-bold tracking-tight"), children: rank }),
+          /* @__PURE__ */ jsx("span", { className: cn(CORNER_SUIT[size], "-mt-[1px]"), children: suitSymbol })
+        ] }),
+        showCenter && /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 flex items-center justify-center opacity-90", suitClass), children: /* @__PURE__ */ jsx("span", { className: CENTER_SUIT[size], children: suitSymbol }) })
+      ]
+    }
+  );
+}
+function CardBackEmblem({ size }) {
+  const s = BACK_EMBLEM_SIZE[size];
+  return /* @__PURE__ */ jsxs("svg", { width: s, height: s, viewBox: "0 0 40 40", className: "drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxs("g", { fill: "#f0c04a", opacity: "0.92", children: [
+      /* @__PURE__ */ jsx("ellipse", { cx: "20", cy: "11", rx: "4", ry: "7" }),
+      /* @__PURE__ */ jsx("ellipse", { cx: "20", cy: "29", rx: "4", ry: "7" }),
+      /* @__PURE__ */ jsx("ellipse", { cx: "11", cy: "20", rx: "7", ry: "4" }),
+      /* @__PURE__ */ jsx("ellipse", { cx: "29", cy: "20", rx: "7", ry: "4" })
+    ] }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "20", r: "3.2", fill: "#5a0c18" })
+  ] });
+}
+function CardBack({ size = "md", className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        SIZE_CLASSES[size],
+        "relative rounded-md p-[3px] overflow-hidden",
+        "bg-gradient-to-br from-[#7a1020] via-[#5a0c18] to-[#3f0810]",
+        "border-2 border-[#c9a24b]/70 shadow-[0_2px_6px_rgba(0,0,0,0.45)]",
+        className
+      ),
+      style: { aspectRatio: "10/14" },
+      children: /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-[4px] border border-white/20 flex items-center justify-center bg-[repeating-linear-gradient(45deg,rgba(255,255,255,0.09)_0_6px,transparent_6px_12px),repeating-linear-gradient(-45deg,rgba(255,255,255,0.06)_0_6px,transparent_6px_12px)]", children: /* @__PURE__ */ jsx(CardBackEmblem, { size }) })
+    }
+  );
+}
+function HoleCards({ cards, size = "lg", className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", className), children: cards.map((card, i) => /* @__PURE__ */ jsx(PlayingCard, { card, size }, i)) });
+}
+function CommunityCards({ cards, size = "md", className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-1.5", className), children: cards.map((card, i) => /* @__PURE__ */ jsx("div", { className: "animate-card-deal", style: { animationDelay: `${i * 90}ms` }, children: /* @__PURE__ */ jsx(PlayingCard, { card, size }) }, i)) });
+}
+
+// src/components/Seat.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Seat({
+  isActive = false,
+  isWinner = false,
+  isDimmed = false,
+  onClick,
+  header,
+  badge,
+  children,
+  footer,
+  overlay,
+  width = 160,
+  height = 176,
+  className
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("relative", className), style: { width, height }, children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        role: onClick ? "button" : void 0,
+        tabIndex: onClick ? 0 : void 0,
+        onClick,
+        onKeyDown: onClick ? (e) => {
+          if (e.key === "Enter" || e.key === " ") onClick();
+        } : void 0,
+        className: cn(
+          "flex h-full w-full flex-col items-center justify-between gap-1 rounded-2xl border bg-neutral-900/80 p-2 text-neutral-100 backdrop-blur transition",
+          isActive ? "border-cyan-400 shadow-[0_0_18px_rgba(34,211,238,0.55)]" : "border-neutral-700",
+          isWinner && "border-amber-400 shadow-[0_0_18px_rgba(251,191,36,0.6)]",
+          isDimmed && "opacity-50",
+          onClick && "cursor-pointer hover:border-neutral-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400"
+        ),
+        children: [
+          header !== void 0 && /* @__PURE__ */ jsx2("div", { className: "flex w-full items-center justify-between gap-1 text-[11px]", children: header }),
+          /* @__PURE__ */ jsx2("div", { className: "flex flex-1 items-center justify-center", children }),
+          footer !== void 0 && /* @__PURE__ */ jsx2("div", { className: "flex w-full items-center justify-between text-[11px] text-neutral-300", children: footer })
+        ]
+      }
+    ),
+    badge !== void 0 && /* @__PURE__ */ jsx2("div", { className: "absolute -top-1 -right-1", children: badge }),
+    overlay !== void 0 && /* @__PURE__ */ jsx2("div", { className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 text-center", children: overlay })
+  ] });
+}
+
+// src/components/Pot.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Pot({ amount, label, format = formatBB, className }) {
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex items-center gap-2 font-mono text-sm text-amber-400", className), children: [
+    label && /* @__PURE__ */ jsx3("span", { className: "text-neutral-400", children: label }),
+    /* @__PURE__ */ jsx3("span", { className: "whitespace-nowrap rounded-full border border-amber-400/50 bg-neutral-900/80 px-3 py-1 shadow-inner", children: format(amount) })
+  ] });
+}
+
+// src/components/CardTable.tsx
+import { useRef, useLayoutEffect, useState, useMemo } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var DESIGN_W = 1200;
+var DESIGN_H = 900;
+var MARGIN_X = 164;
+var MARGIN_Y = 196;
+var TABLE_RX = DESIGN_W / 2 - MARGIN_X;
+var TABLE_RY = DESIGN_H / 2 - MARGIN_Y;
+var FELT_GAP = 11;
+var BET_SCALE = 0.72;
+var BET_RX = TABLE_RX * BET_SCALE;
+var BET_RY = TABLE_RY * BET_SCALE;
+function getEllipsePoint(cx, cy, rx, ry, angleDeg) {
+  const rad = angleDeg * Math.PI / 180;
+  return { x: cx + rx * Math.cos(rad), y: cy + ry * Math.sin(rad) };
+}
+function calculateSeatLayouts(seatCount, yourSeatIndex, seatWidth, seatHeight) {
+  const cx = DESIGN_W / 2;
+  const cy = DESIGN_H / 2;
+  const ringX = TABLE_RX - FELT_GAP + seatWidth / 2 + 6;
+  const ringY = TABLE_RY - FELT_GAP + seatHeight / 2 + 6;
+  const step = 360 / seatCount;
+  const angleOf = (i) => -90 + i * step;
+  const rotationOffset = yourSeatIndex !== null ? 90 - angleOf(yourSeatIndex) : 0;
+  const layouts = [];
+  for (let i = 0; i < seatCount; i++) {
+    const pt = getEllipsePoint(cx, cy, ringX, ringY, angleOf(i) + rotationOffset);
+    layouts.push({
+      x: pt.x - seatWidth / 2,
+      y: pt.y - seatHeight / 2,
+      index: i,
+      isYou: i === yourSeatIndex
+    });
+  }
+  return layouts;
+}
+function CardTable({
+  seatCount = 6,
+  seats,
+  renderSeat,
+  yourSeatIndex = null,
+  center,
+  seatWidth = 160,
+  seatHeight = 176,
+  className
+}) {
+  const count = Math.max(2, Math.min(10, Math.floor(seatCount)));
+  const outerRef = useRef(null);
+  const [scale, setScale] = useState(1);
+  const layouts = useMemo(
+    () => calculateSeatLayouts(count, yourSeatIndex, seatWidth, seatHeight),
+    [count, yourSeatIndex, seatWidth, seatHeight]
+  );
+  useLayoutEffect(() => {
+    const el = outerRef.current;
+    if (!el) return;
+    const compute = () => {
+      const w = el.clientWidth;
+      const h = el.clientHeight;
+      if (!w || !h) return;
+      setScale(Math.min(w / DESIGN_W, h / DESIGN_H));
+    };
+    compute();
+    const ro = new ResizeObserver(compute);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const tableFrameInset = { inset: `${MARGIN_Y}px ${MARGIN_X}px` };
+  const feltInset = { inset: `${MARGIN_Y + FELT_GAP}px ${MARGIN_X + FELT_GAP}px` };
+  const rimInset = { inset: `${MARGIN_Y + 6}px ${MARGIN_X + 6}px` };
+  const betLineInset = {
+    inset: `${MARGIN_Y + (TABLE_RY - BET_RY)}px ${MARGIN_X + (TABLE_RX - BET_RX)}px`
+  };
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref: outerRef,
+      className: cn("relative flex h-full w-full min-h-0 items-center justify-center overflow-hidden", className),
+      children: /* @__PURE__ */ jsx4("div", { style: { width: DESIGN_W * scale, height: DESIGN_H * scale }, children: /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: "relative",
+          style: { width: DESIGN_W, height: DESIGN_H, transform: `scale(${scale})`, transformOrigin: "top left" },
+          children: [
+            /* @__PURE__ */ jsx4(
+              "div",
+              {
+                className: "absolute -inset-6 rounded-[50%] bg-[radial-gradient(closest-side,rgba(240,192,74,0.16),transparent_72%)] blur-3xl",
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "div",
+              {
+                className: "absolute rounded-[50%] bg-gradient-to-b from-[#a5744a] via-[#6b3f22] to-[#38200f] shadow-[0_26px_70px_-12px_rgba(0,0,0,0.85),inset_0_3px_0_rgba(255,255,255,0.20),inset_0_-6px_16px_rgba(0,0,0,0.5)]",
+                style: tableFrameInset,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "div",
+              {
+                className: "absolute rounded-[50%] bg-[radial-gradient(ellipse_at_50%_32%,#23804b,#0f4d2e_55%,#093b22)] shadow-[inset_0_0_90px_rgba(0,0,0,0.55),inset_0_3px_10px_rgba(255,255,255,0.06)]",
+                style: feltInset,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "div",
+              {
+                className: "absolute rounded-[50%] border-2 border-white/10 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.25)]",
+                style: betLineInset,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx4("div", { className: "absolute flex items-center justify-center pointer-events-none", style: feltInset, "aria-hidden": "true", children: /* @__PURE__ */ jsx4("span", { className: "text-white/[0.05] text-[110px] font-black tracking-[0.2em] select-none leading-none", children: "\u2660\u2665\u2666\u2663" }) }),
+            center !== void 0 && /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: center }),
+            /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 z-20", children: layouts.map(({ x, y, index, isYou }) => {
+              const content = seats ? seats[index] ?? null : renderSeat ? renderSeat(index, isYou) : null;
+              if (content === null) return null;
+              return /* @__PURE__ */ jsx4("div", { className: "absolute", style: { left: `${x}px`, top: `${y}px` }, children: content }, index);
+            }) }),
+            /* @__PURE__ */ jsx4("div", { className: "absolute rounded-[50%] border border-white/10 pointer-events-none", style: rimInset, "aria-hidden": "true" })
+          ]
+        }
+      ) })
+    }
+  );
+}
+export {
+  BB,
+  CardBack,
+  CardTable,
+  CommunityCards,
+  HoleCards,
+  PlayingCard,
+  CardTable as PokerTable,
+  Pot,
+  Seat,
+  cn,
+  formatBB,
+  getSuitSymbol,
+  nextSeatIndex,
+  parseCard
+};
+//# sourceMappingURL=index.js.map