tembro 3.0.0 → 3.1.1

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

@@ -0,0 +1,158 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { Calendar as n } from "../../../components/calendar/calendar.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/calendar/showcase.tsx
+var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", s = [
+	"2026-07-18",
+	"2026-07-19",
+	"2026-07-25"
+];
+function c({ mode: c }) {
+	let [l, u] = r.useState("2026-07-14"), [d, f] = r.useState({
+		from: "2026-07-10",
+		to: "2026-07-15"
+	}), [p, m] = r.useState(2);
+	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: "Date control"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Calendar should feel precise, not decorative"
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "Real usage needs visible range selection, disabled business dates, and month comparison without clutter. This surface shows all three."
+							})
+						]
+					}), /* @__PURE__ */ a("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Range mode"
+						}), /* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Blocked dates"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "grid gap-4 xl:grid-cols-[1.15fr_0.85fr]",
+				children: [/* @__PURE__ */ a("section", {
+					className: o,
+					children: [/* @__PURE__ */ i("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Range selection"
+					}), /* @__PURE__ */ i("div", {
+						className: "mt-4 overflow-x-auto pb-1",
+						children: /* @__PURE__ */ i(n, {
+							mode: "range",
+							range: d,
+							onRangeChange: f,
+							defaultMonth: "2026-07-01",
+							min: "2026-07-01",
+							max: "2026-08-31",
+							disabledDates: s,
+							numberOfMonths: p,
+							pagedNavigation: !0,
+							showClearShortcut: !0,
+							showTodayShortcut: !0,
+							showSelectionSummary: !0
+						})
+					})]
+				}), /* @__PURE__ */ a("div", {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ a("section", {
+						className: o,
+						children: [/* @__PURE__ */ i("p", {
+							className: "text-sm font-medium aui-text-muted",
+							children: "Single date"
+						}), /* @__PURE__ */ i("div", {
+							className: "mt-4 overflow-x-auto pb-1",
+							children: /* @__PURE__ */ i(n, {
+								value: l,
+								onValueChange: u,
+								defaultMonth: "2026-07-01",
+								min: "2026-07-01",
+								max: "2026-07-31",
+								disabledDates: s,
+								showClearShortcut: !0,
+								showSelectionSummary: !0
+							})
+						})]
+					}), /* @__PURE__ */ a("section", {
+						className: o,
+						children: [/* @__PURE__ */ i("p", {
+							className: "text-sm font-medium aui-text-muted",
+							children: "Selection summary"
+						}), /* @__PURE__ */ a("div", {
+							className: "mt-4 space-y-3 text-sm leading-6 aui-text-muted",
+							children: [
+								/* @__PURE__ */ a("p", { children: ["Single: ", /* @__PURE__ */ i("span", {
+									className: "font-medium aui-text-strong",
+									children: l
+								})] }),
+								/* @__PURE__ */ a("p", { children: ["Range start: ", /* @__PURE__ */ i("span", {
+									className: "font-medium aui-text-strong",
+									children: d.from ?? "not selected"
+								})] }),
+								/* @__PURE__ */ a("p", { children: ["Range end: ", /* @__PURE__ */ i("span", {
+									className: "font-medium aui-text-strong",
+									children: d.to ?? "not selected"
+								})] })
+							]
+						})]
+					})]
+				})]
+			}),
+			c === "playground" ? /* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ i(e, {
+							size: "sm",
+							variant: p === 1 ? "default" : "outline",
+							onClick: () => m(1),
+							children: "1 month"
+						}),
+						/* @__PURE__ */ i(e, {
+							size: "sm",
+							variant: p === 2 ? "default" : "outline",
+							onClick: () => m(2),
+							children: "2 months"
+						}),
+						/* @__PURE__ */ i(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => {
+								u("2026-07-14"), f({
+									from: "2026-07-10",
+									to: "2026-07-15"
+								});
+							},
+							children: "Reset selection"
+						})
+					]
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { c as CalendarShowcase };

package/dist/src/showcase/premium/calendar-scheduler/index.cjs

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

package/dist/src/showcase/premium/calendar-scheduler/index.js

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

package/dist/src/showcase/premium/calendar-scheduler/mock.cjs

