@usefragments/ui 1.6.0 → 1.7.0

package/dist/components/ScrollArea/index.d.ts

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import { type ScrollOrientation } from './scroll-state';
+import * as React from "react";
+import { type ScrollOrientation } from "./scroll-state";
 export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     /** Scroll direction */
     orientation?: ScrollOrientation;
     /** Scrollbar visibility behavior */
-    scrollbarVisibility?: 'auto' | 'always' | 'hover';
-    /** Whether to show fade indicators at scroll edges */
+    scrollbarVisibility?: "auto" | "always" | "hover";
+    /** Whether to show fade indicators at scroll edges. Defaults to false. */
     showFades?: boolean;
     /** Additional class name */
     className?: string;

package/dist/components/ScrollArea/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,gBAAgB,CAAC;AAMxB,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uBAAuB;IACvB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAClD,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;GAKG;AACH,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,WAAwB,EACxB,mBAA4B,EAC5B,SAAiB,EACjB,SAAS,EACT,GAAG,EACH,GAAG,SAAS,EACb,EAAE,eAAe,2CAsFjB;AAMD,eAAO,MAAM,UAAU;;CAErB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,gBAAgB,CAAC;AAMxB,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uBAAuB;IACvB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAClD,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;GAKG;AACH,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,WAAwB,EACxB,mBAA4B,EAC5B,SAAiB,EACjB,SAAS,EACT,GAAG,EACH,GAAG,SAAS,EACb,EAAE,eAAe,2CAsFjB;AAMD,eAAO,MAAM,UAAU;;CAErB,CAAC"}

package/dist/components/ScrollArea/scroll-state.d.ts

