tembro 2.1.13 → 3.1.1

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

@@ -0,0 +1,174 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { ToastProvider as n, useToast as r } from "../../../components/notifications/toast.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/showcase/premium/toast/showcase.tsx
+var s = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function c({ mode: n }) {
+	let [c, l] = i.useState(0), { addToast: u, success: d, warning: f, error: p, promise: m, clearToasts: h, toasts: g, dismissToast: _ } = r();
+	return /* @__PURE__ */ o("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__ */ o("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ o("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ a("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Transient feedback"
+							}),
+							/* @__PURE__ */ a("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Toasts should report short-lived outcomes"
+							}),
+							/* @__PURE__ */ a("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "Use them for short confirmations and lightweight warnings. Critical blocking states should remain on the page, not vanish into transient notifications."
+							})
+						]
+					}), /* @__PURE__ */ o("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ a(t, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Success"
+							}),
+							/* @__PURE__ */ a(t, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Warning"
+							}),
+							/* @__PURE__ */ a(t, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Error"
+							})
+						]
+					})]
+				}), /* @__PURE__ */ o("div", {
+					className: "mt-6 flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							onClick: () => {
+								l((e) => e + 1), u({
+									title: "Sync started",
+									description: `Sync run ${c + 1} has started.`,
+									tone: "info"
+								});
+							},
+							children: "Add toast"
+						}),
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => {
+								l((e) => e + 1), d({
+									title: "Saved",
+									description: "Project updated successfully.",
+									tone: "success"
+								});
+							},
+							children: "Success"
+						}),
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => {
+								l((e) => e + 1), f("Please confirm required metadata before publish.");
+							},
+							children: "Warning"
+						}),
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => {
+								l((e) => e + 1), p({
+									title: "Request failed",
+									description: `Failure occurred while saving item #${c + 1}`
+								});
+							},
+							children: "Error"
+						}),
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => {
+								m(new Promise((e) => {
+									window.setTimeout(() => e("Export ready"), 1200);
+								}), {
+									loading: {
+										title: "Preparing export",
+										description: "Building CSV package.",
+										group: "Export"
+									},
+									success: (e) => ({
+										title: e,
+										description: "Download can start now.",
+										group: "Export"
+									}),
+									error: () => ({
+										title: "Export failed",
+										description: "Retry after refreshing.",
+										group: "Export"
+									})
+								});
+							},
+							children: "Promise"
+						}),
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: h,
+							children: "Clear all"
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: s,
+				children: [/* @__PURE__ */ o("p", {
+					className: "mb-2 text-sm aui-text-muted",
+					children: ["Active toasts: ", g.length]
+				}), /* @__PURE__ */ a("div", {
+					className: "grid gap-2",
+					children: g.length === 0 ? /* @__PURE__ */ a("div", {
+						className: "rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-3 py-2 text-sm aui-text-muted",
+						children: "No active toasts"
+					}) : g.map((t) => /* @__PURE__ */ o("div", {
+						className: "flex items-start justify-between rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-3 py-2 text-sm",
+						children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
+							className: "font-medium aui-text-strong",
+							children: t.title ?? "Untitled"
+						}), /* @__PURE__ */ a("p", {
+							className: "aui-text-muted",
+							children: t.description
+						})] }), /* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => _(t.id),
+							children: "Dismiss"
+						})]
+					}, t.id))
+				})]
+			}),
+			null
+		]
+	});
+}
+function l({ mode: e }) {
+	return /* @__PURE__ */ a(n, {
+		position: "top-right",
+		defaultDuration: 3e3,
+		maxToasts: 5,
+		pauseOnHover: e === "playground",
+		children: /* @__PURE__ */ a(c, { mode: e })
+	});
+}
+//#endregion
+export { l as ToastShowcase };

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

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

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

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

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

