@lerianstudio/sindarian-ui 1.4.0-beta.8 → 2.0.0-beta.10

package/dist/components/ui/multiple-select/index.js

@@ -77,7 +77,7 @@ exports.MultipleSelectTrigger = react_1.default.forwardRef(({ className, childre
         setOpen(false);
         inputRef.current?.blur();
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: _ref, className: (0, utils_1.cn)('bg-background ring-offset-background placeholder:text-shadcn-400 focus:ring-ring border-shadcn-400 flex flex-row rounded-md border text-sm focus:ring-2 focus:ring-offset-0 focus:outline-hidden focus-visible:outline-hidden md:text-sm [&>span]:line-clamp-1', {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: _ref, className: (0, utils_1.cn)('bg-background ring-offset-background placeholder:text-input-placeholder focus:ring-ring border-input-border flex flex-row rounded-md border text-sm focus:ring-2 focus:ring-offset-0 focus:outline-hidden focus-visible:outline-hidden md:text-sm [&>span]:line-clamp-1', {
             'h-10': value.length === 0,
             'min-h-10': value.length > 0,
             'cursor-text': !disabled && !readOnly && value.length !== 0,
@@ -116,7 +116,7 @@ exports.MultipleSelectValue = react_1.default.forwardRef(({ className, ...props
                 value?.map((value) => ((0, jsx_runtime_1.jsxs)(badge_1.Badge, { variant: "secondary", className: (0, utils_1.cn)('data-disabled:bg-muted-foreground data-fixed:bg-muted-foreground data-disabled:text-muted data-fixed:text-muted data-disabled:hover:bg-muted-foreground data-fixed:hover:bg-muted-foreground'), children: [showValue ? value : options[value], (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, utils_1.cn)('ring-offset-background focus:ring-ring ml-1 rounded-full outline-hidden focus:ring-2 focus:ring-offset-2', disabled && 'hidden'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "text-muted-foreground hover:text-foreground h-3 w-3", onClick: (event) => {
                                     event.stopPropagation();
                                     handleChange(value);
-                                } }) })] }, value))), (0, jsx_runtime_1.jsx)(cmdk_1.Command.Input, { ...props, ref: inputRef, disabled: disabled, className: (0, utils_1.cn)('placeholder:text-muted-foreground bg-transparent outline-hidden focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 disabled:placeholder:opacity-0', className) })] }));
+                                } }) })] }, value))), (0, jsx_runtime_1.jsx)(cmdk_1.Command.Input, { ...props, ref: inputRef, disabled: disabled, className: (0, utils_1.cn)('placeholder:text-input-placeholder bg-transparent outline-hidden focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 disabled:placeholder:opacity-0', className) })] }));
 });
 exports.MultipleSelectValue.displayName = 'MultipleSelectValue';
 exports.MultipleSelectEmpty = react_1.default.forwardRef(({ className, ...props }, forwardedRef) => {

package/dist/components/ui/progress/index.d.ts

@@ -3,6 +3,20 @@ import * as ProgressPrimitive from '@radix-ui/react-progress';
 type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root> & {
     indicatorColor?: string;
 };
-declare function Progress({ className, value, indicatorColor, ...props }: ProgressProps): React.JSX.Element;
+/**
+ * `value` and `max` are Radix's own props, so the bar reports `aria-valuenow` /
+ * `aria-valuemax` and flips `data-state` between `loading` and `complete`.
+ * Omitting `value`, or passing `null`, is Radix's indeterminate state and draws
+ * an empty track.
+ *
+ * Both numbers are BOUNDED BEFORE THE ROOT SEES THEM, so the drawn width and
+ * the announced value can never disagree. Radix accepts a value only inside
+ * `[0, max]`: hand it one outside and the root drops `aria-valuenow`, sticks
+ * `data-state` on `indeterminate` and logs an error, while the indicator here
+ * goes on drawing the clamped bar. Substituting 100 for a non-positive max is
+ * Radix's own fallback, and is also what keeps a `max` of 0 from dividing by
+ * zero.
+ */
+declare function Progress({ className, value, max, indicatorColor, ...props }: ProgressProps): React.JSX.Element;
 export { Progress };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/progress/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/progress/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAI7D,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG;IACzE,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,cAA6B,EAC7B,GAAG,KAAK,EACT,EAAE,aAAa,qBAiBf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/progress/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAI7D,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG;IACzE,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAA6B,EAC7B,GAAG,KAAK,EACT,EAAE,aAAa,qBA6Bf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/progress/index.js

@@ -38,6 +38,29 @@ exports.Progress = Progress;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ProgressPrimitive = __importStar(require("@radix-ui/react-progress"));
 const utils_1 = require("../../../lib/utils");
-function Progress({ className, value, indicatorColor = 'bg-primary', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(ProgressPrimitive.Root, { "data-slot": "progress", className: (0, utils_1.cn)('bg-primary/20 relative h-4 w-full overflow-hidden rounded-full', className), ...props, children: (0, jsx_runtime_1.jsx)(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: (0, utils_1.cn)('h-full w-full flex-1 transition-all', indicatorColor), style: { transform: `translateX(-${100 - (value || 0)}%)` } }) }));
+/**
+ * `value` and `max` are Radix's own props, so the bar reports `aria-valuenow` /
+ * `aria-valuemax` and flips `data-state` between `loading` and `complete`.
+ * Omitting `value`, or passing `null`, is Radix's indeterminate state and draws
+ * an empty track.
+ *
+ * Both numbers are BOUNDED BEFORE THE ROOT SEES THEM, so the drawn width and
+ * the announced value can never disagree. Radix accepts a value only inside
+ * `[0, max]`: hand it one outside and the root drops `aria-valuenow`, sticks
+ * `data-state` on `indeterminate` and logs an error, while the indicator here
+ * goes on drawing the clamped bar. Substituting 100 for a non-positive max is
+ * Radix's own fallback, and is also what keeps a `max` of 0 from dividing by
+ * zero.
+ */
+function Progress({ className, value, max, indicatorColor = 'bg-primary', ...props }) {
+    const scale = Number.isFinite(max) && max > 0 ? max : 100;
+    // Bound against `scale`, not against the rejected `max`: with `max={0}` the
+    // scale is already 100, and clamping to 0 would report a finished bar empty.
+    // Non-finite values are indeterminate, matching Radix without producing an
+    // invalid CSS transform.
+    const bounded = Number.isFinite(value)
+        ? Math.min(scale, Math.max(0, value))
+        : null;
+    const percent = ((bounded ?? 0) / scale) * 100;
+    return ((0, jsx_runtime_1.jsx)(ProgressPrimitive.Root, { "data-slot": "progress", value: bounded, max: scale, className: (0, utils_1.cn)('bg-primary/20 relative h-4 w-full overflow-hidden rounded-full', className), ...props, children: (0, jsx_runtime_1.jsx)(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: (0, utils_1.cn)('h-full w-full flex-1 transition-all', indicatorColor), style: { transform: `translateX(-${100 - percent}%)` } }) }));
 }

package/dist/components/ui/sheet/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sheet/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,qBAE5E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAErD;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,MAAM,CAAC,qBAEpD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAWrD;AAED,QAAA,MAAM,aAAa;;8EAiBlB,CAAA;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAEpC,iBAAS,YAAY,CAAC,EACpB,IAAc,EACd,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAsCnB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAWnD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,qBAQzD;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,EACjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sheet/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,qBAE5E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAErD;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,MAAM,CAAC,qBAEpD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAWrD;AAED,QAAA,MAAM,aAAa;;8EAiBlB,CAAA;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAEpC,iBAAS,YAAY,CAAC,EACpB,IAAc,EACd,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA6CnB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAWnD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,qBAQzD;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,EACjB,CAAA"}

package/dist/components/ui/sheet/index.js

@@ -87,7 +87,7 @@ function SheetContent({ side = 'right', className, children, onInteractOutside,
         }
         onInteractOutside?.(event);
     }, [onInteractOutside]);
