@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
- /* Overrides of styles for homi-web */
170
- .blaze-ui-homi button[data-slot='button'] {
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-420 button[data-slot='button'],
248
- .blaze-ui-420 button[data-slot='switch'] {
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-420 button[data-slot='button'] {
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-420 button[data-slot='button'].tw\:has-\[\>svg\]\:px-3,
266
- .blaze-ui-420 button[data-slot='button']:has(> svg) {
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-420 button[data-slot='switch'] {
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-420 button[data-slot='switch']>[data-slot='switch-thumb'] {
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-420 button[data-slot='button'].tw\:bg-primary {
227
+ .blaze-ui-root button[data-slot='button'].tw\:bg-primary {
286
228
  @apply tw:bg-primary;
287
229
  }
288
230
 
289
- .blaze-ui-420 button[data-slot='button'].tw\:bg-destructive {
231
+ .blaze-ui-root button[data-slot='button'].tw\:bg-destructive {
290
232
  @apply tw:bg-destructive;
291
233
  }
292
234
 
293
- .blaze-ui-420 button[data-slot='button'].tw\:bg-secondary {
235
+ .blaze-ui-root button[data-slot='button'].tw\:bg-secondary {
294
236
  @apply tw:bg-secondary;
295
237
  }
296
238
 
297
- .blaze-ui-420 button[data-slot='button'].tw\:bg-background {
239
+ .blaze-ui-root button[data-slot='button'].tw\:bg-background {
298
240
  @apply tw:bg-background;
299
241
  }
300
242
 
301
- .blaze-ui-420 button[data-slot='button'].tw\:text-primary-foreground {
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-420 button[data-slot='button'].tw\:text-white {
247
+ .blaze-ui-root button[data-slot='button'].tw\:text-white {
306
248
  @apply tw:text-white;
307
249
  }
308
250
 
309
- .blaze-ui-420 button[data-slot='button'].tw\:text-secondary-foreground {
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-420 button[data-slot='button'].tw\:text-primary {
255
+ .blaze-ui-root button[data-slot='button'].tw\:text-primary {
314
256
  @apply tw:text-primary;
315
257
  }
316
258
 
317
- .blaze-ui-420 button[data-slot='button'].tw\:shadow-xs,
318
- .blaze-ui-420 button[data-slot='switch'].tw\:shadow-xs {
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-420 button[data-slot='button'].tw\:border {
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-420 button[data-slot='switch'].tw\:border {
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-420 .tw\:rounded-md {
272
+ .blaze-ui-root .tw\:rounded-md {
331
273
  border-radius: var(--blaze-420-radius-md);
332
274
  }
333
275
 
334
- .blaze-ui-420 .tw\:gap-1 {
276
+ .blaze-ui-root .tw\:gap-1 {
335
277
  gap: var(--blaze-420-space-1);
336
278
  }
337
279
 
338
- .blaze-ui-420 .tw\:gap-2 {
280
+ .blaze-ui-root .tw\:gap-2 {
339
281
  gap: var(--blaze-420-space-2);
340
282
  }
341
283
 
342
- .blaze-ui-420 .tw\:gap-6 {
284
+ .blaze-ui-root .tw\:gap-6 {
343
285
  gap: var(--blaze-420-space-6);
344
286
  }
345
287
 
346
- .blaze-ui-420 .tw\:p-1 {
288
+ .blaze-ui-root .tw\:p-1 {
347
289
  padding: var(--blaze-420-space-1);
348
290
  }
349
291
 
350
- .blaze-ui-420 .tw\:p-4 {
292
+ .blaze-ui-root .tw\:p-4 {
351
293
  padding: var(--blaze-420-space-4);
352
294
  }
353
295
 
354
- .blaze-ui-420 .tw\:px-3 {
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-420 .tw\:px-4 {
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-420 .tw\:py-1 {
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-420 .tw\:py-2 {
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-420 .tw\:mr-4 {
316
+ .blaze-ui-root .tw\:mr-4 {
375
317
  margin-right: var(--blaze-420-space-4);
376
318
  }
377
319
 
378
- .blaze-ui-420 .tw\:h-9 {
320
+ .blaze-ui-root .tw\:h-9 {
379
321
  height: var(--blaze-420-height-9);
380
322
  }
381
323
 
382
- .blaze-ui-420 .tw\:min-h-9 {
324
+ .blaze-ui-root .tw\:min-h-9 {
383
325
  min-height: var(--blaze-420-height-9);
384
326
  }
385
327
 
386
- .blaze-ui-420 .tw\:size-4 {
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-420 .tw\:w-8 {
333
+ .blaze-ui-root .tw\:w-8 {
392
334
  width: var(--blaze-420-switch-width);
393
335
  }
394
336
 
395
- .blaze-ui-420 .tw\:h-\[1\.15rem\] {
337
+ .blaze-ui-root .tw\:h-\[1\.15rem\] {
396
338
  height: var(--blaze-420-switch-height);
397
339
  }
398
340
 
399
- .blaze-ui-420 .tw\:text-sm {
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-420 .tw\:text-base {
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-420 .tw\:md\:text-sm {
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-420 .tw\:underline-offset-4 {
358
+ .blaze-ui-root .tw\:underline-offset-4 {
417
359
  text-underline-offset: 4px;
418
360
  }
419
361
 
420
- .blaze-ui-420 a.tw\:ml-auto {
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-420 button[data-slot='switch'][data-state='checked'] {
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-420 button[data-slot='switch'][data-state='unchecked'] {
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-420 [data-slot='segmented-control-item'][data-state='active'] {
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-420 [data-slot='label'] > span[aria-hidden='true'] {
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.15",
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/eslint-config": "0.0.0",
40
- "@workspace/typescript-config": "0.0.0"
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",