@rovula/ui 0.0.17 → 0.0.18

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 (53) hide show
  1. package/dist/cjs/bundle.css +152 -0
  2. package/dist/cjs/bundle.js +3 -3
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/AlertDialog/Alert.stories.d.ts +1 -1
  5. package/dist/cjs/types/components/Calendar/Calendar.d.ts +8 -0
  6. package/dist/cjs/types/components/Calendar/Calendar.stories.d.ts +272 -0
  7. package/dist/cjs/types/components/Calendar/index.d.ts +1 -0
  8. package/dist/cjs/types/components/DatePicker/DatePicker.d.ts +8 -0
  9. package/dist/cjs/types/components/DatePicker/DatePicker.stories.d.ts +21 -0
  10. package/dist/cjs/types/components/Popover/Popover.d.ts +6 -0
  11. package/dist/cjs/types/components/Popover/Popover.stories.d.ts +21 -0
  12. package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts +7 -0
  13. package/dist/cjs/types/components/TextInput/TextInput.styles.d.ts +5 -0
  14. package/dist/cjs/types/index.d.ts +3 -0
  15. package/dist/components/Calendar/Calendar.js +43 -0
  16. package/dist/components/Calendar/Calendar.stories.js +36 -0
  17. package/dist/components/Calendar/index.js +1 -0
  18. package/dist/components/DatePicker/DatePicker.js +22 -0
  19. package/dist/components/DatePicker/DatePicker.stories.js +36 -0
  20. package/dist/components/Popover/Popover.js +35 -0
  21. package/dist/components/Popover/Popover.stories.js +33 -0
  22. package/dist/components/TextInput/TextInput.js +9 -3
  23. package/dist/components/TextInput/TextInput.stories.js +12 -0
  24. package/dist/components/TextInput/TextInput.styles.js +41 -0
  25. package/dist/esm/bundle.css +152 -0
  26. package/dist/esm/bundle.js +3 -3
  27. package/dist/esm/bundle.js.map +1 -1
  28. package/dist/esm/types/components/AlertDialog/Alert.stories.d.ts +1 -1
  29. package/dist/esm/types/components/Calendar/Calendar.d.ts +8 -0
  30. package/dist/esm/types/components/Calendar/Calendar.stories.d.ts +272 -0
  31. package/dist/esm/types/components/Calendar/index.d.ts +1 -0
  32. package/dist/esm/types/components/DatePicker/DatePicker.d.ts +8 -0
  33. package/dist/esm/types/components/DatePicker/DatePicker.stories.d.ts +21 -0
  34. package/dist/esm/types/components/Popover/Popover.d.ts +6 -0
  35. package/dist/esm/types/components/Popover/Popover.stories.d.ts +21 -0
  36. package/dist/esm/types/components/TextInput/TextInput.stories.d.ts +7 -0
  37. package/dist/esm/types/components/TextInput/TextInput.styles.d.ts +5 -0
  38. package/dist/esm/types/index.d.ts +3 -0
  39. package/dist/index.d.ts +19 -1
  40. package/dist/index.js +3 -0
  41. package/dist/src/theme/global.css +192 -0
  42. package/package.json +5 -2
  43. package/src/components/Calendar/Calendar.stories.tsx +45 -0
  44. package/src/components/Calendar/Calendar.tsx +66 -0
  45. package/src/components/Calendar/index.ts +1 -0
  46. package/src/components/DatePicker/DatePicker.stories.tsx +40 -0
  47. package/src/components/DatePicker/DatePicker.tsx +57 -0
  48. package/src/components/Popover/Popover.stories.tsx +40 -0
  49. package/src/components/Popover/Popover.tsx +31 -0
  50. package/src/components/TextInput/TextInput.stories.tsx +36 -0
  51. package/src/components/TextInput/TextInput.styles.ts +45 -0
  52. package/src/components/TextInput/TextInput.tsx +13 -3
  53. package/src/index.ts +7 -0