-    return ((0, jsx_runtime_1.jsxs)(SheetPortal, { children: [(0, jsx_runtime_1.jsx)(SheetOverlay, {}), (0, jsx_runtime_1.jsxs)(SheetPrimitive.Content, { "data-slot": "sheet-content", className: (0, utils_1.cn)('flex max-h-screen flex-col overflow-x-auto px-8 pb-0', sheetVariants({ side }), className), onInteractOutside: handleInteractOutside, ...props, children: [children, (0, jsx_runtime_1.jsxs)(SheetPrimitive.Close, { className: "data-[state=open]:bg-secondary absolute top-7 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-6 w-6" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(SheetPortal, { children: [(0, jsx_runtime_1.jsx)(SheetOverlay, {}), (0, jsx_runtime_1.jsxs)(SheetPrimitive.Content, { "data-slot": "sheet-content", className: (0, utils_1.cn)('flex max-h-screen flex-col overflow-x-auto px-8 pb-0', sheetVariants({ side }), className), onInteractOutside: handleInteractOutside, ...props, children: [children, (0, jsx_runtime_1.jsxs)(SheetPrimitive.Close, { className: "data-[state=open]:bg-secondary ring-offset-background focus-visible:ring-ring absolute top-7 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-6 w-6" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] })] })] }));
 }
 function SheetHeader({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sheet-header", className: (0, utils_1.cn)('mb-4 flex flex-col space-y-2 text-center sm:text-left', className), ...props }));
@@ -99,5 +99,5 @@ function SheetTitle({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)(SheetPrimitive.Title, { "data-slot": "sheet-title", className: (0, utils_1.cn)('text-muted-foreground mb-2 flex text-xl font-bold', className), ...props }));
 }
 function SheetDescription({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SheetPrimitive.Description, { "data-slot": "sheet-description", className: (0, utils_1.cn)('text-shadcn-500 text-sm font-medium', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)(SheetPrimitive.Description, { "data-slot": "sheet-description", className: (0, utils_1.cn)('text-muted-foreground text-sm font-medium', className), ...props }));
 }

package/dist/components/ui/sidebar/index.d.ts

@@ -4,6 +4,7 @@ export * from './sidebar-item-icon-button';
 export * from './sidebar-item-button';
 export * from './sidebar-item';
 export * from './sidebar-expand-button';
+export * from './sidebar-trigger';
 export * from './sidebar-back-button';
 export * from './sidebar-provider';
 export * from './sidebar-item-collapsible';

package/dist/components/ui/sidebar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA"}

package/dist/components/ui/sidebar/index.js

@@ -20,6 +20,7 @@ __exportStar(require("./sidebar-item-icon-button"), exports);
 __exportStar(require("./sidebar-item-button"), exports);
 __exportStar(require("./sidebar-item"), exports);
 __exportStar(require("./sidebar-expand-button"), exports);
+__exportStar(require("./sidebar-trigger"), exports);
 __exportStar(require("./sidebar-back-button"), exports);
 __exportStar(require("./sidebar-provider"), exports);
 __exportStar(require("./sidebar-item-collapsible"), exports);

package/dist/components/ui/sidebar/sidebar-expand-button.d.ts

@@ -7,6 +7,6 @@ type SidebarExpandButtonProps = {
      */
     tooltip?: string;
 };
-export declare const SidebarExpandButton: ({ tooltip }: SidebarExpandButtonProps) => React.JSX.Element;
+export declare const SidebarExpandButton: ({ tooltip }: SidebarExpandButtonProps) => React.JSX.Element | null;
 export {};
 //# sourceMappingURL=sidebar-expand-button.d.ts.map

package/dist/components/ui/sidebar/sidebar-expand-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-expand-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-expand-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,KAAK,wBAAwB,GAAG;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,aAAa,wBAAwB,sBA6CxE,CAAA"}
+{"version":3,"file":"sidebar-expand-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-expand-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,KAAK,wBAAwB,GAAG;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,aAAa,wBAAwB,6BAwExE,CAAA"}

package/dist/components/ui/sidebar/sidebar-expand-button.js

@@ -13,7 +13,37 @@ const sidebar_components_1 = require("./sidebar-components");
 const tooltip_1 = require("../../ui/tooltip");
 const icon_button_1 = require("../icon-button");
 const SidebarExpandButton = ({ tooltip }) => {
-    const { isCollapsed, toggleSidebar } = (0, sidebar_provider_1.useSidebar)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isCollapsed && ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sidebar-expand-button", className: "border-border bg-card flex w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute right-[-20px] bottom-4", children: (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { variant: "secondary", rounded: true, onClick: toggleSidebar, "aria-label": tooltip || 'Collapse sidebar', "aria-expanded": true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { className: "text-shadcn-400" }) }) }) })), isCollapsed && ((0, jsx_runtime_1.jsx)(sidebar_components_1.SidebarFooter, { children: (0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { className: "group/expand-button text-shadcn-400 hover:bg-accent rounded-sm bg-transparent p-2", onClick: toggleSidebar, "aria-label": tooltip || 'Expand sidebar', "aria-expanded": false, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { className: "group-hover/expand-button:text-white dark:text-white" }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { side: "right", children: tooltip || 'Expand' })] }) }) }))] }));
+    const { isCollapsed, isDrawer, toggleSidebar } = (0, sidebar_provider_1.useSidebar)();
+    /**
+     * Nothing to collapse in a drawer. The expanded branch below hangs its button
+     * at `right-[-20px]`, twenty pixels outside the rail — off the canvas of an
+     * overlay that has no page beside it — and collapsing to a 72px strip inside
+     * a 244px sheet is not a state worth reaching. The drawer's own close control
+     * and the backdrop are how it is dismissed.
+     *
+     * ⚠️ `isDrawer`, NOT `isMobile`. A consumer left on the default
+     * `mobile="inline"` still has a real rail below 768px, and its collapse
+     * control has to come with it.
+     */
+    if (isDrawer) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isCollapsed && ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sidebar-expand-button", className: "border-border bg-card flex w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute right-[-20px] bottom-4", children: (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { variant: "secondary", rounded: true, onClick: toggleSidebar, "aria-label": tooltip || 'Collapse sidebar', "aria-expanded": true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { className: "text-muted-foreground" }) }) }) })), isCollapsed && ((0, jsx_runtime_1.jsx)(sidebar_components_1.SidebarFooter, { children: (0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger
+                            // `hover:text-accent-foreground` on the TRIGGER, not only on
+                            // the glyph below. The base ink here used to be base/400, which
+                            // no rule paired with anything; now that it is the muted token,
+                            // it is the ink anything inside this trigger inherits, and the
+                            // muted token reads 1.07:1 on sunglow in dark. The glyph
+                            // overrides it today, so this pairs the fill for whatever the
+                            // trigger holds next.
+                            , { 
+                                // `hover:text-accent-foreground` on the TRIGGER, not only on
+                                // the glyph below. The base ink here used to be base/400, which
+                                // no rule paired with anything; now that it is the muted token,
+                                // it is the ink anything inside this trigger inherits, and the
+                                // muted token reads 1.07:1 on sunglow in dark. The glyph
+                                // overrides it today, so this pairs the fill for whatever the
+                                // trigger holds next.
+                                className: "group/expand-button text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-sm bg-transparent p-2", onClick: toggleSidebar, "aria-label": tooltip || 'Expand sidebar', "aria-expanded": false, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { className: "group-hover/expand-button:text-accent-foreground dark:text-white" }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { side: "right", children: tooltip || 'Expand' })] }) }) }))] }));
 };
 exports.SidebarExpandButton = SidebarExpandButton;

