@getgreenline/blaze-ui 1.0.15 → 1.0.16
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.
|
@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
|
|
|
4
4
|
import { LoaderCircleIcon } from 'lucide-react';
|
|
5
5
|
import { cn } from '../lib/utils.js';
|
|
6
6
|
|
|
7
|
-
const buttonVariants = cva("tw:relative tw:inline-flex tw:items-center tw:justify-center tw:gap-2 tw:whitespace-nowrap tw:rounded-md tw:text-sm tw:font-medium tw:transition-all tw:disabled:pointer-events-none tw:data-[disabled]:pointer-events-none tw:data-[loading]:pointer-events-none tw:disabled:opacity-50 tw:data-[disabled]:opacity-50 tw:[&_svg]:pointer-events-none tw:[&_svg:not([class*='size-'])]:size-4 tw:shrink-0 tw:[&_svg]:shrink-0 tw:outline-none tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px] tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive", {
|
|
7
|
+
const buttonVariants = cva("tw:relative tw:inline-flex tw:items-center tw:justify-center tw:gap-2 tw:whitespace-nowrap tw:rounded-md tw:text-sm tw:font-medium tw:transition-all tw:cursor-pointer tw:disabled:cursor-not-allowed tw:disabled:pointer-events-none tw:data-[disabled]:pointer-events-none tw:data-[loading]:pointer-events-none tw:disabled:opacity-50 tw:data-[disabled]:opacity-50 tw:[&_svg]:pointer-events-none tw:[&_svg:not([class*='size-'])]:size-4 tw:shrink-0 tw:[&_svg]:shrink-0 tw:outline-none tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px] tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive", {
|
|
8
8
|
variants: {
|
|
9
9
|
variant: {
|
|
10
10
|
default: "tw:bg-primary tw:text-primary-foreground tw:shadow-xs tw:hover:bg-primary/90",
|
|
@@ -25,7 +25,7 @@ const segmentedControlVariants = cva("tw:inline-flex tw:items-center tw:gap-1 tw
|
|
|
25
25
|
size: "default",
|
|
26
26
|
},
|
|
27
27
|
});
|
|
28
|
-
const segmentedControlItemVariants = cva("tw:inline-flex tw:items-center tw:justify-center tw:gap-2 tw:rounded-md tw:text-sm tw:font-medium tw:transition-all tw:duration-200 tw:outline-none tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px] tw:focus-visible:ring-offset-2 tw:focus-visible:ring-offset-background tw:focus:z-10 tw:disabled:pointer-events-none tw:disabled:opacity-50", {
|
|
28
|
+
const segmentedControlItemVariants = cva("tw:inline-flex tw:items-center tw:justify-center tw:gap-2 tw:rounded-md tw:text-sm tw:font-medium tw:transition-all tw:duration-200 tw:outline-none tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px] tw:focus-visible:ring-offset-2 tw:focus-visible:ring-offset-background tw:focus:z-10 tw:cursor-pointer tw:disabled:cursor-not-allowed tw:disabled:pointer-events-none tw:disabled:opacity-50", {
|
|
29
29
|
variants: {
|
|
30
30
|
variant: {
|
|
31
31
|
default: "tw:text-foreground/70 tw:hover:text-primary tw:hover:bg-primary/10 tw:data-[state=active]:bg-primary tw:data-[state=active]:text-primary-foreground tw:data-[state=active]:shadow-xs",
|
|
@@ -3,7 +3,7 @@ import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
|
3
3
|
import { cn } from '../lib/utils.js';
|
|
4
4
|
|
|
5
5
|
function Switch({ className, ...props }) {
|
|
6
|
-
return (jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn("tw:peer tw:data-[state=checked]:bg-primary tw:data-[state=unchecked]:bg-input tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:dark:data-[state=unchecked]:bg-input/80 tw:inline-flex tw:h-[1.15rem] tw:w-8 tw:shrink-0 tw:items-center tw:rounded-full tw:border tw:border-transparent tw:shadow-xs tw:transition-all tw:outline-none tw:focus-visible:ring-[3px] tw:disabled:cursor-not-allowed tw:disabled:opacity-50", className), ...props, children: jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn("tw:bg-background tw:dark:data-[state=unchecked]:bg-foreground tw:dark:data-[state=checked]:bg-primary-foreground tw:pointer-events-none tw:block tw:size-4 tw:rounded-full tw:ring-0 tw:transition-transform tw:data-[state=checked]:translate-x-[calc(100%-2px)] tw:data-[state=unchecked]:translate-x-0") }) }));
|
|
6
|
+
return (jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn("tw:peer tw:data-[state=checked]:bg-primary tw:data-[state=unchecked]:bg-input tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:dark:data-[state=unchecked]:bg-input/80 tw:inline-flex tw:h-[1.15rem] tw:w-8 tw:shrink-0 tw:items-center tw:rounded-full tw:border tw:border-transparent tw:shadow-xs tw:transition-all tw:outline-none tw:focus-visible:ring-[3px] tw:cursor-pointer tw:disabled:cursor-not-allowed tw:disabled:opacity-50", className), ...props, children: jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn("tw:bg-background tw:dark:data-[state=unchecked]:bg-foreground tw:dark:data-[state=checked]:bg-primary-foreground tw:pointer-events-none tw:block tw:size-4 tw:rounded-full tw:ring-0 tw:transition-transform tw:data-[state=checked]:translate-x-[calc(100%-2px)] tw:data-[state=unchecked]:translate-x-0") }) }));
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
export { Switch };
|
package/dist/globals.css
CHANGED
|
@@ -166,66 +166,8 @@
|
|
|
166
166
|
}
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
-
/*
|
|
170
|
-
.blaze-ui-
|
|
171
|
-
color: initial;
|
|
172
|
-
background-color: initial;
|
|
173
|
-
border: none;
|
|
174
|
-
box-shadow: none;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
.blaze-ui-homi button[data-slot='button'] {
|
|
178
|
-
@apply tw:rounded-md;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.blaze-ui-homi button[data-slot='switch'] {
|
|
182
|
-
@apply tw:rounded-full;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
.blaze-ui-homi button[data-slot='button'].tw\:bg-primary {
|
|
186
|
-
@apply tw:bg-primary;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.blaze-ui-homi button[data-slot='button'].tw\:bg-destructive {
|
|
190
|
-
@apply tw:bg-destructive;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
.blaze-ui-homi button[data-slot='button'].tw\:bg-secondary {
|
|
194
|
-
@apply tw:bg-secondary;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.blaze-ui-homi button[data-slot='button'].tw\:bg-background {
|
|
198
|
-
@apply tw:bg-background;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
.blaze-ui-homi button[data-slot='button'].tw\:text-primary-foreground {
|
|
202
|
-
@apply tw:text-primary-foreground;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.blaze-ui-homi button[data-slot='button'].tw\:text-white {
|
|
206
|
-
@apply tw:text-white;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
.blaze-ui-homi button[data-slot='button'].tw\:text-secondary-foreground {
|
|
210
|
-
@apply tw:text-secondary-foreground;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
.blaze-ui-homi button[data-slot='button'].tw\:text-primary {
|
|
214
|
-
@apply tw:text-primary;
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
.blaze-ui-homi button[data-slot='button'].tw\:shadow-xs,
|
|
218
|
-
.blaze-ui-homi button[data-slot='switch'].tw\:shadow-xs {
|
|
219
|
-
@apply tw:shadow-xs;
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
.blaze-ui-homi button[data-slot='button'].tw\:border,
|
|
223
|
-
.blaze-ui-homi button[data-slot='switch'].tw\:border {
|
|
224
|
-
@apply tw:border tw:border-border;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
/* Overrides of styles for */
|
|
228
|
-
.blaze-ui-420 {
|
|
169
|
+
/* Fix style collisions with poopstrap/reactstrap/mui/antd */
|
|
170
|
+
.blaze-ui-root {
|
|
229
171
|
--blaze-420-font-sm: 14px;
|
|
230
172
|
--blaze-420-font-base: 16px;
|
|
231
173
|
--blaze-420-line-sm: 20px;
|
|
@@ -244,14 +186,14 @@
|
|
|
244
186
|
@apply tw:text-foreground tw:font-sans;
|
|
245
187
|
}
|
|
246
188
|
|
|
247
|
-
.blaze-ui-
|
|
248
|
-
.blaze-ui-
|
|
189
|
+
.blaze-ui-root button[data-slot='button'],
|
|
190
|
+
.blaze-ui-root button[data-slot='switch'] {
|
|
249
191
|
color: inherit;
|
|
250
192
|
box-shadow: none;
|
|
251
193
|
font: inherit;
|
|
252
194
|
}
|
|
253
195
|
|
|
254
|
-
.blaze-ui-
|
|
196
|
+
.blaze-ui-root button[data-slot='button'] {
|
|
255
197
|
background-color: initial;
|
|
256
198
|
min-height: var(--blaze-420-height-9);
|
|
257
199
|
height: var(--blaze-420-height-9);
|
|
@@ -262,13 +204,13 @@
|
|
|
262
204
|
line-height: var(--blaze-420-line-sm);
|
|
263
205
|
}
|
|
264
206
|
|
|
265
|
-
.blaze-ui-
|
|
266
|
-
.blaze-ui-
|
|
207
|
+
.blaze-ui-root button[data-slot='button'].tw\:has-\[\>svg\]\:px-3,
|
|
208
|
+
.blaze-ui-root button[data-slot='button']:has(> svg) {
|
|
267
209
|
padding-left: var(--blaze-420-space-3);
|
|
268
210
|
padding-right: var(--blaze-420-space-3);
|
|
269
211
|
}
|
|
270
212
|
|
|
271
|
-
.blaze-ui-
|
|
213
|
+
.blaze-ui-root button[data-slot='switch'] {
|
|
272
214
|
background-color: initial;
|
|
273
215
|
width: var(--blaze-420-switch-width);
|
|
274
216
|
min-width: var(--blaze-420-switch-width);
|
|
@@ -277,162 +219,167 @@
|
|
|
277
219
|
border-radius: var(--blaze-420-radius-full);
|
|
278
220
|
}
|
|
279
221
|
|
|
280
|
-
.blaze-ui-
|
|
222
|
+
.blaze-ui-root button[data-slot='switch']>[data-slot='switch-thumb'] {
|
|
281
223
|
width: var(--blaze-420-thumb-size);
|
|
282
224
|
height: var(--blaze-420-thumb-size);
|
|
283
225
|
}
|
|
284
226
|
|
|
285
|
-
.blaze-ui-
|
|
227
|
+
.blaze-ui-root button[data-slot='button'].tw\:bg-primary {
|
|
286
228
|
@apply tw:bg-primary;
|
|
287
229
|
}
|
|
288
230
|
|
|
289
|
-
.blaze-ui-
|
|
231
|
+
.blaze-ui-root button[data-slot='button'].tw\:bg-destructive {
|
|
290
232
|
@apply tw:bg-destructive;
|
|
291
233
|
}
|
|
292
234
|
|
|
293
|
-
.blaze-ui-
|
|
235
|
+
.blaze-ui-root button[data-slot='button'].tw\:bg-secondary {
|
|
294
236
|
@apply tw:bg-secondary;
|
|
295
237
|
}
|
|
296
238
|
|
|
297
|
-
.blaze-ui-
|
|
239
|
+
.blaze-ui-root button[data-slot='button'].tw\:bg-background {
|
|
298
240
|
@apply tw:bg-background;
|
|
299
241
|
}
|
|
300
242
|
|
|
301
|
-
.blaze-ui-
|
|
243
|
+
.blaze-ui-root button[data-slot='button'].tw\:text-primary-foreground {
|
|
302
244
|
@apply tw:text-primary-foreground;
|
|
303
245
|
}
|
|
304
246
|
|
|
305
|
-
.blaze-ui-
|
|
247
|
+
.blaze-ui-root button[data-slot='button'].tw\:text-white {
|
|
306
248
|
@apply tw:text-white;
|
|
307
249
|
}
|
|
308
250
|
|
|
309
|
-
.blaze-ui-
|
|
251
|
+
.blaze-ui-root button[data-slot='button'].tw\:text-secondary-foreground {
|
|
310
252
|
@apply tw:text-secondary-foreground;
|
|
311
253
|
}
|
|
312
254
|
|
|
313
|
-
.blaze-ui-
|
|
255
|
+
.blaze-ui-root button[data-slot='button'].tw\:text-primary {
|
|
314
256
|
@apply tw:text-primary;
|
|
315
257
|
}
|
|
316
258
|
|
|
317
|
-
.blaze-ui-
|
|
318
|
-
.blaze-ui-
|
|
259
|
+
.blaze-ui-root button[data-slot='button'].tw\:shadow-xs,
|
|
260
|
+
.blaze-ui-root button[data-slot='switch'].tw\:shadow-xs {
|
|
319
261
|
@apply tw:shadow-xs;
|
|
320
262
|
}
|
|
321
263
|
|
|
322
|
-
.blaze-ui-
|
|
264
|
+
.blaze-ui-root button[data-slot='button'].tw\:border {
|
|
323
265
|
@apply tw:border tw:border-border;
|
|
324
266
|
}
|
|
325
267
|
|
|
326
|
-
.blaze-ui-
|
|
268
|
+
.blaze-ui-root button[data-slot='switch'].tw\:border {
|
|
327
269
|
@apply tw:border tw:border-transparent;
|
|
328
270
|
}
|
|
329
271
|
|
|
330
|
-
.blaze-ui-
|
|
272
|
+
.blaze-ui-root .tw\:rounded-md {
|
|
331
273
|
border-radius: var(--blaze-420-radius-md);
|
|
332
274
|
}
|
|
333
275
|
|
|
334
|
-
.blaze-ui-
|
|
276
|
+
.blaze-ui-root .tw\:gap-1 {
|
|
335
277
|
gap: var(--blaze-420-space-1);
|
|
336
278
|
}
|
|
337
279
|
|
|
338
|
-
.blaze-ui-
|
|
280
|
+
.blaze-ui-root .tw\:gap-2 {
|
|
339
281
|
gap: var(--blaze-420-space-2);
|
|
340
282
|
}
|
|
341
283
|
|
|
342
|
-
.blaze-ui-
|
|
284
|
+
.blaze-ui-root .tw\:gap-6 {
|
|
343
285
|
gap: var(--blaze-420-space-6);
|
|
344
286
|
}
|
|
345
287
|
|
|
346
|
-
.blaze-ui-
|
|
288
|
+
.blaze-ui-root .tw\:p-1 {
|
|
347
289
|
padding: var(--blaze-420-space-1);
|
|
348
290
|
}
|
|
349
291
|
|
|
350
|
-
.blaze-ui-
|
|
292
|
+
.blaze-ui-root .tw\:p-4 {
|
|
351
293
|
padding: var(--blaze-420-space-4);
|
|
352
294
|
}
|
|
353
295
|
|
|
354
|
-
.blaze-ui-
|
|
296
|
+
.blaze-ui-root .tw\:px-3 {
|
|
355
297
|
padding-left: var(--blaze-420-space-3);
|
|
356
298
|
padding-right: var(--blaze-420-space-3);
|
|
357
299
|
}
|
|
358
300
|
|
|
359
|
-
.blaze-ui-
|
|
301
|
+
.blaze-ui-root .tw\:px-4 {
|
|
360
302
|
padding-left: var(--blaze-420-space-4);
|
|
361
303
|
padding-right: var(--blaze-420-space-4);
|
|
362
304
|
}
|
|
363
305
|
|
|
364
|
-
.blaze-ui-
|
|
306
|
+
.blaze-ui-root .tw\:py-1 {
|
|
365
307
|
padding-top: var(--blaze-420-space-1);
|
|
366
308
|
padding-bottom: var(--blaze-420-space-1);
|
|
367
309
|
}
|
|
368
310
|
|
|
369
|
-
.blaze-ui-
|
|
311
|
+
.blaze-ui-root .tw\:py-2 {
|
|
370
312
|
padding-top: var(--blaze-420-space-2);
|
|
371
313
|
padding-bottom: var(--blaze-420-space-2);
|
|
372
314
|
}
|
|
373
315
|
|
|
374
|
-
.blaze-ui-
|
|
316
|
+
.blaze-ui-root .tw\:mr-4 {
|
|
375
317
|
margin-right: var(--blaze-420-space-4);
|
|
376
318
|
}
|
|
377
319
|
|
|
378
|
-
.blaze-ui-
|
|
320
|
+
.blaze-ui-root .tw\:h-9 {
|
|
379
321
|
height: var(--blaze-420-height-9);
|
|
380
322
|
}
|
|
381
323
|
|
|
382
|
-
.blaze-ui-
|
|
324
|
+
.blaze-ui-root .tw\:min-h-9 {
|
|
383
325
|
min-height: var(--blaze-420-height-9);
|
|
384
326
|
}
|
|
385
327
|
|
|
386
|
-
.blaze-ui-
|
|
328
|
+
.blaze-ui-root .tw\:size-4 {
|
|
387
329
|
width: var(--blaze-420-thumb-size);
|
|
388
330
|
height: var(--blaze-420-thumb-size);
|
|
389
331
|
}
|
|
390
332
|
|
|
391
|
-
.blaze-ui-
|
|
333
|
+
.blaze-ui-root .tw\:w-8 {
|
|
392
334
|
width: var(--blaze-420-switch-width);
|
|
393
335
|
}
|
|
394
336
|
|
|
395
|
-
.blaze-ui-
|
|
337
|
+
.blaze-ui-root .tw\:h-\[1\.15rem\] {
|
|
396
338
|
height: var(--blaze-420-switch-height);
|
|
397
339
|
}
|
|
398
340
|
|
|
399
|
-
.blaze-ui-
|
|
341
|
+
.blaze-ui-root .tw\:text-sm {
|
|
400
342
|
font-size: var(--blaze-420-font-sm);
|
|
401
343
|
line-height: var(--blaze-420-line-sm);
|
|
402
344
|
}
|
|
403
345
|
|
|
404
|
-
.blaze-ui-
|
|
346
|
+
.blaze-ui-root .tw\:text-base {
|
|
405
347
|
font-size: var(--blaze-420-font-base);
|
|
406
348
|
line-height: var(--blaze-420-line-base);
|
|
407
349
|
}
|
|
408
350
|
|
|
409
351
|
@media (min-width: 768px) {
|
|
410
|
-
.blaze-ui-
|
|
352
|
+
.blaze-ui-root .tw\:md\:text-sm {
|
|
411
353
|
font-size: var(--blaze-420-font-sm);
|
|
412
354
|
line-height: var(--blaze-420-line-sm);
|
|
413
355
|
}
|
|
414
356
|
}
|
|
415
357
|
|
|
416
|
-
.blaze-ui-
|
|
358
|
+
.blaze-ui-root .tw\:underline-offset-4 {
|
|
417
359
|
text-underline-offset: 4px;
|
|
418
360
|
}
|
|
419
361
|
|
|
420
|
-
.blaze-ui-
|
|
362
|
+
.blaze-ui-root a.tw\:ml-auto {
|
|
421
363
|
@apply tw:text-primary tw:hover:text-primary/90;
|
|
422
364
|
}
|
|
423
365
|
|
|
424
|
-
.blaze-ui-
|
|
366
|
+
.blaze-ui-root button[data-slot='switch'][data-state='checked'] {
|
|
425
367
|
background-color: var(--primary) !important;
|
|
426
368
|
}
|
|
427
369
|
|
|
428
|
-
.blaze-ui-
|
|
370
|
+
.blaze-ui-root button[data-slot='switch'][data-state='unchecked'] {
|
|
429
371
|
background-color: var(--input) !important;
|
|
430
372
|
}
|
|
431
373
|
|
|
432
|
-
.blaze-ui-
|
|
374
|
+
.blaze-ui-root [data-slot='segmented-control-item'][data-state='active'] {
|
|
433
375
|
color: var(--primary-foreground) !important;
|
|
434
376
|
}
|
|
435
377
|
|
|
436
|
-
.blaze-ui-
|
|
378
|
+
.blaze-ui-root [data-slot='label']>span[aria-hidden='true'] {
|
|
437
379
|
margin-left: var(--blaze-420-space-1);
|
|
438
380
|
}
|
|
381
|
+
|
|
382
|
+
.blaze-ui-root [data-slot='button-spinner'] svg {
|
|
383
|
+
stroke: currentColor;
|
|
384
|
+
fill: none;
|
|
385
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getgreenline/blaze-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.16",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@radix-ui/react-alert-dialog": "^1.1.15",
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
"rollup": "^4.52.0",
|
|
37
37
|
"tailwindcss": "^4.1.11",
|
|
38
38
|
"typescript": "^5.9.2",
|
|
39
|
-
"@workspace/
|
|
40
|
-
"@workspace/
|
|
39
|
+
"@workspace/typescript-config": "0.0.0",
|
|
40
|
+
"@workspace/eslint-config": "0.0.0"
|
|
41
41
|
},
|
|
42
42
|
"main": "./dist/index.js",
|
|
43
43
|
"module": "./dist/index.js",
|