@moduix/react 2.1.0 → 2.2.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 (96) hide show
  1. package/README.md +13 -14
  2. package/dist/components/accordion/Accordion.css +47 -47
  3. package/dist/components/alert/Alert.css +62 -46
  4. package/dist/components/angle-slider/AngleSlider.css +65 -64
  5. package/dist/components/aspect-ratio/AspectRatio.css +2 -2
  6. package/dist/components/avatar/Avatar.css +26 -26
  7. package/dist/components/badge/Badge.css +34 -34
  8. package/dist/components/bleed/Bleed.css +13 -13
  9. package/dist/components/breadcrumbs/Breadcrumbs.css +28 -28
  10. package/dist/components/button/Button.css +81 -78
  11. package/dist/components/card/Card.css +46 -46
  12. package/dist/components/carousel/Carousel.css +57 -57
  13. package/dist/components/checkbox/Checkbox.css +40 -40
  14. package/dist/components/clipboard/Clipboard.css +68 -59
  15. package/dist/components/close-button/CloseButton.css +17 -17
  16. package/dist/components/collapsible/Collapsible.css +40 -38
  17. package/dist/components/color-picker/ColorPicker.css +155 -151
  18. package/dist/components/combobox/Combobox.css +118 -115
  19. package/dist/components/command-palette/CommandPalette.css +172 -177
  20. package/dist/components/command-palette/CommandPalette.module.js +0 -1
  21. package/dist/components/container/Container.css +12 -12
  22. package/dist/components/date-input/DateInput.css +41 -40
  23. package/dist/components/date-picker/DatePicker.css +174 -172
  24. package/dist/components/dialog/Dialog.css +84 -79
  25. package/dist/components/drawer/Drawer.css +126 -108
  26. package/dist/components/editable/Editable.css +63 -61
  27. package/dist/components/empty/Empty.css +25 -25
  28. package/dist/components/field/Field.css +45 -45
  29. package/dist/components/fieldset/Fieldset.css +22 -22
  30. package/dist/components/file-upload/FileUpload.css +128 -125
  31. package/dist/components/floating-panel/FloatingPanel.css +114 -110
  32. package/dist/components/heading/Heading.css +26 -26
  33. package/dist/components/highlight/Highlight.css +8 -8
  34. package/dist/components/hover-card/HoverCard.css +49 -47
  35. package/dist/components/image/Image.css +2 -2
  36. package/dist/components/image-cropper/ImageCropper.css +63 -60
  37. package/dist/components/input/Input.css +46 -45
  38. package/dist/components/input-group/InputGroup.css +71 -70
  39. package/dist/components/kbd/Kbd.css +16 -16
  40. package/dist/components/lightbox/Lightbox.css +80 -77
  41. package/dist/components/list/List.css +32 -32
  42. package/dist/components/listbox/Listbox.css +120 -117
  43. package/dist/components/marquee/Marquee.css +16 -16
  44. package/dist/components/menu/Menu.css +121 -120
  45. package/dist/components/native-select/NativeSelect.css +42 -41
  46. package/dist/components/number-input/NumberInput.css +59 -56
  47. package/dist/components/pagination/Pagination.css +35 -34
  48. package/dist/components/password-input/PasswordInput.css +60 -59
  49. package/dist/components/pin-input/PinInput.css +35 -35
  50. package/dist/components/popover/Popover.css +81 -77
  51. package/dist/components/progress-circular/ProgressCircular.css +20 -20
  52. package/dist/components/progress-linear/ProgressLinear.css +29 -28
  53. package/dist/components/qr-code/QrCode.css +39 -35
  54. package/dist/components/radio-group/RadioGroup.css +48 -48
  55. package/dist/components/rating-group/RatingGroup.css +30 -30
  56. package/dist/components/scroll-area/ScrollArea.css +34 -34
  57. package/dist/components/segment-group/SegmentGroup.css +37 -37
  58. package/dist/components/select/Select.css +118 -126
  59. package/dist/components/select/Select.d.ts +0 -5
  60. package/dist/components/select/Select.js +0 -8
  61. package/dist/components/select/Select.module.js +0 -1
  62. package/dist/components/separator/Separator.css +13 -13
  63. package/dist/components/sidebar/Sidebar.css +142 -142
  64. package/dist/components/signature-pad/SignaturePad.css +50 -50
  65. package/dist/components/skeleton/Skeleton.css +7 -5
  66. package/dist/components/slider/Slider.css +61 -61
  67. package/dist/components/spinner/Spinner.css +12 -12
  68. package/dist/components/split-button/SplitButton.css +12 -12
  69. package/dist/components/splitter/Splitter.css +63 -62
  70. package/dist/components/splitter/Splitter.js +2 -2
  71. package/dist/components/stack/Stack.css +4 -4
  72. package/dist/components/stack/Stack.js +3 -3
  73. package/dist/components/steps/Steps.css +89 -89
  74. package/dist/components/swap/Swap.css +7 -7
  75. package/dist/components/switch/Switch.css +59 -57
  76. package/dist/components/table/Table.css +58 -56
  77. package/dist/components/tabs/Tabs.css +64 -62
  78. package/dist/components/tag/Tag.css +45 -45
  79. package/dist/components/tags-input/TagsInput.css +92 -86
  80. package/dist/components/text/Text.css +23 -23
  81. package/dist/components/text/Text.js +1 -1
  82. package/dist/components/textarea/Textarea.css +27 -26
  83. package/dist/components/timer/Timer.css +38 -37
  84. package/dist/components/toast/Toast.css +94 -79
  85. package/dist/components/toggle/Toggle.css +66 -66
  86. package/dist/components/toggle-group/ToggleGroup.css +16 -16
  87. package/dist/components/tooltip/Tooltip.css +56 -53
  88. package/dist/components/tour/Tour.css +121 -117
  89. package/dist/components/tree-view/TreeView.css +88 -86
  90. package/dist/components/typeset/Typeset.css +61 -61
  91. package/dist/lib/moduix/presets/contrast.css +59 -60
  92. package/dist/lib/moduix/presets/dense.css +72 -73
  93. package/dist/lib/moduix/presets/soft.css +71 -72
  94. package/dist/lib/moduix/styles/reset.css +1 -1
  95. package/dist/lib/moduix/styles/style.css +230 -226
  96. package/package.json +1 -1
