@economic/taco 0.0.1-alpha.1543 → 0.0.2-alpha.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 (108) hide show
  1. package/dist/components/Backdrop/Backdrop.d.ts +3 -0
  2. package/dist/components/Button/Button.d.ts +39 -1
  3. package/dist/components/Button/util.d.ts +2 -0
  4. package/dist/components/Checkbox/Checkbox.d.ts +1 -1
  5. package/dist/components/Combobox/useCombobox.d.ts +3 -3
  6. package/dist/components/Dialog/Context.d.ts +1 -0
  7. package/dist/components/Dialog/Dialog.d.ts +14 -12
  8. package/dist/components/Hanger/Hanger.d.ts +4 -9
  9. package/dist/components/IconButton/IconButton.d.ts +38 -1
  10. package/dist/components/Listbox/Listbox.d.ts +0 -1
  11. package/dist/components/Navigation/Navigation.d.ts +4 -4
  12. package/dist/components/Popover/Popover.d.ts +5 -9
  13. package/dist/components/RadioGroup/RadioGroup.d.ts +5 -5
  14. package/dist/components/Select/Select.d.ts +0 -1
  15. package/dist/components/Select/useSelect.d.ts +5 -4
  16. package/dist/components/Table/Table.storyexample.d.ts +1 -1
  17. package/dist/components/Table/components/PaginatedTable.d.ts +2 -2
  18. package/dist/components/Table/components/Table.d.ts +2 -2
  19. package/dist/components/Table/components/WindowedTable.d.ts +2 -2
  20. package/dist/components/Table/types.d.ts +2 -2
  21. package/dist/components/Tabs/Tabs.d.ts +2 -2
  22. package/dist/components/Tooltip/Tooltip.d.ts +11 -1
  23. package/dist/components/Treeview/Treeview.d.ts +2 -2
  24. package/dist/esm/index.css +75 -170
  25. package/dist/esm/src/components/Backdrop/Backdrop.js +12 -0
  26. package/dist/esm/src/components/Backdrop/Backdrop.js.map +1 -0
  27. package/dist/esm/src/components/Button/Button.js +6 -9
  28. package/dist/esm/src/components/Button/Button.js.map +1 -1
  29. package/dist/esm/src/components/Button/util.js +42 -1
  30. package/dist/esm/src/components/Button/util.js.map +1 -1
  31. package/dist/esm/src/components/Calendar/Calendar.js +1 -1
  32. package/dist/esm/src/components/Checkbox/Checkbox.js +9 -1
  33. package/dist/esm/src/components/Checkbox/Checkbox.js.map +1 -1
  34. package/dist/esm/src/components/Combobox/Combobox.js +28 -24
  35. package/dist/esm/src/components/Combobox/Combobox.js.map +1 -1
  36. package/dist/esm/src/components/Combobox/useCombobox.js +32 -38
  37. package/dist/esm/src/components/Combobox/useCombobox.js.map +1 -1
  38. package/dist/esm/src/components/Datepicker/Datepicker.js +2 -2
  39. package/dist/esm/src/components/Dialog/Context.js +1 -0
  40. package/dist/esm/src/components/Dialog/Context.js.map +1 -1
  41. package/dist/esm/src/components/Dialog/Dialog.js +5 -4
  42. package/dist/esm/src/components/Dialog/Dialog.js.map +1 -1
  43. package/dist/esm/src/components/Dialog/components/Content.js +13 -13
  44. package/dist/esm/src/components/Dialog/components/Content.js.map +1 -1
  45. package/dist/esm/src/components/Dialog/components/Drawer.js +2 -1
  46. package/dist/esm/src/components/Dialog/components/Drawer.js.map +1 -1
  47. package/dist/esm/src/components/Dialog/components/Extra.js +2 -1
  48. package/dist/esm/src/components/Dialog/components/Extra.js.map +1 -1
  49. package/dist/esm/src/components/Dialog/components/Trigger.js +2 -1
  50. package/dist/esm/src/components/Dialog/components/Trigger.js.map +1 -1
  51. package/dist/esm/src/components/Hanger/Hanger.js +12 -9
  52. package/dist/esm/src/components/Hanger/Hanger.js.map +1 -1
  53. package/dist/esm/src/components/IconButton/IconButton.js +9 -11
  54. package/dist/esm/src/components/IconButton/IconButton.js.map +1 -1
  55. package/dist/esm/src/components/Input/util.js +6 -6
  56. package/dist/esm/src/components/Input/util.js.map +1 -1
  57. package/dist/esm/src/components/Listbox/Listbox.js +21 -5
  58. package/dist/esm/src/components/Listbox/Listbox.js.map +1 -1
  59. package/dist/esm/src/components/Listbox/ScrollableList.js +7 -5
  60. package/dist/esm/src/components/Listbox/ScrollableList.js.map +1 -1
  61. package/dist/esm/src/components/Navigation/Navigation.js +5 -4
  62. package/dist/esm/src/components/Navigation/Navigation.js.map +1 -1
  63. package/dist/esm/src/components/Pagination/PageNumbers.js +1 -1
  64. package/dist/esm/src/components/Pagination/Pagination.js +2 -1
  65. package/dist/esm/src/components/Pagination/Pagination.js.map +1 -1
  66. package/dist/esm/src/components/Popover/Popover.js +9 -6
  67. package/dist/esm/src/components/Popover/Popover.js.map +1 -1
  68. package/dist/esm/src/components/RadioGroup/RadioGroup.js +17 -16
  69. package/dist/esm/src/components/RadioGroup/RadioGroup.js.map +1 -1
  70. package/dist/esm/src/components/SearchInput/SearchInput.js +8 -7
  71. package/dist/esm/src/components/SearchInput/SearchInput.js.map +1 -1
  72. package/dist/esm/src/components/Select/Select.js +27 -25
  73. package/dist/esm/src/components/Select/Select.js.map +1 -1
  74. package/dist/esm/src/components/Select/useSelect.js +77 -37
  75. package/dist/esm/src/components/Select/useSelect.js.map +1 -1
  76. package/dist/esm/src/components/Table/components/PaginatedTable.js.map +1 -1
  77. package/dist/esm/src/components/Table/components/Table.js.map +1 -1
  78. package/dist/esm/src/components/Table/components/WindowedTable.js.map +1 -1
  79. package/dist/esm/src/components/Table/hooks/plugins/useRowActions.js +11 -5
  80. package/dist/esm/src/components/Table/hooks/plugins/useRowActions.js.map +1 -1
  81. package/dist/esm/src/components/Table/hooks/plugins/useRowSelect.js +3 -3
  82. package/dist/esm/src/components/Table/hooks/plugins/useRowSelect.js.map +1 -1
  83. package/dist/esm/src/components/Table/util/renderColumn.js +4 -3
  84. package/dist/esm/src/components/Table/util/renderColumn.js.map +1 -1
  85. package/dist/esm/src/components/Table/util/renderRow.js +4 -3
  86. package/dist/esm/src/components/Table/util/renderRow.js.map +1 -1
  87. package/dist/esm/src/components/Tabs/Tabs.js.map +1 -1
  88. package/dist/esm/src/components/Toast/Toast.js +1 -1
  89. package/dist/esm/src/components/Tooltip/Tooltip.js +11 -10
  90. package/dist/esm/src/components/Tooltip/Tooltip.js.map +1 -1
  91. package/dist/esm/src/components/Tour/Tour.js +2 -2
  92. package/dist/esm/src/components/Treeview/Treeview.js.map +1 -1
  93. package/dist/esm/src/index.js +8 -7
  94. package/dist/esm/src/index.js.map +1 -1
  95. package/dist/esm/src/primitives/Button.js +2 -12
  96. package/dist/esm/src/primitives/Button.js.map +1 -1
  97. package/dist/esm/src/utils/mergeRefs.js +14 -0
  98. package/dist/esm/src/utils/mergeRefs.js.map +1 -0
  99. package/dist/index.css +75 -170
  100. package/dist/index.d.ts +1 -0
  101. package/dist/primitives/Button.d.ts +0 -4
  102. package/dist/taco.cjs.development.js +1688 -1561
  103. package/dist/taco.cjs.development.js.map +1 -1
  104. package/dist/taco.cjs.production.min.js +1 -1
  105. package/dist/taco.cjs.production.min.js.map +1 -1
  106. package/dist/utils/mergeRefs.d.ts +2 -0
  107. package/package.json +4 -4
  108. package/types.json +7297 -0
