@chellaa/react 0.2.0

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 (17) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +180 -0
  3. package/dist/index.cjs +523 -0
  4. package/dist/index.cjs.map +1 -0
  5. package/dist/index.css +674 -0
  6. package/dist/index.css.map +1 -0
  7. package/dist/index.d.cts +203 -0
  8. package/dist/index.d.ts +203 -0
  9. package/dist/index.mjs +495 -0
  10. package/dist/index.mjs.map +1 -0
  11. package/dist/index.node.mjs +494 -0
  12. package/dist/styles.css +1 -0
  13. package/dist/styles.css.d.cts +2 -0
  14. package/dist/styles.css.d.ts +2 -0
  15. package/package.json +111 -0
  16. package/styles.css +1 -0
  17. package/styles.css.d.ts +2 -0
package/dist/index.css ADDED
@@ -0,0 +1,674 @@
1
+ /* src/styles/tokens.css */
2
+ @layer cl-tokens {
3
+ :root {
4
+ --cl-palette-slate-50: #f8fafc;
5
+ --cl-palette-slate-100: #f1f5f9;
6
+ --cl-palette-slate-200: #e2e8f0;
7
+ --cl-palette-slate-300: #cbd5e1;
8
+ --cl-palette-slate-400: #94a3b8;
9
+ --cl-palette-slate-500: #64748b;
10
+ --cl-palette-slate-600: #475569;
11
+ --cl-palette-slate-700: #334155;
12
+ --cl-palette-slate-800: #1e293b;
13
+ --cl-palette-slate-900: #0f172a;
14
+ --cl-palette-slate-950: #090d16;
15
+ --cl-palette-indigo-50: #eef2ff;
16
+ --cl-palette-indigo-100: #e0e7ff;
17
+ --cl-palette-indigo-200: #c7d2fe;
18
+ --cl-palette-indigo-300: #a5b4fc;
19
+ --cl-palette-indigo-400: #818cf8;
20
+ --cl-palette-indigo-500: #6366f1;
21
+ --cl-palette-indigo-600: #4f46e5;
22
+ --cl-palette-indigo-700: #4338ca;
23
+ --cl-palette-indigo-800: #3730a3;
24
+ --cl-palette-indigo-900: #312e81;
25
+ --cl-palette-indigo-950: #1e1b4b;
26
+ --cl-palette-violet-50: #f5f3ff;
27
+ --cl-palette-violet-100: #ede9fe;
28
+ --cl-palette-violet-200: #ddd6fe;
29
+ --cl-palette-violet-300: #c4b5fd;
30
+ --cl-palette-violet-400: #a78bfa;
31
+ --cl-palette-violet-500: #8b5cf6;
32
+ --cl-palette-violet-600: #7c3aed;
33
+ --cl-palette-violet-700: #6d28d9;
34
+ --cl-palette-violet-800: #5b21b6;
35
+ --cl-palette-violet-900: #4c1d95;
36
+ --cl-palette-violet-950: #2e1065;
37
+ --cl-palette-emerald-50: #ecfdf5;
38
+ --cl-palette-emerald-100: #d1fae5;
39
+ --cl-palette-emerald-200: #a7f3d0;
40
+ --cl-palette-emerald-300: #6ee7b7;
41
+ --cl-palette-emerald-400: #34d399;
42
+ --cl-palette-emerald-500: #10b981;
43
+ --cl-palette-emerald-600: #059669;
44
+ --cl-palette-emerald-700: #047857;
45
+ --cl-palette-emerald-800: #065f46;
46
+ --cl-palette-emerald-900: #064e3b;
47
+ --cl-palette-emerald-950: #022c22;
48
+ --cl-palette-amber-50: #fffbeb;
49
+ --cl-palette-amber-100: #fef3c7;
50
+ --cl-palette-amber-200: #fde68a;
51
+ --cl-palette-amber-300: #fcd34d;
52
+ --cl-palette-amber-400: #fbbf24;
53
+ --cl-palette-amber-500: #f59e0b;
54
+ --cl-palette-amber-600: #d97706;
55
+ --cl-palette-amber-700: #b45309;
56
+ --cl-palette-amber-800: #92400e;
57
+ --cl-palette-amber-900: #78350f;
58
+ --cl-palette-amber-950: #451a03;
59
+ --cl-palette-rose-50: #fff1f2;
60
+ --cl-palette-rose-100: #ffe4e6;
61
+ --cl-palette-rose-200: #fecdd3;
62
+ --cl-palette-rose-300: #fda4af;
63
+ --cl-palette-rose-400: #fb7185;
64
+ --cl-palette-rose-500: #f43f5e;
65
+ --cl-palette-rose-600: #e11d48;
66
+ --cl-palette-rose-700: #be123c;
67
+ --cl-palette-rose-800: #9f1239;
68
+ --cl-palette-rose-900: #881337;
69
+ --cl-palette-rose-950: #4c0519;
70
+ --cl-palette-sky-50: #f0f9ff;
71
+ --cl-palette-sky-100: #e0f2fe;
72
+ --cl-palette-sky-200: #bae6fd;
73
+ --cl-palette-sky-300: #7dd3fc;
74
+ --cl-palette-sky-400: #38bdf8;
75
+ --cl-palette-sky-500: #0ea5e9;
76
+ --cl-palette-sky-600: #0284c7;
77
+ --cl-palette-sky-700: #0369a1;
78
+ --cl-palette-sky-800: #075985;
79
+ --cl-palette-sky-900: #0c4a6e;
80
+ --cl-palette-sky-950: #082f49;
81
+ --cl-palette-white: #ffffff;
82
+ --cl-palette-black: #000000;
83
+ --cl-space-0: 0rem;
84
+ --cl-space-1: 0.25rem;
85
+ --cl-space-2: 0.5rem;
86
+ --cl-space-3: 0.75rem;
87
+ --cl-space-4: 1rem;
88
+ --cl-space-5: 1.25rem;
89
+ --cl-space-6: 1.5rem;
90
+ --cl-space-8: 2rem;
91
+ --cl-space-10: 2.5rem;
92
+ --cl-space-12: 3rem;
93
+ --cl-space-16: 4rem;
94
+ --cl-font-sans:
95
+ system-ui,
96
+ -apple-system,
97
+ BlinkMacSystemFont,
98
+ "Segoe UI",
99
+ Roboto,
100
+ "Helvetica Neue",
101
+ Arial,
102
+ sans-serif;
103
+ --cl-font-mono:
104
+ ui-monospace,
105
+ SFMono-Regular,
106
+ Menlo,
107
+ Monaco,
108
+ Consolas,
109
+ "Liberation Mono",
110
+ "Courier New",
111
+ monospace;
112
+ --cl-font-xs: 0.75rem;
113
+ --cl-line-height-xs: 1rem;
114
+ --cl-letter-spacing-xs: 0.01em;
115
+ --cl-font-sm: 0.875rem;
116
+ --cl-line-height-sm: 1.25rem;
117
+ --cl-letter-spacing-sm: 0;
118
+ --cl-font-base: 1rem;
119
+ --cl-line-height-base: 1.5rem;
120
+ --cl-letter-spacing-base: 0;
121
+ --cl-font-lg: 1.125rem;
122
+ --cl-line-height-lg: 1.75rem;
123
+ --cl-letter-spacing-lg: -0.01em;
124
+ --cl-font-xl: 1.25rem;
125
+ --cl-line-height-xl: 1.75rem;
126
+ --cl-letter-spacing-xl: -0.015em;
127
+ --cl-font-2xl: 1.5rem;
128
+ --cl-line-height-2xl: 2rem;
129
+ --cl-letter-spacing-2xl: -0.02em;
130
+ --cl-font-3xl: 1.875rem;
131
+ --cl-line-height-3xl: 2.25rem;
132
+ --cl-letter-spacing-3xl: -0.025em;
133
+ --cl-font-4xl: 2.25rem;
134
+ --cl-line-height-4xl: 2.5rem;
135
+ --cl-letter-spacing-4xl: -0.03em;
136
+ --cl-font-5xl: 3rem;
137
+ --cl-line-height-5xl: 1.15;
138
+ --cl-letter-spacing-5xl: -0.035em;
139
+ --cl-font-weight-regular: 400;
140
+ --cl-font-weight-medium: 500;
141
+ --cl-font-weight-semibold: 600;
142
+ --cl-font-weight-bold: 700;
143
+ --cl-rad-none: 0px;
144
+ --cl-rad-xs: 2px;
145
+ --cl-rad-sm: 4px;
146
+ --cl-rad-md: 6px;
147
+ --cl-rad-lg: 8px;
148
+ --cl-rad-xl: 12px;
149
+ --cl-rad-2xl: 16px;
150
+ --cl-rad-full: 9999px;
151
+ --cl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
152
+ --cl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
153
+ --cl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
154
+ --cl-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
155
+ --cl-z-deep: -1;
156
+ --cl-z-base: 0;
157
+ --cl-z-raised: 10;
158
+ --cl-z-dropdown: 1000;
159
+ --cl-z-sticky: 1100;
160
+ --cl-z-backdrop: 1200;
161
+ --cl-z-modal: 1300;
162
+ --cl-z-popover: 1400;
163
+ --cl-z-toast: 1500;
164
+ --cl-z-tooltip: 1600;
165
+ --cl-duration-fast: 150ms;
166
+ --cl-duration-normal: 250ms;
167
+ --cl-duration-slow: 350ms;
168
+ --cl-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
169
+ --cl-ease-out: cubic-bezier(0, 0, 0.2, 1);
170
+ --cl-ease-in: cubic-bezier(0.4, 0, 1, 1);
171
+ --cl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
172
+ --cl-transition-colors:
173
+ color var(--cl-duration-fast) var(--cl-ease-default),
174
+ background-color var(--cl-duration-fast) var(--cl-ease-default),
175
+ border-color var(--cl-duration-fast) var(--cl-ease-default);
176
+ --cl-transition-transform: transform var(--cl-duration-fast) var(--cl-ease-default);
177
+ --cl-transition-opacity: opacity var(--cl-duration-fast) var(--cl-ease-default);
178
+ }
179
+ @media (prefers-reduced-motion: reduce) {
180
+ :root {
181
+ --cl-duration-fast: 0ms !important;
182
+ --cl-duration-normal: 0ms !important;
183
+ --cl-duration-slow: 0ms !important;
184
+ --cl-transition-colors: none !important;
185
+ --cl-transition-transform: none !important;
186
+ --cl-transition-opacity: none !important;
187
+ }
188
+ }
189
+ }
190
+
191
+ /* src/styles/theme.css */
192
+ @layer cl-theme {
193
+ :root,
194
+ [data-theme=light] {
195
+ --cl-color-bg-canvas: var(--cl-palette-white);
196
+ --cl-color-bg-surface: var(--cl-palette-slate-50);
197
+ --cl-color-bg-elev: var(--cl-palette-white);
198
+ --cl-color-bg-muted: var(--cl-palette-slate-100);
199
+ --cl-color-fg-primary: var(--cl-palette-slate-900);
200
+ --cl-color-fg-secondary: var(--cl-palette-slate-700);
201
+ --cl-color-fg-muted: var(--cl-palette-slate-500);
202
+ --cl-color-fg-inverse: var(--cl-palette-white);
203
+ --cl-color-border-subtle: var(--cl-palette-slate-200);
204
+ --cl-color-border-default: var(--cl-palette-slate-300);
205
+ --cl-color-border-strong: var(--cl-palette-slate-400);
206
+ --cl-color-primary-base: var(--cl-palette-indigo-600);
207
+ --cl-color-primary-hover: var(--cl-palette-indigo-700);
208
+ --cl-color-primary-active: var(--cl-palette-indigo-800);
209
+ --cl-color-primary-fg: var(--cl-palette-white);
210
+ --cl-color-primary-subtle: var(--cl-palette-indigo-50);
211
+ --cl-color-secondary-base: var(--cl-palette-violet-600);
212
+ --cl-color-secondary-hover: var(--cl-palette-violet-700);
213
+ --cl-color-secondary-active: var(--cl-palette-violet-800);
214
+ --cl-color-secondary-fg: var(--cl-palette-white);
215
+ --cl-color-secondary-subtle: var(--cl-palette-violet-50);
216
+ --cl-color-neutral-base: var(--cl-palette-slate-700);
217
+ --cl-color-neutral-hover: var(--cl-palette-slate-800);
218
+ --cl-color-neutral-active: var(--cl-palette-slate-900);
219
+ --cl-color-neutral-fg: var(--cl-palette-white);
220
+ --cl-color-neutral-subtle: var(--cl-palette-slate-100);
221
+ --cl-color-success-base: var(--cl-palette-emerald-600);
222
+ --cl-color-success-hover: var(--cl-palette-emerald-700);
223
+ --cl-color-success-active: var(--cl-palette-emerald-800);
224
+ --cl-color-success-fg: var(--cl-palette-white);
225
+ --cl-color-success-subtle: var(--cl-palette-emerald-50);
226
+ --cl-color-warning-base: var(--cl-palette-amber-600);
227
+ --cl-color-warning-hover: var(--cl-palette-amber-700);
228
+ --cl-color-warning-active: var(--cl-palette-amber-800);
229
+ --cl-color-warning-fg: var(--cl-palette-white);
230
+ --cl-color-warning-subtle: var(--cl-palette-amber-50);
231
+ --cl-color-danger-base: var(--cl-palette-rose-600);
232
+ --cl-color-danger-hover: var(--cl-palette-rose-700);
233
+ --cl-color-danger-active: var(--cl-palette-rose-800);
234
+ --cl-color-danger-fg: var(--cl-palette-white);
235
+ --cl-color-danger-subtle: var(--cl-palette-rose-50);
236
+ --cl-color-info-base: var(--cl-palette-sky-600);
237
+ --cl-color-info-hover: var(--cl-palette-sky-700);
238
+ --cl-color-info-active: var(--cl-palette-sky-800);
239
+ --cl-color-info-fg: var(--cl-palette-white);
240
+ --cl-color-info-subtle: var(--cl-palette-sky-50);
241
+ --cl-color-focus-ring: rgba(99, 102, 241, 0.45);
242
+ --cl-color-backdrop: rgba(15, 23, 42, 0.5);
243
+ --cl-button-primary-bg: var(--cl-color-primary-base);
244
+ --cl-button-primary-fg: var(--cl-color-primary-fg);
245
+ --cl-button-primary-hover-bg: var(--cl-color-primary-hover);
246
+ --cl-button-primary-active-bg: var(--cl-color-primary-active);
247
+ --cl-button-neutral-bg: var(--cl-color-neutral-base);
248
+ --cl-button-neutral-fg: var(--cl-color-neutral-fg);
249
+ --cl-button-neutral-hover-bg: var(--cl-color-neutral-hover);
250
+ --cl-button-neutral-active-bg: var(--cl-color-neutral-active);
251
+ --cl-button-danger-bg: var(--cl-color-danger-base);
252
+ --cl-button-danger-fg: var(--cl-color-danger-fg);
253
+ --cl-button-danger-hover-bg: var(--cl-color-danger-hover);
254
+ --cl-button-danger-active-bg: var(--cl-color-danger-active);
255
+ --cl-input-bg: var(--cl-color-bg-canvas);
256
+ --cl-input-fg: var(--cl-color-fg-primary);
257
+ --cl-input-border: var(--cl-color-border-default);
258
+ --cl-input-focus-border: var(--cl-color-primary-base);
259
+ --cl-input-invalid-border: var(--cl-color-danger-base);
260
+ --cl-input-placeholder: var(--cl-color-fg-muted);
261
+ --cl-card-bg: var(--cl-color-bg-canvas);
262
+ --cl-card-border: var(--cl-color-border-subtle);
263
+ --cl-card-elevated-bg: var(--cl-color-bg-elev);
264
+ --cl-dialog-bg: var(--cl-color-bg-elev);
265
+ --cl-dialog-border: var(--cl-color-border-subtle);
266
+ --cl-dialog-backdrop: var(--cl-color-backdrop);
267
+ --cl-badge-default-bg: var(--cl-color-primary-subtle);
268
+ --cl-badge-default-fg: var(--cl-color-primary-base);
269
+ --cl-table-border: var(--cl-color-border-subtle);
270
+ --cl-table-header-bg: var(--cl-color-bg-surface);
271
+ --cl-table-row-hover-bg: var(--cl-color-bg-muted);
272
+ }
273
+ [data-theme=dark] {
274
+ --cl-color-bg-canvas: var(--cl-palette-slate-950);
275
+ --cl-color-bg-surface: #131b2e;
276
+ --cl-color-bg-elev: var(--cl-palette-slate-800);
277
+ --cl-color-bg-muted: var(--cl-palette-slate-800);
278
+ --cl-color-fg-primary: var(--cl-palette-slate-50);
279
+ --cl-color-fg-secondary: var(--cl-palette-slate-300);
280
+ --cl-color-fg-muted: var(--cl-palette-slate-400);
281
+ --cl-color-fg-inverse: var(--cl-palette-slate-900);
282
+ --cl-color-border-subtle: var(--cl-palette-slate-800);
283
+ --cl-color-border-default: var(--cl-palette-slate-700);
284
+ --cl-color-border-strong: var(--cl-palette-slate-600);
285
+ --cl-color-primary-base: var(--cl-palette-indigo-500);
286
+ --cl-color-primary-hover: var(--cl-palette-indigo-400);
287
+ --cl-color-primary-active: var(--cl-palette-indigo-600);
288
+ --cl-color-primary-fg: var(--cl-palette-white);
289
+ --cl-color-primary-subtle: rgba(99, 102, 241, 0.15);
290
+ --cl-color-secondary-base: var(--cl-palette-violet-500);
291
+ --cl-color-secondary-hover: var(--cl-palette-violet-400);
292
+ --cl-color-secondary-active: var(--cl-palette-violet-600);
293
+ --cl-color-secondary-fg: var(--cl-palette-white);
294
+ --cl-color-secondary-subtle: rgba(139, 92, 246, 0.15);
295
+ --cl-color-neutral-base: var(--cl-palette-slate-600);
296
+ --cl-color-neutral-hover: var(--cl-palette-slate-500);
297
+ --cl-color-neutral-active: var(--cl-palette-slate-400);
298
+ --cl-color-neutral-fg: var(--cl-palette-white);
299
+ --cl-color-neutral-subtle: rgba(255, 255, 255, 0.08);
300
+ --cl-color-success-base: var(--cl-palette-emerald-500);
301
+ --cl-color-success-hover: var(--cl-palette-emerald-400);
302
+ --cl-color-success-active: var(--cl-palette-emerald-600);
303
+ --cl-color-success-fg: var(--cl-palette-white);
304
+ --cl-color-success-subtle: rgba(16, 185, 129, 0.15);
305
+ --cl-color-warning-base: var(--cl-palette-amber-500);
306
+ --cl-color-warning-hover: var(--cl-palette-amber-400);
307
+ --cl-color-warning-active: var(--cl-palette-amber-600);
308
+ --cl-color-warning-fg: var(--cl-palette-white);
309
+ --cl-color-warning-subtle: rgba(245, 158, 11, 0.15);
310
+ --cl-color-danger-base: var(--cl-palette-rose-500);
311
+ --cl-color-danger-hover: var(--cl-palette-rose-400);
312
+ --cl-color-danger-active: var(--cl-palette-rose-600);
313
+ --cl-color-danger-fg: var(--cl-palette-white);
314
+ --cl-color-danger-subtle: rgba(244, 63, 94, 0.15);
315
+ --cl-color-info-base: var(--cl-palette-sky-500);
316
+ --cl-color-info-hover: var(--cl-palette-sky-400);
317
+ --cl-color-info-active: var(--cl-palette-sky-600);
318
+ --cl-color-info-fg: var(--cl-palette-white);
319
+ --cl-color-info-subtle: rgba(14, 165, 233, 0.15);
320
+ --cl-color-focus-ring: rgba(129, 140, 248, 0.55);
321
+ --cl-color-backdrop: rgba(0, 0, 0, 0.7);
322
+ --cl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
323
+ --cl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
324
+ --cl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
325
+ --cl-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
326
+ --cl-input-bg: var(--cl-palette-slate-900);
327
+ --cl-card-bg: var(--cl-palette-slate-900);
328
+ --cl-card-elevated-bg: var(--cl-palette-slate-800);
329
+ --cl-dialog-bg: var(--cl-palette-slate-900);
330
+ --cl-dialog-border: var(--cl-palette-slate-800);
331
+ }
332
+ }
333
+
334
+ /* src/styles/reset.css */
335
+ @layer cl-reset {
336
+ [class^=cl-],
337
+ [class*=" cl-"],
338
+ [class^=cl-] *,
339
+ [class*=" cl-"] *,
340
+ [class^=cl-] *::before,
341
+ [class*=" cl-"] *::before,
342
+ [class^=cl-] *::after,
343
+ [class*=" cl-"] *::after {
344
+ box-sizing: border-box;
345
+ border-width: 0;
346
+ border-style: solid;
347
+ border-color: currentColor;
348
+ }
349
+ [class^=cl-],
350
+ [class*=" cl-"] {
351
+ font-family: var(--cl-font-sans);
352
+ -webkit-font-smoothing: antialiased;
353
+ -moz-osx-font-smoothing: grayscale;
354
+ }
355
+ }
356
+
357
+ /* src/components/Button/Button.styles.css */
358
+ @layer cl-components {
359
+ .cl-button {
360
+ display: inline-flex;
361
+ align-items: center;
362
+ justify-content: center;
363
+ position: relative;
364
+ box-sizing: border-box;
365
+ margin: 0;
366
+ user-select: none;
367
+ vertical-align: middle;
368
+ text-decoration: none;
369
+ white-space: nowrap;
370
+ font-family: var(--cl-font-sans);
371
+ font-weight: var(--cl-font-weight-medium);
372
+ border: 1px solid transparent;
373
+ cursor: pointer;
374
+ outline: none;
375
+ -webkit-font-smoothing: antialiased;
376
+ -moz-osx-font-smoothing: grayscale;
377
+ transition:
378
+ background-color var(--cl-duration-fast) var(--cl-ease-default),
379
+ border-color var(--cl-duration-fast) var(--cl-ease-default),
380
+ color var(--cl-duration-fast) var(--cl-ease-default),
381
+ box-shadow var(--cl-duration-fast) var(--cl-ease-default),
382
+ transform var(--cl-duration-fast) var(--cl-ease-default),
383
+ opacity var(--cl-duration-fast) var(--cl-ease-default);
384
+ }
385
+ .cl-button:focus-visible {
386
+ outline: 2px solid var(--cl-color-focus-ring);
387
+ outline-offset: 2px;
388
+ }
389
+ .cl-button--full-width {
390
+ display: flex;
391
+ width: 100%;
392
+ }
393
+ .cl-button--disabled,
394
+ .cl-button:disabled {
395
+ opacity: 0.6;
396
+ cursor: not-allowed;
397
+ pointer-events: none;
398
+ box-shadow: none;
399
+ transform: none !important;
400
+ }
401
+ .cl-button--loading {
402
+ cursor: wait;
403
+ pointer-events: none;
404
+ }
405
+ .cl-button--xs {
406
+ height: 1.75rem;
407
+ padding: 0 var(--cl-space-2);
408
+ font-size: var(--cl-font-xs);
409
+ line-height: var(--cl-line-height-xs);
410
+ gap: var(--cl-space-1);
411
+ border-radius: var(--cl-rad-sm);
412
+ }
413
+ .cl-button--xs .cl-button__icon,
414
+ .cl-button--xs .cl-button__spinner {
415
+ width: 14px;
416
+ height: 14px;
417
+ }
418
+ .cl-button--sm {
419
+ height: 2rem;
420
+ padding: 0 var(--cl-space-3);
421
+ font-size: var(--cl-font-sm);
422
+ line-height: var(--cl-line-height-sm);
423
+ gap: 6px;
424
+ border-radius: var(--cl-rad-md);
425
+ }
426
+ .cl-button--sm .cl-button__icon,
427
+ .cl-button--sm .cl-button__spinner {
428
+ width: 16px;
429
+ height: 16px;
430
+ }
431
+ .cl-button--md {
432
+ height: 2.5rem;
433
+ padding: 0 var(--cl-space-4);
434
+ font-size: var(--cl-font-sm);
435
+ line-height: var(--cl-line-height-sm);
436
+ gap: var(--cl-space-2);
437
+ border-radius: var(--cl-rad-md);
438
+ }
439
+ .cl-button--md .cl-button__icon,
440
+ .cl-button--md .cl-button__spinner {
441
+ width: 18px;
442
+ height: 18px;
443
+ }
444
+ .cl-button--lg {
445
+ height: 3rem;
446
+ padding: 0 var(--cl-space-5);
447
+ font-size: var(--cl-font-base);
448
+ line-height: var(--cl-line-height-base);
449
+ gap: 10px;
450
+ border-radius: var(--cl-rad-lg);
451
+ }
452
+ .cl-button--lg .cl-button__icon,
453
+ .cl-button--lg .cl-button__spinner {
454
+ width: 20px;
455
+ height: 20px;
456
+ }
457
+ .cl-button--xl {
458
+ height: 3.5rem;
459
+ padding: 0 var(--cl-space-6);
460
+ font-size: var(--cl-font-lg);
461
+ line-height: var(--cl-line-height-lg);
462
+ gap: var(--cl-space-3);
463
+ border-radius: var(--cl-rad-lg);
464
+ }
465
+ .cl-button--xl .cl-button__icon,
466
+ .cl-button--xl .cl-button__spinner {
467
+ width: 24px;
468
+ height: 24px;
469
+ }
470
+ .cl-button--primary {
471
+ --cl-button-bg: var(--cl-color-primary-base);
472
+ --cl-button-fg: var(--cl-color-primary-fg);
473
+ --cl-button-hover-bg: var(--cl-color-primary-hover);
474
+ --cl-button-active-bg: var(--cl-color-primary-active);
475
+ --cl-button-subtle-bg: var(--cl-color-primary-subtle);
476
+ }
477
+ .cl-button--secondary {
478
+ --cl-button-bg: var(--cl-color-secondary-base);
479
+ --cl-button-fg: var(--cl-color-secondary-fg);
480
+ --cl-button-hover-bg: var(--cl-color-secondary-hover);
481
+ --cl-button-active-bg: var(--cl-color-secondary-active);
482
+ --cl-button-subtle-bg: var(--cl-color-secondary-subtle);
483
+ }
484
+ .cl-button--neutral {
485
+ --cl-button-bg: var(--cl-color-neutral-base);
486
+ --cl-button-fg: var(--cl-color-neutral-fg);
487
+ --cl-button-hover-bg: var(--cl-color-neutral-hover);
488
+ --cl-button-active-bg: var(--cl-color-neutral-active);
489
+ --cl-button-subtle-bg: var(--cl-color-neutral-subtle);
490
+ }
491
+ .cl-button--success {
492
+ --cl-button-bg: var(--cl-color-success-base);
493
+ --cl-button-fg: var(--cl-color-success-fg);
494
+ --cl-button-hover-bg: var(--cl-color-success-hover);
495
+ --cl-button-active-bg: var(--cl-color-success-active);
496
+ --cl-button-subtle-bg: var(--cl-color-success-subtle);
497
+ }
498
+ .cl-button--warning {
499
+ --cl-button-bg: var(--cl-color-warning-base);
500
+ --cl-button-fg: var(--cl-color-warning-fg);
501
+ --cl-button-hover-bg: var(--cl-color-warning-hover);
502
+ --cl-button-active-bg: var(--cl-color-warning-active);
503
+ --cl-button-subtle-bg: var(--cl-color-warning-subtle);
504
+ }
505
+ .cl-button--danger {
506
+ --cl-button-bg: var(--cl-color-danger-base);
507
+ --cl-button-fg: var(--cl-color-danger-fg);
508
+ --cl-button-hover-bg: var(--cl-color-danger-hover);
509
+ --cl-button-active-bg: var(--cl-color-danger-active);
510
+ --cl-button-subtle-bg: var(--cl-color-danger-subtle);
511
+ }
512
+ .cl-button--info {
513
+ --cl-button-bg: var(--cl-color-info-base);
514
+ --cl-button-fg: var(--cl-color-info-fg);
515
+ --cl-button-hover-bg: var(--cl-color-info-hover);
516
+ --cl-button-active-bg: var(--cl-color-info-active);
517
+ --cl-button-subtle-bg: var(--cl-color-info-subtle);
518
+ }
519
+ .cl-button--solid {
520
+ background-color: var(--cl-button-bg);
521
+ color: var(--cl-button-fg);
522
+ border-color: transparent;
523
+ }
524
+ .cl-button--solid:hover:not(:disabled):not(.cl-button--disabled) {
525
+ background-color: var(--cl-button-hover-bg);
526
+ }
527
+ .cl-button--solid:active:not(:disabled):not(.cl-button--disabled) {
528
+ background-color: var(--cl-button-active-bg);
529
+ transform: scale(0.98);
530
+ }
531
+ .cl-button--outline {
532
+ background-color: transparent;
533
+ color: var(--cl-button-bg);
534
+ border-color: var(--cl-button-bg);
535
+ }
536
+ .cl-button--outline:hover:not(:disabled):not(.cl-button--disabled) {
537
+ background-color: var(--cl-button-subtle-bg);
538
+ }
539
+ .cl-button--outline:active:not(:disabled):not(.cl-button--disabled) {
540
+ background-color: var(--cl-button-subtle-bg);
541
+ transform: scale(0.98);
542
+ }
543
+ .cl-button--ghost {
544
+ background-color: transparent;
545
+ color: var(--cl-button-bg);
546
+ border-color: transparent;
547
+ }
548
+ .cl-button--ghost:hover:not(:disabled):not(.cl-button--disabled) {
549
+ background-color: var(--cl-button-subtle-bg);
550
+ }
551
+ .cl-button--ghost:active:not(:disabled):not(.cl-button--disabled) {
552
+ background-color: var(--cl-button-subtle-bg);
553
+ transform: scale(0.98);
554
+ }
555
+ .cl-button--subtle {
556
+ background-color: var(--cl-button-subtle-bg);
557
+ color: var(--cl-button-bg);
558
+ border-color: transparent;
559
+ }
560
+ .cl-button--subtle:hover:not(:disabled):not(.cl-button--disabled) {
561
+ background-color: var(--cl-button-subtle-bg);
562
+ filter: brightness(0.94);
563
+ }
564
+ .cl-button--subtle:active:not(:disabled):not(.cl-button--disabled) {
565
+ transform: scale(0.98);
566
+ }
567
+ .cl-button--link {
568
+ background-color: transparent;
569
+ color: var(--cl-button-bg);
570
+ border-color: transparent;
571
+ padding: 0;
572
+ height: auto;
573
+ min-height: unset;
574
+ border-radius: 0;
575
+ box-shadow: none;
576
+ }
577
+ .cl-button--link:hover:not(:disabled):not(.cl-button--disabled) {
578
+ text-decoration: underline;
579
+ }
580
+ .cl-button--link:active:not(:disabled):not(.cl-button--disabled) {
581
+ transform: none;
582
+ }
583
+ .cl-button__icon {
584
+ display: inline-flex;
585
+ align-items: center;
586
+ justify-content: center;
587
+ line-height: 1;
588
+ flex-shrink: 0;
589
+ }
590
+ .cl-button__spinner {
591
+ display: inline-block;
592
+ line-height: 1;
593
+ flex-shrink: 0;
594
+ animation: cl-button-spin 0.75s linear infinite;
595
+ }
596
+ .cl-button__spinner-wrapper--center {
597
+ position: absolute;
598
+ inset: 0;
599
+ display: flex;
600
+ align-items: center;
601
+ justify-content: center;
602
+ }
603
+ .cl-button__content--hidden {
604
+ opacity: 0;
605
+ visibility: hidden;
606
+ }
607
+ .cl-button__label {
608
+ display: inline-flex;
609
+ align-items: center;
610
+ justify-content: center;
611
+ line-height: inherit;
612
+ }
613
+ @keyframes cl-button-spin {
614
+ from {
615
+ transform: rotate(0deg);
616
+ }
617
+ to {
618
+ transform: rotate(360deg);
619
+ }
620
+ }
621
+ @media (prefers-reduced-motion: reduce) {
622
+ .cl-button,
623
+ .cl-button__spinner {
624
+ animation-duration: 0.01ms !important;
625
+ transition-duration: 0.01ms !important;
626
+ }
627
+ }
628
+ }
629
+
630
+ /* src/components/ButtonGroup/ButtonGroup.styles.css */
631
+ @layer cl-components {
632
+ .cl-button-group {
633
+ display: inline-flex;
634
+ position: relative;
635
+ box-sizing: border-box;
636
+ }
637
+ .cl-button-group--horizontal {
638
+ flex-direction: row;
639
+ align-items: center;
640
+ }
641
+ .cl-button-group--vertical {
642
+ flex-direction: column;
643
+ align-items: stretch;
644
+ }
645
+ .cl-button-group:not(.cl-button-group--attached) {
646
+ gap: var(--cl-space-2);
647
+ }
648
+ .cl-button-group--attached.cl-button-group--horizontal > .cl-button:not(:first-child) {
649
+ border-top-left-radius: 0;
650
+ border-bottom-left-radius: 0;
651
+ margin-left: -1px;
652
+ }
653
+ .cl-button-group--attached.cl-button-group--horizontal > .cl-button:not(:last-child) {
654
+ border-top-right-radius: 0;
655
+ border-bottom-right-radius: 0;
656
+ }
657
+ .cl-button-group--attached.cl-button-group--vertical > .cl-button:not(:first-child) {
658
+ border-top-left-radius: 0;
659
+ border-top-right-radius: 0;
660
+ margin-top: -1px;
661
+ }
662
+ .cl-button-group--attached.cl-button-group--vertical > .cl-button:not(:last-child) {
663
+ border-bottom-left-radius: 0;
664
+ border-bottom-right-radius: 0;
665
+ }
666
+ .cl-button-group--attached > .cl-button:hover,
667
+ .cl-button-group--attached > .cl-button:focus-visible,
668
+ .cl-button-group--attached > .cl-button:active {
669
+ z-index: 1;
670
+ }
671
+ }
672
+
673
+ /* src/styles/index.css */
674
+ /*# sourceMappingURL=index.css.map */