@@ -1,6 +1,6 @@
-export type ScrollOrientation = 'horizontal' | 'vertical' | 'both';
-export type ScrollEdgeState = 'none' | 'start' | 'end' | 'both';
-export type RtlScrollModel = 'negative' | 'positive-descending' | 'positive-ascending';
+export type ScrollOrientation = "horizontal" | "vertical" | "both";
+export type ScrollEdgeState = "none" | "start" | "end" | "both";
+export type RtlScrollModel = "negative" | "positive-descending" | "positive-ascending";
 export interface ScrollAxesState {
     x: ScrollEdgeState;
     y: ScrollEdgeState;
@@ -8,9 +8,9 @@ export interface ScrollAxesState {
 export declare const SCROLL_EDGE_EPSILON_PX = 1;
 /** Detect the browser's RTL scrollLeft model without retaining probe elements. */
 export declare function detectRtlScrollModel(document: Document): RtlScrollModel;
-export declare function readScrollAxes(element: Pick<HTMLElement, 'clientWidth' | 'clientHeight' | 'scrollWidth' | 'scrollHeight' | 'scrollLeft' | 'scrollTop'>, options: {
+export declare function readScrollAxes(element: Pick<HTMLElement, "clientWidth" | "clientHeight" | "scrollWidth" | "scrollHeight" | "scrollLeft" | "scrollTop">, options: {
     orientation: ScrollOrientation;
-    direction: 'ltr' | 'rtl';
+    direction: "ltr" | "rtl";
     rtlModel?: RtlScrollModel;
 }): ScrollAxesState;
 //# sourceMappingURL=scroll-state.d.ts.map

package/dist/components/Select/Select.module.scss.cjs

@@ -1,26 +1,26 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_2nxw7_1";
-const label = "_label_2nxw7_8";
-const helper = "_helper_2nxw7_17";
-const helperError = "_helperError_2nxw7_27";
-const errorMessage = "_errorMessage_2nxw7_28";
-const trigger = "_trigger_2nxw7_38";
-const triggerSm = "_triggerSm_2nxw7_90";
-const triggerLg = "_triggerLg_2nxw7_102";
-const triggerGhost = "_triggerGhost_2nxw7_114";
-const wrapperGhost = "_wrapperGhost_2nxw7_140";
-const triggerIcon = "_triggerIcon_2nxw7_145";
-const value = "_value_2nxw7_153";
-const placeholder = "_placeholder_2nxw7_166";
-const hint = "_hint_2nxw7_170";
-const icon = "_icon_2nxw7_176";
-const positioner = "_positioner_2nxw7_204";
-const popup = "_popup_2nxw7_209";
-const item = "_item_2nxw7_257";
-const itemIndicator = "_itemIndicator_2nxw7_286";
-const group = "_group_2nxw7_300";
-const groupLabel = "_groupLabel_2nxw7_308";
+const wrapper = "_wrapper_aykjj_1";
+const label = "_label_aykjj_8";
+const helper = "_helper_aykjj_17";
+const helperError = "_helperError_aykjj_27";
+const errorMessage = "_errorMessage_aykjj_28";
+const trigger = "_trigger_aykjj_38";
+const triggerSm = "_triggerSm_aykjj_92";
+const triggerLg = "_triggerLg_aykjj_104";
+const triggerGhost = "_triggerGhost_aykjj_116";
+const wrapperGhost = "_wrapperGhost_aykjj_142";
+const triggerIcon = "_triggerIcon_aykjj_147";
+const value = "_value_aykjj_155";
+const placeholder = "_placeholder_aykjj_168";
+const hint = "_hint_aykjj_172";
+const icon = "_icon_aykjj_178";
+const positioner = "_positioner_aykjj_206";
+const popup = "_popup_aykjj_211";
+const item = "_item_aykjj_262";
+const itemIndicator = "_itemIndicator_aykjj_293";
+const group = "_group_aykjj_307";
+const groupLabel = "_groupLabel_aykjj_315";
 const styles = {
   wrapper,
   label,

package/dist/components/Select/Select.module.scss.js

@@ -1,24 +1,24 @@
-const wrapper = "_wrapper_2nxw7_1";
-const label = "_label_2nxw7_8";
-const helper = "_helper_2nxw7_17";
-const helperError = "_helperError_2nxw7_27";
-const errorMessage = "_errorMessage_2nxw7_28";
-const trigger = "_trigger_2nxw7_38";
-const triggerSm = "_triggerSm_2nxw7_90";
-const triggerLg = "_triggerLg_2nxw7_102";
-const triggerGhost = "_triggerGhost_2nxw7_114";
-const wrapperGhost = "_wrapperGhost_2nxw7_140";
-const triggerIcon = "_triggerIcon_2nxw7_145";
-const value = "_value_2nxw7_153";
-const placeholder = "_placeholder_2nxw7_166";
-const hint = "_hint_2nxw7_170";
-const icon = "_icon_2nxw7_176";
-const positioner = "_positioner_2nxw7_204";
-const popup = "_popup_2nxw7_209";
-const item = "_item_2nxw7_257";
-const itemIndicator = "_itemIndicator_2nxw7_286";
-const group = "_group_2nxw7_300";
-const groupLabel = "_groupLabel_2nxw7_308";
+const wrapper = "_wrapper_aykjj_1";
+const label = "_label_aykjj_8";
+const helper = "_helper_aykjj_17";
+const helperError = "_helperError_aykjj_27";
+const errorMessage = "_errorMessage_aykjj_28";
+const trigger = "_trigger_aykjj_38";
+const triggerSm = "_triggerSm_aykjj_92";
+const triggerLg = "_triggerLg_aykjj_104";
+const triggerGhost = "_triggerGhost_aykjj_116";
+const wrapperGhost = "_wrapperGhost_aykjj_142";
+const triggerIcon = "_triggerIcon_aykjj_147";
+const value = "_value_aykjj_155";
+const placeholder = "_placeholder_aykjj_168";
+const hint = "_hint_aykjj_172";
+const icon = "_icon_aykjj_178";
+const positioner = "_positioner_aykjj_206";
+const popup = "_popup_aykjj_211";
+const item = "_item_aykjj_262";
+const itemIndicator = "_itemIndicator_aykjj_293";
+const group = "_group_aykjj_307";
+const groupLabel = "_groupLabel_aykjj_315";
 const styles = {
   wrapper,
   label,

package/dist/components/Separator/Separator.module.scss.cjs

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const separator = "_separator_1g93x_1";
-const horizontal = "_horizontal_1g93x_6";
-const line = "_line_1g93x_9";
-const vertical = "_vertical_1g93x_16";
-const withLabel = "_withLabel_1g93x_27";
-const label = "_label_1g93x_40";
-const spacingNone = "_spacingNone_1g93x_51";
-const spacingSm = "_spacingSm_1g93x_55";
-const spacingMd = "_spacingMd_1g93x_62";
-const spacingLg = "_spacingLg_1g93x_69";
-const soft = "_soft_1g93x_76";
+const separator = "_separator_ddx8o_1";
+const horizontal = "_horizontal_ddx8o_6";
+const line = "_line_ddx8o_9";
+const vertical = "_vertical_ddx8o_16";
+const withLabel = "_withLabel_ddx8o_27";
+const label = "_label_ddx8o_40";
+const spacingNone = "_spacingNone_ddx8o_51";
+const spacingSm = "_spacingSm_ddx8o_55";
+const spacingMd = "_spacingMd_ddx8o_62";
+const spacingLg = "_spacingLg_ddx8o_69";
+const soft = "_soft_ddx8o_76";
 const styles = {
   separator,
   horizontal,

package/dist/components/Separator/Separator.module.scss.js

@@ -1,14 +1,14 @@
-const separator = "_separator_1g93x_1";
-const horizontal = "_horizontal_1g93x_6";
-const line = "_line_1g93x_9";
-const vertical = "_vertical_1g93x_16";
-const withLabel = "_withLabel_1g93x_27";
-const label = "_label_1g93x_40";
-const spacingNone = "_spacingNone_1g93x_51";
-const spacingSm = "_spacingSm_1g93x_55";
-const spacingMd = "_spacingMd_1g93x_62";
-const spacingLg = "_spacingLg_1g93x_69";
-const soft = "_soft_1g93x_76";
+const separator = "_separator_ddx8o_1";
+const horizontal = "_horizontal_ddx8o_6";
+const line = "_line_ddx8o_9";
+const vertical = "_vertical_ddx8o_16";
+const withLabel = "_withLabel_ddx8o_27";
+const label = "_label_ddx8o_40";
+const spacingNone = "_spacingNone_ddx8o_51";
+const spacingSm = "_spacingSm_ddx8o_55";
+const spacingMd = "_spacingMd_ddx8o_62";
+const spacingLg = "_spacingLg_ddx8o_69";
+const soft = "_soft_ddx8o_76";
 const styles = {
   separator,
   horizontal,

package/dist/components/Sidebar/Sidebar.module.scss.cjs

@@ -1,48 +1,48 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_1cdtb_1";
-const mobile = "_mobile_1cdtb_52";
-const positionRight = "_positionRight_1cdtb_58";
-const collapsed = "_collapsed_1cdtb_63";
-const header = "_header_1cdtb_66";
-const nav = "_nav_1cdtb_67";
-const footer = "_footer_1cdtb_68";
-const sectionLabel = "_sectionLabel_1cdtb_75";
-const itemLabel = "_itemLabel_1cdtb_86";
-const itemBadge = "_itemBadge_1cdtb_87";
-const itemChevron = "_itemChevron_1cdtb_88";
-const item = "_item_1cdtb_86";
-const itemIcon = "_itemIcon_1cdtb_96";
-const collapseToggle = "_collapseToggle_1cdtb_99";
-const collapsedNoIcons = "_collapsedNoIcons_1cdtb_103";
-const offcanvasCollapsed = "_offcanvasCollapsed_1cdtb_106";
-const collapseToggleFloating = "_collapseToggleFloating_1cdtb_112";
-const rail = "_rail_1cdtb_126";
-const navScrollArea = "_navScrollArea_1cdtb_167";
-const section = "_section_1cdtb_75";
-const sectionHeader = "_sectionHeader_1cdtb_176";
-const sectionTrigger = "_sectionTrigger_1cdtb_206";
-const sectionActionWrapper = "_sectionActionWrapper_1cdtb_217";
-const sectionAction = "_sectionAction_1cdtb_217";
-const sectionList = "_sectionList_1cdtb_299";
-const submenu = "_submenu_1cdtb_300";
-const sectionCollapsible = "_sectionCollapsible_1cdtb_309";
-const itemWrapper = "_itemWrapper_1cdtb_357";
-const subItemWrapper = "_subItemWrapper_1cdtb_358";
-const submenuWrapper = "_submenuWrapper_1cdtb_359";
-const itemDisabled = "_itemDisabled_1cdtb_428";
-const itemActive = "_itemActive_1cdtb_437";
-const subItemDisabled = "_subItemDisabled_1cdtb_522";
-const itemMultiline = "_itemMultiline_1cdtb_578";
-const itemExpanded = "_itemExpanded_1cdtb_605";
-const subItem = "_subItem_1cdtb_358";
-const subItemActive = "_subItemActive_1cdtb_702";
-const trigger = "_trigger_1cdtb_720";
-const overlay = "_overlay_1cdtb_785";
-const railCollapsed = "_railCollapsed_1cdtb_929";
-const menuSkeleton = "_menuSkeleton_1cdtb_933";
-const skeletonItem = "_skeletonItem_1cdtb_940";
-const skeletonLabel = "_skeletonLabel_1cdtb_969";
+const root = "_root_17sht_1";
+const mobile = "_mobile_17sht_51";
+const positionRight = "_positionRight_17sht_57";
+const collapsed = "_collapsed_17sht_62";
+const header = "_header_17sht_65";
+const nav = "_nav_17sht_66";
+const footer = "_footer_17sht_67";
+const sectionLabel = "_sectionLabel_17sht_74";
+const itemLabel = "_itemLabel_17sht_85";
+const itemBadge = "_itemBadge_17sht_86";
+const itemChevron = "_itemChevron_17sht_87";
+const item = "_item_17sht_85";
+const itemIcon = "_itemIcon_17sht_95";
+const collapseToggle = "_collapseToggle_17sht_98";
+const collapsedNoIcons = "_collapsedNoIcons_17sht_102";
+const offcanvasCollapsed = "_offcanvasCollapsed_17sht_105";
+const collapseToggleFloating = "_collapseToggleFloating_17sht_111";
+const rail = "_rail_17sht_125";
+const navScrollArea = "_navScrollArea_17sht_166";
+const section = "_section_17sht_74";
+const sectionHeader = "_sectionHeader_17sht_175";
+const sectionTrigger = "_sectionTrigger_17sht_205";
+const sectionActionWrapper = "_sectionActionWrapper_17sht_219";
+const sectionAction = "_sectionAction_17sht_219";
+const sectionList = "_sectionList_17sht_303";
+const submenu = "_submenu_17sht_304";
+const sectionCollapsible = "_sectionCollapsible_17sht_313";
+const itemWrapper = "_itemWrapper_17sht_361";
+const subItemWrapper = "_subItemWrapper_17sht_362";
+const submenuWrapper = "_submenuWrapper_17sht_363";
+const itemDisabled = "_itemDisabled_17sht_436";
+const itemActive = "_itemActive_17sht_445";
+const subItemDisabled = "_subItemDisabled_17sht_530";
+const itemMultiline = "_itemMultiline_17sht_586";
+const itemExpanded = "_itemExpanded_17sht_613";
+const subItem = "_subItem_17sht_362";
+const subItemActive = "_subItemActive_17sht_712";
+const trigger = "_trigger_17sht_730";
+const overlay = "_overlay_17sht_797";
+const railCollapsed = "_railCollapsed_17sht_945";
+const menuSkeleton = "_menuSkeleton_17sht_949";
+const skeletonItem = "_skeletonItem_17sht_956";
+const skeletonLabel = "_skeletonLabel_17sht_985";
 const styles = {
   root,
   mobile,

package/dist/components/Sidebar/Sidebar.module.scss.js

@@ -1,46 +1,46 @@
-const root = "_root_1cdtb_1";
-const mobile = "_mobile_1cdtb_52";
-const positionRight = "_positionRight_1cdtb_58";
-const collapsed = "_collapsed_1cdtb_63";
-const header = "_header_1cdtb_66";
-const nav = "_nav_1cdtb_67";
-const footer = "_footer_1cdtb_68";
-const sectionLabel = "_sectionLabel_1cdtb_75";
-const itemLabel = "_itemLabel_1cdtb_86";
-const itemBadge = "_itemBadge_1cdtb_87";
-const itemChevron = "_itemChevron_1cdtb_88";
-const item = "_item_1cdtb_86";
-const itemIcon = "_itemIcon_1cdtb_96";
-const collapseToggle = "_collapseToggle_1cdtb_99";
-const collapsedNoIcons = "_collapsedNoIcons_1cdtb_103";
-const offcanvasCollapsed = "_offcanvasCollapsed_1cdtb_106";
-const collapseToggleFloating = "_collapseToggleFloating_1cdtb_112";
-const rail = "_rail_1cdtb_126";
-const navScrollArea = "_navScrollArea_1cdtb_167";
-const section = "_section_1cdtb_75";
-const sectionHeader = "_sectionHeader_1cdtb_176";
-const sectionTrigger = "_sectionTrigger_1cdtb_206";
-const sectionActionWrapper = "_sectionActionWrapper_1cdtb_217";
-const sectionAction = "_sectionAction_1cdtb_217";
-const sectionList = "_sectionList_1cdtb_299";
-const submenu = "_submenu_1cdtb_300";
-const sectionCollapsible = "_sectionCollapsible_1cdtb_309";
-const itemWrapper = "_itemWrapper_1cdtb_357";
-const subItemWrapper = "_subItemWrapper_1cdtb_358";
-const submenuWrapper = "_submenuWrapper_1cdtb_359";
-const itemDisabled = "_itemDisabled_1cdtb_428";
-const itemActive = "_itemActive_1cdtb_437";
-const subItemDisabled = "_subItemDisabled_1cdtb_522";
-const itemMultiline = "_itemMultiline_1cdtb_578";
-const itemExpanded = "_itemExpanded_1cdtb_605";
-const subItem = "_subItem_1cdtb_358";
-const subItemActive = "_subItemActive_1cdtb_702";
-const trigger = "_trigger_1cdtb_720";
-const overlay = "_overlay_1cdtb_785";
-const railCollapsed = "_railCollapsed_1cdtb_929";
-const menuSkeleton = "_menuSkeleton_1cdtb_933";
-const skeletonItem = "_skeletonItem_1cdtb_940";
-const skeletonLabel = "_skeletonLabel_1cdtb_969";
+const root = "_root_17sht_1";
+const mobile = "_mobile_17sht_51";
+const positionRight = "_positionRight_17sht_57";
+const collapsed = "_collapsed_17sht_62";
+const header = "_header_17sht_65";
+const nav = "_nav_17sht_66";
+const footer = "_footer_17sht_67";
+const sectionLabel = "_sectionLabel_17sht_74";
+const itemLabel = "_itemLabel_17sht_85";
+const itemBadge = "_itemBadge_17sht_86";
+const itemChevron = "_itemChevron_17sht_87";
+const item = "_item_17sht_85";
+const itemIcon = "_itemIcon_17sht_95";
+const collapseToggle = "_collapseToggle_17sht_98";
+const collapsedNoIcons = "_collapsedNoIcons_17sht_102";
+const offcanvasCollapsed = "_offcanvasCollapsed_17sht_105";
+const collapseToggleFloating = "_collapseToggleFloating_17sht_111";
+const rail = "_rail_17sht_125";
+const navScrollArea = "_navScrollArea_17sht_166";
+const section = "_section_17sht_74";
+const sectionHeader = "_sectionHeader_17sht_175";
+const sectionTrigger = "_sectionTrigger_17sht_205";
+const sectionActionWrapper = "_sectionActionWrapper_17sht_219";
+const sectionAction = "_sectionAction_17sht_219";
+const sectionList = "_sectionList_17sht_303";
+const submenu = "_submenu_17sht_304";
+const sectionCollapsible = "_sectionCollapsible_17sht_313";
+const itemWrapper = "_itemWrapper_17sht_361";
+const subItemWrapper = "_subItemWrapper_17sht_362";
+const submenuWrapper = "_submenuWrapper_17sht_363";
+const itemDisabled = "_itemDisabled_17sht_436";
+const itemActive = "_itemActive_17sht_445";
+const subItemDisabled = "_subItemDisabled_17sht_530";
+const itemMultiline = "_itemMultiline_17sht_586";
+const itemExpanded = "_itemExpanded_17sht_613";
+const subItem = "_subItem_17sht_362";
+const subItemActive = "_subItemActive_17sht_712";
+const trigger = "_trigger_17sht_730";
+const overlay = "_overlay_17sht_797";
+const railCollapsed = "_railCollapsed_17sht_945";
+const menuSkeleton = "_menuSkeleton_17sht_949";
+const skeletonItem = "_skeletonItem_17sht_956";
+const skeletonLabel = "_skeletonLabel_17sht_985";
 const styles = {
   root,
   mobile,

package/dist/components/Sidebar/index.cjs

@@ -206,11 +206,7 @@ function SidebarProvider({
     defaultCollapsed,
     onCollapsedChange
   );
-  const [open, setOpen] = useControllableState(
-    controlledOpen,
-    defaultOpen,
-    onOpenChange
-  );
+  const [open, setOpen] = useControllableState(controlledOpen, defaultOpen, onOpenChange);
   const toggleSidebar = React__namespace.useCallback(() => {
     if (collapsible === "none") return;
     if (isMobile) {
@@ -272,7 +268,7 @@ function SidebarRoot({
   width = "240px",
   collapsedWidth = "var(--fui-navigation-sidebar-collapsed-width, 56px)",
   position = "left",
-  collapsible = "icon",
+  collapsible,
   activeIndicator = "start",
   className,
   style: styleProp,
@@ -291,14 +287,15 @@ function SidebarRoot({
     defaultOpen,
     onOpenChange
   );
-  const collapsed = existingContext ? existingContext.collapsed : internalCollapsed;
-  const setCollapsed = existingContext ? existingContext.setCollapsed : setInternalCollapsed;
+  const isCollapsedControlled = controlledCollapsed !== void 0;
+  const collapsed = isCollapsedControlled || !existingContext ? internalCollapsed : existingContext.collapsed;
+  const setCollapsed = isCollapsedControlled || !existingContext ? setInternalCollapsed : existingContext.setCollapsed;
   const open = existingContext ? existingContext.open : internalOpen;
   const setOpen = existingContext ? existingContext.setOpen : setInternalOpen;
   const resolvedPosition = existingContext ? existingContext.position : position;
   const resolvedWidth = existingContext ? existingContext.width : width;
   const resolvedCollapsedWidth = existingContext ? existingContext.collapsedWidth : collapsedWidth;
-  const resolvedCollapsible = existingContext ? existingContext.collapsible : collapsible;
+  const resolvedCollapsible = collapsible ?? (existingContext ? existingContext.collapsible : "icon");
   const hasIcons = React__namespace.useMemo(() => hasSidebarItemIcons(children), [children]);
   const shouldCollapseToZero = !isMobile && resolvedCollapsible === "icon" && collapsed && !hasIcons;
   const isOffcanvasCollapsed = !isMobile && resolvedCollapsible === "offcanvas" && collapsed;
@@ -382,6 +379,7 @@ function SidebarRoot({
       role: isMobile ? "dialog" : void 0,
       "aria-modal": isMobile && open ? true : void 0,
       "aria-hidden": isMobile && !open ? true : void 0,
+      inert: isMobile && !open ? true : void 0,
       "aria-label": isMobile ? ariaLabel || "Sidebar navigation" : ariaLabel,
       "data-state": isMobile ? open ? "open" : "closed" : collapsed ? "collapsed" : "expanded",
       "data-position": resolvedPosition,
@@ -424,10 +422,7 @@ function SidebarSection({
   ...htmlProps
 }) {
   const { collapsed, isMobile } = useSidebarContext();
-  const classes = [
-    Sidebar_module.default.section,
-    className
-  ].filter(Boolean).join(" ");
+  const classes = [Sidebar_module.default.section, className].filter(Boolean).join(" ");
   const showLabel = label && (!collapsed || isMobile);
   const showAction = action && (!collapsed || isMobile);
   const isCollapsible = isCollapsibleProp && showLabel;
@@ -442,14 +437,7 @@ function SidebarSection({
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, role: "group", "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Collapsible, { defaultOpen, className: Sidebar_module.default.sectionCollapsible, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Sidebar_module.default.sectionHeader, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        index$1.Collapsible.Trigger,
-        {
-          className: Sidebar_module.default.sectionTrigger,
-          chevronPosition: "end",
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: Sidebar_module.default.sectionLabel, children: label })
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx(index$1.Collapsible.Trigger, { className: Sidebar_module.default.sectionTrigger, chevronPosition: "end", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: Sidebar_module.default.sectionLabel, children: label }) }),
       showAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sidebar_module.default.sectionActionWrapper, children: action })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(index$1.Collapsible.Content, { className: Sidebar_module.default.sectionContent, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: Sidebar_module.default.sectionList, children }) })
@@ -562,10 +550,7 @@ function SidebarItem({
     itemElement = /* @__PURE__ */ jsxRuntime.jsx("button", { ...itemProps, ...rest, type: "button", children: itemContent });
   }
   const wrappedItem = isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(index$4.Tooltip, { content: labelText || children, side: "right", delay: 100, children: itemElement }) : itemElement;
-  const wrapperClasses = [
-    Sidebar_module.default.itemWrapper,
-    expanded && Sidebar_module.default.itemExpanded
-  ].filter(Boolean).join(" ");
+  const wrapperClasses = [Sidebar_module.default.itemWrapper, expanded && Sidebar_module.default.itemExpanded].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx("li", { className: wrapperClasses, children: wrappedItem });
 }
 function SidebarSubItem({
@@ -665,11 +650,7 @@ function SidebarCollapseToggle({
     return null;
   }
   const shouldFloat = collapsed && (collapsible === "icon" && !hasIcons || collapsible === "offcanvas");
-  const classes = [
-    Sidebar_module.default.collapseToggle,
-    shouldFloat && Sidebar_module.default.collapseToggleFloating,
-    className
-  ].filter(Boolean).join(" ");
+  const classes = [Sidebar_module.default.collapseToggle, shouldFloat && Sidebar_module.default.collapseToggleFloating, className].filter(Boolean).join(" ");
   const label = ariaLabel || (collapsed ? "Expand sidebar" : "Collapse sidebar");
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -694,11 +675,7 @@ function SidebarRail({
   if (isMobile || collapsible === "none") {
     return null;
   }
-  const classes = [
-    Sidebar_module.default.rail,
-    collapsed && Sidebar_module.default.railCollapsed,
-    className
-  ].filter(Boolean).join(" ");
+  const classes = [Sidebar_module.default.rail, collapsed && Sidebar_module.default.railCollapsed, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import * as React from "react";
 /** Collapse behavior mode */
-export type SidebarCollapsible = 'icon' | 'offcanvas' | 'none';
+export type SidebarCollapsible = "icon" | "offcanvas" | "none";
 export interface SidebarProviderProps {
     children: React.ReactNode;
     /** Icon-only mode (desktop) - controlled */
@@ -20,7 +20,7 @@ export interface SidebarProviderProps {
     /** Width when collapsed */
     collapsedWidth?: string;
     /** Sidebar position */
-    position?: 'left' | 'right';
+    position?: "left" | "right";
     /** Collapse behavior: 'icon' (default), 'offcanvas', or 'none' */
     collapsible?: SidebarCollapsible;
     /** Enable Cmd/Ctrl+B keyboard shortcut to toggle sidebar */
@@ -45,14 +45,14 @@ export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
     /** Width when collapsed */
     collapsedWidth?: string;
     /** Sidebar position */
-    position?: 'left' | 'right';
+    position?: "left" | "right";
     /** Collapse behavior: 'icon' (default), 'offcanvas', or 'none' */
     collapsible?: SidebarCollapsible;
     /**
      * Where the active-item affordance paints. `start` is the default rail;
      * `end` is a trailing status dot for product shells that prefer that language.
      */
-    activeIndicator?: 'start' | 'end';
+    activeIndicator?: "start" | "end";
 }
 export interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
@@ -62,7 +62,7 @@ export interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement>
 export interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
     /** Accessible label for navigation */
-    'aria-label'?: string;
+    "aria-label"?: string;
 }
 export interface SidebarSectionProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
@@ -75,14 +75,14 @@ export interface SidebarSectionProps extends React.HTMLAttributes<HTMLDivElement
     /** Default expanded state (only applies when collapsible is true) */
     defaultOpen?: boolean;
 }
-export interface SidebarSectionActionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+export interface SidebarSectionActionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
     children: React.ReactNode;
     /** Click handler */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /** Accessible label */
-    'aria-label'?: string;
+    "aria-label"?: string;
 }
-export interface SidebarItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick'> {
+export interface SidebarItemProps extends Omit<React.HTMLAttributes<HTMLElement>, "onClick"> {
     children: React.ReactNode;
     /** Icon element (required for collapsed mode visibility) */
     icon?: React.ReactNode;
@@ -115,7 +115,7 @@ export interface SidebarItemProps extends Omit<React.HTMLAttributes<HTMLElement>
      */
     asChild?: boolean;
 }
-export interface SidebarSubItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick'> {
+export interface SidebarSubItemProps extends Omit<React.HTMLAttributes<HTMLElement>, "onClick"> {
     children: React.ReactNode;
     /** Whether item is currently active/selected */
     active?: boolean;
@@ -133,12 +133,12 @@ export interface SidebarTriggerProps extends React.ButtonHTMLAttributes<HTMLButt
     /** Custom trigger element (uses render prop pattern) */
     children?: React.ReactNode;
     /** Accessible label */
-    'aria-label'?: string;
+    "aria-label"?: string;
 }
 export type SidebarOverlayProps = React.HTMLAttributes<HTMLDivElement>;
 export interface SidebarCollapseToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Accessible label */
-    'aria-label'?: string;
+    "aria-label"?: string;
 }
 export type SidebarRailProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 export interface SidebarMenuSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -153,7 +153,7 @@ interface SidebarContextValue {
     open: boolean;
     setOpen: (open: boolean) => void;
     isMobile: boolean;
-    position: 'left' | 'right';
+    position: "left" | "right";
     width: string;
     collapsedWidth: string;
     collapsible: SidebarCollapsible;
@@ -189,21 +189,21 @@ declare function useSidebarContext(): SidebarContextValue;
  * This enables external triggers and keyboard shortcuts.
  */
 declare function SidebarProvider({ children, collapsed: controlledCollapsed, defaultCollapsed, onCollapsedChange, open: controlledOpen, defaultOpen, onOpenChange, width, collapsedWidth, position, collapsible, enableKeyboardShortcut, }: SidebarProviderProps): import("react/jsx-runtime").JSX.Element;
-declare function SidebarRoot({ children, collapsed: controlledCollapsed, defaultCollapsed, onCollapsedChange, open: controlledOpen, defaultOpen, onOpenChange, width, collapsedWidth, position, collapsible, activeIndicator, className, style: styleProp, 'aria-label': ariaLabel, ...htmlProps }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+declare function SidebarRoot({ children, collapsed: controlledCollapsed, defaultCollapsed, onCollapsedChange, open: controlledOpen, defaultOpen, onOpenChange, width, collapsedWidth, position, collapsible, activeIndicator, className, style: styleProp, "aria-label": ariaLabel, ...htmlProps }: SidebarProps): import("react/jsx-runtime").JSX.Element;
 declare function SidebarHeader({ children, collapsedContent, className, ...htmlProps }: SidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare function SidebarNav({ children, 'aria-label': ariaLabel, className, ...htmlProps }: SidebarNavProps): import("react/jsx-runtime").JSX.Element;
+declare function SidebarNav({ children, "aria-label": ariaLabel, className, ...htmlProps }: SidebarNavProps): import("react/jsx-runtime").JSX.Element;
 declare function SidebarSection({ children, label, action, collapsible: isCollapsibleProp, defaultOpen, className, ...htmlProps }: SidebarSectionProps): import("react/jsx-runtime").JSX.Element;
-declare function SidebarSectionAction({ children, onClick, 'aria-label': ariaLabel, className, ...htmlProps }: SidebarSectionActionProps): import("react/jsx-runtime").JSX.Element;
+declare function SidebarSectionAction({ children, onClick, "aria-label": ariaLabel, className, ...htmlProps }: SidebarSectionActionProps): import("react/jsx-runtime").JSX.Element;
 declare function SidebarItem({ children, icon, active, disabled, badge, href, onClick, multiline, hasSubmenu, expanded: controlledExpanded, defaultExpanded, onExpandedChange, asChild, className, ...rest }: SidebarItemProps): import("react/jsx-runtime").JSX.Element;
 declare function SidebarSubItem({ children, active, disabled, href, onClick, className, ...rest }: SidebarSubItemProps): import("react/jsx-runtime").JSX.Element | null;
 declare function SidebarSubmenu({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 declare function SidebarFooter({ children, className, ...htmlProps }: SidebarFooterProps): import("react/jsx-runtime").JSX.Element;
-declare function SidebarTrigger({ children, 'aria-label': ariaLabel, className, onClick, ...htmlProps }: SidebarTriggerProps): import("react/jsx-runtime").JSX.Element | null;
+declare function SidebarTrigger({ children, "aria-label": ariaLabel, className, onClick, ...htmlProps }: SidebarTriggerProps): import("react/jsx-runtime").JSX.Element | null;
 declare function SidebarOverlay({ className, onClick, ...htmlProps }: SidebarOverlayProps): import("react/jsx-runtime").JSX.Element | null;
-declare function SidebarCollapseToggle({ 'aria-label': ariaLabel, className, onClick, ...htmlProps }: SidebarCollapseToggleProps): import("react/jsx-runtime").JSX.Element | null;
-declare function SidebarRail({ className, onClick, title, 'aria-label': ariaLabel, ...htmlProps }: SidebarRailProps): import("react/jsx-runtime").JSX.Element | null;
+declare function SidebarCollapseToggle({ "aria-label": ariaLabel, className, onClick, ...htmlProps }: SidebarCollapseToggleProps): import("react/jsx-runtime").JSX.Element | null;
+declare function SidebarRail({ className, onClick, title, "aria-label": ariaLabel, ...htmlProps }: SidebarRailProps): import("react/jsx-runtime").JSX.Element | null;
 declare function SidebarMenuSkeleton({ count, showIcon, className, ...htmlProps }: SidebarMenuSkeletonProps): import("react/jsx-runtime").JSX.Element;
 export declare const Sidebar: typeof SidebarRoot & {
     Header: typeof SidebarHeader;