@@ -155,14 +155,6 @@
155
155
  @apply max-h-full p-0;
156
156
  }
157
157
 
158
- [data-taco='button'] > [data-taco='icon'] {
159
- @apply pointer-events-none -ml-2 mr-1 -mt-2 -mb-2 inline p-px;
160
- }
161
-
162
- [data-taco='button'] > span + [data-taco='icon'] {
163
- @apply ml-1 -mr-2;
164
- }
165
-
166
158
  [data-taco='spinner'] svg circle {
167
159
  @apply flex;
168
160
  fill: transparent;
@@ -234,6 +226,51 @@
234
226
  @apply -mt-px py-0 px-2;
235
227
  }
236
228
 
229
+ [data-taco='hanger'] a {
230
+ @apply text-grey underline;
231
+ }
232
+
233
+ [data-taco='hanger'] > *:last-child {
234
+ @apply mb-0;
235
+ }
236
+
237
+ .yt-dialog__drag::before,
238
+ .yt-dialog__drag::after {
239
+ @apply bg-grey-dark absolute rounded;
240
+ content: '';
241
+ left: theme('spacing.1');
242
+ height: 2px;
243
+ width: calc(100% - (2 * theme('spacing.1')));
244
+ }
245
+
246
+ .yt-dialog__drag::before {
247
+ top: 3px;
248
+ }
249
+
250
+ .yt-dialog__drag::after {
251
+ bottom: 3px;
252
+ }
253
+
254
+ [data-taco='dialog'] *:last-child {
255
+ @apply mb-0;
256
+ }
257
+
258
+ [data-taco='group'] > [data-taco='badge'] + [data-taco='badge'] {
259
+ @apply ml-1;
260
+ }
261
+
262
+ [data-taco='group'] > *:not(:first-child):not([data-taco='hanger']) {
263
+ @apply ml-2;
264
+ }
265
+
266
+ [data-taco='button'] > [data-taco='icon'] {
267
+ @apply pointer-events-none -ml-2 mr-1 -mt-2 -mb-2 inline p-px;
268
+ }
269
+
270
+ [data-taco='button'] > span + [data-taco='icon'] {
271
+ @apply ml-1 -mr-2;
272
+ }
273
+
237
274
  [data-taco='calendar'] .DayPicker-wrapper {
238
275
  @apply relative select-none flex-row;
239
276
  }
@@ -320,20 +357,11 @@
320
357
  @apply font-semibold;
321
358
  }
322
359
 
323
- [data-taco='scrollable-list'][disabled] {
324
- @apply pointer-events-none;
325
- }
326
-
327
- [data-taco='scrollable-list'][disabled],
328
- [data-taco='scrollable-list'][readonly] {
329
- @apply cursor-not-allowed;
330
- }
331
-
332
360
  [data-taco='scrollable-list'].yt-list--multiselect li:first-child {
333
- @apply pl-4 border-b-2 border-grey-light; /* Listbox max-height is dependant on this border-bottom-width value! */
361
+ @apply border-grey-light border-b-2 pl-4; /* Listbox max-height is dependant on this border-bottom-width value! */
334
362
  }
335
363
 
