@lindle/linoardo 1.0.21 → 1.0.22

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.
package/dist/styles.css CHANGED
@@ -15,6 +15,7 @@
15
15
  --color-red-500: oklch(63.7% 0.237 25.331);
16
16
  --color-red-600: oklch(57.7% 0.245 27.325);
17
17
  --color-red-700: oklch(50.5% 0.213 27.518);
18
+ --color-red-900: oklch(39.6% 0.141 25.723);
18
19
  --color-orange-400: oklch(75% 0.183 55.934);
19
20
  --color-amber-50: oklch(98.7% 0.022 95.277);
20
21
  --color-amber-100: oklch(96.2% 0.059 95.617);
@@ -25,6 +26,7 @@
25
26
  --color-amber-600: oklch(66.6% 0.179 58.318);
26
27
  --color-amber-700: oklch(55.5% 0.163 48.998);
27
28
  --color-amber-800: oklch(47.3% 0.137 46.201);
29
+ --color-amber-900: oklch(41.4% 0.112 45.904);
28
30
  --color-yellow-100: oklch(97.3% 0.071 103.193);
29
31
  --color-yellow-300: oklch(90.5% 0.182 98.111);
30
32
  --color-yellow-400: oklch(85.2% 0.199 91.936);
@@ -38,6 +40,7 @@
38
40
  --color-emerald-500: oklch(69.6% 0.17 162.48);
39
41
  --color-emerald-600: oklch(59.6% 0.145 163.225);
40
42
  --color-emerald-700: oklch(50.8% 0.118 165.612);
43
+ --color-emerald-900: oklch(37.8% 0.077 168.94);
41
44
  --color-cyan-400: oklch(78.9% 0.154 211.53);
42
45
  --color-sky-50: oklch(97.7% 0.013 236.62);
43
46
  --color-sky-100: oklch(95.1% 0.026 236.824);
@@ -47,7 +50,9 @@
47
50
  --color-sky-500: oklch(68.5% 0.169 237.323);
48
51
  --color-sky-600: oklch(58.8% 0.158 241.966);
49
52
  --color-sky-700: oklch(50% 0.134 242.749);
53
+ --color-sky-900: oklch(39.1% 0.09 240.876);
50
54
  --color-blue-500: oklch(62.3% 0.214 259.815);
55
+ --color-indigo-500: oklch(58.5% 0.233 277.117);
51
56
  --color-indigo-600: oklch(51.1% 0.262 276.966);
52
57
  --color-rose-400: oklch(71.2% 0.194 13.428);
53
58
  --color-slate-50: oklch(98.4% 0.003 247.858);
@@ -107,7 +112,10 @@
107
112
  --radius-xl: 0.75rem;
108
113
  --radius-2xl: 1rem;
109
114
  --radius-3xl: 1.5rem;
115
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
110
116
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
117
+ --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
118
+ --blur-sm: 8px;
111
119
  --blur-md: 12px;
112
120
  --blur-3xl: 64px;
113
121
  --default-transition-duration: 150ms;
@@ -295,9 +303,18 @@
295
303
  .relative {
296
304
  position: relative;
297
305
  }
306
+ .static {
307
+ position: static;
308
+ }
309
+ .sticky {
310
+ position: sticky;
311
+ }
298
312
  .inset-0 {
299
313
  inset: calc(var(--spacing) * 0);
300
314
  }
315
+ .inset-x-0 {
316
+ inset-inline: calc(var(--spacing) * 0);
317
+ }
301
318
  .inset-y-0 {
302
319
  inset-block: calc(var(--spacing) * 0);
303
320
  }
@@ -391,6 +408,9 @@
391
408
  .z-50 {
392
409
  z-index: 50;
393
410
  }
411
+ .z-70 {
412
+ z-index: 70;
413
+ }
394
414
  .z-\[60\] {
395
415
  z-index: 60;
396
416
  }
@@ -424,12 +444,21 @@
424
444
  .mx-auto {
425
445
  margin-inline: auto;
426
446
  }
447
+ .-mt-1 {
448
+ margin-top: calc(var(--spacing) * -1);
449
+ }
450
+ .mt-0\.5 {
451
+ margin-top: calc(var(--spacing) * 0.5);
452
+ }
427
453
  .mt-2 {
428
454
  margin-top: calc(var(--spacing) * 2);
429
455
  }
430
456
  .mt-3 {
431
457
  margin-top: calc(var(--spacing) * 3);
432
458
  }
