@creativecodeco/ui 0.5.0 → 0.6.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/lib/hooks/use-safe-button-props.hook.d.ts +2 -2
  2. package/lib/theme/css/badge.css +45 -0
  3. package/lib/theme/css/button.css +4 -2
  4. package/lib/theme/css/main.css +1 -0
  5. package/lib/theme/main.css +614 -230
  6. package/lib/types/ui/components/badge.types.d.ts +12 -0
  7. package/lib/types/ui/components/badge.types.js +1 -0
  8. package/lib/types/ui/components/button.types.d.ts +4 -1
  9. package/lib/types/ui/components/index.d.ts +1 -0
  10. package/lib/ui/components/badge/badge.component.d.ts +3 -0
  11. package/lib/ui/components/badge/badge.component.js +19 -0
  12. package/lib/ui/components/badge/index.d.ts +2 -0
  13. package/lib/ui/components/badge/index.js +2 -0
  14. package/lib/ui/components/button/button.component.js +4 -3
  15. package/lib/ui/components/index.d.ts +1 -0
  16. package/lib/ui/components/index.js +1 -0
  17. package/package.json +3 -3
package/lib/hooks/use-safe-button-props.hook.d.ts CHANGED
@@ -6,8 +6,9 @@ export default function useSafeButtonProps({ onClick, onSubmit, loading, ...prop
6
6
  }): {
7
7
  onClick: (event: ButtonEvent) => void;
8
8
  onSubmit: (event: ButtonEvent) => void;
9
- name?: string | undefined;
9
+ children?: import("react").ReactNode;
10
10
  color?: string | undefined;
11
+ name?: string | undefined;
11
12
  disabled?: boolean | undefined;
12
13
  onChange?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
13
14
  value?: string | number | readonly string[] | undefined;
@@ -118,7 +119,6 @@ export default function useSafeButtonProps({ onClick, onSubmit, loading, ...prop
118
119
  "aria-valuemin"?: number | undefined;
119
120
  "aria-valuenow"?: number | undefined;
120
121
  "aria-valuetext"?: string | undefined;
121
- children?: import("react").ReactNode;
122
122
  dangerouslySetInnerHTML?: {
123
123
  __html: string | TrustedHTML;
124
124
  } | undefined;
package/lib/theme/css/badge.css ADDED
@@ -0,0 +1,45 @@
1
+ .badge {
2
+ &-size {
3
+ &-lg {
4
+ @apply badge-lg;
5
+ }
6
+
7
+ &-sm {
8
+ @apply badge-sm;
9
+ }
10
+
11
+ &-xs {
12
+ @apply badge-xs;
13
+ }
14
+ }
15
+
16
+ &-color {
17
+ &-primary {
18
+ @apply badge-primary;
19
+ }
20
+
21
+ &-secondary {
22
+ @apply badge-secondary;
23
+ }
24
+
25
+ &-accent {
26
+ @apply badge-accent;
27
+ }
28
+
29
+ &-success {
30
+ @apply badge-success;
31
+ }
32
+
33
+ &-warning {
34
+ @apply badge-warning;
35
+ }
36
+
37
+ &-info {
38
+ @apply badge-info;
39
+ }
40
+
41
+ &-error {
42
+ @apply badge-error;
43
+ }
44
+ }
45
+ }
package/lib/theme/css/button.css CHANGED
@@ -1,6 +1,4 @@
1
1
  .button {
2
- @apply btn;
3
-
4
2
  &-link {
5
3
  @apply btn-link;
6
4
  }
@@ -41,6 +39,10 @@
41
39
  &-error {
42
40
  @apply btn-error;
43
41
  }
42
+
43
+ &-ghost {
44
+ @apply btn-ghost;
45
+ }
44
46
  }
45
47
 
46
48
  &-size {
package/lib/theme/css/main.css CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  @import './accordion.css';
6
6
  @import './avatar.css';
7
+ @import './badge.css';
7
8
  @import './button.css';
8
9
  @import './checkbox.css';
9
10
  @import './radio.css';
package/lib/theme/main.css CHANGED
@@ -671,6 +671,32 @@ html {
671
671
  align-items: center;
672
672
  justify-content: center;
673
673
  }
674
+ .badge {
675
+ display: inline-flex;
676
+ align-items: center;
677
+ justify-content: center;
678
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
679
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
680
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
681
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
682
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
683
+ transition-duration: 200ms;
684
+ height: 1.25rem;
685
+ font-size: 0.875rem;
686
+ line-height: 1.25rem;
687
+ width: -moz-fit-content;
688
+ width: fit-content;
689
+ padding-left: 0.563rem;
690
+ padding-right: 0.563rem;
691
+ border-radius: var(--rounded-badge, 1.9rem);
692
+ border-width: 1px;
693
+ --tw-border-opacity: 1;
694
+ border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
695
+ --tw-bg-opacity: 1;
696
+ background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
697
+ --tw-text-opacity: 1;
698
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
699
+ }
674
700
  @media (hover:hover) {
675
701
 
676
702
  .label a:hover {
@@ -698,6 +724,61 @@ html {
698
724
  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
699
725
  }
700
726
  }
727
+ .btn {
728
+ display: inline-flex;
729
+ height: 3rem;
730
+ min-height: 3rem;
731
+ flex-shrink: 0;
732
+ cursor: pointer;
733
+ -webkit-user-select: none;
734
+ -moz-user-select: none;
735
+ user-select: none;
736
+ flex-wrap: wrap;
737
+ align-items: center;
738
+ justify-content: center;
739
+ border-radius: var(--rounded-btn, 0.5rem);
740
+ border-color: transparent;
741
+ border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
742
+ padding-left: 1rem;
743
+ padding-right: 1rem;
744
+ text-align: center;
745
+ font-size: 0.875rem;
746
+ line-height: 1em;
747
+ gap: 0.5rem;
748
+ font-weight: 600;
749
+ text-decoration-line: none;
750
+ transition-duration: 200ms;
751
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
752
+ border-width: var(--border-btn, 1px);
753
+ animation: button-pop var(--animation-btn, 0.25s) ease-out;
754
+ transition-property: color, background-color, border-color, opacity, box-shadow, transform;
755
+ --tw-text-opacity: 1;
756
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
757
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
758
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
759
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
760
+ outline-color: var(--fallback-bc,oklch(var(--bc)/1));
761
+ background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
762
+ --tw-bg-opacity: 1;
763
+ --tw-border-opacity: 1;
764
+ }
765
+ .btn-disabled,
766
+ .btn[disabled],
767
+ .btn:disabled {
768
+ pointer-events: none;
769
+ }
770
+ :where(.btn:is(input[type="checkbox"])),
771
+ :where(.btn:is(input[type="radio"])) {
772
+ width: auto;
773
+ -webkit-appearance: none;
774
+ -moz-appearance: none;
775
+ appearance: none;
776
+ }
777
+ .btn:is(input[type="checkbox"]):after,
778
+ .btn:is(input[type="radio"]):after {
779
+ --tw-content: attr(aria-label);
780
+ content: var(--tw-content);
781
+ }
701
782
  .checkbox {
702
783
  flex-shrink: 0;
703
784
  --chkbg: var(--fallback-bc,oklch(var(--bc)/1));
@@ -859,6 +940,160 @@ html {
859
940
  --tw-text-opacity: 0.2;
860
941
  }
861
942
 
943
+ .btn:hover {
944
+ --tw-border-opacity: 1;
945
+ border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
946
+ --tw-bg-opacity: 1;
947
+ background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
948
+ }
949
+
950
+ @supports (color: color-mix(in oklab, black, black)) {
951
+
952
+ .btn:hover {
953
+ background-color: color-mix(
954
+ in oklab,
955
+ oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
956
+ black
957
+ );
958
+ border-color: color-mix(
959
+ in oklab,
960
+ oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
961
+ black
962
+ );
963
+ }
964
+ }
965
+
966
+ @supports not (color: oklch(0 0 0)) {
967
+
968
+ .btn:hover {
969
+ background-color: var(--btn-color, var(--fallback-b2));
970
+ border-color: var(--btn-color, var(--fallback-b2));
971
+ }
972
+ }
973
+
974
+ .btn.glass:hover {
975
+ --glass-opacity: 25%;
976
+ --glass-border-opacity: 15%;
977
+ }
978
+
979
+ .btn-outline:hover {
980
+ --tw-border-opacity: 1;
981
+ border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
982
+ --tw-bg-opacity: 1;
983
+ background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
984
+ --tw-text-opacity: 1;
985
+ color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)));
986
+ }
987
+
988
+ .btn-outline.btn-primary:hover {
989
+ --tw-text-opacity: 1;
990
+ color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
991
+ }
992
+
993
+ @supports (color: color-mix(in oklab, black, black)) {
994
+
995
+ .btn-outline.btn-primary:hover {
996
+ background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
997
+ border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
998
+ }
999
+ }
1000
+
1001
+ .btn-outline.btn-secondary:hover {
1002
+ --tw-text-opacity: 1;
1003
+ color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
1004
+ }
1005
+
1006
+ @supports (color: color-mix(in oklab, black, black)) {
1007
+
1008
+ .btn-outline.btn-secondary:hover {
1009
+ background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
1010
+ border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
1011
+ }
1012
+ }
1013
+
1014
+ .btn-outline.btn-accent:hover {
1015
+ --tw-text-opacity: 1;
1016
+ color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
1017
+ }
1018
+
1019
+ @supports (color: color-mix(in oklab, black, black)) {
1020
+
1021
+ .btn-outline.btn-accent:hover {
1022
+ background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
1023
+ border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
1024
+ }
1025
+ }
1026
+
1027
+ .btn-outline.btn-success:hover {
1028
+ --tw-text-opacity: 1;
1029
+ color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
1030
+ }
1031
+
1032
+ @supports (color: color-mix(in oklab, black, black)) {
1033
+
1034
+ .btn-outline.btn-success:hover {
1035
+ background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
1036
+ border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
1037
+ }
1038
+ }
1039
+
1040
+ .btn-outline.btn-info:hover {
1041
+ --tw-text-opacity: 1;
1042
+ color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
1043
+ }
1044
+
1045
+ @supports (color: color-mix(in oklab, black, black)) {
1046
+
1047
+ .btn-outline.btn-info:hover {
1048
+ background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
1049
+ border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
1050
+ }
1051
+ }
1052
+
1053
+ .btn-outline.btn-warning:hover {
1054
+ --tw-text-opacity: 1;
1055
+ color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
1056
+ }
1057
+
1058
+ @supports (color: color-mix(in oklab, black, black)) {
1059
+
1060
+ .btn-outline.btn-warning:hover {
1061
+ background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
1062
+ border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
1063
+ }
1064
+ }
1065
+
1066
+ .btn-outline.btn-error:hover {
1067
+ --tw-text-opacity: 1;
1068
+ color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
1069
+ }
1070
+
1071
+ @supports (color: color-mix(in oklab, black, black)) {
1072
+
1073
+ .btn-outline.btn-error:hover {
1074
+ background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
1075
+ border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
1076
+ }
1077
+ }
1078
+
1079
+ .btn-disabled:hover,
1080
+ .btn[disabled]:hover,
1081
+ .btn:disabled:hover {
1082
+ --tw-border-opacity: 0;
1083
+ background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
1084
+ --tw-bg-opacity: 0.2;
1085
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
1086
+ --tw-text-opacity: 0.2;
1087
+ }
1088
+
1089
+ @supports (color: color-mix(in oklab, black, black)) {
1090
+
1091
+ .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
1092
+ background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
1093
+ border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
1094
+ }
1095
+ }
1096
+
862
1097
  .dropdown.dropdown-hover:hover .dropdown-content {
863
1098
  --tw-scale-x: 1;
864
1099
  --tw-scale-y: 1;
@@ -1193,6 +1428,52 @@ html {
1193
1428
  --tw-border-opacity: 1;
1194
1429
  border-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-border-opacity)));
1195
1430
  }
