casino-ui 0.1.0

package/README.md

@@ -0,0 +1,213 @@
+# casino-ui
+
+A reusable React component library for casino game frontends. Built with React 19, Tailwind CSS v4, and Radix UI primitives.
+
+## Installation
+
+### 1. Add the dependency
+
+#### Add it as npm package:
+```bash
+pnpm add casino-ui
+```
+
+#### Add it locally:
+In your project's `package.json`, add `casino-ui` using a relative file path:
+
+```json
+{
+  "dependencies": {
+    "casino-ui": "file:../../../packages/casino-ui"
+  }
+}
+```
+
+Adjust the relative path based on your project's location relative to `packages/casino-ui`.
+
+Then install:
+
+```bash
+pnpm install
+```
+
+### 2. Install peer dependencies [If you don't have it already]
+
+`casino-ui` requires the following peer dependencies:
+
+```bash
+pnpm add react react-dom tailwindcss
+```
+
+| Peer Dependency | Version |
+|---|---|
+| `react` | >= 19 |
+| `react-dom` | >= 19 |
+| `tailwindcss` | >= 4 |
+
+### 3. Configure Tailwind CSS
+
+Add the following `@source` directive to your project's main CSS file (e.g., `App.css` or `index.css`) so Tailwind can scan the library's compiled output for utility classes:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/casino-ui/dist";
+```
+
+This is **required** for Tailwind utility classes used by casino-ui components to be generated in your project's CSS output.
+
+## Usage
+
+### Importing components
+
+All components are exported from the package root:
+
+```tsx
+import {
+  Button,
+  Chip,
+  ChipRack,
+  PokerCard,
+  CardShoe,
+  CardTable,
+  CardScoreBadge,
+  ResultBadge,
+  Icon,
+  GameFooter,
+  GameInfoDialog,
+  SwitchTableDialog,
+  BetPanelRoot,
+  BetPanelInput,
+  BetPanelActions,
+  BetPanelChips,
+  BetPanelTimer,
+  BetPanelFoldingInfo,
+} from "casino-ui";
+```
+
+### Toast system
+
+```tsx
+import { CasinoToastContainer, toast } from "casino-ui";
+
+// Add the container to your app root
+function App() {
+  return (
+    <>
+      <YourApp />
+      <CasinoToastContainer position="bottom-left" />
+    </>
+  );
+}
+
+// Show toasts anywhere
+toast.info("Card dealt");
+toast.success("You win!");
+toast.status.error("Insufficient balance");
+toast.action({
+  title: "Switch Table?",
+  message: "You will leave the current game.",
+  actions: [
+    { label: "Cancel", onClick: () => {} },
+    { label: "Confirm", onClick: handleSwitch, highlight: true },
+  ],
+});
+```
+
+### UI Primitives
+
+Dialog, Drawer, and DropdownMenu primitives (built on Radix UI / Vaul) are also exported:
+
+```tsx
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Drawer,
+  DrawerContent,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "casino-ui";
+```
+
+### Utilities
+
+```tsx
+import { cn, formatAmountDirect } from "casino-ui";
+import type { CoinInfo, ChipDenomination } from "casino-ui";
+```
+
+## Components
+
+| Component | Description |
+|---|---|
+| `Button` | Action button with `primary`, `secondary`, `tertiary`, `grey_pure` variants |
+| `Chip` | Casino chip with denomination colors, hover/selected effects |
+| `ChipRack` | Stacked chip display tray |
+| `PokerCard` | Playing card (front/back, all suits & ranks, multiple sizes) |
+| `CardShoe` | Card shoe with stacked backs |
+| `CardTable` | SVG blackjack table surface |
+| `CardScoreBadge` | Score overlay badge for card hands |
+| `ResultBadge` | Win/Lose/Bust/Push/Blackjack result display |
+| `Icon` | SVG icon system (settings, share, check, sound, etc.) |
+| `GameFooter` | Footer bar with settings, game info, invite friends |
+| `GameInfoDialog` | Responsive dialog/drawer for game rules & info |
+| `SwitchTableDialog` | Dialog for switching multiplayer tables |
+| `BetPanel*` | Composable betting panel (root, input, chips, actions, timer) |
+| `CasinoToastContainer` | Toast notification container |
+
+## Build & Deploy
+
+### Build the library
+
+```bash
+cd packages/casino-ui
+pnpm install
+pnpm build
+```
+
+This produces:
+- `dist/*.js` + `dist/*.d.ts` — compiled TypeScript with declarations
+- `dist/assets/` — SVG assets (card-back, card-shoe-overlay)
+- `dist/styles/` — CSS stylesheets
+
+### Development
+
+Watch mode for TypeScript compilation:
+
+```bash
+pnpm dev
+```
+
+### Storybook
+
+Launch the component explorer:
+
+```bash
+pnpm storybook
+```
+
+Build a static Storybook site:
+
+```bash
+pnpm build-storybook
+```
+
+### Project structure
+
+```
+packages/casino-ui/
+  src/
+    index.ts              # Barrel exports
+    types.ts              # Shared types (CoinInfo)
+    lib/utils.ts          # cn() utility
+    utils/format-amount.ts
+    components/           # All React components
+      ui/                 # Radix/Vaul primitives (dialog, drawer, dropdown)
+    styles/               # CSS (design tokens, component styles, toast)
+    assets/               # SVG assets
+    stories/              # Storybook stories
+  dist/                   # Build output
+  .storybook/             # Storybook configuration
+```

package/dist/assets/assets/card-back.svg

@@ -0,0 +1,43 @@
+<svg width="40" height="55" viewBox="0 0 40 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.4902 20.2168C20.4455 23.7657 22.4958 26.5392 25.9019 27.537C21.8838 28.5347 18.1323 31.3082 16.0003 34.8571C16.045 31.3082 13.9947 28.5347 10.5886 27.537C14.6067 26.5392 18.3582 23.7657 20.4902 20.2168Z" fill="#C7FE51"/>
+<g filter="url(#filter0_dddddd_5859_22826)">
+<path d="M28.6359 27.4112C24.9901 28.5573 21.6315 31.0406 19.4665 34.1899C19.3018 31.091 17.4995 28.6526 14.5849 27.5868C18.2308 26.4403 21.5894 23.9577 23.7542 20.808C23.9185 23.9075 25.7209 26.3451 28.6359 27.4112Z" stroke="#C7FE51" stroke-width="0.478885"/>
+</g>
+<path d="M20.4902 20.2168C20.4455 23.7657 22.4958 26.5392 25.9019 27.537C21.8838 28.5347 18.1323 31.3082 16.0003 34.8571C16.045 31.3082 13.9947 28.5347 10.5886 27.537C14.6067 26.5392 18.3582 23.7657 20.4902 20.2168Z" fill="#C7FE51"/>
+<defs>
+<filter id="filter0_dddddd_5859_22826" x="-6.2612" y="0.000518799" width="55.7411" height="54.999" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="0.238717"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5859_22826"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="0.477434"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_5859_22826" result="effect2_dropShadow_5859_22826"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.67102"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_5859_22826" result="effect3_dropShadow_5859_22826"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="3.34204"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect3_dropShadow_5859_22826" result="effect4_dropShadow_5859_22826"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="5.7292"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect4_dropShadow_5859_22826" result="effect5_dropShadow_5859_22826"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="10.0261"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect5_dropShadow_5859_22826" result="effect6_dropShadow_5859_22826"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect6_dropShadow_5859_22826" result="shape"/>
+</filter>
+</defs>
+</svg>

package/dist/assets/assets/card-shoe-overlay.svg

@@ -0,0 +1,14 @@
+<svg width="49.776" height="88" viewBox="1.195 0 49.776 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path filter="url(#blur)" d="M50.9707 77.7227C50.9707 82.3454 47.2233 86.0937 42.6006 86.0938H41.1709C40.5576 78.0671 33.8181 71.7442 25.5947 71.7441C17.3713 71.7441 10.6319 78.067 10.0186 86.0938H9.56543C4.94266 86.0938 1.19531 82.3454 1.19531 77.7227L1.19531 1.19531L50.9707 1.19531V77.7227Z" fill="url(#paint0_linear_6370_56915)" fill-opacity="0.8"/>
+<path d="M42.6006 86.0938V87.2895H42.6006L42.6006 86.0938ZM41.1709 86.0938L39.9786 86.1849L40.063 87.2895H41.1709V86.0938ZM25.5947 71.7441L25.5947 70.5484H25.5947V71.7441ZM10.0186 86.0938V87.2895H11.1264L11.2108 86.1849L10.0186 86.0938ZM1.19531 1.19531V-0.000441313L-0.000441313 -0.000441313V1.19531L1.19531 1.19531ZM50.9707 1.19531H52.1665V-0.000441313H50.9707V1.19531ZM50.9707 77.7227H49.7749C49.7749 81.6852 46.5627 84.8979 42.6006 84.898L42.6006 86.0938L42.6006 87.2895C47.8838 87.2894 52.1665 83.0056 52.1665 77.7227H50.9707ZM42.6006 86.0938V84.898H41.1709V86.0938V87.2895H42.6006V86.0938ZM41.1709 86.0938L42.3632 86.0026C41.7022 77.3526 34.443 70.5484 25.5947 70.5484L25.5947 71.7441L25.5947 72.9399C33.1932 72.9399 39.4129 78.7816 39.9786 86.1849L41.1709 86.0938ZM25.5947 71.7441V70.5484C16.7464 70.5484 9.48723 77.3525 8.82628 86.0026L10.0186 86.0938L11.2108 86.1849C11.7765 78.7815 17.9962 72.9399 25.5947 72.9399V71.7441ZM10.0186 86.0938V84.898H9.56543V86.0938V87.2895H10.0186V86.0938ZM9.56543 86.0938V84.898C5.60323 84.898 2.39107 81.6852 2.39107 77.7227H1.19531H-0.000441313C-0.000441313 83.0057 4.28208 87.2895 9.56543 87.2895V86.0938ZM1.19531 77.7227H2.39107L2.39107 1.19531L1.19531 1.19531L-0.000441313 1.19531L-0.000441313 77.7227H1.19531ZM1.19531 1.19531V2.39107L50.9707 2.39107V1.19531V-0.000441313L1.19531 -0.000441313V1.19531ZM50.9707 1.19531L49.7749 1.19531V77.7227H50.9707H52.1665V1.19531H50.9707Z" fill="url(#paint1_linear_6370_56915)"/>
+<defs>
+<linearGradient id="paint0_linear_6370_56915" x1="26.083" y1="1.19531" x2="26.083" y2="86.0938" gradientUnits="userSpaceOnUse">
+<stop stop-color="#141414"/>
+<stop offset="1" stop-color="#2A2A2A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6370_56915" x1="26.083" y1="1.19531" x2="26.083" y2="86.0938" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1A1A1A"/>
+<stop offset="1" stop-color="#4E4E4E"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/assets/card-back.svg

@@ -0,0 +1,43 @@
+<svg width="40" height="55" viewBox="0 0 40 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.4902 20.2168C20.4455 23.7657 22.4958 26.5392 25.9019 27.537C21.8838 28.5347 18.1323 31.3082 16.0003 34.8571C16.045 31.3082 13.9947 28.5347 10.5886 27.537C14.6067 26.5392 18.3582 23.7657 20.4902 20.2168Z" fill="#C7FE51"/>
+<g filter="url(#filter0_dddddd_5859_22826)">
+<path d="M28.6359 27.4112C24.9901 28.5573 21.6315 31.0406 19.4665 34.1899C19.3018 31.091 17.4995 28.6526 14.5849 27.5868C18.2308 26.4403 21.5894 23.9577 23.7542 20.808C23.9185 23.9075 25.7209 26.3451 28.6359 27.4112Z" stroke="#C7FE51" stroke-width="0.478885"/>
+</g>
+<path d="M20.4902 20.2168C20.4455 23.7657 22.4958 26.5392 25.9019 27.537C21.8838 28.5347 18.1323 31.3082 16.0003 34.8571C16.045 31.3082 13.9947 28.5347 10.5886 27.537C14.6067 26.5392 18.3582 23.7657 20.4902 20.2168Z" fill="#C7FE51"/>
+<defs>
+<filter id="filter0_dddddd_5859_22826" x="-6.2612" y="0.000518799" width="55.7411" height="54.999" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="0.238717"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5859_22826"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="0.477434"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_5859_22826" result="effect2_dropShadow_5859_22826"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.67102"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_5859_22826" result="effect3_dropShadow_5859_22826"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="3.34204"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect3_dropShadow_5859_22826" result="effect4_dropShadow_5859_22826"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="5.7292"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect4_dropShadow_5859_22826" result="effect5_dropShadow_5859_22826"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="10.0261"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect5_dropShadow_5859_22826" result="effect6_dropShadow_5859_22826"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect6_dropShadow_5859_22826" result="shape"/>
+</filter>
+</defs>
+</svg>

package/dist/assets/card-shoe-overlay.svg

@@ -0,0 +1,14 @@
+<svg width="49.776" height="88" viewBox="1.195 0 49.776 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path filter="url(#blur)" d="M50.9707 77.7227C50.9707 82.3454 47.2233 86.0937 42.6006 86.0938H41.1709C40.5576 78.0671 33.8181 71.7442 25.5947 71.7441C17.3713 71.7441 10.6319 78.067 10.0186 86.0938H9.56543C4.94266 86.0938 1.19531 82.3454 1.19531 77.7227L1.19531 1.19531L50.9707 1.19531V77.7227Z" fill="url(#paint0_linear_6370_56915)" fill-opacity="0.8"/>
+<path d="M42.6006 86.0938V87.2895H42.6006L42.6006 86.0938ZM41.1709 86.0938L39.9786 86.1849L40.063 87.2895H41.1709V86.0938ZM25.5947 71.7441L25.5947 70.5484H25.5947V71.7441ZM10.0186 86.0938V87.2895H11.1264L11.2108 86.1849L10.0186 86.0938ZM1.19531 1.19531V-0.000441313L-0.000441313 -0.000441313V1.19531L1.19531 1.19531ZM50.9707 1.19531H52.1665V-0.000441313H50.9707V1.19531ZM50.9707 77.7227H49.7749C49.7749 81.6852 46.5627 84.8979 42.6006 84.898L42.6006 86.0938L42.6006 87.2895C47.8838 87.2894 52.1665 83.0056 52.1665 77.7227H50.9707ZM42.6006 86.0938V84.898H41.1709V86.0938V87.2895H42.6006V86.0938ZM41.1709 86.0938L42.3632 86.0026C41.7022 77.3526 34.443 70.5484 25.5947 70.5484L25.5947 71.7441L25.5947 72.9399C33.1932 72.9399 39.4129 78.7816 39.9786 86.1849L41.1709 86.0938ZM25.5947 71.7441V70.5484C16.7464 70.5484 9.48723 77.3525 8.82628 86.0026L10.0186 86.0938L11.2108 86.1849C11.7765 78.7815 17.9962 72.9399 25.5947 72.9399V71.7441ZM10.0186 86.0938V84.898H9.56543V86.0938V87.2895H10.0186V86.0938ZM9.56543 86.0938V84.898C5.60323 84.898 2.39107 81.6852 2.39107 77.7227H1.19531H-0.000441313C-0.000441313 83.0057 4.28208 87.2895 9.56543 87.2895V86.0938ZM1.19531 77.7227H2.39107L2.39107 1.19531L1.19531 1.19531L-0.000441313 1.19531L-0.000441313 77.7227H1.19531ZM1.19531 1.19531V2.39107L50.9707 2.39107V1.19531V-0.000441313L1.19531 -0.000441313V1.19531ZM50.9707 1.19531L49.7749 1.19531V77.7227H50.9707H52.1665V1.19531H50.9707Z" fill="url(#paint1_linear_6370_56915)"/>
+<defs>
+<linearGradient id="paint0_linear_6370_56915" x1="26.083" y1="1.19531" x2="26.083" y2="86.0938" gradientUnits="userSpaceOnUse">
+<stop stop-color="#141414"/>
+<stop offset="1" stop-color="#2A2A2A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6370_56915" x1="26.083" y1="1.19531" x2="26.083" y2="86.0938" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1A1A1A"/>
+<stop offset="1" stop-color="#4E4E4E"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/casino-ui.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.-top-\[3px\]{top:-3px}.top-1\/2{top:50%}.top-\[2\%\]{top:2%}.top-\[8\%\]{top:8%}.top-\[50\%\]{top:50%}.right-\[8\%\]{right:8%}.bottom-\[4px\]{bottom:4px}.bottom-\[6\%\]{bottom:6%}.left-1\/2{left:50%}.left-\[-3px\]{left:-3px}.left-\[3\%\]{left:3%}.left-\[10\%\]{left:10%}.left-\[50\%\]{left:50%}.z-1{z-index:1}.z-2{z-index:2}.z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.order-1{order:1}.order-2{order:2}.container{width:100%}.mx-auto{margin-inline:auto}.mt-\[5px\]{margin-top:5px}.mt-\[10px\]{margin-top:10px}.mt-\[15px\]{margin-top:15px}.mt-auto{margin-top:auto}.mt-px{margin-top:1px}.ml-auto{margin-left:auto}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.inline-grid{display:inline-grid}.table{display:table}.aspect-square{aspect-ratio:1}.size-full{width:100%;height:100%}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.max-h-\[90vh\]\!{max-height:90vh!important}.w-\[35\%\]{width:35%}.w-\[37\.5\%\]{width:37.5%}.w-\[52\.5\%\]{width:52.5%}.w-\[90\%\]{width:90%}.w-\[220px\]{width:220px}.w-\[330px\]{width:330px}.w-\[354px\]{width:354px}.w-full{width:100%}.max-w-\[calc\(100\%-2rem\)\]{max-width:calc(100% - 2rem)}.min-w-\[8rem\]{min-width:8rem}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.grid-rows-\[0fr\]{grid-template-rows:0fr}.grid-rows-\[1fr\]{grid-template-rows:1fr}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-clip{overflow:clip}.overflow-hidden{overflow:hidden}.overflow-x-clip{overflow-x:clip}.overflow-y-auto{overflow-y:auto}.rounded-\[4\.62px\]{border-radius:4.62px}.rounded-\[4px\]{border-radius:4px}.rounded-\[50\%\]{border-radius:50%}.rounded-full{border-radius:3.40282e38px}.rounded-t-\[3\.6px\]{border-top-left-radius:3.6px;border-top-right-radius:3.6px}.rounded-b-\[9\.6px\]{border-bottom-right-radius:9.6px;border-bottom-left-radius:9.6px}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-3{border-style:var(--tw-border-style);border-width:3px}.border-\[2\.4px\]{border-style:var(--tw-border-style);border-width:2.4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-\[5px\]{border-top-style:var(--tw-border-style);border-top-width:5px}.border-none{--tw-border-style:none;border-style:none}.border-\(--toast-border\,rgba\(255\,255\,255\,0\.04\)\){border-color:var(--toast-border,#ffffff0a)}.border-\[\#8A8A8A\]{border-color:#8a8a8a}.border-\[\#8BB339\]{border-color:#8bb339}.border-\[\#7454F0\]{border-color:#7454f0}.border-\[\#DB375E\]{border-color:#db375e}.border-\[\#FF5C05\]{border-color:#ff5c05}.border-accent-error{border-color:#af1b45}.border-button-grey{border-color:#3a3a3a}.border-card-border{border-color:#bfbfbf}.border-card-shoe-border{border-color:#4e4e4e}.border-surface-300{border-color:#333}.border-surface-450{border-color:#1f1f1f}.bg-\(--toast-bg\,\#1F1F1F\){background-color:var(--toast-bg,#1f1f1f)}.bg-\[\#8A8A8A\]{background-color:#8a8a8a}.bg-\[\#8BB339\]{background-color:#8bb339}.bg-\[\#7454F0\]\/12{background-color:oklab(56.8862% .0628266 -.213063/.12)}.bg-\[\#DB375E\]{background-color:#db375e}.bg-\[\#FF5C05\]{background-color:#ff5c05}.bg-\[rgba\(138\,138\,138\,0\.08\)\]{background-color:#8a8a8a14}.bg-\[rgba\(199\,254\,81\,0\.08\)\]{background-color:#c7fe5114}.bg-\[rgba\(219\,55\,94\,0\.08\)\]{background-color:#db375e14}.bg-\[rgba\(255\,92\,5\,0\.08\)\]{background-color:#ff5c0514}.bg-accent-error{background-color:#af1b45}.bg-background{background-color:var(--background)}.bg-card-back-bg{background-color:#f24545}.bg-card-border{background-color:#bfbfbf}.bg-card-shoe-bg{background-color:#2a2a2a}.bg-card-shoe-bg\/60{background-color:oklab(28.5017% -4.47035e-8 1.49012e-8/.6)}.bg-panel-bg{background-color:#252525}.bg-surface-300{background-color:#333}.bg-surface-400{background-color:#252525}.bg-surface-450{background-color:#1f1f1f}.bg-surface-500{background-color:#1a1a1a}.bg-surface-600{background-color:#141414}.bg-surface-650{background-color:#0f0f0f}.bg-transparent{background-color:#0000}.bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-r{--tw-gradient-position:to right in oklab}}.bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.from-accent-success{--tw-gradient-from:#00a95d;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-timer-end{--tw-gradient-to:#00d474;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.fill-current{fill:currentColor}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-\[4\.566px\]{padding:4.566px}.text-center{text-align:center}.text-left{text-align:left}.text-\[8px\]{font-size:8px}.text-\[10px\]{font-size:10px}.leading-\[16\.8px\]{--tw-leading:16.8px;line-height:16.8px}.leading-\[19\.2px\]{--tw-leading:19.2px;line-height:19.2px}.leading-none{--tw-leading:1;line-height:1}.-tracking-\[1\.8px\]{--tw-tracking:calc(1.8px * -1);letter-spacing:-1.8px}.tracking-\[-0\.32px\]{--tw-tracking:-.32px;letter-spacing:-.32px}.text-nowrap{text-wrap:nowrap}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-\(--toast-text-primary\,\#FFFFFF\){color:var(--toast-text-primary,#fff)}.text-\(--toast-text-secondary\,\#BFBFBF\){color:var(--toast-text-secondary,#bfbfbf)}.text-\[\#8A8A8A\]{color:#8a8a8a}.text-\[\#8BB339\]{color:#8bb339}.text-\[\#7454F0\]{color:#7454f0}.text-\[\#BFBFBF\]{color:#bfbfbf}.text-\[\#DB375E\]{color:#db375e}.text-\[\#FF5C05\]{color:#ff5c05}.text-accent-success{color:#00a95d}.text-brand{color:#c7fe51}.text-card-suit-black{color:#1a1a1a}.text-card-suit-red{color:#f24545}.text-foreground{color:var(--foreground)}.text-text-secondary{color:#bfbfbf}.text-text-secondary\!{color:#bfbfbf!important}.text-text-tertiary{color:#8c8c8c}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-100{opacity:1}.shadow-\(--toast-shadow\,0px_6px_15px_-3px_rgba\(0\,0\,0\,0\.15\)\){--tw-shadow:var(--toast-shadow,0px 6px 15px -3px #00000026);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_0_5px_2px_rgba\(255\,92\,5\,0\.6\)\]{--tw-shadow:0 0 5px 2px var(--tw-shadow-color,#ff5c0599);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0px_2\.392px_0px_0px_\#333\]{--tw-shadow:0px 2.392px 0px 0px var(--tw-shadow-color,#333);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0px_2px_0px_0px_\#122741\]{--tw-shadow:0px 2px 0px 0px var(--tw-shadow-color,#122741);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0px_6px_22px_0px_rgba\(0\,0\,0\,0\.3\)\]{--tw-shadow:0px 6px 22px 0px var(--tw-shadow-color,#0000004d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[inset_0px_1px_2px_0px_rgba\(255\,255\,255\,0\.15\)\]{--tw-shadow:inset 0px 1px 2px 0px var(--tw-shadow-color,#ffffff26);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-\[3px\]{--tw-backdrop-blur:blur(3px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-\[grid-template-rows\]{transition-property:grid-template-rows;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-1000{--tw-duration:1s;transition-duration:1s}.ease-linear{--tw-ease:linear;transition-timing-function:linear}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\[grid-area\:1\/1\]{grid-area:1/1}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.group-active\:opacity-100:is(:where(.group):active *){opacity:1}.group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center:is(:where(.group\/drawer-content)[data-vaul-drawer-direction=bottom] *),.group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center:is(:where(.group\/drawer-content)[data-vaul-drawer-direction=top] *){text-align:center}.placeholder\:text-text-secondary::placeholder{color:#bfbfbf}@media (hover:hover){.hover\:bg-action-hover:hover{background-color:#444}.hover\:bg-surface-300:hover{background-color:#333}.hover\:opacity-100:hover{opacity:1}}.focus\:border-surface-200:focus{border-color:#4d4d4d}.active\:bg-action-active:active{background-color:#2a2a2a}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:calc(2*var(--spacing)*-1)}.data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:calc(2*var(--spacing))}.data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:calc(2*var(--spacing))}.data-\[state\=active\]\:bg-surface-300[data-state=active]{background-color:#333}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction=bottom]{max-height:80vh}.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction=bottom]{border-top-style:var(--tw-border-style);border-top-width:1px}.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction=left]{width:75%}.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction=left]{border-right-style:var(--tw-border-style);border-right-width:1px}.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction=right]{width:75%}.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction=right]{border-left-style:var(--tw-border-style);border-left-width:1px}.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction=top]{max-height:80vh}.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction=top]{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root,:host{--color-accent-success:#00a95d;--color-surface-250:#404040;--color-button-grey:#3a3a3a;--color-btn-green:#b5e74a;--color-btn-green-light:#c7fe51;--color-btn-blue:#3fc1ff;--color-btn-blue-light:#63d0ff}@layer components{.chip-body{position:relative}.chip-body:before{content:"";border-radius:inherit;background:repeating-conic-gradient(from 348.75deg,#fff 0deg 22.5deg,#0000 22.5deg 45deg);position:absolute;inset:0}[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}[data-slot=chip][data-denomination="1"]{--chip-color:#999;--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}button[data-slot=chip]:before{content:"";width:calc(var(--chip-outer) + 10px);height:calc(var(--chip-outer) + 6px);pointer-events:none;opacity:0;background:radial-gradient(#ffffff59 0%,#ffffff26 40%,#fff0 70%);border-radius:50%;transition:opacity .15s;position:absolute;top:0;left:50%;transform:translate(-50%)}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)}.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:inset 0 4px 1px #fff6}.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 #c7f35133,inset 0 3px 1px #ffffff40}.blue-action-button:active{background-image:radial-gradient(97.07% 95.3% at 48.09% 47.12%,#32aeea 0%,#4fc0f2 100%);border-color:#2ca1dc;box-shadow:inset 0 2px 2px #00000040}.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:inset 0 4px 1px #fff6}.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 #c7f35133,inset 0 3px 1px #ffffff40}.green-action-button:active{background-image:radial-gradient(97.07% 95.3% at 48.09% 47.12%,#a9d53f 0%,#bee84f 100%);border-color:#a9d53f;box-shadow:inset 0 2px 2px #00000040}.grey-action-button{border-color:var(--color-button-grey);background-image:radial-gradient(97.07% 95.3% at 48.09% 47.12%,#3a3a3a 0%,#2e2e2e 100%);position:relative;box-shadow:inset 0 4px 2px #ffffff0d}.grey-action-button:hover{background-image:radial-gradient(97.07% 95.3% at 48.09% 47.12%,#464646 0%,#383838 100%);border-color:#464646;box-shadow:0 0 8px #ffffff08,inset 0 3px 2px #ffffff08}.grey-action-button:active{background-image:radial-gradient(97.07% 95.3% at 48.09% 47.12%,#2e2e2e 0%,#262626 100%);border-color:#2e2e2e;box-shadow:inset 0 1px 3px #00000040}}@layer utilities{.hide-scrollbar::-webkit-scrollbar{display:none}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}

package/dist/components/bet-panel.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { CoinInfo } from "../types";
+interface BetPanelRootProps extends React.ComponentProps<"div"> {
+    children: React.ReactNode;
+}
+declare function BetPanelRoot({ className, children, ...props }: BetPanelRootProps): import("react/jsx-runtime").JSX.Element;
+interface BetPanelFoldingInfoProps extends React.ComponentProps<"div"> {
+    open: boolean;
+    children: React.ReactNode;
+}
+declare function BetPanelFoldingInfo({ className, open, children, ...props }: BetPanelFoldingInfoProps): import("react/jsx-runtime").JSX.Element;
+interface BetPanelInputProps extends React.ComponentProps<"div"> {
+    label?: string;
+    balance?: string;
+    coinInfo?: CoinInfo;
+    value?: string;
+    setValue: React.Dispatch<React.SetStateAction<string>>;
+    setOriginalBetSize: (size: number | ((prev: number) => number)) => void;
+    getMaxBet: () => number;
+    error?: string;
+    setError: (error?: string) => void;
+    disabled?: boolean;
+}
+declare function BetPanelInput({ className, label, balance, coinInfo, value, setValue, getMaxBet, setOriginalBetSize, error, setError, disabled, ...props }: BetPanelInputProps): import("react/jsx-runtime").JSX.Element;
+interface BetPanelChipsProps extends React.ComponentProps<"div"> {
+    disabled?: boolean;
+}
+declare function BetPanelChips({ className, disabled, ...props }: BetPanelChipsProps): import("react/jsx-runtime").JSX.Element;
+interface BetPanelActionsProps extends React.ComponentProps<"div"> {
+    disabled?: boolean;
+}
+declare function BetPanelActions({ className, disabled, ...props }: BetPanelActionsProps): import("react/jsx-runtime").JSX.Element;
+interface BetPanelTimerProps {
+    remainingTime: number;
+    progress: number;
+    isWarning: boolean;
+    isActive: boolean;
+}
+declare function BetPanelTimer({ remainingTime, progress, isWarning, isActive, }: BetPanelTimerProps): import("react/jsx-runtime").JSX.Element | null;
+export { BetPanelTimer, BetPanelInput, BetPanelActions, BetPanelChips, BetPanelRoot, BetPanelFoldingInfo, };
+//# sourceMappingURL=bet-panel.d.ts.map

package/dist/components/bet-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bet-panel.d.ts","sourceRoot":"","sources":["../../src/components/bet-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKzC,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC7D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAazE;AAED,UAAU,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACpE,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAY1B;AAED,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACvD,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,KAAK,IAAI,CAAC;IACxE,SAAS,EAAE,MAAM,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,KAAiB,EACjB,OAAO,EACP,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAoGpB;AAED,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAY3E;AAED,UAAU,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAYtB;AAMD,UAAU,kBAAkB;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,iBAAS,aAAa,CAAC,EACrB,aAAa,EACb,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,kBAAkB,kDA2BpB;AAMD,OAAO,EACL,aAAa,EACb,aAAa,EACb,eAAe,EACf,aAAa,EACb,YAAY,EACZ,mBAAmB,GACpB,CAAC"}

package/dist/components/bet-panel.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+function BetPanelRoot({ className, children, ...props }) {
+    return (_jsx("div", { "data-slot": "bet-panel", className: cn("flex flex-col justify-end items-center rounded-xl bg-panel-bg p-3 sm:px-5 sm:py-4 overflow-x-clip", className), ...props, children: children }));
+}
+function BetPanelFoldingInfo({ className, open, children, ...props }) {
+    return (_jsx("div", { className: cn("w-full grid duration-300 ease-in-out", open ? "grid-rows-[1fr]" : "grid-rows-[0fr]", className), children: _jsx("div", { className: "overflow-hidden", children: children }) }));
+}
+function BetPanelInput({ className, label = "Balance", balance, coinInfo, value, setValue, getMaxBet, setOriginalBetSize, error, setError, disabled, ...props }) {
+    const isUSD = coinInfo?.coinType?.toLowerCase().includes("usd") ?? false;
+    const regex = /^[0-9.]+$/;
+    return (_jsxs("div", { "data-slot": "bet-panel-input", className: cn("relative flex flex-1 sm:flex-none sm:w-[234px] shrink-0 flex-col gap-1", disabled && "opacity-60 pointer-events-none", className), ...props, children: [_jsxs("div", { className: "hidden sm:flex items-center justify-between leading-4.5 h-4.5 text-sm font-semibold text-[#BFBFBF]", children: [_jsx("span", { children: label }), balance != null && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: balance }), _jsx("span", { children: coinInfo?.symbol })] }))] }), _jsxs("div", { className: "relative flex flex-col items-center", children: [_jsxs("div", { className: cn("flex w-full items-center rounded-lg sm:rounded-xl border bg-surface-600 h-10 sm:h-12 px-3 py-2 transition-colors", error ? "border-accent-error" : "border-button-grey"), children: [_jsxs("div", { className: "flex flex-1 items-center gap-1", children: [isUSD ? (_jsx("span", { children: "$" })) : coinInfo?.image ? (typeof coinInfo.image === "string" ? (_jsx("img", { src: coinInfo.image, alt: coinInfo.symbol, className: "size-4 object-contain" })) : (_jsx("div", { className: "min-w-4 h-4 w-4 object-contain", children: coinInfo.image }))) : null, _jsx("input", { type: "text", inputMode: "decimal", value: value ?? "", onChange: (e) => {
+                                            if (regex.test(e.target.value) ||
+                                                e.target.value === "" ||
+                                                e.target.value === ".") {
+                                                setValue?.(e.target.value);
+                                            }
+                                        }, className: "w-full min-w-0 bg-transparent text-base font-semibold text-white tracking-tight outline-none placeholder:text-white/30", placeholder: "0.00" })] }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [_jsx("button", { type: "button", onClick: () => setValue((Number(value) * 2).toString()), className: "hidden sm:block rounded-lg bg-surface-300 px-2.5 py-2 text-xs font-semibold text-white transition-colors hover:bg-action-hover active:bg-action-active", children: "2x" }), _jsx("button", { type: "button", onClick: () => setValue(getMaxBet().toString()), className: "rounded-md sm:rounded-lg bg-surface-300 px-2 sm:px-2.5 py-1 sm:py-2 text-xs font-semibold text-white transition-colors hover:bg-action-hover active:bg-action-active", children: "MAX" })] })] }), _jsx("div", { className: cn("absolute top-10 sm:top-12 left-1/2 -translate-x-1/2 grid w-full transition-[grid-template-rows] duration-300 ease-out z-30", error ? "grid-rows-[1fr]" : "grid-rows-[0fr]"), children: _jsx("div", { className: "overflow-hidden", children: _jsx("div", { className: "mx-auto flex w-[90%] sm:w-[210px] items-center justify-center rounded-b-xl bg-accent-error py-1 px-2.5 sm:py-2", children: _jsx("span", { className: "text-center text-xs font-semibold text-white", children: error }) }) }) })] })] }));
+}
+function BetPanelChips({ className, disabled, ...props }) {
+    return (_jsx("div", { "data-slot": "bet-panel-chips", className: cn("min-w-0 w-full flex h-full items-center justify-between sm:justify-start sm:gap-1 transition-opacity", disabled && "opacity-60 pointer-events-none", className), ...props }));
+}
+function BetPanelActions({ className, disabled, ...props }) {
+    return (_jsx("div", { "data-slot": "bet-panel-actions", className: cn("flex items-center gap-2 shrink-0 transition-opacity select-none", disabled && "opacity-50 pointer-events-none", className), ...props }));
+}
+function BetPanelTimer({ remainingTime, progress, isWarning, isActive, }) {
+    if (!isActive)
+        return null;
+    return (_jsxs("div", { className: "flex h-6 w-full items-center gap-3 py-1", children: [_jsxs("span", { className: cn("shrink-0 text-xs tabular-nums", isWarning ? "text-red-500 animate-pulse" : "text-accent-success"), style: { fontFamily: "var(--font-dm-mono)", fontWeight: 500 }, children: [remainingTime, "s"] }), _jsx("div", { className: "relative h-1.5 flex-1 rounded-full bg-surface-650", children: _jsx("div", { className: cn("absolute inset-y-0 left-0 rounded-full transition-[width] duration-1000 ease-linear shadow-[inset_0px_1px_2px_0px_rgba(255,255,255,0.15)]", isWarning
+                        ? "bg-red-500"
+                        : "bg-linear-to-r from-accent-success to-timer-end"), style: { width: `${progress}%` } }) })] }));
+}
+/* -------------------------------------------------------------------------- */
+/*  Exports                                                                   */
+/* -------------------------------------------------------------------------- */
+export { BetPanelTimer, BetPanelInput, BetPanelActions, BetPanelChips, BetPanelRoot, BetPanelFoldingInfo, };
+//# sourceMappingURL=bet-panel.js.map

