@lerianstudio/sindarian-ui 2.0.0-beta.25 → 2.0.0-beta.26

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

@@ -1,49 +1 @@
-'use client';
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarExpandButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const lucide_react_1 = require("lucide-react");
-const sidebar_provider_1 = require("./sidebar-provider");
-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, 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;
+"use client";"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{"default":e}};Object.defineProperty(exports,"__esModule",{value:true});exports.SidebarExpandButton=void 0;const jsx_runtime_1=require("react/jsx-runtime");const react_1=__importDefault(require("react"));const lucide_react_1=require("lucide-react");const sidebar_provider_1=require("./sidebar-provider");const sidebar_components_1=require("./sidebar-components");const tooltip_1=require("../../ui/tooltip");const icon_button_1=require("../icon-button");const SidebarExpandButton=({tooltip:e})=>{const{isCollapsed:r,isDrawer:o,toggleSidebar:t}=(0,sidebar_provider_1.useSidebar)();if(o){return null}return(0,jsx_runtime_1.jsxs)(react_1.default.Fragment,{children:[!r&&(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:t,"aria-label":e||"Collapse sidebar","aria-expanded":true,children:(0,jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose,{className:"text-muted-foreground"})})})}),r&&(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-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-sm bg-transparent p-2",onClick:t,"aria-label":e||"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:e||"Expand"})]})})})]})};exports.SidebarExpandButton=SidebarExpandButton;

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

@@ -1,21 +1 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarItemButton = SidebarItemButton;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const button_1 = require("../../ui/button");
-const utils_1 = require("../../../lib/utils");
-const sidebar_router_1 = require("./sidebar-router");
-function SidebarItemButton({ className, title, icon, href, active, inactive, disabled = false, ...props }) {
-    const { Link } = (0, sidebar_router_1.useSidebarRouter)();
-    const sharedClassName = (0, utils_1.cn)((0, button_1.buttonVariants)({
-        variant: active ? 'tertiary' : 'outline',
-        fullWidth: true,
-        size: 'small'
-    }), 'group/link flex items-center justify-start', inactive && 'hover:border-transparent', disabled && 'cursor-default opacity-30', className);
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)((0, button_1.iconVariants)({ position: 'start', size: 'small' })), children: icon })), title] }));
-    if (disabled || inactive) {
-        return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sidebar-item-button", className: sharedClassName, children: content }));
-    }
-    return ((0, jsx_runtime_1.jsx)(Link, { "data-slot": "sidebar-item-button", href: href, className: sharedClassName, ...props, children: content }));
-}
+"use client";"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.SidebarItemButton=SidebarItemButton;const jsx_runtime_1=require("react/jsx-runtime");const button_1=require("../../ui/button");const utils_1=require("../../../lib/utils");const sidebar_router_1=require("./sidebar-router");function SidebarItemButton({className:n,title:a,icon:t,href:u,active:o,inactive:e,disabled:r=false,...l}){const{Link:c}=(0,sidebar_router_1.useSidebarRouter)();const s=(0,utils_1.cn)((0,button_1.buttonVariants)({variant:o?"tertiary":"outline",fullWidth:true,size:"small"}),"group/link flex items-center justify-start",e&&"hover:border-transparent",r&&"cursor-default opacity-30",n);const i=(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[t&&(0,jsx_runtime_1.jsx)("span",{className:(0,utils_1.cn)((0,button_1.iconVariants)({position:"start",size:"small"})),children:t}),a]});if(r||e){return(0,jsx_runtime_1.jsx)("div",{"data-slot":"sidebar-item-button",className:s,children:i})}return(0,jsx_runtime_1.jsx)(c,{"data-slot":"sidebar-item-button",href:u,className:s,...l,children:i})}

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

