tembro 1.0.0

package/dist/showcase/premium/action-menu/mock.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { ActionMenu } from "tembro"
+
+export function Example() {
+  return (
+    <ActionMenu
+      label="Row actions"
+      actions={[
+        { key: "open", label: "Open" },
+        { key: "duplicate", label: "Duplicate" },
+        { key: "archive", label: "Archive", destructive: true },
+      ]}
+    />
+  )
+}`,highlights:[`Compact row actions`,`Async action loading state`,`Destructive item styling`,`Works well inside tables and cards`],scenarios:[{title:`Table row actions`,description:`Collapse inspect, duplicate, and archive operations into one compact surface.`},{title:`Card menu`,description:`Attach contextual actions to summary cards without visual clutter.`},{title:`Dense admin tools`,description:`Preserve space while keeping operational actions discoverable.`}],capabilityNotes:[`ActionMenu is strongest when actions are secondary to the main content.`,`Use clear verb labels and reserve destructive styling for genuinely destructive operations.`,`If every action is primary, a visible button row may be better than a menu.`]};exports.actionMenuMock=e;

package/dist/showcase/premium/action-menu/mock.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDemoMock } from "../types";
+export declare const actionMenuMock: ComponentDemoMock;

package/dist/showcase/premium/action-menu/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/action-menu/mock.ts
+var e = {
+	code: "import { ActionMenu } from \"tembro\"\n\nexport function Example() {\n  return (\n    <ActionMenu\n      label=\"Row actions\"\n      actions={[\n        { key: \"open\", label: \"Open\" },\n        { key: \"duplicate\", label: \"Duplicate\" },\n        { key: \"archive\", label: \"Archive\", destructive: true },\n      ]}\n    />\n  )\n}",
+	highlights: [
+		"Compact row actions",
+		"Async action loading state",
+		"Destructive item styling",
+		"Works well inside tables and cards"
+	],
+	scenarios: [
+		{
+			title: "Table row actions",
+			description: "Collapse inspect, duplicate, and archive operations into one compact surface."
+		},
+		{
+			title: "Card menu",
+			description: "Attach contextual actions to summary cards without visual clutter."
+		},
+		{
+			title: "Dense admin tools",
+			description: "Preserve space while keeping operational actions discoverable."
+		}
+	],
+	capabilityNotes: [
+		"ActionMenu is strongest when actions are secondary to the main content.",
+		"Use clear verb labels and reserve destructive styling for genuinely destructive operations.",
+		"If every action is primary, a visible button row may be better than a menu."
+	]
+};
+//#endregion
+export { e as actionMenuMock };

package/dist/showcase/premium/action-menu/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/actions/action-menu.cjs"),n=require("../../../components/ui/badge/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function s({mode:e}){let[s,c]=r.useState(`No action selected`);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Compact actions`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`ActionMenu should hide secondary actions, not critical path actions`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This surface is ideal for row or card actions that matter, but should not dominate the layout.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Contextual`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Secondary actions`})]})]})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`Invoice #2048`}),(0,a.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:`Acme Growth payment workflow`})]}),(0,a.jsx)(t.ActionMenu,{label:`Invoice actions`,actions:[{key:`open`,label:`Open details`,icon:(0,a.jsx)(i.ExternalLinkIcon,{className:`size-4`}),onSelect:async()=>c(`Opened invoice details`)},{key:`duplicate`,label:`Duplicate`,icon:(0,a.jsx)(i.CopyIcon,{className:`size-4`}),onSelect:async()=>c(`Duplicated invoice workflow`)},{key:`archive`,label:`Archive`,icon:(0,a.jsx)(i.ArchiveIcon,{className:`size-4`}),destructive:!0,onSelect:async()=>c(`Archived invoice workflow`)}]})]})}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Last action`}),(0,a.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:s})]})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`ActionMenu table row, card header yoki compact list itemlarda juda foydali.`})}):null]})}exports.ActionMenuShowcase=s;

package/dist/showcase/premium/action-menu/showcase.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { ComponentDemoProps } from "../types";
+export declare function ActionMenuShowcase({ mode }: ComponentDemoProps): React.JSX.Element;

package/dist/showcase/premium/action-menu/showcase.js

@@ -0,0 +1,106 @@
+import { ActionMenu as e } from "../../../components/actions/action-menu.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import * as n from "react";
+import { ArchiveIcon as r, CopyIcon as i, ExternalLinkIcon as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/showcase/premium/action-menu/showcase.tsx
+var c = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function l({ mode: l }) {
+	let [u, d] = n.useState("No action selected");
+	return /* @__PURE__ */ s("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ o("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: /* @__PURE__ */ s("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ s("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ o("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Compact actions"
+							}),
+							/* @__PURE__ */ o("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "ActionMenu should hide secondary actions, not critical path actions"
+							}),
+							/* @__PURE__ */ o("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "This surface is ideal for row or card actions that matter, but should not dominate the layout."
+							})
+						]
+					}), /* @__PURE__ */ s("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ o(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Contextual"
+						}), /* @__PURE__ */ o(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Secondary actions"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [/* @__PURE__ */ o("section", {
+					className: c,
+					children: /* @__PURE__ */ s("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("p", {
+							className: "text-sm font-medium aui-text-strong",
+							children: "Invoice #2048"
+						}), /* @__PURE__ */ o("p", {
+							className: "mt-1 text-sm aui-text-muted",
+							children: "Acme Growth payment workflow"
+						})] }), /* @__PURE__ */ o(e, {
+							label: "Invoice actions",
+							actions: [
+								{
+									key: "open",
+									label: "Open details",
+									icon: /* @__PURE__ */ o(a, { className: "size-4" }),
+									onSelect: async () => d("Opened invoice details")
+								},
+								{
+									key: "duplicate",
+									label: "Duplicate",
+									icon: /* @__PURE__ */ o(i, { className: "size-4" }),
+									onSelect: async () => d("Duplicated invoice workflow")
+								},
+								{
+									key: "archive",
+									label: "Archive",
+									icon: /* @__PURE__ */ o(r, { className: "size-4" }),
+									destructive: !0,
+									onSelect: async () => d("Archived invoice workflow")
+								}
+							]
+						})]
+					})
+				}), /* @__PURE__ */ s("section", {
+					className: c,
+					children: [/* @__PURE__ */ o("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Last action"
+					}), /* @__PURE__ */ o("p", {
+						className: "mt-3 text-base font-medium aui-text-strong",
+						children: u
+					})]
+				})]
+			}),
+			l === "playground" ? /* @__PURE__ */ o("section", {
+				className: c,
+				children: /* @__PURE__ */ o("p", {
+					className: "text-sm aui-text-muted",
+					children: "ActionMenu table row, card header yoki compact list itemlarda juda foydali."
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { l as ActionMenuShowcase };

package/dist/showcase/premium/activity-feed/index.cjs

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

package/dist/showcase/premium/activity-feed/index.d.ts

@@ -0,0 +1,2 @@
+export { ActivityFeedShowcase } from "./showcase";
+export { activityFeedMock } from "./mock";

package/dist/showcase/premium/activity-feed/index.js

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

package/dist/showcase/premium/activity-feed/mock.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { ActivityFeed } from "tembro"
+
+const items = [
+  { id: "i-1", title: "Team invited", description: "New designer joined the workspace.", time: "2 min ago", tone: "info" },
+  { id: "i-2", title: "Deployment succeeded", description: "Staging deployment passed smoke checks.", time: "12 min ago", tone: "success" },
+  { id: "i-3", title: "Payment issue", description: "Invoice sync failed, retry queue enabled.", time: "34 min ago", tone: "warning" },
+]
+
+export function Example() {
+  return <ActivityFeed title="Recent activity" items={items} compact />
+}`,highlights:[`Audit feed for admins`,`Time-based event rows`,`Status tones`,`Compact list mode`],relatedBlockSlugs:[`dashboard-starter`,`crm-dashboard`,`users-table`],scenarios:[{title:`Operation logs`,description:`Show timeline-like events in a side panel near detail content.`},{title:`Approval queue`,description:`Keep audit trails visible next to table actions.`},{title:`System health feeds`,description:`Surface important background events without overwhelming layout.`}],capabilityNotes:["Provide stable `id` values for each item to avoid flicker in updates.","Use meaningful `time` strings and `tone` to communicate action urgency.","Use `compact` for narrow sidebars and dense dashboard sections."]};exports.activityFeedMock=e;

