tembro 1.0.0

package/dist/showcase/premium/metric-grid/showcase.d.ts

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

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

@@ -0,0 +1,65 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { MetricGrid as t } from "../../../components/display/metric-grid.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/metric-grid/showcase.tsx
+var a = [
+	{
+		key: "users",
+		label: "Users",
+		value: "2,410",
+		description: "Last 30 days",
+		tone: "success"
+	},
+	{
+		key: "revenue",
+		label: "Revenue",
+		value: "$132k",
+		description: "Compared with last month",
+		tone: "info"
+	},
+	{
+		key: "errors",
+		label: "Errors",
+		value: "3",
+		description: "Immediate follow up",
+		tone: "danger"
+	},
+	{
+		key: "churn",
+		label: "Churn",
+		value: "1.8%",
+		description: "Within target",
+		tone: "warning"
+	}
+], o = [
+	2,
+	3,
+	4
+];
+function s({ mode: s }) {
+	let [c, l] = n.useState(!1), [u, d] = n.useState(3);
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-4",
+		children: [s === "playground" ? /* @__PURE__ */ i("div", {
+			className: "flex flex-wrap gap-2",
+			children: [/* @__PURE__ */ r(e, {
+				size: "sm",
+				variant: c ? "outline" : "default",
+				onClick: () => l((e) => !e),
+				children: c ? "Use spacious" : "Use compact"
+			}), o.map((t) => /* @__PURE__ */ i(e, {
+				size: "sm",
+				variant: u === t ? "default" : "outline",
+				onClick: () => d(t),
+				children: [t, " cols"]
+			}, t))]
+		}) : null, /* @__PURE__ */ r(t, {
+			items: a,
+			columns: u,
+			compact: c
+		})]
+	});
+}
+//#endregion
+export { s as MetricGridShowcase };

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

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

package/dist/showcase/premium/modal-shell/index.d.ts

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

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

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

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

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

package/dist/showcase/premium/modal-shell/mock.d.ts

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

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

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

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

package/dist/showcase/premium/modal-shell/showcase.d.ts

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

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

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

package/dist/showcase/premium/money-input/index.cjs

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

package/dist/showcase/premium/money-input/index.d.ts

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

package/dist/showcase/premium/money-input/index.js

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

package/dist/showcase/premium/money-input/mock.cjs

@@ -0,0 +1,27 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { MoneyInput } from "@/index"
+
+export function Example() {
+  const [value, setValue] = useState<number | null>(2990.5)
+  const [raw, setRaw] = useState("$2,990.50")
+
+  return (
+    <div className="space-y-3">
+      <MoneyInput
+        value={value}
+        onValueChange={(nextValue, rawValue) => {
+          setValue(nextValue)
+          setRaw(rawValue)
+        }}
+        prefix="$"
+        inputMode="decimal"
+        step={0.5}
+      />
+      <p className="text-sm aui-text-subtle">
+        Numeric value: <strong>{value === null ? "invalid" : value}</strong>
+      </p>
+      <p className="text-sm aui-text-muted">Raw input: {raw}</p>
+      <p className="text-sm aui-text-muted">Use inputMode to match expected currency input source.</p>
+    </div>
+  )
+}`,htmlCode:`<label for="money">Budget</label><div>$<input id="money" inputmode="decimal" type="text" /></div>`,cliCommand:`npx tembro add money-input`,highlights:[`Currency prefix/suffix`,`Numeric payload`,`Invalid text handling`,`Custom keyboard mode`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Pricing`,description:`Capture billing amounts with stable parsing and formatting behavior.`},{title:`Raw display vs parsed value`,description:`Keep display string separate from numeric payload.`},{title:`Invalid input`,description:`Handle temporary invalid values while editing before form submit.`},{title:`Negative guard`,description:`Prevent or allow negatives based on financial rules.`}],capabilityNotes:["Use `onValueChange` for canonical numeric value and raw typed value.","Pair `MoneyInput` with schema validation to reject negative or extreme values.",`Use prefix/suffix that matches locale and accounting conventions.`,`In multi-currency systems, normalize and convert right after parsing.`]};exports.moneyInputMock=e;

package/dist/showcase/premium/money-input/mock.d.ts

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

