tembro 3.1.1 → 3.1.6

package/dist/src/showcase/premium/hover-card/mock.js

@@ -1,39 +0,0 @@
-//#region src/showcase/premium/hover-card/mock.ts
-var e = {
-	code: "import { Avatar, HoverCard } from \"tembro\"\n\nexport function Example() {\n  return (\n    <HoverCard\n      trigger={<Avatar fallback=\"AJ\" />}\n      content={<div className=\"space-y-1\"><p className=\"font-medium\">Azamat</p><p className=\"text-sm text-muted-foreground\">Design system owner</p></div>}\n    />\n  )\n}",
-	htmlCode: "<div data-slot=\"hover-card\"></div>",
-	cliCommand: "npx tembro add hover-card",
-	highlights: [
-		"Entity preview",
-		"Hover + focus",
-		"Secondary context",
-		"Compact detail card"
-	],
-	relatedBlockSlugs: [
-		"crm-dashboard",
-		"users-table",
-		"settings-form"
-	],
-	scenarios: [
-		{
-			title: "User preview",
-			description: "Reveal compact profile details without opening a full panel."
-		},
-		{
-			title: "Card summary",
-			description: "Useful for metrics and owners in dense dashboard layouts."
-		},
-		{
-			title: "Secondary context",
-			description: "Show supporting data only when the user intentionally pauses."
-		}
-	],
-	capabilityNotes: [
-		"HoverCard is for richer secondary context than Tooltip.",
-		"Keep content compact; if users need actions, switch to Popover.",
-		"Always ensure trigger remains meaningful without the reveal card.",
-		"Support focus states so keyboard users can access the same content."
-	]
-};
-//#endregion
-export { e as hoverCardMock };

package/dist/src/showcase/premium/hover-card/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/hover-card.cjs"),r=require("../../../components/display/avatar.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[`bottom`,`right`,`top`,`left`],s=`border-t border-[color:var(--aui-divider)] py-6`;function c(){let[e,c]=i.useState(`bottom`);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:`Hover card`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Richer than tooltip, lighter than popover`}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Use hover card when one entity preview needs a bit more room but still should feel lightweight.`})]}),(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:`Side`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong capitalize`,children:e})]}),(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:`Use for`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Entity preview`})]}),(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:`Avoid for`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Heavy actions`})]})]})]})}),(0,a.jsx)(`section`,{className:s,children:(0,a.jsx)(`div`,{className:`flex min-h-52 items-center justify-center rounded-[22px] border border-[color:var(--aui-divider)] p-5`,children:(0,a.jsx)(n.HoverCard,{side:e,trigger:(0,a.jsx)(`button`,{type:`button`,className:`rounded-full border border-[color:var(--aui-divider)] p-1`,children:(0,a.jsx)(r.Avatar,{fallback:`AJ`})}),content:(0,a.jsxs)(`div`,{className:`space-y-1`,children:[(0,a.jsx)(`p`,{className:`font-medium`,children:`Azamat Jurayev`}),(0,a.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Design system owner`}),(0,a.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:`Keeps public components and package releases in sync.`})]})})})}),(0,a.jsx)(`section`,{className:s,children:(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:o.map(n=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===n?`default`:`secondary`,onClick:()=>c(n),children:n},n))})})]})}exports.HoverCardShowcase=c;

package/dist/src/showcase/premium/hover-card/showcase.js