@@ -1,52 +1 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarItemCollapsible = SidebarItemCollapsible;
-exports.SidebarItemCollapsibleTrigger = SidebarItemCollapsibleTrigger;
-exports.SidebarItemCollapsibleContent = SidebarItemCollapsibleContent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("../../../lib/utils");
-const react_collapsible_1 = require("@radix-ui/react-collapsible");
-const lucide_react_1 = require("lucide-react");
-const sidebar_provider_1 = require("./sidebar-provider");
-const separator_1 = require("../separator");
-const sidebar_item_button_1 = require("./sidebar-item-button");
-const button_1 = require("../button");
-const sidebar_item_icon_button_1 = require("./sidebar-item-icon-button");
-function SidebarItemCollapsible({ name, className, ...props }) {
-    const { isCollapsed, getItemCollapsed, setItemCollapsed } = (0, sidebar_provider_1.useSidebar)();
-    const [open, setOpen] = react_1.default.useState(name ? getItemCollapsed(name) : false);
-    const handleOpenChange = (open) => {
-        setOpen(open);
-        if (name) {
-            setItemCollapsed(name, open);
-        }
-    };
-    react_1.default.useEffect(() => {
-        if (name) {
-            setOpen(getItemCollapsed(name));
-        }
-    }, [name, getItemCollapsed]);
-    return ((0, jsx_runtime_1.jsx)(react_collapsible_1.Collapsible, { open: open, onOpenChange: handleOpenChange, "data-slot": "sidebar-item-collapsible", className: (0, utils_1.cn)({
-            'rounded-md': isCollapsed
-        }, className), ...props }));
-}
-function SidebarItemCollapsibleTrigger({ className, icon, title, children: _children, ...props }) {
-    const { isCollapsed } = (0, sidebar_provider_1.useSidebar)();
-    return ((0, jsx_runtime_1.jsxs)(react_collapsible_1.CollapsibleTrigger, { "data-slot": "sidebar-item-collapsible-trigger", className: (0, utils_1.cn)('flex w-full flex-row p-0', 'transition-all hover:underline [&[data-state=open]>svg]:rotate-90', (0, button_1.buttonVariants)({
-            variant: 'outline',
-            fullWidth: true,
-            size: 'small'
-        }), {
-            'size-10': isCollapsed
-        }, className), ...props, children: [isCollapsed && ((0, jsx_runtime_1.jsx)(sidebar_item_icon_button_1.SidebarItemIconButton, { title: title, icon: icon, href: "", inactive: true })), !isCollapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(sidebar_item_button_1.SidebarItemButton, { title: title, icon: icon, href: '', inactive: true }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "text-foreground mr-1 size-6 shrink-0 cursor-pointer transition-transform duration-200" })] }))] }));
-}
-function SidebarItemCollapsibleContent({ className, children, ...props }) {
-    const { isCollapsed } = (0, sidebar_provider_1.useSidebar)();
-    return ((0, jsx_runtime_1.jsx)(react_collapsible_1.CollapsibleContent, { "data-slot": "sidebar-item-collapsible-content", className: (0, utils_1.cn)('mt-1 flex flex-col gap-1', 'motion-safe:data-[state=closed]:animate-collapsible-up motion-safe:data-[state=open]:animate-collapsible-down overflow-hidden transition-all duration-200 ease-in-out', {
-            'items-center': isCollapsed
-        }, className), ...props, children: isCollapsed ? (children) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-stretch gap-3", children: [(0, jsx_runtime_1.jsx)(separator_1.Separator, { className: "ml-5 h-auto", orientation: "vertical" }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-1", children: children })] })) }));
-}
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{"default":e}};Object.defineProperty(exports,"__esModule",{value:true});exports.SidebarItemCollapsible=SidebarItemCollapsible;exports.SidebarItemCollapsibleTrigger=SidebarItemCollapsibleTrigger;exports.SidebarItemCollapsibleContent=SidebarItemCollapsibleContent;const jsx_runtime_1=require("react/jsx-runtime");const react_1=__importDefault(require("react"));const utils_1=require("../../../lib/utils");const react_collapsible_1=require("@radix-ui/react-collapsible");const lucide_react_1=require("lucide-react");const sidebar_provider_1=require("./sidebar-provider");const separator_1=require("../separator");const sidebar_item_button_1=require("./sidebar-item-button");const button_1=require("../button");const sidebar_item_icon_button_1=require("./sidebar-item-icon-button");function SidebarItemCollapsible({name:e,className:t,...i}){const{isCollapsed:r,getItemCollapsed:s,setItemCollapsed:a}=(0,sidebar_provider_1.useSidebar)();const[n,l]=react_1.default.useState(e?s(e):false);const c=o=>{l(o);if(e){a(e,o)}};react_1.default.useEffect(()=>{if(e){l(s(e))}},[e,s]);return(0,jsx_runtime_1.jsx)(react_collapsible_1.Collapsible,{open:n,onOpenChange:c,"data-slot":"sidebar-item-collapsible",className:(0,utils_1.cn)({"rounded-md":r},t),...i})}function SidebarItemCollapsibleTrigger({className:e,icon:t,title:i,children:r,...s}){const{isCollapsed:a}=(0,sidebar_provider_1.useSidebar)();return(0,jsx_runtime_1.jsxs)(react_collapsible_1.CollapsibleTrigger,{"data-slot":"sidebar-item-collapsible-trigger",className:(0,utils_1.cn)("flex w-full flex-row p-0","transition-all hover:underline [&[data-state=open]>svg]:rotate-90",(0,button_1.buttonVariants)({variant:"outline",fullWidth:true,size:"small"}),{"size-10":a},e),...s,children:[a&&(0,jsx_runtime_1.jsx)(sidebar_item_icon_button_1.SidebarItemIconButton,{title:i,icon:t,href:"",inactive:true}),!a&&(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(sidebar_item_button_1.SidebarItemButton,{title:i,icon:t,href:"",inactive:true}),(0,jsx_runtime_1.jsx)(lucide_react_1.ChevronRight,{className:"text-foreground mr-1 size-6 shrink-0 cursor-pointer transition-transform duration-200"})]})]})}function SidebarItemCollapsibleContent({className:e,children:t,...i}){const{isCollapsed:r}=(0,sidebar_provider_1.useSidebar)();return(0,jsx_runtime_1.jsx)(react_collapsible_1.CollapsibleContent,{"data-slot":"sidebar-item-collapsible-content",className:(0,utils_1.cn)("mt-1 flex flex-col gap-1","motion-safe:data-[state=closed]:animate-collapsible-up motion-safe:data-[state=open]:animate-collapsible-down overflow-hidden transition-all duration-200 ease-in-out",{"items-center":r},e),...i,children:r?t:(0,jsx_runtime_1.jsxs)("div",{className:"flex items-stretch gap-3",children:[(0,jsx_runtime_1.jsx)(separator_1.Separator,{className:"ml-5 h-auto",orientation:"vertical"}),(0,jsx_runtime_1.jsx)("div",{className:"flex w-full flex-col gap-1",children:t})]})})}

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