package/dist/components/bet-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bet-panel.js","sourceRoot":"","sources":["../../src/components/bet-panel.tsx"],"names":[],"mappings":"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"}

package/dist/components/button.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "grey_pure" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    before?: React.ReactNode;
+    loading?: boolean;
+    noLoadingWhenDisabled?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EAuBnB,CAAC;AAEF,MAAM,WAAW,WACf,SACE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,QAAA,MAAM,MAAM,uFAmCX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/button.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+const buttonVariants = cva("flex h-11 items-center justify-center border-2 rounded-lg cursor-pointer whitespace-nowrap select-none disabled:pointer-events-none disabled:opacity-50", {
+    variants: {
+        variant: {
+            primary: "px-6 py-3 green-action-button text-base font-semibold text-black tracking-tight",
+            secondary: "px-6 py-3 blue-action-button text-base font-semibold text-black tracking-tight",
+            tertiary: "px-3 py-2 grey-action-button text-sm font-semibold text-white",
+            grey_pure: "px-3 py-2 border-button-grey text-sm font-semibold text-white bg-surface-300 hover:bg-action-hover active:bg-action-active",
+        },
+        fullWidth: {
+            true: "w-full",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+    },
+});
+const Button = React.forwardRef(({ className, variant, fullWidth, asChild = false, disabled, before, children, loading, noLoadingWhenDisabled = false, ...props }, ref) => {
+    return (_jsxs("button", { className: cn("relative overflow-clip ease-in-out duration-300", buttonVariants({ variant, fullWidth, className })), type: "button", ref: ref, disabled: disabled || loading, ...props, children: [before, _jsx("div", { className: "inline-flex sm:flex-1 items-center justify-center", children: children })] }));
+});
+Button.displayName = "Button";
+export { Button, buttonVariants };
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,MAAM,cAAc,GAAG,GAAG,CACxB,yJAAyJ,EACzJ;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EACL,iFAAiF;YACnF,SAAS,EACP,gFAAgF;YAClF,QAAQ,EACN,+DAA+D;YACjE,SAAS,EACP,4HAA4H;SAC/H;QACD,SAAS,EAAE;YACT,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,EAAE;SACV;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC;AAYF,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EACE,SAAS,EACT,OAAO,EACP,SAAS,EACT,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,qBAAqB,GAAG,KAAK,EAC7B,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,OAAO,CACL,kBACE,SAAS,EAAE,EAAE,CACX,iDAAiD,EACjD,cAAc,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAClD,EACD,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,IAAI,OAAO,KACzB,KAAK,aAER,MAAM,EAEP,cAAK,SAAS,EAAC,mDAAmD,YAC/D,QAAQ,GACL,IACC,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/card-score-badge.d.ts

@@ -0,0 +1,9 @@
+interface CardScoreBadgeProps {
+    className?: string;
+    type: "default" | "win" | "lose" | "bust" | "blackjack" | "push" | "even" | "surrender";
+    children?: React.ReactNode;
+    isMobileSmallHeight?: boolean;
+}
+declare const CardScoreBadge: ({ type, className, children, isMobileSmallHeight, }: CardScoreBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default CardScoreBadge;
+//# sourceMappingURL=card-score-badge.d.ts.map

package/dist/components/card-score-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-score-badge.d.ts","sourceRoot":"","sources":["../../src/components/card-score-badge.tsx"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EACA,SAAS,GACT,KAAK,GACL,MAAM,GACN,MAAM,GACN,WAAW,GACX,MAAM,GACN,MAAM,GACN,WAAW,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAaD,QAAA,MAAM,cAAc,GAAI,qDAKrB,mBAAmB,4CAyBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/card-score-badge.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+const BADGE_COLORS = {
+    default: "bg-surface-300",
+    push: "bg-surface-300",
+    win: "bg-[#8BB339]",
+    lose: "bg-[#DB375E]",
+    bust: "bg-[#DB375E]",
+    blackjack: "bg-[#FF5C05]",
+    even: "bg-card-border",
+    surrender: "bg-[#8A8A8A]",
+};
+const CardScoreBadge = ({ type = "default", className, children, isMobileSmallHeight = false, }) => {
+    const badgeColor = BADGE_COLORS[type];
+    return (_jsx("div", { className: cn("pointer-events-none absolute bottom-1 right-0 z-10 select-none text-center", className, isMobileSmallHeight ? "h-4 min-w-4" : "h-5.5 min-w-5.5"), children: _jsx("div", { className: cn("relative w-full h-full flex items-center justify-center rounded font-bold", badgeColor, isMobileSmallHeight ? "p-0.5 text-[8px]" : "p-1 text-[10px]"), style: {
+                boxShadow: "0 2px 0 0 #404040",
+            }, children: children }) }));
+};
+export default CardScoreBadge;
+//# sourceMappingURL=card-score-badge.js.map

package/dist/components/card-score-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-score-badge.js","sourceRoot":"","sources":["../../src/components/card-score-badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAiBlC,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,gBAAgB;IACzB,IAAI,EAAE,gBAAgB;IACtB,GAAG,EAAE,cAAc;IACnB,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,cAAc;IACpB,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE,gBAAgB;IACtB,SAAS,EAAE,cAAc;CAC1B,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,EACtB,IAAI,GAAG,SAAS,EAChB,SAAS,EACT,QAAQ,EACR,mBAAmB,GAAG,KAAK,GACP,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAEtC,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,4EAA4E,EAC5E,SAAS,EACT,mBAAmB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CACxD,YAED,cACE,SAAS,EAAE,EAAE,CACX,2EAA2E,EAC3E,UAAU,EACV,mBAAmB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,CAC7D,EACD,KAAK,EAAE;gBACL,SAAS,EAAE,mBAAmB;aAC/B,YAEA,QAAQ,GACL,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/card-shoe.d.ts

@@ -0,0 +1,6 @@
+interface CardShoeProps {
+    className?: string;
+}
+export declare const CardShoe: import("react").ForwardRefExoticComponent<CardShoeProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=card-shoe.d.ts.map

package/dist/components/card-shoe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-shoe.d.ts","sourceRoot":"","sources":["../../src/components/card-shoe.tsx"],"names":[],"mappings":"AAKA,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,eAAO,MAAM,QAAQ,0GAqCpB,CAAC"}