package/dist/components/ui/sidebar/sidebar-item.d.ts

@@ -9,5 +9,5 @@ export type SidebarItemProps = React.ComponentProps<typeof SidebarItemButton> &
     disabled?: boolean;
     children?: React.ReactNode;
 };
-export declare const SidebarItem: ({ active, href, children: _children, ...props }: SidebarItemProps) => React.JSX.Element;
+export declare const SidebarItem: ({ active, href, children: _children, onClick, ...props }: SidebarItemProps) => React.JSX.Element;
 //# sourceMappingURL=sidebar-item.d.ts.map

package/dist/components/ui/sidebar/sidebar-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-item.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAIlE,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,GAC3E,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,GAAG;IACnD,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAEH,eAAO,MAAM,WAAW,GAAI,iDAKzB,gBAAgB,sBA0BlB,CAAA"}
+{"version":3,"file":"sidebar-item.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAIlE,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,GAC3E,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,GAAG;IACnD,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAEH,eAAO,MAAM,WAAW,GAAI,0DAMzB,gBAAgB,sBAsDlB,CAAA"}

package/dist/components/ui/sidebar/sidebar-item.js

@@ -7,14 +7,38 @@ const sidebar_item_button_1 = require("./sidebar-item-button");
 const sidebar_item_icon_button_1 = require("./sidebar-item-icon-button");
 const sidebar_provider_1 = require("./sidebar-provider");
 const sidebar_router_1 = require("./sidebar-router");