package/dist/showcase/premium/money-input/mock.js

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/money-input/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { MoneyInput } from \"@/index\"\n\nexport function Example() {\n  const [value, setValue] = useState<number | null>(2990.5)\n  const [raw, setRaw] = useState(\"$2,990.50\")\n\n  return (\n    <div className=\"space-y-3\">\n      <MoneyInput\n        value={value}\n        onValueChange={(nextValue, rawValue) => {\n          setValue(nextValue)\n          setRaw(rawValue)\n        }}\n        prefix=\"$\"\n        inputMode=\"decimal\"\n        step={0.5}\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Numeric value: <strong>{value === null ? \"invalid\" : value}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">Raw input: {raw}</p>\n      <p className=\"text-sm aui-text-muted\">Use inputMode to match expected currency input source.</p>\n    </div>\n  )\n}",
+	htmlCode: "<label for=\"money\">Budget</label><div>$<input id=\"money\" inputmode=\"decimal\" type=\"text\" /></div>",
+	cliCommand: "npx tembro add money-input",
+	highlights: [
+		"Currency prefix/suffix",
+		"Numeric payload",
+		"Invalid text handling",
+		"Custom keyboard mode"
+	],
+	relatedBlockSlugs: [
+		"settings-form",
+		"users-table",
+		"crm-dashboard"
+	],
+	scenarios: [
+		{
+			title: "Pricing",
+			description: "Capture billing amounts with stable parsing and formatting behavior."
+		},
+		{
+			title: "Raw display vs parsed value",
+			description: "Keep display string separate from numeric payload."
+		},
+		{
+			title: "Invalid input",
+			description: "Handle temporary invalid values while editing before form submit."
+		},
+		{
+			title: "Negative guard",
+			description: "Prevent or allow negatives based on financial rules."
+		}
+	],
+	capabilityNotes: [
+		"Use `onValueChange` for canonical numeric value and raw typed value.",
+		"Pair `MoneyInput` with schema validation to reject negative or extreme values.",
+		"Use prefix/suffix that matches locale and accounting conventions.",
+		"In multi-currency systems, normalize and convert right after parsing."
+	]
+};
+//#endregion
+export { e as moneyInputMock };

package/dist/showcase/premium/money-input/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/inputs/money-input.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(){let[r,i]=(0,t.useState)(125.75);return(0,n.jsxs)(`div`,{className:`space-y-3`,children:[(0,n.jsx)(e.MoneyInput,{value:r,onValueChange:e=>i(e),prefix:`$`}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Parsed amount: `,r===null?`invalid`:`$${r.toFixed(2)}`]})]})}exports.MoneyInputShowcase=r;

package/dist/showcase/premium/money-input/showcase.d.ts

@@ -0,0 +1 @@
+export declare function MoneyInputShowcase(): import("react").JSX.Element;

package/dist/showcase/premium/money-input/showcase.js

@@ -0,0 +1,20 @@
+import { MoneyInput as e } from "../../../components/inputs/money-input.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/money-input/showcase.tsx
+function i() {
+	let [i, a] = t(125.75);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ n(e, {
+			value: i,
+			onValueChange: (e) => a(e),
+			prefix: "$"
+		}), /* @__PURE__ */ r("p", {
+			className: "aui-text-subtle text-sm",
+			children: ["Parsed amount: ", i === null ? "invalid" : `$${i.toFixed(2)}`]
+		})]
+	});
+}
+//#endregion
+export { i as MoneyInputShowcase };

package/dist/showcase/premium/navigation-menu/index.cjs

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

package/dist/showcase/premium/navigation-menu/index.d.ts

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

package/dist/showcase/premium/navigation-menu/index.js

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

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

@@ -0,0 +1,13 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList } from "@/index"
+
+export function Example() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#" active>Home</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}`,cliCommand:`npx tembro add navigation-menu`,highlights:[`Accessible anchor-style navigation links`,`Active state is handled via prop`,`Simple composition with list and item primitives`],scenarios:[{title:`Landing header`,description:`Build top navigation with clear active route feedback.`},{title:`Docs menu`,description:`Use for horizontally aligned documentation categories.`}]};exports.navigationMenuMock=e;

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

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

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

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/navigation-menu/mock.ts
+var e = {
+	code: "import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList } from \"@/index\"\n\nexport function Example() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuLink href=\"#\" active>Home</NavigationMenuLink>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}",
+	cliCommand: "npx tembro add navigation-menu",
+	highlights: [
+		"Accessible anchor-style navigation links",
+		"Active state is handled via prop",
+		"Simple composition with list and item primitives"
+	],
+	scenarios: [{
+		title: "Landing header",
+		description: "Build top navigation with clear active route feedback."
+	}, {
+		title: "Docs menu",
+		description: "Use for horizontally aligned documentation categories."
+	}]
+};
+//#endregion
+export { e as navigationMenuMock };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/modern/navigation-menu.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i=[`Products`,`Solutions`,`Resources`,`Pricing`];function a(){let[e,a]=n.useState(i[0]);return(0,r.jsxs)(`div`,{className:`space-y-3`,children:[(0,r.jsx)(t.NavigationMenu,{children:(0,r.jsx)(t.NavigationMenuList,{children:i.map(n=>(0,r.jsx)(t.NavigationMenuItem,{children:(0,r.jsx)(t.NavigationMenuLink,{href:`#`,active:e===n,onClick:e=>{e.preventDefault(),a(n)},children:n})},n))})}),(0,r.jsxs)(`p`,{className:`text-sm text-muted-foreground`,children:[`Active segment: `,e]})]})}exports.NavigationMenuShowcase=a;

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

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

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

@@ -0,0 +1,29 @@
+import { NavigationMenu as e, NavigationMenuItem as t, NavigationMenuLink as n, NavigationMenuList as r } from "../../../components/modern/navigation-menu.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/showcase/premium/navigation-menu/showcase.tsx
+var s = [
+	"Products",
+	"Solutions",
+	"Resources",
+	"Pricing"
+];
+function c() {
+	let [c, l] = i.useState(s[0]);
+	return /* @__PURE__ */ o("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ a(e, { children: /* @__PURE__ */ a(r, { children: s.map((e) => /* @__PURE__ */ a(t, { children: /* @__PURE__ */ a(n, {
+			href: "#",
+			active: c === e,
+			onClick: (t) => {
+				t.preventDefault(), l(e);
+			},
+			children: e
+		}) }, e)) }) }), /* @__PURE__ */ o("p", {
+			className: "text-sm text-muted-foreground",
+			children: ["Active segment: ", c]
+		})]
+	});
+}
+//#endregion
+export { c as NavigationMenuShowcase };