459
+ .-mr-1 {
460
+ margin-right: calc(var(--spacing) * -1);
461
+ }
433
462
  .mb-1 {
434
463
  margin-bottom: calc(var(--spacing) * 1);
435
464
  }
@@ -586,6 +615,9 @@
586
615
  .w-7 {
587
616
  width: calc(var(--spacing) * 7);
588
617
  }
618
+ .w-8 {
619
+ width: calc(var(--spacing) * 8);
620
+ }
589
621
  .w-10 {
590
622
  width: calc(var(--spacing) * 10);
591
623
  }
@@ -607,6 +639,9 @@
607
639
  .w-80 {
608
640
  width: calc(var(--spacing) * 80);
609
641
  }
642
+ .w-88 {
643
+ width: calc(var(--spacing) * 88);
644
+ }
610
645
  .w-auto {
611
646
  width: auto;
612
647
  }
@@ -619,6 +654,12 @@
619
654
  .max-w-6xl {
620
655
  max-width: var(--container-6xl);
621
656
  }
657
+ .max-w-\[24rem\] {
658
+ max-width: 24rem;
659
+ }
660
+ .max-w-\[calc\(100vw-2\.5rem\)\] {
661
+ max-width: calc(100vw - 2.5rem);
662
+ }
622
663
  .max-w-full {
623
664
  max-width: 100%;
624
665
  }
@@ -643,6 +684,9 @@
643
684
  .min-w-\[16rem\] {
644
685
  min-width: 16rem;
645
686
  }
687
+ .min-w-\[200px\] {
688
+ min-width: 200px;
689
+ }
646
690
  .min-w-full {
647
691
  min-width: 100%;
648
692
  }
@@ -745,6 +789,12 @@
745
789
  .transform {
746
790
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
747
791
  }
792
+ .animate-\[spin_3s_linear_infinite\] {
793
+ animation: spin 3s linear infinite;
794
+ }
795
+ .animate-pulse {
796
+ animation: var(--animate-pulse);
797
+ }
748
798
  .cursor-default {
749
799
  cursor: default;
750
800
  }
@@ -766,6 +816,9 @@
766
816
  .grid-cols-7 {
767
817
  grid-template-columns: repeat(7, minmax(0, 1fr));
768
818
  }
819
+ .grid-cols-\[auto_1fr_auto\] {
820
+ grid-template-columns: auto 1fr auto;
821
+ }
769
822
  .flex-col {
770
823
  flex-direction: column;
771
824
  }
@@ -778,6 +831,9 @@
778
831
  .items-center {
779
832
  align-items: center;
780
833
  }
834
+ .items-end {
835
+ align-items: flex-end;
836
+ }
781
837
  .items-start {
782
838
  align-items: flex-start;
783
839
  }
@@ -817,6 +873,9 @@
817
873
  .gap-6 {
818
874
  gap: calc(var(--spacing) * 6);
819
875
  }
876
+ .gap-8 {
877
+ gap: calc(var(--spacing) * 8);
878
+ }
820
879
  .gap-12 {
821
880
  gap: calc(var(--spacing) * 12);
822
881
  }
@@ -883,6 +942,15 @@
883
942
  border-color: var(--color-gray-100);
884
943
  }
885
944
  }
945
+ .justify-self-center {
946
+ justify-self: center;
947
+ }
948
+ .justify-self-end {
949
+ justify-self: flex-end;
950
+ }
951
+ .justify-self-start {
952
+ justify-self: flex-start;
953
+ }
886
954
  .truncate {
887
955
  overflow: hidden;
888
956
  text-overflow: ellipsis;
@@ -894,6 +962,9 @@
894
962
  .overflow-hidden {
895
963
  overflow: hidden;
896
964
  }
965
+ .overflow-visible {
966
+ overflow: visible;
967
+ }
897
968
  .overflow-y-auto {
898
969
  overflow-y: auto;
899
970
  }
@@ -940,6 +1011,10 @@
940
1011
  border-style: var(--tw-border-style);
941
1012
  border-width: 2px;
942
1013
  }