@@ -1,123 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { HoverCard as t } from "../../../components/ui/hover-card.js";
-import { Avatar as n } from "../../../components/display/avatar.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/showcase/premium/hover-card/showcase.tsx
-var o = [
-	"bottom",
-	"right",
-	"top",
-	"left"
-], s = "border-t border-[color:var(--aui-divider)] py-6";
-function c() {
-	let [c, l] = r.useState("bottom");
-	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: "Hover card"
-							}),
-							/* @__PURE__ */ i("h3", {
-								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-								children: "Richer than tooltip, lighter than popover"
-							}),
-							/* @__PURE__ */ i("p", {
-								className: "mt-3 text-sm leading-6 aui-text-muted",
-								children: "Use hover card when one entity preview needs a bit more room but still should feel lightweight."
-							})
-						]
-					}), /* @__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: "Side"
-								}), /* @__PURE__ */ i("p", {
-									className: "mt-2 text-lg font-semibold aui-text-strong capitalize",
-									children: c
-								})]
-							}),
-							/* @__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: "Use for"
-								}), /* @__PURE__ */ i("p", {
-									className: "mt-2 text-lg font-semibold aui-text-strong",
-									children: "Entity preview"
-								})]
-							}),
-							/* @__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: "Avoid for"
-								}), /* @__PURE__ */ i("p", {
-									className: "mt-2 text-lg font-semibold aui-text-strong",
-									children: "Heavy actions"
-								})]
-							})
-						]
-					})]
-				})
-			}),
-			/* @__PURE__ */ i("section", {
-				className: s,
-				children: /* @__PURE__ */ i("div", {
-					className: "flex min-h-52 items-center justify-center rounded-[22px] border border-[color:var(--aui-divider)] p-5",
-					children: /* @__PURE__ */ i(t, {
-						side: c,
-						trigger: /* @__PURE__ */ i("button", {
-							type: "button",
-							className: "rounded-full border border-[color:var(--aui-divider)] p-1",
-							children: /* @__PURE__ */ i(n, { fallback: "AJ" })
-						}),
-						content: /* @__PURE__ */ a("div", {
-							className: "space-y-1",
-							children: [
-								/* @__PURE__ */ i("p", {
-									className: "font-medium",
-									children: "Azamat Jurayev"
-								}),
-								/* @__PURE__ */ i("p", {
-									className: "text-sm text-muted-foreground",
-									children: "Design system owner"
-								}),
-								/* @__PURE__ */ i("p", {
-									className: "text-xs text-muted-foreground",
-									children: "Keeps public components and package releases in sync."
-								})
-							]
-						})
-					})
-				})
-			}),
-			/* @__PURE__ */ i("section", {
-				className: s,
-				children: /* @__PURE__ */ i("div", {
-					className: "flex flex-wrap gap-2",
-					children: o.map((t) => /* @__PURE__ */ i(e, {
-						type: "button",
-						size: "sm",
-						variant: c === t ? "default" : "secondary",
-						onClick: () => l(t),
-						children: t
-					}, t))
-				})
-			})
-		]
-	});
-}
-//#endregion
-export { c as HoverCardShowcase };

package/dist/src/showcase/premium/masked-input/index.cjs

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

package/dist/src/showcase/premium/masked-input/index.js

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

package/dist/src/showcase/premium/masked-input/mock.cjs