1431
+ .badge-primary {
1432
+ --tw-border-opacity: 1;
1433
+ border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
1434
+ --tw-bg-opacity: 1;
1435
+ background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
1436
+ --tw-text-opacity: 1;
1437
+ color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1438
+ }
1439
+ .badge-outline {
1440
+ border-color: currentColor;
1441
+ --tw-border-opacity: 0.5;
1442
+ background-color: transparent;
1443
+ color: currentColor;
1444
+ }
1445
+ .badge-outline.badge-neutral {
1446
+ --tw-text-opacity: 1;
1447
+ color: var(--fallback-n,oklch(var(--n)/var(--tw-text-opacity)));
1448
+ }
1449
+ .badge-outline.badge-primary {
1450
+ --tw-text-opacity: 1;
1451
+ color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
1452
+ }
1453
+ .badge-outline.badge-secondary {
1454
+ --tw-text-opacity: 1;
1455
+ color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)));
1456
+ }
1457
+ .badge-outline.badge-accent {
1458
+ --tw-text-opacity: 1;
1459
+ color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)));
1460
+ }
1461
+ .badge-outline.badge-info {
1462
+ --tw-text-opacity: 1;
1463
+ color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity)));
1464
+ }
1465
+ .badge-outline.badge-success {
1466
+ --tw-text-opacity: 1;
1467
+ color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity)));
1468
+ }
1469
+ .badge-outline.badge-warning {
1470
+ --tw-text-opacity: 1;
1471
+ color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)));
1472
+ }
1473
+ .badge-outline.badge-error {
1474
+ --tw-text-opacity: 1;
1475
+ color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
1476
+ }
1196
1477
  .btm-nav > *.\!disabled {
1197
1478
  pointer-events: none !important;
1198
1479
  --tw-border-opacity: 0 !important;
@@ -1214,6 +1495,179 @@ html {
1214
1495
  font-size: 1rem;
1215
1496
  line-height: 1.5rem;
1216
1497
  }
1498
+ .btn:active:hover,
1499
+ .btn:active:focus {
1500
+ animation: button-pop 0s ease-out;
1501
+ transform: scale(var(--btn-focus-scale, 0.97));
1502
+ }
1503
+ @supports not (color: oklch(0 0 0)) {
1504
+
1505
+ .btn {
1506
+ background-color: var(--btn-color, var(--fallback-b2));
1507
+ border-color: var(--btn-color, var(--fallback-b2));
1508
+ }
1509
+
1510
+ .btn-primary {
1511
+ --btn-color: var(--fallback-p);
1512
+ }
1513
+ }
1514
+ @supports (color: color-mix(in oklab, black, black)) {
1515
+
1516
+ .btn-outline.btn-primary.btn-active {
1517
+ background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
1518
+ border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
1519
+ }
1520
+
1521
+ .btn-outline.btn-secondary.btn-active {
1522
+ background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
1523
+ border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
1524
+ }
1525
+
1526
+ .btn-outline.btn-accent.btn-active {
1527
+ background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
1528
+ border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
1529
+ }
1530
+
1531
+ .btn-outline.btn-success.btn-active {
1532
+ background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
1533
+ border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
1534
+ }
1535
+
1536
+ .btn-outline.btn-info.btn-active {
1537
+ background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
1538
+ border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
1539
+ }
1540
+
1541
+ .btn-outline.btn-warning.btn-active {
1542
+ background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
1543
+ border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
1544
+ }
1545
+
1546
+ .btn-outline.btn-error.btn-active {
1547
+ background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
1548
+ border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
1549
+ }
1550
+ }
1551
+ .btn:focus-visible {
1552
+ outline-style: solid;
1553
+ outline-width: 2px;
1554
+ outline-offset: 2px;
1555
+ }
1556
+ .btn-primary {
1557
+ --tw-text-opacity: 1;
1558
+ color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1559
+ outline-color: var(--fallback-p,oklch(var(--p)/1));
1560
+ }
1561
+ @supports (color: oklch(0 0 0)) {
1562
+
1563
+ .btn-primary {
1564
+ --btn-color: var(--p);
1565
+ }
1566
+ }
1567
+ .btn.glass {
1568
+ --tw-shadow: 0 0 #0000;
1569
+ --tw-shadow-colored: 0 0 #0000;
1570
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1571
+ outline-color: currentColor;
1572
+ }
1573
+ .btn.glass.btn-active {
1574
+ --glass-opacity: 25%;
1575
+ --glass-border-opacity: 15%;
1576
+ }
1577
+ .btn-outline {
1578
+ border-color: currentColor;
1579
+ background-color: transparent;
1580
+ --tw-text-opacity: 1;
1581
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
1582
+ --tw-shadow: 0 0 #0000;
1583
+ --tw-shadow-colored: 0 0 #0000;
1584
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1585
+ }
1586
+ .btn-outline.btn-active {
1587
+ --tw-border-opacity: 1;
1588
+ border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
1589
+ --tw-bg-opacity: 1;
1590
+ background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
1591
+ --tw-text-opacity: 1;
1592
+ color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)));
1593
+ }
1594
+ .btn-outline.btn-primary {
1595
+ --tw-text-opacity: 1;
1596
+ color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
1597
+ }
1598
+ .btn-outline.btn-primary.btn-active {
1599
+ --tw-text-opacity: 1;
1600
+ color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1601
+ }
1602
+ .btn-outline.btn-secondary {
1603
+ --tw-text-opacity: 1;
1604
+ color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)));
1605
+ }
1606
+ .btn-outline.btn-secondary.btn-active {
1607
+ --tw-text-opacity: 1;
1608
+ color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
1609
+ }
1610
+ .btn-outline.btn-accent {
1611
+ --tw-text-opacity: 1;
1612
+ color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)));
1613
+ }
1614
+ .btn-outline.btn-accent.btn-active {
1615
+ --tw-text-opacity: 1;
1616
+ color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
1617
+ }
1618
+ .btn-outline.btn-success {
1619
+ --tw-text-opacity: 1;
1620
+ color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity)));
1621
+ }
1622
+ .btn-outline.btn-success.btn-active {
1623
+ --tw-text-opacity: 1;
1624
+ color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
1625
+ }
1626
+ .btn-outline.btn-info {
1627
+ --tw-text-opacity: 1;
1628
+ color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity)));
1629
+ }
1630
+ .btn-outline.btn-info.btn-active {
1631
+ --tw-text-opacity: 1;
1632
+ color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
1633
+ }
1634
+ .btn-outline.btn-warning {
1635
+ --tw-text-opacity: 1;
1636
+ color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)));
1637
+ }
1638
+ .btn-outline.btn-warning.btn-active {
1639
+ --tw-text-opacity: 1;
1640
+ color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
1641
+ }
1642
+ .btn-outline.btn-error {
1643
+ --tw-text-opacity: 1;
1644
+ color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
1645
+ }
1646
+ .btn-outline.btn-error.btn-active {
1647
+ --tw-text-opacity: 1;
1648
+ color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
1649
+ }
1650
+ .btn.btn-disabled,
1651
+ .btn[disabled],
1652
+ .btn:disabled {
1653
+ --tw-border-opacity: 0;
1654
+ background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
1655
+ --tw-bg-opacity: 0.2;
1656
+ color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
1657
+ --tw-text-opacity: 0.2;
1658
+ }
1659
+ .btn:is(input[type="checkbox"]:checked),
1660
+ .btn:is(input[type="radio"]:checked) {
1661
+ --tw-border-opacity: 1;
1662
+ border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
1663
+ --tw-bg-opacity: 1;
1664
+ background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
1665
+ --tw-text-opacity: 1;
1666
+ color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
1667
+ }
1668
+ .btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
1669
+ outline-color: var(--fallback-p,oklch(var(--p)/1));
1670
+ }
1217
1671
  @keyframes button-pop {
1218
1672
 
1219
1673
  0% {
@@ -2026,6 +2480,9 @@ details.collapse summary::-webkit-details-marker {
2026
2480
  --tw-text-opacity: 1;
2027
2481
  color: rgb(239 68 68 / var(--tw-text-opacity));
2028
2482
  }
2483
+ .\!outline {
2484
+ outline-style: solid !important;
2485
+ }
2029
2486
  .outline {
2030
2487
  outline-style: solid;
2031
2488
  }
@@ -2081,245 +2538,65 @@ details.collapse summary::-webkit-details-marker {
2081
2538
  .collapse-open.accordion-type-plus > .collapse-title:after,.accordion-type-plus:focus:not(.collapse-close) > .collapse-title:after,.accordion-type-plus:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,.accordion-type-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
2082
2539
  content: "−";
2083
2540
  }
2084
- .avatar-size-xs {
2085
- width: 2rem;
2086
- }
2087
- .avatar-size-xs > span {
2088
- font-size: 0.75rem;
2089
- line-height: 1rem;
2090
- }
2091
- .avatar-size-sm {
2092
- width: 3rem;
2093
- }
2094
- .avatar-size-sm > span {
2095
- font-size: 0.875rem;
2096
- line-height: 1.25rem;
2097
- }
2098
- .avatar-size-md {
2099
- width: 4rem;
2100
- }
2101
- .avatar-size-md > span {
2102
- font-size: 1.25rem;
2103
- line-height: 1.75rem;
2104
- }
2105
- .avatar-size-lg {
2106
- width: 6rem;
2107
- }
2108
- .avatar-size-lg > span {
2109
- font-size: 1.875rem;
2110
- line-height: 2.25rem;
2111
- }
2112
- .avatar-ring {
2113
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2114
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2115
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2116
- --tw-ring-opacity: 1;
2117
- --tw-ring-color: var(--fallback-p,oklch(var(--p)/var(--tw-ring-opacity)));
2118
- --tw-ring-offset-width: 2px;
2119
- --tw-ring-offset-color: var(--fallback-b1,oklch(var(--b1)/1));
2120
- }
2121
- .button {
2122
- display: inline-flex;
2123
- height: 3rem;
2124
- min-height: 3rem;
2125
- flex-shrink: 0;
2126
- cursor: pointer;
2127
- -webkit-user-select: none;
2128
- -moz-user-select: none;
2129
- user-select: none;
2130
- flex-wrap: wrap;
2131
- align-items: center;
2132
- justify-content: center;
2133
- border-radius: var(--rounded-btn, 0.5rem);
2134
- border-color: transparent;
2135
- border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
2136
- padding-left: 1rem;
2137
- padding-right: 1rem;
2138
- text-align: center;
2139
- font-size: 0.875rem;
2140
- line-height: 1em;
2141
- gap: 0.5rem;
2142
- font-weight: 600;
2143
- text-decoration-line: none;
2144
- transition-duration: 200ms;
2145
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2146
- border-width: var(--border-btn, 1px);
2147
- animation: button-pop var(--animation-btn, 0.25s) ease-out;
2148
- transition-property: color, background-color, border-color, opacity, box-shadow, transform;
2149
- --tw-text-opacity: 1;
2150
- color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
2151
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
2152
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
2153
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2154
- outline-color: var(--fallback-bc,oklch(var(--bc)/1));
2155
- background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));
2156
- --tw-bg-opacity: 1;
2157
- --tw-border-opacity: 1;
2541
+ .avatar-size-xs {
2542
+ width: 2rem;
2158
2543
  }
2159
- .button[disabled],.button:disabled {
2160
- pointer-events: none;
2544
+ .avatar-size-xs > span {
2545
+ font-size: 0.75rem;
2546
+ line-height: 1rem;
2161
2547
  }
2162
- :where(.button:is(input[type="checkbox"])),
2163
- :where(.button:is(input[type="radio"])) {
2164
- width: auto;
2165
- -webkit-appearance: none;
2166
- -moz-appearance: none;
2167
- appearance: none;
2548
+ .avatar-size-sm {
2549
+ width: 3rem;
2168
2550
  }
2169
- .button:is(input[type="checkbox"]):after,.button:is(input[type="radio"]):after {
2170
- --tw-content: attr(aria-label);
2171
- content: var(--tw-content);
2551
+ .avatar-size-sm > span {
2552
+ font-size: 0.875rem;
2553
+ line-height: 1.25rem;
2172
2554
  }
2173
- @media (hover: hover) {
2174
-
2175
- .button:hover {
2176
- --tw-border-opacity: 1;
2177
- border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
2178
- --tw-bg-opacity: 1;
2179
- background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
2180
- }
2181
-
2182
- @supports (color: color-mix(in oklab, black, black)) {
2183
-
2184
- .button:hover {
2185
- background-color: color-mix(
2186
- in oklab,
2187
- oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
2188
- black
2189
- );
2190
- border-color: color-mix(
2191
- in oklab,
2192
- oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
2193
- black
2194
- );
2195
- }
2196
- }
2197
-
2198
- @supports not (color: oklch(0 0 0)) {
2199
-
2200
- .button:hover {
2201
- background-color: var(--btn-color, var(--fallback-b2));
2202
- border-color: var(--btn-color, var(--fallback-b2));
2203
- }
2204
- }
2205
-
2206
- .button:hover {
2207
- --tw-border-opacity: 1;
2208
- border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
2209
- --tw-bg-opacity: 1;
2210
- background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
2211
- }
2212
-
2213
- @supports (color: color-mix(in oklab, black, black)) {
2214
-
2215
- .button:hover {
2216
- background-color: color-mix(
2217
- in oklab,
2218
- oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
2219
- black
2220
- );
2221
- border-color: color-mix(
2222
- in oklab,
2223
- oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
2224
- black
2225
- );
2226
- }
2227
- }
2228
-
2229
- @supports not (color: oklch(0 0 0)) {
2230
-
2231
- .button:hover {
2232
- background-color: var(--btn-color, var(--fallback-b2));
2233
- border-color: var(--btn-color, var(--fallback-b2));
2234
- }
2235
- }
2236
-
2237
- .button:hover {
2238
- --tw-border-opacity: 1;
2239
- border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
2240
- --tw-bg-opacity: 1;
2241
- background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
2242
- }
2243
-
2244
- @supports (color: color-mix(in oklab, black, black)) {
2245
-
2246
- .button:hover {
2247
- background-color: color-mix(
2248
- in oklab,
2249
- oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
2250
- black
2251
- );
2252
- border-color: color-mix(
2253
- in oklab,
2254
- oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
2255
- black
2256
- );
2257
- }
2258
- }
2259
-
2260
- @supports not (color: oklch(0 0 0)) {
2261
-
2262
- .button:hover {
2263
- background-color: var(--btn-color, var(--fallback-b2));
2264
- border-color: var(--btn-color, var(--fallback-b2));
2265
- }
2266
- }
2267
-
2268
- .button.glass:hover {
2269
- --glass-opacity: 25%;
2270
- --glass-border-opacity: 15%;
2271
- }
2272
-
2273
- .button[disabled]:hover,.button:disabled:hover {
2274
- --tw-border-opacity: 0;
2275
- background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
2276
- --tw-bg-opacity: 0.2;
2277
- color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
2278
- --tw-text-opacity: 0.2;
2279
- }
2280
-
2281
- @supports (color: color-mix(in oklab, black, black)) {
2282
-
2283
- .button:is(input[type="checkbox"]:checked):hover,.button:is(input[type="radio"]:checked):hover {
2284
- background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
2285
- border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
2286
- }
2287
- }
2555
+ .avatar-size-md {
2556
+ width: 4rem;
2288
2557
  }
2289
- .button:active:hover,.button:active:focus {
2290
- animation: button-pop 0s ease-out;
2291
- transform: scale(var(--btn-focus-scale, 0.97));
2558
+ .avatar-size-md > span {
2559
+ font-size: 1.25rem;
2560
+ line-height: 1.75rem;
2292
2561
  }
2293
- @supports not (color: oklch(0 0 0)) {
2294
-
2295
- .button {
2296
- background-color: var(--btn-color, var(--fallback-b2));
2297
- border-color: var(--btn-color, var(--fallback-b2));
2298
- }
2562
+ .avatar-size-lg {
2563
+ width: 6rem;
2299
2564
  }
2300
- .button:focus-visible {
2301
- outline-style: solid;
2302
- outline-width: 2px;
2303
- outline-offset: 2px;
2565
+ .avatar-size-lg > span {
2566
+ font-size: 1.875rem;
2567
+ line-height: 2.25rem;
2304
2568
  }
2305
- .button.glass {
2306
- --tw-shadow: 0 0 #0000;
2307
- --tw-shadow-colored: 0 0 #0000;
2308
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2309
- outline-color: currentColor;
2569
+ .avatar-ring {
2570
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2571
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2572
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2573
+ --tw-ring-opacity: 1;
2574
+ --tw-ring-color: var(--fallback-p,oklch(var(--p)/var(--tw-ring-opacity)));
2575
+ --tw-ring-offset-width: 2px;
2576
+ --tw-ring-offset-color: var(--fallback-b1,oklch(var(--b1)/1));
2310
2577
  }
2311
- .button.glass.btn-active {
2312
- --glass-opacity: 25%;
2313
- --glass-border-opacity: 15%;
2578
+ .badge-size-lg {
2579
+ height: 1.5rem;
2580
+ font-size: 1rem;
2581
+ line-height: 1.5rem;
2582
+ padding-left: 0.688rem;
2583
+ padding-right: 0.688rem;
2314
2584
  }
2315
- .button.btn-disabled,.button[disabled],.button:disabled {
2316
- --tw-border-opacity: 0;
2317
- background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
2318
- --tw-bg-opacity: 0.2;
2319
- color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
2320
- --tw-text-opacity: 0.2;
2585
+ .badge-size-sm {
2586
+ height: 1rem;
2587
+ font-size: 0.75rem;
2588
+ line-height: 1rem;
2589
+ padding-left: 0.438rem;
2590
+ padding-right: 0.438rem;
2591
+ }
2592
+ .badge-size-xs {
2593
+ height: 0.75rem;
2594
+ font-size: 0.75rem;
2595
+ line-height: .75rem;
2596
+ padding-left: 0.313rem;
2597
+ padding-right: 0.313rem;
2321
2598
  }
2322
- .button:is(input[type="checkbox"]:checked),.button:is(input[type="radio"]:checked) {
2599
+ .badge-color-primary {
2323
2600
  --tw-border-opacity: 1;
2324
2601
  border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
2325
2602
  --tw-bg-opacity: 1;
@@ -2327,8 +2604,77 @@ details.collapse summary::-webkit-details-marker {
2327
2604
  --tw-text-opacity: 1;
2328
2605
  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
2329
2606
  }
2330
- .button:is(input[type="checkbox"]:checked):focus-visible,.button:is(input[type="radio"]:checked):focus-visible {
2331
- outline-color: var(--fallback-p,oklch(var(--p)/1));
2607
+ .badge-outline.badge-color-primary {
2608
+ --tw-text-opacity: 1;
2609
+ color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
2610
+ }
2611
+ .badge-color-secondary {
2612
+ --tw-border-opacity: 1;
2613
+ border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
2614
+ --tw-bg-opacity: 1;
2615
+ background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));
2616
+ --tw-text-opacity: 1;
2617
+ color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
2618
+ }
2619
+ .badge-outline.badge-color-secondary {
2620
+ --tw-text-opacity: 1;
2621
+ color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)));
2622
+ }
2623
+ .badge-color-accent {
2624
+ --tw-border-opacity: 1;
2625
+ border-color: var(--fallback-a,oklch(var(--a)/var(--tw-border-opacity)));
2626
+ --tw-bg-opacity: 1;
2627
+ background-color: var(--fallback-a,oklch(var(--a)/var(--tw-bg-opacity)));
2628
+ --tw-text-opacity: 1;
2629
+ color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
2630
+ }
2631
+ .badge-outline.badge-color-accent {
2632
+ --tw-text-opacity: 1;
2633
+ color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)));
2634
+ }
2635
+ .badge-color-success {
2636
+ border-color: transparent;
2637
+ --tw-bg-opacity: 1;
2638
+ background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
2639
+ --tw-text-opacity: 1;
2640
+ color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
2641
+ }
2642
+ .badge-outline.badge-color-success {
2643
+ --tw-text-opacity: 1;
2644
+ color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity)));
2645
+ }
2646
+ .badge-color-warning {
2647
+ border-color: transparent;
2648
+ --tw-bg-opacity: 1;
2649
+ background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
2650
+ --tw-text-opacity: 1;
2651
+ color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
2652
+ }
2653
+ .badge-outline.badge-color-warning {
2654
+ --tw-text-opacity: 1;
2655
+ color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)));
2656
+ }
2657
+ .badge-color-info {
2658
+ border-color: transparent;
2659
+ --tw-bg-opacity: 1;
2660
+ background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity)));
2661
+ --tw-text-opacity: 1;
2662
+ color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
2663
+ }
2664
+ .badge-outline.badge-color-info {
2665
+ --tw-text-opacity: 1;
2666
+ color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity)));
2667
+ }
2668
+ .badge-color-error {
2669
+ border-color: transparent;
2670
+ --tw-bg-opacity: 1;
2671
+ background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
2672
+ --tw-text-opacity: 1;
2673
+ color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
2674
+ }
2675
+ .badge-outline.badge-color-error {
2676
+ --tw-text-opacity: 1;
2677
+ color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
2332
2678
  }