@@ -0,0 +1,15 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, Tooltip } from "tembro"
+
+export function Example() {
+  return (
+    <div className="flex gap-3">
+      <Tooltip content="Copies the current code snippet to clipboard.">
+        <Button variant="outline">Copy code</Button>
+      </Tooltip>
+
+      <Tooltip content="Only owners can publish this release." side="bottom">
+        <Button>Publish</Button>
+      </Tooltip>
+    </div>
+  )
+}`,htmlCode:`<span data-slot="tooltip">Hover or focus to reveal hint</span>`,cliCommand:`npx tembro add tooltip`,highlights:[`Short helper copy`,`Hover + focus states`,`Placement control`,`Low-noise guidance`],relatedBlockSlugs:[`settings-form`,`dashboard-starter`,`crm-dashboard`],scenarios:[{title:`Action clarification`,description:`Clarify compact buttons without adding full inline helper text.`},{title:`Permission hint`,description:`Explain why a control matters before users commit.`},{title:`Dense data tables`,description:`Keep labels short while still exposing supporting context on focus.`}],capabilityNotes:[`Keep tooltip copy to one short sentence.`,`Use focus-safe triggers so keyboard users get the same guidance.`,`Do not place critical instructions only inside a tooltip.`,`If the content needs actions or long text, switch to Popover instead.`]};exports.tooltipMock=e;

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

@@ -0,0 +1,39 @@
+//#region src/showcase/premium/tooltip/mock.ts
+var e = {
+	code: "import { Button, Tooltip } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"flex gap-3\">\n      <Tooltip content=\"Copies the current code snippet to clipboard.\">\n        <Button variant=\"outline\">Copy code</Button>\n      </Tooltip>\n\n      <Tooltip content=\"Only owners can publish this release.\" side=\"bottom\">\n        <Button>Publish</Button>\n      </Tooltip>\n    </div>\n  )\n}",
+	htmlCode: "<span data-slot=\"tooltip\">Hover or focus to reveal hint</span>",
+	cliCommand: "npx tembro add tooltip",
+	highlights: [
+		"Short helper copy",
+		"Hover + focus states",
+		"Placement control",
+		"Low-noise guidance"
+	],
+	relatedBlockSlugs: [
+		"settings-form",
+		"dashboard-starter",
+		"crm-dashboard"
+	],
+	scenarios: [
+		{
+			title: "Action clarification",
+			description: "Clarify compact buttons without adding full inline helper text."
+		},
+		{
+			title: "Permission hint",
+			description: "Explain why a control matters before users commit."
+		},
+		{
+			title: "Dense data tables",
+			description: "Keep labels short while still exposing supporting context on focus."
+		}
+	],
+	capabilityNotes: [
+		"Keep tooltip copy to one short sentence.",
+		"Use focus-safe triggers so keyboard users get the same guidance.",
+		"Do not place critical instructions only inside a tooltip.",
+		"If the content needs actions or long text, switch to Popover instead."
+	]
+};
+//#endregion
+export { e as tooltipMock };

package/dist/src/showcase/premium/tooltip/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/tooltip/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=[`top`,`right`,`bottom`,`left`],o=`border-t border-[color:var(--aui-divider)] py-6`;function s(){let[e,s]=r.useState(`top`),[c,l]=r.useState(!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:`Tooltip`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Explain quickly, then get out`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Tooltip should answer one short question near the trigger without interrupting the screen.`})]}),(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:`Side`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong capitalize`,children:e})]}),(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:`State`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:c?`Disabled`:`Enabled`})]}),(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:`Use for`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Short hints`})]})]})]})}),(0,i.jsx)(`section`,{className:o,children:(0,i.jsx)(`div`,{className:`flex min-h-48 items-center justify-center rounded-[22px] border border-[color:var(--aui-divider)] p-5`,children:(0,i.jsx)(n.Tooltip,{content:`Copies the current docs example to your clipboard.`,side:e,disabled:c,children:(0,i.jsx)(t.Button,{type:`button`,variant:`outline`,children:`Hover or focus me`})})})}),(0,i.jsx)(`section`,{className:o,children:(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[a.map(n=>(0,i.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===n?`default`:`secondary`,onClick:()=>s(n),children:n},n)),(0,i.jsx)(t.Button,{type:`button`,size:`sm`,variant:`outline`,onClick:()=>l(e=>!e),children:c?`Enable`:`Disable`})]})})]})}exports.TooltipShowcase=s;

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

@@ -0,0 +1,113 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Tooltip as t } from "../../../components/ui/tooltip/index.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/tooltip/showcase.tsx
+var a = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+], o = "border-t border-[color:var(--aui-divider)] py-6";
+function s() {
+	let [s, c] = n.useState("top"), [l, u] = n.useState(!1);
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ r("section", {
+				className: "pb-6",
+				children: /* @__PURE__ */ i("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between",
+					children: [/* @__PURE__ */ i("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ r("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Tooltip"
+							}),
+							/* @__PURE__ */ r("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Explain quickly, then get out"
+							}),
+							/* @__PURE__ */ r("p", {
+								className: "mt-3 text-sm leading-6 aui-text-muted",
+								children: "Tooltip should answer one short question near the trigger without interrupting the screen."
+							})
+						]
+					}), /* @__PURE__ */ i("div", {
+						className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
+						children: [
+							/* @__PURE__ */ i("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ r("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Side"
+								}), /* @__PURE__ */ r("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong capitalize",
+									children: s
+								})]
+							}),
+							/* @__PURE__ */ i("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ r("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "State"
+								}), /* @__PURE__ */ r("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: l ? "Disabled" : "Enabled"
+								})]
+							}),
+							/* @__PURE__ */ i("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ r("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Use for"
+								}), /* @__PURE__ */ r("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: "Short hints"
+								})]
+							})
+						]
+					})]
+				})
+			}),
+			/* @__PURE__ */ r("section", {
+				className: o,
+				children: /* @__PURE__ */ r("div", {
+					className: "flex min-h-48 items-center justify-center rounded-[22px] border border-[color:var(--aui-divider)] p-5",
+					children: /* @__PURE__ */ r(t, {
+						content: "Copies the current docs example to your clipboard.",
+						side: s,
+						disabled: l,
+						children: /* @__PURE__ */ r(e, {
+							type: "button",
+							variant: "outline",
+							children: "Hover or focus me"
+						})
+					})
+				})
+			}),
+			/* @__PURE__ */ r("section", {
+				className: o,
+				children: /* @__PURE__ */ i("div", {
+					className: "flex flex-wrap gap-2",
+					children: [a.map((t) => /* @__PURE__ */ r(e, {
+						type: "button",
+						size: "sm",
+						variant: s === t ? "default" : "secondary",
+						onClick: () => c(t),
+						children: t
+					}, t)), /* @__PURE__ */ r(e, {
+						type: "button",
+						size: "sm",
+						variant: "outline",
+						onClick: () => u((e) => !e),
+						children: l ? "Enable" : "Disable"
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { s as TooltipShowcase };

package/dist/src/showcase/premium/tree-view/index.cjs

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

package/dist/src/showcase/premium/tree-view/index.js

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

package/dist/src/showcase/premium/tree-view/mock.cjs

@@ -0,0 +1,19 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { TreeView } from "tembro"
+
+export function Example() {
+  return (
+    <TreeView
+      items={[
+        {
+          key: "ui",
+          label: "UI",
+          children: [
+            { key: "buttons", label: "Buttons" },
+            { key: "inputs", label: "Inputs" },
+          ],
+        },
+      ]}
+      defaultExpandedKeys={["ui"]}
+    />
+  )
+}`,cliCommand:`npx tembro add tree-view`,highlights:[`Tree data model with nested children`,`Controlled and uncontrolled expand state support`,`Selectable nodes with active visual states`],scenarios:[{title:`Navigation map`,description:`Use for quick nested navigation structures.`},{title:`Docs sections`,description:`Represent nested headings and details.`}]};exports.treeViewMock=e;

