@drdex0101/water-design-system 3.0.0 → 3.0.2

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 (8) hide show
  1. package/dist/components/Icon/Icon.d.ts +14 -10
  2. package/dist/components/Poker/PokerCard.d.ts +12 -10
  3. package/dist/index.d.ts +2 -1
  4. package/dist/pages/IconTokens.d.ts +2 -0
  5. package/dist/tokens/semantic.d.ts +66 -24
  6. package/dist/water-design-system.es.js +1395 -1318
  7. package/dist/water-design-system.umd.js +6 -6
  8. package/package.json +1 -1
package/dist/components/Icon/Icon.d.ts CHANGED
@@ -108,18 +108,22 @@ export declare const UploadImageIcon: ({ size, color, style, className }: IconPr
108
108
  export declare const UploadFileIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
109
109
  /** Shopping Cart */
110
110
  export declare const CartIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
111
- /** Discord */
112
- export declare const DiscordIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
113
- /** Google */
114
- export declare const GoogleIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
115
- /** Instagram */
116
- export declare const InstagramIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
117
- /** TWD (Taiwan Dollar) */
118
- export declare const TWDIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
119
- /** USD (US Dollar) */
120
- export declare const USDIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
111
+ /** Discord - with brand color #5865F2 */
112
+ export declare const DiscordIcon: ({ size, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
113
+ /** Google - with brand colors */
114
+ export declare const GoogleIcon: ({ size, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
115
+ /** Instagram - with gradient colors */
116
+ export declare const InstagramIcon: ({ size, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
117
+ /** TWD (Taiwan Dollar) - Taiwan flag style */
118
+ export declare const TWDIcon: ({ size, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
119
+ /** USD (US Dollar) - US flag style */
120
+ export declare const USDIcon: ({ size, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
121
+ /** KRW (Korean Won) */
122
+ export declare const KRWIcon: ({ size, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
121
123
  /** XRP */
122
124
  export declare const XRPIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
125
+ /** Percent */
126
+ export declare const PercentIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
123
127
  /** Firewall / Security */
124
128
  export declare const FirewallIcon: ({ size, color, style, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
125
129
  /** Home */
package/dist/components/Poker/PokerCard.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { default as React } from 'react';
2
+ import { ThemeMode } from '../../tokens/semantic';
2
3
 
3
4
  export type Suit = 'spades' | 'clubs' | 'hearts' | 'diamonds';
4
5
  export interface PokerCard {
@@ -8,18 +9,19 @@ export interface PokerCard {
8
9
  export interface RotatedCardsProps {
9
10
  cards: (PokerCard | null)[];
10
11
  style?: React.CSSProperties;
12
+ theme?: ThemeMode;
11
13
  }
12
- export declare const SuitIcon: ({ suit }: {
14
+ export declare const SuitIcon: ({ suit, theme }: {
13
15
  suit: Suit;
16
+ theme?: ThemeMode;
14
17
  }) => import("react/jsx-runtime").JSX.Element;
15
- export declare const PokerCard: ({ card, style }: {
18
+ export interface PokerCardProps {
16
19
  card: PokerCard | null;
17
20
  style?: React.CSSProperties;
18
- }) => import("react/jsx-runtime").JSX.Element;
19
- export declare const SingleCard: ({ card, style }: {
20
- card: PokerCard | null;
21
- style?: React.CSSProperties;
22
- }) => import("react/jsx-runtime").JSX.Element;
23
- export declare const RotatedCards: ({ cards, style }: RotatedCardsProps & {
24
- style?: React.CSSProperties;
25
- }) => import("react/jsx-runtime").JSX.Element;
21
+ theme?: ThemeMode;
22
+ selected?: boolean;
23
+ }
24
+ export declare const PokerCardComponent: ({ card, style, theme, selected }: PokerCardProps) => import("react/jsx-runtime").JSX.Element;
25
+ export declare const PokerCard: ({ card, style, theme, selected }: PokerCardProps) => import("react/jsx-runtime").JSX.Element;
26
+ export declare const SingleCard: ({ card, style, theme, selected }: PokerCardProps) => import("react/jsx-runtime").JSX.Element;
27
+ export declare const RotatedCards: ({ cards, style, theme }: RotatedCardsProps) => import("react/jsx-runtime").JSX.Element;
package/dist/index.d.ts CHANGED
@@ -8,7 +8,6 @@ export * from './components/Switch';
8
8
  export * from './components/Tabs';
9
9
  export * from './components/Toast';
10
10
  export * from './components/Toggle';
11
- export * from './components/Poker';
12
11
  export * from './components/Card';
13
12
  export * from './components/BottomNav';
14
13
  export * from './components/BottomSheet';
@@ -17,4 +16,6 @@ export * from './components/Popup';
17
16
  export * from './components/SideMenu';
18
17
  export * from './components/Icon';
19
18
  export * from './components/DatePicker';
19
+ export type { Suit, RotatedCardsProps, PokerCardProps } from './components/Poker';
20
+ export { PokerCard, SuitIcon, PokerCardComponent, SingleCard, RotatedCards } from './components/Poker';
20
21
  export * from './tokens';
package/dist/pages/IconTokens.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const IconTokens: () => import("react/jsx-runtime").JSX.Element;
2
+ export default IconTokens;
package/dist/tokens/semantic.d.ts CHANGED
@@ -10,11 +10,12 @@ export declare const background: {
10
10
  readonly secondary: "#f7f8f9";
11
11
  readonly tertiary: "#eeeff2";
12
12
  readonly overlay: "#2a2d3380";
13
- readonly disabled: "#cfd1d5";
13
+ readonly disabled: "#eff0f2";
14
14
  readonly success: "#e7f7ed";
15
15
  readonly error: "#fdecec";
16
16
  readonly warning: "#fef7e6";
17
17
  readonly brand: "#2e9dff";
18
+ readonly brandCompliment: "#73bdff";
18
19
  readonly brandSubtle: "#eaf5ff";
19
20
  readonly accent: "#01bda7";
20
21
  readonly accent2: "#e77300";
@@ -26,11 +27,12 @@ export declare const background: {
26
27
  readonly secondary: "#101d30";
27
28
  readonly tertiary: "#1a3050";
28
29
  readonly overlay: "#2a2d33cc";
29
- readonly disabled: "#828894";
30
+ readonly disabled: "#969ba5";
30
31
  readonly success: "#e7f7ed";
31
32
  readonly error: "#fdecec";
32
33
  readonly warning: "#fef7e6";
33
34
  readonly brand: "#2e9dff";
35
+ readonly brandCompliment: "#216fb5";
34
36
  readonly brandSubtle: "#eaf5ff";
35
37
  readonly accent: "#01a3af";
36
38
  readonly accent2: "#e77300";
@@ -60,7 +62,7 @@ export declare const text: {
60
62
  readonly secondary: "#eaecef";
61
63
  readonly tertiary: "#d0d2d6";
62
64
  readonly disabled: "#5a606e";
63
- readonly placeholder: "#cfd1d5";
65
+ readonly placeholder: "#b7bac1";
64
66
  readonly success: "#0bad47";
65
67
  readonly error: "#ef4444";
66
68
  readonly warning: "#f0b100";
@@ -80,6 +82,7 @@ export declare const border: {
80
82
  readonly success: "#0bad47";
81
83
  readonly error: "#ef4444";
82
84
  readonly warning: "#f0b100";
85
+ readonly onBrand: "#ffffff";
83
86
  readonly brandSubtle: "#bee1ff";
84
87
  };
85
88
  readonly dark: {
@@ -89,6 +92,7 @@ export declare const border: {
89
92
  readonly success: "#0bad47";
90
93
  readonly error: "#ef4444";
91
94
  readonly warning: "#f0b100";
95
+ readonly onBrand: "#ffffff";
92
96
  readonly brandSubtle: "#2e9dff";
93
97
  };
94
98
  };
@@ -102,7 +106,7 @@ export declare const components: {
102
106
  readonly outlineBg: "#ffffff";
103
107
  readonly outlineBorder: "#eaecef";
104
108
  readonly outlineLabel: "#464b56";
105
- readonly disabledBg: "#cfd1d5";
109
+ readonly disabledBg: "#eff0f2";
106
110
  readonly disabledLabel: "#b7bac1";
107
111
  readonly pokerCallBg: "#01bda7";
108
112
  readonly pokerCallLabel: "#ffffff";
@@ -121,7 +125,7 @@ export declare const components: {
121
125
  readonly outlineBg: "#071427";
122
126
  readonly outlineBorder: "#5a606e";
123
127
  readonly outlineLabel: "#eaecef";
124
- readonly disabledBg: "#828894";
128
+ readonly disabledBg: "#969ba5";
125
129
  readonly disabledLabel: "#5a606e";
126
130
  readonly pokerCallBg: "#01a3af";
127
131
  readonly pokerCallLabel: "#ffffff";
@@ -134,13 +138,30 @@ export declare const components: {
134
138
  };
135
139
  };
136
140
  readonly pokerCard: {
137
- readonly bg: "#ffffff";
138
- readonly bgEmpty: "#6eb3dc80";
139
- readonly border: "#eaecef";
140
- readonly club: "#01bda7";
141
- readonly diamond: "#2e9dff";
142
- readonly heart: "#ef4444";
143
- readonly spade: "#464b56";
141
+ readonly light: {
142
+ readonly bg: "#ffffff";
143
+ readonly bgEmpty: "#6eb3dc80";
144
+ readonly border: "#eaecef";
145
+ readonly club: "#01bda7";
146
+ readonly diamond: "#2e9dff";
147
+ readonly heart: "#ef4444";
148
+ readonly spade: "#464b56";
149
+ readonly playerBg: "#eaf5ff";
150
+ readonly playerBorder: "#bee1ff";
151
+ readonly tableBg: "#bee1ff";
152
+ };
153
+ readonly dark: {
154
+ readonly bg: "#ffffff";
155
+ readonly bgEmpty: "#1a305080";
156
+ readonly border: "#e6fdfe";
157
+ readonly club: "#01bda7";
158
+ readonly diamond: "#2e9dff";
159
+ readonly heart: "#ef4444";
160
+ readonly spade: "#464b56";
161
+ readonly playerBg: "#15263e";
162
+ readonly playerBorder: "#1a3050";
163
+ readonly tableBg: "#15263e";
164
+ };
144
165
  };
145
166
  };
146
167
  export declare const semanticColors: {
@@ -150,11 +171,12 @@ export declare const semanticColors: {
150
171
  readonly secondary: "#f7f8f9";
151
172
  readonly tertiary: "#eeeff2";
152
173
  readonly overlay: "#2a2d3380";
153
- readonly disabled: "#cfd1d5";
174
+ readonly disabled: "#eff0f2";
154
175
  readonly success: "#e7f7ed";
155
176
  readonly error: "#fdecec";
156
177
  readonly warning: "#fef7e6";
157
178
  readonly brand: "#2e9dff";
179
+ readonly brandCompliment: "#73bdff";
158
180
  readonly brandSubtle: "#eaf5ff";
159
181
  readonly accent: "#01bda7";
160
182
  readonly accent2: "#e77300";
@@ -166,11 +188,12 @@ export declare const semanticColors: {
166
188
  readonly secondary: "#101d30";
167
189
  readonly tertiary: "#1a3050";
168
190
  readonly overlay: "#2a2d33cc";
169
- readonly disabled: "#828894";
191
+ readonly disabled: "#969ba5";
170
192
  readonly success: "#e7f7ed";
171
193
  readonly error: "#fdecec";
172
194
  readonly warning: "#fef7e6";
173
195
  readonly brand: "#2e9dff";
196
+ readonly brandCompliment: "#216fb5";
174
197
  readonly brandSubtle: "#eaf5ff";
175
198
  readonly accent: "#01a3af";
176
199
  readonly accent2: "#e77300";
@@ -200,7 +223,7 @@ export declare const semanticColors: {
200
223
  readonly secondary: "#eaecef";
201
224
  readonly tertiary: "#d0d2d6";
202
225
  readonly disabled: "#5a606e";
203
- readonly placeholder: "#cfd1d5";
226
+ readonly placeholder: "#b7bac1";
204
227
  readonly success: "#0bad47";
205
228
  readonly error: "#ef4444";
206
229
  readonly warning: "#f0b100";
@@ -220,6 +243,7 @@ export declare const semanticColors: {
220
243
  readonly success: "#0bad47";
221
244
  readonly error: "#ef4444";
222
245
  readonly warning: "#f0b100";
246
+ readonly onBrand: "#ffffff";
223
247
  readonly brandSubtle: "#bee1ff";
224
248
  };
225
249
  readonly dark: {
@@ -229,6 +253,7 @@ export declare const semanticColors: {
229
253
  readonly success: "#0bad47";
230
254
  readonly error: "#ef4444";
231
255
  readonly warning: "#f0b100";
256
+ readonly onBrand: "#ffffff";
232
257
  readonly brandSubtle: "#2e9dff";
233
258
  };
234
259
  };
@@ -242,7 +267,7 @@ export declare const semanticColors: {
242
267
  readonly outlineBg: "#ffffff";
243
268
  readonly outlineBorder: "#eaecef";
244
269
  readonly outlineLabel: "#464b56";
245
- readonly disabledBg: "#cfd1d5";
270
+ readonly disabledBg: "#eff0f2";
246
271
  readonly disabledLabel: "#b7bac1";
247
272
  readonly pokerCallBg: "#01bda7";
248
273
  readonly pokerCallLabel: "#ffffff";
@@ -261,7 +286,7 @@ export declare const semanticColors: {
261
286
  readonly outlineBg: "#071427";
262
287
  readonly outlineBorder: "#5a606e";
263
288
  readonly outlineLabel: "#eaecef";
264
- readonly disabledBg: "#828894";
289
+ readonly disabledBg: "#969ba5";
265
290
  readonly disabledLabel: "#5a606e";
266
291
  readonly pokerCallBg: "#01a3af";
267
292
  readonly pokerCallLabel: "#ffffff";
@@ -274,13 +299,30 @@ export declare const semanticColors: {
274
299
  };
275
300
  };
276
301
  readonly pokerCard: {
277
- readonly bg: "#ffffff";
278
- readonly bgEmpty: "#6eb3dc80";
279
- readonly border: "#eaecef";
280
- readonly club: "#01bda7";
281
- readonly diamond: "#2e9dff";
282
- readonly heart: "#ef4444";
283
- readonly spade: "#464b56";
302
+ readonly light: {
303
+ readonly bg: "#ffffff";
304
+ readonly bgEmpty: "#6eb3dc80";
305
+ readonly border: "#eaecef";
306
+ readonly club: "#01bda7";
307
+ readonly diamond: "#2e9dff";
308
+ readonly heart: "#ef4444";
309
+ readonly spade: "#464b56";
310
+ readonly playerBg: "#eaf5ff";
311
+ readonly playerBorder: "#bee1ff";
312
+ readonly tableBg: "#bee1ff";
313
+ };
314
+ readonly dark: {
315
+ readonly bg: "#ffffff";
316
+ readonly bgEmpty: "#1a305080";
317
+ readonly border: "#e6fdfe";
318
+ readonly club: "#01bda7";
319
+ readonly diamond: "#2e9dff";
320
+ readonly heart: "#ef4444";
321
+ readonly spade: "#464b56";
322
+ readonly playerBg: "#15263e";
323
+ readonly playerBorder: "#1a3050";
324
+ readonly tableBg: "#15263e";
325
+ };
284
326
  };
285
327
  };
286
328
  };