tembro 3.0.0 → 3.1.1

package/dist/src/components/layout/app-sidebar.js

@@ -0,0 +1,471 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Tooltip as t } from "../ui/tooltip/index.js";
+import { useIsMobile as n } from "../../hooks/use-is-mobile.js";
+import * as r from "react";
+import { ChevronRightIcon as i, MenuIcon as a, XIcon as o } from "lucide-react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/layout/app-sidebar.tsx
+var u = 1024, d = "18rem", f = "4.75rem", p = "min(88vw, 22rem)";
+function m({ active: t, disabled: n }) {
+	return e("border border-transparent bg-transparent text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_18%)] hover:border-[color:var(--aui-sidebar-item-active-border)] hover:bg-[color:var(--aui-sidebar-item-hover-bg)] hover:text-[color:var(--sidebar-foreground)] focus-visible:border-[color:var(--sidebar-ring)] focus-visible:bg-[color:var(--aui-sidebar-item-hover-bg)] focus-visible:text-[color:var(--sidebar-foreground)] focus-visible:shadow-[0_0_0_3px_color-mix(in_oklch,var(--sidebar-ring),transparent_82%)]", t && "border-[color:var(--aui-sidebar-item-active-border)] bg-[color:var(--aui-sidebar-item-active-bg)] text-[color:var(--aui-sidebar-item-active-fg)] shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_10px_24px_color-mix(in_oklch,var(--sidebar-primary),transparent_88%)]", n && "hover:border-transparent hover:bg-transparent hover:text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_18%)]");
+}
+function h(e) {
+	return e.items?.some((e) => !e.hidden) ?? !1;
+}
+function g(e) {
+	return e.active ? !0 : e.items?.some((e) => g(e)) ?? !1;
+}
+function _(e, t) {
+	e.onSelect?.(), t?.(e);
+}
+function v({ item: n, collapsed: r, depth: i, onItemSelect: a, renderLink: o }) {
+	let u = {
+		"aria-current": n.current ?? (n.active ? "page" : void 0),
+		"aria-disabled": n.disabled || void 0,
+		"data-slot": "app-sidebar-item",
+		"data-active": n.active || void 0,
+		"data-disabled": n.disabled || void 0,
+		"data-depth": String(i),
+		className: e("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", m({
+			active: n.active,
+			disabled: n.disabled
+		}), r && "justify-center px-2")
+	}, d = /* @__PURE__ */ l(s, { children: [
+		n.icon && /* @__PURE__ */ c("span", {
+			className: "shrink-0",
+			children: n.icon
+		}),
+		!r && /* @__PURE__ */ c("span", {
+			className: "min-w-0 flex-1 truncate",
+			children: n.label
+		}),
+		!r && n.badge && /* @__PURE__ */ c("span", {
+			className: "shrink-0",
+			children: n.badge
+		})
+	] }), f = (e) => r ? /* @__PURE__ */ c(t, {
+		content: n.tooltip ?? n.label,
+		side: "right",
+		children: /* @__PURE__ */ c("span", {
+			className: "block",
+			children: e
+		})
+	}) : e;
+	return n.href?.startsWith("/") ? f(o ? /* @__PURE__ */ c(s, { children: o({
+		item: n,
+		href: n.href,
+		...u,
+		onClick: (e) => {
+			if (n.disabled) {
+				e.preventDefault();
+				return;
+			}
+			_(n, a);
+		},
+		children: d
+	}) }) : /* @__PURE__ */ c("a", {
+		href: n.href,
+		...u,
+		onClick: (e) => {
+			if (n.disabled) {
+				e.preventDefault();
+				return;
+			}
+			_(n, a);
+		},
+		children: d
+	})) : n.href ? f(/* @__PURE__ */ c("button", {
+		type: "button",
+		...u,
+		className: e(u.className, "w-full"),
+		onClick: () => {
+			if (n.disabled) return;
+			let e = n.href;
+			if (e) {
+				if (_(n, a), e.startsWith("http")) {
+					window.open(e, "_blank", "noopener,noreferrer");
+					return;
+				}
+				window.location.assign(e);
+			}
+		},
+		children: d
+	})) : f(/* @__PURE__ */ c("button", {
+		type: "button",
+		disabled: n.disabled,
+		...u,
+		onClick: () => {
+			n.disabled || _(n, a);
+		},
+		children: d
+	}));
+}
+function y({ items: n, collapsed: a, depth: o, onItemSelect: s, renderLink: u }) {
+	return n.map((n) => {
+		if (n.hidden) return null;
+		let d = h(n), f = g(n), p = !a && o === 0 && n.sectionLabel;
+		if (!d) return /* @__PURE__ */ l(r.Fragment, { children: [p ? /* @__PURE__ */ c("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: n.sectionLabel
+		}) : null, /* @__PURE__ */ c(v, {
+			item: n,
+			collapsed: a,
+			depth: o,
+			onItemSelect: s,
+			renderLink: u
+		})] }, n.key);
+		let _ = n.defaultExpanded ?? f;
+		return /* @__PURE__ */ l("div", {
+			"data-slot": "app-sidebar-group",
+			"data-depth": o,
+			children: [p && /* @__PURE__ */ c("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: n.sectionLabel
+			}), /* @__PURE__ */ l("details", {
+				"data-slot": "app-sidebar-group-details",
+				open: _,
+				className: "group/app-sidebar-details",
+				children: [/* @__PURE__ */ l("summary", {
+					"data-slot": "app-sidebar-group-trigger",
+					className: e("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]", m({ active: f }), a ? "justify-center px-2" : "px-2.5"),
+					children: [
+						n.icon ? a ? /* @__PURE__ */ c(t, {
+							content: n.tooltip ?? n.label,
+							side: "right",
+							children: /* @__PURE__ */ c("span", {
+								className: "shrink-0",
+								children: n.icon
+							})
+						}) : /* @__PURE__ */ c("span", {
+							className: "shrink-0",
+							children: n.icon
+						}) : null,
+						!a && /* @__PURE__ */ c("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: n.label
+						}),
+						!a && n.badge && /* @__PURE__ */ c("span", {
+							className: "shrink-0",
+							children: n.badge
+						}),
+						!a && /* @__PURE__ */ c(i, {
+							"data-slot": "app-sidebar-group-chevron",
+							className: "ml-auto size-3.5 shrink-0 text-muted-foreground transition-transform group-open/app-sidebar-details:rotate-90"
+						})
+					]
+				}), /* @__PURE__ */ c("div", {
+					"data-slot": "app-sidebar-group-content",
+					className: e("mt-1 space-y-1", !a && "pl-3"),
+					children: /* @__PURE__ */ c(y, {
+						items: n.items ?? [],
+						collapsed: a,
+						depth: o + 1,
+						onItemSelect: s,
+						renderLink: u
+					})
+				})]
+			})]
+		}, n.key);
+	});
+}
+function b({ item: n, collapsed: r, onItemSelect: i }) {
+	let a = /* @__PURE__ */ l("button", {
+		type: "button",
+		"data-slot": "app-sidebar-action",
+		"data-active": n.active || void 0,
+		"data-disabled": n.disabled || void 0,
+		className: e("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", m({
+			active: n.active,
+			disabled: n.disabled
+		}), r && "justify-center px-2"),
+		disabled: n.disabled,
+		onClick: () => {
+			n.disabled || _(n, i);
+		},
+		children: [
+			n.icon ? /* @__PURE__ */ c("span", {
+				className: "shrink-0",
+				children: n.icon
+			}) : null,
+			r ? null : /* @__PURE__ */ c("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: n.label
+			}),
+			!r && n.badge ? /* @__PURE__ */ c("span", {
+				className: "shrink-0",
+				children: n.badge
+			}) : null
+		]
+	});
+	return r ? /* @__PURE__ */ c(t, {
+		content: n.tooltip ?? n.label,
+		side: "right",
+		children: /* @__PURE__ */ c("span", {
+			className: "block",
+			children: a
+		})
+	}) : a;
+}
+function x({ account: n, collapsed: r, onAfterSelect: i }) {
+	let a = /* @__PURE__ */ l("button", {
+		type: "button",
+		"data-slot": "app-sidebar-account",
+		className: e("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]", m({}), r ? "justify-center px-2 py-2.5" : "px-3 py-2.5"),
+		onClick: () => {
+			if (n.onSelect?.(), i?.(), n.href) {
+				if (n.href.startsWith("http")) {
+					window.open(n.href, "_blank", "noopener,noreferrer");
+					return;
+				}
+				window.location.assign(n.href);
+			}
+		},
+		children: [n.avatar ? /* @__PURE__ */ c("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: n.avatar
+		}) : null, r ? null : /* @__PURE__ */ l("span", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ c("span", {
+				"data-slot": "app-sidebar-account-label",
+				className: "block truncate text-sm font-semibold text-foreground",
+				children: n.label
+			}), n.description ? /* @__PURE__ */ c("span", {
+				"data-slot": "app-sidebar-account-description",
+				className: "block truncate text-xs text-muted-foreground",
+				children: n.description
+			}) : null]
+		})]
+	});
+	return r ? /* @__PURE__ */ c(t, {
+		content: n.tooltip ?? n.label,
+		side: "right",
+		children: /* @__PURE__ */ c("span", {
+			className: "block",
+			children: a
+		})
+	}) : a;
+}
+function S({ className: n, style: i, header: a, footer: u, items: p = [], collapsed: m = !1, width: h = d, collapsedWidth: g = f, collapsedRail: _, railItems: v = [], footerAccount: S, secondaryActions: C = [], footerSecondary: w, footerClassName: T, tooltipOnCollapsed: E, onItemSelect: D, renderItem: O, renderLink: k, children: A, mobile: j, mobileTitle: M, mobileDescription: N, onRequestClose: P, closeOnSelect: F = !0, ...I }) {
+	let L = p.filter((e) => !e.hidden), R = v.filter((e) => !e.hidden), z = C.filter((e) => !e.hidden), B = r.useCallback((e) => {
+		D?.(e), j && F && P?.();
+	}, [
+		F,
+		j,
+		D,
+		P
+	]), V = j && (M || N || P);
+	return /* @__PURE__ */ l("aside", {
+		"data-slot": "app-sidebar",
+		"data-collapsed": m || void 0,
+		"data-mobile": j || void 0,
+		className: e("flex h-full min-h-0 flex-col overflow-hidden", n),
+		style: {
+			width: m ? g : h,
+			minWidth: m ? g : h,
+			...i
+		},
+		...I,
+		children: [
+			(a || V) && /* @__PURE__ */ c("div", {
+				"data-slot": "app-sidebar-header",
+				className: "shrink-0 border-b p-3",
+				children: /* @__PURE__ */ l("div", {
+					className: "flex items-start gap-3",
+					children: [/* @__PURE__ */ l("div", {
+						className: "min-w-0 flex-1",
+						children: [a ?? null, V ? /* @__PURE__ */ l("div", {
+							className: e(a && "mt-3"),
+							children: [M ? /* @__PURE__ */ c("p", {
+								className: "text-sm font-semibold text-foreground",
+								children: M
+							}) : null, N ? /* @__PURE__ */ c("p", {
+								className: "mt-1 text-xs leading-5 text-muted-foreground",
+								children: N
+							}) : null]
+						}) : null]
+					}), j && P ? /* @__PURE__ */ c("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: P,
+						children: /* @__PURE__ */ c(o, { className: "size-4" })
+					}) : null]
+				})
+			}),
+			/* @__PURE__ */ l("nav", {
+				"data-slot": "app-sidebar-nav",
+				className: "min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2",
+				children: [A ?? L.map((e) => {
+					if (!O) return null;
+					let n = O(e, { collapsed: m });
+					return !m || !E ? /* @__PURE__ */ c(r.Fragment, { children: n }, e.key) : /* @__PURE__ */ c(t, {
+						content: e.tooltip ?? e.label,
+						side: "right",
+						children: /* @__PURE__ */ c("span", {
+							className: "block",
+							children: n
+						})
+					}, e.key);
+				}), !A && !O && /* @__PURE__ */ c(y, {
+					items: L,
+					collapsed: m,
+					depth: 0,
+					onItemSelect: B,
+					renderLink: k
+				})]
+			}),
+			(S || w || u || z.length > 0 || m && (_ || R.length > 0)) && /* @__PURE__ */ l("div", {
+				"data-slot": "app-sidebar-footer",
+				className: e("shrink-0 border-t p-3", T),
+				children: [
+					m ? /* @__PURE__ */ l(s, { children: [R.length > 0 ? /* @__PURE__ */ c("div", {
+						"data-slot": "app-sidebar-rail-actions",
+						className: "grid gap-2",
+						children: R.map((e) => /* @__PURE__ */ c(b, {
+							item: e,
+							collapsed: !0,
+							onItemSelect: B
+						}, e.key))
+					}) : null, _ ? /* @__PURE__ */ c("div", {
+						"data-slot": "app-sidebar-rail",
+						children: _
+					}) : null] }) : null,
+					!m && S ? /* @__PURE__ */ c("div", {
+						"data-slot": "app-sidebar-account-wrap",
+						className: "mb-3",
+						children: /* @__PURE__ */ c(x, {
+							account: S,
+							collapsed: !1,
+							onAfterSelect: () => {
+								j && F && P?.();
+							}
+						})
+					}) : null,
+					!m && z.length > 0 ? /* @__PURE__ */ c("div", {
+						"data-slot": "app-sidebar-secondary-actions",
+						className: "mb-3 grid gap-2",
+						children: z.map((e) => /* @__PURE__ */ c(b, {
+							item: e,
+							collapsed: !1,
+							onItemSelect: B
+						}, e.key))
+					}) : null,
+					!m && w ? /* @__PURE__ */ c("div", {
+						"data-slot": "app-sidebar-footer-secondary",
+						className: "mb-3",
+						children: w
+					}) : null,
+					m && S ? /* @__PURE__ */ c("div", {
+						"data-slot": "app-sidebar-account-wrap",
+						children: /* @__PURE__ */ c(x, {
+							account: S,
+							collapsed: !0,
+							onAfterSelect: () => {
+								j && F && P?.();
+							}
+						})
+					}) : null,
+					!m && u
+				]
+			})
+		]
+	});
+}
+function C({ className: t, header: i, footer: o, items: m = [], collapsed: h = !1, width: g = d, collapsedWidth: _ = f, mobileWidth: v = p, collapsedRail: y, railItems: b = [], footerAccount: x, secondaryActions: C = [], footerSecondary: w, tooltipOnCollapsed: T = !0, responsive: E = !0, mobileBreakpoint: D = u, mobileOpen: O, defaultMobileOpen: k = !1, onMobileOpenChange: A, mobileTitle: j, mobileDescription: M, mobileToggleLabel: N = "Open navigation", mobileToggleIcon: P, showMobileToggle: F = !0, closeOnSelect: I = !0, mobileToggleClassName: L, mobilePanelClassName: R, mobileOverlayClassName: z, renderMobileToggle: B, onItemSelect: V, renderItem: H, renderLink: U, children: W, ...G }) {
+	let K = n(D), q = E && K, [J, Y] = r.useState(k), X = O ?? J, Z = r.useCallback((e) => {
+		O ?? Y(e), A?.(e);
+	}, [O, A]);
+	r.useEffect(() => {
+		!q && X && Z(!1);
+	}, [
+		q,
+		X,
+		Z
+	]), r.useEffect(() => {
+		if (!q || !X) return;
+		let e = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		let t = (e) => {
+			e.key === "Escape" && Z(!1);
+		};
+		return window.addEventListener("keydown", t), () => {
+			document.body.style.overflow = e, window.removeEventListener("keydown", t);
+		};
+	}, [
+		q,
+		X,
+		Z
+	]);
+	let Q = {
+		className: t,
+		header: i,
+		footer: o,
+		items: m,
+		collapsed: h,
+		width: g,
+		collapsedWidth: _,
+		collapsedRail: y,
+		railItems: b,
+		footerAccount: x,
+		secondaryActions: C,
+		footerSecondary: w,
+		tooltipOnCollapsed: T,
+		closeOnSelect: I,
+		onItemSelect: V,
+		renderItem: H,
+		renderLink: U,
+		children: W,
+		...G
+	};
+	if (!E || !q) return /* @__PURE__ */ c(S, { ...Q });
+	let $ = /* @__PURE__ */ l("button", {
+		type: "button",
+		"aria-label": X ? "Close navigation" : N,
+		"data-slot": "app-sidebar-mobile-trigger",
+		"data-state": X ? "open" : "closed",
+		className: e("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)]", L),
+		onClick: () => Z(!X),
+		children: [/* @__PURE__ */ c("span", {
+			className: "inline-flex size-8 items-center justify-center rounded-lg bg-[color:var(--aui-page-bg-alt)]",
+			children: P ?? /* @__PURE__ */ c(a, { className: "size-4" })
+		}), /* @__PURE__ */ c("span", { children: X ? "Close navigation" : N })]
+	});
+	return /* @__PURE__ */ l(s, { children: [F ? B ? B({
+		open: X,
+		setOpen: Z
+	}) : $ : null, /* @__PURE__ */ l("div", {
+		"data-slot": "app-sidebar-mobile-root",
+		className: "relative z-40",
+		children: [/* @__PURE__ */ c("button", {
+			type: "button",
+			"aria-label": "Dismiss navigation",
+			"data-slot": "app-sidebar-mobile-overlay",
+			"data-state": X ? "open" : "closed",
+			className: e("fixed inset-0 z-40 bg-black/45 transition-opacity duration-200", X ? "opacity-100" : "pointer-events-none opacity-0", z),
+			onClick: () => Z(!1)
+		}), /* @__PURE__ */ c(S, {
+			...Q,
+			mobile: !0,
+			collapsed: !1,
+			mobileTitle: j,
+			mobileDescription: M,
+			onRequestClose: () => Z(!1),
+			"data-state": X ? "open" : "closed",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": typeof j == "string" ? j : "Navigation",
+			className: e("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", X ? "translate-x-0" : "-translate-x-full", R, t),
+			style: {
+				width: v,
+				minWidth: v
+			}
+		})]
+	})] });
+}
+//#endregion
+export { C as Sidebar };

