@moul-dev/ui 2026.8.26 → 2026.9.7

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 (20) hide show
  1. package/dist/assets/stylex.css +30 -6
  2. package/dist/moul-ui.js +2636 -2332
  3. package/dist/src/App.d.ts +1 -1
  4. package/dist/src/components/Alert/Alert.styles.d.ts +11 -14
  5. package/dist/src/components/Sidebar/Sidebar.d.ts +28 -0
  6. package/dist/src/components/Sidebar/Sidebar.styles.d.ts +203 -7
  7. package/dist/src/components/Sidebar/index.d.ts +2 -2
  8. package/dist/src/components/Table/index.d.ts +1 -1
  9. package/dist/src/index.d.ts +6 -4
  10. package/dist/src/sandbox/icons.d.ts +13 -0
  11. package/dist/src/sandbox/sections/ActionsSection.d.ts +2 -0
  12. package/dist/src/sandbox/sections/BlocksSection.d.ts +14 -0
  13. package/dist/src/sandbox/sections/ChartsSection.d.ts +2 -0
  14. package/dist/src/sandbox/sections/FeedbackSection.d.ts +2 -0
  15. package/dist/src/sandbox/sections/FormsSection.d.ts +2 -0
  16. package/dist/src/sandbox/sections/LayoutSection.d.ts +2 -0
  17. package/dist/src/sandbox/sections/NavigationSection.d.ts +2 -0
  18. package/dist/src/sandbox/sections/OverlaysSection.d.ts +6 -0
  19. package/dist/src/sandbox/types.d.ts +7 -0
  20. package/package.json +5 -8
package/dist/src/App.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare function App(): import("react").JSX.Element;
1
+ export declare function App(): import("react").JSX.Element;
2
2
  export default App;
package/dist/src/components/Alert/Alert.styles.d.ts CHANGED
@@ -60,23 +60,10 @@ export declare const styles: Readonly<{
60
60
  readonly height: stylex.StyleXClassNameFor<"height", string>;
61
61
  readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", string>;
62
62
  }>;