-const SidebarItem = ({ active, href, children: _children, ...props }) => {
+const SidebarItem = ({ active, href, children: _children, onClick, ...props }) => {
     const { usePathname } = (0, sidebar_router_1.useSidebarRouter)();
     const pathname = usePathname();
-    const { isCollapsed } = (0, sidebar_provider_1.useSidebar)();
+    const { isCollapsed, isDrawer, setOpenMobile } = (0, sidebar_provider_1.useSidebar)();
     const isActive = (href) => pathname === href;
+    /**
+     * ⛔ ACTIVATING A DESTINATION CLOSES THE DRAWER. It is the whole point of the
+     * drawer and it was the one interaction that left it open: Escape, the
+     * backdrop and the X all dismissed it, a navigation link did not.
+     *
+     * The overlay is modal, so `document.body` carries `pointer-events: none`
+     * while it is up, and a consumer's `SidebarItem` is a client-side `Link`
+     * under a provider that survives the route change — so the reader landed on
+     * the new page rendered INERT behind a drawer they had to dismiss a second
+     * time, on a phone.
+     *
+     * Here rather than in `SidebarRoot`, because this is the component that knows
+     * an activation happened; `SidebarBackButton` and every
+     * `SidebarItemCollapsibleContent` leaf render through it, so they are covered
+     * by construction. Guarded on `isDrawer` so an inline rail — where nothing is
+     * covering the page — behaves exactly as before, and the consumer's own
+     * handler still runs either way.
+     */
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (isDrawer) {
+            setOpenMobile(false);
+        }
+    };
     if (isCollapsed) {
-        return ((0, jsx_runtime_1.jsx)(sidebar_item_icon_button_1.SidebarItemIconButton, { "data-slot": "sidebar-item", href: href, active: isActive(href) || active, ...props }));
+        return ((0, jsx_runtime_1.jsx)(sidebar_item_icon_button_1.SidebarItemIconButton, { "data-slot": "sidebar-item", href: href, active: isActive(href) || active, onClick: handleClick, ...props }));
     }
-    return ((0, jsx_runtime_1.jsx)(sidebar_item_button_1.SidebarItemButton, { "data-slot": "sidebar-item", href: href, active: isActive(href) || active, ...props }));
+    return ((0, jsx_runtime_1.jsx)(sidebar_item_button_1.SidebarItemButton, { "data-slot": "sidebar-item", href: href, active: isActive(href) || active, onClick: handleClick, ...props }));
 };
 exports.SidebarItem = SidebarItem;

