@rovula/ui 0.0.10 → 0.0.12

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 (59) hide show
  1. package/dist/cjs/bundle.css +66 -2
  2. package/dist/cjs/bundle.js +23 -1
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/Button/Button.d.ts +14 -3
  5. package/dist/cjs/types/components/Button/Buttons.stories.d.ts +8 -6
  6. package/dist/cjs/types/components/DataTable/DataTable.d.ts +9 -0
  7. package/dist/cjs/types/components/DataTable/DataTable.stories.d.ts +22 -0
  8. package/dist/cjs/types/components/Dropdown/Dropdown.d.ts +29 -3
  9. package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts +31 -30
  10. package/dist/cjs/types/components/Label/Label.stories.d.ts +1 -1
  11. package/dist/cjs/types/components/RadioGroup/RadioGroup.stories.d.ts +1 -1
  12. package/dist/cjs/types/components/Table/Table.d.ts +3 -1
  13. package/dist/cjs/types/components/Table/Table.stories.d.ts +4 -1
  14. package/dist/cjs/types/components/Text/Text.d.ts +3 -3
  15. package/dist/cjs/types/components/Text/Text.stories.d.ts +3 -9
  16. package/dist/cjs/types/components/TextInput/TextInput.d.ts +20 -2
  17. package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts +28 -1
  18. package/dist/cjs/types/index.d.ts +4 -0
  19. package/dist/components/Button/Button.js +4 -3
  20. package/dist/components/DataTable/DataTable.js +71 -0
  21. package/dist/components/DataTable/DataTable.stories.js +57 -0
  22. package/dist/components/Dropdown/Dropdown.js +15 -5
  23. package/dist/components/Dropdown/Dropdown.stories.js +48 -0
  24. package/dist/components/Table/Table.js +6 -6
  25. package/dist/components/Text/Text.js +3 -2
  26. package/dist/components/TextInput/TextInput.js +5 -7
  27. package/dist/components/TextInput/TextInput.stories.js +22 -0
  28. package/dist/esm/bundle.css +66 -2
  29. package/dist/esm/bundle.js +23 -1
  30. package/dist/esm/bundle.js.map +1 -1
  31. package/dist/esm/types/components/Button/Button.d.ts +14 -3
  32. package/dist/esm/types/components/Button/Buttons.stories.d.ts +8 -6
  33. package/dist/esm/types/components/DataTable/DataTable.d.ts +9 -0
  34. package/dist/esm/types/components/DataTable/DataTable.stories.d.ts +22 -0
  35. package/dist/esm/types/components/Dropdown/Dropdown.d.ts +29 -3
  36. package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts +31 -30
  37. package/dist/esm/types/components/Label/Label.stories.d.ts +1 -1
  38. package/dist/esm/types/components/RadioGroup/RadioGroup.stories.d.ts +1 -1
  39. package/dist/esm/types/components/Table/Table.d.ts +3 -1
  40. package/dist/esm/types/components/Table/Table.stories.d.ts +4 -1
  41. package/dist/esm/types/components/Text/Text.d.ts +3 -3
  42. package/dist/esm/types/components/Text/Text.stories.d.ts +3 -9
  43. package/dist/esm/types/components/TextInput/TextInput.d.ts +20 -2
  44. package/dist/esm/types/components/TextInput/TextInput.stories.d.ts +28 -1
  45. package/dist/esm/types/index.d.ts +4 -0
  46. package/dist/index.d.ts +74 -8
  47. package/dist/index.js +1 -0
  48. package/dist/src/theme/global.css +85 -2
  49. package/package.json +3 -1
  50. package/src/components/Button/Button.tsx +47 -39
  51. package/src/components/DataTable/DataTable.stories.tsx +72 -0
  52. package/src/components/DataTable/DataTable.tsx +171 -0
  53. package/src/components/Dropdown/Dropdown.stories.tsx +87 -3
  54. package/src/components/Dropdown/Dropdown.tsx +147 -109
  55. package/src/components/Table/Table.tsx +17 -8
  56. package/src/components/Text/Text.tsx +21 -19
  57. package/src/components/TextInput/TextInput.stories.tsx +46 -1
  58. package/src/components/TextInput/TextInput.tsx +7 -7
  59. package/src/index.ts +6 -0
