tembro 3.1.17 → 4.0.1

package/dist/src/showcase/premium/alert/showcase.js

@@ -1,137 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { Alert as n } from "../../../components/feedback/alert.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/showcase/premium/alert/showcase.tsx
-var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", s = [
-	"info",
-	"success",
-	"warning",
-	"destructive"
-];
-function c({ mode: c }) {
-	let [l, u] = r.useState(2), [d, f] = r.useState(0), [p, m] = r.useState(!0), h = s[l] ?? "warning";
-	return /* @__PURE__ */ a("div", {
-		className: "space-y-5",
-		children: [
-			/* @__PURE__ */ i("section", {
-				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
-				children: /* @__PURE__ */ a("div", {
-					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
-					children: [/* @__PURE__ */ a("div", {
-						className: "max-w-xl",
-						children: [
-							/* @__PURE__ */ i("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
-								children: "Inline feedback"
-							}),
-							/* @__PURE__ */ i("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "Alert should guide the next user decision"
-							}),
-							/* @__PURE__ */ i("p", {
-								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
-								children: "Use alert when the page needs a visible, contextual message with a clear action. It should feel operational, not decorative."
-							})
-						]
-					}), /* @__PURE__ */ a("div", {
-						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ i(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Context aware"
-						}), /* @__PURE__ */ i(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Action ready"
-						})]
-					})]
-				})
-			}),
-			p ? /* @__PURE__ */ i(n, {
-				tone: h,
-				dismissible: !0,
-				onDismiss: () => m(!1),
-				actionsAlign: h === "destructive" ? "start" : "end",
-				title: h === "success" ? "Workspace synced" : h === "destructive" ? "Action blocked" : h === "info" ? "Heads up" : "Review needed",
-				description: h === "success" ? "Changes were saved and the team can continue safely." : h === "destructive" ? "The release cannot continue until billing permissions are restored." : h === "info" ? "Usage data refreshed and one metric changed since your last visit." : "Billing rules changed and one approval is pending before publish.",
-				action: /* @__PURE__ */ i(e, {
-					size: "sm",
-					variant: h === "destructive" ? "destructive" : "default",
-					onClick: () => f((e) => e + 1),
-					children: h === "success" ? "Continue" : h === "destructive" ? "Fix access" : h === "info" ? "Open details" : "Open review"
-				})
-			}) : /* @__PURE__ */ a("section", {
-				className: o,
-				children: [/* @__PURE__ */ i("p", {
-					className: "text-sm font-medium aui-text-muted",
-					children: "Alert dismissed"
-				}), /* @__PURE__ */ i(e, {
-					className: "mt-4",
-					size: "sm",
-					variant: "outline",
-					onClick: () => m(!0),
-					children: "Restore alert"
-				})]
-			}),
-			/* @__PURE__ */ a("div", {
-				className: "grid gap-4 xl:grid-cols-[0.9fr_1.1fr]",
-				children: [/* @__PURE__ */ a("section", {
-					className: o,
-					children: [
-						/* @__PURE__ */ i("p", {
-							className: "text-sm font-medium aui-text-muted",
-							children: "Action count"
-						}),
-						/* @__PURE__ */ i("p", {
-							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-							children: d
-						}),
-						/* @__PURE__ */ i("p", {
-							className: "mt-2 text-sm leading-6 aui-text-muted",
-							children: "Alert CTA should resolve a real decision, not just dismiss a message."
-						})
-					]
-				}), /* @__PURE__ */ a("section", {
-					className: o,
-					children: [/* @__PURE__ */ i("p", {
-						className: "text-sm font-medium aui-text-muted",
-						children: "Recommended usage"
-					}), /* @__PURE__ */ a("div", {
-						className: "mt-4 space-y-3 text-sm leading-6 aui-text-muted",
-						children: [/* @__PURE__ */ i("p", { children: "Put alert above the affected surface, form, or result area." }), /* @__PURE__ */ i("p", { children: "Prefer one primary action. If the user only needs acknowledgment, use toast instead." })]
-					})]
-				})]
-			}),
-			c === "playground" ? /* @__PURE__ */ i("section", {
-				className: o,
-				children: /* @__PURE__ */ a("div", {
-					className: "flex flex-wrap gap-2",
-					children: [
-						s.map((t, n) => /* @__PURE__ */ i(e, {
-							size: "sm",
-							variant: l === n ? "default" : "outline",
-							onClick: () => u(n),
-							children: t
-						}, t)),
-						/* @__PURE__ */ i(e, {
-							size: "sm",
-							variant: "outline",
-							onClick: () => f(0),
-							children: "Reset counter"
-						}),
-						/* @__PURE__ */ i(e, {
-							size: "sm",
-							variant: "outline",
-							onClick: () => m(!0),
-							children: "Show alert"
-						})
-					]
-				})
-			}) : null
-		]
-	});
-}
-//#endregion
-export { c as AlertShowcase };