package/dist/components/ui/sidebar/sidebar-provider.d.ts

@@ -1,12 +1,49 @@
 import React from 'react';
+/**
+ * The viewport below which the rail stops being a layout and becomes a drawer.
+ *
+ * 767px rather than 768px: this is the upper bound of `max-width`, so it is the
+ * complement of Tailwind's `md` breakpoint (`min-width: 768px`) and `md:hidden`
+ * on `SidebarTrigger` flips at exactly the same pixel the query does.
+ */
+export declare const SIDEBAR_MOBILE_QUERY = "(max-width: 767px)";
 export type SidebarContextProps = {
     isCollapsed: boolean;
+    /**
+     * True only inside a drawer that `SidebarRoot` is actually rendering, which
+     * needs `mobile="drawer"` as well as a narrow viewport. `SidebarRoot`
+     * re-provides the context for that subtree; nothing else sets it.
+     */
+    isDrawer: boolean;
+    /**
+     * True while the viewport is narrow enough for a drawer. Reported in BOTH
+     * modes, so a consumer still on `mobile="inline"` can build its own
+     * responsive behaviour from it.
+     */
+    isMobile: boolean;
+    /** Whether the mobile drawer is showing. Meaningless while `isMobile` is false. */
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    /**
+     * Puts focus back on whatever opened the drawer. `SidebarRoot` calls it when
+     * the drawer closes; nothing else should need it.
+     */
+    restoreDrawerFocus: () => void;
+    /** The drawer's DOM id, so `SidebarTrigger` can point `aria-controls` at it. */
+    sidebarId: string;
     items: Record<string, boolean>;
     setItems: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
     getItemCollapsed: (key: string) => boolean;
     setItemCollapsed: (key: string, value: boolean) => void;
     toggleSidebar: () => void;
 };