63
- readonly closeButton: Readonly<{
64
- readonly background: stylex.StyleXClassNameFor<"background", "transparent">;
65
- readonly border: stylex.StyleXClassNameFor<"border", "none">;
66
- readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
63
+ readonly closeButton_info: Readonly<{
67
64
  readonly color: stylex.StyleXClassNameFor<"color", string>;
68
- readonly display: stylex.StyleXClassNameFor<"display", "flex">;
69
- readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
70
- readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
71
- readonly padding: stylex.StyleXClassNameFor<"padding", string>;
72
- readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
73
- readonly transition: stylex.StyleXClassNameFor<"transition", "background-color 0.15s, color 0.15s">;
74
65
  readonly ':hover': stylex.StyleXClassNameFor<":hover", {
75
66
  readonly color: stylex.StyleXVar<string>;
76
- }>;
77
- }>;
78
- readonly closeButton_info: Readonly<{
79
- readonly ':hover': stylex.StyleXClassNameFor<":hover", {
80
67
  readonly backgroundColor: stylex.StyleXVar<string>;
81
68
  }>;
82
69
  readonly ':active': stylex.StyleXClassNameFor<":active", {
@@ -84,7 +71,9 @@ export declare const styles: Readonly<{
84
71
  }>;
85
72
  }>;
86
73
  readonly closeButton_loading: Readonly<{
74
+ readonly color: stylex.StyleXClassNameFor<"color", string>;
87
75
  readonly ':hover': stylex.StyleXClassNameFor<":hover", {
76
+ readonly color: stylex.StyleXVar<string>;
88
77
  readonly backgroundColor: stylex.StyleXVar<string>;
89
78
  }>;
90
79
  readonly ':active': stylex.StyleXClassNameFor<":active", {
@@ -92,7 +81,9 @@ export declare const styles: Readonly<{
92
81
  }>;
93
82
  }>;
94
83
  readonly closeButton_accent: Readonly<{
84
+ readonly color: stylex.StyleXClassNameFor<"color", string>;
95
85
  readonly ':hover': stylex.StyleXClassNameFor<":hover", {
86
+ readonly color: stylex.StyleXVar<string>;
96
87
  readonly backgroundColor: stylex.StyleXVar<string>;
97
88
  }>;
98
89
  readonly ':active': stylex.StyleXClassNameFor<":active", {
@@ -100,7 +91,9 @@ export declare const styles: Readonly<{
100
91
  }>;
101
92
  }>;
102
93
  readonly closeButton_success: Readonly<{
94
+ readonly color: stylex.StyleXClassNameFor<"color", string>;
103
95
  readonly ':hover': stylex.StyleXClassNameFor<":hover", {
96
+ readonly color: stylex.StyleXVar<string>;
104
97
  readonly backgroundColor: stylex.StyleXVar<string>;
105
98
  }>;
106
99
  readonly ':active': stylex.StyleXClassNameFor<":active", {
@@ -108,7 +101,9 @@ export declare const styles: Readonly<{
108
101
  }>;
109
102
  }>;
110
103
  readonly closeButton_warning: Readonly<{
104
+ readonly color: stylex.StyleXClassNameFor<"color", string>;
111
105
  readonly ':hover': stylex.StyleXClassNameFor<":hover", {
106
+ readonly color: stylex.StyleXVar<string>;
112
107
  readonly backgroundColor: stylex.StyleXVar<string>;
113
108
  }>;
114
109
  readonly ':active': stylex.StyleXClassNameFor<":active", {
@@ -116,7 +111,9 @@ export declare const styles: Readonly<{
116
111
  }>;
117
112
  }>;
118
113
  readonly closeButton_error: Readonly<{
114
+ readonly color: stylex.StyleXClassNameFor<"color", string>;
119
115
  readonly ':hover': stylex.StyleXClassNameFor<":hover", {
116
+ readonly color: stylex.StyleXVar<string>;
120
117
  readonly backgroundColor: stylex.StyleXVar<string>;
121
118
  }>;
122
119
  readonly ':active': stylex.StyleXClassNameFor<":active", {
package/dist/src/components/Sidebar/Sidebar.d.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  import { StyleXStyles } from '@stylexjs/stylex';
2
2
  import { LinkProps as AriaLinkProps } from 'react-aria-components';
3
3
  import * as React from 'react';
4
+ export type SidebarLayout = 'sidebar-framed' | 'main-framed' | 'default' | 'inset';
4
5
  interface SidebarContextValue {
5
6
  isCollapsed: boolean;
6
7
  selectedKey?: string;
7
8
  onSelectionChange?: (key: string) => void;
8
9
  variant: 'solid' | 'glass';
10
+ layout: 'sidebar-framed' | 'main-framed';
9
11
  onCollapseToggle: () => void;
10
12
  showCollapseToggle?: boolean;
11
13
  dense?: boolean;
@@ -19,6 +21,7 @@ export interface SidebarProps {
19
21
  defaultSelectedKey?: string;
20
22
  onSelectionChange?: (key: string) => void;
21
23
  variant?: 'solid' | 'glass';
24
+ layout?: SidebarLayout;
22
25
  showCollapseToggle?: boolean;
23
26
  dense?: boolean;
24
27
  style?: React.CSSProperties;
@@ -33,6 +36,18 @@ export interface SidebarHeaderProps {
33
36
  children?: React.ReactNode;
34
37
  }
35
38
  export declare const SidebarHeader: React.ForwardRefExoticComponent<SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
39
+ export interface SidebarBrandProps {
40
+ logo?: React.ReactNode;
41
+ title?: React.ReactNode;
42
+ subtitle?: React.ReactNode;
43
+ dense?: boolean;
44
+ style?: StyleXStyles;
45
+ className?: string;
46
+ onClick?: () => void;
47
+ onPress?: () => void;
48
+ children?: React.ReactNode;
49
+ }
50
+ export declare const SidebarBrand: React.ForwardRefExoticComponent<SidebarBrandProps & React.RefAttributes<HTMLDivElement>>;
36
51
  export interface SidebarGroupProps {
37
52
  title?: string;
38
53
  collapsible?: boolean;
@@ -63,6 +78,19 @@ export interface SidebarFooterProps {
63
78
  children?: React.ReactNode;
64
79
  }
65
80
  export declare const SidebarFooter: React.ForwardRefExoticComponent<SidebarFooterProps & React.RefAttributes<HTMLDivElement>>;
81
+ export interface SidebarUserProps {
82
+ avatar?: React.ReactNode;
83
+ name?: React.ReactNode;
84
+ description?: React.ReactNode;
85
+ action?: React.ReactNode;
86
+ dense?: boolean;
87
+ style?: StyleXStyles;
88
+ className?: string;
89
+ onClick?: () => void;
90
+ onPress?: () => void;
91
+ children?: React.ReactNode;
92
+ }
93
+ export declare const SidebarUser: React.ForwardRefExoticComponent<SidebarUserProps & React.RefAttributes<HTMLDivElement>>;
66
94
  export interface SidebarDividerProps {
67
95
  dense?: boolean;
68
96
  style?: StyleXStyles;
package/dist/src/components/Sidebar/Sidebar.styles.d.ts CHANGED
@@ -3,12 +3,8 @@ export declare const styles: Readonly<{
3
3
  readonly sidebar: Readonly<{
4
4
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
5
5
  readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
6
- readonly height: stylex.StyleXClassNameFor<"height", `calc(100% - ${stylex.StyleXVar<string>} * 2)`>;
7
- readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", string>;
8
- readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", string>;
9
- readonly marginInlineEnd: stylex.StyleXClassNameFor<"marginInlineEnd", 0>;
10
6
  readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
11
- readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "width, background-color, border-color, box-shadow">;
7
+ readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "width, background-color, border-color, box-shadow, margin, border-radius">;
12
8
  readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.25s">;
13
9
  readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.4, 0, 0.2, 1)">;
14
10
  readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
@@ -16,10 +12,27 @@ export declare const styles: Readonly<{
16
12
  readonly position: stylex.StyleXClassNameFor<"position", "relative">;
17
13
  readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
18
14
  readonly color: stylex.StyleXClassNameFor<"color", string>;
15
+ }>;
16
+ readonly sidebarFramed: Readonly<{
17
+ readonly height: stylex.StyleXClassNameFor<"height", `calc(100% - ${stylex.StyleXVar<string>} * 2)`>;
18
+ readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", string>;
19
+ readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", string>;
20
+ readonly marginInlineEnd: stylex.StyleXClassNameFor<"marginInlineEnd", 0>;
19
21
  readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
20
22
  readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
21
23
  readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
22
24
  }>;
25
+ readonly sidebarUnframed: Readonly<{
26
+ readonly height: stylex.StyleXClassNameFor<"height", `calc(100% - ${stylex.StyleXVar<string>} * 2)`>;
27
+ readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", string>;
28
+ readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", string>;
29
+ readonly marginInlineEnd: stylex.StyleXClassNameFor<"marginInlineEnd", 0>;
30
+ readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 0>;
31
+ readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
32
+ readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
33
+ readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "transparent">;
34
+ readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
35
+ }>;
23
36
  readonly expanded: Readonly<{
24
37
  readonly width: stylex.StyleXClassNameFor<"width", "var(--sidebar-width, 260px)">;
25
38
  }>;
@@ -58,6 +71,7 @@ export declare const styles: Readonly<{
58
71
  readonly headerCollapsed: Readonly<{
59
72
  readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
60
73
  readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
74
+ readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
61
75
  }>;
62
76
  readonly headerContent: Readonly<{
63
77
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
@@ -74,6 +88,8 @@ export declare const styles: Readonly<{
74
88
  }>;
75
89
  readonly headerContentCollapsed: Readonly<{
76
90
  readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
91
+ readonly gap: stylex.StyleXClassNameFor<"gap", 0>;
92
+ readonly width: stylex.StyleXClassNameFor<"width", "100%">;
77
93
  }>;
78
94
  readonly footer: Readonly<{
79
95
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
@@ -100,6 +116,7 @@ export declare const styles: Readonly<{
100
116
  readonly footerCollapsed: Readonly<{
101
117
  readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
102
118
  readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
119
+ readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
103
120
  }>;
104
121
  readonly footerContent: Readonly<{
105
122
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
@@ -116,6 +133,147 @@ export declare const styles: Readonly<{
116
133
  }>;
117
134
  readonly footerContentCollapsed: Readonly<{
118
135
  readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
136
+ readonly gap: stylex.StyleXClassNameFor<"gap", 0>;
137
+ readonly width: stylex.StyleXClassNameFor<"width", "100%">;
138
+ }>;
139
+ readonly user: Readonly<{
140
+ readonly display: stylex.StyleXClassNameFor<"display", "flex">;
141
+ readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
142
+ readonly gap: stylex.StyleXClassNameFor<"gap", string>;
143
+ readonly width: stylex.StyleXClassNameFor<"width", "100%">;
144
+ readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
145
+ readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
146
+ readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
147
+ readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
148
+ readonly textDecoration: stylex.StyleXClassNameFor<"textDecoration", "none">;
149
+ readonly color: stylex.StyleXClassNameFor<"color", string>;
150
+ }>;
151
+ readonly userInteractive: Readonly<{
152
+ readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
153
+ readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
154
+ readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
155
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
156
+ readonly marginInline: stylex.StyleXClassNameFor<"marginInline", `calc(-1 * ${stylex.StyleXVar<string>})`>;
157
+ readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, transform">;
158
+ readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
159
+ readonly ':hover': stylex.StyleXClassNameFor<":hover", {
160
+ readonly backgroundColor: stylex.StyleXVar<string>;
161
+ }>;
162
+ readonly ':active': stylex.StyleXClassNameFor<":active", {
163
+ readonly transform: "scale(0.98)";
164
+ }>;
165
+ }>;
166
+ readonly userCollapsed: Readonly<{
167
+ readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
168
+ readonly gap: stylex.StyleXClassNameFor<"gap", 0>;
169
+ readonly width: stylex.StyleXClassNameFor<"width", "100%">;
170
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
171
+ readonly marginInline: stylex.StyleXClassNameFor<"marginInline", 0>;
172
+ }>;
173
+ readonly userDense: Readonly<{
174
+ readonly gap: stylex.StyleXClassNameFor<"gap", string>;
175
+ }>;
176
+ readonly userAvatarWrapper: Readonly<{
177
+ readonly display: stylex.StyleXClassNameFor<"display", "flex">;
178
+ readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
179
+ readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
180
+ readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
181
+ }>;
182
+ readonly userInfo: Readonly<{
183
+ readonly display: stylex.StyleXClassNameFor<"display", "flex">;
184
+ readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
185
+ readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
186
+ readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
187
+ readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
188
+ }>;
189
+ readonly userName: Readonly<{
190
+ readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
191
+ readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
192
+ readonly color: stylex.StyleXClassNameFor<"color", string>;
193
+ readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
194
+ readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
195
+ readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
196
+ }>;
197
+ readonly userDescription: Readonly<{
198
+ readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
199
+ readonly color: stylex.StyleXClassNameFor<"color", string>;
200
+ readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
201
+ readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
202
+ readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
203
+ readonly marginTop: stylex.StyleXClassNameFor<"marginTop", "2px">;
204
+ }>;
205
+ readonly userAction: Readonly<{
206
+ readonly display: stylex.StyleXClassNameFor<"display", "flex">;
207
+ readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
208
+ readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
209
+ readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
210
+ readonly color: stylex.StyleXClassNameFor<"color", string>;
211
+ }>;
212
+ readonly brand: Readonly<{
213
+ readonly display: stylex.StyleXClassNameFor<"display", "flex">;
214
+ readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
215
+ readonly gap: stylex.StyleXClassNameFor<"gap", string>;
216
+ readonly width: stylex.StyleXClassNameFor<"width", "100%">;
217
+ readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
218
+ readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
219
+ readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
220
+ readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
221
+ readonly textDecoration: stylex.StyleXClassNameFor<"textDecoration", "none">;
222
+ readonly color: stylex.StyleXClassNameFor<"color", string>;
223
+ }>;
224
+ readonly brandInteractive: Readonly<{
225
+ readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
226
+ readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
227
+ readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
228
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
229
+ readonly marginInline: stylex.StyleXClassNameFor<"marginInline", `calc(-1 * ${stylex.StyleXVar<string>})`>;
230
+ readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, transform">;
231
+ readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
232
+ readonly ':hover': stylex.StyleXClassNameFor<":hover", {
233
+ readonly backgroundColor: stylex.StyleXVar<string>;
234
+ }>;
235
+ readonly ':active': stylex.StyleXClassNameFor<":active", {
236
+ readonly transform: "scale(0.98)";
237
+ }>;
238
+ }>;
239
+ readonly brandCollapsed: Readonly<{
240
+ readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
241
+ readonly gap: stylex.StyleXClassNameFor<"gap", 0>;
242
+ readonly width: stylex.StyleXClassNameFor<"width", "100%">;
243
+ readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
244
+ readonly marginInline: stylex.StyleXClassNameFor<"marginInline", 0>;
245
+ }>;
246
+ readonly brandDense: Readonly<{
247
+ readonly gap: stylex.StyleXClassNameFor<"gap", string>;
248
+ }>;
249
+ readonly brandLogoWrapper: Readonly<{
250
+ readonly display: stylex.StyleXClassNameFor<"display", "flex">;
251
+ readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
252
+ readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
253
+ readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
254
+ }>;
255
+ readonly brandInfo: Readonly<{
256
+ readonly display: stylex.StyleXClassNameFor<"display", "flex">;
257
+ readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
258
+ readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
259
+ readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
260
+ readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
261
+ }>;
262
+ readonly brandTitle: Readonly<{
263
+ readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
264
+ readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
265
+ readonly color: stylex.StyleXClassNameFor<"color", string>;
266
+ readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
267
+ readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
268
+ readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
269
+ }>;
270
+ readonly brandSubtitle: Readonly<{
271
+ readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
272
+ readonly color: stylex.StyleXClassNameFor<"color", string>;
273
+ readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
274
+ readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
275
+ readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
276
+ readonly marginTop: stylex.StyleXClassNameFor<"marginTop", "2px">;
119
277
  }>;
120
278
  readonly group: Readonly<{
121
279
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
@@ -346,7 +504,8 @@ export declare const styles: Readonly<{
346
504
  readonly insetBlockEnd: stylex.StyleXClassNameFor<"insetBlockEnd", "auto">;
347
505
  readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", "auto">;
348
506
  readonly alignSelf: stylex.StyleXClassNameFor<"alignSelf", "center">;
349
- readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", string>;
507
+ readonly marginBlockStart: stylex.StyleXClassNameFor<"marginBlockStart", string>;
508
+ readonly marginBlockEnd: stylex.StyleXClassNameFor<"marginBlockEnd", string>;
350
509
  }>;
351
510
  readonly layout: Readonly<{
352
511
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
@@ -364,10 +523,47 @@ export declare const styles: Readonly<{
364
523
  readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
365
524
  readonly display: stylex.StyleXClassNameFor<"display", "flex">;
366
525
  readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
367
- readonly height: stylex.StyleXClassNameFor<"height", "100%">;
368
526
  readonly overflowY: stylex.StyleXClassNameFor<"overflowY", "auto">;
369
527
  readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
528
+ readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, border-color, box-shadow, margin, border-radius">;
529
+ readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.25s">;
530
+ readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.4, 0, 0.2, 1)">;
531
+ readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
532
+ readonly color: stylex.StyleXClassNameFor<"color", string>;
533
+ readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
534
+ }>;
535
+ readonly mainUnframed: Readonly<{
536
+ readonly height: stylex.StyleXClassNameFor<"height", "100%">;
370
537
  readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
371
538
  readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", string>;
539
+ readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
540
+ readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
541
+ readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "transparent">;
542
+ readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 0>;
543
+ readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
544
+ }>;
545
+ readonly mainFramed: Readonly<{
546
+ readonly height: stylex.StyleXClassNameFor<"height", `calc(100% - ${stylex.StyleXVar<string>} * 2)`>;
547
+ readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", string>;
548
+ readonly marginInlineEnd: stylex.StyleXClassNameFor<"marginInlineEnd", string>;
549
+ readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", 0>;
550
+ readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
551
+ readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
552
+ readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
553
+ readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
554
+ }>;
555
+ readonly mainSolid: Readonly<{
556
+ readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
557
+ readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
558
+ }>;
559
+ readonly mainGlass: Readonly<{
560
+ readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
561
+ readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
562
+ readonly '@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))': stylex.StyleXClassNameFor<"@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))", {
563
+ readonly backgroundColor: stylex.StyleXVar<string>;
564
+ readonly borderColor: stylex.StyleXVar<string>;
565
+ readonly backdropFilter: "blur(20px)";
566
+ readonly WebkitBackdropFilter: "blur(20px)";
567
+ }>;
372
568
  }>;
373
569
  }>;
package/dist/src/components/Sidebar/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export type { SidebarAsideProps, SidebarDividerProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarMainProps, SidebarProps, } from './Sidebar';
2
- export { Sidebar, SidebarAside, SidebarDivider, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarMain, } from './Sidebar';
1
+ export type { SidebarAsideProps, SidebarBrandProps, SidebarDividerProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarLayout, SidebarMainProps, SidebarProps, SidebarUserProps, } from './Sidebar';
2
+ export { Sidebar, SidebarAside, SidebarBrand, SidebarDivider, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarMain, SidebarUser, useSidebar, } from './Sidebar';
package/dist/src/components/Table/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export type { TableBodyProps, TableCaptionProps, TableCellProps, TableEmptyProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TableSkeletonProps, } from './Table';
1
+ export type { TableBodyProps, TableCaptionProps, TableCellProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TableHeadProps, TableProps, TableRowProps, TableSkeletonProps, } from './Table';
2
2
  export { Table, TableBody, TableCaption, TableCell, TableEmpty, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, } from './Table';
package/dist/src/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const version = "2026.08.26";
1
+ export declare const version = "2026.09.07";
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';
@@ -23,6 +23,8 @@ export type { CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, CardVa
23
23
  export { Card, CardBody, CardFooter, CardHeader } from './components/Card';
24
24
  export type { ChartContainerProps, LegendItem, } from './components/ChartContainer';
25
25
  export { ChartContainer } from './components/ChartContainer';
26
+ export type { CustomTooltipProps } from './components/ChartTooltip';
27
+ export { ChartTooltip } from './components/ChartTooltip';
26
28
  export { Checkbox } from './components/Checkbox';
27
29
  export type { CheckboxProps } from './components/Checkbox/Checkbox';
28
30
  export { CheckboxGroup } from './components/CheckboxGroup';
@@ -81,8 +83,8 @@ export { Select, SelectItem, SelectPopover, SelectSection, SelectValue, } from '
81
83
  export type { SelectItemProps, SelectPopoverProps, SelectProps, SelectSectionProps, } from './components/Select/Select';
82
84
  export { Separator } from './components/Separator';
83
85
  export type { SeparatorProps } from './components/Separator/Separator';
84
- export type { SidebarAsideProps, SidebarDividerProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarMainProps, SidebarProps, } from './components/Sidebar';
85
- export { Sidebar, SidebarAside, SidebarDivider, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarMain, } from './components/Sidebar';
86
+ export type { SidebarAsideProps, SidebarBrandProps, SidebarDividerProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarLayout, SidebarMainProps, SidebarProps, SidebarUserProps, } from './components/Sidebar';
87
+ export { Sidebar, SidebarAside, SidebarBrand, SidebarDivider, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarMain, SidebarUser, useSidebar, } from './components/Sidebar';
86
88
  export { Skeleton } from './components/Skeleton';
87
89
  export type { SkeletonProps, SkeletonShape, SkeletonVariant, } from './components/Skeleton/Skeleton';
88
90
  export { Slider, SliderThumb, SliderTrack } from './components/Slider';
@@ -93,7 +95,7 @@ export type { StatProps } from './components/Stat';
93
95
  export { Stat } from './components/Stat';
94
96
  export { Switch } from './components/Switch';
95
97
  export type { SwitchProps } from './components/Switch/Switch';
96
- export type { TableBodyProps, TableCaptionProps, TableCellProps, TableEmptyProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TableSkeletonProps, } from './components/Table';
98
+ export type { TableBodyProps, TableCaptionProps, TableCellProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TableHeadProps, TableProps, TableRowProps, TableSkeletonProps, } from './components/Table';
97
99
  export { Table, TableBody, TableCaption, TableCell, TableEmpty, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, } from './components/Table';
98
100
  export type { TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabsProps, } from './components/Tabs';
99
101
  export { Tab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs';
package/dist/src/sandbox/icons.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { default as React } from 'react';
2
+ export declare const HomeIcon: React.FC;
3
+ export declare const RadioIcon: React.FC;
4
+ export declare const ArtistIcon: React.FC;
5
+ export declare const AlbumIcon: React.FC;
6
+ export declare const FolderIcon: React.FC;
7
+ export declare const SongIcon: React.FC;
8
+ export declare const StoreIcon: React.FC;
9
+ export declare const DeviceIcon: React.FC;
10
+ export declare const PlaylistIcon: React.FC;
11
+ export declare const SettingsIcon: React.FC;
12
+ export declare const SunIcon: React.FC;
13
+ export declare const MoonIcon: React.FC;
package/dist/src/sandbox/sections/ActionsSection.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { default as React } from 'react';
2
+ export declare const ActionsSection: React.FC;
package/dist/src/sandbox/sections/BlocksSection.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { default as React } from 'react';
2
+ interface BlocksSectionProps {
3
+ isCollapsed: boolean;
4
+ onToggleCollapse: () => void;
5
+ isSidebarDense: boolean;
6
+ onToggleDense: () => void;
7
+ sidebarVariant: 'solid' | 'glass';
8
+ onToggleVariant: () => void;
9
+ showToggle: boolean;
10
+ onToggleShowToggle: () => void;
11
+ activeTab: string;
12
+ }
13
+ export declare const BlocksSection: React.FC<BlocksSectionProps>;
14
+ export {};
package/dist/src/sandbox/sections/ChartsSection.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { default as React } from 'react';
2
+ export declare const ChartsSection: React.FC;
package/dist/src/sandbox/sections/FeedbackSection.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { default as React } from 'react';
2
+ export declare const FeedbackSection: React.FC;
package/dist/src/sandbox/sections/FormsSection.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { default as React } from 'react';
2
+ export declare const FormsSection: React.FC;
package/dist/src/sandbox/sections/LayoutSection.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { default as React } from 'react';
2
+ export declare const LayoutSection: React.FC;
package/dist/src/sandbox/sections/NavigationSection.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { default as React } from 'react';
2
+ export declare const NavigationSection: React.FC;
package/dist/src/sandbox/sections/OverlaysSection.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { default as React } from 'react';
2
+ interface OverlaysSectionProps {
3
+ onOpenCommandPalette?: () => void;
4
+ }
5
+ export declare const OverlaysSection: React.FC<OverlaysSectionProps>;
6
+ export {};
package/dist/src/sandbox/types.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export type SandboxCategoryId = 'all' | 'actions' | 'forms' | 'overlays' | 'feedback' | 'navigation' | 'layout' | 'charts' | 'blocks';
2
+ export interface SandboxCategory {
3
+ id: SandboxCategoryId;
4
+ label: string;
5
+ count: number;
6
+ description: string;
7
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moul-dev/ui",
3
- "version": "2026.08.26",
3
+ "version": "2026.09.07",
4
4
  "description": "Accessible, zero-runtime React component library built on React Aria and StyleX",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -60,7 +60,9 @@
60
60
  "dev": "vite",
61
61
  "build": "tsc -b && vite build",
62
62
  "build:watch": "vite build --watch",
63
- "lint": "eslint .",
63
+ "lint": "biome check",
64
+ "format": "biome format --write",
65
+ "gen:component": "bun ../scripts/gen-component.ts",
64
66
  "preview": "vite preview",
65
67
  "test": "vitest run"
66
68
  },
@@ -77,7 +79,7 @@
77
79
  "recharts": "^3.9.2"
78
80
  },
79
81
  "devDependencies": {
80
- "@eslint/js": "^10.0.1",
82
+ "@biomejs/biome": "^2.5.0",
81
83
  "@stylexjs/unplugin": "^0.19.0",
82
84
  "@testing-library/jest-dom": "^6.6.3",
83
85
  "@testing-library/react": "^16.1.0",
@@ -85,17 +87,12 @@
85
87
  "@types/react": "^19.2.14",
86
88
  "@types/react-dom": "^19.2.3",
87
89
  "@vitejs/plugin-react": "^6.0.1",
88
- "eslint": "^10.3.0",
89
- "eslint-plugin-react-hooks": "^7.1.1",
90
- "eslint-plugin-react-refresh": "^0.5.2",
91
90
  "fast-check": "^3.23.2",
92
91
  "glob": "^11.0.0",
93
- "globals": "^17.6.0",
94
92
  "jsdom": "^25.0.1",
95
93
  "react": "^19.2.6",
96
94
  "react-dom": "^19.2.6",
97
95
  "typescript": "~6.0.2",
98
- "typescript-eslint": "^8.59.2",
99
96
  "vite": "^8.0.12",
100
97
  "vite-plugin-dts": "^5.0.2",
101
98
  "vitest": "^2.1.8"