package/dist/src/showcase/premium/alert-dialog/index.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.AlertDialogShowcase=e.AlertDialogShowcase,exports.alertDialogMock=t.alertDialogMock;

package/dist/src/showcase/premium/alert-dialog/index.js

@@ -1,3 +0,0 @@
-import { AlertDialogShowcase as e } from "./showcase.js";
-import { alertDialogMock as t } from "./mock.js";
-export { e as AlertDialogShowcase, t as alertDialogMock };

package/dist/src/showcase/premium/alert-dialog/mock.cjs

@@ -1,19 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
-import { AlertDialog, Button } from "tembro"
-
-export function Example() {
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <>
-      <Button variant="destructive" onClick={() => setOpen(true)}>Delete workspace</Button>
-      <AlertDialog
-        open={open}
-        onOpenChange={setOpen}
-        title="Delete workspace?"
-        description="This removes active billing rules and member access."
-        actionLabel="Delete"
-      />
-    </>
-  )
-}`,highlights:[`Destructive confirmation flow`,`Async-ready action state`,`Strong title + consequence copy`,`Built on the same dialog primitives as the rest of the system`],scenarios:[{title:`Delete resource`,description:`Require explicit confirmation before destructive irreversible actions.`},{title:`Reset configuration`,description:`Warn users when policies, tokens, or routes will be cleared.`},{title:`High-risk approval`,description:`Pause sensitive admin actions until the user confirms consequences.`}],capabilityNotes:[`Use alert-dialog only for genuinely high-risk actions.`,`The description should explain consequence, not restate the title.`,`If the action is recoverable or low-risk, a regular dialog is often enough.`]};exports.alertDialogMock=e;

package/dist/src/showcase/premium/alert-dialog/mock.js

@@ -1,31 +0,0 @@
-//#region src/showcase/premium/alert-dialog/mock.ts
-var e = {
-	code: "import * as React from \"react\"\nimport { AlertDialog, Button } from \"tembro\"\n\nexport function Example() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <>\n      <Button variant=\"destructive\" onClick={() => setOpen(true)}>Delete workspace</Button>\n      <AlertDialog\n        open={open}\n        onOpenChange={setOpen}\n        title=\"Delete workspace?\"\n        description=\"This removes active billing rules and member access.\"\n        actionLabel=\"Delete\"\n      />\n    </>\n  )\n}",
-	highlights: [
-		"Destructive confirmation flow",
-		"Async-ready action state",
-		"Strong title + consequence copy",
-		"Built on the same dialog primitives as the rest of the system"
-	],
-	scenarios: [
-		{
-			title: "Delete resource",
-			description: "Require explicit confirmation before destructive irreversible actions."
-		},
-		{
-			title: "Reset configuration",
-			description: "Warn users when policies, tokens, or routes will be cleared."
-		},
-		{
-			title: "High-risk approval",
-			description: "Pause sensitive admin actions until the user confirms consequences."
-		}
-	],
-	capabilityNotes: [
-		"Use alert-dialog only for genuinely high-risk actions.",
-		"The description should explain consequence, not restate the title.",
-		"If the action is recoverable or low-risk, a regular dialog is often enough."
-	]
-};
-//#endregion
-export { e as alertDialogMock };

package/dist/src/showcase/premium/alert-dialog/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/overlay/alert-dialog.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function s({mode:e}){let[s,c]=i.useState(!1),[l,u]=i.useState(!1),[d,f]=i.useState(`No action confirmed yet`),[p,m]=i.useState(!0),[h,g]=i.useState(!0),[_,v]=i.useState(!1);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Destructive gate`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`AlertDialog should interrupt only when the action has real consequence`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This is not a generic modal. It exists to slow the user down before irreversible, expensive, or risky operations.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`High risk`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Explicit confirmation`})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Live destructive flow`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Open the dialog and confirm a risky workspace action.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{variant:h?`secondary`:`outline`,onClick:()=>g(e=>!e),children:h?`Case sensitive`:`Case insensitive`}),(0,a.jsx)(t.Button,{variant:p?`secondary`:`outline`,onClick:()=>m(e=>!e),children:p?`Typed confirm on`:`Typed confirm off`}),(0,a.jsx)(t.Button,{variant:_?`warning`:`outline`,onClick:()=>v(e=>!e),children:_?`Failure mode on`:`Failure mode off`}),(0,a.jsx)(t.Button,{variant:`destructive`,onClick:()=>c(!0),children:`Delete workspace`})]})]})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Last result`}),(0,a.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:d})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Design rule`}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Keep alert-dialog copy direct: what will happen, what is lost, and what the user should expect next.`})]})]}),(0,a.jsx)(r.AlertDialog,{open:s,onOpenChange:c,loading:l,title:`Delete workspace?`,description:`This removes active billing rules, API tokens, and member access from the selected workspace.`,actionLabel:`Delete workspace`,confirmValue:p?`DELETE`:void 0,confirmCaseSensitive:h,confirmLabel:`High-risk confirmation`,confirmDescription:`Type DELETE to confirm you want to remove this workspace and its active access.`,severityNote:`Deleting a workspace clears active access, billing rules, and route-level secrets for the current team.`,errorMessage:`Workspace could not be deleted right now. Check dependent billing or retry.`,onAction:async()=>{if(u(!0),await new Promise(e=>window.setTimeout(e,450)),_)throw u(!1),Error(`dependent billing`);u(!1),c(!1),f(`Workspace deletion confirmed`)},onActionError:()=>f(`Workspace deletion failed`)}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>f(`No action confirmed yet`),children:`Reset result`})}):null]})}exports.AlertDialogShowcase=s;

package/dist/src/showcase/premium/alert-dialog/showcase.js

@@ -1,138 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { AlertDialog as n } from "../../../components/overlay/alert-dialog.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/showcase/premium/alert-dialog/showcase.tsx
-var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
-function s({ mode: s }) {
-	let [c, l] = r.useState(!1), [u, d] = r.useState(!1), [f, p] = r.useState("No action confirmed yet"), [m, h] = r.useState(!0), [g, _] = r.useState(!0), [v, y] = r.useState(!1);
-	return /* @__PURE__ */ a("div", {
-		className: "space-y-5",
-		children: [
-			/* @__PURE__ */ i("section", {
-				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
-				children: /* @__PURE__ */ a("div", {
-					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
-					children: [/* @__PURE__ */ a("div", {
-						className: "max-w-xl",
-						children: [
-							/* @__PURE__ */ i("p", {
-								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
-								children: "Destructive gate"
-							}),
-							/* @__PURE__ */ i("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "AlertDialog should interrupt only when the action has real consequence"
-							}),
-							/* @__PURE__ */ i("p", {
-								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
-								children: "This is not a generic modal. It exists to slow the user down before irreversible, expensive, or risky operations."
-							})
-						]
-					}), /* @__PURE__ */ a("div", {
-						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ i(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "High risk"
-						}), /* @__PURE__ */ i(t, {
-							variant: "outline",
-							className: "rounded-full",
-							children: "Explicit confirmation"
-						})]
-					})]
-				})
-			}),
-			/* @__PURE__ */ i("section", {
-				className: o,
-				children: /* @__PURE__ */ a("div", {
-					className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
-					children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
-						className: "text-sm font-medium aui-text-muted",
-						children: "Live destructive flow"
-					}), /* @__PURE__ */ i("p", {
-						className: "mt-2 text-sm leading-6 aui-text-muted",
-						children: "Open the dialog and confirm a risky workspace action."
-					})] }), /* @__PURE__ */ a("div", {
-						className: "flex flex-wrap gap-2",
-						children: [
-							/* @__PURE__ */ i(e, {
-								variant: g ? "secondary" : "outline",
-								onClick: () => _((e) => !e),
-								children: g ? "Case sensitive" : "Case insensitive"
-							}),
-							/* @__PURE__ */ i(e, {
-								variant: m ? "secondary" : "outline",
-								onClick: () => h((e) => !e),
-								children: m ? "Typed confirm on" : "Typed confirm off"
-							}),
-							/* @__PURE__ */ i(e, {
-								variant: v ? "warning" : "outline",
-								onClick: () => y((e) => !e),
-								children: v ? "Failure mode on" : "Failure mode off"
-							}),
-							/* @__PURE__ */ i(e, {
-								variant: "destructive",
-								onClick: () => l(!0),
-								children: "Delete workspace"
-							})
-						]
-					})]
-				})
-			}),
-			/* @__PURE__ */ a("div", {
-				className: "grid gap-4 xl:grid-cols-2",
-				children: [/* @__PURE__ */ a("section", {
-					className: o,
-					children: [/* @__PURE__ */ i("p", {
-						className: "text-sm font-medium aui-text-muted",
-						children: "Last result"
-					}), /* @__PURE__ */ i("p", {
-						className: "mt-3 text-base font-medium aui-text-strong",
-						children: f
-					})]
-				}), /* @__PURE__ */ a("section", {
-					className: o,
-					children: [/* @__PURE__ */ i("p", {
-						className: "text-sm font-medium aui-text-muted",
-						children: "Design rule"
-					}), /* @__PURE__ */ i("p", {
-						className: "mt-3 text-sm leading-6 aui-text-muted",
-						children: "Keep alert-dialog copy direct: what will happen, what is lost, and what the user should expect next."
-					})]
-				})]
-			}),
-			/* @__PURE__ */ i(n, {
-				open: c,
-				onOpenChange: l,
-				loading: u,
-				title: "Delete workspace?",
-				description: "This removes active billing rules, API tokens, and member access from the selected workspace.",
-				actionLabel: "Delete workspace",
-				confirmValue: m ? "DELETE" : void 0,
-				confirmCaseSensitive: g,
-				confirmLabel: "High-risk confirmation",
-				confirmDescription: "Type DELETE to confirm you want to remove this workspace and its active access.",
-				severityNote: "Deleting a workspace clears active access, billing rules, and route-level secrets for the current team.",
-				errorMessage: "Workspace could not be deleted right now. Check dependent billing or retry.",
-				onAction: async () => {
-					if (d(!0), await new Promise((e) => window.setTimeout(e, 450)), v) throw d(!1), Error("dependent billing");
-					d(!1), l(!1), p("Workspace deletion confirmed");
-				},
-				onActionError: () => p("Workspace deletion failed")
-			}),
-			s === "playground" ? /* @__PURE__ */ i("section", {
-				className: o,
-				children: /* @__PURE__ */ i(e, {
-					size: "sm",
-					variant: "outline",
-					onClick: () => p("No action confirmed yet"),
-					children: "Reset result"
-				})
-			}) : null
-		]
-	});
-}
-//#endregion
-export { s as AlertDialogShowcase };

package/dist/src/showcase/premium/app-sidebar/index.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.AppSidebarShowcase=e.AppSidebarShowcase,exports.appSidebarMock=t.appSidebarMock;

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

@@ -1,3 +0,0 @@
-import { AppSidebarShowcase as e } from "./showcase.js";
-import { appSidebarMock as t } from "./mock.js";
-export { e as AppSidebarShowcase, t as appSidebarMock };

package/dist/src/showcase/premium/app-sidebar/mock.cjs

@@ -1,38 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Link } from "react-router-dom"
-import { Sidebar } from "tembro"
-
-const items = [
-  { key: "overview", label: "Overview", href: "/overview", active: true, sectionLabel: "Workspace" },
-  {
-    key: "customers",
-    label: "Customers",
-    badge: "12",
-    defaultExpanded: true,
-    items: [
-      { key: "active", label: "Active", href: "/customers/active" },
-      { key: "archived", label: "Archived", href: "/customers/archived" },
-    ],
-  },
-  { key: "billing", label: "Billing", href: "/billing", sectionLabel: "Manage" },
-  { key: "settings", label: "Settings", href: "/settings", disabled: true },
-]
-
-export function Example() {
-  return (
-    <Sidebar
-      items={items}
-      navigationLabel="Workspace navigation"
-      itemSize="md"
-      activeIndicator="bar"
-      showSectionLabels
-      responsive
-      renderLink={({ item: _item, href = "/", ...props }) => (
-        <Link {...props} to={href} />
-      )}
-      header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
-      footerAccount={{ label: "Azamat Workspace", description: "Starter plan", avatar: "AW" }}
-      secondaryActions={[{ key: "support", label: "Support", href: "/support" }]}
-      onItemSelect={(item) => console.log(item.key)}
-    />
-  )
-}`,highlights:[`Nested and collapsible route groups`,`Three density modes`,`Bar, pill and minimal active indicators`,`Responsive mobile navigation`,`Custom link rendering`],scenarios:[{title:`Workspace shell`,description:`Use one sidebar contract across dashboards, settings and dense internal tools.`},{title:`Router integration`,description:`Swap anchors with framework links through renderLink without rewriting item state.`},{title:`Collapsed desktop rail`,description:`Keep icons visible when space is tight, but preserve labels in expanded mode.`}],capabilityNotes:[`Keep one items array as the source of truth for label, badge, disabled and active route state.`,`Use the header slot for workspace identity, not for unrelated page actions.`,`Collapsed mode works best when icons stay distinctive and current route is still obvious.`,`Use navigationLabel and the mobile labels when the product language is not English.`,`Prefer Sidebar for reusable nav chrome; move to AppShell only when the full page frame is also shared.`]};exports.appSidebarMock=e;

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

