casino-ui 0.1.0

package/src/stories/Icon.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Icon } from "../components/icon";
+
+const ALL_ICONS = [
+  "settings", "share", "sit", "switch-seat", "crown", "check-circle",
+  "loader", "surrender", "split", "double", "stand", "hit",
+  "x", "check", "logout", "sound", "eye", "rules",
+  "copy", "info", "user", "wallet", "chevron-down",
+];
+
+const meta: Meta<typeof Icon> = {
+  title: "Components/Icon",
+  component: Icon,
+  argTypes: {
+    icon: { control: "select", options: ALL_ICONS },
+    color: { control: "color" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Icon>;
+
+export const Default: Story = {
+  args: { icon: "settings", className: "size-6 text-white" },
+};
+
+export const AllIcons: Story = {
+  render: () => (
+    <div className="grid grid-cols-6 gap-4">
+      {ALL_ICONS.map((name) => (
+        <div key={name} className="flex flex-col items-center gap-2 p-2">
+          <Icon icon={name} className="size-6 text-white" />
+          <span className="text-xs text-text-secondary">{name}</span>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const Colored: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Icon icon="check" className="size-6 text-accent-success" />
+      <Icon icon="x" className="size-6 text-accent-error" />
+      <Icon icon="crown" className="size-6 text-accent-yellow" />
+      <Icon icon="info" className="size-6 text-btn-blue" />
+    </div>
+  ),
+};

package/src/stories/PokerCard.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PokerCard, type Suit, type Rank } from "../components/poker-card";
+
+const meta: Meta<typeof PokerCard> = {
+  title: "Components/PokerCard",
+  component: PokerCard,
+  argTypes: {
+    suit: { control: "select", options: ["heart", "diamond", "spade", "club"] },
+    rank: { control: "select", options: ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"] },
+    side: { control: "select", options: ["front", "back"] },
+    size: { control: "select", options: ["default", "mobile", "mobile-small", "mobile-seats"] },
+    type: { control: "select", options: ["default", "win", "lose", "bust", "blackjack", "push", "even", "surrender"] },
+    showShadow: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PokerCard>;
+
+export const AceOfSpades: Story = {
+  args: { suit: "spade", rank: "A", side: "front" },
+};
+
+export const KingOfHearts: Story = {
+  args: { suit: "heart", rank: "K", side: "front" },
+};
+
+export const CardBack: Story = {
+  args: { side: "back" },
+};
+
+export const WinState: Story = {
+  args: { suit: "heart", rank: "A", side: "front", type: "win" },
+};
+
+export const BlackjackState: Story = {
+  args: { suit: "spade", rank: "A", side: "front", type: "blackjack" },
+};
+
+export const AllSuits: Story = {
+  render: () => (
+    <div className="flex gap-3">
+      {(["heart", "diamond", "spade", "club"] as Suit[]).map((suit) => (
+        <PokerCard key={suit} suit={suit} rank="A" />
+      ))}
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex gap-3 items-end">
+      <PokerCard suit="spade" rank="K" size="xs" />
+      <PokerCard suit="spade" rank="K" size="sm" />
+      <PokerCard suit="spade" rank="K" size="md" />
+      <PokerCard suit="spade" rank="K" size="lg" />
+    </div>
+  ),
+};
+
+export const ResultTypes: Story = {
+  render: () => (
+    <div className="flex gap-3">
+      {(["default", "win", "lose", "bust", "blackjack", "push"] as const).map((type) => (
+        <div key={type} className="flex flex-col items-center gap-1">
+          <PokerCard suit="heart" rank="10" type={type} />
+          <span className="text-xs text-text-secondary">{type}</span>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/stories/ResultBadge.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ResultBadge } from "../components/result-badge";
+
+const meta: Meta<typeof ResultBadge> = {
+  title: "Components/ResultBadge",
+  component: ResultBadge,
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["win", "lose", "bust", "push", "blackjack", "even", "surrender"],
+    },
+    showPayout: { control: "boolean" },
+    isUSD: { control: "boolean" },
+    isMobile: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ResultBadge>;
+
+export const Win: Story = {
+  args: { type: "win" },
+};
+
+export const Blackjack: Story = {
+  args: { type: "blackjack" },
+};
+
+export const WithPayout: Story = {
+  args: { type: "win", showPayout: true, amount: "2.50", isUSD: true },
+};
+
+export const AllResults: Story = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      {(["win", "lose", "bust", "push", "blackjack", "even", "surrender"] as const).map((type) => (
+        <ResultBadge key={type} type={type} />
+      ))}
+    </div>
+  ),
+};
+
+export const AllResultsWithPayout: Story = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      {(["win", "lose", "bust", "push", "blackjack", "even", "surrender"] as const).map((type) => (
+        <ResultBadge key={type} type={type} showPayout amount="1.25" isUSD />
+      ))}
+    </div>
+  ),
+};

package/src/stories/Toast.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CasinoToastContainer } from "../components/toast-container";
+import { toast } from "../components/toast-helpers";
+import { Button } from "../components/button";
+
+const meta: Meta = {
+  title: "Components/Toast",
+  decorators: [
+    (Story) => (
+      <div>
+        <Story />
+        <CasinoToastContainer position="bottom-right" />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Info: Story = {
+  render: () => (
+    <Button variant="tertiary" onClick={() => toast.info("Card dealt to player")}>
+      Show Info Toast
+    </Button>
+  ),
+};
+
+export const Success: Story = {
+  render: () => (
+    <Button variant="primary" onClick={() => toast.success("You win!")}>
+      Show Success Toast
+    </Button>
+  ),
+};
+
+export const StatusError: Story = {
+  render: () => (
+    <Button variant="tertiary" onClick={() => toast.status.error("Insufficient balance", { title: "Error" })}>
+      Show Error Toast
+    </Button>
+  ),
+};
+
+export const StatusSuccess: Story = {
+  render: () => (
+    <Button variant="primary" onClick={() => toast.status.success("Bet placed successfully", { title: "Confirmed" })}>
+      Show Status Success
+    </Button>
+  ),
+};
+
+export const ActionToast: Story = {
+  render: () => (
+    <Button
+      variant="secondary"
+      onClick={() =>
+        toast.action({
+          title: "Switch Table?",
+          message: "You will leave the current game.",
+          actions: [
+            { label: "Cancel", onClick: () => {} },
+            { label: "Confirm", onClick: () => {}, highlight: true },
+          ],
+        })
+      }
+    >
+      Show Action Toast
+    </Button>
+  ),
+};

package/src/styles/casino-ui-base.css

@@ -0,0 +1,310 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-win: #c7fe51;
+  --color-brand: #c7fe51;
+  --color-brand-light: #caff33;
+  --color-brand-dark: #546b22;
+  --color-dialog-content: #1a1a1a;
+  --color-accent-error: #af1b45;
+  --color-accent-success: #00a95d;
+  --color-accent-waring: #f1c40f;
+  --color-surface-600: #141414;
+  --color-surface-500: #1a1a1a;
+  --color-surface-450: #1f1f1f;
+  --color-surface-400: #252525;
+  --color-surface-300: #333333;
+  --color-surface-250: #404040;
+  --color-surface-200: #4d4d4d;
+  --color-surface-650: #0f0f0f;
+  --color-text-secondary: #bfbfbf;
+  --color-text-tertiary: #8c8c8c;
+  --color-card-suit-red: #f24545;
+  --color-card-suit-black: #1a1a1a;
+  --color-card-border: #bfbfbf;
+  --color-card-back-bg: #f24545;
+  --color-card-shoe-bg: #2a2a2a;
+  --color-card-shoe-border: #4e4e4e;
+  --color-button-grey: #3a3a3a;
+  --color-accent-pink: #fd135a;
+  --color-accent-fun-red: #db375e;
+  --color-accent-yellow: #fee061;
+  /* Action panel */
+  --color-panel-bg: #252525;
+  --color-action-hover: #444444;
+  --color-action-active: #2a2a2a;
+  --color-surrender-to: #2e2e2e;
+  --color-timer-end: #00d474;
+  /* Primary button — Green */
+  --color-btn-green: #b5e74a;
+  --color-btn-green-light: #c7fe51;
+  /* Primary button — Blue */
+  --color-btn-blue: #3fc1ff;
+  --color-btn-blue-light: #63d0ff;
+}
+
+/* ── Casino Chip ────────────────────────────────────── */
+
+@layer components {
+  .chip-body {
+    position: relative;
+  }
+  .chip-body::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: repeating-conic-gradient(
+      from 348.75deg,
+      #fff 0deg 22.5deg,
+      transparent 22.5deg 45deg
+    );
+  }
+
+  /* Chip data-slot sizing tokens */
+  [data-slot="chip"] {
+    width: var(--chip-outer);
+    height: calc(var(--chip-outer) + var(--chip-shadow-depth));
+  }
+
+  [data-slot="chip-body"] {
+    width: var(--chip-outer);
+    height: var(--chip-outer);
+    background-color: var(--chip-color);
+    box-shadow: 0px var(--chip-shadow-depth) 0px 0px var(--chip-shadow-color);
+  }
+
+  [data-slot="chip-ring"] {
+    width: var(--chip-inner);
+    height: var(--chip-inner);
+    top: var(--chip-inset);
+    left: var(--chip-inset);
+  }
+
+  [data-slot="chip-center"] {
+    width: var(--chip-center);
+    height: var(--chip-center);
+    background-color: var(--chip-color);
+    padding: var(--chip-padding);
+  }
+
+  [data-slot="chip-text"] {
+    font-size: var(--chip-text);
+    font-family:
+      "SF Pro Display",
+      -apple-system,
+      BlinkMacSystemFont,
+      sans-serif;
+    font-weight: 700;
+  }
+
+  [data-slot="chip-selected-ring"] {
+    width: calc(var(--chip-outer) + 4px);
+    height: calc(var(--chip-outer) + 2px);
+    top: -1px;
+  }
+
+  [data-slot="chip"][data-size="sm"] {
+    --chip-outer: 36px;
+    --chip-inner: 33px;
+    --chip-border: 3.74px;
+    --chip-center: 28.7px;
+    --chip-text: 10.5px;
+    --chip-shadow-depth: 2px;
+    --chip-inset: 1.6px;
+    --chip-padding: 6.2px;
+  }
+  [data-slot="chip"][data-size="md"] {
+    --chip-outer: 44px;
+    --chip-inner: 40px;
+    --chip-border: 4.566px;
+    --chip-center: 35px;
+    --chip-text: 12.865px;
+    --chip-shadow-depth: 3px;
+    --chip-inset: 2px;
+    --chip-padding: 7.6px;
+  }
+  [data-slot="chip"][data-size="lg"] {
+    --chip-outer: 52px;
+    --chip-inner: 47px;
+    --chip-border: 5.4px;
+    --chip-center: 41.4px;
+    --chip-text: 15.2px;
+    --chip-shadow-depth: 4px;
+    --chip-inset: 2.4px;
+    --chip-padding: 9px;
+  }
+
+  /* Denomination color tokens */
+  [data-slot="chip"][data-denomination="1"] {
+    --chip-color: #999999;
+    --chip-shadow-color: #474747;
+  }
+  [data-slot="chip"][data-denomination="5"] {
+    --chip-color: #db375e;
+    --chip-shadow-color: #63171d;
+  }
+  [data-slot="chip"][data-denomination="10"] {
+    --chip-color: #037a4c;
+    --chip-shadow-color: #06503f;
+  }
+  [data-slot="chip"][data-denomination="25"] {
+    --chip-color: #f57fe0;
+    --chip-shadow-color: #951f9d;
+  }
+  [data-slot="chip"][data-denomination="50"] {
+    --chip-color: #7454f0;
+    --chip-shadow-color: #2d268b;
+  }
+  [data-slot="chip"][data-denomination="100"] {
+    --chip-color: #e3b800;
+    --chip-shadow-color: #816b0c;
+  }
+  [data-slot="chip"][data-denomination="500"] {
+    --chip-color: #9727b0;
+    --chip-shadow-color: #5b187d;
+  }
+
+  /* Hover glow */
+  button[data-slot="chip"]::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    width: calc(var(--chip-outer) + 10px);
+    height: calc(var(--chip-outer) + 6px);
+    border-radius: 50%;
+    background: radial-gradient(
+      ellipse at center,
+      rgba(255, 255, 255, 0.35) 0%,
+      rgba(255, 255, 255, 0.15) 40%,
+      rgba(255, 255, 255, 0) 70%
+    );
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 150ms;
+  }
+
+  button[data-slot="chip"]:hover::before {
+    opacity: 1;
+  }
+
+  button[data-slot="chip"]:hover > [data-slot="chip-body"] {
+    box-shadow: 0px var(--chip-shadow-depth) 0px 0px var(--chip-shadow-color);
+  }
+
+  /* ── Action Buttons ───────────────────────────────── */
+
+  .blue-action-button {
+    border-color: var(--color-btn-blue);
+    background-image: radial-gradient(
+      97.07% 95.3% at 48.09% 47.12%,
+      var(--color-btn-blue) 0%,
+      var(--color-btn-blue-light) 100%
+    );
+    box-shadow: 0 4px 1px 0 rgba(255, 255, 255, 0.4) inset;
+  }
+
+  .blue-action-button:hover {
+    background-image: radial-gradient(
+      97.07% 95.3% at 48.09% 47.12%,
+      #5cf 0%,
+      #8ae2ff 100%
+    );
+    box-shadow:
+      0 0 12px 0 rgba(199, 243, 81, 0.2),
+      0 3px 1px 0 rgba(255, 255, 255, 0.25) inset;
+  }
+
+  .blue-action-button:active {
+    border-color: #2ca1dc;
+    background-image: radial-gradient(
+      97.07% 95.3% at 48.09% 47.12%,
+      #32aeea 0%,
+      #4fc0f2 100%
+    );
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25) inset;
+  }
+
+  .green-action-button {
+    border-color: var(--color-btn-green);
+    background-image: radial-gradient(
+      97.07% 95.3% at 48.09% 47.12%,
+      var(--color-btn-green) 0%,
+      var(--color-btn-green-light) 100%
+    );
+    box-shadow: 0 4px 1px 0 rgba(255, 255, 255, 0.4) inset;
+  }
+
+  .green-action-button:hover {
+    background-image: radial-gradient(
+      97.07% 95.3% at 48.09% 47.12%,
+      #c4fb63 0%,
+      #d5ff7a 100%
+    );
+    box-shadow:
+      0 0 12px 0 rgba(199, 243, 81, 0.2),
+      0 3px 1px 0 rgba(255, 255, 255, 0.25) inset;
+  }
+
+  .green-action-button:active {
+    border-color: #a9d53f;
+    background-image: radial-gradient(
+      97.07% 95.3% at 48.09% 47.12%,
+      #a9d53f 0%,
+      #bee84f 100%
+    );
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25) inset;
+  }
+
+  .grey-action-button {
+    position: relative;
+    border-color: var(--color-button-grey);
+    background-image: radial-gradient(
+      97.07% 95.3% at 48.09% 47.12%,
+      #3a3a3a 0%,
+      #2e2e2e 100%
+    );
+    box-shadow: 0 4px 2px 0 rgba(255, 255, 255, 0.05) inset;
+  }
+
+  .grey-action-button:hover {
+    border-color: #464646;
+    background-image: radial-gradient(
+      97.07% 95.3% at 48.09% 47.12%,
+      #464646 0%,
+      #383838 100%
+    );
+    box-shadow:
+      0 0 8px 0 rgba(255, 255, 255, 0.03),
+      0 3px 2px 0 rgba(255, 255, 255, 0.03) inset;
+  }
+
+  .grey-action-button:active {
+    border-color: #2e2e2e;
+    background-image: radial-gradient(
+      97.07% 95.3% at 48.09% 47.12%,
+      #2e2e2e 0%,
+      #262626 100%
+    );
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25) inset;
+  }
+}
+
+/* ── Utilities ──────────────────────────────────────── */
+
+@layer utilities {
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .hide-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}

package/src/styles/toast.css

@@ -0,0 +1,52 @@
+/*
+ * Casino Toast — CSS variable contract + react-toastify overrides
+ *
+ * All variables have hardcoded fallbacks so toasts render correctly
+ * without a host theme. Consumers override variables on .casino-toast
+ * or any ancestor to re-theme.
+ */
+
+.casino-toast {
+  --toast-bg: #1f1f1f;
+  --toast-border: rgba(255, 255, 255, 0.04);
+  --toast-radius: 12px;
+  --toast-shadow: 0px 6px 15px -3px rgba(0, 0, 0, 0.15);
+  --toast-text-primary: #ffffff;
+  --toast-text-secondary: #bfbfbf;
+  --toast-icon-info: #3fc1ff;
+  --toast-icon-success: #00a95d;
+  --toast-icon-warning: #af1b45;
+  --toast-icon-error: #af1b45;
+  --toast-action-highlight: #9fcc41;
+}
+
+/* ── Strip react-toastify default chrome ─────────────── */
+
+.casino-toast .Toastify__toast-container {
+  padding: 0;
+  width: auto;
+}
+
+.casino-toast .Toastify__toast {
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+  margin-bottom: 8px;
+  min-height: unset;
+  border-radius: 0;
+  font-family: inherit;
+  cursor: default;
+}
+
+.casino-toast .Toastify__toast-body {
+  padding: 0;
+  margin: 0;
+}
+
+.casino-toast .Toastify__close-button {
+  display: none;
+}
+
+.casino-toast .Toastify__toast-icon {
+  display: none;
+}

package/src/types.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+
+export type CoinInfo = {
+  name: string;
+  symbol: string;
+  coinType: string;
+  image: string | React.ReactNode;
+  decimal: number;
+  factor: number;
+  iconUrl?: string | null;
+};

package/src/utils/format-amount.ts

@@ -0,0 +1,35 @@
+export function formatAmountDirect(amount?: number | string | null): string {
+  if (typeof amount === "undefined" || amount === null) {
+    return "--";
+  }
+
+  const num = typeof amount === "string" ? parseFloat(amount) : amount;
+
+  if (isNaN(num)) {
+    return "--";
+  }
+
+  const absNum = Math.abs(num);
+  let displayValue = num;
+  let postfix = "";
+
+  if (absNum >= 1_000_000_000) {
+    displayValue = displayValue / 1_000_000_000;
+    postfix = "ʙ";
+  } else if (absNum >= 1_000_000) {
+    displayValue = displayValue / 1_000_000;
+    postfix = "ᴍ";
+  } else if (absNum >= 1_000) {
+    displayValue = displayValue / 1_000;
+    postfix = "ᴋ";
+  }
+
+  const formatted =
+    absNum >= 1
+      ? (Math.floor(displayValue * 100) / 100).toLocaleString("en-US", {
+          maximumFractionDigits: 2,
+        })
+      : displayValue.toLocaleString("en-US", { maximumFractionDigits: 2 });
+
+  return formatted + postfix;
+}