@moul-dev/ui 2026.8.27 → 2026.9.10
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.
- package/dist/assets/stylex.css +30 -10
- package/dist/moul-ui.js +1128 -1035
- package/dist/src/components/Sidebar/Sidebar.d.ts +3 -0
- package/dist/src/components/Sidebar/Sidebar.styles.d.ts +56 -6
- package/dist/src/components/Sidebar/index.d.ts +1 -1
- package/dist/src/components/Tabs/Tabs.styles.d.ts +40 -3
- package/dist/src/index.d.ts +2 -2
- package/package.json +1 -1
|
@@ -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;
|
|
@@ -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
|
}>;
|
|
@@ -510,10 +523,47 @@ export declare const styles: Readonly<{
|
|
|
510
523
|
readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
|
|
511
524
|
readonly display: stylex.StyleXClassNameFor<"display", "flex">;
|
|
512
525
|
readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
|
|
513
|
-
readonly height: stylex.StyleXClassNameFor<"height", "100%">;
|
|
514
526
|
readonly overflowY: stylex.StyleXClassNameFor<"overflowY", "auto">;
|
|
515
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%">;
|
|
516
537
|
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
|
|
517
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
|
+
}>;
|
|
518
568
|
}>;
|
|
519
569
|
}>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export type { SidebarAsideProps, SidebarBrandProps, SidebarDividerProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarMainProps, SidebarProps, SidebarUserProps, } from './Sidebar';
|
|
1
|
+
export type { SidebarAsideProps, SidebarBrandProps, SidebarDividerProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarLayout, SidebarMainProps, SidebarProps, SidebarUserProps, } from './Sidebar';
|
|
2
2
|
export { Sidebar, SidebarAside, SidebarBrand, SidebarDivider, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarMain, SidebarUser, useSidebar, } from './Sidebar';
|
|
@@ -39,8 +39,26 @@ export declare const styles: Readonly<{
|
|
|
39
39
|
readonly borderInlineEndColor: stylex.StyleXClassNameFor<"borderInlineEndColor", string>;
|
|
40
40
|
}>;
|
|
41
41
|
readonly tabListTertiary: Readonly<{
|
|
42
|
-
readonly
|
|
43
|
-
readonly
|
|
42
|
+
readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
|
|
43
|
+
readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
|
|
44
|
+
readonly width: stylex.StyleXClassNameFor<"width", "fit-content">;
|
|
45
|
+
readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "100%">;
|
|
46
|
+
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
|
|
47
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
48
|
+
readonly padding: stylex.StyleXClassNameFor<"padding", string>;
|
|
49
|
+
readonly gap: stylex.StyleXClassNameFor<"gap", string>;
|
|
50
|
+
readonly borderBlockStartWidth: stylex.StyleXClassNameFor<"borderBlockStartWidth", "1px">;
|
|
51
|
+
readonly borderBlockStartStyle: stylex.StyleXClassNameFor<"borderBlockStartStyle", "solid">;
|
|
52
|
+
readonly borderBlockStartColor: stylex.StyleXClassNameFor<"borderBlockStartColor", string>;
|
|
53
|
+
readonly borderBlockEndWidth: stylex.StyleXClassNameFor<"borderBlockEndWidth", "1px">;
|
|
54
|
+
readonly borderBlockEndStyle: stylex.StyleXClassNameFor<"borderBlockEndStyle", "solid">;
|
|
55
|
+
readonly borderBlockEndColor: stylex.StyleXClassNameFor<"borderBlockEndColor", string>;
|
|
56
|
+
readonly borderInlineStartWidth: stylex.StyleXClassNameFor<"borderInlineStartWidth", "1px">;
|
|
57
|
+
readonly borderInlineStartStyle: stylex.StyleXClassNameFor<"borderInlineStartStyle", "solid">;
|
|
58
|
+
readonly borderInlineStartColor: stylex.StyleXClassNameFor<"borderInlineStartColor", string>;
|
|
59
|
+
readonly borderInlineEndWidth: stylex.StyleXClassNameFor<"borderInlineEndWidth", "1px">;
|
|
60
|
+
readonly borderInlineEndStyle: stylex.StyleXClassNameFor<"borderInlineEndStyle", "solid">;
|
|
61
|
+
readonly borderInlineEndColor: stylex.StyleXClassNameFor<"borderInlineEndColor", string>;
|
|
44
62
|
}>;
|
|
45
63
|
readonly tab: Readonly<{
|
|
46
64
|
readonly position: stylex.StyleXClassNameFor<"position", "relative">;
|
|
@@ -86,6 +104,10 @@ export declare const styles: Readonly<{
|
|
|
86
104
|
}>;
|
|
87
105
|
readonly tabTertiary: Readonly<{
|
|
88
106
|
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
107
|
+
readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
|
|
108
|
+
readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
|
|
109
|
+
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
110
|
+
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
89
111
|
readonly ':hover': stylex.StyleXClassNameFor<":hover", {
|
|
90
112
|
readonly color: stylex.StyleXVar<string>;
|
|
91
113
|
}>;
|
|
@@ -98,6 +120,7 @@ export declare const styles: Readonly<{
|
|
|
98
120
|
}>;
|
|
99
121
|
readonly tabTertiarySelected: Readonly<{
|
|
100
122
|
readonly color: stylex.StyleXClassNameFor<"color", string>;
|
|
123
|
+
readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
|
|
101
124
|
}>;
|
|
102
125
|
readonly tabDisabled: Readonly<{
|
|
103
126
|
readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.4>;
|
|
@@ -142,10 +165,24 @@ export declare const styles: Readonly<{
|
|
|
142
165
|
readonly height: stylex.StyleXClassNameFor<"height", "100%">;
|
|
143
166
|
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
|
|
144
167
|
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
168
|
+
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
|
|
169
|
+
readonly borderBlockStartWidth: stylex.StyleXClassNameFor<"borderBlockStartWidth", "1px">;
|
|
170
|
+
readonly borderBlockStartStyle: stylex.StyleXClassNameFor<"borderBlockStartStyle", "solid">;
|
|
171
|
+
readonly borderBlockStartColor: stylex.StyleXClassNameFor<"borderBlockStartColor", string>;
|
|
172
|
+
readonly borderBlockEndWidth: stylex.StyleXClassNameFor<"borderBlockEndWidth", "1px">;
|
|
173
|
+
readonly borderBlockEndStyle: stylex.StyleXClassNameFor<"borderBlockEndStyle", "solid">;
|
|
174
|
+
readonly borderBlockEndColor: stylex.StyleXClassNameFor<"borderBlockEndColor", string>;
|
|
175
|
+
readonly borderInlineStartWidth: stylex.StyleXClassNameFor<"borderInlineStartWidth", "1px">;
|
|
176
|
+
readonly borderInlineStartStyle: stylex.StyleXClassNameFor<"borderInlineStartStyle", "solid">;
|
|
177
|
+
readonly borderInlineStartColor: stylex.StyleXClassNameFor<"borderInlineStartColor", string>;
|
|
178
|
+
readonly borderInlineEndWidth: stylex.StyleXClassNameFor<"borderInlineEndWidth", "1px">;
|
|
179
|
+
readonly borderInlineEndStyle: stylex.StyleXClassNameFor<"borderInlineEndStyle", "solid">;
|
|
180
|
+
readonly borderInlineEndColor: stylex.StyleXClassNameFor<"borderInlineEndColor", string>;
|
|
181
|
+
readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
|
|
145
182
|
readonly zIndex: stylex.StyleXClassNameFor<"zIndex", -1>;
|
|
146
183
|
readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "translate, width, height">;
|
|
147
184
|
readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.25s">;
|
|
148
|
-
readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "
|
|
185
|
+
readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.16, 1, 0.3, 1)">;
|
|
149
186
|
}>;
|
|
150
187
|
readonly tabPanels: Readonly<{
|
|
151
188
|
readonly position: stylex.StyleXClassNameFor<"position", "relative">;
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const version = "2026.
|
|
1
|
+
export declare const version = "2026.09.10";
|
|
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';
|
|
@@ -83,7 +83,7 @@ export { Select, SelectItem, SelectPopover, SelectSection, SelectValue, } from '
|
|
|
83
83
|
export type { SelectItemProps, SelectPopoverProps, SelectProps, SelectSectionProps, } from './components/Select/Select';
|
|
84
84
|
export { Separator } from './components/Separator';
|
|
85
85
|
export type { SeparatorProps } from './components/Separator/Separator';
|
|
86
|
-
export type { SidebarAsideProps, SidebarBrandProps, SidebarDividerProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarMainProps, SidebarProps, SidebarUserProps, } from './components/Sidebar';
|
|
86
|
+
export type { SidebarAsideProps, SidebarBrandProps, SidebarDividerProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarLayout, SidebarMainProps, SidebarProps, SidebarUserProps, } from './components/Sidebar';
|
|
87
87
|
export { Sidebar, SidebarAside, SidebarBrand, SidebarDivider, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarMain, SidebarUser, useSidebar, } from './components/Sidebar';
|
|
88
88
|
export { Skeleton } from './components/Skeleton';
|
|
89
89
|
export type { SkeletonProps, SkeletonShape, SkeletonVariant, } from './components/Skeleton/Skeleton';
|