tembro 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.0.3 - 2026-07-08
+
+- tightened default radius and shadow tokens so controls render less pill-like out of the box
+- polished Button, Input, Select, and Calendar core surfaces for cleaner default spacing and focus states
+- added render coverage for clearable canonical Input and multi-month Calendar paging
+
+## 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/calendar/calendar.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/button/index.cjs"),r=require("./date-utils.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");function s(e,t,n){if(e instanceof Date)return r.startOfMonth(e);let i=r.parseDateKey(e);if(i)return r.startOfMonth(i);let a=r.parseDateKey(t);if(a)return r.startOfMonth(a);let o=r.parseDateKey(n?.from??n?.to);return o?r.startOfMonth(o):r.startOfMonth(new Date)}function c(e,t){let n=new Date(e);return n.setDate(e.getDate()+t),n}function l(e,t){let n=new Date(t.getFullYear(),t.getMonth()+1,0).getDate();return new Date(t.getFullYear(),t.getMonth(),Math.min(e.getDate(),n))}function u(e,t){let n=r.parseDateKey(e),i=r.parseDateKey(t);if(!n||!i||t<e)return[];let a=[],o=new Date(n);for(;r.toDateKey(o)<=t;)a.push(r.toDateKey(o)),o.setDate(o.getDate()+1);return a}function d({className:e,value:d,range:f,onValueChange:p,onRangeChange:m,mode:h=`single`,month:g,defaultMonth:_,onMonthChange:v,min:y,max:b,disabledDates:x,locale:S=`en-US`,weekStartsOn:C=1,numberOfMonths:w=1,showMonthHeaders:T,pagedNavigation:E=!1,labels:D,...O}){let[k,A]=i.useState(()=>s(_,d,f)),j=g??k,M=Math.max(w,1),N=T??M>1,P=E?M:1,F=r.toDateKey(new Date),I=i.useMemo(()=>new Set(x??[]),[x]),L=i.useMemo(()=>r.getWeekdayLabels(S,C),[S,C]),R=i.useRef(new Map),[z,B]=i.useState(()=>d??f?.from??F),V=i.useMemo(()=>Array.from({length:M},(e,t)=>r.addMonths(j,t)),[j,M]),H=i.useMemo(()=>V.map(e=>({month:e,days:r.getMonthDays(e,C)})),[V,C]),U=i.useMemo(()=>H.flatMap(e=>e.days),[H]),W=i.useCallback(e=>{if(I.has(e))return`disabled`;if(r.isBeforeDate(e,y))return`min`;if(r.isAfterDate(e,b))return`max`},[I,b,y]),G=i.useCallback(e=>!!W(e),[W]),K=i.useMemo(()=>U.map(r.toDateKey).filter(e=>!G(e)),[U,G]),q=i.useMemo(()=>{let e=d??f?.from??F;return K.includes(z)?z:K.includes(e)?e:K[0]},[z,f?.from,F,d,K]);i.useEffect(()=>{z&&R.current.get(z)?.focus()},[z]);let J=e=>{let t=r.startOfMonth(e);A(t),v?.(t)},Y=e=>{let t=e,n=r.toDateKey(t),i=0;for(;G(n)&&i<370;)t=c(t,t<e?-1:1),n=r.toDateKey(t),i+=1;B(n),V.some(e=>r.isSameMonth(t,e))||J(r.startOfMonth(t))},X=e=>{if(G(e))return;if(h===`single`){p?.(e);return}let t=f?.from??null,n=f?.to??null;if(!t||t&&n||e<t){m?.({from:e,to:null});return}if(u(t,e).some(e=>G(e))){m?.({from:e,to:null});return}m?.({from:t,to:e})},Z=(e,t)=>{let n=((H.find(e=>r.isSameMonth(t,e.month))?.days.findIndex(e=>r.toDateKey(e)===r.toDateKey(t))??0)+7)%7;switch(e.key){case`ArrowRight`:e.preventDefault(),Y(c(t,1));break;case`ArrowLeft`:e.preventDefault(),Y(c(t,-1));break;case`ArrowDown`:e.preventDefault(),Y(c(t,7));break;case`ArrowUp`:e.preventDefault(),Y(c(t,-7));break;case`Home`:e.preventDefault(),Y(c(t,-n));break;case`End`:e.preventDefault(),Y(c(t,6-n));break;case`PageUp`:e.preventDefault(),Y(l(t,r.addMonths(t,-1)));break;case`PageDown`:e.preventDefault(),Y(l(t,r.addMonths(t,1)));break}};return(0,o.jsxs)(`div`,{"data-slot":`calendar`,"data-months":M,className:t.cn(`w-fit rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur`,e),...O,children:[(0,o.jsxs)(`div`,{className:`mb-3 flex items-center justify-between gap-3`,children:[(0,o.jsx)(n.Button,{type:`button`,variant:`outline`,size:`icon-sm`,className:`rounded-full border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground`,"aria-label":D?.previousMonth??`Previous month`,onClick:()=>J(r.addMonths(j,-P)),children:(0,o.jsx)(a.ChevronLeftIcon,{})}),(0,o.jsxs)(`div`,{className:`flex flex-1 flex-col items-center text-center`,children:[(0,o.jsx)(`span`,{className:`text-[10px] font-semibold uppercase tracking-[0.24em] text-muted-foreground/90`,children:`Calendar`}),(0,o.jsx)(`div`,{className:`text-base font-semibold capitalize tracking-tight text-foreground`,children:r.getMonthLabel(j,S)})]}),(0,o.jsx)(n.Button,{type:`button`,variant:`outline`,size:`icon-sm`,className:`rounded-full border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground`,"aria-label":D?.nextMonth??`Next month`,onClick:()=>J(r.addMonths(j,P)),children:(0,o.jsx)(a.ChevronRightIcon,{})})]}),(0,o.jsx)(`div`,{className:t.cn(`grid gap-3`,M>1&&`sm:grid-cols-2`),style:M>2?{gridTemplateColumns:`repeat(${M}, minmax(0, 1fr))`}:void 0,children:H.map(({month:e,days:n})=>(0,o.jsxs)(`div`,{className:`min-w-[16.5rem] rounded-[var(--radius-lg)] bg-transparent p-1`,children:[N&&(0,o.jsx)(`div`,{className:`mb-2 text-center text-sm font-semibold capitalize tracking-tight text-foreground`,children:r.getMonthLabel(e,S)}),(0,o.jsx)(`div`,{className:`grid grid-cols-7 gap-1 text-center text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-muted-foreground/90`,children:L.map(t=>(0,o.jsx)(`div`,{className:`py-1`,children:t},`${r.toDateKey(e)}-${t}`))}),(0,o.jsx)(`div`,{className:`mt-1.5 grid grid-cols-7 gap-1`,children:n.map(n=>{let i=r.toDateKey(n),a=!r.isSameMonth(n,e),s=h===`single`?d===i:i===f?.from||i===f?.to,c=h===`range`&&r.isWithinRange(i,f?.from,f?.to),l=W(i),u=!!l,p=l?D?.disabledDate?.(i,l):void 0;return(0,o.jsx)(`button`,{ref:e=>{e?R.current.set(i,e):R.current.delete(i)},type:`button`,disabled:u,"aria-label":p??D?.selectDate?.(i)??i,"aria-current":i===F?`date`:void 0,tabIndex:i===q?0:-1,title:p,"data-selected":s||void 0,"data-today":i===F||void 0,"data-outside":a||void 0,"data-in-range":c||void 0,"data-disabled-reason":l,className:t.cn(`flex h-9 items-center justify-center rounded-[var(--radius-md)] border border-transparent text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30`,a&&`text-muted-foreground/34`,i===F&&`border-border/70 bg-muted/60 text-foreground`,c&&`bg-primary/10 text-foreground`,s&&`border-primary bg-primary text-primary-foreground shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_78%)] hover:bg-primary hover:text-primary-foreground`),onFocus:()=>B(i),onKeyDown:e=>Z(e,n),onClick:()=>X(i),children:n.getDate()},i)})})]},r.toDateKey(e)))})]})}exports.Calendar=d;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("./date-utils.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");function s(e,t,n){if(e instanceof Date)return r.startOfMonth(e);let i=r.parseDateKey(e);if(i)return r.startOfMonth(i);let a=r.parseDateKey(t);if(a)return r.startOfMonth(a);let o=r.parseDateKey(n?.from??n?.to);return o?r.startOfMonth(o):r.startOfMonth(new Date)}function c(e,t){let n=new Date(e);return n.setDate(e.getDate()+t),n}function l(e,t){let n=new Date(t.getFullYear(),t.getMonth()+1,0).getDate();return new Date(t.getFullYear(),t.getMonth(),Math.min(e.getDate(),n))}function u(e,t){let n=r.parseDateKey(e),i=r.parseDateKey(t);if(!n||!i||t<e)return[];let a=[],o=new Date(n);for(;r.toDateKey(o)<=t;)a.push(r.toDateKey(o)),o.setDate(o.getDate()+1);return a}function d({className:e,value:d,range:f,onValueChange:p,onRangeChange:m,mode:h=`single`,month:g,defaultMonth:_,onMonthChange:v,min:y,max:b,disabledDates:x,locale:S=`en-US`,weekStartsOn:C=1,numberOfMonths:w=1,showMonthHeaders:T,pagedNavigation:E=!1,labels:D,...O}){let[k,A]=i.useState(()=>s(_,d,f)),j=g??k,M=Math.max(w,1),N=T??M>1,P=E?M:1,F=r.toDateKey(new Date),I=i.useMemo(()=>new Set(x??[]),[x]),L=i.useMemo(()=>r.getWeekdayLabels(S,C),[S,C]),R=i.useRef(new Map),[z,B]=i.useState(()=>d??f?.from??F),V=i.useMemo(()=>Array.from({length:M},(e,t)=>r.addMonths(j,t)),[j,M]),H=i.useMemo(()=>V.map(e=>({month:e,days:r.getMonthDays(e,C)})),[V,C]),U=i.useMemo(()=>H.flatMap(e=>e.days),[H]),W=i.useCallback(e=>{if(I.has(e))return`disabled`;if(r.isBeforeDate(e,y))return`min`;if(r.isAfterDate(e,b))return`max`},[I,b,y]),G=i.useCallback(e=>!!W(e),[W]),K=i.useMemo(()=>U.map(r.toDateKey).filter(e=>!G(e)),[U,G]),q=i.useMemo(()=>{let e=d??f?.from??F;return K.includes(z)?z:K.includes(e)?e:K[0]},[z,f?.from,F,d,K]);i.useEffect(()=>{z&&R.current.get(z)?.focus()},[z]);let J=e=>{let t=r.startOfMonth(e);A(t),v?.(t)},Y=e=>{let t=e,n=r.toDateKey(t),i=0;for(;G(n)&&i<370;)t=c(t,t<e?-1:1),n=r.toDateKey(t),i+=1;B(n),V.some(e=>r.isSameMonth(t,e))||J(r.startOfMonth(t))},X=e=>{if(G(e))return;if(h===`single`){p?.(e);return}let t=f?.from??null,n=f?.to??null;if(!t||t&&n||e<t){m?.({from:e,to:null});return}if(u(t,e).some(e=>G(e))){m?.({from:e,to:null});return}m?.({from:t,to:e})},Z=(e,t)=>{let n=((H.find(e=>r.isSameMonth(t,e.month))?.days.findIndex(e=>r.toDateKey(e)===r.toDateKey(t))??0)+7)%7;switch(e.key){case`ArrowRight`:e.preventDefault(),Y(c(t,1));break;case`ArrowLeft`:e.preventDefault(),Y(c(t,-1));break;case`ArrowDown`:e.preventDefault(),Y(c(t,7));break;case`ArrowUp`:e.preventDefault(),Y(c(t,-7));break;case`Home`:e.preventDefault(),Y(c(t,-n));break;case`End`:e.preventDefault(),Y(c(t,6-n));break;case`PageUp`:e.preventDefault(),Y(l(t,r.addMonths(t,-1)));break;case`PageDown`:e.preventDefault(),Y(l(t,r.addMonths(t,1)));break}};return(0,o.jsxs)(`div`,{"data-slot":`calendar`,"data-months":M,className:t.cn(`w-fit rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]`,e),...O,children:[(0,o.jsxs)(`div`,{className:`mb-3 flex items-center justify-between gap-3`,children:[(0,o.jsx)(n.Button,{type:`button`,variant:`outline`,size:`icon-sm`,className:`rounded-[var(--radius-md)] border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground`,"aria-label":D?.previousMonth??`Previous month`,onClick:()=>J(r.addMonths(j,-P)),children:(0,o.jsx)(a.ChevronLeftIcon,{})}),(0,o.jsxs)(`div`,{className:`flex flex-1 flex-col items-center text-center`,children:[(0,o.jsx)(`span`,{className:`text-[10px] font-semibold uppercase tracking-[0.24em] text-muted-foreground/90`,children:`Calendar`}),(0,o.jsx)(`div`,{className:`text-base font-semibold capitalize tracking-tight text-foreground`,children:r.getMonthLabel(j,S)})]}),(0,o.jsx)(n.Button,{type:`button`,variant:`outline`,size:`icon-sm`,className:`rounded-[var(--radius-md)] border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground`,"aria-label":D?.nextMonth??`Next month`,onClick:()=>J(r.addMonths(j,P)),children:(0,o.jsx)(a.ChevronRightIcon,{})})]}),(0,o.jsx)(`div`,{className:t.cn(`grid gap-3`,M>1&&`sm:grid-cols-2`),style:M>2?{gridTemplateColumns:`repeat(${M}, minmax(0, 1fr))`}:void 0,children:H.map(({month:e,days:n})=>(0,o.jsxs)(`div`,{className:`min-w-[16.5rem] rounded-[var(--radius-md)] bg-transparent p-1`,children:[N&&(0,o.jsx)(`div`,{className:`mb-2 text-center text-sm font-semibold capitalize tracking-tight text-foreground`,children:r.getMonthLabel(e,S)}),(0,o.jsx)(`div`,{className:`grid grid-cols-7 gap-1 text-center text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-muted-foreground/90`,children:L.map(t=>(0,o.jsx)(`div`,{className:`py-1`,children:t},`${r.toDateKey(e)}-${t}`))}),(0,o.jsx)(`div`,{className:`mt-1.5 grid grid-cols-7 gap-1`,children:n.map(n=>{let i=r.toDateKey(n),a=!r.isSameMonth(n,e),s=h===`single`?d===i:i===f?.from||i===f?.to,c=h===`range`&&r.isWithinRange(i,f?.from,f?.to),l=W(i),u=!!l,p=l?D?.disabledDate?.(i,l):void 0;return(0,o.jsx)(`button`,{ref:e=>{e?R.current.set(i,e):R.current.delete(i)},type:`button`,disabled:u,"aria-label":p??D?.selectDate?.(i)??i,"aria-current":i===F?`date`:void 0,tabIndex:i===q?0:-1,title:p,"data-selected":s||void 0,"data-today":i===F||void 0,"data-outside":a||void 0,"data-in-range":c||void 0,"data-disabled-reason":l,className:t.cn(`flex h-9 items-center justify-center rounded-[var(--radius-sm)] border border-transparent text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30`,a&&`text-muted-foreground/34`,i===F&&`border-border/70 bg-muted/60 text-foreground`,c&&`bg-primary/10 text-foreground`,s&&`border-primary bg-primary text-primary-foreground shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_78%)] hover:bg-primary hover:text-primary-foreground`),onFocus:()=>B(i),onKeyDown:e=>Z(e,n),onClick:()=>X(i),children:n.getDate()},i)})})]},r.toDateKey(e)))})]})}exports.Calendar=d;

