casino-ui 0.1.0

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,210 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      className={cn(
+        "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        inset && "pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRight className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  container,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content> & {
+  container?: HTMLDivElement | null;
+}) {
+  return (
+    <DropdownMenuPrimitive.Portal container={container ?? undefined}>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 sm:min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      className={cn(
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        inset && "pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Check className="h-4 w-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Circle className="h-2 w-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      className={cn(
+        "px-2 py-1.5 text-sm font-semibold",
+        inset && "pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/src/env.d.ts

@@ -0,0 +1,6 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.css" {}

package/src/index.ts

@@ -0,0 +1,88 @@
+// Components
+export { Button, buttonVariants, type ButtonProps } from "./components/button";
+export {
+  default as Chip,
+  CHIP_PRESETS,
+  CHIP_DENOMINATIONS,
+  getChipDenominationForAmount,
+  type ChipDenomination,
+} from "./components/chip";
+export { ChipRack } from "./components/chip-rack";
+export { PokerCard, type Suit, type Rank } from "./components/poker-card";
+export { CardShoe } from "./components/card-shoe";
+export { default as CardTable } from "./components/card-table";
+export { default as CardScoreBadge } from "./components/card-score-badge";
+export { ResultBadge, type ResultType } from "./components/result-badge";
+export { Icon } from "./components/icon";
+export { GameFooter } from "./components/game-footer";
+export { default as GameInfoDialog } from "./components/game-info-dialog";
+export { default as SwitchTableDialog } from "./components/switch-table-dialog";
+export {
+  BetPanelRoot,
+  BetPanelInput,
+  BetPanelActions,
+  BetPanelChips,
+  BetPanelTimer,
+  BetPanelFoldingInfo,
+} from "./components/bet-panel";
+
+// Toast system
+export { CasinoToastContainer } from "./components/toast-container";
+export { toast } from "./components/toast-helpers";
+export type {
+  EphemeralVariant,
+  StatusVariant,
+  ToastAction,
+} from "./components/toast";
+
+// Utilities
+export { cn } from "./lib/utils";
+export { formatAmountDirect } from "./utils/format-amount";
+
+// Types
+export type { CoinInfo } from "./types";
+
+// UI primitives
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "./components/ui/dialog";
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+} from "./components/ui/drawer";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from "./components/ui/dropdown-menu";

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/stories/BetPanel.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  BetPanelRoot,
+  BetPanelInput,
+  BetPanelActions,
+  BetPanelChips,
+  BetPanelTimer,
+  BetPanelFoldingInfo,
+} from "../components/bet-panel";
+import { Button } from "../components/button";
+import Chip, { CHIP_DENOMINATIONS } from "../components/chip";
+
+const meta: Meta = {
+  title: "Components/BetPanel",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const FullBetPanel: Story = {
+  render: () => {
+    const [value, setValue] = useState("0");
+
+    return (
+      <div className="px-2">
+        <BetPanelRoot>
+          <div className="flex items-center gap-6 w-full">
+            <BetPanelInput
+              balance="100.00"
+              coinInfo={{ name: "SUI", symbol: "SUI", coinType: "sui/sui", image: "", decimal: 9, factor: 1 }}
+              value={value}
+              setValue={setValue}
+              setOriginalBetSize={() => {}}
+              getMaxBet={() => 100}
+              setError={() => {}}
+            />
+            <BetPanelChips>
+              {CHIP_DENOMINATIONS.map((denom) => (
+                <Chip
+                  key={denom}
+                  denomination={denom}
+                  chipClass="w-8 h-8 md:w-11 md:h-11"
+                  onClick={() => setValue((Number(value) + denom).toString())}
+                  isButton
+                />
+              ))}
+            </BetPanelChips>
+            <BetPanelActions>
+              <Button variant="tertiary">Undo</Button>
+              <Button variant="tertiary">Clear</Button>
+              <Button variant="primary" className="h-10">Deal Now</Button>
+            </BetPanelActions>
+          </div>
+        </BetPanelRoot>
+      </div>
+    );
+  },
+};
+
+export const Timer: Story = {
+  render: () => (
+    <div style={{ width: 400 }}>
+      <BetPanelTimer remainingTime={15} progress={75} isWarning={false} isActive />
+    </div>
+  ),
+};
+
+export const TimerWarning: Story = {
+  render: () => (
+    <div style={{ width: 400 }}>
+      <BetPanelTimer remainingTime={3} progress={15} isWarning isActive />
+    </div>
+  ),
+};
+
+export const FoldingInfo: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true);
+    return (
+      <div style={{ width: 400 }} className="bg-panel-bg rounded-xl p-4">
+        <Button variant="tertiary" onClick={() => setOpen(!open)} className="mb-2">
+          Toggle
+        </Button>
+        <BetPanelFoldingInfo open={open}>
+          <div className="flex items-center justify-center pb-2">
+            <span className="text-sm font-semibold text-white">Placing bet...</span>
+          </div>
+        </BetPanelFoldingInfo>
+      </div>
+    );
+  },
+};
+
+export const InputWithError: Story = {
+  render: () => {
+    const [value, setValue] = useState("999");
+    return (
+      <div style={{ width: 300 }}>
+        <BetPanelInput
+          balance="10.00"
+          coinInfo={{ name: "SUI", symbol: "SUI", coinType: "sui/sui", image: "", decimal: 9, factor: 1 }}
+          value={value}
+          setValue={setValue}
+          setOriginalBetSize={() => {}}
+          getMaxBet={() => 10}
+          error="Insufficient balance"
+          setError={() => {}}
+        />
+      </div>
+    );
+  },
+};

package/src/stories/Button.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../components/button";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "tertiary", "grey_pure"],
+    },
+    fullWidth: { control: "boolean" },
+    disabled: { control: "boolean" },
+    loading: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: { variant: "primary", children: "Deal Now" },
+};
+
+export const Secondary: Story = {
+  args: { variant: "secondary", children: "Skip" },
+};
+
+export const Tertiary: Story = {
+  args: { variant: "tertiary", children: "Undo" },
+};
+
+export const GreyPure: Story = {
+  args: { variant: "grey_pure", children: "Clear" },
+};
+
+export const Disabled: Story = {
+  args: { variant: "primary", children: "Deal Now", disabled: true },
+};
+
+export const FullWidth: Story = {
+  args: { variant: "primary", children: "Start Playing", fullWidth: true },
+  decorators: [(Story) => <div style={{ width: 300 }}><Story /></div>],
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Button variant="primary">Primary (Green)</Button>
+      <Button variant="secondary">Secondary (Blue)</Button>
+      <Button variant="tertiary">Tertiary (Grey)</Button>
+      <Button variant="grey_pure">Grey Pure</Button>
+    </div>
+  ),
+};