+/**
+ * Exported so `SidebarRoot` can re-provide it for the drawer's subtree. That
+ * subtree is the only place `isCollapsed` and `isDrawer` differ from the
+ * provider's own values, and scoping the override to it is what keeps a
+ * consumer on `mobile="inline"` seeing exactly today's rail.
+ */
+export declare const SidebarContext: React.Context<SidebarContextProps | undefined>;
 export declare const useSidebar: () => SidebarContextProps;
 export declare const SidebarProvider: ({ children }: React.PropsWithChildren) => React.JSX.Element;
 //# sourceMappingURL=sidebar-provider.d.ts.map

package/dist/components/ui/sidebar/sidebar-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-provider.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACvE,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IAC1C,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAMD,eAAO,MAAM,UAAU,2BAMtB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,cAAc,KAAK,CAAC,iBAAiB,sBAqDpE,CAAA"}
+{"version":3,"file":"sidebar-provider.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,uBAAuB,CAAA;AAUxD,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB,mFAAmF;IACnF,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;OAGG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACvE,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IAC1C,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,gDAEf,CAAA;AAEZ,eAAO,MAAM,UAAU,2BAMtB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,cAAc,KAAK,CAAC,iBAAiB,sBAkKpE,CAAA"}

package/dist/components/ui/sidebar/sidebar-provider.js

