@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/container/Container.css CHANGED
@@ -1,29 +1,29 @@
1
- @layer ui.components {
1
+ @layer moduix.components {
2
2
  .o47Mga_root {
3
- --container-gutter: var(--container-gutter-md, clamp(1rem, 4vw, 2rem));
4
- --container-max-width: var(--container-max-width-lg, 72rem);
3
+ --moduix-container-gutter: var(--moduix-container-gutter-md, clamp(1rem, 4vw, 2rem));
4
+ --moduix-container-max-width: var(--moduix-container-max-width-lg, 72rem);
5
5
  box-sizing: border-box;
6
6
  width: 100%;
7
- max-width: calc(var(--container-max-width) + (var(--container-gutter) * 2));
7
+ max-width: calc(var(--moduix-container-max-width) + (var(--moduix-container-gutter) * 2));
8
8
  min-width: 0;
9
- padding-inline: var(--container-gutter);
9
+ padding-inline: var(--moduix-container-gutter);
10
10
  margin-inline: auto;
11
11
  display: block;
12
12
 
13
13
  &[data-size="xs"] {
14
- --container-max-width: var(--container-max-width-xs, 40rem);
14
+ --moduix-container-max-width: var(--moduix-container-max-width-xs, 40rem);
15
15
  }
16
16
 
17
17
  &[data-size="sm"] {
18
- --container-max-width: var(--container-max-width-sm, 48rem);
18
+ --moduix-container-max-width: var(--moduix-container-max-width-sm, 48rem);
19
19
  }
20
20
 
21
21
  &[data-size="md"] {
22
- --container-max-width: var(--container-max-width-md, 64rem);
22
+ --moduix-container-max-width: var(--moduix-container-max-width-md, 64rem);
23
23
  }
24
24
 
25
25
  &[data-size="xl"] {
26
- --container-max-width: var(--container-max-width-xl, 90rem);
26
+ --moduix-container-max-width: var(--moduix-container-max-width-xl, 90rem);
27
27
  }
28
28
 
29
29
  &[data-size="full"] {
@@ -31,15 +31,15 @@
31
31
  }
32
32
 
33
33
  &[data-gutter="none"] {
34
- --container-gutter: 0;
34
+ --moduix-container-gutter: 0;
35
35
  }
36
36
 
37
37
  &[data-gutter="sm"] {
38
- --container-gutter: var(--container-gutter-sm, clamp(.75rem, 3vw, 1.5rem));
38
+ --moduix-container-gutter: var(--moduix-container-gutter-sm, clamp(.75rem, 3vw, 1.5rem));
39
39
  }
40
40
 
41
41
  &[data-gutter="lg"] {
42
- --container-gutter: var(--container-gutter-lg, clamp(1.5rem, 5vw, 3rem));
42
+ --moduix-container-gutter: var(--moduix-container-gutter-lg, clamp(1.5rem, 5vw, 3rem));
43
43
  }
44
44
  }
45
45
  }
package/dist/components/date-input/DateInput.css CHANGED
@@ -1,53 +1,54 @@
1
- @layer ui.components {
1
+ @layer moduix.components {
2
2
  .X3ODua_root {
3
3
  align-items: flex-start;
4
- gap: var(--date-input-gap, var(--spacing-1));
5
- width: var(--date-input-width, 100%);
6
- max-width: var(--date-input-max-width, none);
4
+ gap: var(--moduix-date-input-gap, var(--moduix-spacing-1));
5
+ width: var(--moduix-date-input-width, 100%);
6
+ max-width: var(--moduix-date-input-max-width, none);
7
7
  flex-direction: column;
8
8
  display: inline-flex;
9
9
 
10
10
  &[data-disabled] {
11
- opacity: var(--date-input-disabled-opacity, var(--opacity-disabled));
11
+ opacity: var(--moduix-date-input-disabled-opacity, var(--moduix-opacity-disabled));
12
12
  }
13
13
  }
14
14
 
15
15
  .X3ODua_label {
16
- color: var(--date-input-label-color, var(--color-foreground));
17
- font-size: var(--date-input-label-font-size, var(--text-sm));
18
- font-weight: var(--date-input-label-font-weight, var(--weight-medium));
19
- line-height: var(--date-input-label-line-height, var(--line-height-text-sm));
16
+ color: var(--moduix-date-input-label-color, var(--moduix-color-foreground));
17
+ font-size: var(--moduix-date-input-label-font-size, var(--moduix-text-sm));
18
+ font-weight: var(--moduix-date-input-label-font-weight, var(--moduix-weight-medium));
19
+ line-height: var(--moduix-date-input-label-line-height, var(--moduix-line-height-text-sm));
20
20
  }
21
21
 
22
22
  .X3ODua_control {
23
23
  box-sizing: border-box;
24
- width: var(--date-input-control-width, 100%);
25
- min-height: var(--date-input-control-height, var(--size-md));
26
- border: var(--date-input-border-width, var(--border-width-sm))
27
- var(--date-input-border-style, solid) var(--date-input-border-color, var(--color-border));
28
- border-radius: var(--date-input-radius, var(--radius-md));
29
- padding: var(--date-input-padding-y, var(--spacing-1))
30
- var(--date-input-padding-x, var(--spacing-3));
31
- background-color: var(--date-input-bg, var(--color-background));
32
- color: var(--date-input-color, var(--color-foreground));
33
- outline: var(--date-input-focus-ring-width, var(--date-input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
24
+ width: var(--moduix-date-input-control-width, 100%);
25
+ min-height: var(--moduix-date-input-control-height, var(--moduix-size-md));
26
+ border: var(--moduix-date-input-border-width, var(--moduix-border-width-sm))
27
+ var(--moduix-date-input-border-style, solid)
28
+ var(--moduix-date-input-border-color, var(--moduix-color-border));
29
+ border-radius: var(--moduix-date-input-radius, var(--moduix-radius-md));
30
+ padding: var(--moduix-date-input-padding-y, var(--moduix-spacing-1))
31
+ var(--moduix-date-input-padding-x, var(--moduix-spacing-3));
32
+ background-color: var(--moduix-date-input-bg, var(--moduix-color-background));
33
+ color: var(--moduix-date-input-color, var(--moduix-color-foreground));
34
+ outline: var(--moduix-date-input-focus-ring-width, var(--moduix-date-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
34
35
  solid transparent;
35
- outline-offset: var(--date-input-focus-ring-offset, var(--focus-ring-inset-offset));
36
- transition: border-color var(--date-input-transition, var(--transition-default)),
37
- outline-color var(--date-input-transition, var(--transition-default)),
38
- opacity var(--date-input-transition, var(--transition-default));
36
+ outline-offset: var(--moduix-date-input-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
37
+ transition: border-color var(--moduix-date-input-transition, var(--moduix-transition-default)),
38
+ outline-color var(--moduix-date-input-transition, var(--moduix-transition-default)),
39
+ opacity var(--moduix-date-input-transition, var(--moduix-transition-default));
39
40
  align-items: center;
40
41
  display: inline-flex;
41
42
 
42
43
  &:focus-within, &[data-focus] {
43
- outline-color: var(--date-input-focus-ring-color, var(--color-ring));
44
+ outline-color: var(--moduix-date-input-focus-ring-color, var(--moduix-color-ring));
44
45
  }
45
46
 
46
47
  &[data-invalid] {
47
- border-color: var(--date-input-border-color-invalid, var(--color-destructive));
48
+ border-color: var(--moduix-date-input-border-color-invalid, var(--moduix-color-destructive));
48
49
 
49
50
  &:focus-within, &[data-focus] {
50
- outline-color: var(--date-input-border-color-invalid, var(--color-destructive));
51
+ outline-color: var(--moduix-date-input-border-color-invalid, var(--moduix-color-destructive));
51
52
  }
52
53
  }
53
54
 
@@ -58,32 +59,32 @@
58
59
 
59
60
  .X3ODua_segmentGroup {
60
61
  align-items: center;
61
- gap: var(--date-input-segment-gap, var(--border-width-md));
62
+ gap: var(--moduix-date-input-segment-gap, var(--moduix-border-width-md));
62
63
  font-variant-numeric: tabular-nums;
63
64
  display: inline-flex;
64
65
  }
65
66
 
66
67
  .X3ODua_segment {
67
- min-width: var(--date-input-segment-min-width, 2ch);
68
- border-radius: var(--date-input-segment-radius, var(--radius-sm));
69
- padding: var(--date-input-segment-padding-y, 0)
70
- var(--date-input-segment-padding-x, var(--spacing-1));
71
- color: var(--date-input-segment-color, currentColor);
68
+ min-width: var(--moduix-date-input-segment-min-width, 2ch);
69
+ border-radius: var(--moduix-date-input-segment-radius, var(--moduix-radius-sm));
70
+ padding: var(--moduix-date-input-segment-padding-y, 0)
71
+ var(--moduix-date-input-segment-padding-x, var(--moduix-spacing-1));
72
+ color: var(--moduix-date-input-segment-color, currentColor);
72
73
  font: inherit;
73
- line-height: var(--date-input-segment-line-height, var(--line-height-text-md));
74
+ line-height: var(--moduix-date-input-segment-line-height, var(--moduix-line-height-text-md));
74
75
  text-align: center;
75
76
  cursor: text;
76
- transition: background-color var(--date-input-transition, var(--transition-default)),
77
- color var(--date-input-transition, var(--transition-default));
77
+ transition: background-color var(--moduix-date-input-transition, var(--moduix-transition-default)),
78
+ color var(--moduix-date-input-transition, var(--moduix-transition-default));
78
79
  outline: 0;
79
80
 
80
81
  &[data-placeholder-shown] {
81
- color: var(--date-input-placeholder-color, var(--color-muted-foreground));
82
+ color: var(--moduix-date-input-placeholder-color, var(--moduix-color-muted-foreground));
82
83
  }
83
84
 
84
85
  &:focus-visible {
85
- background-color: var(--date-input-segment-bg-focus, color-mix(in oklab, var(--color-ring) 18%, transparent));
86
- color: var(--date-input-segment-color-focus, var(--color-foreground));
86
+ background-color: var(--moduix-date-input-segment-bg-focus, color-mix(in oklab, var(--moduix-color-ring) 18%, transparent));
87
+ color: var(--moduix-date-input-segment-color-focus, var(--moduix-color-foreground));
87
88
  }
88
89
 
89
90
  &:is([data-readonly], [data-disabled]) {
@@ -93,7 +94,7 @@
93
94
  &[data-type="literal"] {
94
95
  min-width: auto;
95
96
  box-shadow: none;
96
- color: var(--date-input-separator-color, var(--color-muted-foreground));
97
+ color: var(--moduix-date-input-separator-color, var(--moduix-color-muted-foreground));
97
98
  pointer-events: none;
98
99
  background: none;
99
100
  padding-inline: 0;
@@ -101,7 +102,7 @@
101
102
  }
102
103
 
103
104
  .X3ODua_separator {
104
- color: var(--date-input-separator-color, var(--color-muted-foreground));
105
+ color: var(--moduix-date-input-separator-color, var(--moduix-color-muted-foreground));
105
106
  user-select: none;
106
107
  }
107
108
  }