tembro 3.0.0 → 3.1.5

package/dist/src/showcase/premium/confirm-dialog/showcase.js

@@ -0,0 +1,132 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { ConfirmDialog as n } from "../../../components/overlay/confirm-dialog.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/confirm-dialog/showcase.tsx
+var o = "border-t border-[color:var(--aui-divider)] py-6";
+function s({ mode: s }) {
+	let [c, l] = r.useState(!1), [u, d] = r.useState(!1), [f, p] = r.useState(!1);
+	async function m() {
+		p(!0), await new Promise((e) => setTimeout(e, 700)), p(!1), l(!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: "Confirm dialog"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Use it only for explicit checkpoints"
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "mt-3 text-sm leading-6 aui-text-muted",
+								children: "Deletion, archive, publish, or save confirmation should require one clear yes or no."
+							})
+						]
+					}), /* @__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: "State"
+								}), /* @__PURE__ */ i("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: f ? "Busy" : "Idle"
+								})]
+							}),
+							/* @__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: "Risk"
+								}), /* @__PURE__ */ i("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: "High"
+								})]
+							}),
+							/* @__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: "Route"
+								}), /* @__PURE__ */ i("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: s === "playground" ? "Interactive" : "Docs"
+								})]
+							})
+						]
+					})]
+				})
+			}),
+			/* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-3",
+					children: [
+						/* @__PURE__ */ i(e, {
+							onClick: () => l(!0),
+							children: "Open destructive confirm"
+						}),
+						/* @__PURE__ */ i(e, {
+							variant: "outline",
+							onClick: () => d(!0),
+							children: "Open save confirm"
+						}),
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							children: f ? "Waiting for confirm" : "Ready"
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ i("div", {
+					className: "border-y border-[color:var(--aui-divider)]",
+					children: [
+						"Keep the action label outcome-specific.",
+						"Do not use confirm dialog for long forms or multi-step review.",
+						"Mutation state should stay controlled from the page."
+					].map((e) => /* @__PURE__ */ i("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))
+				})
+			}),
+			/* @__PURE__ */ i(n, {
+				open: c,
+				onOpenChange: l,
+				title: "Delete resource?",
+				description: "You are about to remove a production resource. This action is irreversible.",
+				confirmText: "Delete",
+				confirmVariant: "destructive",
+				isLoading: f,
+				onCancel: () => l(!1),
+				onConfirm: m
+			}),
+			/* @__PURE__ */ i(n, {
+				open: u,
+				onOpenChange: d,
+				title: "Save profile changes",
+				description: "Keep existing values if this is a draft state.",
+				confirmText: "Save changes",
+				onCancel: () => d(!1),
+				onConfirm: () => d(!1)
+			})
+		]
+	});
+}
+//#endregion
+export { s as ConfirmDialogShowcase };

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

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

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

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

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