package/dist/showcase/premium/activity-feed/mock.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDemoMock } from "../types";
+export declare const activityFeedMock: ComponentDemoMock;

package/dist/showcase/premium/activity-feed/mock.js

@@ -0,0 +1,36 @@
+//#region src/showcase/premium/activity-feed/mock.ts
+var e = {
+	code: "import { ActivityFeed } from \"tembro\"\n\nconst items = [\n  { id: \"i-1\", title: \"Team invited\", description: \"New designer joined the workspace.\", time: \"2 min ago\", tone: \"info\" },\n  { id: \"i-2\", title: \"Deployment succeeded\", description: \"Staging deployment passed smoke checks.\", time: \"12 min ago\", tone: \"success\" },\n  { id: \"i-3\", title: \"Payment issue\", description: \"Invoice sync failed, retry queue enabled.\", time: \"34 min ago\", tone: \"warning\" },\n]\n\nexport function Example() {\n  return <ActivityFeed title=\"Recent activity\" items={items} compact />\n}",
+	highlights: [
+		"Audit feed for admins",
+		"Time-based event rows",
+		"Status tones",
+		"Compact list mode"
+	],
+	relatedBlockSlugs: [
+		"dashboard-starter",
+		"crm-dashboard",
+		"users-table"
+	],
+	scenarios: [
+		{
+			title: "Operation logs",
+			description: "Show timeline-like events in a side panel near detail content."
+		},
+		{
+			title: "Approval queue",
+			description: "Keep audit trails visible next to table actions."
+		},
+		{
+			title: "System health feeds",
+			description: "Surface important background events without overwhelming layout."
+		}
+	],
+	capabilityNotes: [
+		"Provide stable `id` values for each item to avoid flicker in updates.",
+		"Use meaningful `time` strings and `tone` to communicate action urgency.",
+		"Use `compact` for narrow sidebars and dense dashboard sections."
+	]
+};
+//#endregion
+export { e as activityFeedMock };