@@ -1,17 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { Input } from "tembro"
-
-export function Example() {
-  const [value, setValue] = useState("AA-123")
-
-  return (
-    <Input
-      kind="masked"
-      value={value}
-      onValueChange={(nextValue) => setValue(nextValue)}
-      mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, "$1-")}
-      placeholder="AA-123"
-    />
-  )
-}
-`,htmlCode:`<label for="masked">Referral code</label><input id="masked" type="text" value="AA-123" placeholder="AA-123" />`,cliCommand:`npx tembro add input`,highlights:[`Mask callback runs on each edit`,`Uppercase and slicing are explicit formatting assumptions`,`Raw value assumptions should be mirrored in validation and submit payloads`,`Use a deterministic placeholder that matches the mask contract`],relatedBlockSlugs:[`settings-form`,`crm-dashboard`,`auth-sign-in`],scenarios:[{title:`Referral codes`,description:`Use fixed pattern for short identifiers while typing.`},{title:`License keys`,description:`Apply grouping with a strict uppercase format and controlled length.`},{title:`Display normalization`,description:`Normalize display while preserving form-level expectations.`},{title:`Validation gate`,description:`Reject submission when value shape does not match mask contract.`}],capabilityNotes:[`Document whether callback receives raw text or already masked text.`,`If you need raw payload, sanitize before submit and keep canonical storage layer separate.`,`Use one mask function source for both form and API submission paths.`,`Treat partially typed values as invalid until user completion conditions are met.`]};exports.maskedInputMock=e;

package/dist/src/showcase/premium/masked-input/mock.js

@@ -1,43 +0,0 @@
-//#region src/showcase/premium/masked-input/mock.ts
-var e = {
-	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"AA-123\")\n\n  return (\n    <Input\n      kind=\"masked\"\n      value={value}\n      onValueChange={(nextValue) => setValue(nextValue)}\n      mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, \"$1-\")}\n      placeholder=\"AA-123\"\n    />\n  )\n}\n",
-	htmlCode: "<label for=\"masked\">Referral code</label><input id=\"masked\" type=\"text\" value=\"AA-123\" placeholder=\"AA-123\" />",
-	cliCommand: "npx tembro add input",
-	highlights: [
-		"Mask callback runs on each edit",
-		"Uppercase and slicing are explicit formatting assumptions",
-		"Raw value assumptions should be mirrored in validation and submit payloads",
-		"Use a deterministic placeholder that matches the mask contract"
-	],
-	relatedBlockSlugs: [
-		"settings-form",
-		"crm-dashboard",
-		"auth-sign-in"
-	],
-	scenarios: [
-		{
-			title: "Referral codes",
-			description: "Use fixed pattern for short identifiers while typing."
-		},
-		{
-			title: "License keys",
-			description: "Apply grouping with a strict uppercase format and controlled length."
-		},
-		{
-			title: "Display normalization",
-			description: "Normalize display while preserving form-level expectations."
-		},
-		{
-			title: "Validation gate",
-			description: "Reject submission when value shape does not match mask contract."
-		}
-	],
-	capabilityNotes: [
-		"Document whether callback receives raw text or already masked text.",
-		"If you need raw payload, sanitize before submit and keep canonical storage layer separate.",
-		"Use one mask function source for both form and API submission paths.",
-		"Treat partially typed values as invalid until user completion conditions are met."
-	]
-};
-//#endregion
-export { e as maskedInputMock };

package/dist/src/showcase/premium/masked-input/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/input/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)(`AA-123`);return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.Input,{kind:`masked`,value:i,onValueChange:e=>a(e),mask:e=>e.toUpperCase().slice(0,6).replace(/(.{3})(?=.)/,`$1-`),placeholder:`AA-123`}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Display value: `,i||`—`]}),(0,n.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Task focus: fixed-format field where raw/display value assumptions should be documented.`}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.MaskedInputShowcase=r;

package/dist/src/showcase/premium/masked-input/showcase.js

@@ -1,33 +0,0 @@
-import { Input as e } from "../../../components/ui/input/index.js";
-import { useState as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/showcase/premium/masked-input/showcase.tsx
-function i({ mode: i }) {
-	let [a, o] = t("AA-123");
-	return /* @__PURE__ */ r("div", {
-		className: "space-y-4",
-		children: [
-			/* @__PURE__ */ n(e, {
-				kind: "masked",
-				value: a,
-				onValueChange: (e) => o(e),
-				mask: (e) => e.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, "$1-"),
-				placeholder: "AA-123"
-			}),
-			/* @__PURE__ */ r("p", {
-				className: "aui-text-subtle text-sm",
-				children: ["Display value: ", a || "—"]
-			}),
-			/* @__PURE__ */ n("p", {
-				className: "aui-text-muted text-sm",
-				children: "Task focus: fixed-format field where raw/display value assumptions should be documented."
-			}),
-			/* @__PURE__ */ r("p", {
-				className: "aui-text-muted text-sm",
-				children: ["Mode: ", i]
-			})
-		]
-	});
-}
-//#endregion
-export { i as MaskedInputShowcase };

package/dist/src/showcase/premium/metric-grid/index.cjs

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

package/dist/src/showcase/premium/metric-grid/index.js

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

package/dist/src/showcase/premium/metric-grid/mock.cjs

@@ -1,11 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { MetricGrid } from "tembro"
-
-const items = [
-  { key: "users", label: "Users", value: "2,410", description: "Last 30 days" },
-  { key: "revenue", label: "Revenue", value: "$132k", description: "Compared with last month" },
-  { key: "errors", label: "Errors", value: "3", description: "Attention required" },
-]
-
-export function Example() {
-  return <MetricGrid items={items} columns={3} />
-}`,highlights:[`Dashboard-ready KPI tiles`,`Tone-based urgency states`,`Compact mode`,`Composable label and trend`],relatedBlockSlugs:[`dashboard-starter`,`crm-dashboard`,`users-table`],scenarios:[{title:`Overview dashboards`,description:`Show high-level metrics above charts and tables.`},{title:`Loading states`,description:`Replace values with placeholders while fetching real data.`},{title:`Empty states`,description:`Render no metrics with layout preserved and user messaging outside.`}],capabilityNotes:["Use meaningful `description` for quick interpretation and trend context.",`Keep the number of columns tied to viewport width and readability.`,"Use `compact` for dense cards in dense dashboard toolbars."]};exports.metricGridMock=e;