@@ -1,34 +0,0 @@
-//#region src/showcase/premium/app-sidebar/mock.ts
-var e = {
-	code: "import { Link } from \"react-router-dom\"\nimport { Sidebar } from \"tembro\"\n\nconst items = [\n  { key: \"overview\", label: \"Overview\", href: \"/overview\", active: true, sectionLabel: \"Workspace\" },\n  {\n    key: \"customers\",\n    label: \"Customers\",\n    badge: \"12\",\n    defaultExpanded: true,\n    items: [\n      { key: \"active\", label: \"Active\", href: \"/customers/active\" },\n      { key: \"archived\", label: \"Archived\", href: \"/customers/archived\" },\n    ],\n  },\n  { key: \"billing\", label: \"Billing\", href: \"/billing\", sectionLabel: \"Manage\" },\n  { key: \"settings\", label: \"Settings\", href: \"/settings\", disabled: true },\n]\n\nexport function Example() {\n  return (\n    <Sidebar\n      items={items}\n      navigationLabel=\"Workspace navigation\"\n      itemSize=\"md\"\n      activeIndicator=\"bar\"\n      showSectionLabels\n      responsive\n      renderLink={({ item: _item, href = \"/\", ...props }) => (\n        <Link {...props} to={href} />\n      )}\n      header={<div className=\"px-3 py-2 text-sm font-semibold\">Azamat Workspace</div>}\n      footerAccount={{ label: \"Azamat Workspace\", description: \"Starter plan\", avatar: \"AW\" }}\n      secondaryActions={[{ key: \"support\", label: \"Support\", href: \"/support\" }]}\n      onItemSelect={(item) => console.log(item.key)}\n    />\n  )\n}",
-	highlights: [
-		"Nested and collapsible route groups",
-		"Three density modes",
-		"Bar, pill and minimal active indicators",
-		"Responsive mobile navigation",
-		"Custom link rendering"
-	],
-	scenarios: [
-		{
-			title: "Workspace shell",
-			description: "Use one sidebar contract across dashboards, settings and dense internal tools."
-		},
-		{
-			title: "Router integration",
-			description: "Swap anchors with framework links through renderLink without rewriting item state."
-		},
-		{
-			title: "Collapsed desktop rail",
-			description: "Keep icons visible when space is tight, but preserve labels in expanded mode."
-		}
-	],
-	capabilityNotes: [
-		"Keep one items array as the source of truth for label, badge, disabled and active route state.",
-		"Use the header slot for workspace identity, not for unrelated page actions.",
-		"Collapsed mode works best when icons stay distinctive and current route is still obvious.",
-		"Use navigationLabel and the mobile labels when the product language is not English.",
-		"Prefer Sidebar for reusable nav chrome; move to AppShell only when the full page frame is also shared."
-	]
-};
-//#endregion
-export { e as appSidebarMock };