@@ -4,13 +4,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarProvider = exports.useSidebar = void 0;
+exports.SidebarProvider = exports.useSidebar = exports.SidebarContext = exports.SIDEBAR_MOBILE_QUERY = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const storage_1 = require("../../../lib/storage");
-const SidebarContext = react_1.default.createContext(undefined);
+/**
+ * The viewport below which the rail stops being a layout and becomes a drawer.
+ *
+ * 767px rather than 768px: this is the upper bound of `max-width`, so it is the
+ * complement of Tailwind's `md` breakpoint (`min-width: 768px`) and `md:hidden`
+ * on `SidebarTrigger` flips at exactly the same pixel the query does.
+ */
+exports.SIDEBAR_MOBILE_QUERY = '(max-width: 767px)';
+/**
+ * Where focus goes when the rail has to receive it. The rail's own content is
+ * links and buttons, so this is deliberately the short list rather than the
+ * full tabbable grammar: a `[tabindex]` sweep would have to exclude `-1`, and
+ * nothing in a sidebar carries one.
+ */
+const FOCUSABLE = 'a[href], button:not([disabled])';
+/**
+ * Exported so `SidebarRoot` can re-provide it for the drawer's subtree. That
+ * subtree is the only place `isCollapsed` and `isDrawer` differ from the
+ * provider's own values, and scoping the override to it is what keeps a
+ * consumer on `mobile="inline"` seeing exactly today's rail.
+ */
+exports.SidebarContext = react_1.default.createContext(undefined);
 const useSidebar = () => {
-    const context = react_1.default.useContext(SidebarContext);
+    const context = react_1.default.useContext(exports.SidebarContext);
     if (!context) {
         throw new Error('useSidebar must be used within a SidebarProvider');
     }
@@ -21,6 +42,61 @@ const SidebarProvider = ({ children }) => {
     const [hydrated, setHydrated] = react_1.default.useState(false);
     const [collapsed, setCollapsed] = react_1.default.useState(false);
     const [items, _setItems] = react_1.default.useState({});
+    const [isMobile, setIsMobile] = react_1.default.useState(false);
+    const [openMobile, _setOpenMobile] = react_1.default.useState(false);
+    const sidebarId = react_1.default.useId();
+    /**
+     * ⛔ RADIX CANNOT RESTORE THIS FOCUS BY ITSELF. `DialogContent` preventDefaults
+     * the focus scope's own restore and focuses `triggerRef.current` instead —
+     * the ref a `SheetTrigger` would have filled. The drawer is opened from this
+     * state rather than from a trigger inside the dialog, so that ref is null and
+     * closing dropped focus onto `<body>`: a keyboard reader who opened the
+     * navigation and pressed Escape was returned to the top of the document.
+     *
+     * Captured here rather than in `SidebarTrigger` so that a consumer opening
+     * the drawer from its own control gets the same behaviour.
+     */
+    const opener = react_1.default.useRef(null);
+    const setOpenMobile = react_1.default.useCallback((open) => {
+        if (open && typeof document !== 'undefined') {
+            opener.current = document.activeElement;
+        }
+        _setOpenMobile(open);
+    }, []);
+    /**
+     * ⛔ THE VIEWPORT AT THE MOMENT FOCUS MOVES, NOT AT THE MOMENT IT OPENED.
+     *
+     * Radix calls `restoreDrawerFocus` from the focus scope's UNMOUNT handler,
+     * which is the last thing in the commit to touch focus — later than any
+     * effect in this provider, so the decision has to be made inside the handler
+     * rather than beside it. By then `isMobile` has already flipped.
+     */
+    const isMobileRef = react_1.default.useRef(false);
+    isMobileRef.current = isMobile;
+    const restoreDrawerFocus = react_1.default.useCallback(() => {
+        // `isConnected`: the control that opened the drawer may itself have been
+        // unmounted by whatever the reader did inside it.
+        //
+        // ⛔ AND NOT AT ALL WHEN THE VIEWPORT IS THE ONE THAT DISMISSED IT. A
+        // tablet rotated from portrait to landscape with the navigation open
+        // crosses 768px, so the drawer is replaced by the rail and the opener is
+        // `SidebarTrigger` — which the same breakpoint just hid with `md:hidden`.
+        // `.focus()` on a `display: none` element is a silent no-op, and Radix's
+        // own restore is already `preventDefault()`ed, so focus fell to `<body>`
+        // and the reader lost their place (SC 2.4.3). Measured in Chromium at
+        // 390 → 1280: `{"rails":1,"triggerDisplay":"none","focus":"BODY:"}`.
+        if (isMobileRef.current && opener.current?.isConnected) {
+            opener.current.focus();
+            return;
+        }
+        // The rail is what the drawer became, so that is where the reader goes.
+        // Below the breakpoint there is nothing here to find — a closed drawer
+        // leaves no navigation in the DOM — and focus stays where Radix left it.
+        document
+            .getElementById(sidebarId)
+            ?.querySelector(FOCUSABLE)
+            ?.focus();
+    }, [sidebarId]);
     const toggleSidebar = () => setCollapsed((collapsed) => !collapsed);
     const getItemCollapsed = (key) => {
         return items[key] || false;
@@ -34,6 +110,37 @@ const SidebarProvider = ({ children }) => {
         _setItems((0, storage_1.getStorageObject)('sidebar-items', {}));
         setHydrated(true);
     }, []);
+    /**
+     * ⚠️ FALSE UNTIL THE CLIENT SAYS OTHERWISE. There is no viewport on the
+     * server, so the first paint is always the rail and the drawer appears on
+     * hydration; starting from a guess would make the markup differ between the
+     * two renders. The `matchMedia` guard is the one `theme-provider.tsx` next
+     * door already carries: jsdom and some embedded runtimes ship without it, and
+     * a missing media API is a desktop, not a crash.
+     */
+    react_1.default.useEffect(() => {
+        if (typeof window.matchMedia !== 'function') {
+            return;
+        }
+        const media = window.matchMedia(exports.SIDEBAR_MOBILE_QUERY);
+        const sync = () => setIsMobile(media.matches);
+        sync();
+        media.addEventListener('change', sync);
+        return () => media.removeEventListener('change', sync);
+    }, []);
+    /**
+     * A drawer left open while the viewport grows back would keep an overlay and
+     * a focus trap over a layout that is already showing its rail, with nothing
+     * on screen to dismiss them.
+     *
+     * Where focus goes afterwards is `restoreDrawerFocus`'s decision, not this
+     * effect's: Radix's unmount handler runs later than anything here.
+     */
+    react_1.default.useEffect(() => {
+        if (!isMobile) {
+            _setOpenMobile(false);
+        }
+    }, [isMobile]);
     // Only persist to localStorage after hydration to avoid overwriting stored values
     react_1.default.useEffect(() => {
         if (!hydrated) {
@@ -47,8 +154,22 @@ const SidebarProvider = ({ children }) => {
         }
         localStorage.setItem('sidebar-items', JSON.stringify(items));
     }, [items, hydrated]);
-    return ((0, jsx_runtime_1.jsx)(SidebarContext.Provider, { value: {
+    return ((0, jsx_runtime_1.jsx)(exports.SidebarContext.Provider, { value: {
+            /**
+             * ⚠️ A NARROW VIEWPORT DOES NOT TOUCH THIS. It used to be forced false
+             * whenever `isMobile`, which silently changed the rail for every
+             * consumer — including the ones that never asked for a drawer.
+             * `SidebarRoot` overrides it for the drawer's own subtree instead, so
+             * the stored preference reaches an inline rail unchanged at every
+             * viewport.
+             */
             isCollapsed: collapsed,
+            isDrawer: false,
+            isMobile,
+            openMobile,
+            setOpenMobile,
+            restoreDrawerFocus,
+            sidebarId,
             items,
             setItems: _setItems,
             getItemCollapsed,

package/dist/components/ui/sidebar/sidebar-root.d.ts

@@ -1,3 +1,40 @@
 import React from 'react';
-export declare const SidebarRoot: ({ className, ...props }: React.ComponentProps<"nav">) => React.JSX.Element;
+export type SidebarRootProps = React.ComponentProps<'nav'> & {
+    /**
+     * What this rail becomes below 768px.
+     *
+     * - `'inline'` (default): nothing changes. The rail renders at every
+     *   viewport exactly as it always has, and the reader's collapsed preference
+     *   is untouched.
+     * - `'drawer'`: the inline rail is not rendered below the breakpoint and the
+     *   navigation moves into an overlay drawer that `SidebarTrigger` opens.
+     *
+     * ⛔ THE DEFAULT IS NOT A TASTE, IT IS A CONSUMER-SAFETY RULE. `SidebarTrigger`
+     * is the only way back into the drawer and it must render inside
+     * `SidebarProvider`. A consumer that has not placed one yet — which is every
+     * consumer at the moment this shipped — would get a phone with NO navigation
+     * rather than a rail that takes 63% of it, and that is strictly worse. Opt in
+     * once there is somewhere to put the trigger.
+     */
+    mobile?: 'inline' | 'drawer';
+    /**
+     * The drawer's accessible name. A dialog needs one, and it is read out when
+     * the drawer opens. Unused while `mobile` is `'inline'`.
+     */
+    mobileTitle?: string;
+};
+/**
+ * ⛔ BELOW 768px A RAIL IS NOT A LAYOUT — once a consumer opts in.
+ *
+ * The widths above are a fixed share of a flex row, so at 390px the expanded
+ * rail took 63% of the screen and left the page 146px, and the only affordance
+ * — `SidebarExpandButton` — shrinks it to 72px, which is still 18% and still
+ * permanently on screen. There was nothing that removed it.
+ *
+ * With `mobile="drawer"` the rail is replaced below the breakpoint by an
+ * overlay drawer. Escape, the backdrop click, the focus trap and returning
+ * focus to whatever opened it are Radix Dialog's, through the kit's own
+ * `Sheet`; none of that is re-implemented here.
+ */
+export declare const SidebarRoot: ({ className, id, mobile, mobileTitle, ...props }: SidebarRootProps) => React.JSX.Element;
 //# sourceMappingURL=sidebar-root.d.ts.map

package/dist/components/ui/sidebar/sidebar-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-root.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAoBzB,eAAO,MAAM,WAAW,GAAI,yBAGzB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,sBAW7B,CAAA"}
+{"version":3,"file":"sidebar-root.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAqEzB,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,GAAI,kDAMzB,gBAAgB,sBA0GlB,CAAA"}