tembro 3.0.0 → 3.1.1

package/dist/src/showcase/premium/badge/showcase.cjs

@@ -0,0 +1 @@
+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("./data.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`border-t border-[color:var(--aui-divider)] py-6`;function s({state:e,setState:s,mode:c}){let l=[`default`,`secondary`,`soft`,`destructive`,`outline`,`ghost`,`link`],u=r.badgeDemoItems.find(t=>t.variant===e.badgeVariant)??r.badgeDemoItems[0],[d,f]=i.useState(!0);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsx)(`section`,{className:`pb-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end 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:`Status`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Badges should stay secondary`}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Use them for metadata and state, not as the main content block.`})]}),(0,a.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Variant`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:e.badgeVariant})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Current`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:u.label})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Samples`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:r.badgeDemoItems.length})]})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:l.map(n=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e.badgeVariant===n?`default`:`secondary`,onClick:()=>s({badgeVariant:n}),children:n},n))}),(0,a.jsx)(`div`,{className:`flex flex-wrap items-center gap-3`,children:r.badgeDemoItems.map((t,r)=>(0,a.jsx)(n.Badge,{variant:r===0?e.badgeVariant:t.variant,status:r===0?`success`:void 0,count:r===1?12:void 0,children:t.label},t.label))}),(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[minmax(0,1.02fr)_minmax(0,0.98fr)]`,children:[(0,a.jsxs)(`div`,{className:`space-y-4`,children:[(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center justify-between gap-3 border-b border-[color:var(--aui-divider)] pb-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Live example`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Customer workspace`})]}),(0,a.jsx)(n.Badge,{variant:e.badgeVariant,status:`success`,label:u.label})]}),(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:[[`Plan`,`Growth`],[`Owner`,`Azamat`],[`Last sync`,`2 min ago`]].map(([e,t])=>(0,a.jsxs)(`div`,{className:`inline-flex items-center gap-2 rounded-full border border-[color:var(--aui-divider)] px-3 py-2`,children:[(0,a.jsx)(`span`,{className:`text-xs aui-text-muted`,children:e}),(0,a.jsx)(`span`,{className:`text-sm font-medium aui-text-strong`,children:t})]},e))}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2 border-t border-[color:var(--aui-divider)] pt-4`,children:[(0,a.jsx)(n.Badge,{variant:`secondary`,label:`Customers`,count:18}),(0,a.jsx)(n.Badge,{variant:`soft`,tone:`info`,label:`Synced`,dot:!0}),(0,a.jsx)(n.Badge,{status:`warning`,label:`Pending approval`}),d?(0,a.jsx)(n.Badge,{variant:`outline`,label:`Design owner`,removable:!0,onRemove:()=>f(!1)}):(0,a.jsx)(t.Button,{size:`sm`,variant:`secondary`,onClick:()=>f(!0),children:`Restore chip`})]})]}),(0,a.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:r.badgeDemoItems.map(e=>(0,a.jsxs)(`div`,{className:`flex items-center justify-between gap-4 border-b border-[color:var(--aui-divider)] py-3 last:border-b-0`,children:[(0,a.jsxs)(`div`,{className:`min-w-0`,children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:e.label}),(0,a.jsx)(`p`,{className:`mt-1 text-sm leading-6 aui-text-muted`,children:e.note})]}),(0,a.jsx)(n.Badge,{variant:e.variant,status:e.label===`Live`?`success`:e.label===`Review`?`warning`:void 0,label:e.label})]},e.label))})]})]})}),c===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(`div`,{className:`grid gap-3 md:grid-cols-2 xl:grid-cols-3`,children:r.badgeDemoItems.map(e=>(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,a.jsx)(n.Badge,{variant:e.variant,label:e.label,count:e.label===`Queued`?4:void 0}),(0,a.jsx)(`span`,{className:`text-[11px] uppercase tracking-[0.2em] aui-text-muted`,children:`sample`})]}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:e.note})]},e.label))})}):null]})}exports.BadgeShowcase=s;

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

@@ -0,0 +1,221 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { badgeDemoItems as n } from "./data.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/badge/showcase.tsx
+var o = "border-t border-[color:var(--aui-divider)] py-6";
+function s({ state: s, setState: c, mode: l }) {
+	let u = [
+		"default",
+		"secondary",
+		"soft",
+		"destructive",
+		"outline",
+		"ghost",
+		"link"
+	], d = n.find((e) => e.variant === s.badgeVariant) ?? n[0], [f, p] = r.useState(!0);
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ i("section", {
+				className: "pb-6",
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-end 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: "Status"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Badges should stay secondary"
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "mt-3 text-sm leading-6 aui-text-muted",
+								children: "Use them for metadata and state, not as the main content block."
+							})
+						]
+					}), /* @__PURE__ */ a("div", {
+						className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
+						children: [
+							/* @__PURE__ */ a("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ i("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Variant"
+								}), /* @__PURE__ */ i("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: s.badgeVariant
+								})]
+							}),
+							/* @__PURE__ */ a("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ i("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Current"
+								}), /* @__PURE__ */ i("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: d.label
+								})]
+							}),
+							/* @__PURE__ */ a("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ i("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Samples"
+								}), /* @__PURE__ */ i("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: n.length
+								})]
+							})
+						]
+					})]
+				})
+			}),
+			/* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ a("div", {
+					className: "space-y-5",
+					children: [
+						/* @__PURE__ */ i("div", {
+							className: "flex flex-wrap gap-2",
+							children: u.map((t) => /* @__PURE__ */ i(e, {
+								type: "button",
+								size: "sm",
+								variant: s.badgeVariant === t ? "default" : "secondary",
+								onClick: () => c({ badgeVariant: t }),
+								children: t
+							}, t))
+						}),
+						/* @__PURE__ */ i("div", {
+							className: "flex flex-wrap items-center gap-3",
+							children: n.map((e, n) => /* @__PURE__ */ i(t, {
+								variant: n === 0 ? s.badgeVariant : e.variant,
+								status: n === 0 ? "success" : void 0,
+								count: n === 1 ? 12 : void 0,
+								children: e.label
+							}, e.label))
+						}),
+						/* @__PURE__ */ a("div", {
+							className: "grid gap-6 xl:grid-cols-[minmax(0,1.02fr)_minmax(0,0.98fr)]",
+							children: [/* @__PURE__ */ a("div", {
+								className: "space-y-4",
+								children: [
+									/* @__PURE__ */ a("div", {
+										className: "flex flex-wrap items-center justify-between gap-3 border-b border-[color:var(--aui-divider)] pb-4",
+										children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+											className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+											children: "Live example"
+										}), /* @__PURE__ */ i("p", {
+											className: "mt-2 text-lg font-semibold aui-text-strong",
+											children: "Customer workspace"
+										})] }), /* @__PURE__ */ i(t, {
+											variant: s.badgeVariant,
+											status: "success",
+											label: d.label
+										})]
+									}),
+									/* @__PURE__ */ i("div", {
+										className: "flex flex-wrap gap-2",
+										children: [
+											["Plan", "Growth"],
+											["Owner", "Azamat"],
+											["Last sync", "2 min ago"]
+										].map(([e, t]) => /* @__PURE__ */ a("div", {
+											className: "inline-flex items-center gap-2 rounded-full border border-[color:var(--aui-divider)] px-3 py-2",
+											children: [/* @__PURE__ */ i("span", {
+												className: "text-xs aui-text-muted",
+												children: e
+											}), /* @__PURE__ */ i("span", {
+												className: "text-sm font-medium aui-text-strong",
+												children: t
+											})]
+										}, e))
+									}),
+									/* @__PURE__ */ a("div", {
+										className: "flex flex-wrap gap-2 border-t border-[color:var(--aui-divider)] pt-4",
+										children: [
+											/* @__PURE__ */ i(t, {
+												variant: "secondary",
+												label: "Customers",
+												count: 18
+											}),
+											/* @__PURE__ */ i(t, {
+												variant: "soft",
+												tone: "info",
+												label: "Synced",
+												dot: !0
+											}),
+											/* @__PURE__ */ i(t, {
+												status: "warning",
+												label: "Pending approval"
+											}),
+											f ? /* @__PURE__ */ i(t, {
+												variant: "outline",
+												label: "Design owner",
+												removable: !0,
+												onRemove: () => p(!1)
+											}) : /* @__PURE__ */ i(e, {
+												size: "sm",
+												variant: "secondary",
+												onClick: () => p(!0),
+												children: "Restore chip"
+											})
+										]
+									})
+								]
+							}), /* @__PURE__ */ i("div", {
+								className: "border-y border-[color:var(--aui-divider)]",
+								children: n.map((e) => /* @__PURE__ */ a("div", {
+									className: "flex items-center justify-between gap-4 border-b border-[color:var(--aui-divider)] py-3 last:border-b-0",
+									children: [/* @__PURE__ */ a("div", {
+										className: "min-w-0",
+										children: [/* @__PURE__ */ i("p", {
+											className: "text-sm font-semibold aui-text-strong",
+											children: e.label
+										}), /* @__PURE__ */ i("p", {
+											className: "mt-1 text-sm leading-6 aui-text-muted",
+											children: e.note
+										})]
+									}), /* @__PURE__ */ i(t, {
+										variant: e.variant,
+										status: e.label === "Live" ? "success" : e.label === "Review" ? "warning" : void 0,
+										label: e.label
+									})]
+								}, e.label))
+							})]
+						})
+					]
+				})
+			}),
+			l === "playground" ? /* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ i("div", {
+					className: "grid gap-3 md:grid-cols-2 xl:grid-cols-3",
+					children: n.map((e) => /* @__PURE__ */ a("div", {
+						className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+						children: [/* @__PURE__ */ a("div", {
+							className: "flex items-center justify-between gap-3",
+							children: [/* @__PURE__ */ i(t, {
+								variant: e.variant,
+								label: e.label,
+								count: e.label === "Queued" ? 4 : void 0
+							}), /* @__PURE__ */ i("span", {
+								className: "text-[11px] uppercase tracking-[0.2em] aui-text-muted",
+								children: "sample"
+							})]
+						}), /* @__PURE__ */ i("p", {
+							className: "mt-3 text-sm leading-6 aui-text-muted",
+							children: e.note
+						})]
+					}, e.label))
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { s as BadgeShowcase };