package/dist/components/collapsible/Collapsible.css CHANGED
@@ -1,15 +1,15 @@
1
- @layer ui.components {
1
+ @layer moduix.components {
2
2
  @keyframes CaaIva_collapsible-content-open {
3
3
  from {
4
4
  height: var(--collapsed-height, 0);
5
5
  width: var(--collapsed-width, var(--width));
6
- opacity: var(--collapsible-content-closed-opacity, .01);
6
+ opacity: var(--moduix-collapsible-content-closed-opacity, .01);
7
7
  }
8
8
 
9
9
  to {
10
10
  height: var(--height);
11
11
  width: var(--width);
12
- opacity: var(--collapsible-content-open-opacity, 1);
12
+ opacity: var(--moduix-collapsible-content-open-opacity, 1);
13
13
  }
14
14
  }
15
15
 
@@ -17,22 +17,22 @@
17
17
  from {
18
18
  height: var(--height);
19
19
  width: var(--width);
20
- opacity: var(--collapsible-content-open-opacity, 1);
20
+ opacity: var(--moduix-collapsible-content-open-opacity, 1);
21
21
  }
22
22
 
23
23
  to {
24
24
  height: var(--collapsed-height, 0);
25
25
  width: var(--collapsed-width, var(--width));
26
- opacity: var(--collapsible-content-closed-opacity, .01);
26
+ opacity: var(--moduix-collapsible-content-closed-opacity, .01);
27
27
  }
28
28
  }
29
29
 
30
30
  .CaaIva_root {
31
31
  box-sizing: border-box;
32
- width: var(--collapsible-width, 100%);
33
- max-width: var(--collapsible-max-width, 100%);
32
+ width: var(--moduix-collapsible-width, 100%);
33
+ max-width: var(--moduix-collapsible-max-width, 100%);
34
34
  min-width: 0;
35
- color: var(--collapsible-color, var(--color-foreground));
35
+ color: var(--moduix-collapsible-color, var(--moduix-color-foreground));
36
36
  flex-direction: column;
37
37
  display: flex;
38
38
  }
@@ -41,55 +41,57 @@
41
41
  box-sizing: border-box;
42
42
  justify-content: space-between;
43
43
  align-items: center;
44
- gap: var(--collapsible-trigger-gap, var(--spacing-2));
45
- border-radius: var(--collapsible-trigger-radius, 0);
44
+ gap: var(--moduix-collapsible-trigger-gap, var(--moduix-spacing-2));
45
+ border-radius: var(--moduix-collapsible-trigger-radius, 0);
46
46
  width: 100%;
47
- padding-block: var(--collapsible-trigger-padding-y, var(--spacing-1));
48
- padding-inline: var(--collapsible-trigger-padding-x, var(--spacing-2));
49
- background-color: var(--collapsible-trigger-bg, transparent);
50
- color: var(--collapsible-trigger-color, var(--collapsible-color, var(--color-foreground)));
47
+ padding-block: var(--moduix-collapsible-trigger-padding-y, var(--moduix-spacing-1));
48
+ padding-inline: var(--moduix-collapsible-trigger-padding-x, var(--moduix-spacing-2));
49
+ background-color: var(--moduix-collapsible-trigger-bg, transparent);
50
+ color: var(--moduix-collapsible-trigger-color, var(--moduix-collapsible-color, var(--moduix-color-foreground)));
51
51
  font: inherit;
52
- font-size: var(--collapsible-trigger-font-size, var(--text-sm));
53
- line-height: var(--collapsible-trigger-line-height, var(--line-height-text-sm));
52
+ font-size: var(--moduix-collapsible-trigger-font-size, var(--moduix-text-sm));
53
+ line-height: var(--moduix-collapsible-trigger-line-height, var(--moduix-line-height-text-sm));
54
54
  text-align: left;
55
55
  user-select: none;
56
56
  cursor: pointer;
57
- transition: background-color var(--collapsible-trigger-transition, var(--transition-default)),
58
- color var(--collapsible-trigger-transition, var(--transition-default));
57
+ transition: background-color
58
+ var(--moduix-collapsible-trigger-transition, var(--moduix-transition-default)),
59
+ color var(--moduix-collapsible-trigger-transition, var(--moduix-transition-default));
59
60
  border: 0;
60
61
  outline: 0;
61
62
  margin: 0;
62
63
  display: flex;
63
64
 
64
65
  &:focus-visible {
65
- outline: var(--collapsible-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
66
- solid var(--collapsible-focus-ring-color, var(--color-ring));
67
- outline-offset: var(--collapsible-focus-ring-offset, var(--border-width-sm));
66
+ outline: var(--moduix-collapsible-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
67
+ solid var(--moduix-collapsible-focus-ring-color, var(--moduix-color-ring));
68
+ outline-offset: var(--moduix-collapsible-focus-ring-offset, var(--moduix-border-width-sm));
68
69
  }
69
70
 
70
71
  &:not(:is([disabled], [data-disabled])) {
71
72
  @media (hover: hover) {
72
73
  &:hover {
73
- background-color: var(--collapsible-trigger-bg-hover, var(--collapsible-trigger-bg, transparent));
74
+ background-color: var(--moduix-collapsible-trigger-bg-hover, var(--moduix-collapsible-trigger-bg, transparent));
74
75
  }
75
76
  }
76
77
 
77
78
  &:active {
78
- background-color: var(--collapsible-trigger-bg-active, var(--collapsible-trigger-bg-hover, var(--collapsible-trigger-bg, transparent)));
79
+ background-color: var(--moduix-collapsible-trigger-bg-active, var(--moduix-collapsible-trigger-bg-hover, var(--moduix-collapsible-trigger-bg, transparent)));
79
80
  }
80
81
  }
81
82
 
82
83
  &:is([disabled], [data-disabled]) {
83
- opacity: var(--collapsible-disabled-opacity, var(--opacity-disabled));
84
+ opacity: var(--moduix-collapsible-disabled-opacity, var(--moduix-opacity-disabled));
84
85
  cursor: default;
85
86
  }
86
87
  }
87
88
 
88
89
  .CaaIva_indicator {
89
90
  box-sizing: border-box;
90
- width: var(--collapsible-indicator-size, var(--spacing-3));
91
- height: var(--collapsible-indicator-size, var(--spacing-3));
92
- transition: transform var(--collapsible-indicator-transition, var(--transition-default));
91
+ width: var(--moduix-collapsible-indicator-size, var(--moduix-spacing-3));
92
+ height: var(--moduix-collapsible-indicator-size, var(--moduix-spacing-3));
93
+ transition: transform
94
+ var(--moduix-collapsible-indicator-transition, var(--moduix-transition-default));
93
95
  flex-shrink: 0;
94
96
  justify-content: center;
95
97
  align-items: center;
@@ -101,45 +103,45 @@
101
103
  }
102
104
 
103
105
  &[data-state="open"] {
104
- transform: var(--collapsible-indicator-open-transform, rotate(180deg));
106
+ transform: var(--moduix-collapsible-indicator-open-transform, rotate(180deg));
105
107
  }
106
108
 
107
109
  &[data-disabled] {
108
- opacity: var(--collapsible-disabled-opacity, var(--opacity-disabled));
110
+ opacity: var(--moduix-collapsible-disabled-opacity, var(--moduix-opacity-disabled));
109
111
  }
110
112
  }
111
113
 
112
114
  .CaaIva_content {
113
115
  --collapsed-height: 0;
114
116
  box-sizing: border-box;
115
- color: var(--collapsible-content-color, var(--color-muted-foreground));
116
- font-size: var(--collapsible-content-font-size, var(--text-sm));
117
- line-height: var(--collapsible-content-line-height, var(--line-height-text-sm));
117
+ color: var(--moduix-collapsible-content-color, var(--moduix-color-muted-foreground));
118
+ font-size: var(--moduix-collapsible-content-font-size, var(--moduix-text-sm));
119
+ line-height: var(--moduix-collapsible-content-line-height, var(--moduix-line-height-text-sm));
118
120
  overflow: hidden;
119
121
 
120
122
  &[data-state="open"] {
121
123
  animation: CaaIva_collapsible-content-open
122
- var(--collapsible-content-transition, var(--transition-default));
124
+ var(--moduix-collapsible-content-transition, var(--moduix-transition-default));
123
125
 
124
126
  &[data-has-collapsed-size] {
125
- --collapsible-content-closed-opacity: var(--collapsible-content-open-opacity, 1);
127
+ --moduix-collapsible-content-closed-opacity: var(--moduix-collapsible-content-open-opacity, 1);
126
128
  }
127
129
  }
128
130
 
129
131
  &[data-state="closed"] {
130
132
  animation: CaaIva_collapsible-content-closed
131
- var(--collapsible-content-transition, var(--transition-default));
133
+ var(--moduix-collapsible-content-transition, var(--moduix-transition-default));
132
134
 
133
135
  &[data-has-collapsed-size] {
134
- --collapsible-content-closed-opacity: var(--collapsible-content-open-opacity, 1);
136
+ --moduix-collapsible-content-closed-opacity: var(--moduix-collapsible-content-open-opacity, 1);
135
137
  }
136
138
  }
137
139
  }
138
140
 
139
141
  .CaaIva_body {
140
- gap: var(--collapsible-body-gap, var(--spacing-2));
142
+ gap: var(--moduix-collapsible-body-gap, var(--moduix-spacing-2));
141
143
  min-width: 0;
142
- padding: var(--collapsible-body-padding, var(--spacing-2));
144
+ padding: var(--moduix-collapsible-body-padding, var(--moduix-spacing-2));
143
145
  display: grid;
144
146
  }
145
147
  }