336
- [data-taco='scrollable-list'] li [data-taco='icon'] {
364
+ [data-taco='scrollable-list'] li > [data-taco='icon'] {
337
365
  @apply mr-2;
338
366
  }
339
367
 
@@ -369,61 +397,22 @@
369
397
  [data-taco='scrollable-list'] li.yt-list__empty,
370
398
  [data-taco='scrollable-list'] li.yt-list__empty:hover,
371
399
  [data-taco='scrollable-list'] li.yt-list__empty:focus {
372
- @apply bg-white text-grey-darkest italic overflow-hidden;
400
+ @apply text-grey-darkest overflow-hidden bg-white italic;
373
401
  }
374
402
 
375
403
  [data-taco='scrollable-list'] li.yt-list__empty [data-taco='spinner'] {
376
404
  @apply mr-2 mt-2 h-5 w-5 opacity-75;
377
405
  }
378
406
 
379
- .yt-combobox.yt-combobox--inline .yt-input__container > .yt-button {
380
- @apply yt-transparent text-grey-darkest border-0 shadow-none;
381
- }
382
-
383
- .yt-combobox.yt-combobox--inline .yt-input__container > .yt-button:hover,
384
- .yt-combobox.yt-combobox--inline .yt-input__container > .yt-button:active,
385
- .yt-combobox.yt-combobox--inline .yt-input__container > .yt-button:focus {
386
- @apply yt-transparent text-black;
387
- }
388
-
389
- .yt-combobox [role='dialog'] {
407
+ [data-taco='combobox'] [role='dialog'] {
390
408
  @apply z-50;
391
409
  }
392
410
 
393
- .yt-combobox > [aria-expanded='true'] + [role='dialog'] > ul,
394
- .yt-combobox > [aria-expanded='true'] + [role='dialog'] > ul:hover {
411
+ [data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul,
412
+ [data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul:hover {
395
413
  @apply border-blue;
396
414
  }
397
415
 
398
- .yt-dialog__drag::before,
399
- .yt-dialog__drag::after {
400
- @apply absolute bg-grey-dark rounded;
401
- content: '';
402
- left: theme('spacing.1');
403
- height: 2px;
404
- width: calc(100% - (2 * theme('spacing.1')));
405
- }
406
-
407
- .yt-dialog__drag::before {
408
- top: 3px;
409
- }
410
-
411
- .yt-dialog__drag::after {
412
- bottom: 3px;
413
- }
414
-
415
- .yt-dialog *:last-child {
416
- @apply mb-0;
417
- }
418
-
419
- [data-taco='group'] > [data-taco='badge'] + [data-taco='badge'] {
420
- @apply ml-1;
421
- }
422
-
423
- [data-taco='group'] > *:not(:first-child):not([data-taco='hanger']) {
424
- @apply ml-2;
425
- }
426
-
427
416
  .yt-form > [data-taco='button'] {
428
417
  @apply mr-3;
429
418
  }
@@ -440,35 +429,11 @@
440
429
  @apply mt-6;
441
430
  }
442
431
 
443
- [data-taco='hanger'] a {
444
- @apply text-grey underline;
445
- }
446
-
447
- [data-taco='hanger'] > *:last-child {
448
- @apply mb-0;
449
- }
450
-
451
432
  /* label inside label is invalid html, but the client is littered with it */
452
433
  [data-taco='label'] [data-taco='label'] {
453
434
  min-height: 0;
454
435
  }
455
436
 
456
- .yt-listbox {
457
- @apply relative inline-flex w-full bg-white;
458
- }
459
-
460
- .yt-listbox > input {
461
- display: none;
462
- }
463
-
464
- .yt-listbox [data-taco='scrollable-list'] {
465
- max-height: calc(12rem + 2px); /* (6 * option height) + listbox border */
466
- }
467
-
468
- .yt-listbox [data-taco='scrollable-list'].yt-list--multiselect {
469
- max-height: calc(12rem + 2px + 2px); /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
470
- }
471
-
472
437
  .yt-navigation__item a,
473
438
  .yt-navigation__item .yt-navigation__item__postfix {
474
439
  @apply text-black;
@@ -508,49 +473,6 @@
508
473
  @apply border-white text-white;
509
474
  }
510
475
 
511
- [data-taco='select'] > button.yt-input {
512
- @apply relative inline-flex w-full items-center px-0;
513
- }
514
-
515
- [data-taco='select'] > button.yt-input > span:first-child {
516
- @apply flex-grow truncate pl-2 text-left;
517
- }
518
-
519
- [data-taco='select'] > button.yt-input .yt-icon {
520
- @apply pointer-events-none text-black;
521
- }
522
-
523
- [data-taco='select'] > button.yt-input[disabled] .yt-icon {
524
- @apply text-grey-dark;
525
- }
526
-
527
- [data-taco='select'][data-taco='select']--readonly > button.yt-input {
528
- @apply cursor-not-allowed;
529
- }
530
-
531
- [data-taco='select']:hover > button.yt-input .yt-icon,
532
- [data-taco='select'] > button.yt-input:hover .yt-icon,
533
- [data-taco='select'] > button.yt-input .yt-icon:hover {
534
- @apply text-grey-darkest;
535
- }
536
-
537
- [data-taco='select'] > button.yt-input[aria-expanded='true'],
538
- [data-taco='select'] > button.yt-input[aria-expanded='true']:hover {
539
- @apply border-blue;
540
- }
541
-
542
- [data-taco='select'] > button.yt-input[aria-expanded='true'] + .yt-listbox {
543
- @apply mt-1 flex;
544
- }
545
-
546
- [data-taco='select'] [role='dialog'] {
547
- @apply z-50;
548
- }
549
-
550
- [data-taco='select'] .yt-list {
551
- max-width: theme('spacing.96');
552
- }
553
-
554
476
  .yt-toast:hover [data-taco='progress-bar'] {
555
477
  animation-play-state: paused;
556
478
  }
@@ -584,81 +506,73 @@
584
506
  }
585
507
 
586
508
  .yt-table:focus {
587
- @apply rounded-sm yt-focus;
509
+ @apply yt-focus rounded-sm;
588
510
  }
589
511
 
590
512
  /* rows */
591
513
  .yt-table__row {
592
- @apply border-b border-grey-light flex;
514
+ @apply border-grey-light flex border-b;
593
515
  min-height: 2.5rem;
594
516
  }
595
517
 
596
518
  /* cells */
597
519
  .yt-table__cell {
598
- @apply flex-1 p-2 align-middle text-center truncate;
520
+ @apply flex-1 truncate p-2 text-center align-middle;
599
521
  }
600
522
 
601
- .yt-table__cell.yt-table__cell__actions {
602
- @apply flex justify-end px-1 overflow-visible;
603
- }
604
-
605
- .yt-table__cell > .yt-button,
606
- .yt-table__cell .yt-group > .yt-button {
607
- @apply -mt-1 -mb-1;
608
- }
609
-
610
- .yt-table__cell.yt-table__cell__actions .yt-group > *:not(:first-child):not(.yt-hanger):not(.yt-menu) {
611
- @apply ml-0;
523
+ .yt-table__cell > [data-taco='button'],
524
+ .yt-table__cell > [data-taco='icon-button'] {
525
+ @apply -mt-1 -mb-1 flex;
612
526
  }
613
527
 
614
528
  .yt-table__cell.yt-table__cell--draggable {
615
529
  @apply flex-col px-0;
616
530
  }
617
531
 
618
- .yt-table__cell.yt-table__cell--draggable .yt-icon {
619
- @apply cursor-grab invisible text-grey-darkest;
532
+ .yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
533
+ @apply text-grey-darkest invisible cursor-grab;
620
534
  width: 20px;
621
535
  }
622
536
 
623
- .yt-table__row.yt-table__row--dragging .yt-table__cell.yt-table__cell--draggable .yt-icon {
537
+ .yt-table__row.yt-table__row--dragging .yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
624
538
  @apply text-white;
625
539
  }
626
540
 
627
- .yt-table__cell.yt-table__cell--draggable .yt-icon:active {
541
+ .yt-table__cell.yt-table__cell--draggable [data-taco='icon']:active {
628
542
  @apply cursor-grabbing;
629
543
  }
630
544
 
631
- .yt-table__row:hover .yt-table__cell.yt-table__cell--draggable .yt-icon {
545
+ .yt-table__row:hover .yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
632
546
  @apply visible;
633
547
  }
634
548
 
635
549
  /* head */
636
550
  .yt-table__head .yt-table__row {
637
- @apply border-t-0 border-b-2 font-bold h-auto w-full select-none;
551
+ @apply h-auto w-full select-none border-t-0 border-b-2 font-bold;
638
552
  }
639
553
 
640
554
  .yt-table__head .yt-table__head__group {
641
- @apply flex flex-wrap flex-1;
555
+ @apply flex flex-1 flex-wrap;
642
556
  }
643
557
 
644
558
  .yt-table__head .yt-table__head__group .yt-table__cell.yt-table__cell__group {
645
- @apply border-b border-grey-light;
559
+ @apply border-grey-light border-b;
646
560
  flex-basis: 100%;
647
561
  }
648
562
 
649
563
  .yt-table__head .yt-table__head__group + .yt-table__head__group {
650
- @apply border-l border-grey-light;
564
+ @apply border-grey-light border-l;
651
565
  }
652
566
 
653
567
  .yt-table__head .yt-table__cell {
654
- @apply flex text-grey-darkest justify-center;
568
+ @apply text-grey-darkest flex justify-center;
655
569
  }
656
570
 
657
571
  .yt-table__head .yt-table__cell > span {
658
572
  @apply truncate;
659
573
  }
660
574
 
661
- .yt-table__head .yt-table__cell > .yt-icon {
575
+ .yt-table__head .yt-table__cell > [data-taco='icon'] {
662
576
  @apply flex-shrink-0;
663
577
  }
664
578
 
@@ -667,7 +581,7 @@
667
581
  }
668
582
 
669
583
  .yt-table__head .yt-table__cell.yt-table__cell__group + .yt-table__cell__group {
670
- @apply border-l-2 border-grey-light;
584
+ @apply border-grey-light border-l-2;
671
585
  }
672
586
 
673
587
  .yt-table__head .yt-table__cell:not(.yt-table__cell--disable-sort) {
@@ -723,35 +637,26 @@
723
637
  overflow-wrap: normal;
724
638
  }
725
639
 
726
- .yt-table__cell .yt-label {
727
- @apply text-transparent pb-0 -my-2;
640
+ .yt-table__cell [data-taco='label'] {
641
+ @apply -my-2 pb-0 text-transparent;
728
642
  min-height: theme('spacing.10');
729
643
  }
730
644
 
731
- .yt-table__cell .yt-label > *:not(.yt-label__message) {
645
+ .yt-table__cell [data-taco='label'] > *:not([data-taco='label']__message) {
732
646
  @apply mt-1;
733
647
  }
734
648
 
735
- .yt-table__body .yt-table__row.yt-table__row--editing .yt-table__cell .yt-label > *:not(.yt-label__message) {
649
+ .yt-table__body .yt-table__row.yt-table__row--editing .yt-table__cell [data-taco='label'] > *:not([data-taco='label']__message) {
736
650
  @apply -mt-5;
737
651
  }
738
652
 
739
- .yt-table__cell .yt-label > .yt-label__message {
653
+ .yt-table__cell [data-taco='label'] > [data-taco='label']__message {
740
654
  @apply mb-1;
741
655
  }
742
656
 
743
657
  /* drag */
744
658
  #yt-table__drag__placeholder {
745
- @apply bg-blue text-white rounded font-bold p-4 flex w-3/12;
746
- }
747
-
748
- /* cell alignment */
749
- .yt-table__cell.yt-table__cell--align-left {
750
- @apply justify-start text-left;
751
- }
752
-
753
- .yt-table__cell.yt-table__cell--align-right {
754
- @apply justify-end text-right;
659
+ @apply bg-blue flex w-3/12 rounded p-4 font-bold text-white;
755
660
  }
756
661
 
757
662
  .yt-tabs .yt-tab__list[aria-orientation='vertical'] {
@@ -0,0 +1,12 @@
1
+ import { createElement } from 'react';
2
+ import cn from 'classnames';
3
+
4
+ var Backdrop = function Backdrop(props) {
5
+ var className = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden', props.className);
6
+ return createElement("div", Object.assign({}, props, {
7
+ className: className
8
+ }));
9
+ };
10
+
11
+ export { Backdrop };
12
+ //# sourceMappingURL=Backdrop.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Backdrop.js","sources":["../../../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = (props: BackdropProps) => {\n const className = cn(\n 'fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden',\n props.className\n );\n\n return <div {...props} className={className} />;\n};\n"],"names":["Backdrop","props","className","cn","React"],"mappings":";;;IAKaA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD;AACpB,MAAMC,SAAS,GAAGC,EAAE,CAChB,iHADgB,EAEhBF,KAAK,CAACC,SAFU,CAApB;AAKA,SAAOE,aAAA,MAAA,oBAASH;AAAOC,IAAAA,SAAS,EAAEA;IAA3B,CAAP;AACH;;;;"}
@@ -1,8 +1,7 @@
1
- import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
2
- import { forwardRef, createElement } from 'react';
1
+ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
2
+ import { forwardRef } from 'react';
3
3
  import cn from 'classnames';
4
- import { Button as Button$1 } from '../../primitives/Button.js';
5
- import { getButtonClasses, getAppearanceClasses } from './util.js';
4
+ import { getButtonClasses, getAppearanceClasses, createButton } from './util.js';
6
5
 
7
6
  var _excluded = ["appearance", "fluid"];
8
7
  var Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
@@ -15,11 +14,9 @@ var Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
15
14
  'focus:yt-focus active:focus:yt-focus': !props.disabled,
16
15
  'w-full': fluid
17
16
  }, props.className);
18
- return createElement(Button$1, Object.assign({}, otherProps, {
19
- className: className,
20
- "data-taco": "button",
21
- ref: ref
22
- }));
17
+ return createButton(_extends({}, otherProps, {
18
+ 'data-taco': 'button'
19
+ }), className, ref);
23
20
  });
24
21
 
25
22
  export { Button };
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport './Button.css';\nimport { getAppearanceClasses, getButtonClasses } from './util';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n /** Appearance will change the style of the button */\n appearance?: Appearance;\n /** If fluid, button expands to the width of it's container */\n fluid?: boolean;\n};\n\nexport const Button = React.forwardRef(function Button(\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n const { appearance, fluid, ...otherProps } = props;\n const className = cn(\n getButtonClasses(),\n getAppearanceClasses(appearance),\n 'rounded px-3',\n {\n 'cursor-not-allowed opacity-50': props.disabled,\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\n 'w-full': fluid,\n },\n props.className\n );\n\n return <ButtonPrimitive.Button {...otherProps} className={className} data-taco=\"button\" ref={ref} />;\n});\n"],"names":["Button","React","props","ref","appearance","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","ButtonPrimitive"],"mappings":";;;;;;;IAcaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CACnCE,KADmC,EAEnCC,GAFmC;AAInC,MAAQC,UAAR,GAA6CF,KAA7C,CAAQE,UAAR;AAAA,MAAoBC,KAApB,GAA6CH,KAA7C,CAAoBG,KAApB;AAAA,MAA8BC,UAA9B,iCAA6CJ,KAA7C;;AACA,MAAMK,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACN,UAAD,CAFJ,EAGhB,cAHgB,EAIhB;AACI,qCAAiCF,KAAK,CAACS,QAD3C;AAEI,4CAAwC,CAACT,KAAK,CAACS,QAFnD;AAGI,cAAUN;AAHd,GAJgB,EAShBH,KAAK,CAACK,SATU,CAApB;AAYA,SAAON,aAAA,CAACW,QAAD,oBAA4BN;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAASJ,IAAAA,GAAG,EAAEA;IAAtF,CAAP;AACH,CAlBqB;;;;"}
1
+ {"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButton } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n /** Appearance will change the style of the button */\n appearance?: Appearance;\n /**\n * Dialog component associated with the button, clicking the button will open the dialog.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated dialog when clicked.\n */\n dialog?: React.ReactElement<DialogProps>;\n /** If fluid, button expands to the width of it's container */\n fluid?: boolean;\n /** Hanger component associated with the button. */\n hanger?: React.ReactElement<HangerProps>;\n /**\n * Popover component associated with the button, clicking the button will open the popover.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated popover when clicked.\n */\n popover?: React.ReactElement<PopoverProps>;\n /** A tooltip to show when hovering over the button */\n tooltip?: string;\n};\n\nexport const Button = React.forwardRef(function Button(\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n const { appearance, fluid, ...otherProps } = props;\n const className = cn(\n getButtonClasses(),\n getAppearanceClasses(appearance),\n 'rounded px-3',\n {\n 'cursor-not-allowed opacity-50': props.disabled,\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\n 'w-full': fluid,\n },\n props.className\n );\n\n return createButton({ ...otherProps, 'data-taco': 'button' }, className, ref);\n});\n"],"names":["Button","React","props","ref","appearance","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","createButton"],"mappings":";;;;;;IAiCaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CACnCE,KADmC,EAEnCC,GAFmC;AAInC,MAAQC,UAAR,GAA6CF,KAA7C,CAAQE,UAAR;AAAA,MAAoBC,KAApB,GAA6CH,KAA7C,CAAoBG,KAApB;AAAA,MAA8BC,UAA9B,iCAA6CJ,KAA7C;;AACA,MAAMK,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACN,UAAD,CAFJ,EAGhB,cAHgB,EAIhB;AACI,qCAAiCF,KAAK,CAACS,QAD3C;AAEI,4CAAwC,CAACT,KAAK,CAACS,QAFnD;AAGI,cAAUN;AAHd,GAJgB,EAShBH,KAAK,CAACK,SATU,CAApB;AAYA,SAAOK,YAAY,cAAMN,UAAN;AAAkB,iBAAa;AAA/B,MAA2CC,SAA3C,EAAsDJ,GAAtD,CAAnB;AACH,CAlBqB;;;;"}
@@ -1,3 +1,12 @@
1
+ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
2
+ import React__default from 'react';
3
+ import { Button } from '../../primitives/Button.js';
4
+ import { Tooltip } from '../Tooltip/Tooltip.js';
5
+ import { Hanger } from '../Hanger/Hanger.js';
6
+ import { Dialog } from '../Dialog/Dialog.js';
7
+ import { Popover } from '../Popover/Popover.js';
8
+
9
+ var _excluded = ["dialog", "hanger", "popover", "tooltip"];
1
10
  var getButtonClasses = function getButtonClasses() {
2
11
  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';
3
12
  };
@@ -29,6 +38,38 @@ var getAppearanceClasses = function getAppearanceClasses(value, icon) {
29
38
  return "yt-grey-solid border-grey\n focus:bg-grey focus:yt-focus\n active:bg-grey-dark active:text-black\n hover:bg-grey-light hover:text-grey-darkest\n hover:focus:bg-grey-light hover:focus:text-grey-darkest\n disabled:hover:yt-grey-solid";
30
39
  }
31
40
  };
41
+ var createButton = function createButton(props, className, ref) {
42
+ var dialog = props.dialog,
43
+ hanger = props.hanger,
44
+ popover = props.popover,
45
+ tooltip = props.tooltip,
46
+ otherProps = _objectWithoutPropertiesLoose(props, _excluded);
47
+
48
+ var button = React__default.createElement(Button, Object.assign({}, otherProps, {
49
+ className: className,
50
+ ref: ref
51
+ }));
52
+
53
+ if (hanger) {
54
+ button = React__default.createElement(Hanger, Object.assign({}, hanger.props), React__default.createElement(Hanger.Anchor, null, button), hanger.props.children);
55
+ }
56
+
57
+ if (dialog) {
58
+ button = React__default.createElement(Dialog, Object.assign({}, dialog.props), React__default.createElement(Dialog.Trigger, null, button), dialog.props.children);
59
+ }
60
+
61
+ if (popover) {
62
+ button = React__default.createElement(Popover, Object.assign({}, popover.props), React__default.createElement(Popover.Trigger, null, button), popover.props.children);
63
+ }
64
+
65
+ if (tooltip) {
66
+ button = React__default.createElement(Tooltip, {
67
+ title: tooltip
68
+ }, button);
69
+ }
70
+
71
+ return button;
72
+ };
32
73
 
33
- export { getAppearanceClasses, getButtonClasses };
74
+ export { createButton, getAppearanceClasses, getButtonClasses };
34
75
  //# sourceMappingURL=util.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"util.js","sources":["../../../../../src/components/Button/util.ts"],"sourcesContent":["import { Appearance } from '../../types';\n\nexport const getButtonClasses = () => {\n return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `yt-blue-solid border-blue\n focus:bg-blue focus:text-white focus:yt-focus\n active:bg-blue-dark active:text-white \n hover:bg-blue-light hover:border-blue-light hover:text-white\n hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white\n disabled:hover:yt-blue-solid`;\n\n case 'danger':\n return `yt-red-solid border-red\n focus:bg-red focus:text-white focus:yt-focus-red\n active:bg-red-dark active:text-white \n hover:bg-red-light hover:text-white\n hover:focus:bg-red-light hover:focus:text-white\n disabled:hover:yt-red-solid`;\n\n case 'ghost':\n return `yt-blue-inverted\n focus:bg-transparent focus:text-blue focus:yt-focus\n active:bg-blue-lightest active:border-blue active:text-blue-dark \n hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light\n hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light\n disabled:hover:yt-blue-inverted`;\n\n case 'discrete': {\n if (icon) {\n return `bg-transparent text-black border-transparent\n focus:text-black focus:yt-focus\n active:text-black\n hover:text-grey-darkest\n hover:focus:text-grey-darkest\n disabled:hover:yt-transparent`;\n }\n\n return `yt-transparent border-transparent\n focus:text-blue focus:yt-focus\n active:text-blue-dark\n hover:text-blue-light\n hover:focus:text-blue-light\n disabled:hover:yt-transparent`;\n }\n\n default:\n return `yt-grey-solid border-grey\n focus:bg-grey focus:yt-focus\n active:bg-grey-dark active:text-black\n hover:bg-grey-light hover:text-grey-darkest\n hover:focus:bg-grey-light hover:focus:text-grey-darkest\n disabled:hover:yt-grey-solid`;\n }\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon"],"mappings":"IAEaA,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAO,6IAAP;AACH;IAEYC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAgCC,IAAhC;MAAgCA;AAAAA,IAAAA,OAAO;;;AACvE,UAAQD,KAAR;AACI,SAAK,SAAL;AACI;;AAOJ,SAAK,QAAL;AACI;;AAOJ,SAAK,OAAL;AACI;;AAOJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN;AAMH;;AAED;AAMH;;AAED;AACI;AA5CR;AAmDH;;;;"}
1
+ {"version":3,"file":"util.js","sources":["../../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { Hanger } from '../Hanger/Hanger';\nimport { Dialog } from '../Dialog/Dialog';\nimport { Popover } from '../Popover/Popover';\n\nexport const getButtonClasses = () => {\n return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `yt-blue-solid border-blue\n focus:bg-blue focus:text-white focus:yt-focus\n active:bg-blue-dark active:text-white \n hover:bg-blue-light hover:border-blue-light hover:text-white\n hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white\n disabled:hover:yt-blue-solid`;\n\n case 'danger':\n return `yt-red-solid border-red\n focus:bg-red focus:text-white focus:yt-focus-red\n active:bg-red-dark active:text-white \n hover:bg-red-light hover:text-white\n hover:focus:bg-red-light hover:focus:text-white\n disabled:hover:yt-red-solid`;\n\n case 'ghost':\n return `yt-blue-inverted\n focus:bg-transparent focus:text-blue focus:yt-focus\n active:bg-blue-lightest active:border-blue active:text-blue-dark \n hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light\n hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light\n disabled:hover:yt-blue-inverted`;\n\n case 'discrete': {\n if (icon) {\n return `bg-transparent text-black border-transparent\n focus:text-black focus:yt-focus\n active:text-black\n hover:text-grey-darkest\n hover:focus:text-grey-darkest\n disabled:hover:yt-transparent`;\n }\n\n return `yt-transparent border-transparent\n focus:text-blue focus:yt-focus\n active:text-blue-dark\n hover:text-blue-light\n hover:focus:text-blue-light\n disabled:hover:yt-transparent`;\n }\n\n default:\n return `yt-grey-solid border-grey\n focus:bg-grey focus:yt-focus\n active:bg-grey-dark active:text-black\n hover:bg-grey-light hover:text-grey-darkest\n hover:focus:bg-grey-light hover:focus:text-grey-darkest\n disabled:hover:yt-grey-solid`;\n }\n};\n\nexport const createButton = (\n props: any,\n className: string,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n const { dialog, hanger, popover, tooltip, ...otherProps } = props;\n\n let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\n\n if (hanger) {\n button = (\n <Hanger {...hanger.props}>\n <Hanger.Anchor>{button}</Hanger.Anchor>\n {hanger.props.children}\n </Hanger>\n );\n }\n\n if (dialog) {\n button = (\n <Dialog {...dialog.props}>\n <Dialog.Trigger>{button}</Dialog.Trigger>\n {dialog.props.children}\n </Dialog>\n );\n }\n\n if (popover) {\n button = (\n <Popover {...popover.props}>\n <Popover.Trigger>{button}</Popover.Trigger>\n {popover.props.children}\n </Popover>\n );\n }\n\n if (tooltip) {\n button = <Tooltip title={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButton","props","className","ref","dialog","hanger","popover","tooltip","otherProps","button","React","ButtonPrimitive","Hanger","Anchor","children","Dialog","Trigger","Popover","Tooltip","title"],"mappings":";;;;;;;;;IAQaA,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAO,6IAAP;AACH;IAEYC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAgCC,IAAhC;MAAgCA;AAAAA,IAAAA,OAAO;;;AACvE,UAAQD,KAAR;AACI,SAAK,SAAL;AACI;;AAOJ,SAAK,QAAL;AACI;;AAOJ,SAAK,OAAL;AACI;;AAOJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN;AAMH;;AAED;AAMH;;AAED;AACI;AA5CR;AAmDH;IAEYC,YAAY,GAAG,SAAfA,YAAe,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;AAKxB,MAAQC,MAAR,GAA4DH,KAA5D,CAAQG,MAAR;AAAA,MAAgBC,MAAhB,GAA4DJ,KAA5D,CAAgBI,MAAhB;AAAA,MAAwBC,OAAxB,GAA4DL,KAA5D,CAAwBK,OAAxB;AAAA,MAAiCC,OAAjC,GAA4DN,KAA5D,CAAiCM,OAAjC;AAAA,MAA6CC,UAA7C,iCAA4DP,KAA5D;;AAEA,MAAIQ,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;AAAYN,IAAAA,SAAS,EAAEA;AAAWC,IAAAA,GAAG,EAAEA;IAAnE,CAAb;;AAEA,MAAIE,MAAJ,EAAY;AACRI,IAAAA,MAAM,GACFC,4BAAA,CAACE,MAAD,oBAAYP,MAAM,CAACJ,MAAnB,EACIS,4BAAA,CAACE,MAAM,CAACC,MAAR,MAAA,EAAgBJ,MAAhB,CADJ,EAEKJ,MAAM,CAACJ,KAAP,CAAaa,QAFlB,CADJ;AAMH;;AAED,MAAIV,MAAJ,EAAY;AACRK,IAAAA,MAAM,GACFC,4BAAA,CAACK,MAAD,oBAAYX,MAAM,CAACH,MAAnB,EACIS,4BAAA,CAACK,MAAM,CAACC,OAAR,MAAA,EAAiBP,MAAjB,CADJ,EAEKL,MAAM,CAACH,KAAP,CAAaa,QAFlB,CADJ;AAMH;;AAED,MAAIR,OAAJ,EAAa;AACTG,IAAAA,MAAM,GACFC,4BAAA,CAACO,OAAD,oBAAaX,OAAO,CAACL,MAArB,EACIS,4BAAA,CAACO,OAAO,CAACD,OAAT,MAAA,EAAkBP,MAAlB,CADJ,EAEKH,OAAO,CAACL,KAAR,CAAca,QAFnB,CADJ;AAMH;;AAED,MAAIP,OAAJ,EAAa;AACTE,IAAAA,MAAM,GAAGC,4BAAA,CAACQ,OAAD;AAASC,MAAAA,KAAK,EAAEZ;KAAhB,EAA0BE,MAA1B,CAAT;AACH;;AAED,SAAOA,MAAP;AACH;;;;"}
@@ -1,9 +1,9 @@
1
1
  import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
2
2
  import { forwardRef, useState, useEffect, createElement, memo } from 'react';
3
3
  import cn from 'classnames';
4
+ import { useLocalization } from '../Provider/Provider.js';
4
5
  import { IconButton } from '../IconButton/IconButton.js';
5
6
  import ReactDayPicker from 'react-day-picker';
6
- import { useLocalization } from '../Provider/Provider.js';
7
7
 
8
8
  var _excluded = ["onChange", "value"];
9
9
 
@@ -21,11 +21,19 @@ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
21
21
  'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
22
22
  'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled
23
23
  }, props.className);