package/dist/src/showcase/premium/badge/types.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});

package/dist/src/showcase/premium/breadcrumbs/index.cjs

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

package/dist/src/showcase/premium/breadcrumbs/index.js

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

package/dist/src/showcase/premium/breadcrumbs/mock.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Breadcrumbs } from "tembro"
+
+const items = [
+  { key: "home", label: "Home", href: "/" },
+  { key: "products", label: "Products", href: "/products" },
+  { key: "active", label: "Overview", current: true },
+]
+
+export function Example() {
+  return <Breadcrumbs items={items} separator="/" />
+}`,highlights:[`Readable route context`,`Current route flagging`,`Custom separator support`,`Custom link rendering hook`],scenarios:[{title:`Deep navigation`,description:`Render nested routes with one-line context breadcrumbs.`},{title:`Router links`,description:`Provide hrefs for SPA links or custom render for router primitives.`},{title:`Page headings`,description:`Use with PageHeader when users need location confirmation.`}],capabilityNotes:[`Keep the last item marked as current so focus and navigation patterns stay consistent.`,`Custom separators can match your design language without breaking semantics.`,"Inject router-specific links through `renderLink` for framework compatibility."]};exports.breadcrumbsMock=e;

package/dist/src/showcase/premium/breadcrumbs/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/breadcrumbs/mock.ts
+var e = {
+	code: "import { Breadcrumbs } from \"tembro\"\n\nconst items = [\n  { key: \"home\", label: \"Home\", href: \"/\" },\n  { key: \"products\", label: \"Products\", href: \"/products\" },\n  { key: \"active\", label: \"Overview\", current: true },\n]\n\nexport function Example() {\n  return <Breadcrumbs items={items} separator=\"/\" />\n}",
+	highlights: [
+		"Readable route context",
+		"Current route flagging",
+		"Custom separator support",
+		"Custom link rendering hook"
+	],
+	scenarios: [
+		{
+			title: "Deep navigation",
+			description: "Render nested routes with one-line context breadcrumbs."
+		},
+		{
+			title: "Router links",
+			description: "Provide hrefs for SPA links or custom render for router primitives."
+		},
+		{
+			title: "Page headings",
+			description: "Use with PageHeader when users need location confirmation."
+		}
+	],
+	capabilityNotes: [
+		"Keep the last item marked as current so focus and navigation patterns stay consistent.",
+		"Custom separators can match your design language without breaking semantics.",
+		"Inject router-specific links through `renderLink` for framework compatibility."
+	]
+};
+//#endregion
+export { e as breadcrumbsMock };

package/dist/src/showcase/premium/breadcrumbs/showcase.cjs

@@ -0,0 +1 @@
+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/layout/breadcrumbs.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[{key:`home`,label:`Home`,href:`/`},{key:`apps`,label:`Apps`,href:`/apps`},{key:`workspace`,label:`Workspace`,href:`/apps/workspace`},{key:`team`,label:`Team settings`,href:`/apps/workspace/team`},{key:`security`,label:`Security`,href:`/apps/workspace/team/security`},{key:`overview`,label:`Overview`,current:!0}],s=[{key:`home`,label:`Home`,href:`/`},{key:`dashboard`,label:`Dashboard`,current:!0}];function c({mode:e}){let[c,l]=i.useState(`full`),u=i.useMemo(()=>c===`full`?o:s,[c]);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:`Path context`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Breadcrumbs should answer where the user is`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Keep them short, directional, and useful. The preview should show both a fuller application path and a compact route path.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Full path`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Compact path`})]})]})}),e===`playground`?(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:c===`full`?`default`:`outline`,onClick:()=>l(`full`),children:`Full path`}),(0,a.jsx)(t.Button,{size:`sm`,variant:c===`compact`?`default`:`outline`,onClick:()=>l(`compact`),children:`Compact path`})]}):null,(0,a.jsx)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3`,children:(0,a.jsx)(r.Breadcrumbs,{items:u,separator:c===`full`?`/`:(0,a.jsx)(`span`,{className:`px-1 aui-text-muted`,children:`→`}),maxItems:c===`full`?4:void 0})})]})}exports.BreadcrumbsShowcase=c;

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

@@ -0,0 +1,115 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { Breadcrumbs as n } from "../../../components/layout/breadcrumbs.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/breadcrumbs/showcase.tsx
+var o = [
+	{
+		key: "home",
+		label: "Home",
+		href: "/"
+	},
+	{
+		key: "apps",
+		label: "Apps",
+		href: "/apps"
+	},
+	{
+		key: "workspace",
+		label: "Workspace",
+		href: "/apps/workspace"
+	},
+	{
+		key: "team",
+		label: "Team settings",
+		href: "/apps/workspace/team"
+	},
+	{
+		key: "security",
+		label: "Security",
+		href: "/apps/workspace/team/security"
+	},
+	{
+		key: "overview",
+		label: "Overview",
+		current: !0
+	}
+], s = [{
+	key: "home",
+	label: "Home",
+	href: "/"
+}, {
+	key: "dashboard",
+	label: "Dashboard",
+	current: !0
+}];
+function c({ mode: c }) {
+	let [l, u] = r.useState("full"), d = r.useMemo(() => l === "full" ? o : s, [l]);
+	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: "Path context"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Breadcrumbs should answer where the user is"
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "Keep them short, directional, and useful. The preview should show both a fuller application path and a compact route path."
+							})
+						]
+					}), /* @__PURE__ */ a("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Full path"
+						}), /* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Compact path"
+						})]
+					})]
+				})
+			}),
+			c === "playground" ? /* @__PURE__ */ a("div", {
+				className: "flex flex-wrap gap-3",
+				children: [/* @__PURE__ */ i(e, {
+					size: "sm",
+					variant: l === "full" ? "default" : "outline",
+					onClick: () => u("full"),
+					children: "Full path"
+				}), /* @__PURE__ */ i(e, {
+					size: "sm",
+					variant: l === "compact" ? "default" : "outline",
+					onClick: () => u("compact"),
+					children: "Compact path"
+				})]
+			}) : null,
+			/* @__PURE__ */ i("div", {
+				className: "rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3",
+				children: /* @__PURE__ */ i(n, {
+					items: d,
+					separator: l === "full" ? "/" : /* @__PURE__ */ i("span", {
+						className: "px-1 aui-text-muted",
+						children: "→"
+					}),
+					maxItems: l === "full" ? 4 : void 0
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { c as BreadcrumbsShowcase };

package/dist/src/showcase/premium/button/data.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{title:`Variant coverage`,actions:[{label:`Primary`,variant:`default`},{label:`Secondary`,variant:`secondary`},{label:`Outline`,variant:`outline`},{label:`Destructive`,variant:`destructive`},{label:`Ghost`,variant:`ghost`}]},{title:`Button sizes`,actions:[{label:`Small`,variant:`outline`,size:`sm`},{label:`Default`,variant:`outline`},{label:`Large`,variant:`outline`,size:`lg`},{label:`Icon only`,variant:`default`,size:`icon`,icon:`download`}]},{title:`Icon and state actions`,actions:[{label:`Download`,variant:`outline`,icon:`download`},{label:`Continue`,variant:`default`,icon:`arrow`},{label:`Loading`,variant:`default`,loading:!0},{label:`Disabled`,variant:`secondary`,disabled:!0}]},{title:`Link behavior`,actions:[{label:`Inline link`,variant:`link`},{label:`Link as button`,variant:`outline`,asLink:!0},{label:`Route button`,variant:`default`,asLink:!0,size:`sm`}]}];exports.buttonDemoRows=e;

package/dist/src/showcase/premium/button/data.js

@@ -0,0 +1,100 @@
+//#region src/showcase/premium/button/data.ts
+var e = [
+	{
+		title: "Variant coverage",
+		actions: [
+			{
+				label: "Primary",
+				variant: "default"
+			},
+			{
+				label: "Secondary",
+				variant: "secondary"
+			},
+			{
+				label: "Outline",
+				variant: "outline"
+			},
+			{
+				label: "Destructive",
+				variant: "destructive"
+			},
+			{
+				label: "Ghost",
+				variant: "ghost"
+			}
+		]
+	},
+	{
+		title: "Button sizes",
+		actions: [
+			{
+				label: "Small",
+				variant: "outline",
+				size: "sm"
+			},
+			{
+				label: "Default",
+				variant: "outline"
+			},
+			{
+				label: "Large",
+				variant: "outline",
+				size: "lg"
+			},
+			{
+				label: "Icon only",
+				variant: "default",
+				size: "icon",
+				icon: "download"
+			}
+		]
+	},
+	{
+		title: "Icon and state actions",
+		actions: [
+			{
+				label: "Download",
+				variant: "outline",
+				icon: "download"
+			},
+			{
+				label: "Continue",
+				variant: "default",
+				icon: "arrow"
+			},
+			{
+				label: "Loading",
+				variant: "default",
+				loading: !0
+			},
+			{
+				label: "Disabled",
+				variant: "secondary",
+				disabled: !0
+			}
+		]
+	},
+	{
+		title: "Link behavior",
+		actions: [
+			{
+				label: "Inline link",
+				variant: "link"
+			},
+			{
+				label: "Link as button",
+				variant: "outline",
+				asLink: !0
+			},
+			{
+				label: "Route button",
+				variant: "default",
+				asLink: !0,
+				size: "sm"
+			}
+		]
+	}
+];
+//#endregion
+export { e as buttonDemoRows };

package/dist/src/showcase/premium/button/index.cjs

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

package/dist/src/showcase/premium/button/index.js

@@ -0,0 +1,4 @@
+import { ButtonShowcase as e } from "./showcase.js";
+import { buttonMock as t } from "./mock.js";
+import { buttonDemoRows as n } from "./data.js";
+export { e as ButtonShowcase, n as buttonDemoRows, t as buttonMock };

package/dist/src/showcase/premium/button/mock.cjs

@@ -0,0 +1,65 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { ArrowRightIcon, DownloadIcon } from "lucide-react"
+import { Button, buttonVariants } from "tembro"
+
+export function BasicExamples() {
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-3">
+        <Button variant="default">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="destructive">Destructive</Button>
+      </div>
+
+      <div className="flex flex-wrap gap-3">
+        <Button size="sm">Small</Button>
+        <Button iconOnly aria-label="Download">
+          <DownloadIcon className="size-4" />
+        </Button>
+        <Button>
+          Continue
+          <ArrowRightIcon className="ml-2 size-4" />
+        </Button>
+      </div>
+
+      <div className="flex flex-wrap gap-3">
+        <Button variant="outline" size="sm" disabled>
+          Disabled
+        </Button>
+        <Button variant="default" loading>
+          Loading
+        </Button>
+      </div>
+
+      <div className="flex flex-wrap gap-3">
+        <a className={buttonVariants({ variant: "outline", size: "sm" })} href="/components">
+          Link styled as button
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export function ControlledButton() {
+  const [loading, setLoading] = React.useState(false)
+
+  return (
+    <Button
+      variant="default"
+      onClick={() => {
+        setLoading(true)
+        window.setTimeout(() => setLoading(false), 1800)
+      }}
+      loading={loading}
+    >
+      Submit
+    </Button>
+  )
+}
+
+// Don't overuse buttonVariants for every button instance.
+// Use Button's own variant/size props by default, and keep buttonVariants
+// only for styling non-button elements (a, Link) with shared look.`,htmlCode:`<button data-slot="button" data-variant="primary">
+  Continue
+</button>`,cliCommand:`npx tembro add button`,highlights:[`Primary/secondary/outline/destructive/ghost/link and size tokens`,`Icon slots with helper text and compact icon-only variant`,`Loading and disabled interactive states`,`buttonVariants utility usage for link-like elements`],relatedBlockSlugs:[`auth-sign-in`,`settings-form`,`sidebar-layout`],scenarios:[{title:`Primary CTA`,description:`Lead users toward the highest-priority action.`},{title:`Utility action`,description:`Use compact outline buttons for secondary workflows.`},{title:`Destructive confirm`,description:`Use strong color contrast for irreversible actions.`},{title:`Link behavior`,description:`Prefer semantic <a> when navigation is required.`},{title:`When not to use variants`,description:`Avoid using variants as a general utility class system for custom markup; use native controls/components instead.`}],capabilityNotes:[`Supports primary, secondary, outline, ghost, link and destructive visual styles.`,`Supports size tokens: sm, default, lg and icon.`,`Works in inline rows, full-width action areas and dense toolbars.`,`Supports focus, disabled and loading states for safe async interactions.`,`Use buttonVariants for non-button elements, but keep Button variant props for real button usage.`]};exports.buttonMock=e;