@@ -752,6 +752,9 @@ video {
752
752
  .pointer-events-none {
753
753
  pointer-events: none;
754
754
  }
755
+ .invisible {
756
+ visibility: hidden;
757
+ }
755
758
  .static {
756
759
  position: static;
757
760
  }
@@ -780,6 +783,9 @@ video {
780
783
  .-top-1\.5 {
781
784
  top: -0.375rem;
782
785
  }
786
+ .left-1 {
787
+ left: 0.25rem;
788
+ }
783
789
  .left-3 {
784
790
  left: 0.75rem;
785
791
  }
@@ -792,6 +798,9 @@ video {
792
798
  .right-0 {
793
799
  right: 0px;
794
800
  }
801
+ .right-1 {
802
+ right: 0.25rem;
803
+ }
795
804
  .right-4 {
796
805
  right: 1rem;
797
806
  }
@@ -872,6 +881,10 @@ video {
872
881
  .aspect-square {
873
882
  aspect-ratio: 1 / 1;
874
883
  }
884
+ .size-14 {
885
+ width: 3.5rem;
886
+ height: 3.5rem;
887
+ }
875
888
  .size-2 {
876
889
  width: 0.5rem;
877
890
  height: 0.5rem;
@@ -904,6 +917,14 @@ video {
904
917
  width: 14px;
905
918
  height: 14px;
906
919
  }
920
+ .size-\[30px\] {
921
+ width: 30px;
922
+ height: 30px;
923
+ }
924
+ .size-\[38px\] {
925
+ width: 38px;
926
+ height: 38px;
927
+ }
907
928
  .size-full {
908
929
  width: 100%;
909
930
  height: 100%;
@@ -917,6 +938,9 @@ video {
917
938
  .h-4 {
918
939
  height: 1rem;
919
940
  }
941
+ .h-9 {
942
+ height: 2.25rem;
943
+ }
920
944
  .h-\[18px\] {
921
945
  height: 18px;
922
946
  }
@@ -972,9 +996,15 @@ video {
972
996
  .w-4 {
973
997
  width: 1rem;
974
998
  }
999
+ .w-72 {
1000
+ width: 18rem;
1001
+ }
975
1002
  .w-8 {
976
1003
  width: 2rem;
977
1004
  }
1005
+ .w-9 {
1006
+ width: 2.25rem;
1007
+ }
978
1008
  .w-\[100px\] {
979
1009
  width: 100px;
980
1010
  }
@@ -1139,11 +1169,21 @@ video {
1139
1169
  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
1140
1170
  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
1141
1171
  }
1172
+ .space-x-1 > :not([hidden]) ~ :not([hidden]) {
1173
+ --tw-space-x-reverse: 0;
1174
+ margin-right: calc(0.25rem * var(--tw-space-x-reverse));
1175
+ margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
1176
+ }
1142
1177
  .space-x-2 > :not([hidden]) ~ :not([hidden]) {
1143
1178
  --tw-space-x-reverse: 0;
1144
1179
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
1145
1180
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
1146
1181
  }
1182
+ .space-y-1 > :not([hidden]) ~ :not([hidden]) {
1183
+ --tw-space-y-reverse: 0;
1184
+ margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
1185
+ margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
1186
+ }
1147
1187
  .space-y-2 > :not([hidden]) ~ :not([hidden]) {
1148
1188
  --tw-space-y-reverse: 0;
1149
1189
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1210,6 +1250,18 @@ video {
1210
1250
  .rounded-xl {
1211
1251
  border-radius: 0.75rem;
1212
1252
  }
1253
+ .rounded-r-full {
1254
+ border-top-right-radius: 9999px;
1255
+ border-bottom-right-radius: 9999px;
1256
+ }
1257
+ .rounded-r-none {
1258
+ border-top-right-radius: 0px;
1259
+ border-bottom-right-radius: 0px;
1260
+ }
1261
+ .rounded-r-xl {
1262
+ border-top-right-radius: 0.75rem;
1263
+ border-bottom-right-radius: 0.75rem;
1264
+ }
1213
1265
  .border {
1214
1266
  border-width: 1px;
1215
1267
  }
@@ -1225,6 +1277,9 @@ video {
1225
1277
  .border-b-\[3px\] {
1226
1278
  border-bottom-width: 3px;
1227
1279
  }
1280
+ .border-l {
1281
+ border-left-width: 1px;
1282
+ }
1228
1283
  .border-t {
1229
1284
  border-top-width: 1px;
1230
1285
  }
@@ -1298,6 +1353,10 @@ video {
1298
1353
  .border-b-\[rgb\(var\(--navbar-border-color\)\)\] {
1299
1354
  border-bottom-color: rgb(var(--navbar-border-color));
1300
1355
  }
1356
+ .border-l-input-stroke {
1357
+ --tw-border-opacity: 1;
1358
+ border-left-color: rgb(var(--input-default-stroke-color) / var(--tw-border-opacity));
1359
+ }
1301
1360
  .bg-\[rgb\(var\(--navbar-bg-color\)\)\] {
1302
1361
  background-color: rgb(var(--navbar-bg-color));
1303
1362
  }
@@ -1423,6 +1482,9 @@ video {
1423
1482
  .fill-textcolor-medium {
1424
1483
  fill: rgb(var(--text-default-medium) / 1);
1425
1484
  }
1485
+ .p-0 {
1486
+ padding: 0px;
1487
+ }
1426
1488
  .p-1 {
1427
1489
  padding: 0.25rem;
1428
1490
  }
@@ -1432,6 +1494,9 @@ video {
1432
1494
  .p-20 {
1433
1495
  padding: 5rem;
1434
1496
  }
1497
+ .p-3 {
1498
+ padding: 0.75rem;
1499
+ }
1435
1500
  .p-4 {
1436
1501
  padding: 1rem;
1437
1502
  }
@@ -1506,12 +1571,24 @@ video {
1506
1571
  .pe-\[30px\] {
1507
1572
  padding-inline-end: 30px;
1508
1573
  }
1574
+ .pe-\[38px\] {
1575
+ padding-inline-end: 38px;
1576
+ }
1509
1577
  .pe-\[40px\] {
1510
1578
  padding-inline-end: 40px;
1511
1579
  }
1580
+ .pe-\[46px\] {
1581
+ padding-inline-end: 46px;
1582
+ }
1512
1583
  .pe-\[48px\] {
1513
1584
  padding-inline-end: 48px;
1514
1585
  }
1586
+ .pe-\[72px\] {
1587
+ padding-inline-end: 72px;
1588
+ }
1589
+ .pt-1 {
1590
+ padding-top: 0.25rem;
1591
+ }
1515
1592
  .text-left {
1516
1593
  text-align: left;
1517
1594
  }
@@ -1527,6 +1604,9 @@ video {
1527
1604
  .font-sans {
1528
1605
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
1529
1606
  }
1607
+ .text-\[0\.8rem\] {
1608
+ font-size: 0.8rem;
1609
+ }
1530
1610
  .text-base {
1531
1611
  font-size: 1rem;
1532
1612
  line-height: 1.5rem;
@@ -1650,6 +1730,9 @@ video {
1650
1730
  .font-medium {
1651
1731
  font-weight: 500;
1652
1732
  }
1733
+ .font-normal {
1734
+ font-weight: 400;
1735
+ }
1653
1736
  .capitalize {
1654
1737
  text-transform: capitalize;
1655
1738
  }
@@ -1788,6 +1871,9 @@ video {
1788
1871
  .underline-offset-4 {
1789
1872
  text-underline-offset: 4px;
1790
1873
  }
1874
+ .opacity-50 {
1875
+ opacity: 0.5;
1876
+ }
1791
1877
  .opacity-70 {
1792
1878
  opacity: 0.7;
1793
1879
  }
@@ -1999,6 +2085,12 @@ video {
1999
2085
  .placeholder\:text-transparent::placeholder {
2000
2086
  color: transparent;
2001
2087
  }
2088
+ .focus-within\:relative:focus-within {
2089
+ position: relative;
2090
+ }
2091
+ .focus-within\:z-20:focus-within {
2092
+ z-index: 20;
2093
+ }
2002
2094
  .hover\:border-error-120:hover {
2003
2095
  --tw-border-opacity: 1;
2004
2096
  border-color: rgb(var(--error-120) / var(--tw-border-opacity));
@@ -2033,6 +2125,10 @@ video {
2033
2125
  .hover\:bg-main-transparent-secondary-8:hover {
2034
2126
  background-color: rgb(var(--main-transparent-secondary) / 0.8);
2035
2127
  }
2128
+ .hover\:bg-primary:hover {
2129
+ --tw-bg-opacity: 1;
2130
+ background-color: rgb(var(--primary-default) / var(--tw-bg-opacity));
2131
+ }
2036
2132
  .hover\:bg-primary-100:hover {
2037
2133
  --tw-bg-opacity: 1;
2038
2134
  background-color: rgb(var(--primary-100) / var(--tw-bg-opacity));
@@ -2080,6 +2176,10 @@ video {
2080
2176
  --tw-text-opacity: 1;
2081
2177
  color: rgb(var(--primary-default) / var(--tw-text-opacity));
2082
2178
  }
2179
+ .hover\:text-primary-foreground:hover {
2180
+ --tw-text-opacity: 1;
2181
+ color: rgb(var(--primary-foreground) / var(--tw-text-opacity));
2182
+ }
2083
2183
  .hover\:text-secondary-5:hover {
2084
2184
  --tw-text-opacity: 1;
2085
2185
  color: rgb(var(--secondary-5) / var(--tw-text-opacity));
@@ -2098,6 +2198,10 @@ video {
2098
2198
  --tw-border-opacity: 1;
2099
2199
  border-color: rgb(var(--input-default-stroke-color) / var(--tw-border-opacity));
2100
2200
  }
2201
+ .focus\:bg-primary:focus {
2202
+ --tw-bg-opacity: 1;
2203
+ background-color: rgb(var(--primary-default) / var(--tw-bg-opacity));
2204
+ }
2101
2205
  .focus\:pe-10:focus {
2102
2206
  padding-inline-end: 2.5rem;
2103
2207
  }
@@ -2107,6 +2211,10 @@ video {
2107
2211
  .focus\:pe-8:focus {
2108
2212
  padding-inline-end: 2rem;
2109
2213
  }
2214
+ .focus\:text-primary-foreground:focus {
2215
+ --tw-text-opacity: 1;
2216
+ color: rgb(var(--primary-foreground) / var(--tw-text-opacity));
2217
+ }
2110
2218
  .focus\:outline-none:focus {
2111
2219
  outline: 2px solid transparent;
2112
2220
  outline-offset: 2px;
@@ -2231,6 +2339,9 @@ video {
2231
2339
  line-height: 14px;
2232
2340
  font-weight: 400;
2233
2341
  }
2342
+ .peer:hover ~ .peer-hover\:fill-input-text-active {
2343
+ fill: rgb(var(--input-active-text-color) / 1);
2344
+ }
2234
2345
  .peer:focus ~ .peer-focus\:-top-1 {
2235
2346
  top: -0.25rem;
2236
2347
  }
@@ -2240,6 +2351,10 @@ video {
2240
2351
  .peer:focus ~ .peer-focus\:flex {
2241
2352
  display: flex;
2242
2353
  }
2354
+ .peer:focus ~ .peer-focus\:border-l-input-stroke-active {
2355
+ --tw-border-opacity: 1;
2356
+ border-left-color: rgb(var(--input-active-stroke-color) / var(--tw-border-opacity));
2357
+ }
2243
2358
  .peer:focus ~ .peer-focus\:bg-input-label-background {
2244
2359
  --tw-bg-opacity: 1;
2245
2360
  background-color: rgb(var(--input-label-background-color) / var(--tw-bg-opacity));
@@ -2248,6 +2363,9 @@ video {
2248
2363
  --tw-bg-opacity: 1;
2249
2364
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
2250
2365
  }
2366
+ .peer:focus ~ .peer-focus\:fill-input-text-active {
2367
+ fill: rgb(var(--input-active-text-color) / 1);
2368
+ }
2251
2369
  .peer:focus ~ .peer-focus\:text-input-text-active {
2252
2370
  --tw-text-opacity: 1;
2253
2371
  color: rgb(var(--input-active-text-color) / var(--tw-text-opacity));
@@ -2265,6 +2383,10 @@ video {
2265
2383
  .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
2266
2384
  cursor: not-allowed;
2267
2385
  }
2386
+ .peer:disabled ~ .peer-disabled\:border-l-input-stroke-disabled {
2387
+ --tw-border-opacity: 1;
2388
+ border-left-color: rgb(var(--input-disabled-stroke-color) / var(--tw-border-opacity));
2389
+ }
2268
2390
  .peer:disabled ~ .peer-disabled\:opacity-70 {
2269
2391
  opacity: 0.7;
2270
2392
  }
@@ -2277,6 +2399,12 @@ video {
2277
2399
  .aria-disabled\:opacity-50[aria-disabled="true"] {
2278
2400
  opacity: 0.5;
2279
2401
  }
2402
+ .aria-selected\:opacity-100[aria-selected="true"] {
2403
+ opacity: 1;
2404
+ }
2405
+ .aria-selected\:opacity-30[aria-selected="true"] {
2406
+ opacity: 0.3;
2407
+ }
2280
2408
  .data-\[state\=checked\]\:border-primary[data-state=checked] {
2281
2409
  --tw-border-opacity: 1;
2282
2410
  border-color: rgb(var(--primary-default) / var(--tw-border-opacity));
@@ -2317,6 +2445,18 @@ video {
2317
2445
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
2318
2446
  }
2319
2447
 
2448
+ .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
2449
+ --tw-space-x-reverse: 0;
2450
+ margin-right: calc(1rem * var(--tw-space-x-reverse));
2451
+ margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
2452
+ }
2453
+
2454
+ .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
2455
+ --tw-space-y-reverse: 0;
2456
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
2457
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
2458
+ }
2459
+
2320
2460
  .sm\:rounded-\[var\(--popup-rounded\)\] {
2321
2461
  border-radius: var(--popup-rounded);
2322
2462
  }
@@ -2325,6 +2465,18 @@ video {
2325
2465
  text-align: left;
2326
2466
  }
2327
2467
  }
2468
+ .first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
2469
+ border-top-left-radius: calc(var(--radius) - 2px);
2470
+ border-bottom-left-radius: calc(var(--radius) - 2px);
2471
+ }
2472
+ .last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
2473
+ border-top-right-radius: calc(var(--radius) - 2px);
2474
+ border-bottom-right-radius: calc(var(--radius) - 2px);
2475
+ }
2476
+ .\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
2477
+ border-top-right-radius: calc(var(--radius) - 2px);
2478
+ border-bottom-right-radius: calc(var(--radius) - 2px);
2479
+ }
2328
2480
  .\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]) {
2329
2481
  width: 1rem;
2330
2482
  }