2333
2679
  @media (hover: hover) {
2334
2680
 
@@ -3094,6 +3440,44 @@ details.collapse summary::-webkit-details-marker {
3094
3440
  --tw-text-opacity: 1;
3095
3441
  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
3096
3442
  }
3443
+ @media (hover: hover) {
3444
+
3445
+ .button-color-ghost:hover {
3446
+ border-color: transparent;
3447
+ }
3448
+
3449
+ @supports (color: oklch(0 0 0)) {
3450
+
3451
+ .button-color-ghost:hover {
3452
+ background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
3453
+ }
3454
+ }
3455
+
3456
+ .button-color-ghost:hover {
3457
+ border-color: transparent;
3458
+ }
3459
+
3460
+ @supports (color: oklch(0 0 0)) {
3461
+
3462
+ .button-color-ghost:hover {
3463
+ background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
3464
+ }
3465
+ }
3466
+ }
3467
+ .button-color-ghost {
3468
+ border-width: 1px;
3469
+ border-color: transparent;
3470
+ background-color: transparent;
3471
+ color: currentColor;
3472
+ --tw-shadow: 0 0 #0000;
3473
+ --tw-shadow-colored: 0 0 #0000;
3474
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3475
+ outline-color: currentColor;
3476
+ }
3477
+ .button-color-ghost.btn-active {
3478
+ border-color: transparent;
3479
+ background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
3480
+ }
3097
3481
  .button-size-lg {
3098
3482
  height: 4rem;
3099
3483
  min-height: 4rem;
package/lib/types/ui/components/badge.types.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import type { ColorType, SizeType } from '../../../types';
3
+ import type { IconType } from 'react-icons';
4
+ import type { PositionType } from '../../../types';
5
+ export interface BadgeType {
6
+ children: React.ReactNode;
7
+ color?: ColorType;
8
+ outline?: boolean;
9
+ size?: SizeType;
10
+ icon?: IconType;
11
+ iconPosition?: PositionType;
12
+ }
package/lib/types/ui/components/badge.types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/lib/types/ui/components/button.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import type { ColorButtonType, SizeType } from '../../../types';
2
+ import type { BadgeType, ColorButtonType, SizeType } from '../../../types';
3
3
  import type { IconType } from 'react-icons';
4
4
  import type { PositionType } from '../../../types';
5
5
  export interface ButtonType extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -11,5 +11,8 @@ export interface ButtonType extends React.ButtonHTMLAttributes<HTMLButtonElement
11
11
  iconPosition?: PositionType;
12
12
  loading?: boolean;
13
13
  loadingLabel?: string;
14
+ withBadge?: boolean;
15
+ badge?: React.ReactNode;
16
+ badgeProps?: Omit<BadgeType, 'children' | 'size'>;
14
17
  }
15
18
  export type ButtonRef = HTMLButtonElement;
package/lib/types/ui/components/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export type * from './accordion.types';
2
2
  export type * from './avatar.types';
3
+ export type * from './badge.types';
3
4
  export type * from './button.types';
package/lib/ui/components/badge/badge.component.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { BadgeType } from '../../../types';
2
+ declare const Badge: ({ children, color, icon: Icon, iconPosition, outline, size }: BadgeType) => import("react/jsx-runtime").JSX.Element;
3
+ export default Badge;
package/lib/ui/components/badge/badge.component.js ADDED
@@ -0,0 +1,19 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useMemo } from 'react';
3
+ import cls from 'classnames';
4
+ const Badge = ({ children, color, icon: Icon, iconPosition = 'left', outline, size = 'md' }) => {
5
+ const newIcon = useMemo(() => {
6
+ if (!Icon) {
7
+ return;
8
+ }
9
+ return _jsx(Icon, {});
10
+ }, [Icon]);
11
+ return (_jsxs("div", { className: cls('badge', {
12
+ [`badge-color-${color}`]: !outline && color,
13
+ [`badge-${color}`]: outline && color,
14
+ 'badge-outline': outline,
15
+ [`badge-size-${size}`]: size !== 'md',
16
+ 'gap-2': Icon
17
+ }), children: [iconPosition === 'left' && newIcon, children, iconPosition === 'right' && newIcon] }));
18
+ };
19
+ export default Badge;
package/lib/ui/components/badge/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import Badge from './badge.component';
2
+ export { Badge };
package/lib/ui/components/badge/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import Badge from './badge.component';
2
+ export { Badge };
package/lib/ui/components/button/button.component.js CHANGED
@@ -16,10 +16,11 @@ const Button = forwardRef(({ children, isLink, color, outline, size = 'md', icon
16
16
  }
17
17
  return (_jsxs(_Fragment, { children: [iconPosition === 'left' && newIcon, children, iconPosition === 'right' && newIcon] }));
18
18
  }, [loading, loadingLabel, iconPosition, children, newIcon]);