package/dist/src/showcase/premium/metric-grid/mock.js

@@ -1,36 +0,0 @@
-//#region src/showcase/premium/metric-grid/mock.ts
-var e = {
-	code: "import { MetricGrid } from \"tembro\"\n\nconst items = [\n  { key: \"users\", label: \"Users\", value: \"2,410\", description: \"Last 30 days\" },\n  { key: \"revenue\", label: \"Revenue\", value: \"$132k\", description: \"Compared with last month\" },\n  { key: \"errors\", label: \"Errors\", value: \"3\", description: \"Attention required\" },\n]\n\nexport function Example() {\n  return <MetricGrid items={items} columns={3} />\n}",
-	highlights: [
-		"Dashboard-ready KPI tiles",
-		"Tone-based urgency states",
-		"Compact mode",
-		"Composable label and trend"
-	],
-	relatedBlockSlugs: [
-		"dashboard-starter",
-		"crm-dashboard",
-		"users-table"
-	],
-	scenarios: [
-		{
-			title: "Overview dashboards",
-			description: "Show high-level metrics above charts and tables."
-		},
-		{
-			title: "Loading states",
-			description: "Replace values with placeholders while fetching real data."
-		},
-		{
-			title: "Empty states",
-			description: "Render no metrics with layout preserved and user messaging outside."
-		}
-	],
-	capabilityNotes: [
-		"Use meaningful `description` for quick interpretation and trend context.",
-		"Keep the number of columns tied to viewport width and readability.",
-		"Use `compact` for dense cards in dense dashboard toolbars."
-	]
-};
-//#endregion
-export { e as metricGridMock };