package/dist/src/components/layout/breadcrumbs.cjs

@@ -0,0 +1 @@
+"use client";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("lucide-react"),i=require("react/jsx-runtime");function a(e,t,n){if(e.length<=t||t<3)return e;let r=e[0],i=Math.max(t-2,1),a=e.slice(-i);return[r,{key:`__collapsed__`,label:n},...a]}function o({className:e,items:o,maxItems:s,collapseLabel:c=`…`,separator:l=(0,i.jsx)(r.ChevronRightIcon,{className:`size-3.5`}),wrap:u=!1,currentItemLabel:d,renderLink:f,...p}){let m=n.useMemo(()=>typeof s==`number`?a(o,s,c):o,[c,o,s]);return(0,i.jsx)(`nav`,{"data-slot":`breadcrumbs`,"aria-label":`Breadcrumb`,className:t.cn(`flex min-w-0 items-center gap-1 overflow-x-auto text-sm text-muted-foreground`,u?`flex-wrap`:`whitespace-nowrap`,e),...p,children:m.map((e,r)=>{let a=e.key===`__collapsed__`,o=r===m.length-1,s=e.current||o;return(0,i.jsxs)(n.Fragment,{children:[r>0&&(0,i.jsx)(`span`,{className:`shrink-0 opacity-60`,children:l}),a?(0,i.jsx)(`span`,{"data-slot":`breadcrumbs-collapsed`,className:`shrink-0 rounded-full border border-border/65 px-2 py-0.5 text-xs text-muted-foreground`,children:e.label}):e.href&&!s?f?f({item:e,href:e.href,"data-slot":`breadcrumbs-link`,className:`truncate rounded-[var(--radius-sm)] px-1 py-0.5 transition-colors hover:bg-accent/55 hover:text-foreground`,onClick:()=>e.onSelect?.(),children:(0,i.jsxs)(`span`,{className:`inline-flex min-w-0 items-center gap-1.5`,children:[e.icon?(0,i.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,(0,i.jsx)(`span`,{className:`truncate`,children:e.label})]})}):(0,i.jsx)(`a`,{href:e.href,"data-slot":`breadcrumbs-link`,className:`truncate rounded-[var(--radius-sm)] px-1 py-0.5 transition-colors hover:bg-accent/55 hover:text-foreground`,onClick:()=>e.onSelect?.(),children:(0,i.jsxs)(`span`,{className:`inline-flex min-w-0 items-center gap-1.5`,children:[e.icon?(0,i.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,(0,i.jsx)(`span`,{className:`truncate`,children:e.label})]})}):(0,i.jsxs)(`span`,{"data-slot":`breadcrumbs-current`,"aria-current":s?e.currentLabel??d??`page`:void 0,className:t.cn(`inline-flex min-w-0 items-center gap-1.5 truncate rounded-[var(--radius-sm)] px-1 py-0.5`,s&&`bg-accent/45 font-medium text-foreground`),children:[e.icon?(0,i.jsx)(`span`,{className:`shrink-0`,children:e.icon}):null,(0,i.jsx)(`span`,{className:`truncate`,children:e.label})]})]},e.key)})})}exports.Breadcrumbs=o;

package/dist/src/components/layout/breadcrumbs.js

@@ -0,0 +1,86 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { ChevronRightIcon as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/layout/breadcrumbs.tsx
+function a(e, t, n) {
+	if (e.length <= t || t < 3) return e;
+	let r = e[0], i = Math.max(t - 2, 1), a = e.slice(-i);
+	return [
+		r,
+		{
+			key: "__collapsed__",
+			label: n
+		},
+		...a
+	];
+}
+function o({ className: o, items: s, maxItems: c, collapseLabel: l = "…", separator: u = /* @__PURE__ */ r(n, { className: "size-3.5" }), wrap: d = !1, currentItemLabel: f, renderLink: p, ...m }) {
+	let h = t.useMemo(() => typeof c == "number" ? a(s, c, l) : s, [
+		l,
+		s,
+		c
+	]);
+	return /* @__PURE__ */ r("nav", {
+		"data-slot": "breadcrumbs",
+		"aria-label": "Breadcrumb",
+		className: e("flex min-w-0 items-center gap-1 overflow-x-auto text-sm text-muted-foreground", d ? "flex-wrap" : "whitespace-nowrap", o),
+		...m,
+		children: h.map((n, a) => {
+			let o = n.key === "__collapsed__", s = a === h.length - 1, c = n.current || s;
+			return /* @__PURE__ */ i(t.Fragment, { children: [a > 0 && /* @__PURE__ */ r("span", {
+				className: "shrink-0 opacity-60",
+				children: u
+			}), o ? /* @__PURE__ */ r("span", {
+				"data-slot": "breadcrumbs-collapsed",
+				className: "shrink-0 rounded-full border border-border/65 px-2 py-0.5 text-xs text-muted-foreground",
+				children: n.label
+			}) : n.href && !c ? p ? p({
+				item: n,
+				href: n.href,
+				"data-slot": "breadcrumbs-link",
+				className: "truncate rounded-[var(--radius-sm)] px-1 py-0.5 transition-colors hover:bg-accent/55 hover:text-foreground",
+				onClick: () => n.onSelect?.(),
+				children: /* @__PURE__ */ i("span", {
+					className: "inline-flex min-w-0 items-center gap-1.5",
+					children: [n.icon ? /* @__PURE__ */ r("span", {
+						className: "shrink-0",
+						children: n.icon
+					}) : null, /* @__PURE__ */ r("span", {
+						className: "truncate",
+						children: n.label
+					})]
+				})
+			}) : /* @__PURE__ */ r("a", {
+				href: n.href,
+				"data-slot": "breadcrumbs-link",
+				className: "truncate rounded-[var(--radius-sm)] px-1 py-0.5 transition-colors hover:bg-accent/55 hover:text-foreground",
+				onClick: () => n.onSelect?.(),
+				children: /* @__PURE__ */ i("span", {
+					className: "inline-flex min-w-0 items-center gap-1.5",
+					children: [n.icon ? /* @__PURE__ */ r("span", {
+						className: "shrink-0",
+						children: n.icon
+					}) : null, /* @__PURE__ */ r("span", {
+						className: "truncate",
+						children: n.label
+					})]
+				})
+			}) : /* @__PURE__ */ i("span", {
+				"data-slot": "breadcrumbs-current",
+				"aria-current": c ? n.currentLabel ?? f ?? "page" : void 0,
+				className: e("inline-flex min-w-0 items-center gap-1.5 truncate rounded-[var(--radius-sm)] px-1 py-0.5", c && "bg-accent/45 font-medium text-foreground"),
+				children: [n.icon ? /* @__PURE__ */ r("span", {
+					className: "shrink-0",
+					children: n.icon
+				}) : null, /* @__PURE__ */ r("span", {
+					className: "truncate",
+					children: n.label
+				})]
+			})] }, n.key);
+		})
+	});
+}
+//#endregion
+export { o as Breadcrumbs };

package/dist/src/components/layout/demo.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`app-header`,`AppHeader`,`layout`,`Sticky product header with left, center and right slots.`),e.component(`section-header`,`SectionHeader`,`layout`,`Reusable section title block with actions and metadata.`),e.component(`stat-card`,`StatCard`,`layout`,`Dashboard stat card for KPI, trend and helper text.`)]);exports.layoutShowcaseDemoRegistry=t;