package/dist/src/showcase/premium/button/mock.js

@@ -0,0 +1,48 @@
+//#region src/showcase/premium/button/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { ArrowRightIcon, DownloadIcon } from \"lucide-react\"\nimport { Button, buttonVariants } from \"tembro\"\n\nexport function BasicExamples() {\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-3\">\n        <Button variant=\"default\">Primary</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <Button size=\"sm\">Small</Button>\n        <Button iconOnly aria-label=\"Download\">\n          <DownloadIcon className=\"size-4\" />\n        </Button>\n        <Button>\n          Continue\n          <ArrowRightIcon className=\"ml-2 size-4\" />\n        </Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <Button variant=\"outline\" size=\"sm\" disabled>\n          Disabled\n        </Button>\n        <Button variant=\"default\" loading>\n          Loading\n        </Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <a className={buttonVariants({ variant: \"outline\", size: \"sm\" })} href=\"/components\">\n          Link styled as button\n        </a>\n      </div>\n    </div>\n  )\n}\n\nexport function ControlledButton() {\n  const [loading, setLoading] = React.useState(false)\n\n  return (\n    <Button\n      variant=\"default\"\n      onClick={() => {\n        setLoading(true)\n        window.setTimeout(() => setLoading(false), 1800)\n      }}\n      loading={loading}\n    >\n      Submit\n    </Button>\n  )\n}\n\n// Don't overuse buttonVariants for every button instance.\n// Use Button's own variant/size props by default, and keep buttonVariants\n// only for styling non-button elements (a, Link) with shared look.",
+	htmlCode: "<button data-slot=\"button\" data-variant=\"primary\">\n  Continue\n</button>",
+	cliCommand: "npx tembro add button",
+	highlights: [
+		"Primary/secondary/outline/destructive/ghost/link and size tokens",
+		"Icon slots with helper text and compact icon-only variant",
+		"Loading and disabled interactive states",
+		"buttonVariants utility usage for link-like elements"
+	],
+	relatedBlockSlugs: [
+		"auth-sign-in",
+		"settings-form",
+		"sidebar-layout"
+	],
+	scenarios: [
+		{
+			title: "Primary CTA",
+			description: "Lead users toward the highest-priority action."
+		},
+		{
+			title: "Utility action",
+			description: "Use compact outline buttons for secondary workflows."
+		},
+		{
+			title: "Destructive confirm",
+			description: "Use strong color contrast for irreversible actions."
+		},
+		{
+			title: "Link behavior",
+			description: "Prefer semantic <a> when navigation is required."
+		},
+		{
+			title: "When not to use variants",
+			description: "Avoid using variants as a general utility class system for custom markup; use native controls/components instead."
+		}
+	],
+	capabilityNotes: [
+		"Supports primary, secondary, outline, ghost, link and destructive visual styles.",
+		"Supports size tokens: sm, default, lg and icon.",
+		"Works in inline rows, full-width action areas and dense toolbars.",
+		"Supports focus, disabled and loading states for safe async interactions.",
+		"Use buttonVariants for non-button elements, but keep Button variant props for real button usage."
+	]
+};
+//#endregion
+export { e as buttonMock };