package/dist/src/showcase/premium/metric-grid/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/display/metric-grid.cjs"),r=require("../../../components/charts/charts.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[{key:`users`,label:`Users`,value:`2,410`,description:`Last 30 days`,tone:`success`,trend:`+12%`},{key:`revenue`,label:`Revenue`,value:`$132k`,description:`Compared with last month`,tone:`info`,trend:`+8.4%`},{key:`errors`,label:`Errors`,value:`3`,description:`Immediate follow up`,tone:`danger`},{key:`churn`,label:`Churn`,value:`1.8%`,description:`Within target`,tone:`warning`}],s=[2,3,4];function c({mode:e}){let[c,l]=i.useState(!1),[u,d]=i.useState(3);return(0,a.jsxs)(`div`,{className:`space-y-4`,children:[e===`playground`?(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:c?`outline`:`default`,onClick:()=>l(e=>!e),children:c?`Use spacious`:`Use compact`}),s.map(e=>(0,a.jsxs)(t.Button,{size:`sm`,variant:u===e?`default`:`outline`,onClick:()=>d(e),children:[e,` cols`]},e))]}):null,(0,a.jsx)(n.MetricGrid,{items:o,columns:u,compact:c}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,a.jsx)(r.ChartFrame,{title:`Category performance`,description:`Bar chart shares the same token palette.`,children:(0,a.jsx)(r.BarChart,{data:[{label:`CRM`,value:42},{label:`Finance`,value:31},{label:`Auth`,value:-8},{label:`Forms`,value:26}]})}),(0,a.jsx)(r.ChartFrame,{title:`Traffic split`,description:`Donut, legend and KPI blocks stay visually aligned.`,children:(0,a.jsxs)(`div`,{className:`grid justify-items-center gap-4`,children:[(0,a.jsx)(r.DonutChart,{centerValue:`68%`,centerLabel:`Usage`,data:[{label:`Dashboard`,value:42},{label:`Forms`,value:18},{label:`Reports`,value:8}]}),(0,a.jsx)(r.ChartLegend,{data:[{label:`Dashboard`,value:42},{label:`Forms`,value:18},{label:`Reports`,value:8}]})]})})]})]})}exports.MetricGridShowcase=c;

package/dist/src/showcase/premium/metric-grid/showcase.js

@@ -1,133 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { MetricGrid as t } from "../../../components/display/metric-grid.js";
-import { BarChart as n, ChartFrame as r, ChartLegend as i, DonutChart as a } from "../../../components/charts/charts.js";
-import * as o from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/showcase/premium/metric-grid/showcase.tsx
-var l = [
-	{
-		key: "users",
-		label: "Users",
-		value: "2,410",
-		description: "Last 30 days",
-		tone: "success",
-		trend: "+12%"
-	},
-	{
-		key: "revenue",
-		label: "Revenue",
-		value: "$132k",
-		description: "Compared with last month",
-		tone: "info",
-		trend: "+8.4%"
-	},
-	{
-		key: "errors",
-		label: "Errors",
-		value: "3",
-		description: "Immediate follow up",
-		tone: "danger"
-	},
-	{
-		key: "churn",
-		label: "Churn",
-		value: "1.8%",
-		description: "Within target",
-		tone: "warning"
-	}
-], u = [
-	2,
-	3,
-	4
-];
-function d({ mode: d }) {
-	let [f, p] = o.useState(!1), [m, h] = o.useState(3);
-	return /* @__PURE__ */ c("div", {
-		className: "space-y-4",
-		children: [
-			d === "playground" ? /* @__PURE__ */ c("div", {
-				className: "flex flex-wrap gap-2",
-				children: [/* @__PURE__ */ s(e, {
-					size: "sm",
-					variant: f ? "outline" : "default",
-					onClick: () => p((e) => !e),
-					children: f ? "Use spacious" : "Use compact"
-				}), u.map((t) => /* @__PURE__ */ c(e, {
-					size: "sm",
-					variant: m === t ? "default" : "outline",
-					onClick: () => h(t),
-					children: [t, " cols"]
-				}, t))]
-			}) : null,
-			/* @__PURE__ */ s(t, {
-				items: l,
-				columns: m,
-				compact: f
-			}),
-			/* @__PURE__ */ c("div", {
-				className: "grid gap-4 xl:grid-cols-2",
-				children: [/* @__PURE__ */ s(r, {
-					title: "Category performance",
-					description: "Bar chart shares the same token palette.",
-					children: /* @__PURE__ */ s(n, { data: [
-						{
-							label: "CRM",
-							value: 42
-						},
-						{
-							label: "Finance",
-							value: 31
-						},
-						{
-							label: "Auth",
-							value: -8
-						},
-						{
-							label: "Forms",
-							value: 26
-						}
-					] })
-				}), /* @__PURE__ */ s(r, {
-					title: "Traffic split",
-					description: "Donut, legend and KPI blocks stay visually aligned.",
-					children: /* @__PURE__ */ c("div", {
-						className: "grid justify-items-center gap-4",
-						children: [/* @__PURE__ */ s(a, {
-							centerValue: "68%",
-							centerLabel: "Usage",
-							data: [
-								{
-									label: "Dashboard",
-									value: 42
-								},
-								{
-									label: "Forms",
-									value: 18
-								},
-								{
-									label: "Reports",
-									value: 8
-								}
-							]
-						}), /* @__PURE__ */ s(i, { data: [
-							{
-								label: "Dashboard",
-								value: 42
-							},
-							{
-								label: "Forms",
-								value: 18
-							},
-							{
-								label: "Reports",
-								value: 8
-							}
-						] })]
-					})
-				})]
-			})
-		]
-	});
-}
-//#endregion
-export { d as MetricGridShowcase };