@@ -0,0 +1,13 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { CopyButton } from "tembro"
+
+export function Example() {
+  return (
+    <CopyButton
+      value="sk_live_demo_123"
+      copyLabel="Copy token"
+      copiedLabel="Copied"
+      variant="outline"
+      size="sm"
+    />
+  )
+}`,cliCommand:`npx tembro add copy-button`,highlights:[`Built-in copied feedback state`,`Works with the exported Button API surface`,`Useful for tokens, links, invite codes, and IDs`],scenarios:[{title:`Token copy`,description:`Copy secret-like values without opening a secondary modal.`},{title:`Share link`,description:`Inline copy action beside invite or embed links.`},{title:`Row action`,description:`Small copy affordance inside a dense operational table.`}]};exports.copyButtonMock=e;

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

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/copy-button/mock.ts
+var e = {
+	code: "import { CopyButton } from \"tembro\"\n\nexport function Example() {\n  return (\n    <CopyButton\n      value=\"sk_live_demo_123\"\n      copyLabel=\"Copy token\"\n      copiedLabel=\"Copied\"\n      variant=\"outline\"\n      size=\"sm\"\n    />\n  )\n}",
+	cliCommand: "npx tembro add copy-button",
+	highlights: [
+		"Built-in copied feedback state",
+		"Works with the exported Button API surface",
+		"Useful for tokens, links, invite codes, and IDs"
+	],
+	scenarios: [
+		{
+			title: "Token copy",
+			description: "Copy secret-like values without opening a secondary modal."
+		},
+		{
+			title: "Share link",
+			description: "Inline copy action beside invite or embed links."
+		},
+		{
+			title: "Row action",
+			description: "Small copy affordance inside a dense operational table."
+		}
+	]
+};
+//#endregion
+export { e as copyButtonMock };

package/dist/src/showcase/premium/copy-button/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/actions/copy-button.cjs"),n=require("../../../components/ui/input/index.cjs"),r=require("../../../components/ui/badge/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`border-t border-[color:var(--aui-divider)] py-6`;function s(){let[e,s]=i.useState(`sk_live_workspace_28A91X`),[c,l]=i.useState(``);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsxs)(`section`,{className:`pb-6`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed action`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`CopyButton handles inline copy feedback cleanly`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`It should replace one-off clipboard wrappers in tokens, invite links, integration keys, and compact table rows.`})]}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`API token row`}),(0,a.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`A copy action should sit directly beside the value it belongs to and confirm success immediately.`}),(0,a.jsxs)(`div`,{className:`mt-5 flex flex-col gap-3 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4 sm:flex-row sm:items-center`,children:[(0,a.jsx)(n.Input,{value:e,onValueChange:s,className:`flex-1`}),(0,a.jsx)(t.CopyButton,{value:e,variant:`outline`,copyLabel:`Copy token`,copiedLabel:`Copied`,onCopied:l})]})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,a.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Last copied value`}),(0,a.jsx)(`p`,{className:`mt-1 text-xs aui-text-muted`,children:`The component exposes hooks so products can log or toast on success.`})]}),(0,a.jsx)(r.Badge,{variant:c?`secondary`:`outline`,children:c?`Copied`:`Idle`})]}),(0,a.jsx)(`p`,{className:`mt-4 break-all text-sm leading-6 aui-text-muted`,children:c||`No value copied yet.`})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3`,children:[(0,a.jsx)(t.CopyButton,{value:`INV-2026-00482`,size:`sm`,variant:`outline`,copyLabel:`Copy invoice id`}),(0,a.jsx)(t.CopyButton,{value:`https://tembro.dev/invite/team-ops`,variant:`secondary`,copyLabel:`Copy invite link`}),(0,a.jsx)(t.CopyButton,{value:`workspace_admin`,variant:`ghost`,copyLabel:`Copy role`})]})})]})}exports.CopyButtonShowcase=s;

package/dist/src/showcase/premium/copy-button/showcase.js

