tembro 2.0.4 → 2.0.5

package/dist/components/inputs/combobox.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("../ui/input/index.cjs"),i=require("../ui/popover/index.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("lucide-react"),s=require("react/jsx-runtime");function c({value:e,options:c,onValueChange:l,placeholder:u=`Select option`,searchPlaceholder:d=`Search...`,emptyLabel:f=`No option found`,disabled:p=!1,invalid:m,triggerClassName:h,contentClassName:g,optionClassName:_,searchClassName:v,className:y,...b}){let[x,S]=a.useState(!1),[C,w]=a.useState(``),T=c.find(t=>t.value===e),E=C.trim().toLowerCase(),D=c.filter(e=>e.hidden?!1:E?String(e.searchValue??e.label).toLowerCase().includes(E):!0);return(0,s.jsx)(`div`,{"data-slot":`combobox`,className:t.cn(`grid w-full gap-2`,y),...b,children:(0,s.jsxs)(i.Popover,{open:x,onOpenChange:S,children:[(0,s.jsxs)(i.PopoverTrigger,{render:(0,s.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:p,"aria-expanded":x,"aria-invalid":m||void 0,className:t.cn(`min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left`,h)}),children:[(0,s.jsx)(`span`,{className:t.cn(`min-w-0 flex-1 truncate font-medium`,!T&&`font-normal text-muted-foreground`),children:T?.label??u}),(0,s.jsx)(o.ChevronDownIcon,{className:`size-4 opacity-60`})]}),(0,s.jsxs)(i.PopoverContent,{align:`start`,"data-slot":`combobox-content`,className:t.cn(`w-(--anchor-width) min-w-72 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]`,g),children:[(0,s.jsxs)(`div`,{className:`relative mb-2`,children:[(0,s.jsx)(o.SearchIcon,{className:`pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground`}),(0,s.jsx)(r.Input,{value:C,onChange:e=>w(e.target.value),placeholder:d,className:t.cn(`h-9 pl-8`,v)})]}),(0,s.jsx)(`div`,{className:`max-h-64 overflow-y-auto`,children:D.length?D.map(n=>{let r=n.value===e;return(0,s.jsxs)(`button`,{type:`button`,disabled:n.disabled,"data-selected":r||void 0,className:t.cn(`flex w-full items-start gap-2.5 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-left text-sm transition-colors hover:border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_93%)] disabled:pointer-events-none disabled:opacity-50 data-[selected=true]:border-[color:color-mix(in_oklch,var(--primary),transparent_68%)] data-[selected=true]:bg-[color:color-mix(in_oklch,var(--primary),transparent_89%)]`,_),onClick:()=>{l?.(n.value,n),S(!1)},children:[(0,s.jsx)(`span`,{className:t.cn(`mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border/70`,r&&`border-primary bg-primary text-primary-foreground`),children:r&&(0,s.jsx)(o.CheckIcon,{className:`size-3`})}),(0,s.jsxs)(`span`,{className:`min-w-0`,children:[(0,s.jsx)(`span`,{className:`block truncate font-medium`,children:n.label}),n.description&&(0,s.jsx)(`span`,{className:`block text-xs text-muted-foreground`,children:n.description})]})]},n.value)}):(0,s.jsx)(`div`,{className:`rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-6 text-center text-sm text-muted-foreground`,children:f})})]})]})})}exports.Combobox=c;
+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("../ui/input/index.cjs"),i=require("../ui/popover/index.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("lucide-react"),s=require("react/jsx-runtime");function c({value:e,options:c,onValueChange:l,placeholder:u=`Select option`,searchPlaceholder:d=`Search...`,emptyLabel:f=`No option found`,disabled:p=!1,invalid:m,clearable:h=!1,allowDeselect:g=!1,showSelectedDescription:_=!0,onSearchChange:v,triggerClassName:y,contentClassName:b,optionClassName:x,searchClassName:S,className:C,...w}){let[T,E]=a.useState(!1),[D,O]=a.useState(``),k=c.find(t=>t.value===e),A=D.trim().toLowerCase(),j=c.filter(e=>e.hidden?!1:A?String(e.searchValue??e.label).toLowerCase().includes(A):!0);return(0,s.jsx)(`div`,{"data-slot":`combobox`,className:t.cn(`grid w-full gap-2`,C),...w,children:(0,s.jsxs)(i.Popover,{open:T,onOpenChange:e=>{E(e),e||(O(``),v?.(``))},children:[(0,s.jsxs)(i.PopoverTrigger,{render:(0,s.jsx)(n.Button,{type:`button`,variant:`outline`,disabled:p,"aria-expanded":T,"aria-invalid":m||void 0,className:t.cn(`min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left`,y)}),children:[(0,s.jsx)(`span`,{className:t.cn(`min-w-0 flex-1`,!k&&`text-muted-foreground`),children:k?(0,s.jsxs)(`span`,{className:`flex min-w-0 flex-col items-start`,children:[(0,s.jsx)(`span`,{className:`truncate font-medium`,children:k.label}),_&&k.description?(0,s.jsx)(`span`,{className:`truncate text-[11px] text-muted-foreground`,children:k.description}):null]}):(0,s.jsx)(`span`,{className:`truncate font-normal`,children:u})}),h&&k&&!p?(0,s.jsx)(`span`,{role:`button`,tabIndex:0,"aria-label":`Clear value`,className:`inline-flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted/55 hover:text-foreground`,onClick:e=>{e.preventDefault(),e.stopPropagation(),l?.(void 0,void 0)},onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),e.stopPropagation(),l?.(void 0,void 0))},children:`×`}):null,(0,s.jsx)(o.ChevronDownIcon,{className:`size-4 opacity-60`})]}),(0,s.jsxs)(i.PopoverContent,{align:`start`,"data-slot":`combobox-content`,className:t.cn(`w-(--anchor-width) min-w-72 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]`,b),children:[(0,s.jsxs)(`div`,{className:`relative mb-2`,children:[(0,s.jsx)(o.SearchIcon,{className:`pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground`}),(0,s.jsx)(r.Input,{value:D,onChange:e=>{O(e.target.value),v?.(e.target.value)},placeholder:d,className:t.cn(`h-9 pl-8`,S)})]}),(0,s.jsx)(`div`,{className:`max-h-64 overflow-y-auto`,children:j.length?j.map(n=>{let r=n.value===e;return(0,s.jsxs)(`button`,{type:`button`,disabled:n.disabled,"data-selected":r||void 0,className:t.cn(`flex w-full items-start gap-2.5 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-left text-sm transition-colors hover:border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_93%)] disabled:pointer-events-none disabled:opacity-50 data-[selected=true]:border-[color:color-mix(in_oklch,var(--primary),transparent_68%)] data-[selected=true]:bg-[color:color-mix(in_oklch,var(--primary),transparent_89%)]`,x),onClick:()=>{let e=g&&r?void 0:n.value;l?.(e,e?n:void 0),E(!1)},children:[(0,s.jsx)(`span`,{className:t.cn(`mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border/70`,r&&`border-primary bg-primary text-primary-foreground`),children:r&&(0,s.jsx)(o.CheckIcon,{className:`size-3`})}),(0,s.jsxs)(`span`,{className:`min-w-0`,children:[(0,s.jsx)(`span`,{className:`block truncate font-medium`,children:n.label}),n.description&&(0,s.jsx)(`span`,{className:`block text-xs text-muted-foreground`,children:n.description})]})]},n.value)}):(0,s.jsx)(`div`,{className:`rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-6 text-center text-sm text-muted-foreground`,children:f})})]})]})})}exports.Combobox=c;

package/dist/components/inputs/combobox.d.ts

@@ -16,10 +16,14 @@ export type ComboboxProps<TValue extends string = string> = React.ComponentProps
     emptyLabel?: React.ReactNode;
     disabled?: boolean;
     invalid?: boolean;
+    clearable?: boolean;
+    allowDeselect?: boolean;
+    showSelectedDescription?: boolean;
+    onSearchChange?: (value: string) => void;
     triggerClassName?: string;
     contentClassName?: string;
     optionClassName?: string;
     searchClassName?: string;
 };
-declare function Combobox<TValue extends string = string>({ value, options, onValueChange, placeholder, searchPlaceholder, emptyLabel, disabled, invalid, triggerClassName, contentClassName, optionClassName, searchClassName, className, ...props }: ComboboxProps<TValue>): React.JSX.Element;
+declare function Combobox<TValue extends string = string>({ value, options, onValueChange, placeholder, searchPlaceholder, emptyLabel, disabled, invalid, clearable, allowDeselect, showSelectedDescription, onSearchChange, triggerClassName, contentClassName, optionClassName, searchClassName, className, ...props }: ComboboxProps<TValue>): React.JSX.Element;
 export { Combobox };

package/dist/components/inputs/combobox.js

@@ -6,51 +6,84 @@ import * as o from "react";
 import { CheckIcon as s, ChevronDownIcon as c, SearchIcon as l } from "lucide-react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/inputs/combobox.tsx
-function f({ value: f, options: p, onValueChange: m, placeholder: h = "Select option", searchPlaceholder: g = "Search...", emptyLabel: _ = "No option found", disabled: v = !1, invalid: y, triggerClassName: b, contentClassName: x, optionClassName: S, searchClassName: C, className: w, ...T }) {
-	let [E, D] = o.useState(!1), [O, k] = o.useState(""), A = p.find((e) => e.value === f), j = O.trim().toLowerCase(), M = p.filter((e) => e.hidden ? !1 : j ? String(e.searchValue ?? e.label).toLowerCase().includes(j) : !0);
+function f({ value: f, options: p, onValueChange: m, placeholder: h = "Select option", searchPlaceholder: g = "Search...", emptyLabel: _ = "No option found", disabled: v = !1, invalid: y, clearable: b = !1, allowDeselect: x = !1, showSelectedDescription: S = !0, onSearchChange: C, triggerClassName: w, contentClassName: T, optionClassName: E, searchClassName: D, className: O, ...k }) {
+	let [A, j] = o.useState(!1), [M, N] = o.useState(""), P = p.find((e) => e.value === f), F = M.trim().toLowerCase(), I = p.filter((e) => e.hidden ? !1 : F ? String(e.searchValue ?? e.label).toLowerCase().includes(F) : !0);
 	return /* @__PURE__ */ u("div", {
 		"data-slot": "combobox",
-		className: e("grid w-full gap-2", w),
-		...T,
+		className: e("grid w-full gap-2", O),
+		...k,
 		children: /* @__PURE__ */ d(r, {
-			open: E,
-			onOpenChange: D,
+			open: A,
+			onOpenChange: (e) => {
+				j(e), e || (N(""), C?.(""));
+			},
 			children: [/* @__PURE__ */ d(a, {
 				render: /* @__PURE__ */ u(t, {
 					type: "button",
 					variant: "outline",
 					disabled: v,
-					"aria-expanded": E,
+					"aria-expanded": A,
 					"aria-invalid": y || void 0,
-					className: e("min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left", b)
+					className: e("min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left", w)
 				}),
-				children: [/* @__PURE__ */ u("span", {
-					className: e("min-w-0 flex-1 truncate font-medium", !A && "font-normal text-muted-foreground"),
-					children: A?.label ?? h
-				}), /* @__PURE__ */ u(c, { className: "size-4 opacity-60" })]
+				children: [
+					/* @__PURE__ */ u("span", {
+						className: e("min-w-0 flex-1", !P && "text-muted-foreground"),
+						children: P ? /* @__PURE__ */ d("span", {
+							className: "flex min-w-0 flex-col items-start",
+							children: [/* @__PURE__ */ u("span", {
+								className: "truncate font-medium",
+								children: P.label
+							}), S && P.description ? /* @__PURE__ */ u("span", {
+								className: "truncate text-[11px] text-muted-foreground",
+								children: P.description
+							}) : null]
+						}) : /* @__PURE__ */ u("span", {
+							className: "truncate font-normal",
+							children: h
+						})
+					}),
+					b && P && !v ? /* @__PURE__ */ u("span", {
+						role: "button",
+						tabIndex: 0,
+						"aria-label": "Clear value",
+						className: "inline-flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted/55 hover:text-foreground",
+						onClick: (e) => {
+							e.preventDefault(), e.stopPropagation(), m?.(void 0, void 0);
+						},
+						onKeyDown: (e) => {
+							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), m?.(void 0, void 0));
+						},
+						children: "×"
+					}) : null,
+					/* @__PURE__ */ u(c, { className: "size-4 opacity-60" })
+				]
 			}), /* @__PURE__ */ d(i, {
 				align: "start",
 				"data-slot": "combobox-content",
-				className: e("w-(--anchor-width) min-w-72 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]", x),
+				className: e("w-(--anchor-width) min-w-72 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]", T),
 				children: [/* @__PURE__ */ d("div", {
 					className: "relative mb-2",
 					children: [/* @__PURE__ */ u(l, { className: "pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ u(n, {
-						value: O,
-						onChange: (e) => k(e.target.value),
+						value: M,
+						onChange: (e) => {
+							N(e.target.value), C?.(e.target.value);
+						},
 						placeholder: g,
-						className: e("h-9 pl-8", C)
+						className: e("h-9 pl-8", D)
 					})]
 				}), /* @__PURE__ */ u("div", {
 					className: "max-h-64 overflow-y-auto",
-					children: M.length ? M.map((t) => {
+					children: I.length ? I.map((t) => {
 						let n = t.value === f;
 						return /* @__PURE__ */ d("button", {
 							type: "button",
 							disabled: t.disabled,
 							"data-selected": n || void 0,
-							className: e("flex w-full items-start gap-2.5 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-left text-sm transition-colors hover:border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_93%)] disabled:pointer-events-none disabled:opacity-50 data-[selected=true]:border-[color:color-mix(in_oklch,var(--primary),transparent_68%)] data-[selected=true]:bg-[color:color-mix(in_oklch,var(--primary),transparent_89%)]", S),
+							className: e("flex w-full items-start gap-2.5 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-left text-sm transition-colors hover:border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_93%)] disabled:pointer-events-none disabled:opacity-50 data-[selected=true]:border-[color:color-mix(in_oklch,var(--primary),transparent_68%)] data-[selected=true]:bg-[color:color-mix(in_oklch,var(--primary),transparent_89%)]", E),
 							onClick: () => {
-								m?.(t.value, t), D(!1);
+								let e = x && n ? void 0 : t.value;
+								m?.(e, e ? t : void 0), j(!1);
 							},
 							children: [/* @__PURE__ */ u("span", {
 								className: e("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border/70", n && "border-primary bg-primary text-primary-foreground"),

package/dist/components/inputs/simple-select.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/select/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o(e,t){let n=t.trim().toLowerCase();return n?[typeof e.label==`string`||typeof e.label==`number`?String(e.label):e.value,e.value,...e.keywords??[]].join(` `).toLowerCase().includes(n):!0}function s({value:e,onValueChange:s,options:c,placeholder:l=`Select`,searchPlaceholder:u=`Search options...`,emptyLabel:d=`No options found`,clearLabel:f=`Clear selection`,size:p=`default`,clearable:m=!1,searchable:h=!1,loading:g=!1,loadingLabel:_=`Loading options...`,disabled:v=!1,triggerClassName:y,contentClassName:b,itemClassName:x,searchClassName:S,renderOption:C,invalid:w,...T}){let[E,D]=r.useState(``),O=c.find(t=>t.value===e),k=c.filter(e=>o(e,E));return(0,a.jsxs)(n.Select,{value:e,onValueChange:e=>s?.(e),disabled:v||g,...T,children:[(0,a.jsxs)(n.SelectTrigger,{size:p,"aria-invalid":w||void 0,className:t.cn(`w-full`,y),children:[(0,a.jsx)(n.SelectValue,{placeholder:l,children:O?.label}),g?(0,a.jsx)(i.LoaderCircleIcon,{className:`size-4 animate-spin text-muted-foreground`}):null,m&&e&&!v&&!g?(0,a.jsx)(`button`,{type:`button`,"aria-label":f,className:`ml-1 rounded-[var(--radius-sm)] border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`,onClick:e=>{e.preventDefault(),t.stopInteractivePropagation(e),s?.(void 0)},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:(0,a.jsx)(i.XIcon,{className:`size-3.5`})}):null]}),(0,a.jsxs)(n.SelectContent,{className:t.cn(`w-(--anchor-width)`,b),children:[h?(0,a.jsxs)(`div`,{"data-slot":`select-search`,className:`sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-popover px-2.5 py-2 text-sm`,children:[(0,a.jsx)(i.SearchIcon,{className:`size-4 text-muted-foreground`}),(0,a.jsx)(`input`,{value:E,onChange:e=>D(e.target.value),placeholder:u,className:t.cn(`min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground`,S)})]}):null,g?(0,a.jsxs)(`div`,{"data-slot":`select-state`,className:`flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground`,children:[(0,a.jsx)(i.LoaderCircleIcon,{className:`size-4 animate-spin`}),_]}):k.length===0?(0,a.jsx)(`div`,{"data-slot":`select-state`,className:`rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground`,children:d}):k.map(r=>{let o=r.value===e;return(0,a.jsx)(n.SelectItem,{value:r.value,disabled:r.disabled,className:t.cn(`rounded-[var(--radius-md)]`,x),children:C?C(r,{selected:o}):(0,a.jsxs)(`span`,{className:`flex min-w-0 flex-1 flex-col`,children:[(0,a.jsxs)(`span`,{className:`flex min-w-0 items-center gap-2`,children:[(0,a.jsx)(`span`,{className:`truncate`,children:r.label}),o?(0,a.jsx)(i.CheckIcon,{className:`ml-auto size-3.5 text-primary`}):null]}),r.description&&(0,a.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:r.description})]})},r.value)})]})]})}exports.SimpleSelect=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/select/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o(e,t){let n=t.trim().toLowerCase();return n?[typeof e.label==`string`||typeof e.label==`number`?String(e.label):e.value,e.value,...e.keywords??[]].join(` `).toLowerCase().includes(n):!0}function s({value:e,onValueChange:s,options:c,placeholder:l=`Select`,searchPlaceholder:u=`Search options...`,emptyLabel:d=`No options found`,clearLabel:f=`Clear selection`,size:p=`default`,clearable:m=!1,searchable:h=!1,loading:g=!1,loadingLabel:_=`Loading options...`,disabled:v=!1,showSelectedDescription:y=!0,triggerClassName:b,contentClassName:x,itemClassName:S,searchClassName:C,renderOption:w,invalid:T,onOpenChange:E,...D}){let[O,k]=r.useState(``),A=c.find(t=>t.value===e),j=c.filter(e=>o(e,O));return(0,a.jsxs)(n.Select,{value:e,onValueChange:e=>s?.(e),disabled:v||g,onOpenChange:(e,t)=>{e||k(``),E?.(e,t)},...D,children:[(0,a.jsxs)(n.SelectTrigger,{size:p,"aria-invalid":T||void 0,className:t.cn(`w-full`,b),children:[(0,a.jsx)(n.SelectValue,{placeholder:l,children:A?(0,a.jsxs)(`span`,{className:`flex min-w-0 flex-col items-start`,children:[(0,a.jsx)(`span`,{className:`truncate`,children:A.label}),y&&A.description?(0,a.jsx)(`span`,{className:`truncate text-[11px] font-medium text-muted-foreground`,children:A.description}):null]}):null}),g?(0,a.jsx)(i.LoaderCircleIcon,{className:`size-4 animate-spin text-muted-foreground`}):null,m&&e&&!v&&!g?(0,a.jsx)(`span`,{role:`button`,tabIndex:0,"aria-label":f,className:`ml-1 rounded-[var(--radius-sm)] border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`,onClick:e=>{e.preventDefault(),t.stopInteractivePropagation(e),s?.(void 0)},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),s?.(void 0))},children:(0,a.jsx)(i.XIcon,{className:`size-3.5`})}):null]}),(0,a.jsxs)(n.SelectContent,{className:t.cn(`w-(--anchor-width)`,x),children:[h?(0,a.jsxs)(`div`,{"data-slot":`select-search`,className:`sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-popover px-2.5 py-2 text-sm`,children:[(0,a.jsx)(i.SearchIcon,{className:`size-4 text-muted-foreground`}),(0,a.jsx)(`input`,{value:O,onChange:e=>k(e.target.value),placeholder:u,className:t.cn(`min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground`,C)})]}):null,g?(0,a.jsxs)(`div`,{"data-slot":`select-state`,className:`flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground`,children:[(0,a.jsx)(i.LoaderCircleIcon,{className:`size-4 animate-spin`}),_]}):j.length===0?(0,a.jsx)(`div`,{"data-slot":`select-state`,className:`rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground`,children:d}):j.map(r=>{let o=r.value===e;return(0,a.jsx)(n.SelectItem,{value:r.value,disabled:r.disabled,className:t.cn(`rounded-[var(--radius-md)]`,S),children:w?w(r,{selected:o}):(0,a.jsxs)(`span`,{className:`flex min-w-0 flex-1 flex-col`,children:[(0,a.jsxs)(`span`,{className:`flex min-w-0 items-center gap-2`,children:[(0,a.jsx)(`span`,{className:`truncate`,children:r.label}),o?(0,a.jsx)(i.CheckIcon,{className:`ml-auto size-3.5 text-primary`}):null]}),r.description&&(0,a.jsx)(`span`,{className:`truncate text-xs text-muted-foreground`,children:r.description})]})},r.value)})]})]})}exports.SimpleSelect=s;

package/dist/components/inputs/simple-select.d.ts

@@ -21,6 +21,7 @@ export type SimpleSelectProps = Omit<React.ComponentProps<typeof Select>, "value
     loading?: boolean;
     loadingLabel?: React.ReactNode;
     disabled?: boolean;
+    showSelectedDescription?: boolean;
     triggerClassName?: string;
     contentClassName?: string;
     itemClassName?: string;
@@ -30,5 +31,5 @@ export type SimpleSelectProps = Omit<React.ComponentProps<typeof Select>, "value
     }) => React.ReactNode;
     invalid?: boolean;
 };
-declare function SimpleSelect({ value, onValueChange, options, placeholder, searchPlaceholder, emptyLabel, clearLabel, size, clearable, searchable, loading, loadingLabel, disabled, triggerClassName, contentClassName, itemClassName, searchClassName, renderOption, invalid, ...props }: SimpleSelectProps): React.JSX.Element;
+declare function SimpleSelect({ value, onValueChange, options, placeholder, searchPlaceholder, emptyLabel, clearLabel, size, clearable, searchable, loading, loadingLabel, disabled, showSelectedDescription, triggerClassName, contentClassName, itemClassName, searchClassName, renderOption, invalid, onOpenChange, ...props }: SimpleSelectProps): React.JSX.Element;
 export { SimpleSelect };

package/dist/components/inputs/simple-select.js

@@ -12,25 +12,38 @@ function m(e, t) {
 		...e.keywords ?? []
 	].join(" ").toLowerCase().includes(n) : !0;
 }
-function h({ value: h, onValueChange: g, options: _, placeholder: v = "Select", searchPlaceholder: y = "Search options...", emptyLabel: b = "No options found", clearLabel: x = "Clear selection", size: S = "default", clearable: C = !1, searchable: w = !1, loading: T = !1, loadingLabel: E = "Loading options...", disabled: D = !1, triggerClassName: O, contentClassName: k, itemClassName: A, searchClassName: j, renderOption: M, invalid: N, ...P }) {
-	let [F, I] = s.useState(""), L = _.find((e) => e.value === h), R = _.filter((e) => m(e, F));
+function h({ value: h, onValueChange: g, options: _, placeholder: v = "Select", searchPlaceholder: y = "Search options...", emptyLabel: b = "No options found", clearLabel: x = "Clear selection", size: S = "default", clearable: C = !1, searchable: w = !1, loading: T = !1, loadingLabel: E = "Loading options...", disabled: D = !1, showSelectedDescription: O = !0, triggerClassName: k, contentClassName: A, itemClassName: j, searchClassName: M, renderOption: N, invalid: P, onOpenChange: F, ...I }) {
+	let [L, R] = s.useState(""), z = _.find((e) => e.value === h), B = _.filter((e) => m(e, L));
 	return /* @__PURE__ */ p(n, {
 		value: h,
 		onValueChange: (e) => g?.(e),
 		disabled: D || T,
-		...P,
+		onOpenChange: (e, t) => {
+			e || R(""), F?.(e, t);
+		},
+		...I,
 		children: [/* @__PURE__ */ p(a, {
 			size: S,
-			"aria-invalid": N || void 0,
-			className: e("w-full", O),
+			"aria-invalid": P || void 0,
+			className: e("w-full", k),
 			children: [
 				/* @__PURE__ */ f(o, {
 					placeholder: v,
-					children: L?.label
+					children: z ? /* @__PURE__ */ p("span", {
+						className: "flex min-w-0 flex-col items-start",
+						children: [/* @__PURE__ */ f("span", {
+							className: "truncate",
+							children: z.label
+						}), O && z.description ? /* @__PURE__ */ f("span", {
+							className: "truncate text-[11px] font-medium text-muted-foreground",
+							children: z.description
+						}) : null]
+					}) : null
 				}),
 				T ? /* @__PURE__ */ f(l, { className: "size-4 animate-spin text-muted-foreground" }) : null,
-				C && h && !D && !T ? /* @__PURE__ */ f("button", {
-					type: "button",
+				C && h && !D && !T ? /* @__PURE__ */ f("span", {
+					role: "button",
+					tabIndex: 0,
 					"aria-label": x,
 					className: "ml-1 rounded-[var(--radius-sm)] border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
 					onClick: (e) => {
@@ -38,35 +51,38 @@ function h({ value: h, onValueChange: g, options: _, placeholder: v = "Select",
 					},
 					onMouseDown: t,
 					onDoubleClick: t,
+					onKeyDown: (e) => {
+						(e.key === "Enter" || e.key === " ") && (e.preventDefault(), g?.(void 0));
+					},
 					children: /* @__PURE__ */ f(d, { className: "size-3.5" })
 				}) : null
 			]
 		}), /* @__PURE__ */ p(r, {
-			className: e("w-(--anchor-width)", k),
+			className: e("w-(--anchor-width)", A),
 			children: [w ? /* @__PURE__ */ p("div", {
 				"data-slot": "select-search",
 				className: "sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-popover px-2.5 py-2 text-sm",
 				children: [/* @__PURE__ */ f(u, { className: "size-4 text-muted-foreground" }), /* @__PURE__ */ f("input", {
-					value: F,
-					onChange: (e) => I(e.target.value),
+					value: L,
+					onChange: (e) => R(e.target.value),
 					placeholder: y,
-					className: e("min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground", j)
+					className: e("min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground", M)
 				})]
 			}) : null, T ? /* @__PURE__ */ p("div", {
 				"data-slot": "select-state",
 				className: "flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground",
 				children: [/* @__PURE__ */ f(l, { className: "size-4 animate-spin" }), E]
-			}) : R.length === 0 ? /* @__PURE__ */ f("div", {
+			}) : B.length === 0 ? /* @__PURE__ */ f("div", {
 				"data-slot": "select-state",
 				className: "rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground",
 				children: b
-			}) : R.map((t) => {
+			}) : B.map((t) => {
 				let n = t.value === h;
 				return /* @__PURE__ */ f(i, {
 					value: t.value,
 					disabled: t.disabled,
-					className: e("rounded-[var(--radius-md)]", A),
-					children: M ? M(t, { selected: n }) : /* @__PURE__ */ p("span", {
+					className: e("rounded-[var(--radius-md)]", j),
+					children: N ? N(t, { selected: n }) : /* @__PURE__ */ p("span", {
 						className: "flex min-w-0 flex-1 flex-col",
 						children: [/* @__PURE__ */ p("span", {
 							className: "flex min-w-0 items-center gap-2",

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"),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=_;
+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,c=`18rem`,l=`4.75rem`,u=`min(88vw, 22rem)`;function d({active:e,disabled:n}){return t.cn(`border-[color:transparent] text-foreground/80 hover:border-[color:var(--aui-divider)] hover:bg-[color:color-mix(in_oklch,var(--card),var(--primary)_4%)] hover:text-foreground focus-visible:border-[color:var(--aui-control-border-strong,var(--border))] focus-visible:bg-[color:color-mix(in_oklch,var(--card),var(--primary)_6%)] focus-visible:text-foreground focus-visible:shadow-[0_0_0_3px_color-mix(in_oklch,var(--primary),transparent_86%)]`,e&&`border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_91%)] text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]`,n&&`hover:border-transparent hover:bg-transparent hover:text-foreground/80`)}function f(e){return e.items?.some(e=>!e.hidden)??!1}function p(e){return e.active?!0:e.items?.some(e=>p(e))??!1}function m(e,t){e.onSelect?.(),t?.(e)}function h({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`,d({active:e.active,disabled:e.disabled}),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})]}),u=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(`/`)?u(s?(0,o.jsx)(o.Fragment,{children:s({item:e,href:e.href,...c,onClick:t=>{if(e.disabled){t.preventDefault();return}m(e,a)},children:l})}):(0,o.jsx)(`a`,{href:e.href,...c,onClick:t=>{if(e.disabled){t.preventDefault();return}m(e,a)},children:l})):e.href?u((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(m(e,a),t.startsWith(`http`)){window.open(t,`_blank`,`noopener,noreferrer`);return}window.location.assign(t)}},children:l})):u((0,o.jsx)(`button`,{type:`button`,disabled:e.disabled,...c,onClick:()=>{e.disabled||m(e,a)},children:l}))}function g({items:e,collapsed:r,depth:a,onItemSelect:s,renderLink:c}){return e.map(e=>{if(e.hidden)return null;let l=f(e),u=p(e),m=!r&&a===0&&e.sectionLabel;if(!l)return(0,o.jsxs)(i.Fragment,{children:[m?(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)(h,{item:e,collapsed:r,depth:a,onItemSelect:s,renderLink:c})]},e.key);let _=e.defaultExpanded??u;return(0,o.jsxs)(`div`,{"data-slot":`app-sidebar-group`,"data-depth":a,children:[m&&(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:_,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]`,d({active:u}),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)(g,{items:e.items??[],collapsed:r,depth:a+1,onItemSelect:s,renderLink:c})})]})]},e.key)})}function _({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`,d({active:e.active,disabled:e.disabled}),r&&`justify-center px-2`),disabled:e.disabled,onClick:()=>{e.disabled||m(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 v({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]`,d({}),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 y({className:e,style:r,header:s,footer:u,items:d=[],collapsed:f=!1,width:p=c,collapsedWidth:m=l,collapsedRail:h,railItems:y=[],footerAccount:b,secondaryActions:x=[],footerSecondary:S,tooltipOnCollapsed:C,onItemSelect:w,renderItem:T,renderLink:E,children:D,mobile:O,mobileTitle:k,mobileDescription:A,onRequestClose:j,closeOnSelect:M=!0,...N}){let P=d.filter(e=>!e.hidden),F=y.filter(e=>!e.hidden),I=x.filter(e=>!e.hidden),L=i.useCallback(e=>{w?.(e),O&&M&&j?.()},[M,O,w,j]),R=O&&(k||A||j);return(0,o.jsxs)(`aside`,{"data-slot":`app-sidebar`,"data-collapsed":f||void 0,"data-mobile":O||void 0,className:t.cn(`flex h-full min-h-0 flex-col overflow-hidden`,e),style:{width:f?m:p,minWidth:f?m:p,...r},...N,children:[(s||R)&&(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:[s??null,R?(0,o.jsxs)(`div`,{className:t.cn(s&&`mt-3`),children:[k?(0,o.jsx)(`p`,{className:`text-sm font-semibold text-foreground`,children:k}):null,A?(0,o.jsx)(`p`,{className:`mt-1 text-xs leading-5 text-muted-foreground`,children:A}):null]}):null]}),O&&j?(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:j,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:[D??P.map(e=>{if(!T)return null;let t=T(e,{collapsed:f});return!f||!C?(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)}),!D&&!T&&(0,o.jsx)(g,{items:P,collapsed:f,depth:0,onItemSelect:L,renderLink:E})]}),(b||S||u||I.length>0||f&&(h||F.length>0))&&(0,o.jsxs)(`div`,{"data-slot":`app-sidebar-footer`,className:`shrink-0 border-t p-3`,children:[f?(0,o.jsxs)(o.Fragment,{children:[F.length>0?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-rail-actions`,className:`grid gap-2`,children:F.map(e=>(0,o.jsx)(_,{item:e,collapsed:!0,onItemSelect:L},e.key))}):null,h?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-rail`,children:h}):null]}):null,!f&&b?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-account-wrap`,className:`mb-3`,children:(0,o.jsx)(v,{account:b,collapsed:!1,onAfterSelect:()=>{O&&M&&j?.()}})}):null,!f&&I.length>0?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-secondary-actions`,className:`mb-3 grid gap-2`,children:I.map(e=>(0,o.jsx)(_,{item:e,collapsed:!1,onItemSelect:L},e.key))}):null,!f&&S?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-footer-secondary`,className:`mb-3`,children:S}):null,f&&b?(0,o.jsx)(`div`,{"data-slot":`app-sidebar-account-wrap`,children:(0,o.jsx)(v,{account:b,collapsed:!0,onAfterSelect:()=>{O&&M&&j?.()}})}):null,!f&&u]})]})}function b({className:e,header:n,footer:d,items:f=[],collapsed:p=!1,width:m=c,collapsedWidth:h=l,mobileWidth:g=u,collapsedRail:_,railItems:v=[],footerAccount:b,secondaryActions:x=[],footerSecondary:S,tooltipOnCollapsed:C=!0,responsive:w=!0,mobileBreakpoint:T=s,mobileOpen:E,defaultMobileOpen:D=!1,onMobileOpenChange:O,mobileTitle:k,mobileDescription:A,mobileToggleLabel:j=`Open navigation`,mobileToggleIcon:M,showMobileToggle:N=!0,closeOnSelect:P=!0,mobileToggleClassName:F,mobilePanelClassName:I,mobileOverlayClassName:L,renderMobileToggle:R,onItemSelect:z,renderItem:B,renderLink:V,children:H,...U}){let W=w?r.useIsMobile(T):!1,[G,K]=i.useState(D),q=E??G,J=i.useCallback(e=>{E??K(e),O?.(e)},[E,O]);i.useEffect(()=>{!W&&q&&J(!1)},[W,q,J]),i.useEffect(()=>{if(!W||!q)return;let e=document.body.style.overflow;document.body.style.overflow=`hidden`;let t=e=>{e.key===`Escape`&&J(!1)};return window.addEventListener(`keydown`,t),()=>{document.body.style.overflow=e,window.removeEventListener(`keydown`,t)}},[W,q,J]);let Y={className:e,header:n,footer:d,items:f,collapsed:p,width:m,collapsedWidth:h,collapsedRail:_,railItems:v,footerAccount:b,secondaryActions:x,footerSecondary:S,tooltipOnCollapsed:C,closeOnSelect:P,onItemSelect:z,renderItem:B,renderLink:V,children:H,...U};if(!w||!W)return(0,o.jsx)(y,{...Y});let X=(0,o.jsxs)(`button`,{type:`button`,"aria-label":q?`Close navigation`:j,"data-slot":`app-sidebar-mobile-trigger`,"data-state":q?`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)]`,F),onClick:()=>J(!q),children:[(0,o.jsx)(`span`,{className:`inline-flex size-8 items-center justify-center rounded-lg bg-[color:var(--aui-page-bg-alt)]`,children:M??(0,o.jsx)(a.MenuIcon,{className:`size-4`})}),(0,o.jsx)(`span`,{children:q?`Close navigation`:j})]});return(0,o.jsxs)(o.Fragment,{children:[N?R?R({open:q,setOpen:J}):X: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":q?`open`:`closed`,className:t.cn(`fixed inset-0 z-40 bg-black/45 transition-opacity duration-200`,q?`opacity-100`:`pointer-events-none opacity-0`,L),onClick:()=>J(!1)}),(0,o.jsx)(y,{...Y,mobile:!0,collapsed:!1,mobileTitle:k,mobileDescription:A,onRequestClose:()=>J(!1),"data-state":q?`open`:`closed`,role:`dialog`,"aria-modal":`true`,"aria-label":typeof k==`string`?k:`Navigation`,className:t.cn(`fixed inset-y-0 left-0 z-50 max-w-[22rem] border-r border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] shadow-2xl transition-transform duration-200 ease-out`,q?`translate-x-0`:`-translate-x-full`,I,e),style:{width:g,minWidth:g}})]})]})}var x=b;exports.AppSidebar=b,exports.Sidebar=x;

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

@@ -28,6 +28,9 @@ export type AppSidebarProps = React.ComponentProps<"aside"> & {
     footer?: React.ReactNode;
     items?: AppSidebarNavItem[];
     collapsed?: boolean;
+    width?: React.CSSProperties["width"];
+    collapsedWidth?: React.CSSProperties["width"];
+    mobileWidth?: React.CSSProperties["width"];
     collapsedRail?: React.ReactNode;
     railItems?: AppSidebarNavItem[];
     footerAccount?: AppSidebarFooterAccount;
@@ -61,7 +64,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, 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;
+declare function AppSidebar({ className, header, footer, items, collapsed, width, collapsedWidth, mobileWidth, 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.
  */