24
+ var handleChange;
25
+
26
+ if (onChange) {
27
+ handleChange = function handleChange(checked) {
28
+ return onChange(checked === 'indeterminate' ? false : checked);
29
+ };
30
+ }
31
+
24
32
  var element = createElement(Root, Object.assign({}, otherProps, {
25
33
  "data-taco": "checkbox",
26
34
  checked: indeterminate ? 'indeterminate' : checked,
27
35
  className: className,
28
- onCheckedChange: onChange,
36
+ onCheckedChange: handleChange,
29
37
  ref: ref
30
38
  }), createElement(Indicator, {
31
39
  className: "flex h-full w-full"
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n /* Increases visual prominenance of the checkbox */\n highlighted?: boolean;\n /**\n * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n */\n indeterminate?: boolean;\n /* Whether the checkbox is in an invalid state */\n invalid?: boolean;\n /** Label for the checkbox */\n label?: React.ReactNode;\n /* Whether user input is required */\n required?: boolean;\n};\n\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\n checked?: never;\n onChange?: never;\n /* The default checked state (uncontrolled) */\n defaultChecked?: boolean;\n}\n\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\n defaultChecked?: never;\n /* The current checked state (controlled) */\n checked: boolean;\n /* Handler called when the checked state changes */\n onChange: (checked: boolean | 'indeterminate') => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\n\n const className = cn(\n 'h-5 w-5 border rounded text-sm',\n {\n 'mr-2': !!label,\n 'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,\n 'border-grey text-blue-light cursor-not-allowed': props.disabled,\n 'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\n 'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled,\n },\n props.className\n );\n\n const element = (\n <CheckboxPrimitive.Root\n {...otherProps}\n data-taco=\"checkbox\"\n checked={indeterminate ? 'indeterminate' : checked}\n className={className}\n onCheckedChange={onChange}\n ref={ref}\n >\n <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n\n if (label) {\n const labelClassName = cn('flex items-center cursor-pointer', {\n 'cursor-not-allowed text-grey-dark': props.disabled,\n });\n\n return (\n <label className={labelClassName}>\n {element}\n {label}\n </label>\n );\n }\n\n return element;\n});\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","className","cn","disabled","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelClassName"],"mappings":";;;;;;;IAsCaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAAQC,OAAR,GAAyFF,KAAzF,CAAQE,OAAR;AAAA,MAAiBC,WAAjB,GAAyFH,KAAzF,CAAiBG,WAAjB;AAAA,MAA8BC,aAA9B,GAAyFJ,KAAzF,CAA8BI,aAA9B;AAAA,MAA6CC,OAA7C,GAAyFL,KAAzF,CAA6CK,OAA7C;AAAA,MAAsDC,KAAtD,GAAyFN,KAAzF,CAAsDM,KAAtD;AAAA,MAA6DC,QAA7D,GAAyFP,KAAzF,CAA6DO,QAA7D;AAAA,MAA0EC,UAA1E,iCAAyFR,KAAzF;;AAEA,MAAMS,SAAS,GAAGC,EAAE,CAChB,gCADgB,EAEhB;AACI,YAAQ,CAAC,CAACJ,KADd;AAEI,mEAA+D,CAACN,KAAK,CAACW,QAAP,IAAmB,CAACN,OAFvF;AAGI,sDAAkDL,KAAK,CAACW,QAH5D;AAII,oEAAgER,WAJpE;AAKI,+DAA2DE,OAAO,IAAI,CAACL,KAAK,CAACW;AALjF,GAFgB,EAShBX,KAAK,CAACS,SATU,CAApB;AAYA,MAAMG,OAAO,GACTb,aAAA,CAACc,IAAD,oBACQL;iBACM;AACVN,IAAAA,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;AAC3CO,IAAAA,SAAS,EAAEA;AACXK,IAAAA,eAAe,EAAEP;AACjBN,IAAAA,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACc,SAAD;AAA6BJ,IAAAA,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACgB,IAAD;AAAMC,IAAAA,IAAI,EAAEZ,aAAa,GAAG,MAAH,GAAY;AAAQK,IAAAA,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;AAeA,MAAIH,KAAJ,EAAW;AACP,QAAMW,cAAc,GAAGP,EAAE,CAAC,kCAAD,EAAqC;AAC1D,2CAAqCV,KAAK,CAACW;AADe,KAArC,CAAzB;AAIA,WACIZ,aAAA,QAAA;AAAOU,MAAAA,SAAS,EAAEQ;KAAlB,EACKL,OADL,EAEKN,KAFL,CADJ;AAMH;;AAED,SAAOM,OAAP;AACH,CA5CuB;;;;"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n /* Increases visual prominenance of the checkbox */\n highlighted?: boolean;\n /**\n * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n */\n indeterminate?: boolean;\n /* Whether the checkbox is in an invalid state */\n invalid?: boolean;\n /** Label for the checkbox */\n label?: React.ReactNode;\n /* Whether user input is required */\n required?: boolean;\n};\n\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\n checked?: never;\n onChange?: never;\n /* The default checked state (uncontrolled) */\n defaultChecked?: boolean;\n}\n\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\n defaultChecked?: never;\n /* The current checked state (controlled) */\n checked: boolean;\n /* Handler called when the checked state changes */\n onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\n\n const className = cn(\n 'h-5 w-5 border rounded text-sm',\n {\n 'mr-2': !!label,\n 'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,\n 'border-grey text-blue-light cursor-not-allowed': props.disabled,\n 'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\n 'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled,\n },\n props.className\n );\n\n let handleChange: ((checked: CheckedState) => void) | undefined;\n\n if (onChange) {\n handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n }\n\n const element = (\n <CheckboxPrimitive.Root\n {...otherProps}\n data-taco=\"checkbox\"\n checked={indeterminate ? 'indeterminate' : checked}\n className={className}\n onCheckedChange={handleChange}\n ref={ref}\n >\n <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n\n if (label) {\n const labelClassName = cn('flex items-center cursor-pointer', {\n 'cursor-not-allowed text-grey-dark': props.disabled,\n });\n\n return (\n <label className={labelClassName}>\n {element}\n {label}\n </label>\n );\n }\n\n return element;\n});\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","className","cn","disabled","handleChange","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelClassName"],"mappings":";;;;;;;IAwCaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAAQC,OAAR,GAAyFF,KAAzF,CAAQE,OAAR;AAAA,MAAiBC,WAAjB,GAAyFH,KAAzF,CAAiBG,WAAjB;AAAA,MAA8BC,aAA9B,GAAyFJ,KAAzF,CAA8BI,aAA9B;AAAA,MAA6CC,OAA7C,GAAyFL,KAAzF,CAA6CK,OAA7C;AAAA,MAAsDC,KAAtD,GAAyFN,KAAzF,CAAsDM,KAAtD;AAAA,MAA6DC,QAA7D,GAAyFP,KAAzF,CAA6DO,QAA7D;AAAA,MAA0EC,UAA1E,iCAAyFR,KAAzF;;AAEA,MAAMS,SAAS,GAAGC,EAAE,CAChB,gCADgB,EAEhB;AACI,YAAQ,CAAC,CAACJ,KADd;AAEI,mEAA+D,CAACN,KAAK,CAACW,QAAP,IAAmB,CAACN,OAFvF;AAGI,sDAAkDL,KAAK,CAACW,QAH5D;AAII,oEAAgER,WAJpE;AAKI,+DAA2DE,OAAO,IAAI,CAACL,KAAK,CAACW;AALjF,GAFgB,EAShBX,KAAK,CAACS,SATU,CAApB;AAYA,MAAIG,YAAJ;;AAEA,MAAIL,QAAJ,EAAc;AACVK,IAAAA,YAAY,GAAG,sBAACV,OAAD;AAAA,aAA2BK,QAAQ,CAACL,OAAO,KAAK,eAAZ,GAA8B,KAA9B,GAAsCA,OAAvC,CAAnC;AAAA,KAAf;AACH;;AAED,MAAMW,OAAO,GACTd,aAAA,CAACe,IAAD,oBACQN;iBACM;AACVN,IAAAA,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;AAC3CO,IAAAA,SAAS,EAAEA;AACXM,IAAAA,eAAe,EAAEH;AACjBX,IAAAA,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACe,SAAD;AAA6BL,IAAAA,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACiB,IAAD;AAAMC,IAAAA,IAAI,EAAEb,aAAa,GAAG,MAAH,GAAY;AAAQK,IAAAA,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;AAeA,MAAIH,KAAJ,EAAW;AACP,QAAMY,cAAc,GAAGR,EAAE,CAAC,kCAAD,EAAqC;AAC1D,2CAAqCV,KAAK,CAACW;AADe,KAArC,CAAzB;AAIA,WACIZ,aAAA,QAAA;AAAOU,MAAAA,SAAS,EAAES;KAAlB,EACKL,OADL,EAEKP,KAFL,CADJ;AAMH;;AAED,SAAOO,OAAP;AACH,CAlDuB;;;;"}