@@ -0,0 +1,106 @@
+import { CopyButton as e } from "../../../components/actions/copy-button.js";
+import { Input as t } from "../../../components/ui/input/index.js";
+import { Badge as n } from "../../../components/ui/badge/index.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/copy-button/showcase.tsx
+var o = "border-t border-[color:var(--aui-divider)] py-6";
+function s() {
+	let [s, c] = r.useState("sk_live_workspace_28A91X"), [l, u] = r.useState("");
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ a("section", {
+				className: "pb-6",
+				children: [
+					/* @__PURE__ */ i("p", {
+						className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+						children: "Installed action"
+					}),
+					/* @__PURE__ */ i("h3", {
+						className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+						children: "CopyButton handles inline copy feedback cleanly"
+					}),
+					/* @__PURE__ */ i("p", {
+						className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
+						children: "It should replace one-off clipboard wrappers in tokens, invite links, integration keys, and compact table rows."
+					})
+				]
+			}),
+			/* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ a("div", {
+					className: "grid gap-6 xl:grid-cols-[1fr_360px]",
+					children: [/* @__PURE__ */ a("div", { children: [
+						/* @__PURE__ */ i("p", {
+							className: "text-lg font-semibold aui-text-strong",
+							children: "API token row"
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
+							children: "A copy action should sit directly beside the value it belongs to and confirm success immediately."
+						}),
+						/* @__PURE__ */ a("div", {
+							className: "mt-5 flex flex-col gap-3 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4 sm:flex-row sm:items-center",
+							children: [/* @__PURE__ */ i(t, {
+								value: s,
+								onValueChange: c,
+								className: "flex-1"
+							}), /* @__PURE__ */ i(e, {
+								value: s,
+								variant: "outline",
+								copyLabel: "Copy token",
+								copiedLabel: "Copied",
+								onCopied: u
+							})]
+						})
+					] }), /* @__PURE__ */ a("div", {
+						className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
+						children: [/* @__PURE__ */ a("div", {
+							className: "flex items-start justify-between gap-4",
+							children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+								className: "text-sm font-semibold aui-text-strong",
+								children: "Last copied value"
+							}), /* @__PURE__ */ i("p", {
+								className: "mt-1 text-xs aui-text-muted",
+								children: "The component exposes hooks so products can log or toast on success."
+							})] }), /* @__PURE__ */ i(n, {
+								variant: l ? "secondary" : "outline",
+								children: l ? "Copied" : "Idle"
+							})]
+						}), /* @__PURE__ */ i("p", {
+							className: "mt-4 break-all text-sm leading-6 aui-text-muted",
+							children: l || "No value copied yet."
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap items-center gap-3",
+					children: [
+						/* @__PURE__ */ i(e, {
+							value: "INV-2026-00482",
+							size: "sm",
+							variant: "outline",
+							copyLabel: "Copy invoice id"
+						}),
+						/* @__PURE__ */ i(e, {
+							value: "https://tembro.dev/invite/team-ops",
+							variant: "secondary",
+							copyLabel: "Copy invite link"
+						}),
+						/* @__PURE__ */ i(e, {
+							value: "workspace_admin",
+							variant: "ghost",
+							copyLabel: "Copy role"
+						})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { s as CopyButtonShowcase };

package/dist/src/showcase/premium/data-state/index.cjs

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

package/dist/src/showcase/premium/data-state/index.js

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

package/dist/src/showcase/premium/data-state/mock.cjs

@@ -0,0 +1,12 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { DataState } from "tembro"
+
+export function Example() {
+  return (
+    <DataState
+      status="error"
+      title="Unable to load rows"
+      description="Try again after refreshing the request."
+      onRetry={() => {}}
+    />
+  )
+}`,cliCommand:`npx tembro add data-state`,highlights:[`Idle, loading, empty, error and success state surface`,`Optional retry action and custom content area`,`Useful for panels or data-heavy cards that need clearer fallback than a spinner alone`],scenarios:[{title:`Error panel`,description:`Show failed request recovery without replacing the whole page.`},{title:`Empty data`,description:`Clarify that the query worked but returned nothing.`},{title:`Loading panel`,description:`Reserve the panel shell while async work completes.`}]};exports.dataStateMock=e;

package/dist/src/showcase/premium/data-state/mock.js

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/data-state/mock.ts
+var e = {
+	code: "import { DataState } from \"tembro\"\n\nexport function Example() {\n  return (\n    <DataState\n      status=\"error\"\n      title=\"Unable to load rows\"\n      description=\"Try again after refreshing the request.\"\n      onRetry={() => {}}\n    />\n  )\n}",
+	cliCommand: "npx tembro add data-state",
+	highlights: [
+		"Idle, loading, empty, error and success state surface",
+		"Optional retry action and custom content area",
+		"Useful for panels or data-heavy cards that need clearer fallback than a spinner alone"
+	],
+	scenarios: [
+		{
+			title: "Error panel",
+			description: "Show failed request recovery without replacing the whole page."
+		},
+		{
+			title: "Empty data",
+			description: "Clarify that the query worked but returned nothing."
+		},
+		{
+			title: "Loading panel",
+			description: "Reserve the panel shell while async work completes."
+		}
+	]
+};
+//#endregion
+export { e as dataStateMock };

package/dist/src/showcase/premium/data-state/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/display/data-state.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`border-t border-[color:var(--aui-divider)] py-6`;function o(){let[e,o]=r.useState(`loading`);return(0,i.jsxs)(`div`,{className:`space-y-0`,children:[(0,i.jsxs)(`section`,{className:`pb-6`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`DataState is the panel-level fallback surface`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use it when a card or module needs explicit state handling beyond a raw spinner or empty paragraph.`})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:[`loading`,`empty`,`error`,`success`].map(n=>(0,i.jsx)(t.Button,{size:`sm`,variant:e===n?`secondary`:`outline`,onClick:()=>o(n),children:n},n))}),(0,i.jsx)(`div`,{className:`mt-5`,children:(0,i.jsx)(n.DataState,{status:e,title:e===`success`?`Data ready`:e===`error`?`Unable to load metrics`:void 0,description:e===`success`?`The request completed and the panel can continue rendering detail content.`:e===`error`?`The upstream request failed. Retry the panel request before leaving the route.`:void 0,onRetry:e===`error`?()=>o(`loading`):void 0,actions:e===`success`?(0,i.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Open details`}):void 0})})]})]})}exports.DataStateShowcase=o;

package/dist/src/showcase/premium/data-state/showcase.js

@@ -0,0 +1,60 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { DataState as t } from "../../../components/display/data-state.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/data-state/showcase.tsx
+var a = "border-t border-[color:var(--aui-divider)] py-6";
+function o() {
+	let [o, s] = n.useState("loading");
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-0",
+		children: [/* @__PURE__ */ i("section", {
+			className: "pb-6",
+			children: [
+				/* @__PURE__ */ r("p", {
+					className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+					children: "Installed display primitive"
+				}),
+				/* @__PURE__ */ r("h3", {
+					className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+					children: "DataState is the panel-level fallback surface"
+				}),
+				/* @__PURE__ */ r("p", {
+					className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
+					children: "Use it when a card or module needs explicit state handling beyond a raw spinner or empty paragraph."
+				})
+			]
+		}), /* @__PURE__ */ i("section", {
+			className: a,
+			children: [/* @__PURE__ */ r("div", {
+				className: "flex flex-wrap gap-2",
+				children: [
+					"loading",
+					"empty",
+					"error",
+					"success"
+				].map((t) => /* @__PURE__ */ r(e, {
+					size: "sm",
+					variant: o === t ? "secondary" : "outline",
+					onClick: () => s(t),
+					children: t
+				}, t))
+			}), /* @__PURE__ */ r("div", {
+				className: "mt-5",
+				children: /* @__PURE__ */ r(t, {
+					status: o,
+					title: o === "success" ? "Data ready" : o === "error" ? "Unable to load metrics" : void 0,
+					description: o === "success" ? "The request completed and the panel can continue rendering detail content." : o === "error" ? "The upstream request failed. Retry the panel request before leaving the route." : void 0,
+					onRetry: o === "error" ? () => s("loading") : void 0,
+					actions: o === "success" ? /* @__PURE__ */ r(e, {
+						size: "sm",
+						variant: "outline",
+						children: "Open details"
+					}) : void 0
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { o as DataStateShowcase };

package/dist/src/showcase/premium/data-table/data.js

@@ -0,0 +1,127 @@
+//#region src/showcase/premium/data-table/data.ts
+var e = [
+	"Acme Inc.",
+	"Larana",
+	"ShipFast",
+	"Toolpad",
+	"Pixels UI",
+	"Northstar"
+], t = [
+	"Azamat",
+	"Malika",
+	"Sardor",
+	"Nodira",
+	"Asadbek",
+	"Kamola"
+], n = [
+	"Direct",
+	"Partner",
+	"Direct",
+	"Marketplace",
+	"Marketplace",
+	"Direct"
+], r = [
+	"Paid",
+	"Review",
+	"Draft",
+	"Paid",
+	"Overdue",
+	"Paid"
+], i = [
+	"$2,400",
+	"$1,280",
+	"$980",
+	"$4,120",
+	"$860",
+	"$3,620"
+], a = [
+	2400,
+	1280,
+	980,
+	4120,
+	860,
+	3620
+], o = [
+	"2h ago",
+	"4h ago",
+	"Today",
+	"1d ago",
+	"1d ago",
+	"2d ago"
+], s = [
+	48,
+	16,
+	8,
+	63,
+	4,
+	28
+], c = [
+	12,
+	5,
+	3,
+	18,
+	2,
+	9
+], l = [
+	"up",
+	"steady",
+	"down",
+	"up",
+	"down",
+	"up"
+], u = e.map((e, u) => ({
+	invoice: `INV-00${u + 1}`,
+	order: `#448${u + 2}`,
+	customer: e,
+	owner: t[u],
+	channel: n[u],
+	status: r[u],
+	stock: s[u],
+	items: c[u],
+	amount: i[u],
+	amountValue: a[u],
+	trend: l[u],
+	updatedAt: o[u]
+}));
+function d(e) {
+	let t = Math.max(1, Math.min(120, Math.floor(e)));
+	return Array.from({ length: t }, (e, t) => {
+		let n = u[t % u.length], r = Math.floor(t / u.length), i = String(t + 1).padStart(3, "0"), a = 4482 + t, o = n.amountValue + r * 175, s = new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: "USD",
+			maximumFractionDigits: 0
+		}).format(o);
+		return {
+			...n,
+			invoice: `INV-${i}`,
+			order: `#${a}`,
+			amount: s,
+			amountValue: o,
+			stock: n.stock + r * 2,
+			items: n.items + (t % 3 == 0 ? r : 0),
+			updatedAt: r === 0 ? n.updatedAt : `${r + 1}d ago`
+		};
+	});
+}
+var f = ["Export CSV", "Sync"].map((e) => ({
+	label: e,
+	variant: e === "Export CSV" ? "default" : "outline"
+})), p = [
+	{
+		value: "all",
+		label: "All invoices",
+		description: "All rows."
+	},
+	{
+		value: "finance",
+		label: "Finance review",
+		description: "Paid + review."
+	},
+	{
+		value: "at-risk",
+		label: "At risk",
+		description: "Draft + overdue."
+	}
+];
+//#endregion
+export { d as buildDataTableDemoRows, p as dataTableDemoPresets, u as dataTableDemoRows, f as dataTableToolbarActions };