package/dist/src/showcase/premium/modal-shell/index.cjs

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

package/dist/src/showcase/premium/modal-shell/index.js

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

package/dist/src/showcase/premium/modal-shell/mock.cjs

@@ -1,30 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { Badge, Button, Input, ModalShell } from "tembro"
-
-export function Example() {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <div>
-      <Button onClick={() => setOpen(true)}>Create workspace</Button>
-      <ModalShell
-        open={open}
-        onOpenChange={setOpen}
-        title="Create workspace"
-        description="Collect a name and visibility before generating a share token."
-        size="md"
-        footer={
-          <div className="flex justify-end gap-2">
-            <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
-            <Button onClick={() => setOpen(false)}>Create</Button>
-          </div>
-        }
-      >
-        <label className="space-y-2 text-sm aui-text-subtle">
-          <span>Workspace name</span>
-          <Input defaultValue="Marketing portal" />
-        </label>
-      </ModalShell>
-    </div>
-  )
-}`,htmlCode:`<button data-slot="modal-shell-trigger">Open modal</button>`,cliCommand:`npx tembro add modal-shell`,highlights:[`Controlled modal shell`,`Reusable form shell layout`,`Footer actions and close handling`,`Stable when used for short workflows`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Workspace creator`,description:`Use modal shell for focused create/edit forms.`},{title:`Info-only overlay`,description:`Render readonly summaries without mutating data.`},{title:`Decision panel`,description:`Keep action buttons consistently placed in the footer slot.`},{title:`Size control`,description:"Use `size` to avoid accidental cramped content in compact overlays."}],capabilityNotes:[`ModalShell is a wrapper for focused interactions that should remain small and explicit.`,`Prefer controlled open state from parent so route transitions and API calls stay predictable.`,`Use footer slot for confirm/cancel; avoid embedding form submission in untracked triggers.`,`Close button behavior should always be deterministic for accessibility and keyboard flows.`]};exports.modalShellMock=e;

package/dist/src/showcase/premium/modal-shell/mock.js