1014
+ .border-\[1\.5px\] {
1015
+ border-style: var(--tw-border-style);
1016
+ border-width: 1.5px;
1017
+ }
943
1018
  .border-t {
944
1019
  border-top-style: var(--tw-border-style);
945
1020
  border-top-width: 1px;
@@ -1009,6 +1084,12 @@
1009
1084
  .border-gray-200 {
1010
1085
  border-color: var(--color-gray-200);
1011
1086
  }
1087
+ .border-gray-200\/70 {
1088
+ border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 70%, transparent);
1089
+ @supports (color: color-mix(in lab, red, red)) {
1090
+ border-color: color-mix(in oklab, var(--color-gray-200) 70%, transparent);
1091
+ }
1092
+ }
1012
1093
  .border-gray-200\/80 {
1013
1094
  border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 80%, transparent);
1014
1095
  @supports (color: color-mix(in lab, red, red)) {
@@ -1267,6 +1348,12 @@
1267
1348
  background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
1268
1349
  }
1269
1350
  }
1351
+ .bg-white\/15 {
1352
+ background-color: color-mix(in srgb, #fff 15%, transparent);
1353
+ @supports (color: color-mix(in lab, red, red)) {
1354
+ background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
1355
+ }
1356
+ }
1270
1357
  .bg-white\/70 {
1271
1358
  background-color: color-mix(in srgb, #fff 70%, transparent);
1272
1359
  @supports (color: color-mix(in lab, red, red)) {
@@ -1442,6 +1529,10 @@
1442
1529
  }
1443
1530
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1444
1531
  }
1532
+ .to-indigo-500 {
1533
+ --tw-gradient-to: var(--color-indigo-500);
1534
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1535
+ }
1445
1536
  .to-indigo-600 {
1446
1537
  --tw-gradient-to: var(--color-indigo-600);
1447
1538
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1586,6 +1677,9 @@
1586
1677
  .pt-0 {
1587
1678
  padding-top: calc(var(--spacing) * 0);
1588
1679
  }
1680
+ .pt-1 {
1681
+ padding-top: calc(var(--spacing) * 1);
1682
+ }
1589
1683
  .pt-3 {
1590
1684
  padding-top: calc(var(--spacing) * 3);
1591
1685
  }
@@ -1682,6 +1776,9 @@
1682
1776
  .text-left {
1683
1777
  text-align: left;
1684
1778
  }
1779
+ .text-right {
1780
+ text-align: right;
1781
+ }
1685
1782
  .align-middle {
1686
1783
  vertical-align: middle;
1687
1784
  }
@@ -1726,6 +1823,17 @@
1726
1823
  .text-\[1em\] {
1727
1824
  font-size: 1em;
1728
1825
  }
1826
+ .text-\[15px\] {
1827
+ font-size: 15px;
1828
+ }
1829
+ .leading-5 {
1830
+ --tw-leading: calc(var(--spacing) * 5);
1831
+ line-height: calc(var(--spacing) * 5);
1832
+ }
1833
+ .leading-6 {
1834
+ --tw-leading: calc(var(--spacing) * 6);
1835
+ line-height: calc(var(--spacing) * 6);
1836
+ }
1729
1837
  .leading-none {
1730
1838
  --tw-leading: 1;
1731
1839
  line-height: 1;
@@ -1766,6 +1874,9 @@
1766
1874
  .text-amber-800 {
1767
1875
  color: var(--color-amber-800);
1768
1876
  }
1877
+ .text-amber-900 {
1878
+ color: var(--color-amber-900);
1879
+ }
1769
1880
  .text-black {
1770
1881
  color: var(--color-black);
1771
1882
  }
@@ -1784,6 +1895,9 @@
1784
1895
  .text-emerald-700 {
1785
1896
  color: var(--color-emerald-700);
1786
1897
  }
1898
+ .text-emerald-900 {
1899
+ color: var(--color-emerald-900);
1900
+ }
1787
1901
  .text-gray-500 {
1788
1902
  color: var(--color-gray-500);
1789
1903
  }
@@ -1799,6 +1913,9 @@
1799
1913
  .text-gray-900 {
1800
1914
  color: var(--color-gray-900);
1801
1915
  }
1916
+ .text-inherit {
1917
+ color: inherit;
1918
+ }
1802
1919
  .text-primary {
1803
1920
  color: var(--color-primary);
1804
1921
  }
@@ -1811,12 +1928,18 @@
1811
1928
  .text-red-700 {
1812
1929
  color: var(--color-red-700);
1813
1930
  }
1931
+ .text-red-900 {
1932
+ color: var(--color-red-900);
1933
+ }
1814
1934
  .text-sky-600 {
1815
1935
  color: var(--color-sky-600);
1816
1936
  }
1817
1937
  .text-sky-700 {
1818
1938
  color: var(--color-sky-700);
1819
1939
  }
1940
+ .text-sky-900 {
1941
+ color: var(--color-sky-900);
1942
+ }
1820
1943
  .text-slate-900 {
1821
1944
  color: var(--color-slate-900);
1822
1945
  }
@@ -1960,6 +2083,12 @@
1960
2083
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1961
2084
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1962
2085
  }
2086
+ .shadow-black\/10 {
2087
+ --tw-shadow-color: color-mix(in srgb, #000 10%, transparent);
2088
+ @supports (color: color-mix(in lab, red, red)) {
2089
+ --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 10%, transparent) var(--tw-shadow-alpha), transparent);
2090
+ }
2091
+ }
1963
2092
  .shadow-black\/20 {
1964
2093
  --tw-shadow-color: color-mix(in srgb, #000 20%, transparent);
1965
2094
  @supports (color: color-mix(in lab, red, red)) {
@@ -2112,11 +2241,21 @@
2112
2241
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
2113
2242
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
2114
2243
  }
2244
+ .backdrop-blur-sm {
2245
+ --tw-backdrop-blur: blur(var(--blur-sm));
2246
+ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
2247
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
2248
+ }
2115
2249
  .transition {
2116
2250
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
2117
2251
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2118
2252
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2119
2253
  }
2254
+ .transition-\[width\] {
2255
+ transition-property: width;
2256
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2257
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2258
+ }
2120
2259
  .transition-all {
2121
2260
  transition-property: all;
2122
2261
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2145,10 +2284,18 @@
2145
2284
  --tw-duration: 200ms;
2146
2285
  transition-duration: 200ms;
2147
2286
  }
2287
+ .duration-300 {
2288
+ --tw-duration: 300ms;
2289
+ transition-duration: 300ms;
2290
+ }
2148
2291
  .ease-in-out {
2149
2292
  --tw-ease: var(--ease-in-out);
2150
2293
  transition-timing-function: var(--ease-in-out);
2151
2294
  }
2295
+ .ease-out {
2296
+ --tw-ease: var(--ease-out);
2297
+ transition-timing-function: var(--ease-out);
2298
+ }
2152
2299
  .select-none {
2153
2300
  -webkit-user-select: none;
2154
2301
  user-select: none;
@@ -2759,6 +2906,21 @@
2759
2906
  }
2760
2907
  }
2761
2908
  }
2909
+ .hover\:underline {
2910
+ &:hover {
2911
+ @media (hover: hover) {
2912
+ text-decoration-line: underline;
2913
+ }
2914
+ }
2915
+ }
2916
+ .hover\:shadow-2xl {
2917
+ &:hover {
2918
+ @media (hover: hover) {
2919
+ --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
2920
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2921
+ }
2922
+ }
2923
+ }
2762
2924
  .hover\:shadow-xl {
2763
2925
  &:hover {
2764
2926
  @media (hover: hover) {
@@ -2822,6 +2984,12 @@
2822
2984
  --tw-ring-color: var(--color-yellow-300);
2823
2985
  }
2824
2986
  }
2987
+ .focus\:outline-none {
2988
+ &:focus {
2989
+ --tw-outline-style: none;
2990
+ outline-style: none;
2991
+ }
2992
+ }
2825
2993
  .focus-visible\:border-black {
2826
2994
  &:focus-visible {
2827
2995
  border-color: var(--color-black);
@@ -2976,6 +3144,14 @@
2976
3144
  }
2977
3145
  }
2978
3146
  }
3147
+ .focus-visible\:ring-primary\/50 {
3148
+ &:focus-visible {
3149
+ --tw-ring-color: color-mix(in srgb, oklch(0.62 0.13 250) 50%, transparent);
3150
+ @supports (color: color-mix(in lab, red, red)) {
3151
+ --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
3152
+ }
3153
+ }
3154
+ }
2979
3155
  .focus-visible\:ring-red-200 {
2980
3156
  &:focus-visible {
2981
3157
  --tw-ring-color: var(--color-red-200);
@@ -3011,12 +3187,33 @@
3011
3187
  --tw-ring-color: transparent;
3012
3188
  }
3013
3189
  }
3190
+ .focus-visible\:ring-white\/60 {
3191
+ &:focus-visible {
3192
+ --tw-ring-color: color-mix(in srgb, #fff 60%, transparent);
3193
+ @supports (color: color-mix(in lab, red, red)) {
3194
+ --tw-ring-color: color-mix(in oklab, var(--color-white) 60%, transparent);
3195
+ }
3196
+ }
3197
+ }
3198
+ .focus-visible\:ring-white\/70 {
3199
+ &:focus-visible {
3200
+ --tw-ring-color: color-mix(in srgb, #fff 70%, transparent);
3201
+ @supports (color: color-mix(in lab, red, red)) {
3202
+ --tw-ring-color: color-mix(in oklab, var(--color-white) 70%, transparent);
3203
+ }
3204
+ }
3205
+ }
3014
3206
  .focus-visible\:ring-offset-2 {
3015
3207
  &:focus-visible {
3016
3208
  --tw-ring-offset-width: 2px;
3017
3209
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3018
3210
  }
3019
3211
  }
3212
+ .focus-visible\:ring-offset-transparent {
3213
+ &:focus-visible {
3214
+ --tw-ring-offset-color: transparent;
3215
+ }
3216
+ }
3020
3217
  .focus-visible\:ring-offset-white {
3021
3218
  &:focus-visible {
3022
3219
  --tw-ring-offset-color: var(--color-white);
@@ -3100,6 +3297,16 @@
3100
3297
  opacity: 100%;
3101
3298
  }
3102
3299
  }
3300
+ .sm\:flex {
3301
+ @media (width >= 40rem) {
3302
+ display: flex;
3303
+ }
3304
+ }
3305
+ .sm\:hidden {
3306
+ @media (width >= 40rem) {
3307
+ display: none;
3308
+ }
3309
+ }
3103
3310
  .sm\:grid-cols-2 {
3104
3311
  @media (width >= 40rem) {
3105
3312
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3115,6 +3322,11 @@
3115
3322
  padding: calc(var(--spacing) * 8);
3116
3323
  }
3117
3324
  }
3325
+ .sm\:px-6 {
3326
+ @media (width >= 40rem) {
3327
+ padding-inline: calc(var(--spacing) * 6);
3328
+ }
3329
+ }
3118
3330
  .sm\:text-5xl {
3119
3331
  @media (width >= 40rem) {
3120
3332
  font-size: var(--text-5xl);
@@ -3161,6 +3373,11 @@
3161
3373
  gap: calc(var(--spacing) * 10);
3162
3374
  }
3163
3375
  }
3376
+ .lg\:px-8 {
3377
+ @media (width >= 64rem) {
3378
+ padding-inline: calc(var(--spacing) * 8);
3379
+ }
3380
+ }
3164
3381
  .lg\:px-10 {
3165
3382
  @media (width >= 64rem) {
3166
3383
  padding-inline: calc(var(--spacing) * 10);
@@ -3186,6 +3403,11 @@
3186
3403
  border-color: var(--color-gray-700);
3187
3404
  }
3188
3405
  }
3406
+ .dark\:border-gray-800 {
3407
+ &:is(.dark &) {
3408
+ border-color: var(--color-gray-800);
3409
+ }
3410
+ }
3189
3411
  .dark\:border-slate-800 {
3190
3412
  &:is(.dark &) {
3191
3413
  border-color: var(--color-slate-800);
@@ -3211,6 +3433,19 @@
3211
3433
  border-bottom-color: var(--color-slate-700);
3212
3434
  }
3213
3435
  }
3436
+ .dark\:bg-gray-800 {
3437
+ &:is(.dark &) {
3438
+ background-color: var(--color-gray-800);
3439
+ }
3440
+ }
3441
+ .dark\:bg-gray-900\/95 {
3442
+ &:is(.dark &) {
3443
+ background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 95%, transparent);
3444
+ @supports (color: color-mix(in lab, red, red)) {
3445
+ background-color: color-mix(in oklab, var(--color-gray-900) 95%, transparent);
3446
+ }
3447
+ }
3448
+ }
3214
3449
  .dark\:bg-slate-800 {
3215
3450
  &:is(.dark &) {
3216
3451
  background-color: var(--color-slate-800);
@@ -3355,6 +3590,11 @@
3355
3590
  color: var(--color-emerald-400);
3356
3591
  }
3357
3592
  }
3593
+ .dark\:text-gray-50 {
3594
+ &:is(.dark &) {
3595
+ color: var(--color-gray-50);
3596
+ }
3597
+ }
3358
3598
  .dark\:text-gray-100 {
3359
3599
  &:is(.dark &) {
3360
3600
  color: var(--color-gray-100);
@@ -3442,6 +3682,14 @@
3442
3682
  }
3443
3683
  }
3444
3684
  }
3685
+ .dark\:ring-white\/5 {
3686
+ &:is(.dark &) {
3687
+ --tw-ring-color: color-mix(in srgb, #fff 5%, transparent);
3688
+ @supports (color: color-mix(in lab, red, red)) {
3689
+ --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent);
3690
+ }
3691
+ }
3692
+ }
3445
3693
  .dark\:peer-placeholder-shown\:text-gray-400 {
3446
3694
  &:is(.dark &) {
3447
3695
  &:is(:where(.peer):placeholder-shown ~ *) {
@@ -3477,6 +3725,24 @@
3477
3725
  }
3478
3726
  }
3479
3727
  }
3728
+ .dark\:hover\:bg-gray-800 {
3729
+ &:is(.dark &) {
3730
+ &:hover {
3731
+ @media (hover: hover) {
3732
+ background-color: var(--color-gray-800);
3733
+ }
3734
+ }
3735
+ }
3736
+ }
3737
+ .dark\:hover\:text-white {
3738
+ &:is(.dark &) {
3739
+ &:hover {
3740
+ @media (hover: hover) {
3741
+ color: var(--color-white);
3742
+ }
3743
+ }
3744
+ }
3745
+ }
3480
3746
  .focus\:dark\:placeholder-gray-400 {
3481
3747
  &:focus {
3482
3748
  &:is(.dark &) {
@@ -26404,6 +26670,16 @@
26404
26670
  syntax: "*";
26405
26671
  inherits: false;
26406
26672
  }
26673
+ @keyframes spin {
26674
+ to {
26675
+ transform: rotate(360deg);
26676
+ }
26677
+ }
26678
+ @keyframes pulse {
26679
+ 50% {
26680
+ opacity: 0.5;
26681
+ }
26682
+ }
26407
26683
  @layer properties {
26408
26684
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
26409
26685
  *, ::before, ::after, ::backdrop {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lindle/linoardo",
3
- "version": "1.0.21",
3
+ "version": "1.0.22",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "",
@@ -120,6 +120,16 @@
120
120
  "import": "./dist/icon.js",
121
121
  "require": "./dist/icon.cjs"
122
122
  },
123
+ "./notification": {
124
+ "types": "./dist/notification.d.ts",
125
+ "import": "./dist/notification.js",
126
+ "require": "./dist/notification.cjs"
127
+ },
128
+ "./progress": {
129
+ "types": "./dist/progress.d.ts",
130
+ "import": "./dist/progress.js",
131
+ "require": "./dist/progress.cjs"
132
+ },
123
133
  "./select": {
124
134
  "types": "./dist/select.d.ts",
125
135
  "import": "./dist/select.js",
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/Containment/Button/states.button.ts","../src/Containment/Button/index.tsx"],"names":["normalized"],"mappings":"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","file":"chunk-RFPNVLAD.js","sourcesContent":["import { iconBaseClasses } from '@lindle/linoardo/globals';\nimport type { GlobalSize, Palette } from '@lindle/linoardo/global.types';\nimport type { ButtonProps, ButtonVariant } from './types.button';\n\nexport const base =\n 'btn-base focus-visible:outline-none focus-visible:ring-2 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed';\n\nconst blackAndWhitePaletteClasses = {\n solid: 'bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white',\n outline:\n 'border-2 border-black text-black bg-white hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white',\n ghost:\n 'text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent',\n text:\n 'bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent',\n filled:\n 'bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20',\n underlined:\n 'bg-transparent text-black border border-transparent underline decoration-2 underline-offset-4 hover:bg-neutral-200 focus-visible:ring-black/20',\n rounded:\n 'rounded-full border-2 border-black bg-white text-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white',\n sharp: 'bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40'\n} satisfies Record<ButtonVariant, string>;\n\nconst paletteVariantClasses: Record<Palette, Record<ButtonVariant, string>> = {\n primary: {\n solid: 'bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n sharp: 'rounded-none bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary',\n outline:\n 'border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary',\n ghost:\n 'text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40 border border-transparent',\n text: 'bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2 border border-transparent',\n filled:\n 'bg-primary/15 text-primary border border-primary/30 hover:bg-primary/25 focus-visible:ring-primary/25',\n underlined:\n 'bg-transparent text-primary border border-transparent underline decoration-2 underline-offset-4 hover:bg-primary/5 focus-visible:ring-primary/25',\n rounded:\n 'rounded-full border border-primary/60 bg-primary/10 text-primary hover:bg-primary/20 focus-visible:ring-primary/25'\n },\n neutral: {\n solid: 'bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n sharp: 'rounded-none bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',\n outline:\n 'border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400',\n ghost:\n 'text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300 border border-transparent',\n text: 'bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-gray-200 text-gray-900 border border-gray-300 hover:bg-gray-300 focus-visible:ring-gray-300',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-300',\n rounded:\n 'rounded-full border border-gray-400 bg-white text-gray-800 hover:bg-gray-100 focus-visible:ring-gray-300'\n },\n info: {\n solid: 'bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n sharp: 'rounded-none bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400',\n outline:\n 'border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400',\n ghost:\n 'text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300 border border-transparent',\n text: 'bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-sky-100 text-sky-700 border border-sky-200 hover:bg-sky-200 focus-visible:ring-sky-200',\n underlined:\n 'bg-transparent text-sky-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-sky-50 focus-visible:ring-sky-200',\n rounded:\n 'rounded-full border border-sky-500/70 bg-sky-50 text-sky-700 hover:bg-sky-100 focus-visible:ring-sky-200'\n },\n success: {\n solid: 'bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n sharp:\n 'rounded-none bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400',\n outline:\n 'border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400',\n ghost:\n 'text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300 border border-transparent',\n text: 'bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 focus-visible:ring-emerald-200',\n underlined:\n 'bg-transparent text-emerald-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-emerald-50 focus-visible:ring-emerald-200',\n rounded:\n 'rounded-full border border-emerald-500/70 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 focus-visible:ring-emerald-200'\n },\n warning: {\n solid: 'bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n sharp: 'rounded-none bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400',\n outline:\n 'border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400',\n ghost:\n 'text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300 border border-transparent',\n text: 'bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-amber-100 text-amber-800 border border-amber-200 hover:bg-amber-200 focus-visible:ring-amber-200',\n underlined:\n 'bg-transparent text-amber-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-amber-50 focus-visible:ring-amber-200',\n rounded:\n 'rounded-full border border-amber-500/70 bg-amber-50 text-amber-700 hover:bg-amber-100 focus-visible:ring-amber-200'\n },\n danger: {\n solid: 'bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n sharp: 'rounded-none bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',\n outline:\n 'border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400',\n ghost:\n 'text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300 border border-transparent',\n text: 'bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-red-100 text-red-700 border border-red-200 hover:bg-red-200 focus-visible:ring-red-200',\n underlined:\n 'bg-transparent text-red-600 border border-transparent underline decoration-2 underline-offset-4 hover:bg-red-50 focus-visible:ring-red-200',\n rounded:\n 'rounded-full border border-red-500/70 bg-red-50 text-red-700 hover:bg-red-100 focus-visible:ring-red-200'\n },\n surface: {\n solid:\n 'bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n sharp:\n 'rounded-none bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200',\n outline:\n 'border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200',\n ghost:\n 'text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200 border border-transparent',\n text: 'bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2 border border-transparent',\n filled:\n 'bg-gray-50 text-gray-900 border border-gray-200 hover:bg-white focus-visible:ring-gray-200',\n underlined:\n 'bg-transparent text-gray-900 border border-transparent underline decoration-2 underline-offset-4 hover:bg-gray-100 focus-visible:ring-gray-200',\n rounded:\n 'rounded-full border border-gray-300 bg-white text-gray-900 hover:bg-gray-50 focus-visible:ring-gray-200'\n },\n bw: blackAndWhitePaletteClasses\n};\n\nexport const resolveVariantClass = (variant: ButtonVariant, palette: Palette) => {\n const paletteVariants = paletteVariantClasses[palette] ?? paletteVariantClasses.primary;\n return paletteVariants[variant] ?? paletteVariants.solid;\n};\n\nexport const resolveIconClassName = (icon?: ButtonProps['icon']) => {\n if (!icon) {\n return undefined;\n }\n\n if (typeof icon === 'string') {\n const trimmed = icon.trim();\n if (!trimmed) {\n return undefined;\n }\n\n if (trimmed.includes(' ')) {\n return trimmed;\n }\n\n const normalized = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n return ['mdi', normalized].join(' ');\n }\n\n const [library, providedName] = icon;\n const normalizedLibrary = library.trim();\n const baseClasses = iconBaseClasses[normalizedLibrary as keyof typeof iconBaseClasses] ?? [\n normalizedLibrary\n ];\n const iconName = providedName.trim();\n if (!iconName) {\n return baseClasses.join(' ');\n }\n\n const normalized = iconName.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n return Array.from(new Set([...baseClasses, normalized])).join(' ');\n};\n\nexport const sizeClasses = {\n 'x-small': 'px-2.5 py-1 text-xs',\n small: 'px-3 py-1.5 text-sm',\n medium: 'px-4 py-2 text-base',\n large: 'px-6 py-3 text-lg',\n 'x-large': 'px-7 py-3.5 text-xl'\n} satisfies Record<GlobalSize, string>;\n\nexport const iconOnlySizeClasses = {\n 'x-small': 'p-0 text-xs aspect-square',\n small: 'p-2.5 text-sm aspect-square',\n medium: 'p-3 text-base aspect-square',\n large: 'p-3.5 text-lg aspect-square',\n 'x-large': 'p-4 text-xl aspect-square'\n} satisfies Record<GlobalSize, string>;\n\nexport const iconOnlyIconSizeClasses = {\n 'x-small': 'text-sm',\n small: 'text-base',\n medium: 'text-lg',\n large: 'text-xl',\n 'x-large': 'text-2xl'\n} satisfies Record<GlobalSize, string>;\n","import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { ButtonProps } from './types.button';\nimport {\n base,\n iconOnlyIconSizeClasses,\n iconOnlySizeClasses,\n resolveIconClassName,\n resolveVariantClass,\n sizeClasses\n} from './states.button';\n\ntype PolymorphicRef<T extends React.ElementType> = React.ComponentPropsWithRef<T>['ref'];\ntype ButtonComponent = {\n <T extends React.ElementType = 'button'>(\n props: ButtonProps<T> & { ref?: PolymorphicRef<T> }\n ): React.ReactElement | null;\n displayName?: string;\n};\n\n/**\n * Containment button supporting variant, size, block layout and loading states.\n */\nconst Button = React.forwardRef(\n <\n T extends React.ElementType = 'button'\n >({\n variant = 'solid',\n color = 'primary',\n size = 'medium',\n block = false,\n loading = false,\n loadingText,\n icon,\n iconOnly = false,\n className,\n children,\n disabled,\n onClick,\n as,\n ...rest\n }: ButtonProps<T>,\n ref: React.ForwardedRef<unknown>) => {\n const Component = as ?? 'button';\n const variantClass = resolveVariantClass(variant, color);\n const sizeClass = iconOnly\n ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium\n : sizeClasses[size] ?? sizeClasses.medium;\n const iconSizeClass = iconOnly\n ? iconOnlyIconSizeClasses[size] ?? iconOnlyIconSizeClasses.medium\n : undefined;\n const blockClass = block ? 'w-full' : null;\n const isNativeButton = Component === 'button';\n const isDisabled = disabled || loading;\n const cursor = onClick && !isDisabled ? 'cursor-pointer' : 'cursor-default';\n const resolvedIconClass = resolveIconClassName(icon);\n const shouldRenderIcon = Boolean(resolvedIconClass && !loading);\n const isLoadingTextProvided = loadingText !== undefined && loadingText !== null;\n const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;\n const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);\n const gapClass = hasDecorators ? 'gap-2' : undefined;\n const loadingIconClass = loading\n ? twMerge('mdi mdi-loading mdi-spin', 'leading-none', iconSizeClass)\n : undefined;\n const iconClassName = shouldRenderIcon\n ? twMerge('leading-none', iconSizeClass, resolvedIconClass)\n : undefined;\n\n return (\n <Component\n {...rest}\n ref={ref as PolymorphicRef<T>}\n onClick={onClick}\n disabled={isNativeButton ? isDisabled : undefined}\n aria-disabled={!isNativeButton ? isDisabled : undefined}\n className={twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className)}\n data-loading={loading || undefined}\n aria-busy={loading || undefined}\n >\n {loading && <i className={loadingIconClass} aria-hidden />}\n {iconClassName && <i className={iconClassName} aria-hidden />}\n {content}\n </Component>\n );\n }\n) as ButtonComponent;\n\nButton.displayName = 'Button';\n\nexport default Button;\n"]}