package/dist/showcase/premium/activity-feed/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/display/activity-feed.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i=[{id:`i-1`,title:`Team invited`,description:`New designer joined the workspace.`,time:`2 min ago`,tone:`info`},{id:`i-2`,title:`Deployment succeeded`,description:`Staging deployment passed smoke checks.`,time:`12 min ago`,tone:`success`},{id:`i-3`,title:`Invoice warning`,description:`Payment sync delayed in queue, retrying soon.`,time:`34 min ago`,tone:`warning`},{id:`i-4`,title:`Critical alert`,description:`Webhook failed for production billing endpoint.`,time:`1h ago`,tone:`danger`}],a=[`all`,`success`,`warning`,`info`,`danger`];function o({mode:e}){let[o,s]=n.useState(e===`playground`),[c,l]=n.useState(`all`),u=n.useMemo(()=>c===`all`?i:i.filter(e=>e.tone===c),[c]);return(0,r.jsxs)(`div`,{className:`space-y-4`,children:[(0,r.jsxs)(`div`,{className:`grid gap-2`,children:[(0,r.jsxs)(`div`,{className:`aui-text-muted text-sm`,children:[`Density: `,o?`Compact`:`Spacious`]}),(0,r.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,r.jsx)(`button`,{type:`button`,className:`rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-3 py-2 text-sm`,onClick:()=>s(e=>!e),children:o?`Use spacious`:`Use compact`}),a.map(e=>(0,r.jsx)(`button`,{type:`button`,className:`rounded-lg border px-3 py-2 text-sm ${c===e?`aui-surface-strong border-[color:var(--aui-surface-strong)]`:`border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]`}`,onClick:()=>l(e),children:e},e))]})]}),(0,r.jsx)(t.ActivityFeed,{title:`Recent activity`,description:`System and team events are grouped into one lightweight feed.`,items:u,compact:o,empty:(0,r.jsx)(`span`,{className:`aui-text-muted text-sm`,children:`No matching activity for selected tone.`})})]})}exports.ActivityFeedShowcase=o;