@@ -734,6 +734,9 @@ video {
734
734
  .relative {
735
735
  position: relative;
736
736
  }
737
+ .sticky {
738
+ position: sticky;
739
+ }
737
740
  .inset-0 {
738
741
  inset: 0px;
739
742
  }
@@ -762,6 +765,9 @@ video {
762
765
  .right-4 {
763
766
  right: 1rem;
764
767
  }
768
+ .top-0 {
769
+ top: 0px;
770
+ }
765
771
  .top-4 {
766
772
  top: 1rem;
767
773
  }
@@ -785,6 +791,9 @@ video {
785
791
  margin-top: auto;
786
792
  margin-bottom: auto;
787
793
  }
794
+ .ml-3 {
795
+ margin-left: 0.75rem;
796
+ }
788
797
  .mr-2 {
789
798
  margin-right: 0.5rem;
790
799
  }
@@ -870,12 +879,18 @@ video {
870
879
  .h-\[54px\] {
871
880
  height: 54px;
872
881
  }
882
+ .h-full {
883
+ height: 100%;
884
+ }
873
885
  .max-h-60 {
874
886
  max-height: 15rem;
875
887
  }
876
888
  .w-4 {
877
889
  width: 1rem;
878
890
  }
891
+ .w-8 {
892
+ width: 2rem;
893
+ }
879
894
  .w-\[100px\] {
880
895
  width: 100px;
881
896
  }
@@ -897,12 +912,18 @@ video {
897
912
  .max-w-lg {
898
913
  max-width: 32rem;
899
914
  }
915
+ .flex-1 {
916
+ flex: 1 1 0%;
917
+ }
900
918
  .shrink-0 {
901
919
  flex-shrink: 0;
902
920
  }
903
921
  .caption-bottom {
904
922
  caption-side: bottom;
905
923
  }
924
+ .border-collapse {
925
+ border-collapse: collapse;
926
+ }
906
927
  .translate-x-\[-50\%\] {
907
928
  --tw-translate-x: -50%;
908
929
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -949,6 +970,9 @@ video {
949
970
  .justify-center {
950
971
  justify-content: center;
951
972
  }
973
+ .justify-between {
974
+ justify-content: space-between;
975
+ }
952
976
  .gap-1 {
953
977
  gap: 0.25rem;
954
978
  }
@@ -992,15 +1016,24 @@ video {
992
1016
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
993
1017
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
994
1018
  }
1019
+ .self-stretch {
1020
+ align-self: stretch;
1021
+ }
995
1022
  .overflow-auto {
996
1023
  overflow: auto;
997
1024
  }
1025
+ .overflow-hidden {
1026
+ overflow: hidden;
1027
+ }
998
1028
  .overflow-x-auto {
999
1029
  overflow-x: auto;
1000
1030
  }
1001
1031
  .overflow-y-auto {
1002
1032
  overflow-y: auto;
1003
1033
  }
1034
+ .overflow-y-scroll {
1035
+ overflow-y: scroll;
1036
+ }
1004
1037
  .whitespace-nowrap {
1005
1038
  white-space: nowrap;
1006
1039
  }
@@ -1149,6 +1182,10 @@ video {
1149
1182
  --tw-bg-opacity: 1;
1150
1183
  background-color: rgb(var(--secondary-110) / var(--tw-bg-opacity));
1151
1184
  }
1185
+ .bg-secondary-80 {
1186
+ --tw-bg-opacity: 1;
1187
+ background-color: rgb(var(--secondary-80) / var(--tw-bg-opacity));
1188
+ }
1152
1189
  .bg-success {
1153
1190
  --tw-bg-opacity: 1;
1154
1191
  background-color: rgb(var(--success-default) / var(--tw-bg-opacity));
@@ -1239,6 +1276,10 @@ video {
1239
1276
  padding-top: 0.5rem;
1240
1277
  padding-bottom: 0.5rem;
1241
1278
  }
1279
+ .py-3 {
1280
+ padding-top: 0.75rem;
1281
+ padding-bottom: 0.75rem;
1282
+ }
1242
1283
  .py-4 {
1243
1284
  padding-top: 1rem;
1244
1285
  padding-bottom: 1rem;
@@ -1445,6 +1486,10 @@ video {
1445
1486
  --tw-text-opacity: 1;
1446
1487
  color: rgb(var(--secondary-110) / var(--tw-text-opacity));
1447
1488
  }
1489
+ .text-secondary-120 {
1490
+ --tw-text-opacity: 1;
1491
+ color: rgb(var(--secondary-120) / var(--tw-text-opacity));
1492
+ }
1448
1493
  .text-secondary-130 {
1449
1494
  --tw-text-opacity: 1;
1450
1495
  color: rgb(var(--secondary-130) / var(--tw-text-opacity));
@@ -1481,6 +1526,10 @@ video {
1481
1526
  --tw-text-opacity: 1;
1482
1527
  color: rgb(var(--text-grey-light) / var(--tw-text-opacity));
1483
1528
  }
1529
+ .text-textcolor-grey-medium {
1530
+ --tw-text-opacity: 1;
1531
+ color: rgb(var(--text-grey-medium) / var(--tw-text-opacity));
1532
+ }
1484
1533
  .text-warning {
1485
1534
  --tw-text-opacity: 1;
1486
1535
  color: rgb(var(--warning-default) / var(--tw-text-opacity));
@@ -1550,6 +1599,10 @@ video {
1550
1599
  .ring-offset-background {
1551
1600
  --tw-ring-offset-color: hsl(var(--background));
1552
1601
  }
1602
+ .blur {
1603
+ --tw-blur: blur(8px);
1604
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1605
+ }
1553
1606
  .filter {
1554
1607
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1555
1608
  }
@@ -1919,6 +1972,10 @@ video {
1919
1972
  --tw-bg-opacity: 1;
1920
1973
  background-color: rgb(var(--input-label-background-color) / var(--tw-bg-opacity));
1921
1974
  }
1975
+ .peer:focus ~ .peer-focus\:bg-red-500 {
1976
+ --tw-bg-opacity: 1;
1977
+ background-color: rgb(239 68 68 / var(--tw-bg-opacity));
1978
+ }
1922
1979
  .peer:focus ~ .peer-focus\:text-input-text-active {
1923
1980
  --tw-text-opacity: 1;
1924
1981
  color: rgb(var(--input-active-text-color) / var(--tw-text-opacity));
@@ -1956,6 +2013,10 @@ video {
1956
2013
  --tw-bg-opacity: 1;
1957
2014
  background-color: rgb(var(--primary-default) / var(--tw-bg-opacity));
1958
2015
  }
2016
+ .data-\[state\=selected\]\:bg-grey-20[data-state=selected] {
2017
+ --tw-bg-opacity: 1;
2018
+ background-color: rgb(var(--grey-20) / var(--tw-bg-opacity));
2019
+ }
1959
2020
  .data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
1960
2021
  --tw-text-opacity: 1;
1961
2022
  color: rgb(var(--primary-foreground) / var(--tw-text-opacity));
@@ -1992,8 +2053,11 @@ video {
1992
2053
  text-align: left;
1993
2054
  }
1994
2055
  }
1995
- .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
1996
- padding-right: 0px;
2056
+ .\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]) {
2057
+ width: 1rem;
2058
+ }
2059
+ .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-4:has([role=checkbox]) {
2060
+ padding-right: 1rem;
1997
2061
  }
1998
2062
  .\[\&\>tr\]\:last\:border-b-0:last-child>tr {
1999
2063
  border-bottom-width: 0px;