package/dist/components/calendar/calendar.js

@@ -112,7 +112,7 @@ function x({ className: l, value: x, range: S, onValueChange: C, onRangeChange:
 	return /* @__PURE__ */ g("div", {
 		"data-slot": "calendar",
 		"data-months": L,
-		className: e("w-fit rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur", l),
+		className: e("w-fit rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]", l),
 		...F,
 		children: [/* @__PURE__ */ g("div", {
 			className: "mb-3 flex items-center justify-between gap-3",
@@ -121,7 +121,7 @@ function x({ className: l, value: x, range: S, onValueChange: C, onRangeChange:
 					type: "button",
 					variant: "outline",
 					size: "icon-sm",
-					className: "rounded-full border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground",
+					className: "rounded-[var(--radius-md)] border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground",
 					"aria-label": P?.previousMonth ?? "Previous month",
 					onClick: () => Q(n(I, -z)),
 					children: /* @__PURE__ */ h(p, {})
@@ -140,7 +140,7 @@ function x({ className: l, value: x, range: S, onValueChange: C, onRangeChange:
 					type: "button",
 					variant: "outline",
 					size: "icon-sm",
-					className: "rounded-full border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground",
+					className: "rounded-[var(--radius-md)] border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground",
 					"aria-label": P?.nextMonth ?? "Next month",
 					onClick: () => Q(n(I, z)),
 					children: /* @__PURE__ */ h(m, {})
@@ -150,7 +150,7 @@ function x({ className: l, value: x, range: S, onValueChange: C, onRangeChange:
 			className: e("grid gap-3", L > 1 && "sm:grid-cols-2"),
 			style: L > 2 ? { gridTemplateColumns: `repeat(${L}, minmax(0, 1fr))` } : void 0,
 			children: q.map(({ month: t, days: n }) => /* @__PURE__ */ g("div", {
-				className: "min-w-[16.5rem] rounded-[var(--radius-lg)] bg-transparent p-1",
+				className: "min-w-[16.5rem] rounded-[var(--radius-md)] bg-transparent p-1",
 				children: [
 					R && /* @__PURE__ */ h("div", {
 						className: "mb-2 text-center text-sm font-semibold capitalize tracking-tight text-foreground",
@@ -182,7 +182,7 @@ function x({ className: l, value: x, range: S, onValueChange: C, onRangeChange:
 								"data-outside": i || void 0,
 								"data-in-range": o || void 0,
 								"data-disabled-reason": s,
-								className: e("flex h-9 items-center justify-center rounded-[var(--radius-md)] border border-transparent text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30", i && "text-muted-foreground/34", r === B && "border-border/70 bg-muted/60 text-foreground", o && "bg-primary/10 text-foreground", a && "border-primary bg-primary text-primary-foreground shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_78%)] hover:bg-primary hover:text-primary-foreground"),
+								className: e("flex h-9 items-center justify-center rounded-[var(--radius-sm)] border border-transparent text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30", i && "text-muted-foreground/34", r === B && "border-border/70 bg-muted/60 text-foreground", o && "bg-primary/10 text-foreground", a && "border-primary bg-primary text-primary-foreground shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_78%)] hover:bg-primary hover:text-primary-foreground"),
 								onFocus: () => G(r),
 								onKeyDown: (e) => ce(e, n),
 								onClick: () => se(r),

package/dist/components/inputs/clearable-input.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("./input-decorator.cjs"),r=require("./input-value.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s=i.forwardRef(({value:e,onChange:s,onValueChange:c,onClear:l,clearable:u=!0,clearLabel:d=`Clear`,clearOnEscape:f=!0,focusAfterClear:p=!0,replaceTrailingWhenClear:m=!0,leadingIcon:h,trailing:g,trailingAction:_,disabled:v,onKeyDown:y,...b},x)=>{let S=i.useRef(null),C=r.getInputValue(e),w=u&&C.length>0&&!v&&!b.readOnly,T=r.createInputChangeHandler({onChange:s,onValueChange:c});i.useImperativeHandle(x,()=>S.current);let E=()=>{w&&(c?.(``),l?.(),p&&S.current?.focus())},D=e=>{t.stopInteractivePropagation(e),E()},O=e=>{t.stopInteractivePropagation(e)};return(0,o.jsx)(n.InputDecorator,{"data-slot":`clearable-input`,ref:S,value:C,disabled:v,onChange:T,onKeyDown:e=>{y?.(e),!e.defaultPrevented&&f&&e.key===`Escape`&&w&&(e.preventDefault(),E())},leading:h,trailing:w&&m?null:g,trailingAction:(0,o.jsxs)(o.Fragment,{children:[_,w&&(0,o.jsx)(`button`,{type:`button`,"data-slot":`clearable-input-clear`,"aria-label":d,className:`inline-flex size-7 items-center justify-center rounded-full border border-transparent bg-transparent text-muted-foreground/74 transition hover:border-border/60 hover:bg-muted/58 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30`,onClick:D,onMouseDown:O,onDoubleClick:O,children:(0,o.jsx)(a.XIcon,{className:`size-4`})})]}),...b})});s.displayName=`ClearableInput`,exports.ClearableInput=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("./input-decorator.cjs"),r=require("./input-value.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s=i.forwardRef(({value:e,onChange:s,onValueChange:c,onClear:l,clearable:u=!0,clearLabel:d=`Clear`,clearOnEscape:f=!0,focusAfterClear:p=!0,replaceTrailingWhenClear:m=!0,leadingIcon:h,trailing:g,trailingAction:_,disabled:v,onKeyDown:y,...b},x)=>{let S=i.useRef(null),C=r.getInputValue(e),w=u&&C.length>0&&!v&&!b.readOnly,T=r.createInputChangeHandler({onChange:s,onValueChange:c});i.useImperativeHandle(x,()=>S.current);let E=()=>{w&&(c?.(``),l?.(),p&&S.current?.focus())},D=e=>{t.stopInteractivePropagation(e),E()},O=e=>{t.stopInteractivePropagation(e)};return(0,o.jsx)(n.InputDecorator,{"data-slot":`clearable-input`,ref:S,value:C,disabled:v,onChange:T,onKeyDown:e=>{y?.(e),!e.defaultPrevented&&f&&e.key===`Escape`&&w&&(e.preventDefault(),E())},leading:h,trailing:w&&m?null:g,trailingAction:(0,o.jsxs)(o.Fragment,{children:[_,w&&(0,o.jsx)(`button`,{type:`button`,"data-slot":`clearable-input-clear`,"aria-label":d,className:`inline-flex size-7 items-center justify-center rounded-[var(--radius-sm)] border border-transparent bg-transparent text-muted-foreground/74 transition hover:border-border/60 hover:bg-muted/58 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30`,onClick:D,onMouseDown:O,onDoubleClick:O,children:(0,o.jsx)(a.XIcon,{className:`size-4`})})]}),...b})});s.displayName=`ClearableInput`,exports.ClearableInput=s;

package/dist/components/inputs/clearable-input.js

@@ -33,7 +33,7 @@ var l = i.forwardRef(({ value: l, onChange: u, onValueChange: d, onClear: f, cle
 			type: "button",
 			"data-slot": "clearable-input-clear",
 			"aria-label": m,
-			className: "inline-flex size-7 items-center justify-center rounded-full border border-transparent bg-transparent text-muted-foreground/74 transition hover:border-border/60 hover:bg-muted/58 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
+			className: "inline-flex size-7 items-center justify-center rounded-[var(--radius-sm)] border border-transparent bg-transparent text-muted-foreground/74 transition hover:border-border/60 hover:bg-muted/58 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
 			onClick: A,
 			onMouseDown: j,
 			onDoubleClick: j,

package/dist/components/inputs/input-chrome.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({start:e,end:n,startClassName:i,endClassName:a,className:o,children:s,...c}){return(0,r.jsxs)(`div`,{"data-slot":`input-chrome`,className:t.cn(`flex h-10 w-full min-w-0 items-center rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] shadow-[var(--aui-control-shadow,none)] transition-[background-color,border-color,box-shadow] hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-within:border-[color:var(--ring)] focus-within:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)]`,o),...c,children:[e&&(0,r.jsx)(`span`,{className:t.cn(`shrink-0`,i),children:e}),s,n&&(0,r.jsx)(`span`,{className:t.cn(`shrink-0`,a),children:n})]})}exports.InputChrome=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({start:e,end:n,startClassName:i,endClassName:a,className:o,children:s,...c}){return(0,r.jsxs)(`div`,{"data-slot":`input-chrome`,className:t.cn(`flex h-11 w-full min-w-0 items-center rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] shadow-[var(--aui-control-shadow,none)] transition-[background-color,border-color,box-shadow] hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-within:border-[color:var(--ring)] focus-within:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)]`,o),...c,children:[e&&(0,r.jsx)(`span`,{className:t.cn(`shrink-0`,i),children:e}),s,n&&(0,r.jsx)(`span`,{className:t.cn(`shrink-0`,a),children:n})]})}exports.InputChrome=i;

package/dist/components/inputs/input-chrome.js

@@ -5,7 +5,7 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 function r({ start: r, end: i, startClassName: a, endClassName: o, className: s, children: c, ...l }) {
 	return /* @__PURE__ */ n("div", {
 		"data-slot": "input-chrome",
-		className: e("flex h-10 w-full min-w-0 items-center rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] shadow-[var(--aui-control-shadow,none)] transition-[background-color,border-color,box-shadow] hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-within:border-[color:var(--ring)] focus-within:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)]", s),
+		className: e("flex h-11 w-full min-w-0 items-center rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] shadow-[var(--aui-control-shadow,none)] transition-[background-color,border-color,box-shadow] hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-within:border-[color:var(--ring)] focus-within:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)]", s),
 		...l,
 		children: [
 			r && /* @__PURE__ */ t("span", {

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.
  */