package/dist/showcase/premium/activity-feed/showcase.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { ComponentDemoProps } from "../types";
+export declare function ActivityFeedShowcase({ mode }: ComponentDemoProps): React.JSX.Element;

package/dist/showcase/premium/activity-feed/showcase.js

@@ -0,0 +1,77 @@
+import { ActivityFeed as e } from "../../../components/display/activity-feed.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/activity-feed/showcase.tsx
+var i = [
+	{
+		id: "i-1",
+		title: "Team invited",
+		description: "New designer joined the workspace.",
+		time: "2 min ago",
+		tone: "info"
+	},
+	{
+		id: "i-2",
+		title: "Deployment succeeded",
+		description: "Staging deployment passed smoke checks.",
+		time: "12 min ago",
+		tone: "success"
+	},
+	{
+		id: "i-3",
+		title: "Invoice warning",
+		description: "Payment sync delayed in queue, retrying soon.",
+		time: "34 min ago",
+		tone: "warning"
+	},
+	{
+		id: "i-4",
+		title: "Critical alert",
+		description: "Webhook failed for production billing endpoint.",
+		time: "1h ago",
+		tone: "danger"
+	}
+], a = [
+	"all",
+	"success",
+	"warning",
+	"info",
+	"danger"
+];
+function o({ mode: o }) {
+	let [s, c] = t.useState(o === "playground"), [l, u] = t.useState("all"), d = t.useMemo(() => l === "all" ? i : i.filter((e) => e.tone === l), [l]);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ r("div", {
+			className: "grid gap-2",
+			children: [/* @__PURE__ */ r("div", {
+				className: "aui-text-muted text-sm",
+				children: ["Density: ", s ? "Compact" : "Spacious"]
+			}), /* @__PURE__ */ r("div", {
+				className: "flex flex-wrap gap-2",
+				children: [/* @__PURE__ */ n("button", {
+					type: "button",
+					className: "rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-3 py-2 text-sm",
+					onClick: () => c((e) => !e),
+					children: s ? "Use spacious" : "Use compact"
+				}), a.map((e) => /* @__PURE__ */ n("button", {
+					type: "button",
+					className: `rounded-lg border px-3 py-2 text-sm ${l === e ? "aui-surface-strong border-[color:var(--aui-surface-strong)]" : "border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"}`,
+					onClick: () => u(e),
+					children: e
+				}, e))]
+			})]
+		}), /* @__PURE__ */ n(e, {
+			title: "Recent activity",
+			description: "System and team events are grouped into one lightweight feed.",
+			items: d,
+			compact: s,
+			empty: /* @__PURE__ */ n("span", {
+				className: "aui-text-muted text-sm",
+				children: "No matching activity for selected tone."
+			})
+		})]
+	});
+}
+//#endregion
+export { o as ActivityFeedShowcase };

package/dist/showcase/premium/affix/index.cjs

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

package/dist/showcase/premium/affix/index.d.ts

@@ -0,0 +1,2 @@
+export { affixMock } from "./mock";
+export { AffixShowcase } from "./showcase";

package/dist/showcase/premium/affix/index.js

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

package/dist/showcase/premium/affix/mock.cjs

