casino-ui 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +27 -30
  2. package/dist/styles/styles/toast.css +26 -0
  3. package/package.json +1 -1
  4. package/src/styles/toast.css +26 -0
package/README.md CHANGED
@@ -7,11 +7,13 @@ A reusable React component library for casino game frontends. Built with React 1
7
7
  ### 1. Add the dependency
8
8
 
9
9
  #### Add it as npm package:
10
+
10
11
  ```bash
11
12
  pnpm add casino-ui
12
13
  ```
13
14
 
14
15
  #### Add it locally:
16
+
15
17
  In your project's `package.json`, add `casino-ui` using a relative file path:
16
18
 
17
19
  ```json
@@ -38,22 +40,13 @@ pnpm install
38
40
  pnpm add react react-dom tailwindcss
39
41
  ```
40
42
 
41
- | Peer Dependency | Version |
42
- |---|---|
43
- | `react` | >= 19 |
44
- | `react-dom` | >= 19 |
45
- | `tailwindcss` | >= 4 |
46
-
47
- ### 3. Configure Tailwind CSS
48
-
49
- 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:
50
43
 
51
- ```css
52
- @import "tailwindcss";
53
- @source "../node_modules/casino-ui/dist";
54
- ```
44
+ | Peer Dependency | Version |
45
+ | --------------- | ------- |
46
+ | `react` | >= 19 |
47
+ | `react-dom` | >= 19 |
48
+ | `tailwindcss` | >= 4 |
55
49
 
56
- This is **required** for Tailwind utility classes used by casino-ui components to be generated in your project's CSS output.
57
50
 
58
51
  ## Usage
59
52
 
@@ -140,22 +133,24 @@ import type { CoinInfo, ChipDenomination } from "casino-ui";
140
133
 
141
134
  ## Components
142
135
 
143
- | Component | Description |
144
- |---|---|
145
- | `Button` | Action button with `primary`, `secondary`, `tertiary`, `grey_pure` variants |
146
- | `Chip` | Casino chip with denomination colors, hover/selected effects |
147
- | `ChipRack` | Stacked chip display tray |
148
- | `PokerCard` | Playing card (front/back, all suits & ranks, multiple sizes) |
149
- | `CardShoe` | Card shoe with stacked backs |
150
- | `CardTable` | SVG blackjack table surface |
151
- | `CardScoreBadge` | Score overlay badge for card hands |
152
- | `ResultBadge` | Win/Lose/Bust/Push/Blackjack result display |
153
- | `Icon` | SVG icon system (settings, share, check, sound, etc.) |
154
- | `GameFooter` | Footer bar with settings, game info, invite friends |
155
- | `GameInfoDialog` | Responsive dialog/drawer for game rules & info |
156
- | `SwitchTableDialog` | Dialog for switching multiplayer tables |
157
- | `BetPanel*` | Composable betting panel (root, input, chips, actions, timer) |
158
- | `CasinoToastContainer` | Toast notification container |
136
+
137
+ | Component | Description |
138
+ | ---------------------- | --------------------------------------------------------------------------- |
139
+ | `Button` | Action button with `primary`, `secondary`, `tertiary`, `grey_pure` variants |
140
+ | `Chip` | Casino chip with denomination colors, hover/selected effects |
141
+ | `ChipRack` | Stacked chip display tray |
142
+ | `PokerCard` | Playing card (front/back, all suits & ranks, multiple sizes) |
143
+ | `CardShoe` | Card shoe with stacked backs |
144
+ | `CardTable` | SVG blackjack table surface |
145
+ | `CardScoreBadge` | Score overlay badge for card hands |
146
+ | `ResultBadge` | Win/Lose/Bust/Push/Blackjack result display |
147
+ | `Icon` | SVG icon system (settings, share, check, sound, etc.) |
148
+ | `GameFooter` | Footer bar with settings, game info, invite friends |
149
+ | `GameInfoDialog` | Responsive dialog/drawer for game rules & info |
150
+ | `SwitchTableDialog` | Dialog for switching multiplayer tables |
151
+ | `BetPanel*` | Composable betting panel (root, input, chips, actions, timer) |
152
+ | `CasinoToastContainer` | Toast notification container |
153
+
159
154
 
160
155
  ## Build & Deploy
161
156
 
@@ -168,6 +163,7 @@ pnpm build
168
163
  ```
169
164
 
170
165
  This produces:
166
+
171
167
  - `dist/*.js` + `dist/*.d.ts` — compiled TypeScript with declarations
172
168
  - `dist/assets/` — SVG assets (card-back, card-shoe-overlay)
173
169
  - `dist/styles/` — CSS stylesheets
@@ -211,3 +207,4 @@ packages/casino-ui/
211
207
  dist/ # Build output
212
208
  .storybook/ # Storybook configuration
213
209
  ```
210
+
package/dist/styles/styles/toast.css CHANGED
@@ -27,6 +27,32 @@
27
27
  width: auto;
28
28
  }
29
29
 
30
+ .casino-toast .Toastify__toast-container--top-left,
31
+ .casino-toast .Toastify__toast-container--bottom-left {
32
+ right: auto;
33
+ left: var(--toastify-toast-left);
34
+ }
35
+
36
+ .casino-toast .Toastify__toast-container--top-right,
37
+ .casino-toast .Toastify__toast-container--bottom-right {
38
+ left: auto;
39
+ right: var(--toastify-toast-right);
40
+ }
41
+
42
+ .casino-toast .Toastify__toast-container--top-center {
43
+ bottom: auto;
44
+ top: var(--toastify-toast-top);
45
+ left: 50%;
46
+ transform: translateX(-50%);
47
+ }
48
+
49
+ .casino-toast .Toastify__toast-container--bottom-center {
50
+ top: auto;
51
+ bottom: var(--toastify-toast-bottom);
52
+ left: 50%;
53
+ transform: translateX(-50%);
54
+ }
55
+
30
56
  .casino-toast .Toastify__toast {
31
57
  background: transparent;
32
58
  box-shadow: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "casino-ui",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/src/styles/toast.css CHANGED
@@ -27,6 +27,32 @@
27
27
  width: auto;
28
28
  }
29
29
 
30
+ .casino-toast .Toastify__toast-container--top-left,
31
+ .casino-toast .Toastify__toast-container--bottom-left {
32
+ right: auto;
33
+ left: var(--toastify-toast-left);
34
+ }
35
+
36
+ .casino-toast .Toastify__toast-container--top-right,
37
+ .casino-toast .Toastify__toast-container--bottom-right {
38
+ left: auto;
39
+ right: var(--toastify-toast-right);
40
+ }
41
+
42
+ .casino-toast .Toastify__toast-container--top-center {
43
+ bottom: auto;
44
+ top: var(--toastify-toast-top);
45
+ left: 50%;
46
+ transform: translateX(-50%);
47
+ }
48
+
49
+ .casino-toast .Toastify__toast-container--bottom-center {
50
+ top: auto;
51
+ bottom: var(--toastify-toast-bottom);
52
+ left: 50%;
53
+ transform: translateX(-50%);
54
+ }
55
+
30
56
  .casino-toast .Toastify__toast {
31
57
  background: transparent;
32
58
  box-shadow: none;