tembro 2.0.1 → 2.0.2

package/dist/showcase/premium/app-sidebar/showcase.js

@@ -1,171 +1,192 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { AppSidebar as n } from "../../../components/layout/app-sidebar.js";
-import * as r from "react";
-import { BarChart3Icon as i, CreditCardIcon as a, FolderIcon as o, HomeIcon as s, SettingsIcon as c } from "lucide-react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { cn as e } from "../../../lib/utils.js";
+import { Button as t } from "../../../components/ui/button/index.js";
+import { Badge as n } from "../../../components/ui/badge/index.js";
+import { AppSidebar as r } from "../../../components/layout/app-sidebar.js";
+import * as i from "react";
+import { BarChart3Icon as a, CreditCardIcon as o, FolderIcon as s, HomeIcon as c, SettingsIcon as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/showcase/premium/app-sidebar/showcase.tsx
-var d = [
+var f = [
 	{
 		key: "overview",
 		label: "Overview",
 		href: "/overview",
-		icon: /* @__PURE__ */ l(s, { className: "size-4" })
+		icon: /* @__PURE__ */ u(c, { className: "size-4" })
 	},
 	{
 		key: "projects",
 		label: "Projects",
 		href: "/projects",
-		icon: /* @__PURE__ */ l(o, { className: "size-4" }),
+		icon: /* @__PURE__ */ u(s, { className: "size-4" }),
 		badge: "8"
 	},
 	{
 		key: "reports",
 		label: "Reports",
 		href: "/reports",
-		icon: /* @__PURE__ */ l(i, { className: "size-4" })
+		icon: /* @__PURE__ */ u(a, { className: "size-4" })
 	},
 	{
 		key: "billing",
 		label: "Billing",
 		href: "/billing",
-		icon: /* @__PURE__ */ l(a, { className: "size-4" }),
+		icon: /* @__PURE__ */ u(o, { className: "size-4" }),
 		badge: "2"
 	},
 	{
 		key: "settings",
 		label: "Settings",
 		href: "/settings",
-		icon: /* @__PURE__ */ l(c, { className: "size-4" }),
+		icon: /* @__PURE__ */ u(l, { className: "size-4" }),
 		disabled: !0
 	}
-], f = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
-function p({ mode: i }) {
-	let [a, o] = r.useState("overview"), [s, c] = r.useState(i === "playground"), p = r.useMemo(() => d.map((e) => ({
+], p = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function m({ mode: a }) {
+	let [o, s] = i.useState("overview"), [c, l] = i.useState(a === "playground"), [m, h] = i.useState("desktop"), g = i.useMemo(() => f.map((e) => ({
 		...e,
-		active: e.key === a,
-		onSelect: () => o(e.key)
-	})), [a]), m = d.find((e) => e.key === a);
-	return /* @__PURE__ */ u("div", {
+		active: e.key === o,
+		onSelect: () => s(e.key)
+	})), [o]), _ = f.find((e) => e.key === o), v = m === "mobile";
+	return /* @__PURE__ */ d("div", {
 		className: "space-y-5",
 		children: [
-			/* @__PURE__ */ l("section", {
+			/* @__PURE__ */ u("section", {
 				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
-				children: /* @__PURE__ */ u("div", {
+				children: /* @__PURE__ */ d("div", {
 					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
-					children: [/* @__PURE__ */ u("div", {
+					children: [/* @__PURE__ */ d("div", {
 						className: "max-w-xl",
 						children: [
-							/* @__PURE__ */ l("p", {
+							/* @__PURE__ */ u("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
 								children: "Navigation shell"
 							}),
-							/* @__PURE__ */ l("h3", {
+							/* @__PURE__ */ u("h3", {
 								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
 								children: "Sidebar should feel install-ready on its own"
 							}),
-							/* @__PURE__ */ l("p", {
+							/* @__PURE__ */ u("p", {
 								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
 								children: "This preview keeps the focus on one reusable sidebar surface: identity, route items, badges, disabled states and collapsed behavior."
 							})
 						]
-					}), /* @__PURE__ */ u("div", {
+					}), /* @__PURE__ */ d("div", {
 						className: "flex flex-wrap gap-2",
 						children: [
-							/* @__PURE__ */ l(t, {
+							/* @__PURE__ */ u(n, {
 								variant: "outline",
 								className: "rounded-full",
 								children: "Header slot"
 							}),
-							/* @__PURE__ */ l(t, {
+							/* @__PURE__ */ u(n, {
 								variant: "outline",
 								className: "rounded-full",
 								children: "Badges"
 							}),
-							/* @__PURE__ */ l(t, {
+							/* @__PURE__ */ u(n, {
 								variant: "outline",
 								className: "rounded-full",
-								children: "Collapsed rail"
+								children: "Mobile drawer"
 							})
 						]
 					})]
 				})
 			}),
-			i === "playground" ? /* @__PURE__ */ u("div", {
+			a === "playground" ? /* @__PURE__ */ d("div", {
 				className: "flex flex-wrap gap-3",
-				children: [/* @__PURE__ */ l(e, {
-					size: "sm",
-					variant: s ? "outline" : "default",
-					onClick: () => c((e) => !e),
-					children: s ? "Expand sidebar" : "Collapse sidebar"
-				}), /* @__PURE__ */ l(e, {
-					size: "sm",
-					variant: "outline",
-					onClick: () => o("reports"),
-					children: "Jump to reports"
-				})]
+				children: [
+					/* @__PURE__ */ u(t, {
+						size: "sm",
+						variant: c ? "outline" : "default",
+						onClick: () => l((e) => !e),
+						children: c ? "Expand sidebar" : "Collapse sidebar"
+					}),
+					/* @__PURE__ */ u(t, {
+						size: "sm",
+						variant: "outline",
+						onClick: () => s("reports"),
+						children: "Jump to reports"
+					}),
+					/* @__PURE__ */ u(t, {
+						size: "sm",
+						variant: v ? "default" : "outline",
+						onClick: () => h("mobile"),
+						children: "Mobile drawer"
+					}),
+					/* @__PURE__ */ u(t, {
+						size: "sm",
+						variant: v ? "outline" : "default",
+						onClick: () => h("desktop"),
+						children: "Desktop rail"
+					})
+				]
 			}) : null,
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ d("div", {
 				className: "grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]",
-				children: [/* @__PURE__ */ l("section", {
-					className: f,
-					children: /* @__PURE__ */ l(n, {
-						collapsed: s,
-						items: p,
-						header: /* @__PURE__ */ l("div", {
+				children: [/* @__PURE__ */ u("section", {
+					className: e(p, v && "mx-auto w-full max-w-[420px]"),
+					children: /* @__PURE__ */ u(r, {
+						collapsed: c,
+						items: g,
+						responsive: !0,
+						mobileBreakpoint: v ? 1e4 : 0,
+						mobileTitle: "Workspace navigation",
+						mobileDescription: "Open routes, check badges, and move between sections from one compact drawer.",
+						mobileToggleLabel: "Open workspace menu",
+						header: /* @__PURE__ */ u("div", {
 							className: "px-3 py-2 text-sm font-semibold",
 							children: "Azamat Workspace"
 						}),
-						footer: /* @__PURE__ */ l("div", {
+						footer: /* @__PURE__ */ u("div", {
 							className: "aui-text-muted px-3 py-2 text-xs",
 							children: "Starter plan • 3 editors"
 						}),
 						className: "min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"
 					})
-				}), /* @__PURE__ */ u("section", {
-					className: f,
+				}), /* @__PURE__ */ d("section", {
+					className: p,
 					children: [
-						/* @__PURE__ */ l("p", {
+						/* @__PURE__ */ u("p", {
 							className: "text-sm font-medium aui-text-muted",
 							children: "Current route"
 						}),
-						/* @__PURE__ */ l("p", {
+						/* @__PURE__ */ u("p", {
 							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-							children: m?.label ?? "Overview"
+							children: _?.label ?? "Overview"
 						}),
-						/* @__PURE__ */ l("p", {
+						/* @__PURE__ */ u("p", {
 							className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
 							children: "Start with the sidebar itself as a stable navigation contract. Only after this feels right should the app introduce a bigger shell, page header, or route-level statistics around it."
 						}),
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ d("div", {
 							className: "mt-6 grid gap-3 sm:grid-cols-3",
 							children: [
-								/* @__PURE__ */ u("div", {
+								/* @__PURE__ */ d("div", {
 									className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ l("p", {
+									children: [/* @__PURE__ */ u("p", {
 										className: "text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted",
-										children: "Mode"
-									}), /* @__PURE__ */ l("p", {
+										children: "Shell"
+									}), /* @__PURE__ */ u("p", {
 										className: "mt-2 text-lg font-semibold aui-text-strong",
-										children: s ? "Collapsed" : "Expanded"
+										children: v ? "Mobile drawer" : c ? "Collapsed" : "Expanded"
 									})]
 								}),
-								/* @__PURE__ */ u("div", {
+								/* @__PURE__ */ d("div", {
 									className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ l("p", {
+									children: [/* @__PURE__ */ u("p", {
 										className: "text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted",
 										children: "Visible items"
-									}), /* @__PURE__ */ l("p", {
+									}), /* @__PURE__ */ u("p", {
 										className: "mt-2 text-lg font-semibold aui-text-strong",
-										children: p.length
+										children: g.length
 									})]
 								}),
-								/* @__PURE__ */ u("div", {
+								/* @__PURE__ */ d("div", {
 									className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3",
-									children: [/* @__PURE__ */ l("p", {
+									children: [/* @__PURE__ */ u("p", {
 										className: "text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted",
 										children: "Disabled"
-									}), /* @__PURE__ */ l("p", {
+									}), /* @__PURE__ */ u("p", {
 										className: "mt-2 text-lg font-semibold aui-text-strong",
 										children: "1 route"
 									})]
@@ -179,4 +200,4 @@ function p({ mode: i }) {
 	});
 }
 //#endregion
-export { p as AppSidebarShowcase };
+export { m as AppSidebarShowcase };