package/dist/src/showcase/premium/tree-view/mock.js

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/tree-view/mock.ts
+var e = {
+	code: "import { TreeView } from \"tembro\"\n\nexport function Example() {\n  return (\n    <TreeView\n      items={[\n        {\n          key: \"ui\",\n          label: \"UI\",\n          children: [\n            { key: \"buttons\", label: \"Buttons\" },\n            { key: \"inputs\", label: \"Inputs\" },\n          ],\n        },\n      ]}\n      defaultExpandedKeys={[\"ui\"]}\n    />\n  )\n}",
+	cliCommand: "npx tembro add tree-view",
+	highlights: [
+		"Tree data model with nested children",
+		"Controlled and uncontrolled expand state support",
+		"Selectable nodes with active visual states"
+	],
+	scenarios: [{
+		title: "Navigation map",
+		description: "Use for quick nested navigation structures."
+	}, {
+		title: "Docs sections",
+		description: "Represent nested headings and details."
+	}]
+};
+//#endregion
+export { e as treeViewMock };

package/dist/src/showcase/premium/tree-view/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/display/tree-view.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");var a=[{key:`design`,label:`Design`,icon:(0,i.jsx)(r.FolderOpen,{className:`size-4`}),children:[{key:`components`,label:`Components`,icon:(0,i.jsx)(r.Folder,{className:`size-4`})},{key:`tokens`,label:`Tokens`,icon:(0,i.jsx)(r.File,{className:`size-4`})}]},{key:`dev`,label:`Development`,icon:(0,i.jsx)(r.Folder,{className:`size-4`}),children:[{key:`docs`,label:`Docs`,icon:(0,i.jsx)(r.File,{className:`size-4`})},{key:`release`,label:`Release`,icon:(0,i.jsx)(r.Folder,{className:`size-4`}),children:[{key:`notes`,label:`Notes`,icon:(0,i.jsx)(r.File,{className:`size-4`})}]}]}];function o(){let[e,r]=n.useState(`components`),[o,s]=n.useState([`design`,`dev`]);return(0,i.jsxs)(`div`,{className:`space-y-3`,children:[(0,i.jsx)(t.TreeView,{items:a,selectedKey:e,expandedKeys:o,onExpandedKeysChange:s,onSelect:n.useCallback(e=>{r(e.key)},[])}),(0,i.jsxs)(`div`,{className:`rounded-md border px-3 py-2 text-sm text-muted-foreground`,children:[`Selected: `,e]})]})}exports.TreeViewShowcase=o;

