tembro 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.0.2 - 2026-07-08
+
+### Changed
+
+- rebuilt `AppSidebar` into a responsive navigation surface with automatic mobile drawer behavior, overlay dismissal, escape handling, and close-on-select flow
+- refreshed the `AppSidebar` and `AppShell` showcase demos so mobile and desktop sidebar behavior are both visible from the docs surface
+- synced CLI vendor copies and added navigation render coverage for the new responsive sidebar contract
+
 ## 1.0.0 - 2026-07-08
 
 ### Changed

package/dist/components/layout/app-sidebar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/tooltip/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a(e){return e.items?.some(e=>!e.hidden)??!1}function o(e){return e.active?!0:e.items?.some(e=>o(e))??!1}function s({item:e,collapsed:r,depth:a,onItemSelect:o,renderLink:s}){let c={"aria-current":e.current??(e.active?`page`:void 0),"aria-disabled":e.disabled||void 0,"data-slot":`app-sidebar-item`,"data-active":e.active||void 0,"data-disabled":e.disabled||void 0,"data-depth":String(a),className:t.cn(`flex min-h-9 items-center gap-2 rounded-lg border border-transparent px-2.5 text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50`,r&&`justify-center px-2`)},l=(0,i.jsxs)(i.Fragment,{children:[e.icon&&(0,i.jsx)(`span`,{className:`shrink-0`,children:e.icon}),!r&&(0,i.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!r&&e.badge&&(0,i.jsx)(`span`,{className:`shrink-0`,children:e.badge})]}),u=t=>r?(0,i.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,i.jsx)(`span`,{className:`block`,children:t})}):t;return e.href?.startsWith(`/`)?u(s?(0,i.jsx)(i.Fragment,{children:s({item:e,href:e.href,...c,onClick:t=>{if(e.disabled){t.preventDefault();return}e.onSelect?.(),o?.(e)},children:l})}):(0,i.jsx)(`a`,{href:e.href,...c,onClick:t=>{if(e.disabled){t.preventDefault();return}e.onSelect?.(),o?.(e)},children:l})):e.href?u((0,i.jsx)(`button`,{type:`button`,...c,className:t.cn(c.className,`w-full`),onClick:()=>{if(e.disabled)return;let t=e.href;if(t){if(e.onSelect?.(),o?.(e),t.startsWith(`http`)){window.open(t,`_blank`,`noopener,noreferrer`);return}window.location.assign(t)}},children:l})):u((0,i.jsx)(`button`,{type:`button`,disabled:e.disabled,...c,onClick:()=>{e.onSelect?.(),o?.(e)},children:l}))}function c({items:e,collapsed:l,depth:u,onItemSelect:d,renderLink:f}){return e.map(e=>{if(e.hidden)return null;let p=a(e),m=o(e),h=!l&&u===0&&e.sectionLabel;if(!p)return(0,i.jsxs)(r.Fragment,{children:[h?(0,i.jsx)(`div`,{"data-slot":`app-sidebar-group-label`,className:`px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0`,children:e.sectionLabel}):null,(0,i.jsx)(s,{item:e,collapsed:l,depth:u,onItemSelect:d,renderLink:f})]},e.key);let g=e.defaultExpanded??m;return(0,i.jsxs)(`div`,{"data-slot":`app-sidebar-group`,"data-depth":u,children:[h&&(0,i.jsx)(`div`,{"data-slot":`app-sidebar-group-label`,className:`px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0`,children:e.sectionLabel}),(0,i.jsxs)(`details`,{"data-slot":`app-sidebar-group-details`,open:g,className:`group/app-sidebar-details`,children:[(0,i.jsxs)(`summary`,{"data-slot":`app-sidebar-group-trigger`,className:t.cn(`flex min-h-9 list-none items-center gap-2 rounded-lg border border-transparent text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow]`,l?`justify-center px-2`:`px-2.5`),children:[e.icon?l?(0,i.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,i.jsx)(`span`,{className:`shrink-0`,children:e.icon})}):(0,i.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,!l&&(0,i.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!l&&e.badge&&(0,i.jsx)(`span`,{className:`shrink-0`,children:e.badge}),!l&&(0,i.jsx)(`span`,{"data-slot":`app-sidebar-group-chevron`,className:`ml-auto text-xs text-muted-foreground transition-transform group-open/app-sidebar-details:rotate-90`,children:`›`})]}),(0,i.jsx)(`div`,{"data-slot":`app-sidebar-group-content`,className:t.cn(`mt-1 space-y-1`,!l&&`pl-3`),children:(0,i.jsx)(c,{items:e.items??[],collapsed:l,depth:u+1,onItemSelect:d,renderLink:f})})]})]},e.key)})}function l({item:e,collapsed:r,onItemSelect:a}){let o=(0,i.jsxs)(`button`,{type:`button`,"data-slot":`app-sidebar-action`,"data-active":e.active||void 0,"data-disabled":e.disabled||void 0,className:t.cn(`flex min-h-9 items-center gap-2 rounded-lg border border-transparent px-2.5 text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50`,r&&`justify-center px-2`),disabled:e.disabled,onClick:()=>{e.disabled||(e.onSelect?.(),a?.(e))},children:[e.icon?(0,i.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,r?null:(0,i.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!r&&e.badge?(0,i.jsx)(`span`,{className:`shrink-0`,children:e.badge}):null]});return r?(0,i.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,i.jsx)(`span`,{className:`block`,children:o})}):o}function u({account:e,collapsed:r}){let a=(0,i.jsxs)(`button`,{type:`button`,"data-slot":`app-sidebar-account`,className:t.cn(`flex w-full items-center gap-3 rounded-[min(var(--radius-xl),16px)] border border-transparent text-left transition-[background-color,border-color,color,box-shadow]`,r?`justify-center px-2 py-2.5`:`px-3 py-2.5`),onClick:()=>{if(e.onSelect?.(),e.href){if(e.href.startsWith(`http`)){window.open(e.href,`_blank`,`noopener,noreferrer`);return}window.location.assign(e.href)}},children:[e.avatar?(0,i.jsx)(`span`,{"data-slot":`app-sidebar-account-avatar`,className:`inline-flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border/65 bg-muted/45 text-sm font-semibold`,children:e.avatar}):null,r?null:(0,i.jsxs)(`span`,{className:`min-w-0 flex-1`,children:[(0,i.jsx)(`span`,{"data-slot":`app-sidebar-account-label`,className:`block truncate text-sm font-semibold text-foreground`,children:e.label}),e.description?(0,i.jsx)(`span`,{"data-slot":`app-sidebar-account-description`,className:`block truncate text-xs text-muted-foreground`,children:e.description}):null]})]});return r?(0,i.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,i.jsx)(`span`,{className:`block`,children:a})}):a}function d({className:e,header:a,footer:o,items:s=[],collapsed:d=!1,collapsedRail:f,railItems:p=[],footerAccount:m,secondaryActions:h=[],footerSecondary:g,tooltipOnCollapsed:_=!0,onItemSelect:v,renderItem:y,renderLink:b,children:x,...S}){let C=s.filter(e=>!e.hidden),w=p.filter(e=>!e.hidden),T=h.filter(e=>!e.hidden);return(0,i.jsxs)(`aside`,{"data-slot":`app-sidebar`,"data-collapsed":d||void 0,className:t.cn(`flex h-full min-h-0 flex-col overflow-hidden`,e),...S,children:[a&&(0,i.jsx)(`div`,{"data-slot":`app-sidebar-header`,className:`shrink-0 border-b p-3`,children:a}),(0,i.jsxs)(`nav`,{"data-slot":`app-sidebar-nav`,className:`min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2`,children:[x??C.map(e=>{if(!y)return null;let t=y(e,{collapsed:d});return!d||!_?(0,i.jsx)(r.Fragment,{children:t},e.key):(0,i.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,i.jsx)(`span`,{className:`block`,children:t})},e.key)}),!x&&!y&&(0,i.jsx)(c,{items:C,collapsed:d,depth:0,onItemSelect:v,renderLink:b})]}),(m||g||o||T.length>0||d&&(f||w.length>0))&&(0,i.jsxs)(`div`,{"data-slot":`app-sidebar-footer`,className:`shrink-0 border-t p-3`,children:[d?(0,i.jsxs)(i.Fragment,{children:[w.length>0?(0,i.jsx)(`div`,{"data-slot":`app-sidebar-rail-actions`,className:`grid gap-2`,children:w.map(e=>(0,i.jsx)(l,{item:e,collapsed:!0,onItemSelect:v},e.key))}):null,f?(0,i.jsx)(`div`,{"data-slot":`app-sidebar-rail`,children:f}):null]}):null,!d&&m?(0,i.jsx)(`div`,{"data-slot":`app-sidebar-account-wrap`,className:`mb-3`,children:(0,i.jsx)(u,{account:m,collapsed:!1})}):null,!d&&T.length>0?(0,i.jsx)(`div`,{"data-slot":`app-sidebar-secondary-actions`,className:`mb-3 grid gap-2`,children:T.map(e=>(0,i.jsx)(l,{item:e,collapsed:!1,onItemSelect:v},e.key))}):null,!d&&g?(0,i.jsx)(`div`,{"data-slot":`app-sidebar-footer-secondary`,className:`mb-3`,children:g}):null,d&&m?(0,i.jsx)(`div`,{"data-slot":`app-sidebar-account-wrap`,children:(0,i.jsx)(u,{account:m,collapsed:!0})}):null,!d&&o]})]})}var f=d;exports.AppSidebar=d,exports.Sidebar=f;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/tooltip/index.cjs"),r=require("../../hooks/use-is-mobile.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s=1024;function c(e){return e.items?.some(e=>!e.hidden)??!1}function l(e){return e.active?!0:e.items?.some(e=>l(e))??!1}function u(e,t){e.onSelect?.(),t?.(e)}function d({item:e,collapsed:r,depth:i,onItemSelect:a,renderLink:s}){let c={"aria-current":e.current??(e.active?`page`:void 0),"aria-disabled":e.disabled||void 0,"data-slot":`app-sidebar-item`,"data-active":e.active||void 0,"data-disabled":e.disabled||void 0,"data-depth":String(i),className:t.cn(`flex min-h-9 items-center gap-2 rounded-lg border border-transparent px-2.5 text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50`,r&&`justify-center px-2`)},l=(0,o.jsxs)(o.Fragment,{children:[e.icon&&(0,o.jsx)(`span`,{className:`shrink-0`,children:e.icon}),!r&&(0,o.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!r&&e.badge&&(0,o.jsx)(`span`,{className:`shrink-0`,children:e.badge})]}),d=t=>r?(0,o.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,o.jsx)(`span`,{className:`block`,children:t})}):t;return e.href?.startsWith(`/`)?d(s?(0,o.jsx)(o.Fragment,{children:s({item:e,href:e.href,...c,onClick:t=>{if(e.disabled){t.preventDefault();return}u(e,a)},children:l})}):(0,o.jsx)(`a`,{href:e.href,...c,onClick:t=>{if(e.disabled){t.preventDefault();return}u(e,a)},children:l})):e.href?d((0,o.jsx)(`button`,{type:`button`,...c,className:t.cn(c.className,`w-full`),onClick:()=>{if(e.disabled)return;let t=e.href;if(t){if(u(e,a),t.startsWith(`http`)){window.open(t,`_blank`,`noopener,noreferrer`);return}window.location.assign(t)}},children:l})):d((0,o.jsx)(`button`,{type:`button`,disabled:e.disabled,...c,onClick:()=>{e.disabled||u(e,a)},children:l}))}function f({items:e,collapsed:r,depth:a,onItemSelect:s,renderLink:u}){return e.map(e=>{if(e.hidden)return null;let p=c(e),m=l(e),h=!r&&a===0&&e.sectionLabel;if(!p)return(0,o.jsxs)(i.Fragment,{children:[h?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-group-label`,className:`px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0`,children:e.sectionLabel}):null,(0,o.jsx)(d,{item:e,collapsed:r,depth:a,onItemSelect:s,renderLink:u})]},e.key);let g=e.defaultExpanded??m;return(0,o.jsxs)(`div`,{"data-slot":`app-sidebar-group`,"data-depth":a,children:[h&&(0,o.jsx)(`div`,{"data-slot":`app-sidebar-group-label`,className:`px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0`,children:e.sectionLabel}),(0,o.jsxs)(`details`,{"data-slot":`app-sidebar-group-details`,open:g,className:`group/app-sidebar-details`,children:[(0,o.jsxs)(`summary`,{"data-slot":`app-sidebar-group-trigger`,className:t.cn(`flex min-h-9 list-none items-center gap-2 rounded-lg border border-transparent text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow]`,r?`justify-center px-2`:`px-2.5`),children:[e.icon?r?(0,o.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,o.jsx)(`span`,{className:`shrink-0`,children:e.icon})}):(0,o.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,!r&&(0,o.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!r&&e.badge&&(0,o.jsx)(`span`,{className:`shrink-0`,children:e.badge}),!r&&(0,o.jsx)(`span`,{"data-slot":`app-sidebar-group-chevron`,className:`ml-auto text-xs text-muted-foreground transition-transform group-open/app-sidebar-details:rotate-90`,children:`›`})]}),(0,o.jsx)(`div`,{"data-slot":`app-sidebar-group-content`,className:t.cn(`mt-1 space-y-1`,!r&&`pl-3`),children:(0,o.jsx)(f,{items:e.items??[],collapsed:r,depth:a+1,onItemSelect:s,renderLink:u})})]})]},e.key)})}function p({item:e,collapsed:r,onItemSelect:i}){let a=(0,o.jsxs)(`button`,{type:`button`,"data-slot":`app-sidebar-action`,"data-active":e.active||void 0,"data-disabled":e.disabled||void 0,className:t.cn(`flex min-h-9 items-center gap-2 rounded-lg border border-transparent px-2.5 text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50`,r&&`justify-center px-2`),disabled:e.disabled,onClick:()=>{e.disabled||u(e,i)},children:[e.icon?(0,o.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,r?null:(0,o.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!r&&e.badge?(0,o.jsx)(`span`,{className:`shrink-0`,children:e.badge}):null]});return r?(0,o.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,o.jsx)(`span`,{className:`block`,children:a})}):a}function m({account:e,collapsed:r,onAfterSelect:i}){let a=(0,o.jsxs)(`button`,{type:`button`,"data-slot":`app-sidebar-account`,className:t.cn(`flex w-full items-center gap-3 rounded-[min(var(--radius-xl),16px)] border border-transparent text-left transition-[background-color,border-color,color,box-shadow]`,r?`justify-center px-2 py-2.5`:`px-3 py-2.5`),onClick:()=>{if(e.onSelect?.(),i?.(),e.href){if(e.href.startsWith(`http`)){window.open(e.href,`_blank`,`noopener,noreferrer`);return}window.location.assign(e.href)}},children:[e.avatar?(0,o.jsx)(`span`,{"data-slot":`app-sidebar-account-avatar`,className:`inline-flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border/65 bg-muted/45 text-sm font-semibold`,children:e.avatar}):null,r?null:(0,o.jsxs)(`span`,{className:`min-w-0 flex-1`,children:[(0,o.jsx)(`span`,{"data-slot":`app-sidebar-account-label`,className:`block truncate text-sm font-semibold text-foreground`,children:e.label}),e.description?(0,o.jsx)(`span`,{"data-slot":`app-sidebar-account-description`,className:`block truncate text-xs text-muted-foreground`,children:e.description}):null]})]});return r?(0,o.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,o.jsx)(`span`,{className:`block`,children:a})}):a}function h({className:e,header:r,footer:s,items:c=[],collapsed:l=!1,collapsedRail:u,railItems:d=[],footerAccount:h,secondaryActions:g=[],footerSecondary:_,tooltipOnCollapsed:v,onItemSelect:y,renderItem:b,renderLink:x,children:S,mobile:C,mobileTitle:w,mobileDescription:T,onRequestClose:E,closeOnSelect:D=!0,...O}){let k=c.filter(e=>!e.hidden),A=d.filter(e=>!e.hidden),j=g.filter(e=>!e.hidden),M=i.useCallback(e=>{y?.(e),C&&D&&E?.()},[D,C,y,E]),N=C&&(w||T||E);return(0,o.jsxs)(`aside`,{"data-slot":`app-sidebar`,"data-collapsed":l||void 0,"data-mobile":C||void 0,className:t.cn(`flex h-full min-h-0 flex-col overflow-hidden`,e),...O,children:[(r||N)&&(0,o.jsx)(`div`,{"data-slot":`app-sidebar-header`,className:`shrink-0 border-b p-3`,children:(0,o.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,o.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[r??null,N?(0,o.jsxs)(`div`,{className:t.cn(r&&`mt-3`),children:[w?(0,o.jsx)(`p`,{className:`text-sm font-semibold text-foreground`,children:w}):null,T?(0,o.jsx)(`p`,{className:`mt-1 text-xs leading-5 text-muted-foreground`,children:T}):null]}):null]}),C&&E?(0,o.jsx)(`button`,{type:`button`,"aria-label":`Close navigation`,"data-slot":`app-sidebar-mobile-close`,className:`inline-flex size-9 shrink-0 items-center justify-center rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] text-[color:var(--aui-page-foreground)] transition hover:bg-[color:var(--aui-control-bg)]`,onClick:E,children:(0,o.jsx)(a.XIcon,{className:`size-4`})}):null]})}),(0,o.jsxs)(`nav`,{"data-slot":`app-sidebar-nav`,className:`min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2`,children:[S??k.map(e=>{if(!b)return null;let t=b(e,{collapsed:l});return!l||!v?(0,o.jsx)(i.Fragment,{children:t},e.key):(0,o.jsx)(n.Tooltip,{content:e.tooltip??e.label,side:`right`,children:(0,o.jsx)(`span`,{className:`block`,children:t})},e.key)}),!S&&!b&&(0,o.jsx)(f,{items:k,collapsed:l,depth:0,onItemSelect:M,renderLink:x})]}),(h||_||s||j.length>0||l&&(u||A.length>0))&&(0,o.jsxs)(`div`,{"data-slot":`app-sidebar-footer`,className:`shrink-0 border-t p-3`,children:[l?(0,o.jsxs)(o.Fragment,{children:[A.length>0?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-rail-actions`,className:`grid gap-2`,children:A.map(e=>(0,o.jsx)(p,{item:e,collapsed:!0,onItemSelect:M},e.key))}):null,u?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-rail`,children:u}):null]}):null,!l&&h?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-account-wrap`,className:`mb-3`,children:(0,o.jsx)(m,{account:h,collapsed:!1,onAfterSelect:()=>{C&&D&&E?.()}})}):null,!l&&j.length>0?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-secondary-actions`,className:`mb-3 grid gap-2`,children:j.map(e=>(0,o.jsx)(p,{item:e,collapsed:!1,onItemSelect:M},e.key))}):null,!l&&_?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-footer-secondary`,className:`mb-3`,children:_}):null,l&&h?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-account-wrap`,children:(0,o.jsx)(m,{account:h,collapsed:!0,onAfterSelect:()=>{C&&D&&E?.()}})}):null,!l&&s]})]})}function g({className:e,header:n,footer:c,items:l=[],collapsed:u=!1,collapsedRail:d,railItems:f=[],footerAccount:p,secondaryActions:m=[],footerSecondary:g,tooltipOnCollapsed:_=!0,responsive:v=!0,mobileBreakpoint:y=s,mobileOpen:b,defaultMobileOpen:x=!1,onMobileOpenChange:S,mobileTitle:C,mobileDescription:w,mobileToggleLabel:T=`Open navigation`,mobileToggleIcon:E,showMobileToggle:D=!0,closeOnSelect:O=!0,mobileToggleClassName:k,mobilePanelClassName:A,mobileOverlayClassName:j,renderMobileToggle:M,onItemSelect:N,renderItem:P,renderLink:F,children:I,...L}){let R=v?r.useIsMobile(y):!1,[z,B]=i.useState(x),V=b??z,H=i.useCallback(e=>{b??B(e),S?.(e)},[b,S]);i.useEffect(()=>{!R&&V&&H(!1)},[R,V,H]),i.useEffect(()=>{if(!R||!V)return;let e=document.body.style.overflow;document.body.style.overflow=`hidden`;let t=e=>{e.key===`Escape`&&H(!1)};return window.addEventListener(`keydown`,t),()=>{document.body.style.overflow=e,window.removeEventListener(`keydown`,t)}},[R,V,H]);let U={className:e,header:n,footer:c,items:l,collapsed:u,collapsedRail:d,railItems:f,footerAccount:p,secondaryActions:m,footerSecondary:g,tooltipOnCollapsed:_,closeOnSelect:O,onItemSelect:N,renderItem:P,renderLink:F,children:I,...L};if(!v||!R)return(0,o.jsx)(h,{...U});let W=(0,o.jsxs)(`button`,{type:`button`,"aria-label":V?`Close navigation`:T,"data-slot":`app-sidebar-mobile-trigger`,"data-state":V?`open`:`closed`,className:t.cn(`inline-flex min-h-10 items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-3 text-sm font-medium text-[color:var(--aui-page-foreground)] shadow-sm transition hover:bg-[color:var(--aui-page-bg-alt)]`,k),onClick:()=>H(!V),children:[(0,o.jsx)(`span`,{className:`inline-flex size-8 items-center justify-center rounded-lg bg-[color:var(--aui-page-bg-alt)]`,children:E??(0,o.jsx)(a.MenuIcon,{className:`size-4`})}),(0,o.jsx)(`span`,{children:V?`Close navigation`:T})]});return(0,o.jsxs)(o.Fragment,{children:[D?M?M({open:V,setOpen:H}):W:null,(0,o.jsxs)(`div`,{"data-slot":`app-sidebar-mobile-root`,className:`relative z-40`,children:[(0,o.jsx)(`button`,{type:`button`,"aria-label":`Dismiss navigation`,"data-slot":`app-sidebar-mobile-overlay`,"data-state":V?`open`:`closed`,className:t.cn(`fixed inset-0 z-40 bg-black/45 transition-opacity duration-200`,V?`opacity-100`:`pointer-events-none opacity-0`,j),onClick:()=>H(!1)}),(0,o.jsx)(h,{...U,mobile:!0,collapsed:!1,mobileTitle:C,mobileDescription:w,onRequestClose:()=>H(!1),"data-state":V?`open`:`closed`,role:`dialog`,"aria-modal":`true`,"aria-label":typeof C==`string`?C:`Navigation`,className:t.cn(`fixed inset-y-0 left-0 z-50 w-[min(88vw,22rem)] max-w-[22rem] border-r border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] shadow-2xl transition-transform duration-200 ease-out`,V?`translate-x-0`:`-translate-x-full`,A,e)})]})]})}var _=g;exports.AppSidebar=g,exports.Sidebar=_;

package/dist/components/layout/app-sidebar.d.ts

@@ -34,6 +34,24 @@ export type AppSidebarProps = React.ComponentProps<"aside"> & {
     secondaryActions?: AppSidebarNavItem[];
     footerSecondary?: React.ReactNode;
     tooltipOnCollapsed?: boolean;
+    responsive?: boolean;
+    mobileBreakpoint?: number;
+    mobileOpen?: boolean;
+    defaultMobileOpen?: boolean;
+    onMobileOpenChange?: (open: boolean) => void;
+    mobileTitle?: React.ReactNode;
+    mobileDescription?: React.ReactNode;
+    mobileToggleLabel?: string;
+    mobileToggleIcon?: React.ReactNode;
+    showMobileToggle?: boolean;
+    closeOnSelect?: boolean;
+    mobileToggleClassName?: string;
+    mobilePanelClassName?: string;
+    mobileOverlayClassName?: string;
+    renderMobileToggle?: (state: {
+        open: boolean;
+        setOpen: (open: boolean) => void;
+    }) => React.ReactNode;
     onItemSelect?: (item: AppSidebarNavItem) => void;
     renderItem?: (item: AppSidebarNavItem, state: {
         collapsed: boolean;
@@ -43,7 +61,7 @@ export type AppSidebarProps = React.ComponentProps<"aside"> & {
         [key: `data-${string}`]: string | boolean | undefined;
     }) => React.ReactNode;
 };
-declare function AppSidebar({ className, header, footer, items, collapsed, collapsedRail, railItems, footerAccount, secondaryActions, footerSecondary, tooltipOnCollapsed, onItemSelect, renderItem, renderLink, children, ...props }: AppSidebarProps): React.JSX.Element;
+declare function AppSidebar({ className, header, footer, items, collapsed, collapsedRail, railItems, footerAccount, secondaryActions, footerSecondary, tooltipOnCollapsed, responsive, mobileBreakpoint, mobileOpen: mobileOpenProp, defaultMobileOpen, onMobileOpenChange, mobileTitle, mobileDescription, mobileToggleLabel, mobileToggleIcon, showMobileToggle, closeOnSelect, mobileToggleClassName, mobilePanelClassName, mobileOverlayClassName, renderMobileToggle, onItemSelect, renderItem, renderLink, children, ...props }: AppSidebarProps): React.JSX.Element;
 /**
  * Canonical sidebar surface for new usage.
  */