@moul-dev/ui 2026.8.25 → 2026.8.26

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 (8) hide show
  1. package/dist/assets/stylex.css +28 -0
  2. package/dist/moul-ui.js +1434 -1324
  3. package/dist/src/components/Sidebar/Sidebar.d.ts +7 -0
  4. package/dist/src/components/Sidebar/Sidebar.styles.d.ts +43 -0
  5. package/dist/src/components/Table/Table.d.ts +10 -0
  6. package/dist/src/components/Table/Table.styles.d.ts +33 -2
  7. package/dist/src/index.d.ts +1 -1
  8. package/package.json +1 -1
package/dist/src/components/Sidebar/Sidebar.d.ts CHANGED
@@ -8,6 +8,7 @@ interface SidebarContextValue {
8
8
  variant: 'solid' | 'glass';
9
9
  onCollapseToggle: () => void;
10
10
  showCollapseToggle?: boolean;
11
+ dense?: boolean;
11
12
  }
12
13
  export declare function useSidebar(): SidebarContextValue;
13
14
  export interface SidebarProps {
@@ -19,12 +20,14 @@ export interface SidebarProps {
19
20
  onSelectionChange?: (key: string) => void;
20
21
  variant?: 'solid' | 'glass';
21
22
  showCollapseToggle?: boolean;
23
+ dense?: boolean;
22
24
  style?: React.CSSProperties;
23
25
  className?: string;
24
26
  children?: React.ReactNode;
25
27
  }
26
28
  export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
27
29
  export interface SidebarHeaderProps {
30
+ dense?: boolean;
28
31
  style?: StyleXStyles;
29
32
  className?: string;
30
33
  children?: React.ReactNode;
@@ -36,6 +39,7 @@ export interface SidebarGroupProps {
36
39
  defaultExpanded?: boolean;
37
40
  isExpanded?: boolean;
38
41
  onExpandedChange?: (expanded: boolean) => void;
42
+ dense?: boolean;
39
43
  style?: StyleXStyles;
40
44
  className?: string;
41
45
  children?: React.ReactNode;
@@ -45,6 +49,7 @@ export interface SidebarItemProps extends Omit<AriaLinkProps, 'style' | 'classNa
45
49
  id?: string;
46
50
  icon?: React.ReactNode;
47
51
  isSelected?: boolean;
52
+ dense?: boolean;
48
53
  style?: StyleXStyles;
49
54
  className?: string;
50
55
  children?: React.ReactNode;
@@ -52,12 +57,14 @@ export interface SidebarItemProps extends Omit<AriaLinkProps, 'style' | 'classNa
52
57
  export declare const SidebarItem: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLAnchorElement>>;
53
58
  export interface SidebarFooterProps {
54
59
  showBorder?: boolean;
60
+ dense?: boolean;
55
61
  style?: StyleXStyles;
56
62
  className?: string;
57
63
  children?: React.ReactNode;
58
64
  }
59
65
  export declare const SidebarFooter: React.ForwardRefExoticComponent<SidebarFooterProps & React.RefAttributes<HTMLDivElement>>;
60
66
  export interface SidebarDividerProps {
67
+ dense?: boolean;
61
68
  style?: StyleXStyles;
62
69
  className?: string;
63
70
  }
package/dist/src/components/Sidebar/Sidebar.styles.d.ts CHANGED
@@ -49,6 +49,12 @@ export declare const styles: Readonly<{
49
49
  readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
50
50
  readonly gap: stylex.StyleXClassNameFor<"gap", string>;
51
51
  }>;
52
+ readonly headerDense: Readonly<{
53
+ readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "48px">;
54
+ readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
55
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
56
+ readonly gap: stylex.StyleXClassNameFor<"gap", string>;
57
+ }>;
52
58
  readonly headerCollapsed: Readonly<{
53
59
  readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
54
60
  readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
@@ -63,6 +69,9 @@ export declare const styles: Readonly<{
63
69
  readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity, transform">;
64
70
  readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.2s">;
65
71
  }>;
72
+ readonly headerContentDense: Readonly<{
73
+ readonly gap: stylex.StyleXClassNameFor<"gap", string>;
74
+ }>;
66
75
  readonly headerContentCollapsed: Readonly<{
67
76
  readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
68
77
  }>;
@@ -79,6 +88,12 @@ export declare const styles: Readonly<{
79
88
  readonly gap: stylex.StyleXClassNameFor<"gap", string>;
80
89
  readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "64px">;
81
90
  }>;
91
+ readonly footerDense: Readonly<{
92
+ readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "48px">;
93
+ readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
94
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
95
+ readonly gap: stylex.StyleXClassNameFor<"gap", string>;
96
+ }>;
82
97
  readonly footerBorder: Readonly<{
83
98
  readonly borderBlockStartColor: stylex.StyleXClassNameFor<"borderBlockStartColor", string>;
84
99
  }>;
@@ -96,6 +111,9 @@ export declare const styles: Readonly<{
96
111
  readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity, transform">;
97
112
  readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.2s">;
98
113
  }>;
114
+ readonly footerContentDense: Readonly<{
115
+ readonly gap: stylex.StyleXClassNameFor<"gap", string>;
116
+ }>;
99
117
  readonly footerContentCollapsed: Readonly<{
100
118
  readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
101
119
  }>;
@@ -106,6 +124,10 @@ export declare const styles: Readonly<{
106
124
  readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", string>;
107
125
  readonly gap: stylex.StyleXClassNameFor<"gap", string>;
108
126
  }>;
127
+ readonly groupDense: Readonly<{
128
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
129
+ readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", string>;
130
+ }>;
109
131
  readonly groupCollapsed: Readonly<{
110
132
  readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
111
133
  readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
@@ -125,6 +147,11 @@ export declare const styles: Readonly<{
125
147
  readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
126
148
  readonly height: stylex.StyleXClassNameFor<"height", string>;
127
149
  }>;
150
+ readonly groupHeaderDense: Readonly<{
151
+ readonly height: stylex.StyleXClassNameFor<"height", string>;
152
+ readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
153
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
154
+ }>;
128
155
  readonly groupHeaderCollapsible: Readonly<{
129
156
  readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
130
157
  readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
@@ -178,6 +205,9 @@ export declare const styles: Readonly<{
178
205
  readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
179
206
  readonly gap: stylex.StyleXClassNameFor<"gap", string>;
180
207
  }>;
208
+ readonly groupItemsInnerDense: Readonly<{
209
+ readonly gap: stylex.StyleXClassNameFor<"gap", "2px">;
210
+ }>;
181
211
  readonly item: Readonly<{
182
212
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
183
213
  readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
@@ -208,6 +238,12 @@ export declare const styles: Readonly<{
208
238
  readonly outlineOffset: "2px";
209
239
  }>;
210
240
  }>;
241
+ readonly itemDense: Readonly<{
242
+ readonly height: stylex.StyleXClassNameFor<"height", "30px">;
243
+ readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
244
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
245
+ readonly gap: stylex.StyleXClassNameFor<"gap", string>;
246
+ }>;
211
247
  readonly itemHover: Readonly<{
212
248
  readonly ':hover': stylex.StyleXClassNameFor<":hover", {
213
249
  readonly backgroundColor: stylex.StyleXVar<string>;
@@ -228,6 +264,10 @@ export declare const styles: Readonly<{
228
264
  readonly height: stylex.StyleXClassNameFor<"height", "36px">;
229
265
  readonly alignSelf: stylex.StyleXClassNameFor<"alignSelf", "center">;
230
266
  }>;
267
+ readonly itemCollapsedDense: Readonly<{
268
+ readonly width: stylex.StyleXClassNameFor<"width", "30px">;
269
+ readonly height: stylex.StyleXClassNameFor<"height", "30px">;
270
+ }>;
231
271
  readonly itemIcon: Readonly<{
232
272
  readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
233
273
  readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
@@ -261,6 +301,9 @@ export declare const styles: Readonly<{
261
301
  readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
262
302
  readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
263
303
  }>;
304
+ readonly dividerDense: Readonly<{
305
+ readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", string>;
306
+ }>;
264
307
  readonly dividerCollapsed: Readonly<{
265
308
  readonly marginInline: stylex.StyleXClassNameFor<"marginInline", string>;
266
309
  }>;
package/dist/src/components/Table/Table.d.ts CHANGED
@@ -3,6 +3,10 @@ import * as React from 'react';
3
3
  export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElement>, 'style'> {
4
4
  style?: StyleXStyles;
5
5
  className?: string;
6
+ /** Style for the inner table element when wrapInContainer is true */
7
+ tableStyle?: StyleXStyles;
8
+ /** Class name for the inner table element when wrapInContainer is true */
9
+ tableClassName?: string;
6
10
  /** Compact padding for high-density data */
7
11
  dense?: boolean;
8
12
  /** Alternating row background colors */
@@ -11,6 +15,8 @@ export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElem
11
15
  hoverable?: boolean;
12
16
  /** Keep table header pinned to top on scroll */
13
17
  stickyHeader?: boolean;
18
+ /** Draw vertical column borders between cells */
19
+ bordered?: boolean;
14
20
  /** Table layout algorithm */
15
21
  layout?: 'auto' | 'fixed';
16
22
  /** Wrap table in a responsive horizontal scroll container (default: true) */
@@ -56,6 +62,8 @@ export interface TableHeadProps extends Omit<React.ThHTMLAttributes<HTMLTableCel
56
62
  className?: string;
57
63
  /** Text & content alignment */
58
64
  align?: 'left' | 'center' | 'right' | 'numeric';
65
+ /** Draw vertical column border */
66
+ bordered?: boolean;
59
67
  /** Column pinning support */
60
68
  pinned?: 'left' | 'right' | 'start' | 'end';
61
69
  /** Pinning offset (e.g., 0, '120px') */
@@ -81,6 +89,8 @@ export interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCel
81
89
  className?: string;
82
90
  /** Text & numeric alignment */
83
91
  align?: 'left' | 'center' | 'right' | 'numeric';
92
+ /** Draw vertical column border */
93
+ bordered?: boolean;
84
94
  /** Column pinning support */
85
95
  pinned?: 'left' | 'right' | 'start' | 'end';
86
96
  /** Pinning offset (e.g., 0, '120px') */
package/dist/src/components/Table/Table.styles.d.ts CHANGED
@@ -4,6 +4,11 @@ export declare const styles: Readonly<{
4
4
  readonly position: stylex.StyleXClassNameFor<"position", "relative">;
5
5
  readonly width: stylex.StyleXClassNameFor<"width", "100%">;
6
6
  readonly overflowX: stylex.StyleXClassNameFor<"overflowX", "auto">;
7
+ readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
8
+ readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
9
+ readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
10
+ readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
11
+ readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
7
12
  }>;
8
13
  readonly table: Readonly<{
9
14
  readonly borderCollapse: stylex.StyleXClassNameFor<"borderCollapse", "collapse">;
@@ -47,16 +52,20 @@ export declare const styles: Readonly<{
47
52
  readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
48
53
  }>;
49
54
  readonly body: Readonly<{
55
+ readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
50
56
  readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
51
57
  }>;
52
58
  readonly row: Readonly<{
53
59
  readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "1px">;
54
60
  readonly borderBottomStyle: stylex.StyleXClassNameFor<"borderBottomStyle", "solid">;
55
61
  readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", string>;
56
- readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
62
+ readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
57
63
  readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, color">;
58
64
  readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
59
65
  readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease-in-out">;
66
+ readonly ':last-child': stylex.StyleXClassNameFor<":last-child", {
67
+ readonly borderBottomWidth: 0;
68
+ }>;
60
69
  readonly '@media (prefers-reduced-motion: reduce)': stylex.StyleXClassNameFor<"@media (prefers-reduced-motion: reduce)", {
61
70
  readonly transitionProperty: "none";
62
71
  }>;
@@ -86,10 +95,17 @@ export declare const styles: Readonly<{
86
95
  readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "1px">;
87
96
  readonly borderBottomStyle: stylex.StyleXClassNameFor<"borderBottomStyle", "solid">;
88
97
  readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", string>;
89
- readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "start">;
90
98
  readonly verticalAlign: stylex.StyleXClassNameFor<"verticalAlign", "middle">;
91
99
  readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
92
100
  }>;
101
+ readonly headBordered: Readonly<{
102
+ readonly borderInlineEndWidth: stylex.StyleXClassNameFor<"borderInlineEndWidth", "1px">;
103
+ readonly borderInlineEndStyle: stylex.StyleXClassNameFor<"borderInlineEndStyle", "solid">;
104
+ readonly borderInlineEndColor: stylex.StyleXClassNameFor<"borderInlineEndColor", string>;
105
+ readonly ':last-child': stylex.StyleXClassNameFor<":last-child", {
106
+ readonly borderInlineEndWidth: 0;
107
+ }>;
108
+ }>;
93
109
  readonly headDense: Readonly<{
94
110
  readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
95
111
  readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
@@ -137,6 +153,14 @@ export declare const styles: Readonly<{
137
153
  readonly verticalAlign: stylex.StyleXClassNameFor<"verticalAlign", "middle">;
138
154
  readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
139
155
  }>;
156
+ readonly cellBordered: Readonly<{
157
+ readonly borderInlineEndWidth: stylex.StyleXClassNameFor<"borderInlineEndWidth", "1px">;
158
+ readonly borderInlineEndStyle: stylex.StyleXClassNameFor<"borderInlineEndStyle", "solid">;
159
+ readonly borderInlineEndColor: stylex.StyleXClassNameFor<"borderInlineEndColor", string>;
160
+ readonly ':last-child': stylex.StyleXClassNameFor<":last-child", {
161
+ readonly borderInlineEndWidth: 0;
162
+ }>;
163
+ }>;
140
164
  readonly cellDense: Readonly<{
141
165
  readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
142
166
  readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
@@ -191,9 +215,16 @@ export declare const styles: Readonly<{
191
215
  readonly color: stylex.StyleXClassNameFor<"color", string>;
192
216
  readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "start">;
193
217
  readonly captionSide: stylex.StyleXClassNameFor<"captionSide", "bottom">;
218
+ readonly borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", "1px">;
219
+ readonly borderTopStyle: stylex.StyleXClassNameFor<"borderTopStyle", "solid">;
220
+ readonly borderTopColor: stylex.StyleXClassNameFor<"borderTopColor", string>;
194
221
  }>;
195
222
  readonly captionTop: Readonly<{
196
223
  readonly captionSide: stylex.StyleXClassNameFor<"captionSide", "top">;
224
+ readonly borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", 0>;
225
+ readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "1px">;
226
+ readonly borderBottomStyle: stylex.StyleXClassNameFor<"borderBottomStyle", "solid">;
227
+ readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", string>;
197
228
  }>;
198
229
  readonly emptyCell: Readonly<{
199
230
  readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
package/dist/src/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const version = "2026.08.25";
1
+ export declare const version = "2026.08.26";
2
2
  export { Alert } from './components/Alert';
3
3
  export type { AlertProps, AlertVariant } from './components/Alert/Alert';
4
4
  export { AlertDialog, AlertDialogBody, AlertDialogFooter, AlertDialogHeader, } from './components/AlertDialog';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moul-dev/ui",
3
- "version": "2026.08.25",
3
+ "version": "2026.08.26",
4
4
  "description": "Accessible, zero-runtime React component library built on React Aria and StyleX",
5
5
  "license": "MIT",
6
6
  "type": "module",