package/dist/src/components/layout/demo.js

@@ -0,0 +1,9 @@
+import { component as e, createShowcaseDemoRegistry as t } from "../../showcase/create-demo.js";
+//#region src/components/layout/demo.tsx
+var n = t([
+	e("app-header", "AppHeader", "layout", "Sticky product header with left, center and right slots."),
+	e("section-header", "SectionHeader", "layout", "Reusable section title block with actions and metadata."),
+	e("stat-card", "StatCard", "layout", "Dashboard stat card for KPI, trend and helper text.")
+]);
+//#endregion
+export { n as layoutShowcaseDemoRegistry };

package/dist/src/components/layout/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./app-sidebar.cjs"),t=require("./breadcrumbs.cjs"),n=require("./page-container.cjs"),r=require("./section.cjs"),i=require("./sidebar-nav.cjs"),a=require("./sticky-footer-bar.cjs"),o=require("./stat-card.cjs"),s=require("./app-header.cjs");exports.AppHeader=s.AppHeader,exports.Breadcrumbs=t.Breadcrumbs,exports.PageContainer=n.PageContainer,exports.Section=r.Section,exports.Sidebar=e.Sidebar,exports.SidebarNav=i.SidebarNav,exports.SplitLayout=r.SplitLayout,exports.StatCard=o.StatCard,exports.StickyFooterBar=a.StickyFooterBar,exports.Toolbar=r.Toolbar;