@@ -1,18 +1 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarItemIconButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const button_1 = require("../../ui/button");
-const tooltip_1 = require("../../ui/tooltip");
-const utils_1 = require("../../../lib/utils");
-const icon_button_1 = require("../icon-button");
-const sidebar_router_1 = require("./sidebar-router");
-const SidebarItemIconButton = ({ className, title, icon, href, active, inactive, disabled, ...props }) => {
-    const { Link } = (0, sidebar_router_1.useSidebarRouter)();
-    const sharedClassName = (0, utils_1.cn)((0, button_1.buttonVariants)({
-        variant: active ? 'tertiary' : 'outline'
-    }), (0, icon_button_1.iconButtonVariants)(), inactive && 'hover:border-transparent', disabled && 'cursor-default opacity-30', className);
-    return ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { delayDuration: 0, children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { asChild: true, children: disabled || inactive ? ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sidebar-item-icon-button", className: sharedClassName, children: icon })) : ((0, jsx_runtime_1.jsx)(Link, { "data-slot": "sidebar-item-icon-button", href: href, className: sharedClassName, ...props, children: icon })) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { side: "right", children: title })] }) }));
-};
-exports.SidebarItemIconButton = SidebarItemIconButton;
+"use client";"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.SidebarItemIconButton=void 0;const jsx_runtime_1=require("react/jsx-runtime");const button_1=require("../../ui/button");const tooltip_1=require("../../ui/tooltip");const utils_1=require("../../../lib/utils");const icon_button_1=require("../icon-button");const sidebar_router_1=require("./sidebar-router");const SidebarItemIconButton=({className:i,title:n,icon:t,href:s,active:u,inactive:e,disabled:r,...a})=>{const{Link:c}=(0,sidebar_router_1.useSidebarRouter)();const o=(0,utils_1.cn)((0,button_1.buttonVariants)({variant:u?"tertiary":"outline"}),(0,icon_button_1.iconButtonVariants)(),e&&"hover:border-transparent",r&&"cursor-default opacity-30",i);return(0,jsx_runtime_1.jsx)(tooltip_1.TooltipProvider,{children:(0,jsx_runtime_1.jsxs)(tooltip_1.Tooltip,{delayDuration:0,children:[(0,jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger,{asChild:true,children:r||e?(0,jsx_runtime_1.jsx)("div",{"data-slot":"sidebar-item-icon-button",className:o,children:t}):(0,jsx_runtime_1.jsx)(c,{"data-slot":"sidebar-item-icon-button",href:s,className:o,...a,children:t})}),(0,jsx_runtime_1.jsx)(tooltip_1.TooltipContent,{side:"right",children:n})]})})};exports.SidebarItemIconButton=SidebarItemIconButton;

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

@@ -1,44 +1 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-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, onClick, ...props }) => {
-    const { usePathname } = (0, sidebar_router_1.useSidebarRouter)();
-    const pathname = usePathname();
-    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, onClick: handleClick, ...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;
+"use client";"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.SidebarItem=void 0;const jsx_runtime_1=require("react/jsx-runtime");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:r,href:e,children:_,onClick:n,...i})=>{const{usePathname:a}=(0,sidebar_router_1.useSidebarRouter)();const d=a();const{isCollapsed:u,isDrawer:c,setOpenMobile:b}=(0,sidebar_provider_1.useSidebar)();const s=t=>d===t;const o=t=>{n?.(t);if(c){b(false)}};if(u){return(0,jsx_runtime_1.jsx)(sidebar_item_icon_button_1.SidebarItemIconButton,{"data-slot":"sidebar-item",href:e,active:s(e)||r,onClick:o,...i})}return(0,jsx_runtime_1.jsx)(sidebar_item_button_1.SidebarItemButton,{"data-slot":"sidebar-item",href:e,active:s(e)||r,onClick:o,...i})};exports.SidebarItem=SidebarItem;

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

@@ -1,201 +1 @@
-'use client';
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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");
-/**
- * The viewport below which the rail stops being a layout and becomes a drawer.
- *
- * ⛔ THE NEGATION OF THE TRIGGER'S QUERY, SPELLED AS A NEGATION.
- *
- * `SidebarTrigger` hides itself at `min-[768px]`, which is `width >= 768`. This
- * is its exact complement AT ANY PRECISION, which `(max-width: 767px)` was not:
- * that pair leaves the open interval (767, 768) matched by neither rule, and a
- * viewport there draws the rail AND a hamburger that opens nothing — with the
- * rail inline, `SidebarRoot` mounts no `Sheet`, so the control is dead. Chromium
- * snaps its layout viewport to a whole pixel and never lands there, measured at
- * four zoom levels; that is a rounding behaviour to rely on, not a boundary.
- *
- * ⚠️ THE PAIR HAS TO BE IN THE SAME UNIT. It used to be `md:hidden` over there,
- * and `md` is 48rem: rem in a media query follows the BROWSER'S default font
- * size, so at Chrome's "Small" setting that class hid the hamburger from 576px
- * while this query still asked for a drawer up to 767px — a band of viewports
- * with no navigation at all. Anything else that hides or shows a control at
- * this boundary states it in pixels for the same reason.
- *
- * Media Queries Level 4 boolean logic, which is not a new requirement here:
- * Tailwind v4 emits MQ4 RANGE syntax for everything this package ships —
- * `min-[768px]` on the trigger compiles to `@media (width >= 768px)` and
- * `max-sm:` on `SheetContent` to `@media (width < 40rem)` — and range syntax
- * and boolean `not` landed in the same browsers (Chrome 88, Firefox 64,
- * Safari 16.4). `(width < 768px)` is the equivalent range spelling of this
- * line, should a reader prefer the pair to match character for character.
- */
-exports.SIDEBAR_MOBILE_QUERY = 'not (min-width: 768px)';
-/**
- * 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(exports.SidebarContext);
-    if (!context) {
-        throw new Error('useSidebar must be used within a SidebarProvider');
-    }
-    return context;
-};
-exports.useSidebar = useSidebar;
-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.
-        // `.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;
-    };
-    const setItemCollapsed = (key, value) => {
-        _setItems((items) => ({ ...items, [key]: value }));
-    };
-    // Read from localStorage after hydration to avoid SSR mismatch
-    react_1.default.useEffect(() => {
-        setCollapsed((0, storage_1.getStorage)('sidebar-collapsed', false) === 'true');
-        _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) {
-            return;
-        }
-        localStorage.setItem('sidebar-collapsed', JSON.stringify(collapsed));
-    }, [collapsed, hydrated]);
-    react_1.default.useEffect(() => {
-        if (!hydrated) {
-            return;
-        }
-        localStorage.setItem('sidebar-items', JSON.stringify(items));
-    }, [items, hydrated]);
-    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,
-            setItemCollapsed,
-            toggleSidebar
-        }, children: children }));
-};
-exports.SidebarProvider = SidebarProvider;
+"use client";"use strict";var __importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{"default":t}};Object.defineProperty(exports,"__esModule",{value:true});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");exports.SIDEBAR_MOBILE_QUERY="not (min-width: 768px)";const FOCUSABLE="a[href], button:not([disabled])";exports.SidebarContext=react_1.default.createContext(void 0);const useSidebar=()=>{const t=react_1.default.useContext(exports.SidebarContext);if(!t){throw new Error("useSidebar must be used within a SidebarProvider")}return t};exports.useSidebar=useSidebar;const SidebarProvider=({children:t})=>{const[r,b]=react_1.default.useState(false);const[n,l]=react_1.default.useState(false);const[a,u]=react_1.default.useState({});const[o,S]=react_1.default.useState(false);const[p,c]=react_1.default.useState(false);const i=react_1.default.useId();const d=react_1.default.useRef(null);const x=react_1.default.useCallback(e=>{if(e&&typeof document!=="undefined"){d.current=document.activeElement}c(e)},[]);const f=react_1.default.useRef(false);f.current=o;const m=react_1.default.useCallback(()=>{if(f.current&&d.current?.isConnected){d.current.focus();return}document.getElementById(i)?.querySelector(FOCUSABLE)?.focus()},[i]);const E=()=>l(e=>!e);const _=e=>{return a[e]||false};const g=(e,s)=>{u(I=>({...I,[e]:s}))};react_1.default.useEffect(()=>{l((0,storage_1.getStorage)("sidebar-collapsed",false)==="true");u((0,storage_1.getStorageObject)("sidebar-items",{}));b(true)},[]);react_1.default.useEffect(()=>{if(typeof window.matchMedia!=="function"){return}const e=window.matchMedia(exports.SIDEBAR_MOBILE_QUERY);const s=()=>S(e.matches);s();e.addEventListener("change",s);return()=>e.removeEventListener("change",s)},[]);react_1.default.useEffect(()=>{if(!o){c(false)}},[o]);react_1.default.useEffect(()=>{if(!r){return}localStorage.setItem("sidebar-collapsed",JSON.stringify(n))},[n,r]);react_1.default.useEffect(()=>{if(!r){return}localStorage.setItem("sidebar-items",JSON.stringify(a))},[a,r]);return(0,jsx_runtime_1.jsx)(exports.SidebarContext.Provider,{value:{isCollapsed:n,isDrawer:false,isMobile:o,openMobile:p,setOpenMobile:x,restoreDrawerFocus:m,sidebarId:i,items:a,setItems:u,getItemCollapsed:_,setItemCollapsed:g,toggleSidebar:E},children:t})};exports.SidebarProvider=SidebarProvider;

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

@@ -1,130 +1 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarRoot = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const class_variance_authority_1 = require("class-variance-authority");
-const sidebar_provider_1 = require("./sidebar-provider");
-const utils_1 = require("../../../lib/utils");
-const sheet_1 = require("../sheet");
-/**
- * ⛔ THE WIDTHS ARE TOKENS, NOT LITERALS.
- *
- * They were `w-[72px]` and `w-[244px]`, which a consumer could only override by
- * winning a specificity argument with `cn`. `--sidebar-width` and
- * `--sidebar-width-collapsed` are declared in `tokens.css`, so the default
- * still ships with the stylesheet, and a consumer re-points either one with
- * `className="[--sidebar-width:280px]"` ON THE RAIL, which moves the rail and
- * the mobile drawer together (see `liftWidthOverrides` below), or with a rule
- * on `:root`/`html`.
- *
- * ⚠️ A DECLARATION ON A REACT-TREE ANCESTOR REACHES THE RAIL AND NOT THE
- * DRAWER. Custom properties inherit down the DOM tree, and the drawer is
- * portalled to `document.body`, so a layout wrapper is not an ancestor of it.
- * `:root` is, which is why it is named above and a wrapper is not.
- */
-const sidebarVariants = (0, class_variance_authority_1.cva)('group/sidebar shadow-sidebar relative flex flex-col transition-[width] duration-300 ease-in-out', {
-    variants: {
-        collapsed: {
-            true: 'w-[var(--sidebar-width-collapsed)]',
-            false: 'w-[var(--sidebar-width)]'
-        }
-    },
-    defaultVariants: {
-        collapsed: false
-    }
-});
-/**
- * Tailwind arbitrary-property classes that re-point the sidebar geometry, e.g.
- * `[--sidebar-width:320px]` or `[--sidebar-width-collapsed:88px]`.
- *
- * ⚠️ ANCHORED TO A CLASS BOUNDARY, WHICH IS THE WHOLE POINT OF THE LOOKBEHIND.
- * Unanchored it also matched the tail of `md:[--sidebar-width:320px]` and
- * lifted it with the prefix stripped — an override a consumer scoped to
- * ≥768px, applied unconditionally to the drawer that only exists below it.
- */
-const WIDTH_OVERRIDE = /(?<=^|\s)\[--sidebar-width(?:-collapsed)?:[^\]]+\]/g;
-/**
- * ⛔ THE ONE PART OF THE CONSUMER'S className THAT HAS TO CROSS THE PORTAL.
- *
- * `SheetContent` mounts through `SheetPortal` into `document.body`, and custom
- * properties inherit down the DOM tree rather than the React tree. So the
- * documented override — a class on the rail — set `--sidebar-width` on an
- * element the drawer is not a descendant of, and the whole className that DOES
- * travel lands on the inner `<nav>`, which is BELOW the element that reads the
- * variable. Measured in Chromium: rail 320px, drawer 244px. Following the
- * instruction handed to product-console produced a 280px rail on desktop and a
- * 244px drawer on a phone, silently.
- *
- * ⚠️ ONLY THE GEOMETRY TOKENS. The rest of a rail className is rail-shaped —
- * `h-full`, and the `data-[collapsed=false]:min-w-70` all eight console
- * sidebars pass — and putting that on the sheet would reinstate the
- * 280px-inside-a-244px-sheet overflow from the other side.
- */
-function liftWidthOverrides(className) {
-    return className?.match(WIDTH_OVERRIDE)?.join(' ');
-}
-/**
- * ⛔ 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.
- */
-const SidebarRoot = ({ className, id, mobile = 'inline', mobileTitle = 'Navigation', mobileCloseLabel = 'Close', ...props }) => {
-    const context = (0, sidebar_provider_1.useSidebar)();
-    const { isCollapsed, isMobile, openMobile, setOpenMobile, restoreDrawerFocus, sidebarId } = context;
-    if (!isMobile || mobile === 'inline') {
-        return ((0, jsx_runtime_1.jsx)("nav", { "data-slot": "sidebar-root", className: (0, utils_1.cn)(sidebarVariants({ collapsed: isCollapsed }), className), "data-collapsed": isCollapsed, ...props, id: mobile === 'drawer' ? sidebarId : id }));
-    }
-    return ((0, jsx_runtime_1.jsx)(sidebar_provider_1.SidebarContext.Provider, { value: { ...context, isCollapsed: false, isDrawer: true }, children: (0, jsx_runtime_1.jsx)(sheet_1.Sheet, { open: openMobile, onOpenChange: setOpenMobile, children: (0, jsx_runtime_1.jsxs)(sheet_1.SheetContent, { side: "left", closeLabel: mobileCloseLabel, 
-                // The Sheet's own paddings are built for a form panel; a rail brings
-                // its own. `max-w-full` so a consumer widening `--sidebar-width` past
-                // the viewport still cannot push the drawer off screen. The lifted
-                // override goes LAST so it re-points the variable this element reads.
-                //
-                // ⛔ THE `max-sm:` PAIR IS NOT A DUPLICATE. `SheetContent` grew a
-                // phone step — `max-sm:w-full max-sm:px-4` — because a form panel at
-                // two fifths of a 390px screen is unreadable. A NAVIGATION drawer is
-                // the one panel that must not take it: 244px over a dimmed page is
-                // the design, and full-bleed removes the tap-outside-to-close target
-                // that every other way out of this drawer is an alternative to.
-                // tailwind-merge drops a conflicting class only when the modifiers
-                // match, so a bare `w-[…]` cannot reach `max-sm:w-full` and these two
-                // tokens are what state the exemption. Measured: without them the
-                // drawer is 390px wide with 16px of inset on a 390px phone.
-                className: (0, utils_1.cn)('w-[var(--sidebar-width)] max-w-full gap-0 p-0 max-sm:w-[var(--sidebar-width)] max-sm:p-0', liftWidthOverrides(className)), "aria-describedby": undefined, 
-                // ⛔ RADIX'S OWN RESTORE GOES NOWHERE HERE. `DialogContent`
-                // preventDefaults the focus scope's restore and focuses the ref a
-                // `SheetTrigger` would have filled; this drawer is opened from provider
-                // state, so that ref is null and closing dropped focus onto `<body>`.
-                // Running first means `composeEventHandlers` skips Radix's half.
-                onCloseAutoFocus: (event) => {
-                    event.preventDefault();
-                    restoreDrawerFocus();
-                }, children: [(0, jsx_runtime_1.jsx)(sheet_1.SheetTitle, { className: "sr-only", children: mobileTitle }), (0, jsx_runtime_1.jsx)("nav", { "data-slot": "sidebar-root", "data-mobile": "true", 
-                        /* ⛔ NO `data-collapsed` HERE. The consumer className is forwarded
-                           verbatim, and all eight console sidebars pass
-                           `data-[collapsed=false]:min-w-70`; stamping the attribute armed
-                           it, giving the navigation a 280px min-width inside a 244px sheet.
-                           `min-width` resolves after `max-width`, so the sheet could not
-                           claw it back and the contents were 36px wider than the drawer.
-                           `data-mobile` already names this surface and a drawer is never
-                           collapsed, so the attribute had nothing left to say. */
-                        className: (0, utils_1.cn)(sidebarVariants({ collapsed: false }), 'h-full w-full shadow-none', className), ...props, 
-                        /* ⛔ AFTER THE SPREAD, AND NOT THE CALLER'S. This is the target of
-                           `SidebarTrigger`'s `aria-controls` and the handle the provider
-                           uses to put focus back into the navigation when the viewport
-                           grows. Spread first, a caller that set `id` replaced it and left
-                           a dangling `aria-controls` — which axe reports as a CRITICAL
-                           `aria-valid-attr-value` — and a focus restore that lands on
-                           `<body>`. Both silent. */
-                        id: sidebarId })] }) }) }));
-};
-exports.SidebarRoot = SidebarRoot;
+"use client";"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.SidebarRoot=void 0;const jsx_runtime_1=require("react/jsx-runtime");const class_variance_authority_1=require("class-variance-authority");const sidebar_provider_1=require("./sidebar-provider");const utils_1=require("../../../lib/utils");const sheet_1=require("../sheet");const sidebarVariants=(0,class_variance_authority_1.cva)("group/sidebar shadow-sidebar relative flex flex-col transition-[width] duration-300 ease-in-out",{variants:{collapsed:{true:"w-[var(--sidebar-width-collapsed)]",false:"w-[var(--sidebar-width)]"}},defaultVariants:{collapsed:false}});const WIDTH_OVERRIDE=/(?<=^|\s)\[--sidebar-width(?:-collapsed)?:[^\]]+\]/g;function liftWidthOverrides(e){return e?.match(WIDTH_OVERRIDE)?.join(" ")}const SidebarRoot=({className:e,id:o,mobile:s="inline",mobileTitle:l="Navigation",mobileCloseLabel:d="Close",...a})=>{const r=(0,sidebar_provider_1.useSidebar)();const{isCollapsed:i,isMobile:n,openMobile:c,setOpenMobile:u,restoreDrawerFocus:b,sidebarId:t}=r;if(!n||s==="inline"){return(0,jsx_runtime_1.jsx)("nav",{"data-slot":"sidebar-root",className:(0,utils_1.cn)(sidebarVariants({collapsed:i}),e),"data-collapsed":i,...a,id:s==="drawer"?t:o})}return(0,jsx_runtime_1.jsx)(sidebar_provider_1.SidebarContext.Provider,{value:{...r,isCollapsed:false,isDrawer:true},children:(0,jsx_runtime_1.jsx)(sheet_1.Sheet,{open:c,onOpenChange:u,children:(0,jsx_runtime_1.jsxs)(sheet_1.SheetContent,{side:"left",closeLabel:d,className:(0,utils_1.cn)("w-[var(--sidebar-width)] max-w-full gap-0 p-0 max-sm:w-[var(--sidebar-width)] max-sm:p-0",liftWidthOverrides(e)),"aria-describedby":void 0,onCloseAutoFocus:h=>{h.preventDefault();b()},children:[(0,jsx_runtime_1.jsx)(sheet_1.SheetTitle,{className:"sr-only",children:l}),(0,jsx_runtime_1.jsx)("nav",{"data-slot":"sidebar-root","data-mobile":"true",className:(0,utils_1.cn)(sidebarVariants({collapsed:false}),"h-full w-full shadow-none",e),...a,id:t})]})})})};exports.SidebarRoot=SidebarRoot;