package/dist/src/showcase/premium/app-sidebar/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../lib/utils.cjs"),n=require("../../../components/ui/button/index.cjs"),r=require("../../../components/ui/badge/index.cjs"),i=require("../../../components/layout/app-sidebar.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("lucide-react"),s=require("react/jsx-runtime");var c=[{key:`overview`,label:`Overview`,href:`/overview`,icon:(0,s.jsx)(o.HomeIcon,{className:`size-4`}),sectionLabel:`Core`},{key:`projects`,label:`Projects`,icon:(0,s.jsx)(o.FolderIcon,{className:`size-4`}),badge:`8`,defaultExpanded:!0,items:[{key:`active-projects`,label:`Active projects`,href:`/components/app-sidebar?view=active`},{key:`archived-projects`,label:`Archived`,href:`/components/app-sidebar?view=archived`,badge:`3`}]},{key:`reports`,label:`Reports`,href:`/reports`,icon:(0,s.jsx)(o.BarChart3Icon,{className:`size-4`}),sectionLabel:`Insights`},{key:`billing`,label:`Billing`,href:`/billing`,icon:(0,s.jsx)(o.CreditCardIcon,{className:`size-4`}),badge:`2`},{key:`settings`,label:`Settings`,href:`/settings`,icon:(0,s.jsx)(o.SettingsIcon,{className:`size-4`}),disabled:!0}],l=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function u({mode:e}){let[u,d]=a.useState(`overview`),[f,p]=a.useState(e===`playground`),[m,h]=a.useState(`desktop`),[g,_]=a.useState(!0),[v,y]=a.useState(`md`),[b,x]=a.useState(`bar`),[S,C]=a.useState(0),w=a.useMemo(()=>c.map(e=>({...e,active:e.key===u,onSelect:()=>d(e.key)})),[u]),T=c.find(e=>e.key===u),E=m===`mobile`;return(0,s.jsxs)(`div`,{className:`space-y-5`,children:[(0,s.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,s.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,s.jsxs)(`div`,{className:`max-w-xl`,children:[(0,s.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Navigation shell`}),(0,s.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Sidebar should feel install-ready on its own`}),(0,s.jsx)(`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, section labels, active indicators and collapsed behavior.`})]}),(0,s.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Header slot`}),(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Badges`}),(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Mobile drawer`})]})]})}),e===`playground`?(0,s.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,s.jsx)(n.Button,{size:`sm`,variant:f?`outline`:`default`,onClick:()=>p(e=>!e),children:f?`Expand sidebar`:`Collapse sidebar`}),(0,s.jsx)(n.Button,{size:`sm`,variant:`outline`,onClick:()=>d(`reports`),children:`Jump to reports`}),(0,s.jsx)(n.Button,{size:`sm`,variant:E?`default`:`outline`,onClick:()=>h(`mobile`),children:`Mobile drawer`}),(0,s.jsx)(n.Button,{size:`sm`,variant:E?`outline`:`default`,onClick:()=>h(`desktop`),children:`Desktop rail`})]}):null,(0,s.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]`,children:[(0,s.jsx)(`section`,{className:t.cn(l,E&&`mx-auto w-full max-w-[420px]`),children:(0,s.jsx)(i.Sidebar,{collapsed:f,items:w,showSectionLabels:g,itemSize:v,activeIndicator:b,renderLink:({item:e,href:t=`/components/app-sidebar`,...n})=>(0,s.jsx)(`a`,{...n,href:t}),secondaryActions:[{key:`support`,label:`Support`,icon:(0,s.jsx)(o.LifeBuoyIcon,{className:`size-4`}),onSelect:()=>d(`reports`)}],railItems:[{key:`members`,label:`Members`,icon:(0,s.jsx)(o.UsersIcon,{className:`size-4`}),onSelect:()=>d(`projects`)}],footerAccount:{label:`Azamat Workspace`,description:S?`Account opened ${S}x`:`Starter plan`,avatar:`AW`,onSelect:()=>C(e=>e+1)},responsive:!0,mobileBreakpoint:E?1e4:0,mobileTitle:`Workspace navigation`,mobileDescription:`Open routes, check badges, and move between sections from one compact drawer.`,mobileToggleLabel:`Open workspace menu`,header:(0,s.jsx)(`div`,{className:`px-3 py-2 text-sm font-semibold`,children:`Azamat Workspace`}),footer:(0,s.jsx)(`div`,{className:`aui-text-muted px-3 py-2 text-xs`,children:`Starter plan • 3 editors`}),footerClassName:`bg-[color:var(--aui-page-bg-alt)]/55`,className:`min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]`})}),(0,s.jsxs)(`section`,{className:l,children:[(0,s.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current route`}),(0,s.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:T?.label??`Overview`}),(0,s.jsx)(`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.`}),(0,s.jsxs)(`div`,{className:`mt-6 grid gap-3 sm:grid-cols-3`,children:[(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Shell`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:E?`Mobile drawer`:f?`Collapsed`:`Expanded`})]}),(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Visible items`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:w.length})]}),(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Disabled`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`1 route`})]})]}),e===`playground`?(0,s.jsxs)(`div`,{className:`mt-4 flex flex-wrap gap-2`,children:[(0,s.jsx)(n.Button,{size:`sm`,variant:g?`default`:`outline`,onClick:()=>_(e=>!e),children:g?`Hide section labels`:`Show section labels`}),(0,s.jsx)(n.Button,{size:`sm`,variant:v===`sm`?`default`:`outline`,onClick:()=>y(`sm`),children:`Compact`}),(0,s.jsx)(n.Button,{size:`sm`,variant:v===`md`?`default`:`outline`,onClick:()=>y(`md`),children:`Default`}),(0,s.jsx)(n.Button,{size:`sm`,variant:v===`lg`?`default`:`outline`,onClick:()=>y(`lg`),children:`Comfortable`}),(0,s.jsx)(n.Button,{size:`sm`,variant:b===`bar`?`default`:`outline`,onClick:()=>x(`bar`),children:`Bar active`}),(0,s.jsx)(n.Button,{size:`sm`,variant:b===`pill`?`default`:`outline`,onClick:()=>x(`pill`),children:`Pill active`}),(0,s.jsx)(n.Button,{size:`sm`,variant:b===`none`?`default`:`outline`,onClick:()=>x(`none`),children:`Minimal active`})]}):null]})]})]})}exports.AppSidebarShowcase=u;