@@ -0,0 +1,12 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Affix } from "@/index"
+
+export function Example() {
+  return (
+    <div className="relative h-48 overflow-y-auto border p-3">
+      <Affix offsetTop={12} zIndex={40} className="bg-primary text-primary-foreground px-3 py-2">
+        Sticky header
+      </Affix>
+      <p className="pt-10">Scroll inside container to test sticky placement.</p>
+    </div>
+  )
+}`,cliCommand:`npx tembro add affix`,highlights:[`Pin content to an offset within a scrollable container`,`Simple API with top and z-index control`],scenarios:[{title:`Toolbar`,description:`Keep action buttons visible while users scroll long forms.`},{title:`Quick filters`,description:`Keep filters always reachable in long list pages.`}]};exports.affixMock=e;

package/dist/showcase/premium/affix/mock.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDemoMock } from "../types";
+export declare const affixMock: ComponentDemoMock;

package/dist/showcase/premium/affix/mock.js

@@ -0,0 +1,15 @@
+//#region src/showcase/premium/affix/mock.ts
+var e = {
+	code: "import { Affix } from \"@/index\"\n\nexport function Example() {\n  return (\n    <div className=\"relative h-48 overflow-y-auto border p-3\">\n      <Affix offsetTop={12} zIndex={40} className=\"bg-primary text-primary-foreground px-3 py-2\">\n        Sticky header\n      </Affix>\n      <p className=\"pt-10\">Scroll inside container to test sticky placement.</p>\n    </div>\n  )\n}",
+	cliCommand: "npx tembro add affix",
+	highlights: ["Pin content to an offset within a scrollable container", "Simple API with top and z-index control"],
+	scenarios: [{
+		title: "Toolbar",
+		description: "Keep action buttons visible while users scroll long forms."
+	}, {
+		title: "Quick filters",
+		description: "Keep filters always reachable in long list pages."
+	}]
+};
+//#endregion
+export { e as affixMock };

package/dist/showcase/premium/affix/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/modern/affix.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i(){let[e,i]=n.useState(0),[a,o]=n.useState(40);return(0,r.jsxs)(`div`,{className:`space-y-4`,children:[(0,r.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,r.jsx)(`button`,{type:`button`,className:`rounded-md border px-2.5 py-1 text-sm`,onClick:()=>i(e=>Math.max(0,e-8)),children:`Offset -8`}),(0,r.jsx)(`button`,{type:`button`,className:`rounded-md border px-2.5 py-1 text-sm`,onClick:()=>i(e=>e+8),children:`Offset +8`}),(0,r.jsx)(`button`,{type:`button`,className:`rounded-md border px-2.5 py-1 text-sm`,onClick:()=>o(e=>e===30?80:30),children:`Toggle z-index`})]}),(0,r.jsxs)(`p`,{className:`text-sm text-muted-foreground`,children:[`Current settings: offsetTop=`,e,`, zIndex=`,a]}),(0,r.jsx)(`div`,{className:`relative h-48 overflow-y-auto rounded-lg border bg-muted/20 p-3`,children:(0,r.jsxs)(`div`,{className:`h-80 space-y-2`,children:[(0,r.jsx)(t.Affix,{offsetTop:e,zIndex:a,className:`mb-3 bg-primary/95 rounded-md px-3 py-2 text-primary-foreground`,children:`Sticky anchor bar`}),(0,r.jsx)(`p`,{children:`Scroll this area to verify sticky behavior.`}),(0,r.jsx)(`p`,{children:`Affix stays visible at the selected top offset.`}),(0,r.jsx)(`p`,{children:`Useful in dashboard toolbars and contextual quick actions.`}),(0,r.jsx)(`p`,{className:`h-64`})]})})]})}exports.AffixShowcase=i;

package/dist/showcase/premium/affix/showcase.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare function AffixShowcase(): React.JSX.Element;

package/dist/showcase/premium/affix/showcase.js

@@ -0,0 +1,64 @@
+import { Affix as e } from "../../../components/modern/affix.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/affix/showcase.tsx
+function i() {
+	let [i, a] = t.useState(0), [o, s] = t.useState(40);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "flex flex-wrap gap-2",
+				children: [
+					/* @__PURE__ */ n("button", {
+						type: "button",
+						className: "rounded-md border px-2.5 py-1 text-sm",
+						onClick: () => a((e) => Math.max(0, e - 8)),
+						children: "Offset -8"
+					}),
+					/* @__PURE__ */ n("button", {
+						type: "button",
+						className: "rounded-md border px-2.5 py-1 text-sm",
+						onClick: () => a((e) => e + 8),
+						children: "Offset +8"
+					}),
+					/* @__PURE__ */ n("button", {
+						type: "button",
+						className: "rounded-md border px-2.5 py-1 text-sm",
+						onClick: () => s((e) => e === 30 ? 80 : 30),
+						children: "Toggle z-index"
+					})
+				]
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "text-sm text-muted-foreground",
+				children: [
+					"Current settings: offsetTop=",
+					i,
+					", zIndex=",
+					o
+				]
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "relative h-48 overflow-y-auto rounded-lg border bg-muted/20 p-3",
+				children: /* @__PURE__ */ r("div", {
+					className: "h-80 space-y-2",
+					children: [
+						/* @__PURE__ */ n(e, {
+							offsetTop: i,
+							zIndex: o,
+							className: "mb-3 bg-primary/95 rounded-md px-3 py-2 text-primary-foreground",
+							children: "Sticky anchor bar"
+						}),
+						/* @__PURE__ */ n("p", { children: "Scroll this area to verify sticky behavior." }),
+						/* @__PURE__ */ n("p", { children: "Affix stays visible at the selected top offset." }),
+						/* @__PURE__ */ n("p", { children: "Useful in dashboard toolbars and contextual quick actions." }),
+						/* @__PURE__ */ n("p", { className: "h-64" })
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { i as AffixShowcase };

package/dist/showcase/premium/alert/index.cjs

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

package/dist/showcase/premium/alert/index.d.ts

@@ -0,0 +1,2 @@
+export { AlertShowcase } from "./showcase";
+export { alertMock } from "./mock";

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

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

package/dist/showcase/premium/alert/mock.cjs

@@ -0,0 +1,12 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Alert, Button } from "tembro"
+
+export function Example() {
+  return (
+    <Alert
+      tone="warning"
+      title="Review needed"
+      description="Billing rules changed and one approval is pending."
+      action={<Button size="sm">Open review</Button>}
+    />
+  )
+}`,highlights:[`Inline feedback with action slot`,`Tone-based severity states`,`Works for info, success, warning, and destructive messaging`,`Compact enough for forms, settings, and dashboards`],scenarios:[{title:`Pending approval`,description:`Warn the user before a release or billing action moves forward.`},{title:`Success confirmation`,description:`Show a short post-save confirmation without forcing a toast.`},{title:`Inline form issue`,description:`Attach next-step guidance directly where attention is needed.`}],capabilityNotes:[`Use alerts for actionable inline status, not for decorative emphasis.`,`Pair warning and destructive tones with a specific next action.`,`Keep the title decisive and the description operational.`]};exports.alertMock=e;