package/src/stories/CardScoreBadge.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CardScoreBadge from "../components/card-score-badge";
+
+const meta: Meta<typeof CardScoreBadge> = {
+  title: "Components/CardScoreBadge",
+  component: CardScoreBadge,
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["default", "win", "lose", "bust", "blackjack", "push", "even", "surrender"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CardScoreBadge>;
+
+export const Default: Story = {
+  args: { type: "default", children: "17" },
+  decorators: [(Story) => <div className="relative w-20 h-20"><Story /></div>],
+};
+
+export const AllTypes: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      {(["default", "win", "lose", "bust", "blackjack", "push", "even", "surrender"] as const).map((type) => (
+        <div key={type} className="relative w-16 h-16 flex flex-col items-center">
+          <CardScoreBadge type={type}>21</CardScoreBadge>
+          <span className="absolute top-2 text-xs text-text-secondary">{type}</span>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/stories/CardShoe.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CardShoe } from "../components/card-shoe";
+
+const meta: Meta<typeof CardShoe> = {
+  title: "Components/CardShoe",
+  component: CardShoe,
+};
+
+export default meta;
+type Story = StoryObj<typeof CardShoe>;
+
+export const Default: Story = {};

package/src/stories/Chip.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Chip, { CHIP_DENOMINATIONS, type ChipDenomination } from "../components/chip";
+
+const meta: Meta<typeof Chip> = {
+  title: "Components/Chip",
+  component: Chip,
+  argTypes: {
+    denomination: {
+      control: "select",
+      options: CHIP_DENOMINATIONS,
+    },
+    isButton: { control: "boolean" },
+    selected: { control: "boolean" },
+    showText: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {
+  args: { denomination: 100, isButton: true },
+};
+
+export const Selected: Story = {
+  args: { denomination: 25, isButton: true, selected: true },
+};
+
+export const WithAmount: Story = {
+  args: { amount: 42.5, isButton: false },
+};
+
+export const AllDenominations: Story = {
+  render: () => (
+    <div className="flex gap-2 items-end">
+      {CHIP_DENOMINATIONS.map((denom) => (
+        <Chip key={denom} denomination={denom} isButton showText />
+      ))}
+    </div>
+  ),
+};
+
+export const StaticChips: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      {CHIP_DENOMINATIONS.map((denom) => (
+        <Chip key={denom} denomination={denom} showText />
+      ))}
+    </div>
+  ),
+};

package/src/stories/ChipRack.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ChipRack } from "../components/chip-rack";
+
+const meta: Meta<typeof ChipRack> = {
+  title: "Components/ChipRack",
+  component: ChipRack,
+};
+
+export default meta;
+type Story = StoryObj<typeof ChipRack>;
+
+export const Default: Story = {};

package/src/stories/Dialog.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
+} from "../components/ui/dialog";
+import { Button } from "../components/button";
+
+const meta: Meta = {
+  title: "Primitives/Dialog",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button variant="primary" onClick={() => setOpen(true)}>Open Dialog</Button>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent className="w-100 rounded-xl bg-surface-400">
+            <DialogHeader className="flex flex-col gap-2 p-6">
+              <DialogTitle className="text-2xl font-bold">Dialog Title</DialogTitle>
+              <DialogDescription>This is a dialog description.</DialogDescription>
+            </DialogHeader>
+            <div className="px-6 py-4">
+              <p className="text-sm text-text-secondary">Dialog body content goes here.</p>
+            </div>
+            <DialogFooter className="px-6 pb-6">
+              <Button variant="tertiary" onClick={() => setOpen(false)}>Cancel</Button>
+              <Button variant="primary" onClick={() => setOpen(false)}>Confirm</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  },
+};

package/src/stories/GameFooter.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { GameFooter } from "../components/game-footer";
+import { CasinoToastContainer } from "../components/toast-container";
+
+const meta: Meta<typeof GameFooter> = {
+  title: "Components/GameFooter",
+  component: GameFooter,
+  decorators: [
+    (Story) => (
+      <div style={{ width: 900 }}>
+        <Story />
+        <CasinoToastContainer />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof GameFooter>;
+
+export const Default: Story = {
+  args: {
+    tableId: "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
+    shareBaseUrl: "https://example.com/blackjack",
+    badges: {
+      houseEdge: "0.5",
+      minBet: "0.1",
+      coinInfo: { name: "SUI", symbol: "SUI", coinType: "sui/sui", image: "", decimal: 9, factor: 1 },
+    },
+    tabsContents: {
+      table: <div className="text-white p-4">Table info content</div>,
+      howToPlay: <div className="text-white p-4">How to play content</div>,
+      balance: <div className="text-white p-4">Balance content</div>,
+    },
+    volumeSlider: {
+      globalVolume: 0.7,
+      setGlobalVolume: () => {},
+      setPrevVolume: () => {},
+    },
+    onToggleMute: () => {},
+    onJoin: () => {},
+    gameTitle: "Blackjack",
+    gameDescription: "Classic Blackjack. Play solo or join a multiplayer table.",
+  },
+};