package/dist/showcase/premium/notification-center/index.cjs

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

package/dist/showcase/premium/notification-center/index.d.ts

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

package/dist/showcase/premium/notification-center/index.js

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

package/dist/showcase/premium/notification-center/mock.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { NotificationCenter } from "tembro"
+
+export function Example() {
+  const [items, setItems] = React.useState([
+    { id: "1", title: "Invoice paid", description: "Acme Growth settled invoice #2048.", time: "2m ago", read: false },
+    { id: "2", title: "Deployment ready", description: "Release candidate passed checks.", time: "12m ago", read: true },
+  ])
+
+  return (
+    <NotificationCenter
+      notifications={items}
+      onMarkAllRead={() => setItems((current) => current.map((item) => ({ ...item, read: true })))}
+    />
+  )
+}`,highlights:[`Unread count badge`,`Mark all read action`,`Popover-based notification list`,`Compact header action surface`],scenarios:[{title:`Workspace updates`,description:`Show billing, deployment, or access events in one compact center.`},{title:`Admin dashboard`,description:`Expose unread tasks without forcing a full dedicated route.`},{title:`Operational alerts`,description:`Let users clear or inspect events directly from the header.`}],capabilityNotes:[`Notification center is best for short, recent events that require optional follow-up.`,`Unread count should reflect genuinely actionable items.`,`Avoid treating this as a dumping ground for every system message.`]};exports.notificationCenterMock=e;

package/dist/showcase/premium/notification-center/mock.d.ts

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

package/dist/showcase/premium/notification-center/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/notification-center/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { NotificationCenter } from \"tembro\"\n\nexport function Example() {\n  const [items, setItems] = React.useState([\n    { id: \"1\", title: \"Invoice paid\", description: \"Acme Growth settled invoice #2048.\", time: \"2m ago\", read: false },\n    { id: \"2\", title: \"Deployment ready\", description: \"Release candidate passed checks.\", time: \"12m ago\", read: true },\n  ])\n\n  return (\n    <NotificationCenter\n      notifications={items}\n      onMarkAllRead={() => setItems((current) => current.map((item) => ({ ...item, read: true })))}\n    />\n  )\n}",
+	highlights: [
+		"Unread count badge",
+		"Mark all read action",
+		"Popover-based notification list",
+		"Compact header action surface"
+	],
+	scenarios: [
+		{
+			title: "Workspace updates",
+			description: "Show billing, deployment, or access events in one compact center."
+		},
+		{
+			title: "Admin dashboard",
+			description: "Expose unread tasks without forcing a full dedicated route."
+		},
+		{
+			title: "Operational alerts",
+			description: "Let users clear or inspect events directly from the header."
+		}
+	],
+	capabilityNotes: [
+		"Notification center is best for short, recent events that require optional follow-up.",
+		"Unread count should reflect genuinely actionable items.",
+		"Avoid treating this as a dumping ground for every system message."
+	]
+};
+//#endregion
+export { e as notificationCenterMock };

package/dist/showcase/premium/notification-center/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/notifications/notification-center.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,o=[{id:`1`,title:`Invoice paid`,description:`Acme Growth settled invoice #2048.`,time:`2m ago`,read:!1},{id:`2`,title:`Deployment ready`,description:`Release candidate passed checks and waits for promotion.`,time:`12m ago`,read:!1},{id:`3`,title:`Member invited`,description:`Operations workspace access was sent to Dilshod.`,time:`1h ago`,read:!0}];function s({mode:e}){let[s,c]=r.useState(o),l=s.filter(e=>!e.read).length;return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start 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:`Header utility`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`NotificationCenter should summarize recent action without becoming a second inbox`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This control works when unread counts are honest and the list stays short, recent, and directly actionable.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Unread count`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Popover feed`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Live notification trigger`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Open the bell and inspect unread items.`})]}),(0,i.jsx)(n.NotificationCenter,{notifications:s,onMarkAllRead:()=>c(e=>e.map(e=>({...e,read:!0}))),onNotificationClick:e=>c(t=>t.map(t=>t.id===e.id?{...t,read:!0}:t))})]})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Unread items`}),(0,i.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:l})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Usage note`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Put only high-signal events here. If users need filters, threads, or archives, that usually means they need a dedicated notifications route.`})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:"Bell ichidagi itemga bosilsa read bo‘ladi, `Mark all read` esa hammasini tozalaydi."})}):null]})}exports.NotificationCenterShowcase=s;

package/dist/showcase/premium/notification-center/showcase.d.ts

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