@moduix/react 2.0.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 (108) hide show
  1. package/README.md +100 -173
  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 -33
  8. package/dist/components/bleed/Bleed.css +13 -13
  9. package/dist/components/breadcrumbs/Breadcrumbs.css +29 -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 +162 -151
  18. package/dist/components/combobox/Combobox.css +120 -130
  19. package/dist/components/command-palette/CommandPalette.css +173 -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 -39
  23. package/dist/components/date-picker/DatePicker.css +181 -186
  24. package/dist/components/dialog/Dialog.css +84 -78
  25. package/dist/components/drawer/Drawer.css +126 -107
  26. package/dist/components/editable/Editable.css +64 -60
  27. package/dist/components/empty/Empty.css +25 -25
  28. package/dist/components/field/Field.css +46 -44
  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/floating-panel/FloatingPanel.d.ts +1 -1
  33. package/dist/components/heading/Heading.css +26 -26
  34. package/dist/components/highlight/Highlight.css +8 -8
  35. package/dist/components/hover-card/HoverCard.css +49 -47
  36. package/dist/components/image/Image.css +2 -2
  37. package/dist/components/image-cropper/ImageCropper.css +63 -56
  38. package/dist/components/input/Input.css +47 -46
  39. package/dist/components/input-group/InputGroup.css +71 -70
  40. package/dist/components/kbd/Kbd.css +16 -16
  41. package/dist/components/lightbox/Lightbox.css +80 -77
  42. package/dist/components/list/List.css +32 -32
  43. package/dist/components/listbox/Listbox.css +121 -116
  44. package/dist/components/marquee/Marquee.css +16 -16
  45. package/dist/components/menu/Menu.css +122 -118
  46. package/dist/components/native-select/NativeSelect.css +48 -42
  47. package/dist/components/number-input/NumberInput.css +62 -60
  48. package/dist/components/pagination/Pagination.css +35 -34
  49. package/dist/components/password-input/PasswordInput.css +60 -59
  50. package/dist/components/pin-input/PinInput.css +35 -35
  51. package/dist/components/popover/Popover.css +81 -76
  52. package/dist/components/progress-circular/ProgressCircular.css +20 -20
  53. package/dist/components/progress-linear/ProgressLinear.css +29 -28
  54. package/dist/components/qr-code/QrCode.css +39 -35
  55. package/dist/components/radio-group/RadioGroup.css +48 -48
  56. package/dist/components/rating-group/RatingGroup.css +30 -30
  57. package/dist/components/scroll-area/ScrollArea.css +34 -34
  58. package/dist/components/segment-group/SegmentGroup.css +37 -37
  59. package/dist/components/select/Select.css +137 -128
  60. package/dist/components/select/Select.d.ts +0 -5
  61. package/dist/components/select/Select.js +1 -9
  62. package/dist/components/select/Select.module.js +0 -1
  63. package/dist/components/separator/Separator.css +13 -13
  64. package/dist/components/sidebar/Sidebar.css +143 -142
  65. package/dist/components/signature-pad/SignaturePad.css +51 -50
  66. package/dist/components/skeleton/Skeleton.css +7 -5
  67. package/dist/components/slider/Slider.css +61 -59
  68. package/dist/components/spinner/Spinner.css +12 -12
  69. package/dist/components/split-button/SplitButton.css +12 -12
  70. package/dist/components/splitter/Splitter.css +63 -62
  71. package/dist/components/splitter/Splitter.js +2 -2
  72. package/dist/components/stack/Stack.css +4 -4
  73. package/dist/components/stack/Stack.js +3 -3
  74. package/dist/components/steps/Steps.css +89 -88
  75. package/dist/components/swap/Swap.css +7 -7
  76. package/dist/components/switch/Switch.css +59 -57
  77. package/dist/components/table/Table.css +58 -56
  78. package/dist/components/tabs/Tabs.css +64 -62
  79. package/dist/components/tag/Tag.css +45 -45
  80. package/dist/components/tags-input/TagsInput.css +93 -86
  81. package/dist/components/text/Text.css +23 -23
  82. package/dist/components/text/Text.js +1 -1
  83. package/dist/components/textarea/Textarea.css +27 -25
  84. package/dist/components/timer/Timer.css +38 -37
  85. package/dist/components/toast/Toast.css +94 -78
  86. package/dist/components/toggle/Toggle.css +66 -66
  87. package/dist/components/toggle-group/ToggleGroup.css +16 -16
  88. package/dist/components/tooltip/Tooltip.css +56 -52
  89. package/dist/components/tour/Tour.css +121 -117
  90. package/dist/components/tree-view/TreeView.css +91 -86
  91. package/dist/components/typeset/Typeset.css +317 -0
  92. package/dist/components/typeset/Typeset.d.ts +7 -0
  93. package/dist/components/typeset/Typeset.js +33 -0
  94. package/dist/components/typeset/Typeset.module.js +8 -0
  95. package/dist/index.d.ts +3 -1
  96. package/dist/index.js +3 -1
  97. package/dist/lib/moduix/presets/contrast.css +64 -0
  98. package/dist/lib/moduix/presets/dense.css +77 -0
  99. package/dist/lib/moduix/presets/soft.css +76 -0
  100. package/dist/lib/moduix/styles/reset.css +34 -1
  101. package/dist/lib/moduix/styles/style.css +230 -213
  102. package/dist/presets/contrast.d.ts +1 -0
  103. package/dist/presets/contrast.js +1 -0
  104. package/dist/presets/dense.d.ts +1 -0
  105. package/dist/presets/dense.js +1 -0
  106. package/dist/presets/soft.d.ts +1 -0
  107. package/dist/presets/soft.js +1 -0
  108. package/package.json +4 -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,52 +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-lg));
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, .5rem) var(--date-input-padding-x, .75rem);
30
- background-color: var(--date-input-bg, var(--color-background));
31
- color: var(--date-input-color, var(--color-foreground));
32
- outline: var(--date-input-focus-ring-width, var(--date-input-border-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))))
33
35
  solid transparent;