@@ -0,0 +1,13 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { CalendarScheduler } from "tembro"
+
+export function Example() {
+  return (
+    <CalendarScheduler
+      days={["Mon, Jul 6", "Tue, Jul 7"]}
+      events={[
+        { id: "1", title: "Design review", date: "Mon, Jul 6", time: "10:00", tone: "warning" },
+        { id: "2", title: "Release freeze", date: "Tue, Jul 7", time: "14:00", tone: "danger" },
+      ]}
+    />
+  )
+}`,cliCommand:`npx tembro add calendar-scheduler`,highlights:[`Compact scheduler timeline by day`,`Tone variants for different event priorities`,`Works with custom day labels`],scenarios:[{title:`Ops dashboard`,description:`Show day tasks by lane without heavy calendar widgets.`},{title:`Sprint board`,description:`Keep event density low and readable.`}]};exports.calendarSchedulerMock=e;

package/dist/src/showcase/premium/calendar-scheduler/mock.js

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/calendar-scheduler/mock.ts
+var e = {
+	code: "import { CalendarScheduler } from \"tembro\"\n\nexport function Example() {\n  return (\n    <CalendarScheduler\n      days={[\"Mon, Jul 6\", \"Tue, Jul 7\"]}\n      events={[\n        { id: \"1\", title: \"Design review\", date: \"Mon, Jul 6\", time: \"10:00\", tone: \"warning\" },\n        { id: \"2\", title: \"Release freeze\", date: \"Tue, Jul 7\", time: \"14:00\", tone: \"danger\" },\n      ]}\n    />\n  )\n}",
+	cliCommand: "npx tembro add calendar-scheduler",
+	highlights: [
+		"Compact scheduler timeline by day",
+		"Tone variants for different event priorities",
+		"Works with custom day labels"
+	],
+	scenarios: [{
+		title: "Ops dashboard",
+		description: "Show day tasks by lane without heavy calendar widgets."
+	}, {
+		title: "Sprint board",
+		description: "Keep event density low and readable."
+	}]
+};
+//#endregion
+export { e as calendarSchedulerMock };

package/dist/src/showcase/premium/calendar-scheduler/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/modern/calendar-scheduler.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i=[`Mon, Jul 6`,`Tue, Jul 7`,`Wed, Jul 8`];function a(){let[e,a]=n.useState(!0),o=n.useMemo(()=>[{id:`1`,title:`Design review`,date:`Mon, Jul 6`,time:`10:00`,tone:`warning`},{id:`2`,title:`Release freeze`,date:`Tue, Jul 7`,time:`14:00`,tone:`danger`},{id:`3`,title:`Daily standup`,date:`Wed, Jul 8`,time:`09:30`,tone:`default`},...e?[{id:`4`,title:`Priority follow-up`,date:`Mon, Jul 6`,time:`16:00`,tone:`warning`}]:[]],[e]);return(0,r.jsxs)(`div`,{className:`space-y-3`,children:[(0,r.jsx)(`div`,{className:`flex gap-2`,children:(0,r.jsx)(`button`,{type:`button`,className:`inline-flex items-center rounded-md border px-3 py-1.5 text-sm`,onClick:()=>a(e=>!e),children:e?`Hide warning`:`Show warning`})}),(0,r.jsx)(t.CalendarScheduler,{days:i,events:o})]})}exports.CalendarSchedulerShowcase=a;

package/dist/src/showcase/premium/calendar-scheduler/showcase.js

@@ -0,0 +1,58 @@
+import { CalendarScheduler as e } from "../../../components/modern/calendar-scheduler.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/calendar-scheduler/showcase.tsx
+var i = [
+	"Mon, Jul 6",
+	"Tue, Jul 7",
+	"Wed, Jul 8"
+];
+function a() {
+	let [a, o] = t.useState(!0), s = t.useMemo(() => [
+		{
+			id: "1",
+			title: "Design review",
+			date: "Mon, Jul 6",
+			time: "10:00",
+			tone: "warning"
+		},
+		{
+			id: "2",
+			title: "Release freeze",
+			date: "Tue, Jul 7",
+			time: "14:00",
+			tone: "danger"
+		},
+		{
+			id: "3",
+			title: "Daily standup",
+			date: "Wed, Jul 8",
+			time: "09:30",
+			tone: "default"
+		},
+		...a ? [{
+			id: "4",
+			title: "Priority follow-up",
+			date: "Mon, Jul 6",
+			time: "16:00",
+			tone: "warning"
+		}] : []
+	], [a]);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ n("div", {
+			className: "flex gap-2",
+			children: /* @__PURE__ */ n("button", {
+				type: "button",
+				className: "inline-flex items-center rounded-md border px-3 py-1.5 text-sm",
+				onClick: () => o((e) => !e),
+				children: a ? "Hide warning" : "Show warning"
+			})
+		}), /* @__PURE__ */ n(e, {
+			days: i,
+			events: s
+		})]
+	});
+}
+//#endregion
+export { a as CalendarSchedulerShowcase };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{title:`Project rollout`,description:`Track release readiness across modules and teams.`,metrics:[`Design review: Passed`,`QA coverage: 84%`],badges:[`secondary`,`outline`],footer:`Updated 12 minutes ago`},{title:`Publish queue`,description:`3 items waiting for review`,metrics:[`Docs`,`QA`,`Blocking`],badges:[`secondary`,`outline`,`destructive`],footer:`Escalate if overdue`}];exports.cardDemoProjects=e;

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

@@ -0,0 +1,24 @@
+//#region src/showcase/premium/card/data.ts
+var e = [{
+	title: "Project rollout",
+	description: "Track release readiness across modules and teams.",
+	metrics: ["Design review: Passed", "QA coverage: 84%"],
+	badges: ["secondary", "outline"],
+	footer: "Updated 12 minutes ago"
+}, {
+	title: "Publish queue",
+	description: "3 items waiting for review",
+	metrics: [
+		"Docs",
+		"QA",
+		"Blocking"
+	],
+	badges: [
+		"secondary",
+		"outline",
+		"destructive"
+	],
+	footer: "Escalate if overdue"
+}];
+//#endregion
+export { e as cardDemoProjects };

package/dist/src/showcase/premium/card/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.CardShowcase=t.CardShowcase,exports.cardDemoProjects=e.cardDemoProjects,exports.cardMock=n.cardMock;

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

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

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

@@ -0,0 +1,18 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Badge, Card } from "tembro"
+
+export function Example() {
+  return (
+    <Card
+      title="Project status"
+      description="Release readiness and team alignment"
+      content={
+        <div className="space-y-2">
+          <p>Design review complete. QA pass: 84%.</p>
+          <Badge variant="secondary">Dashboard module</Badge>
+        </div>
+      }
+      footer="Updated 12 minutes ago"
+    />
+  )
+}
+`,cliCommand:`npx tembro add card`,highlights:[`Prop-driven surface`,`Compact density`,`Dashboard modules`,`Token-ready styling`],relatedBlockSlugs:[`dashboard-starter`,`sidebar-layout`,`users-table`],scenarios:[{title:`Status module`,description:`Show dense KPI or project status summaries.`},{title:`Feature card`,description:`Use cards for marketing sections and blocks.`},{title:`Compact card`,description:`Switch density for tighter dashboard layouts.`},{title:`Composed content shell`,description:`Assemble headers, media and metadata in one consistent surface.`}],capabilityNotes:[`Use title, description, content and footer props for the default ready-made card API.`,`Header/content/footer slot exports stay available only for advanced custom layouts.`,`Use size='sm' for dense dashboards and default for richer content blocks.`,`Avoid nesting cards; compose with sections, stacks, or lists instead.`,`Great as wrapper for forms, metric summaries and preview surfaces.`]};exports.cardMock=e;

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

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/card/mock.ts
+var e = {
+	code: "import { Badge, Card } from \"tembro\"\n\nexport function Example() {\n  return (\n    <Card\n      title=\"Project status\"\n      description=\"Release readiness and team alignment\"\n      content={\n        <div className=\"space-y-2\">\n          <p>Design review complete. QA pass: 84%.</p>\n          <Badge variant=\"secondary\">Dashboard module</Badge>\n        </div>\n      }\n      footer=\"Updated 12 minutes ago\"\n    />\n  )\n}\n",
+	cliCommand: "npx tembro add card",
+	highlights: [
+		"Prop-driven surface",
+		"Compact density",
+		"Dashboard modules",
+		"Token-ready styling"
+	],
+	relatedBlockSlugs: [
+		"dashboard-starter",
+		"sidebar-layout",
+		"users-table"
+	],
+	scenarios: [
+		{
+			title: "Status module",
+			description: "Show dense KPI or project status summaries."
+		},
+		{
+			title: "Feature card",
+			description: "Use cards for marketing sections and blocks."
+		},
+		{
+			title: "Compact card",
+			description: "Switch density for tighter dashboard layouts."
+		},
+		{
+			title: "Composed content shell",
+			description: "Assemble headers, media and metadata in one consistent surface."
+		}
+	],
+	capabilityNotes: [
+		"Use title, description, content and footer props for the default ready-made card API.",
+		"Header/content/footer slot exports stay available only for advanced custom layouts.",
+		"Use size='sm' for dense dashboards and default for richer content blocks.",
+		"Avoid nesting cards; compose with sections, stacks, or lists instead.",
+		"Great as wrapper for forms, metric summaries and preview surfaces."
+	]
+};
+//#endregion
+export { e as cardMock };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/card/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("./data.cjs");let i=require("react/jsx-runtime");var a=[`secondary`,`outline`,`destructive`],o=`border-t border-[color:var(--aui-divider)] py-6`;function s({state:s}){let c=r.cardDemoProjects[0],l=r.cardDemoProjects[1];return(0,i.jsxs)(`div`,{className:`space-y-0`,children:[(0,i.jsx)(`section`,{className:`pb-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end 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:`Container`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`One card should hold the whole story`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Show one rich card and one compact card, not extra chrome around them.`})]}),(0,i.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Primary`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:c.title})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Compact`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:s.cardCompact?`Small`:`Default`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Metrics`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:c.metrics.length})]})]})]})}),(0,i.jsxs)(`section`,{className:o,children:[(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[minmax(0,1.08fr)_minmax(0,0.92fr)]`,children:[(0,i.jsx)(t.Card,{size:s.cardCompact?`sm`:`default`,eyebrow:`Content`,title:c.title,description:c.description,badge:(0,i.jsx)(n.Badge,{tone:`success`,variant:`soft`,children:`Live`}),action:(0,i.jsx)(e.Button,{type:`button`,size:`xs`,variant:`outline`,children:`Open`}),content:(0,i.jsx)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:c.metrics.map(e=>(0,i.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] px-4 py-3 text-sm font-medium aui-text-strong`,children:e},e))}),footer:c.footer}),(0,i.jsx)(t.Card,{size:`sm`,interactive:!0,selected:!0,eyebrow:`Selectable`,title:l.title,description:l.description,content:(0,i.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:l.metrics.map((e,t)=>(0,i.jsx)(n.Badge,{variant:a[t],children:e},e))}),footer:l.footer})]}),(0,i.jsxs)(`div`,{className:`mt-4 grid gap-4 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]`,children:[(0,i.jsx)(t.Card,{orientation:`horizontal`,mediaAspect:`square`,title:`Media card`,description:`The same Card primitive owns image, copy, action and footer slots.`,media:(0,i.jsx)(`div`,{className:`h-full min-h-36 bg-[linear-gradient(135deg,var(--primary),color-mix(in_oklch,var(--primary),white_42%))]`}),action:(0,i.jsx)(e.Button,{type:`button`,size:`xs`,children:`View`}),content:(0,i.jsx)(`p`,{className:`text-sm leading-6 aui-text-muted`,children:`Use media slots for previews, thumbnails, charts, or product visuals without creating another card component.`})}),(0,i.jsx)(t.Card,{size:`sm`,density:`compact`,title:`Compact action card`,description:`Dense layouts still use the same header, content and footer anatomy.`,content:(0,i.jsx)(`div`,{className:`text-sm aui-text-strong`,children:`12 files ready for review`}),footer:(0,i.jsx)(e.Button,{type:`button`,size:`xs`,variant:`secondary`,children:`Review files`})})]})]})]})}exports.CardShowcase=s;

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

@@ -0,0 +1,154 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Card as t } from "../../../components/ui/card/index.js";
+import { Badge as n } from "../../../components/ui/badge/index.js";
+import { cardDemoProjects as r } from "./data.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/card/showcase.tsx
+var o = [
+	"secondary",
+	"outline",
+	"destructive"
+], s = "border-t border-[color:var(--aui-divider)] py-6";
+function c({ state: c }) {
+	let l = r[0], u = r[1];
+	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: "Container"
+						}),
+						/* @__PURE__ */ i("h3", {
+							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+							children: "One card should hold the whole story"
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-3 text-sm leading-6 aui-text-muted",
+							children: "Show one rich card and one compact card, not extra chrome around them."
+						})
+					]
+				}), /* @__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: "Primary"
+							}), /* @__PURE__ */ i("p", {
+								className: "mt-2 text-lg font-semibold aui-text-strong",
+								children: l.title
+							})]
+						}),
+						/* @__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: "Compact"
+							}), /* @__PURE__ */ i("p", {
+								className: "mt-2 text-lg font-semibold aui-text-strong",
+								children: c.cardCompact ? "Small" : "Default"
+							})]
+						}),
+						/* @__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: "Metrics"
+							}), /* @__PURE__ */ i("p", {
+								className: "mt-2 text-lg font-semibold aui-text-strong",
+								children: l.metrics.length
+							})]
+						})
+					]
+				})]
+			})
+		}), /* @__PURE__ */ a("section", {
+			className: s,
+			children: [/* @__PURE__ */ a("div", {
+				className: "grid gap-4 xl:grid-cols-[minmax(0,1.08fr)_minmax(0,0.92fr)]",
+				children: [/* @__PURE__ */ i(t, {
+					size: c.cardCompact ? "sm" : "default",
+					eyebrow: "Content",
+					title: l.title,
+					description: l.description,
+					badge: /* @__PURE__ */ i(n, {
+						tone: "success",
+						variant: "soft",
+						children: "Live"
+					}),
+					action: /* @__PURE__ */ i(e, {
+						type: "button",
+						size: "xs",
+						variant: "outline",
+						children: "Open"
+					}),
+					content: /* @__PURE__ */ i("div", {
+						className: "grid gap-3 sm:grid-cols-3",
+						children: l.metrics.map((e) => /* @__PURE__ */ i("div", {
+							className: "rounded-xl border border-[color:var(--aui-divider)] px-4 py-3 text-sm font-medium aui-text-strong",
+							children: e
+						}, e))
+					}),
+					footer: l.footer
+				}), /* @__PURE__ */ i(t, {
+					size: "sm",
+					interactive: !0,
+					selected: !0,
+					eyebrow: "Selectable",
+					title: u.title,
+					description: u.description,
+					content: /* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: u.metrics.map((e, t) => /* @__PURE__ */ i(n, {
+							variant: o[t],
+							children: e
+						}, e))
+					}),
+					footer: u.footer
+				})]
+			}), /* @__PURE__ */ a("div", {
+				className: "mt-4 grid gap-4 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]",
+				children: [/* @__PURE__ */ i(t, {
+					orientation: "horizontal",
+					mediaAspect: "square",
+					title: "Media card",
+					description: "The same Card primitive owns image, copy, action and footer slots.",
+					media: /* @__PURE__ */ i("div", { className: "h-full min-h-36 bg-[linear-gradient(135deg,var(--primary),color-mix(in_oklch,var(--primary),white_42%))]" }),
+					action: /* @__PURE__ */ i(e, {
+						type: "button",
+						size: "xs",
+						children: "View"
+					}),
+					content: /* @__PURE__ */ i("p", {
+						className: "text-sm leading-6 aui-text-muted",
+						children: "Use media slots for previews, thumbnails, charts, or product visuals without creating another card component."
+					})
+				}), /* @__PURE__ */ i(t, {
+					size: "sm",
+					density: "compact",
+					title: "Compact action card",
+					description: "Dense layouts still use the same header, content and footer anatomy.",
+					content: /* @__PURE__ */ i("div", {
+						className: "text-sm aui-text-strong",
+						children: "12 files ready for review"
+					}),
+					footer: /* @__PURE__ */ i(e, {
+						type: "button",
+						size: "xs",
+						variant: "secondary",
+						children: "Review files"
+					})
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { c as CardShowcase };

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Carousel, CarouselItem } from "tembro"
+
+export function Example() {
+  return (
+    <Carousel defaultIndex={0} showDots showArrows>
+      <CarouselItem><div className="rounded-xl bg-card p-4">Card 1</div></CarouselItem>
+      <CarouselItem><div className="rounded-xl bg-card p-4">Card 2</div></CarouselItem>
+      <CarouselItem><div className="rounded-xl bg-card p-4">Card 3</div></CarouselItem>
+    </Carousel>
+  )
+}`,cliCommand:`npx tembro add carousel`,highlights:[`Keyboard and control-aware slider`,`Works with any slide content`,`Useful for onboarding and feature snippets`],scenarios:[{title:`Feature tour`,description:`Move users through short product highlights.`},{title:`Feature cards`,description:`Show a compact stack of feature cards without heavy tabs.`},{title:`Promo strip`,description:`Rotate content in dashboard marketing blocks.`}]};exports.carouselMock=e;

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

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/carousel/mock.ts
+var e = {
+	code: "import { Carousel, CarouselItem } from \"tembro\"\n\nexport function Example() {\n  return (\n    <Carousel defaultIndex={0} showDots showArrows>\n      <CarouselItem><div className=\"rounded-xl bg-card p-4\">Card 1</div></CarouselItem>\n      <CarouselItem><div className=\"rounded-xl bg-card p-4\">Card 2</div></CarouselItem>\n      <CarouselItem><div className=\"rounded-xl bg-card p-4\">Card 3</div></CarouselItem>\n    </Carousel>\n  )\n}",
+	cliCommand: "npx tembro add carousel",
+	highlights: [
+		"Keyboard and control-aware slider",
+		"Works with any slide content",
+		"Useful for onboarding and feature snippets"
+	],
+	scenarios: [
+		{
+			title: "Feature tour",
+			description: "Move users through short product highlights."
+		},
+		{
+			title: "Feature cards",
+			description: "Show a compact stack of feature cards without heavy tabs."
+		},
+		{
+			title: "Promo strip",
+			description: "Rotate content in dashboard marketing blocks."
+		}
+	]
+};
+//#endregion
+export { e as carouselMock };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../lib/utils.cjs"),n=require("../../../components/ui/button/index.cjs"),r=require("../../../components/display/carousel.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[{title:`Onboarding`,text:`Guide quickly from first login.`,tone:`Launch`,detail:`Hero slider for product onboarding and release tours.`},{title:`Components`,text:`Review ready-made dashboard patterns.`,tone:`Library`,detail:`Card rail, docs previews, and swipe-ready gallery states.`},{title:`Release`,text:`Publish, test, and iterate faster.`,tone:`Ship`,detail:`Active slide details stay below the main frame for context.`}];function s(){let[e,s]=i.useState(!0),[c,l]=i.useState(!0),[u,d]=i.useState(!1),[f,p]=i.useState(0),[m,h]=i.useState(!1);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,a.jsxs)(n.Button,{size:`sm`,variant:e?`default`:`outline`,onClick:()=>s(e=>!e),children:[e?`Hide`:`Show`,` arrows`]}),(0,a.jsxs)(n.Button,{size:`sm`,variant:c?`default`:`outline`,onClick:()=>l(e=>!e),children:[c?`Hide`:`Show`,` dots`]}),(0,a.jsxs)(n.Button,{size:`sm`,variant:u?`default`:`outline`,onClick:()=>d(e=>!e),children:[u?`Stop`:`Start`,` autoplay`]})]}),(0,a.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:o.map((e,t)=>(0,a.jsxs)(n.Button,{type:`button`,variant:f===t?`default`:`outline`,className:`justify-start`,onClick:()=>p(t),children:[t+1,`. `,e.title]},e.title))}),(0,a.jsx)(r.Carousel,{index:f,loop:!0,showArrows:e,showDots:c,showStatus:!0,showThumbnails:!0,autoplay:u,autoplayInterval:2200,showPlaybackControl:!0,aspectRatio:`16 / 9`,onIndexChange:e=>p(e),onAutoplayChange:h,previousLabel:`Previous slide`,nextLabel:`Next slide`,renderThumbnail:(e,n,r)=>(0,a.jsxs)(`div`,{className:t.cn(`grid gap-1 p-3`,r&&`bg-primary/5`),children:[(0,a.jsxs)(`div`,{className:`text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground`,children:[`0`,n+1]}),(0,a.jsx)(`div`,{className:`text-sm font-medium text-foreground`,children:o[n]?.title})]}),renderActiveDetail:(e,t)=>(0,a.jsxs)(`div`,{className:`rounded-[20px] border border-border/70 bg-card/80 p-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold text-foreground`,children:o[t]?.title}),(0,a.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:o[t]?.detail})]}),children:o.map((e,t)=>(0,a.jsx)(r.CarouselItem,{children:(0,a.jsx)(`div`,{className:`min-h-56 rounded-xl border border-border bg-card p-8`,children:(0,a.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,a.jsxs)(`div`,{className:`grid gap-2`,children:[(0,a.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] text-primary`,children:e.tone}),(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground`,children:`Slide ${t+1}`}),(0,a.jsx)(`h3`,{className:`text-lg font-semibold text-foreground`,children:e.title}),(0,a.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:e.text})]}),(0,a.jsxs)(`div`,{className:`rounded-full border border-border/70 px-3 py-1 text-xs text-muted-foreground`,children:[t+1,`/`,o.length]})]})})},e.title))}),(0,a.jsxs)(`div`,{className:`text-sm text-muted-foreground`,children:[`Playback: `,m||u?`active`:`paused`]})]})}exports.CarouselShowcase=s;