@@ -1,43 +0,0 @@
-//#region src/showcase/premium/modal-shell/mock.ts
-var e = {
-	code: "import { useState } from \"react\"\nimport { Badge, Button, Input, ModalShell } from \"tembro\"\n\nexport function Example() {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <div>\n      <Button onClick={() => setOpen(true)}>Create workspace</Button>\n      <ModalShell\n        open={open}\n        onOpenChange={setOpen}\n        title=\"Create workspace\"\n        description=\"Collect a name and visibility before generating a share token.\"\n        size=\"md\"\n        footer={\n          <div className=\"flex justify-end gap-2\">\n            <Button variant=\"outline\" onClick={() => setOpen(false)}>Cancel</Button>\n            <Button onClick={() => setOpen(false)}>Create</Button>\n          </div>\n        }\n      >\n        <label className=\"space-y-2 text-sm aui-text-subtle\">\n          <span>Workspace name</span>\n          <Input defaultValue=\"Marketing portal\" />\n        </label>\n      </ModalShell>\n    </div>\n  )\n}",
-	htmlCode: "<button data-slot=\"modal-shell-trigger\">Open modal</button>",
-	cliCommand: "npx tembro add modal-shell",
-	highlights: [
-		"Controlled modal shell",
-		"Reusable form shell layout",
-		"Footer actions and close handling",
-		"Stable when used for short workflows"
-	],
-	relatedBlockSlugs: [
-		"settings-form",
-		"users-table",
-		"crm-dashboard"
-	],
-	scenarios: [
-		{
-			title: "Workspace creator",
-			description: "Use modal shell for focused create/edit forms."
-		},
-		{
-			title: "Info-only overlay",
-			description: "Render readonly summaries without mutating data."
-		},
-		{
-			title: "Decision panel",
-			description: "Keep action buttons consistently placed in the footer slot."
-		},
-		{
-			title: "Size control",
-			description: "Use `size` to avoid accidental cramped content in compact overlays."
-		}
-	],
-	capabilityNotes: [
-		"ModalShell is a wrapper for focused interactions that should remain small and explicit.",
-		"Prefer controlled open state from parent so route transitions and API calls stay predictable.",
-		"Use footer slot for confirm/cancel; avoid embedding form submission in untracked triggers.",
-		"Close button behavior should always be deterministic for accessibility and keyboard flows."
-	]
-};
-//#endregion
-export { e as modalShellMock };

package/dist/src/showcase/premium/modal-shell/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/input/index.cjs"),r=require("../../../components/ui/badge/index.cjs"),i=require("../../../components/overlay/modal-shell.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=`border-t border-[color:var(--aui-divider)] py-6`;function c({mode:e}){let[c,l]=a.useState(!1),[u,d]=a.useState(!1);return(0,o.jsxs)(`div`,{className:`space-y-0`,children:[(0,o.jsx)(`section`,{className:`pb-6`,children:(0,o.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between`,children:[(0,o.jsxs)(`div`,{className:`max-w-xl`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Modal shell`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Frame the modal, not the business logic`}),(0,o.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:"Use `ModalShell` when the route owns data and actions but needs one reusable modal frame."})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Modes`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`2`})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Use for`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Short forms`})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Route`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:e===`playground`?`Interactive`:`Docs`})]})]})]})}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,o.jsx)(t.Button,{onClick:()=>l(!0),children:`Create workspace`}),(0,o.jsx)(t.Button,{variant:`outline`,onClick:()=>d(!0),children:`Open info modal`}),(0,o.jsx)(r.Badge,{variant:`outline`,children:`Controlled shell`})]})}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Keep mutations and side effects outside the shell component.`,`Use small, single-purpose content inside the modal body.`,`If the screen owns multiple steps, use a bigger route pattern instead.`].map(e=>(0,o.jsx)(`div`,{className:`border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0`,children:e},e))})}),(0,o.jsx)(i.ModalShell,{open:c,onOpenChange:l,title:`Create workspace`,description:`Keep this action scoped, controlled, and recoverable.`,size:`md`,footer:(0,o.jsxs)(`div`,{className:`flex w-full justify-end gap-2`,children:[(0,o.jsx)(t.Button,{variant:`outline`,onClick:()=>l(!1),children:`Cancel`}),(0,o.jsx)(t.Button,{onClick:()=>l(!1),children:`Create`})]}),children:(0,o.jsxs)(`label`,{className:`space-y-2 text-sm aui-text-strong`,children:[(0,o.jsx)(`span`,{children:`Workspace name`}),(0,o.jsx)(n.Input,{defaultValue:`Acme workspace`})]})}),(0,o.jsx)(i.ModalShell,{open:u,onOpenChange:d,title:`Read-only details`,description:`Good for status, policy notes, and compact confirmation text.`,size:`sm`,footer:(0,o.jsx)(t.Button,{className:`w-full`,onClick:()=>d(!1),children:`Done`}),children:(0,o.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`Use a shell modal for small, single-purpose interactions with clear scope.`})})]})}exports.ModalShellShowcase=c;