package/dist/src/components/layout/index.js

@@ -0,0 +1,9 @@
+import { Sidebar as e } from "./app-sidebar.js";
+import { Breadcrumbs as t } from "./breadcrumbs.js";
+import { PageContainer as n } from "./page-container.js";
+import { Section as r, SplitLayout as i, Toolbar as a } from "./section.js";
+import { SidebarNav as o } from "./sidebar-nav.js";
+import { StickyFooterBar as s } from "./sticky-footer-bar.js";
+import { StatCard as c } from "./stat-card.js";
+import { AppHeader as l } from "./app-header.js";
+export { l as AppHeader, t as Breadcrumbs, n as PageContainer, r as Section, e as Sidebar, o as SidebarNav, i as SplitLayout, c as StatCard, s as StickyFooterBar, a as Toolbar };

package/dist/src/components/layout/page-container.cjs

@@ -0,0 +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");var i={sm:`max-w-3xl`,md:`max-w-5xl`,lg:`max-w-6xl`,xl:`max-w-7xl`,default:`max-w-7xl`,full:`max-w-none`};function a({className:e,size:n=`default`,...a}){return(0,r.jsx)(`div`,{"data-slot":`page-container`,className:t.cn(`mx-auto flex w-full flex-col gap-4`,i[n],e),...a})}exports.PageContainer=a;