19
- return (_jsx("button", { ref: ref, className: cls('button', {
19
+ return (_jsx("button", { ref: ref, className: cls('btn', {
20
20
  'button-link': isLink,
21
- 'button-outline': !isLink && outline,
22
- [`button-color-${color}`]: !isLink && color,
21
+ 'btn-outline': !isLink && outline,
22
+ [`btn-${color}`]: outline && color,
23
+ [`button-color-${color}`]: !outline && color,
23
24
  [`button-size-${size}`]: size !== 'md',
24
25
  'button-loading': loading
25
26
  }), ...safeProps, children: content }));
package/lib/ui/components/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from './accordion';
2
2
  export * from './avatar';
3
+ export * from './badge';
3
4
  export * from './button';
package/lib/ui/components/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from './accordion';
2
2
  export * from './avatar';
3
+ export * from './badge';
3
4
  export * from './button';
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "framework design",
11
11
  "design system"
12
12
  ],
13
- "version": "0.5.0",
13
+ "version": "0.6.0",
14
14
  "homepage": "https://github.com/creativecodeco/ui",
15
15
  "author": {
16
16
  "name": "John Toro",
@@ -74,8 +74,8 @@
74
74
  "@testing-library/react": "14.2.1",
75
75
  "@testing-library/user-event": "14.5.2",
76
76
  "@types/jest": "29.5.12",
77
- "@types/node": "20.11.21",
78
- "@types/react": "18.2.60",
77
+ "@types/node": "20.11.24",
78
+ "@types/react": "18.2.61",
79
79
  "@types/react-dom": "18.2.19",
80
80
  "@typescript-eslint/eslint-plugin": "6.21.0",
81
81
  "autoprefixer": "10.4.17",