package/dist/src/showcase/premium/data-table/index.cjs

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

package/dist/src/showcase/premium/data-table/index.js

@@ -0,0 +1,4 @@
+import { DataTableShowcase as e } from "./showcase.js";
+import { dataTableMock as t } from "./mock.js";
+import { dataTableDemoRows as n, dataTableToolbarActions as r } from "./data.js";
+export { e as DataTableShowcase, n as dataTableDemoRows, t as dataTableMock, r as dataTableToolbarActions };

package/dist/src/showcase/premium/data-table/mock.cjs

@@ -0,0 +1,28 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { DataTable } from "tembro"
+
+export function Example() {
+  return (
+    <DataTable
+      columns={columns}
+      data={rows}
+      title="Customers"
+      description="Search, filter, select, and act on operational rows."
+      search={{ value: query, onValueChange: setQuery, placeholder: "Search rows..." }}
+      filters={<StatusFilter value={status} onValueChange={setStatus} />}
+      toolbarActions={<ExportButton rows={rows} />}
+      features={{ columnVisibility: true, rowActions: true, bulkActions: true }}
+      rowSelection={rowSelection}
+      onRowSelectionChange={setRowSelection}
+      rowActions={(row) => getActions(row.original)}
+      bulkActions={bulkActions}
+      pagination={{ pageIndex, pageSize, pageCount, totalRows: rows.length, onPageChange: setPageIndex }}
+      density="comfortable"
+      striped
+      bordered
+      stickyHeader
+      virtualization={{ height: 480, estimateRowHeight: 52 }}
+      rowActions={(row) => getActions(row.original)}
+      bulkActions={bulkActions}
+    />
+  )
+}`,highlights:[`Toolbar actions`,`Bulk actions`,`Row click`,`Visibility menu`,`Density`,`Virtualized rows`,`Preset-driven views`,`Mobile strategy`,`Pagination`],scenarios:[{title:`Finance operations`,description:`Filter, sort and paginate transactional rows with export-ready actions.`},{title:`Mobile fallback`,description:`Collapse rows into cards while preserving click and selection behaviors.`},{title:`Preset views`,description:`Switch between all rows, finance-only and at-risk tables without rebuilding columns.`},{title:`Bulk handling`,description:`Run row group actions with selection state and clear behavior.`}]};exports.dataTableMock=e;

package/dist/src/showcase/premium/data-table/mock.js

@@ -0,0 +1,35 @@
+//#region src/showcase/premium/data-table/mock.ts
+var e = {
+	code: "import { DataTable } from \"tembro\"\n\nexport function Example() {\n  return (\n    <DataTable\n      columns={columns}\n      data={rows}\n      title=\"Customers\"\n      description=\"Search, filter, select, and act on operational rows.\"\n      search={{ value: query, onValueChange: setQuery, placeholder: \"Search rows...\" }}\n      filters={<StatusFilter value={status} onValueChange={setStatus} />}\n      toolbarActions={<ExportButton rows={rows} />}\n      features={{ columnVisibility: true, rowActions: true, bulkActions: true }}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      rowActions={(row) => getActions(row.original)}\n      bulkActions={bulkActions}\n      pagination={{ pageIndex, pageSize, pageCount, totalRows: rows.length, onPageChange: setPageIndex }}\n      density=\"comfortable\"\n      striped\n      bordered\n      stickyHeader\n      virtualization={{ height: 480, estimateRowHeight: 52 }}\n      rowActions={(row) => getActions(row.original)}\n      bulkActions={bulkActions}\n    />\n  )\n}",
+	highlights: [
+		"Toolbar actions",
+		"Bulk actions",
+		"Row click",
+		"Visibility menu",
+		"Density",
+		"Virtualized rows",
+		"Preset-driven views",
+		"Mobile strategy",
+		"Pagination"
+	],
+	scenarios: [
+		{
+			title: "Finance operations",
+			description: "Filter, sort and paginate transactional rows with export-ready actions."
+		},
+		{
+			title: "Mobile fallback",
+			description: "Collapse rows into cards while preserving click and selection behaviors."
+		},
+		{
+			title: "Preset views",
+			description: "Switch between all rows, finance-only and at-risk tables without rebuilding columns."
+		},
+		{
+			title: "Bulk handling",
+			description: "Run row group actions with selection state and clear behavior."
+		}
+	]
+};
+//#endregion
+export { e as dataTableMock };

package/dist/src/showcase/premium/data-table/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/ui/select/index.cjs"),i=require("../../../components/data-table/data-table-actions-column.cjs"),a=require("../../../components/data-table/data-table-column-visibility-menu.cjs"),o=require("../../../components/data-table/data-table.cjs"),s=require("../../../components/data-table/data-table-select-column.cjs"),c=require("../../../components/data-table/data-table-sortable-header.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=[{invoice:`INV-4821`,customer:`Acme Studio`,owner:`Azamat`,amount:`$12,420`,status:`Paid`,updatedAt:`2m ago`},{invoice:`INV-4822`,customer:`Northwind`,owner:`Madina`,amount:`$8,120`,status:`Review`,updatedAt:`10m ago`},{invoice:`INV-4823`,customer:`Globex`,owner:`Jasur`,amount:`$4,880`,status:`Draft`,updatedAt:`22m ago`},{invoice:`INV-4824`,customer:`Pixel Union`,owner:`Azamat`,amount:`$17,300`,status:`Paid`,updatedAt:`44m ago`},{invoice:`INV-4825`,customer:`Meridian Labs`,owner:`Madina`,amount:`$2,180`,status:`Review`,updatedAt:`1h ago`},{invoice:`INV-4826`,customer:`Orbit Cloud`,owner:`Jasur`,amount:`$9,040`,status:`Draft`,updatedAt:`3h ago`}];function f(){let[e,f]=l.useState(``),[p,m]=l.useState(`all`),[h,g]=l.useState(`all`),[_,v]=l.useState({}),y=d.filter(t=>{let n=e.trim().toLowerCase(),r=!n||`${t.invoice} ${t.customer} ${t.owner} ${t.amount}`.toLowerCase().includes(n),i=p===`all`||t.status===p,a=h===`all`||t.owner===h;return r&&i&&a}),b=Object.values(_).filter(Boolean).length,x=l.useMemo(()=>[s.createDataTableSelectColumn(),{accessorKey:`invoice`,header:({column:e})=>(0,u.jsx)(c.DataTableSortableHeader,{column:e,children:`Invoice`})},{accessorKey:`customer`,header:({column:e})=>(0,u.jsx)(c.DataTableSortableHeader,{column:e,children:`Customer`})},{accessorKey:`status`,header:`Status`,cell:({row:e})=>(0,u.jsx)(n.Badge,{variant:e.original.status===`Paid`?`secondary`:e.original.status===`Review`?`outline`:`destructive`,children:e.original.status})},{accessorKey:`amount`,header:({column:e})=>(0,u.jsx)(c.DataTableSortableHeader,{column:e,children:`Amount`})},{accessorKey:`updatedAt`,header:`Updated`},i.createDataTableActionsColumn({getActions:()=>[{key:`open`,label:`Open detail`,onSelect:()=>void 0},{key:`archive`,label:`Archive`,destructive:!0,onSelect:()=>void 0}]})],[]);return(0,u.jsxs)(`div`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{className:`flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Operational table`}),(0,u.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Search, selection and actions in one table`})]}),(0,u.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:[(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Rows`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:y.length})]}),(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Selected`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:b})]}),(0,u.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,u.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`State`}),(0,u.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:e||p!==`all`||h!==`all`?`Filtered`:`Live`})]})]})]}),(0,u.jsx)(o.DataTable,{columns:x,data:y,getRowId:e=>e.invoice,enableRowSelection:!0,rowSelection:_,title:`Invoices`,description:`Search, filter, visibility controls, bulk actions and row actions should stay inside one install-ready table surface.`,features:{search:!0,columnVisibility:!0,bulkActions:!0},search:{value:e,onValueChange:f,placeholder:`Search invoice, customer...`,clearable:!0},filters:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(r.Select,{value:p,onValueChange:e=>m(e??`all`),options:[{value:`all`,label:`All statuses`},{value:`Paid`,label:`Paid`},{value:`Review`,label:`Review`},{value:`Draft`,label:`Draft`}],triggerClassName:`min-w-40`}),(0,u.jsx)(r.Select,{value:h,onValueChange:e=>g(e??`all`),options:[{value:`all`,label:`All owners`},{value:`Azamat`,label:`Azamat`},{value:`Madina`,label:`Madina`},{value:`Jasur`,label:`Jasur`}],triggerClassName:`min-w-36`})]}),summary:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)(n.Badge,{variant:`outline`,children:[y.length,` rows`]}),(0,u.jsxs)(n.Badge,{variant:`outline`,children:[b,` selected`]}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e||p!==`all`||h!==`all`?`Filtered view`:`Live view`})]}),toolbarActions:({table:e})=>(0,u.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,u.jsx)(a.DataTableColumnVisibilityMenu,{table:e}),(0,u.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Export`})]}),bulkActions:[{key:`export`,label:`Export selected`,onSelect:()=>void 0},{key:`archive`,label:`Archive selected`,destructive:!0,onSelect:()=>void 0}],onRowSelectionChange:e=>{v(t=>typeof e==`function`?e(t):e)},onRowClick:()=>void 0,renderMobileCard:e=>(0,u.jsx)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:(0,u.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`p`,{className:`text-base font-semibold aui-text-strong`,children:e.original.invoice}),(0,u.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:e.original.customer})]}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e.original.status})]})}),pagination:{pageIndex:0,pageSize:5,rowCount:y.length,pageCount:Math.max(Math.ceil(y.length/5),1),pageSizeOptions:[5,10],onPageChange:()=>void 0,onPageSizeChange:()=>void 0}}),(0,u.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,u.jsx)(t.Button,{size:`sm`,children:`Export`}),(0,u.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Refresh`})]})]})}exports.DataTableShowcase=f;