package/dist/src/showcase/premium/tree-view/showcase.js

@@ -0,0 +1,57 @@
+import { TreeView as e } from "../../../components/display/tree-view.js";
+import * as t from "react";
+import { File as n, Folder as r, FolderOpen as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/showcase/premium/tree-view/showcase.tsx
+var s = [{
+	key: "design",
+	label: "Design",
+	icon: /* @__PURE__ */ a(i, { className: "size-4" }),
+	children: [{
+		key: "components",
+		label: "Components",
+		icon: /* @__PURE__ */ a(r, { className: "size-4" })
+	}, {
+		key: "tokens",
+		label: "Tokens",
+		icon: /* @__PURE__ */ a(n, { className: "size-4" })
+	}]
+}, {
+	key: "dev",
+	label: "Development",
+	icon: /* @__PURE__ */ a(r, { className: "size-4" }),
+	children: [{
+		key: "docs",
+		label: "Docs",
+		icon: /* @__PURE__ */ a(n, { className: "size-4" })
+	}, {
+		key: "release",
+		label: "Release",
+		icon: /* @__PURE__ */ a(r, { className: "size-4" }),
+		children: [{
+			key: "notes",
+			label: "Notes",
+			icon: /* @__PURE__ */ a(n, { className: "size-4" })
+		}]
+	}]
+}];
+function c() {
+	let [n, r] = t.useState("components"), [i, c] = t.useState(["design", "dev"]);
+	return /* @__PURE__ */ o("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ a(e, {
+			items: s,
+			selectedKey: n,
+			expandedKeys: i,
+			onExpandedKeysChange: c,
+			onSelect: t.useCallback((e) => {
+				r(e.key);
+			}, [])
+		}), /* @__PURE__ */ o("div", {
+			className: "rounded-md border px-3 py-2 text-sm text-muted-foreground",
+			children: ["Selected: ", n]
+		})]
+	});
+}
+//#endregion
+export { c as TreeViewShowcase };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={textValue:`Azamat UI`,textareaValue:`Controlled preview content for the selected component.`,checked:!0,switchOn:!0,selectValue:`starter`,badgeVariant:`default`,cardCompact:!1,activeTab:`overview`};exports.defaultComponentDemoState=e;

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

@@ -0,0 +1,13 @@
+//#region src/showcase/premium/types.ts
+var e = {
+	textValue: "Azamat UI",
+	textareaValue: "Controlled preview content for the selected component.",
+	checked: !0,
+	switchOn: !0,
+	selectValue: "starter",
+	badgeVariant: "default",
+	cardCompact: !1,
+	activeTab: "overview"
+};
+//#endregion
+export { e as defaultComponentDemoState };

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

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

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

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

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