package/dist/showcase/premium/alert/mock.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDemoMock } from "../types";
+export declare const alertMock: ComponentDemoMock;

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

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/alert/mock.ts
+var e = {
+	code: "import { Alert, Button } from \"tembro\"\n\nexport function Example() {\n  return (\n    <Alert\n      tone=\"warning\"\n      title=\"Review needed\"\n      description=\"Billing rules changed and one approval is pending.\"\n      action={<Button size=\"sm\">Open review</Button>}\n    />\n  )\n}",
+	highlights: [
+		"Inline feedback with action slot",
+		"Tone-based severity states",
+		"Works for info, success, warning, and destructive messaging",
+		"Compact enough for forms, settings, and dashboards"
+	],
+	scenarios: [
+		{
+			title: "Pending approval",
+			description: "Warn the user before a release or billing action moves forward."
+		},
+		{
+			title: "Success confirmation",
+			description: "Show a short post-save confirmation without forcing a toast."
+		},
+		{
+			title: "Inline form issue",
+			description: "Attach next-step guidance directly where attention is needed."
+		}
+	],
+	capabilityNotes: [
+		"Use alerts for actionable inline status, not for decorative emphasis.",
+		"Pair warning and destructive tones with a specific next action.",
+		"Keep the title decisive and the description operational."
+	]
+};
+//#endregion
+export { e as alertMock };

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

package/dist/showcase/premium/alert/showcase.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { ComponentDemoProps } from "../types";
+export declare function AlertShowcase({ mode }: ComponentDemoProps): React.JSX.Element;