@moul-dev/ui 2026.8.27 → 2026.9.7

package/dist/src/components/Sidebar/Sidebar.d.ts

@@ -1,11 +1,13 @@
 import { StyleXStyles } from '@stylexjs/stylex';
 import { LinkProps as AriaLinkProps } from 'react-aria-components';
 import * as React from 'react';
+export type SidebarLayout = 'sidebar-framed' | 'main-framed' | 'default' | 'inset';
 interface SidebarContextValue {
     isCollapsed: boolean;
     selectedKey?: string;
     onSelectionChange?: (key: string) => void;
     variant: 'solid' | 'glass';
+    layout: 'sidebar-framed' | 'main-framed';
     onCollapseToggle: () => void;
     showCollapseToggle?: boolean;
     dense?: boolean;
@@ -19,6 +21,7 @@ export interface SidebarProps {
     defaultSelectedKey?: string;
     onSelectionChange?: (key: string) => void;
     variant?: 'solid' | 'glass';
+    layout?: SidebarLayout;
     showCollapseToggle?: boolean;
     dense?: boolean;
     style?: React.CSSProperties;

package/dist/src/components/Sidebar/Sidebar.styles.d.ts

@@ -3,12 +3,8 @@ export declare const styles: Readonly<{
     readonly sidebar: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "flex">;
         readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
-        readonly height: stylex.StyleXClassNameFor<"height", `calc(100% - ${stylex.StyleXVar<string>} * 2)`>;
-        readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", string>;
-        readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", string>;
-        readonly marginInlineEnd: stylex.StyleXClassNameFor<"marginInlineEnd", 0>;
         readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
-        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "width, background-color, border-color, box-shadow">;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "width, background-color, border-color, box-shadow, margin, border-radius">;
         readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.25s">;
         readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.4, 0, 0.2, 1)">;
         readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
@@ -16,10 +12,27 @@ export declare const styles: Readonly<{
         readonly position: stylex.StyleXClassNameFor<"position", "relative">;
         readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly sidebarFramed: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(100% - ${stylex.StyleXVar<string>} * 2)`>;
+        readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", string>;
+        readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", string>;
+        readonly marginInlineEnd: stylex.StyleXClassNameFor<"marginInlineEnd", 0>;
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
         readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
     }>;
+    readonly sidebarUnframed: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(100% - ${stylex.StyleXVar<string>} * 2)`>;
+        readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", string>;
+        readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", string>;
+        readonly marginInlineEnd: stylex.StyleXClassNameFor<"marginInlineEnd", 0>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 0>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "transparent">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+    }>;
     readonly expanded: Readonly<{
         readonly width: stylex.StyleXClassNameFor<"width", "var(--sidebar-width, 260px)">;
     }>;
@@ -510,10 +523,47 @@ export declare const styles: Readonly<{
         readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
         readonly display: stylex.StyleXClassNameFor<"display", "flex">;
         readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
-        readonly height: stylex.StyleXClassNameFor<"height", "100%">;
         readonly overflowY: stylex.StyleXClassNameFor<"overflowY", "auto">;
         readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, border-color, box-shadow, margin, border-radius">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.25s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.4, 0, 0.2, 1)">;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+    }>;
+    readonly mainUnframed: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", "100%">;
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
         readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", string>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "transparent">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 0>;
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+    }>;
+    readonly mainFramed: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(100% - ${stylex.StyleXVar<string>} * 2)`>;
+        readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", string>;
+        readonly marginInlineEnd: stylex.StyleXClassNameFor<"marginInlineEnd", string>;
+        readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", 0>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    }>;
+    readonly mainSolid: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+    }>;
+    readonly mainGlass: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        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))", {
+            readonly backgroundColor: stylex.StyleXVar<string>;
+            readonly borderColor: stylex.StyleXVar<string>;
+            readonly backdropFilter: "blur(20px)";
+            readonly WebkitBackdropFilter: "blur(20px)";
+        }>;
     }>;
 }>;

package/dist/src/components/Sidebar/index.d.ts

@@ -1,2 +1,2 @@
-export type { SidebarAsideProps, SidebarBrandProps, SidebarDividerProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarMainProps, SidebarProps, SidebarUserProps, } from './Sidebar';
+export type { SidebarAsideProps, SidebarBrandProps, SidebarDividerProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarLayout, SidebarMainProps, SidebarProps, SidebarUserProps, } from './Sidebar';
 export { Sidebar, SidebarAside, SidebarBrand, SidebarDivider, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarMain, SidebarUser, useSidebar, } from './Sidebar';

package/dist/src/index.d.ts

@@ -1,4 +1,4 @@
-export declare const version = "2026.08.27";
+export declare const version = "2026.09.07";
 export { Alert } from './components/Alert';
 export type { AlertProps, AlertVariant } from './components/Alert/Alert';
 export { AlertDialog, AlertDialogBody, AlertDialogFooter, AlertDialogHeader, } from './components/AlertDialog';
@@ -83,7 +83,7 @@ export { Select, SelectItem, SelectPopover, SelectSection, SelectValue, } from '
 export type { SelectItemProps, SelectPopoverProps, SelectProps, SelectSectionProps, } from './components/Select/Select';
 export { Separator } from './components/Separator';
 export type { SeparatorProps } from './components/Separator/Separator';
-export type { SidebarAsideProps, SidebarBrandProps, SidebarDividerProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarMainProps, SidebarProps, SidebarUserProps, } from './components/Sidebar';
+export type { SidebarAsideProps, SidebarBrandProps, SidebarDividerProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarLayout, SidebarMainProps, SidebarProps, SidebarUserProps, } from './components/Sidebar';
 export { Sidebar, SidebarAside, SidebarBrand, SidebarDivider, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarMain, SidebarUser, useSidebar, } from './components/Sidebar';
 export { Skeleton } from './components/Skeleton';
 export type { SkeletonProps, SkeletonShape, SkeletonVariant, } from './components/Skeleton/Skeleton';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moul-dev/ui",
-  "version": "2026.08.27",
+  "version": "2026.09.07",
   "description": "Accessible, zero-runtime React component library built on React Aria and StyleX",
   "license": "MIT",
   "type": "module",