@@ -0,0 +1,13 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Blockquote, Heading, Mark, Text } from "tembro"
+
+export function Example() {
+  return (
+    <div className="space-y-2">
+      <Heading level={3}>Product page</Heading>
+      <Text muted>
+        <Mark>Typography</Mark> is part of every polished UI.
+      </Text>
+      <Blockquote>Keep hierarchy tight, readable, and reusable.</Blockquote>
+    </div>
+  )
+}`,cliCommand:`npx tembro add typography`,highlights:[`Heading hierarchy`,`Muted and default text sizes`,`Blockquote and mark patterns for content-heavy pages`],scenarios:[{title:`Docs pages`,description:`Use components for stable copy rhythm.`},{title:`Blog layouts`,description:`Keep large and small text consistent.`},{title:`Help center`,description:`Support spoilers and highlighted snippets.`}]};exports.typographyMock=e;

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

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/typography/mock.ts
+var e = {
+	code: "import { Blockquote, Heading, Mark, Text } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-2\">\n      <Heading level={3}>Product page</Heading>\n      <Text muted>\n        <Mark>Typography</Mark> is part of every polished UI.\n      </Text>\n      <Blockquote>Keep hierarchy tight, readable, and reusable.</Blockquote>\n    </div>\n  )\n}",
+	cliCommand: "npx tembro add typography",
+	highlights: [
+		"Heading hierarchy",
+		"Muted and default text sizes",
+		"Blockquote and mark patterns for content-heavy pages"
+	],
+	scenarios: [
+		{
+			title: "Docs pages",
+			description: "Use components for stable copy rhythm."
+		},
+		{
+			title: "Blog layouts",
+			description: "Keep large and small text consistent."
+		},
+		{
+			title: "Help center",
+			description: "Support spoilers and highlighted snippets."
+		}
+	]
+};
+//#endregion
+export { e as typographyMock };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/display/typography.cjs");let t=require("react/jsx-runtime");function n(){return(0,t.jsxs)(`div`,{className:`space-y-4`,children:[(0,t.jsx)(e.Heading,{level:1,children:`Typography Surface`}),(0,t.jsx)(e.Text,{size:`lg`,muted:!0,children:`This page shows practical text primitives that scale from copy to section copy and long-form notes.`}),(0,t.jsx)(e.Heading,{level:2,children:`Status`}),(0,t.jsxs)(e.Text,{children:[`You can emphasize words with `,(0,t.jsx)(e.Mark,{children:`Mark`}),` while keeping semantic text sizes.`]}),(0,t.jsx)(e.Blockquote,{children:`Readable prose starts from stable hierarchy, not from random utility classes.`}),(0,t.jsxs)(e.Spoiler,{children:[(0,t.jsx)(e.SpoilerSummary,{children:`Expand typography details`}),(0,t.jsxs)(`div`,{className:`mt-2 space-y-2 text-sm text-muted-foreground`,children:[(0,t.jsx)(e.Text,{size:`sm`,children:`Use level + muted controls for rhythm across pages.`}),(0,t.jsx)(e.Text,{children:`Use blockquotes for citations and customer notes.`})]})]})]})}exports.TypographyShowcase=n;

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

@@ -0,0 +1,38 @@
+import { Blockquote as e, Heading as t, Mark as n, Spoiler as r, SpoilerSummary as i, Text as a } from "../../../components/display/typography.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/showcase/premium/typography/showcase.tsx
+function c() {
+	return /* @__PURE__ */ s("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ o(t, {
+				level: 1,
+				children: "Typography Surface"
+			}),
+			/* @__PURE__ */ o(a, {
+				size: "lg",
+				muted: !0,
+				children: "This page shows practical text primitives that scale from copy to section copy and long-form notes."
+			}),
+			/* @__PURE__ */ o(t, {
+				level: 2,
+				children: "Status"
+			}),
+			/* @__PURE__ */ s(a, { children: [
+				"You can emphasize words with ",
+				/* @__PURE__ */ o(n, { children: "Mark" }),
+				" while keeping semantic text sizes."
+			] }),
+			/* @__PURE__ */ o(e, { children: "Readable prose starts from stable hierarchy, not from random utility classes." }),
+			/* @__PURE__ */ s(r, { children: [/* @__PURE__ */ o(i, { children: "Expand typography details" }), /* @__PURE__ */ s("div", {
+				className: "mt-2 space-y-2 text-sm text-muted-foreground",
+				children: [/* @__PURE__ */ o(a, {
+					size: "sm",
+					children: "Use level + muted controls for rhythm across pages."
+				}), /* @__PURE__ */ o(a, { children: "Use blockquotes for citations and customer notes." })]
+			})] })
+		]
+	});
+}
+//#endregion
+export { c as TypographyShowcase };

package/dist/src/showcase/premium/virtual-list/index.cjs

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

package/dist/src/showcase/premium/virtual-list/index.js

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

package/dist/src/showcase/premium/virtual-list/mock.cjs

@@ -0,0 +1,18 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { VirtualList } from "tembro"
+
+const events = Array.from({ length: 10000 }, (_, index) => ({
+  id: index + 1,
+  title: \`Audit event \${index + 1}\`,
+}))
+
+export function Example() {
+  return (
+    <VirtualList
+      items={events}
+      height={420}
+      estimateSize={56}
+      getItemKey={(event) => event.id}
+      renderItem={(event) => <div>{event.title}</div>}
+    />
+  )
+}`,cliCommand:`npx tembro add virtual-list`,highlights:[`Renders only visible DOM nodes`,`Dynamic row measurement and overscan`,`Stable item keys and accessible set metadata`],scenarios:[{title:`Audit log`,description:`Keep tens of thousands of events responsive in a fixed viewport.`},{title:`Search results`,description:`Render large result sets without mounting every result card.`}]};exports.virtualListMock=e;

