tembro 2.1.13 → 3.1.1

package/dist/src/showcase/premium/sortable-list/showcase.js

@@ -0,0 +1,76 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { SortableList as n } from "../../../components/dnd/sortable-list.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/sortable-list/showcase.tsx
+var o = [
+	{
+		id: "brief",
+		label: "Product brief",
+		owner: "Azamat",
+		tone: "Ready"
+	},
+	{
+		id: "design",
+		label: "Design review",
+		owner: "Madina",
+		tone: "Review"
+	},
+	{
+		id: "release",
+		label: "Release checklist",
+		owner: "Jasur",
+		tone: "Blocked"
+	},
+	{
+		id: "docs",
+		label: "Documentation",
+		owner: "Nodira",
+		tone: "Draft"
+	}
+];
+function s() {
+	let [s, c] = r.useState(o), [l, u] = r.useState("No moves yet");
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex flex-wrap items-center justify-between gap-3",
+			children: [/* @__PURE__ */ i("p", {
+				className: "text-sm text-muted-foreground",
+				children: l
+			}), /* @__PURE__ */ i(e, {
+				type: "button",
+				size: "sm",
+				variant: "outline",
+				onClick: () => c(o),
+				children: "Reset order"
+			})]
+		}), /* @__PURE__ */ i(n, {
+			items: s,
+			getItemId: (e) => e.id,
+			getItemLabel: (e) => e.label,
+			onItemsChange: (e, t) => {
+				c(e), u(`${t.item.label}: ${t.oldIndex + 1} → ${t.newIndex + 1}`);
+			},
+			renderItem: (e) => /* @__PURE__ */ a("div", {
+				className: "flex min-w-0 items-center justify-between gap-3 px-1 py-1.5",
+				children: [/* @__PURE__ */ a("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ i("div", {
+						className: "truncate text-sm font-medium",
+						children: e.label
+					}), /* @__PURE__ */ a("div", {
+						className: "text-xs text-muted-foreground",
+						children: ["Owner: ", e.owner]
+					})]
+				}), /* @__PURE__ */ i(t, {
+					variant: "outline",
+					children: e.tone
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { s as SortableListShowcase };

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

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

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

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

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

@@ -0,0 +1,13 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { LoadingOverlay, Spinner } from "tembro"
+
+export function Example() {
+  return (
+    <div className="space-y-4">
+      <Spinner size="sm" label="Refreshing" />
+
+      <LoadingOverlay loading label="Saving changes">
+        <div className="rounded-xl border p-6">Content under save</div>
+      </LoadingOverlay>
+    </div>
+  )
+}`,cliCommand:`npx tembro add spinner`,highlights:[`Inline spinner plus overlay mode from the same export`,`Size tokens for dense buttons, cards, and page sections`,`Useful for short-lived async work`],scenarios:[{title:`Inline refresh`,description:`Show immediate feedback inside a compact action row.`},{title:`Section save`,description:`Temporarily lock a panel while preserving its layout.`},{title:`Background fetch`,description:`Signal progress without replacing the whole route.`}]};exports.spinnerMock=e;

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

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/spinner/mock.ts
+var e = {
+	code: "import { LoadingOverlay, Spinner } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-4\">\n      <Spinner size=\"sm\" label=\"Refreshing\" />\n\n      <LoadingOverlay loading label=\"Saving changes\">\n        <div className=\"rounded-xl border p-6\">Content under save</div>\n      </LoadingOverlay>\n    </div>\n  )\n}",
+	cliCommand: "npx tembro add spinner",
+	highlights: [
+		"Inline spinner plus overlay mode from the same export",
+		"Size tokens for dense buttons, cards, and page sections",
+		"Useful for short-lived async work"
+	],
+	scenarios: [
+		{
+			title: "Inline refresh",
+			description: "Show immediate feedback inside a compact action row."
+		},
+		{
+			title: "Section save",
+			description: "Temporarily lock a panel while preserving its layout."
+		},
+		{
+			title: "Background fetch",
+			description: "Signal progress without replacing the whole route."
+		}
+	]
+};
+//#endregion
+export { e as spinnerMock };

package/dist/src/showcase/premium/spinner/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/ui/spinner/index.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(){let[e,s]=i.useState(!1);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsxs)(`section`,{className:`pb-6`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed primitive`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Spinner covers short async feedback`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use it for quick inline or section-level pending states. If the wait grows, move up to a fuller loading state.`})]}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-4`,children:[(0,a.jsxs)(`div`,{className:`flex items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(r.Spinner,{size:`xs`,label:`Syncing`}),(0,a.jsx)(`span`,{className:`text-sm aui-text-muted`,children:`Syncing tokens`})]}),(0,a.jsxs)(`div`,{className:`flex items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(r.Spinner,{size:`sm`,label:`Refreshing`}),(0,a.jsx)(`span`,{className:`text-sm aui-text-muted`,children:`Refreshing routes`})]}),(0,a.jsxs)(`div`,{className:`flex items-center gap-3 rounded-xl border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(r.Spinner,{size:`lg`,label:`Publishing`}),(0,a.jsx)(n.Badge,{variant:`outline`,children:`Publishing`})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,a.jsx)(r.LoadingOverlay,{loading:e,label:`Saving configuration`,children:(0,a.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-5`,children:(0,a.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Billing configuration`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Overlay mode blocks edits briefly while keeping the context visible.`})]}),(0,a.jsx)(t.Button,{onClick:()=>{s(!0),window.setTimeout(()=>s(!1),1200)},children:e?`Saving...`:`Save changes`})]})})}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,a.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsx)(`p`,{children:`Inline spinners are best when the user already knows what action was triggered.`}),(0,a.jsx)(`p`,{children:`Overlay mode is safer for short locked saves than replacing the whole section with placeholders.`}),(0,a.jsx)(`p`,{children:`Do not leave a spinner alone for long-running uncertain work. Add progress or explanatory copy.`})]})]})]})})]})}exports.SpinnerShowcase=s;

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

@@ -0,0 +1,113 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { LoadingOverlay as n, Spinner as r } from "../../../components/ui/spinner/index.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/showcase/premium/spinner/showcase.tsx
+var s = "border-t border-[color:var(--aui-divider)] py-6";
+function c() {
+	let [c, l] = i.useState(!1);
+	return /* @__PURE__ */ o("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ o("section", {
+				className: "pb-6",
+				children: [
+					/* @__PURE__ */ a("p", {
+						className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+						children: "Installed primitive"
+					}),
+					/* @__PURE__ */ a("h3", {
+						className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+						children: "Spinner covers short async feedback"
+					}),
+					/* @__PURE__ */ a("p", {
+						className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
+						children: "Use it for quick inline or section-level pending states. If the wait grows, move up to a fuller loading state."
+					})
+				]
+			}),
+			/* @__PURE__ */ a("section", {
+				className: s,
+				children: /* @__PURE__ */ o("div", {
+					className: "flex flex-wrap items-center gap-4",
+					children: [
+						/* @__PURE__ */ o("div", {
+							className: "flex items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] px-4 py-3",
+							children: [/* @__PURE__ */ a(r, {
+								size: "xs",
+								label: "Syncing"
+							}), /* @__PURE__ */ a("span", {
+								className: "text-sm aui-text-muted",
+								children: "Syncing tokens"
+							})]
+						}),
+						/* @__PURE__ */ o("div", {
+							className: "flex items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] px-4 py-3",
+							children: [/* @__PURE__ */ a(r, {
+								size: "sm",
+								label: "Refreshing"
+							}), /* @__PURE__ */ a("span", {
+								className: "text-sm aui-text-muted",
+								children: "Refreshing routes"
+							})]
+						}),
+						/* @__PURE__ */ o("div", {
+							className: "flex items-center gap-3 rounded-xl border border-[color:var(--aui-divider)] px-4 py-3",
+							children: [/* @__PURE__ */ a(r, {
+								size: "lg",
+								label: "Publishing"
+							}), /* @__PURE__ */ a(t, {
+								variant: "outline",
+								children: "Publishing"
+							})]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ a("section", {
+				className: s,
+				children: /* @__PURE__ */ o("div", {
+					className: "grid gap-6 xl:grid-cols-[1fr_360px]",
+					children: [/* @__PURE__ */ a(n, {
+						loading: c,
+						label: "Saving configuration",
+						children: /* @__PURE__ */ a("div", {
+							className: "rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-5",
+							children: /* @__PURE__ */ o("div", {
+								className: "flex items-center justify-between gap-4",
+								children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
+									className: "text-lg font-semibold aui-text-strong",
+									children: "Billing configuration"
+								}), /* @__PURE__ */ a("p", {
+									className: "mt-2 text-sm leading-6 aui-text-muted",
+									children: "Overlay mode blocks edits briefly while keeping the context visible."
+								})] }), /* @__PURE__ */ a(e, {
+									onClick: () => {
+										l(!0), window.setTimeout(() => l(!1), 1200);
+									},
+									children: c ? "Saving..." : "Save changes"
+								})]
+							})
+						})
+					}), /* @__PURE__ */ o("div", {
+						className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
+						children: [/* @__PURE__ */ a("p", {
+							className: "text-sm font-semibold aui-text-strong",
+							children: "Guidance"
+						}), /* @__PURE__ */ o("div", {
+							className: "mt-3 space-y-3 text-sm leading-6 aui-text-muted",
+							children: [
+								/* @__PURE__ */ a("p", { children: "Inline spinners are best when the user already knows what action was triggered." }),
+								/* @__PURE__ */ a("p", { children: "Overlay mode is safer for short locked saves than replacing the whole section with placeholders." }),
+								/* @__PURE__ */ a("p", { children: "Do not leave a spinner alone for long-running uncertain work. Add progress or explanatory copy." })
+							]
+						})]
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { c as SpinnerShowcase };

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

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

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

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

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

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Statistic, StatisticCard, StatisticGrid } from "tembro"
+
+export function Example() {
+  return (
+    <StatisticGrid columns={3}>
+      <StatisticCard label="Revenue" value="$24.8k" change="+12.4%" trend="up" />
+      <StatisticCard label="Errors" value="14" change="-3.1%" trend="down" />
+      <StatisticCard label="Conversion" value="6.3%" description="vs last 30 days" />
+    </StatisticGrid>
+  )
+}`,cliCommand:`npx tembro add statistic`,highlights:[`Single statistic, statistic card and grid exports work together`,`Trend badge, loading state and description support`,`Useful for dashboard headers and KPI summaries`],scenarios:[{title:`KPI row`,description:`Summarize top metrics across a dashboard.`},{title:`Module summary`,description:`Give a feature area one compact numeric header.`},{title:`Loading metric`,description:`Reserve metric space while upstream data resolves.`}]};exports.statisticMock=e;

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

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/statistic/mock.ts
+var e = {
+	code: "import { Statistic, StatisticCard, StatisticGrid } from \"tembro\"\n\nexport function Example() {\n  return (\n    <StatisticGrid columns={3}>\n      <StatisticCard label=\"Revenue\" value=\"$24.8k\" change=\"+12.4%\" trend=\"up\" />\n      <StatisticCard label=\"Errors\" value=\"14\" change=\"-3.1%\" trend=\"down\" />\n      <StatisticCard label=\"Conversion\" value=\"6.3%\" description=\"vs last 30 days\" />\n    </StatisticGrid>\n  )\n}",
+	cliCommand: "npx tembro add statistic",
+	highlights: [
+		"Single statistic, statistic card and grid exports work together",
+		"Trend badge, loading state and description support",
+		"Useful for dashboard headers and KPI summaries"
+	],
+	scenarios: [
+		{
+			title: "KPI row",
+			description: "Summarize top metrics across a dashboard."
+		},
+		{
+			title: "Module summary",
+			description: "Give a feature area one compact numeric header."
+		},
+		{
+			title: "Loading metric",
+			description: "Reserve metric space while upstream data resolves."
+		}
+	]
+};
+//#endregion
+export { e as statisticMock };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/display/statistic.cjs"),n=require("../../../components/display/trend-card.cjs"),r=require("../../../components/charts/progress-ring.cjs");let i=require("react/jsx-runtime");var a=`border-t border-[color:var(--aui-divider)] py-6`;function o(){return(0,i.jsxs)(`div`,{className:`space-y-0`,children:[(0,i.jsxs)(`section`,{className:`pb-6`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Statistic is the KPI surface, not a generic card clone`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use the base statistic when the number matters most. Promote to StatisticCard or StatisticGrid when several metrics need shared structure.`})]}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(t.StatisticGrid,{columns:3,children:[(0,i.jsx)(t.StatisticCard,{label:`Revenue`,value:`$24.8k`,change:`+12.4%`,trend:`up`,description:`vs last 30 days`}),(0,i.jsx)(t.StatisticCard,{label:`Errors`,value:`14`,change:`-3.1%`,trend:`down`,description:`production incidents`}),(0,i.jsx)(t.StatisticCard,{label:`Adoption`,value:`86%`,description:`workspace activation rate`,action:(0,i.jsx)(e.Badge,{variant:`secondary`,children:`Live`})})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,i.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,i.jsx)(t.Statistic,{label:`Publish latency`,value:`1.8s`,suffix:`avg`,change:`-0.4s`,trend:`down`,description:`from the previous release window`})}),(0,i.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,i.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,i.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,i.jsx)(`p`,{children:`Keep labels short and units clear. Users should understand the value before reading the description.`}),(0,i.jsx)(`p`,{children:`Trend color should reinforce meaning, not carry the whole message alone.`})]})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_240px]`,children:[(0,i.jsx)(n.TrendCard,{title:`Release velocity`,value:`24`,change:`+3`,trend:`up`,description:`completed this sprint`,sparkline:[8,10,9,14,18,19,24]}),(0,i.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:(0,i.jsx)(r.ProgressRing,{value:76,label:`76%`,description:`coverage`,tone:`success`})})]})})]})}exports.StatisticShowcase=o;

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

@@ -0,0 +1,120 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { Statistic as t, StatisticCard as n, StatisticGrid as r } from "../../../components/display/statistic.js";
+import { TrendCard as i } from "../../../components/display/trend-card.js";
+import { ProgressRing as a } from "../../../components/charts/progress-ring.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/showcase/premium/statistic/showcase.tsx
+var c = "border-t border-[color:var(--aui-divider)] py-6";
+function l() {
+	return /* @__PURE__ */ s("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ s("section", {
+				className: "pb-6",
+				children: [
+					/* @__PURE__ */ o("p", {
+						className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+						children: "Installed display primitive"
+					}),
+					/* @__PURE__ */ o("h3", {
+						className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+						children: "Statistic is the KPI surface, not a generic card clone"
+					}),
+					/* @__PURE__ */ o("p", {
+						className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
+						children: "Use the base statistic when the number matters most. Promote to StatisticCard or StatisticGrid when several metrics need shared structure."
+					})
+				]
+			}),
+			/* @__PURE__ */ o("section", {
+				className: c,
+				children: /* @__PURE__ */ s(r, {
+					columns: 3,
+					children: [
+						/* @__PURE__ */ o(n, {
+							label: "Revenue",
+							value: "$24.8k",
+							change: "+12.4%",
+							trend: "up",
+							description: "vs last 30 days"
+						}),
+						/* @__PURE__ */ o(n, {
+							label: "Errors",
+							value: "14",
+							change: "-3.1%",
+							trend: "down",
+							description: "production incidents"
+						}),
+						/* @__PURE__ */ o(n, {
+							label: "Adoption",
+							value: "86%",
+							description: "workspace activation rate",
+							action: /* @__PURE__ */ o(e, {
+								variant: "secondary",
+								children: "Live"
+							})
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ o("section", {
+				className: c,
+				children: /* @__PURE__ */ s("div", {
+					className: "grid gap-6 xl:grid-cols-[1fr_360px]",
+					children: [/* @__PURE__ */ o("div", {
+						className: "rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
+						children: /* @__PURE__ */ o(t, {
+							label: "Publish latency",
+							value: "1.8s",
+							suffix: "avg",
+							change: "-0.4s",
+							trend: "down",
+							description: "from the previous release window"
+						})
+					}), /* @__PURE__ */ s("div", {
+						className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
+						children: [/* @__PURE__ */ o("p", {
+							className: "text-sm font-semibold aui-text-strong",
+							children: "Guidance"
+						}), /* @__PURE__ */ s("div", {
+							className: "mt-3 space-y-3 text-sm leading-6 aui-text-muted",
+							children: [/* @__PURE__ */ o("p", { children: "Keep labels short and units clear. Users should understand the value before reading the description." }), /* @__PURE__ */ o("p", { children: "Trend color should reinforce meaning, not carry the whole message alone." })]
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ o("section", {
+				className: c,
+				children: /* @__PURE__ */ s("div", {
+					className: "grid gap-6 xl:grid-cols-[1fr_240px]",
+					children: [/* @__PURE__ */ o(i, {
+						title: "Release velocity",
+						value: "24",
+						change: "+3",
+						trend: "up",
+						description: "completed this sprint",
+						sparkline: [
+							8,
+							10,
+							9,
+							14,
+							18,
+							19,
+							24
+						]
+					}), /* @__PURE__ */ o("div", {
+						className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
+						children: /* @__PURE__ */ o(a, {
+							value: 76,
+							label: "76%",
+							description: "coverage",
+							tone: "success"
+						})
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { l as StatisticShowcase };

package/dist/src/showcase/premium/sticky-footer-bar/index.cjs

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

package/dist/src/showcase/premium/sticky-footer-bar/index.js

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

package/dist/src/showcase/premium/sticky-footer-bar/mock.cjs

@@ -0,0 +1,15 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, StickyFooterBar } from "tembro"
+
+export function Example() {
+  return (
+    <StickyFooterBar
+      start={<span className="text-sm">Unsaved changes</span>}
+      end={
+        <>
+          <Button size="sm" variant="outline">Discard</Button>
+          <Button size="sm">Save</Button>
+        </>
+      }
+    />
+  )
+}`,cliCommand:`npx tembro add sticky-footer-bar`,highlights:[`Sticky bottom action bar with start/end slots`,`Useful in long forms or page-level action surfaces`,`Works with mixed content and custom children`],scenarios:[{title:`Editor`,description:`Keep save actions visible while scrolling long content.`},{title:`Dashboard`,description:`Show contextual batch actions near viewport bottom.`}]};exports.stickyFooterBarMock=e;

package/dist/src/showcase/premium/sticky-footer-bar/mock.js

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/sticky-footer-bar/mock.ts
+var e = {
+	code: "import { Button, StickyFooterBar } from \"tembro\"\n\nexport function Example() {\n  return (\n    <StickyFooterBar\n      start={<span className=\"text-sm\">Unsaved changes</span>}\n      end={\n        <>\n          <Button size=\"sm\" variant=\"outline\">Discard</Button>\n          <Button size=\"sm\">Save</Button>\n        </>\n      }\n    />\n  )\n}",
+	cliCommand: "npx tembro add sticky-footer-bar",
+	highlights: [
+		"Sticky bottom action bar with start/end slots",
+		"Useful in long forms or page-level action surfaces",
+		"Works with mixed content and custom children"
+	],
+	scenarios: [{
+		title: "Editor",
+		description: "Keep save actions visible while scrolling long content."
+	}, {
+		title: "Dashboard",
+		description: "Show contextual batch actions near viewport bottom."
+	}]
+};
+//#endregion
+export { e as stickyFooterBarMock };

package/dist/src/showcase/premium/sticky-footer-bar/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/layout/sticky-footer-bar.cjs");let n=require("react/jsx-runtime");function r(){return(0,n.jsxs)(`div`,{className:`relative min-h-56 rounded-lg border`,children:[(0,n.jsxs)(`div`,{className:`h-40 overflow-auto p-4`,children:[(0,n.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Scroll inside this panel and keep action buttons visible at the bottom. This simulates a long form or content page where save and cancel controls should stay accessible.`}),(0,n.jsx)(`div`,{className:`mt-4 space-y-3`,children:Array.from({length:20}).map((e,t)=>(0,n.jsxs)(`div`,{className:`rounded-md border px-3 py-2 text-sm`,children:[`Row `,t+1]},t))})]}),(0,n.jsx)(t.StickyFooterBar,{start:(0,n.jsx)(`span`,{className:`text-sm font-medium text-muted-foreground`,children:`Unsaved changes`}),end:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.Button,{size:`sm`,variant:`outline`,children:`Discard`}),(0,n.jsx)(e.Button,{size:`sm`,children:`Save draft`})]})})]})}exports.StickyFooterBarShowcase=r;

package/dist/src/showcase/premium/sticky-footer-bar/showcase.js

@@ -0,0 +1,37 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { StickyFooterBar as t } from "../../../components/layout/sticky-footer-bar.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/sticky-footer-bar/showcase.tsx
+function a() {
+	return /* @__PURE__ */ i("div", {
+		className: "relative min-h-56 rounded-lg border",
+		children: [/* @__PURE__ */ i("div", {
+			className: "h-40 overflow-auto p-4",
+			children: [/* @__PURE__ */ r("p", {
+				className: "text-sm text-muted-foreground",
+				children: "Scroll inside this panel and keep action buttons visible at the bottom. This simulates a long form or content page where save and cancel controls should stay accessible."
+			}), /* @__PURE__ */ r("div", {
+				className: "mt-4 space-y-3",
+				children: Array.from({ length: 20 }).map((e, t) => /* @__PURE__ */ i("div", {
+					className: "rounded-md border px-3 py-2 text-sm",
+					children: ["Row ", t + 1]
+				}, t))
+			})]
+		}), /* @__PURE__ */ r(t, {
+			start: /* @__PURE__ */ r("span", {
+				className: "text-sm font-medium text-muted-foreground",
+				children: "Unsaved changes"
+			}),
+			end: /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(e, {
+				size: "sm",
+				variant: "outline",
+				children: "Discard"
+			}), /* @__PURE__ */ r(e, {
+				size: "sm",
+				children: "Save draft"
+			})] })
+		})]
+	});
+}
+//#endregion
+export { a as StickyFooterBarShowcase };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{title:`Dark mode sync`,description:`Mirror theme across all workspaces.`,defaultChecked:!0},{title:`Email alerts`,description:`Send update notifications to team members.`,defaultChecked:!0},{title:`Beta feature`,description:`Expose pre-release UI to internal members only.`}];exports.switchDemoRows=e;

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

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/switch/data.ts
+var e = [
+	{
+		title: "Dark mode sync",
+		description: "Mirror theme across all workspaces.",
+		defaultChecked: !0
+	},
+	{
+		title: "Email alerts",
+		description: "Send update notifications to team members.",
+		defaultChecked: !0
+	},
+	{
+		title: "Beta feature",
+		description: "Expose pre-release UI to internal members only."
+	}
+];
+//#endregion
+export { e as switchDemoRows };

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

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

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

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

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

@@ -0,0 +1,18 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { Switch } from "tembro"
+
+export function Example() {
+  const [isOn, setIsOn] = useState(true)
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <Switch id="workspace-sync" checked={isOn} onCheckedChange={setIsOn} aria-label="Workspace sync" />
+        <label htmlFor="workspace-sync">Workspace sync</label>
+      </div>
+      <Switch id="feature-flag" defaultChecked aria-label="Beta feature" />
+      <Switch id="disabled-switch" disabled aria-label="Disabled switch" />
+    </div>
+  )
+}
+`,highlights:[`Preference toggles`,`Settings rows`,`Controlled state`,`Compact interactions`,`Accessible labels`],relatedBlockSlugs:[`settings-form`,`sidebar-layout`,`dashboard-starter`],scenarios:[{title:`Workspace settings`,description:`Use switches for lightweight on/off preferences.`},{title:`Environment sync`,description:`Mirror behavior across multiple surfaces.`},{title:`Feature flags`,description:`Represent enabled states without modal confirmation.`},{title:`Inline preference rows`,description:`Fit tightly within stacked settings content.`}],capabilityNotes:[`Designed for binary preference control in compact form rows.`,`Supports controlled checked state, disabled and readOnly-safe patterns.`,`Best shown inside settings cards with explanatory copy per row.`,`Always include an accessible label (id + htmlFor or aria-label).`]};exports.switchMock=e;

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

@@ -0,0 +1,42 @@
+//#region src/showcase/premium/switch/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { Switch } from \"tembro\"\n\nexport function Example() {\n  const [isOn, setIsOn] = useState(true)\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"workspace-sync\" checked={isOn} onCheckedChange={setIsOn} aria-label=\"Workspace sync\" />\n        <label htmlFor=\"workspace-sync\">Workspace sync</label>\n      </div>\n      <Switch id=\"feature-flag\" defaultChecked aria-label=\"Beta feature\" />\n      <Switch id=\"disabled-switch\" disabled aria-label=\"Disabled switch\" />\n    </div>\n  )\n}\n",
+	highlights: [
+		"Preference toggles",
+		"Settings rows",
+		"Controlled state",
+		"Compact interactions",
+		"Accessible labels"
+	],
+	relatedBlockSlugs: [
+		"settings-form",
+		"sidebar-layout",
+		"dashboard-starter"
+	],
+	scenarios: [
+		{
+			title: "Workspace settings",
+			description: "Use switches for lightweight on/off preferences."
+		},
+		{
+			title: "Environment sync",
+			description: "Mirror behavior across multiple surfaces."
+		},
+		{
+			title: "Feature flags",
+			description: "Represent enabled states without modal confirmation."
+		},
+		{
+			title: "Inline preference rows",
+			description: "Fit tightly within stacked settings content."
+		}
+	],
+	capabilityNotes: [
+		"Designed for binary preference control in compact form rows.",
+		"Supports controlled checked state, disabled and readOnly-safe patterns.",
+		"Best shown inside settings cards with explanatory copy per row.",
+		"Always include an accessible label (id + htmlFor or aria-label)."
+	]
+};
+//#endregion
+export { e as switchMock };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/switch/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("./data.cjs");let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({state:o,setState:s}){return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:[(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Preferences`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Switches should feel like settings`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This pattern is for single on/off preferences. The preview should read like a settings page, not a stack of anonymous toggles.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Settings`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Single preference`})]})]}),(0,i.jsx)(`div`,{className:`mt-6 grid gap-3`,children:r.switchDemoRows.map((e,n)=>(0,i.jsx)(`div`,{className:a,children:(0,i.jsx)(t.Switch,{label:e.title,description:e.description,checked:n===0?o.switchOn:e.defaultChecked,onCheckedChange:n===0?e=>s({switchOn:e}):void 0,defaultChecked:n>0?e.defaultChecked:void 0,size:n===0?`lg`:`md`,labelPlacement:`start`,className:`w-full justify-between`})},e.title))})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,i.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Dark mode sync is `,o.switchOn?`on`:`off`]}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Switches should show immediate preference feedback without requiring a save button.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(e.Button,{type:`button`,size:`sm`,onClick:()=>s({switchOn:!0}),children:`Turn on`}),(0,i.jsx)(e.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>s({switchOn:!1}),children:`Turn off`})]})]}),(0,i.jsxs)(`div`,{className:`mt-5 grid gap-3 sm:grid-cols-2`,children:[(0,i.jsx)(t.Switch,{label:`Sync in progress`,description:`Loading disables the control until the request finishes.`,loading:!0,defaultChecked:!0}),(0,i.jsx)(t.Switch,{label:`Invalid setting`,description:`Error state keeps the same field layout.`,invalid:!0})]})]})]})}exports.SwitchShowcase=o;