34
- outline-offset: var(--date-input-focus-ring-offset, -1px);
35
- transition: border-color var(--date-input-transition, var(--transition-default)),
36
- outline-color var(--date-input-transition, var(--transition-default)),
37
- 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));
38
40
  align-items: center;
39
41
  display: inline-flex;
40
42
 
41
43
  &:focus-within, &[data-focus] {
42
- 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));
43
45
  }
44
46
 
45
47
  &[data-invalid] {
46
- 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));
47
49
 
48
50
  &:focus-within, &[data-focus] {
49
- 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));
50
52
  }
51
53
  }
52
54
 
@@ -57,32 +59,32 @@
57
59
 
58
60
  .X3ODua_segmentGroup {
59
61
  align-items: center;
60
- gap: var(--date-input-segment-gap, var(--border-width-md));
62
+ gap: var(--moduix-date-input-segment-gap, var(--moduix-border-width-md));
61
63
  font-variant-numeric: tabular-nums;
62
64
  display: inline-flex;
63
65
  }
64
66
 
65
67
  .X3ODua_segment {
66
- min-width: var(--date-input-segment-min-width, 2ch);
67
- border-radius: var(--date-input-segment-radius, var(--radius-sm));
68
- padding: var(--date-input-segment-padding-y, 0)
69
- var(--date-input-segment-padding-x, var(--spacing-1));
70
- 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);
71
73
  font: inherit;
72
- 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));
73
75
  text-align: center;
74
76
  cursor: text;
75
- transition: background-color var(--date-input-transition, var(--transition-default)),
76
- 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));
77
79
  outline: 0;
78
80
 
79
81
  &[data-placeholder-shown] {
80
- color: var(--date-input-placeholder-color, var(--color-muted-foreground));
82
+ color: var(--moduix-date-input-placeholder-color, var(--moduix-color-muted-foreground));
81
83
  }
82
84
 
83
85
  &:focus-visible {
84
- background-color: var(--date-input-segment-bg-focus, color-mix(in oklab, var(--color-ring) 18%, transparent));
85
- 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));
86
88
  }
87
89
 
88
90
  &:is([data-readonly], [data-disabled]) {
@@ -92,7 +94,7 @@
92
94
  &[data-type="literal"] {
93
95
  min-width: auto;
94
96
  box-shadow: none;
95
- color: var(--date-input-separator-color, var(--color-muted-foreground));
97
+ color: var(--moduix-date-input-separator-color, var(--moduix-color-muted-foreground));
96
98
  pointer-events: none;
97
99
  background: none;
98
100
  padding-inline: 0;
@@ -100,7 +102,7 @@
100
102
  }
101
103
 
102
104
  .X3ODua_separator {
103
- color: var(--date-input-separator-color, var(--color-muted-foreground));
105
+ color: var(--moduix-date-input-separator-color, var(--moduix-color-muted-foreground));
104
106
  user-select: none;
105
107
  }
106
108
  }