package/dist/src/showcase/premium/virtual-list/mock.js

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/virtual-list/mock.ts
+var e = {
+	code: "import { VirtualList } from \"tembro\"\n\nconst events = Array.from({ length: 10000 }, (_, index) => ({\n  id: index + 1,\n  title: `Audit event ${index + 1}`,\n}))\n\nexport function Example() {\n  return (\n    <VirtualList\n      items={events}\n      height={420}\n      estimateSize={56}\n      getItemKey={(event) => event.id}\n      renderItem={(event) => <div>{event.title}</div>}\n    />\n  )\n}",
+	cliCommand: "npx tembro add virtual-list",
+	highlights: [
+		"Renders only visible DOM nodes",
+		"Dynamic row measurement and overscan",
+		"Stable item keys and accessible set metadata"
+	],
+	scenarios: [{
+		title: "Audit log",
+		description: "Keep tens of thousands of events responsive in a fixed viewport."
+	}, {
+		title: "Search results",
+		description: "Render large result sets without mounting every result card."
+	}]
+};
+//#endregion
+export { e as virtualListMock };

package/dist/src/showcase/premium/virtual-list/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/display/virtual-list.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=Array.from({length:1e4},(e,t)=>({id:t+1,title:`Audit event ${t+1}`,actor:[`Azamat`,`Madina`,`Jasur`,`Nodira`][t%4],tone:t%7==0?`Review`:`Completed`}));function o(){let[e,o]=r.useState(`Calculating visible range…`);return(0,i.jsxs)(`div`,{className:`space-y-3`,children:[(0,i.jsxs)(`div`,{className:`flex items-center justify-between gap-3 text-sm text-muted-foreground`,children:[(0,i.jsx)(`span`,{children:`10,000 records`}),(0,i.jsx)(`span`,{children:e})]}),(0,i.jsx)(n.VirtualList,{items:a,height:420,estimateSize:58,getItemKey:e=>e.id,onRangeChange:({startIndex:e,endIndex:t})=>{o(`Mounted window: ${e+1}–${t+1}`)},renderItem:e=>(0,i.jsxs)(`div`,{className:`flex min-h-14 items-center justify-between gap-3 rounded-lg border bg-card px-4 py-2.5 shadow-sm`,children:[(0,i.jsxs)(`div`,{className:`min-w-0`,children:[(0,i.jsx)(`div`,{className:`truncate text-sm font-medium`,children:e.title}),(0,i.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[`Actor: `,e.actor]})]}),(0,i.jsx)(t.Badge,{variant:e.tone===`Review`?`outline`:`secondary`,children:e.tone})]})})]})}exports.VirtualListShowcase=o;