package/dist/src/components/layout/page-container.js

@@ -0,0 +1,21 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/layout/page-container.tsx
+var n = {
+	sm: "max-w-3xl",
+	md: "max-w-5xl",
+	lg: "max-w-6xl",
+	xl: "max-w-7xl",
+	default: "max-w-7xl",
+	full: "max-w-none"
+};
+function r({ className: r, size: i = "default", ...a }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "page-container",
+		className: e("mx-auto flex w-full flex-col gap-4", n[i], r),
+		...a
+	});
+}
+//#endregion
+export { r as PageContainer };

package/dist/src/components/layout/page-header.cjs

@@ -0,0 +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("class-variance-authority"),i=require("react/jsx-runtime");var a=(0,r.cva)(`flex flex-col border transition-[background-color,border-color,box-shadow]`,{variants:{variant:{default:`border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/5`,elevated:`border-border/70 bg-card shadow-[0_1px_2px_rgba(15,23,42,0.06),0_18px_45px_rgba(15,23,42,0.08)] ring-1 ring-foreground/5`,outline:`border-border bg-transparent shadow-none`,ghost:`border-transparent bg-transparent shadow-none`,soft:`border-transparent bg-muted/45 shadow-none`},size:{sm:`gap-3 rounded-[var(--radius-2xl)] p-4`,default:`gap-4 rounded-[var(--radius-3xl)] p-5`,lg:`gap-5 rounded-[calc(var(--radius-3xl)*1.1)] p-6`},tone:{neutral:``,info:`border-blue-500/20 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.03_235)_28%),var(--card))]`,success:`border-emerald-500/20 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.04_155)_30%),var(--card))]`,warning:`border-amber-500/24 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.05_85)_30%),var(--card))]`,danger:`border-destructive/24 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),var(--destructive)_8%),var(--card))]`}},defaultVariants:{variant:`default`,size:`default`,tone:`neutral`}});function o({className:e,variant:n,size:r,tone:o,title:s,description:c,eyebrow:l,breadcrumbs:u,actions:d,meta:f,leading:p,footer:m,sticky:h=!1,titleClassName:g,descriptionClassName:_,actionsClassName:v,children:y,...b}){return(0,i.jsxs)(`div`,{"data-slot":`page-header`,"data-sticky":h||void 0,className:t.cn(a({variant:n,size:r,tone:o}),h&&`sticky top-0 z-30 bg-background/92 backdrop-blur supports-[backdrop-filter]:bg-background/78`,e),...b,children:[u&&(0,i.jsx)(`div`,{className:`text-sm text-muted-foreground/95`,children:u}),(0,i.jsxs)(`div`,{className:`flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between`,children:[(0,i.jsxs)(`div`,{className:`flex min-w-0 gap-4`,children:[p?(0,i.jsx)(`div`,{className:`shrink-0`,children:p}):null,(0,i.jsxs)(`div`,{className:`min-w-0 space-y-2`,children:[l&&(0,i.jsx)(`div`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] text-muted-foreground`,children:l}),s&&(0,i.jsx)(`h1`,{className:t.cn(`truncate text-3xl font-semibold tracking-[-0.03em] text-foreground`,r===`sm`&&`text-2xl`,r===`lg`&&`text-4xl`,g),children:s}),c&&(0,i.jsx)(`p`,{className:t.cn(`max-w-3xl text-sm leading-7 text-muted-foreground`,_),children:c}),f&&(0,i.jsx)(`div`,{className:`pt-1 text-sm text-muted-foreground`,children:f})]})]}),d&&(0,i.jsx)(`div`,{className:t.cn(`flex shrink-0 flex-wrap items-center gap-2.5`,v),children:d})]}),y,m&&(0,i.jsx)(`div`,{"data-slot":`page-header-footer`,className:`border-t border-border/70 pt-4`,children:m})]})}exports.PageHeader=o,exports.pageHeaderVariants=a;