tembro 1.0.0

package/dist/showcase/premium/list/showcase.js

@@ -0,0 +1,103 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { Avatar as t } from "../../../components/display/avatar.js";
+import { List as n } from "../../../components/display/list.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/list/showcase.tsx
+var a = "border-t border-[color:var(--aui-divider)] py-6", o = [
+	{
+		key: "invoice",
+		title: "Invoice #4821 review",
+		description: "Finance approval is still waiting on updated tax evidence.",
+		avatar: /* @__PURE__ */ r(t, {
+			name: "Finance Team",
+			size: "sm",
+			shape: "rounded"
+		}),
+		extra: /* @__PURE__ */ r(e, {
+			variant: "outline",
+			children: "Pending"
+		})
+	},
+	{
+		key: "deploy",
+		title: "Release publish window",
+		description: "Documentation and component demo checks passed for the next deploy.",
+		avatar: /* @__PURE__ */ r(t, {
+			name: "Release Ops",
+			size: "sm"
+		}),
+		extra: /* @__PURE__ */ r(e, {
+			variant: "secondary",
+			children: "Ready"
+		})
+	},
+	{
+		key: "design",
+		title: "Design audit feedback",
+		description: "Spacing and token inconsistencies were reduced across the public catalog.",
+		avatar: /* @__PURE__ */ r(t, {
+			name: "Design",
+			size: "sm"
+		}),
+		extra: /* @__PURE__ */ r(e, {
+			variant: "outline",
+			children: "3 notes"
+		})
+	}
+];
+function s() {
+	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: "List is for compact operational rows"
+				}),
+				/* @__PURE__ */ r("p", {
+					className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
+					children: "Use it when a full table would be too heavy, but a simple stack of cards would waste space."
+				})
+			]
+		}), /* @__PURE__ */ r("section", {
+			className: a,
+			children: /* @__PURE__ */ i("div", {
+				className: "grid gap-6 xl:grid-cols-[1fr_360px]",
+				children: [/* @__PURE__ */ i("div", { children: [
+					/* @__PURE__ */ r("p", {
+						className: "text-lg font-semibold aui-text-strong",
+						children: "Operational queue"
+					}),
+					/* @__PURE__ */ r("p", {
+						className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
+						children: "The exported List keeps title, context and status aligned without forcing table columns."
+					}),
+					/* @__PURE__ */ r(n, {
+						className: "mt-5",
+						items: o
+					})
+				] }), /* @__PURE__ */ i("div", {
+					className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-semibold aui-text-strong",
+						children: "Guidance"
+					}), /* @__PURE__ */ i("div", {
+						className: "mt-3 space-y-3 text-sm leading-6 aui-text-muted",
+						children: [
+							/* @__PURE__ */ r("p", { children: "Use List when content is read top-to-bottom and each row can tolerate flexible height." }),
+							/* @__PURE__ */ r("p", { children: "If sorting, bulk actions, or stable columns become important, move up to DataTable." }),
+							/* @__PURE__ */ r("p", { children: "The `extra` slot should stay compact so the title remains the strongest visual anchor." })
+						]
+					})]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { s as ListShowcase };

package/dist/showcase/premium/loading-state/index.cjs

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

package/dist/showcase/premium/loading-state/index.d.ts

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

package/dist/showcase/premium/loading-state/index.js

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

package/dist/showcase/premium/loading-state/mock.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { LoadingState } from "tembro"
+
+export function Example() {
+  return <LoadingState label="Loading metrics" description="Preparing dashboard widgets and chart data." />
+}`,highlights:[`Simple loading copy`,`Section-level placeholder`,`Can be combined with skeletons`,`Suitable for overlay and inline usage`],scenarios:[{title:`Data fetch`,description:`Show while loading table or card-level content.`},{title:`Background sync`,description:`Display while async actions are in progress.`},{title:`Upload wait`,description:`Use between step transitions in wizards.`}],capabilityNotes:[`Keep descriptions specific to what users are waiting for.`,`Use one source of truth for loading copy across sections.`,`Prefer replacing entire section with loading state over mixing partial stale data.`]};exports.loadingStateMock=e;

package/dist/showcase/premium/loading-state/mock.d.ts

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

package/dist/showcase/premium/loading-state/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/loading-state/mock.ts
+var e = {
+	code: "import { LoadingState } from \"tembro\"\n\nexport function Example() {\n  return <LoadingState label=\"Loading metrics\" description=\"Preparing dashboard widgets and chart data.\" />\n}",
+	highlights: [
+		"Simple loading copy",
+		"Section-level placeholder",
+		"Can be combined with skeletons",
+		"Suitable for overlay and inline usage"
+	],
+	scenarios: [
+		{
+			title: "Data fetch",
+			description: "Show while loading table or card-level content."
+		},
+		{
+			title: "Background sync",
+			description: "Display while async actions are in progress."
+		},
+		{
+			title: "Upload wait",
+			description: "Use between step transitions in wizards."
+		}
+	],
+	capabilityNotes: [
+		"Keep descriptions specific to what users are waiting for.",
+		"Use one source of truth for loading copy across sections.",
+		"Prefer replacing entire section with loading state over mixing partial stale data."
+	]
+};
+//#endregion
+export { e as loadingStateMock };

package/dist/showcase/premium/loading-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/ui/badge/index.cjs"),r=require("../../../components/feedback/loading-state.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[`Loading metrics`,`Loading table`,`Loading details`,`Loading export`],s=[`Preparing dashboard widgets and chart data.`,`Fetching list rows with filters applied.`,`Waiting for content details from the API.`,`Generating a local export file.`];function c({mode:e}){let[c,l]=i.useState(0),[u,d]=i.useState(e===`playground`);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Pending work`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Loading state should explain what is happening`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`The label and description should tell the user which part of the page is waiting and why. Generic loading with no context is weak documentation.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Scoped loading`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Clear label`})]})]})}),e===`playground`?(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>d(e=>!e),children:u?`Hide secondary`:`Show secondary`}),o.map((e,n)=>(0,a.jsx)(t.Button,{size:`sm`,variant:c===n?`default`:`outline`,onClick:()=>l(n),children:e},e))]}):null,(0,a.jsx)(r.LoadingState,{label:o[c],description:s[c]}),u?(0,a.jsx)(r.LoadingState,{label:`${o[c]} (compact)`,description:`This is a second loading area inside the same page.`}):null]})}exports.LoadingStateShowcase=c;

package/dist/showcase/premium/loading-state/showcase.d.ts

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

package/dist/showcase/premium/loading-state/showcase.js

@@ -0,0 +1,83 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { LoadingState as n } from "../../../components/feedback/loading-state.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/loading-state/showcase.tsx
+var o = [
+	"Loading metrics",
+	"Loading table",
+	"Loading details",
+	"Loading export"
+], s = [
+	"Preparing dashboard widgets and chart data.",
+	"Fetching list rows with filters applied.",
+	"Waiting for content details from the API.",
+	"Generating a local export file."
+];
+function c({ mode: c }) {
+	let [l, u] = r.useState(0), [d, f] = r.useState(c === "playground");
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ i("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ a("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ i("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Pending work"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Loading state should explain what is happening"
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "The label and description should tell the user which part of the page is waiting and why. Generic loading with no context is weak documentation."
+							})
+						]
+					}), /* @__PURE__ */ a("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Scoped loading"
+						}), /* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Clear label"
+						})]
+					})]
+				})
+			}),
+			c === "playground" ? /* @__PURE__ */ a("div", {
+				className: "flex flex-wrap gap-2",
+				children: [/* @__PURE__ */ i(e, {
+					size: "sm",
+					variant: "outline",
+					onClick: () => f((e) => !e),
+					children: d ? "Hide secondary" : "Show secondary"
+				}), o.map((t, n) => /* @__PURE__ */ i(e, {
+					size: "sm",
+					variant: l === n ? "default" : "outline",
+					onClick: () => u(n),
+					children: t
+				}, t))]
+			}) : null,
+			/* @__PURE__ */ i(n, {
+				label: o[l],
+				description: s[l]
+			}),
+			d ? /* @__PURE__ */ i(n, {
+				label: `${o[l]} (compact)`,
+				description: "This is a second loading area inside the same page."
+			}) : null
+		]
+	});
+}
+//#endregion
+export { c as LoadingStateShowcase };

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { MaskedInput } from "@/index"
+
+export function Example() {
+  const [value, setValue] = useState("AA-123")
+
+  return (
+    <MaskedInput
+      value={value}
+      onValueChange={(nextValue) => setValue(nextValue)}
+      mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, "$1-")}
+      placeholder="AA-123"
+    />
+  )
+}
+`,htmlCode:`<label for="masked">Referral code</label><input id="masked" type="text" value="AA-123" placeholder="AA-123" />`,cliCommand:`npx tembro add masked-input`,highlights:[`Mask callback runs on each edit`,`Uppercase and slicing are explicit formatting assumptions`,`Raw value assumptions should be mirrored in validation and submit payloads`,`Use a deterministic placeholder that matches the mask contract`],relatedBlockSlugs:[`settings-form`,`crm-dashboard`,`auth-sign-in`],scenarios:[{title:`Referral codes`,description:`Use fixed pattern for short identifiers while typing.`},{title:`License keys`,description:`Apply grouping with a strict uppercase format and controlled length.`},{title:`Display normalization`,description:`Normalize display while preserving form-level expectations.`},{title:`Validation gate`,description:`Reject submission when value shape does not match mask contract.`}],capabilityNotes:[`Document whether callback receives raw text or already masked text.`,`If you need raw payload, sanitize before submit and keep canonical storage layer separate.`,`Use one mask function source for both form and API submission paths.`,`Treat partially typed values as invalid until user completion conditions are met.`]};exports.maskedInputMock=e;

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

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

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

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/masked-input/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { MaskedInput } from \"@/index\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"AA-123\")\n\n  return (\n    <MaskedInput\n      value={value}\n      onValueChange={(nextValue) => setValue(nextValue)}\n      mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, \"$1-\")}\n      placeholder=\"AA-123\"\n    />\n  )\n}\n",
+	htmlCode: "<label for=\"masked\">Referral code</label><input id=\"masked\" type=\"text\" value=\"AA-123\" placeholder=\"AA-123\" />",
+	cliCommand: "npx tembro add masked-input",
+	highlights: [
+		"Mask callback runs on each edit",
+		"Uppercase and slicing are explicit formatting assumptions",
+		"Raw value assumptions should be mirrored in validation and submit payloads",
+		"Use a deterministic placeholder that matches the mask contract"
+	],
+	relatedBlockSlugs: [
+		"settings-form",
+		"crm-dashboard",
+		"auth-sign-in"
+	],
+	scenarios: [
+		{
+			title: "Referral codes",
+			description: "Use fixed pattern for short identifiers while typing."
+		},
+		{
+			title: "License keys",
+			description: "Apply grouping with a strict uppercase format and controlled length."
+		},
+		{
+			title: "Display normalization",
+			description: "Normalize display while preserving form-level expectations."
+		},
+		{
+			title: "Validation gate",
+			description: "Reject submission when value shape does not match mask contract."
+		}
+	],
+	capabilityNotes: [
+		"Document whether callback receives raw text or already masked text.",
+		"If you need raw payload, sanitize before submit and keep canonical storage layer separate.",
+		"Use one mask function source for both form and API submission paths.",
+		"Treat partially typed values as invalid until user completion conditions are met."
+	]
+};
+//#endregion
+export { e as maskedInputMock };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/inputs/masked-input.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)(`AA-123`);return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.MaskedInput,{value:i,onValueChange:e=>a(e),mask:e=>e.toUpperCase().slice(0,6).replace(/(.{3})(?=.)/,`$1-`),placeholder:`AA-123`}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Display value: `,i||`—`]}),(0,n.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Task focus: fixed-format field where raw/display value assumptions should be documented.`}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.MaskedInputShowcase=r;

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

@@ -0,0 +1,2 @@
+import type { ComponentDemoProps } from "../types";
+export declare function MaskedInputShowcase({ mode }: ComponentDemoProps): import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+import { MaskedInput as e } from "../../../components/inputs/masked-input.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/masked-input/showcase.tsx
+function i({ mode: i }) {
+	let [a, o] = t("AA-123");
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ n(e, {
+				value: a,
+				onValueChange: (e) => o(e),
+				mask: (e) => e.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, "$1-"),
+				placeholder: "AA-123"
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "aui-text-subtle text-sm",
+				children: ["Display value: ", a || "—"]
+			}),
+			/* @__PURE__ */ n("p", {
+				className: "aui-text-muted text-sm",
+				children: "Task focus: fixed-format field where raw/display value assumptions should be documented."
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "aui-text-muted text-sm",
+				children: ["Mode: ", i]
+			})
+		]
+	});
+}
+//#endregion
+export { i as MaskedInputShowcase };

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { MentionInput } from "@/index"
+
+export function Example() {
+  return (
+    <MentionInput
+      value="Assign @alice and @bob."
+      options={[{ label: "Alice", value: "alice" }, { label: "Bob", value: "bob" }]}
+      onValueChange={(value) => console.log(value)}
+    />
+  )
+}`,cliCommand:`npx tembro add mention-input`,highlights:[`Trigger-based suggestion filtering`,`Keyboard navigation for suggestions`,`Auto insert with controlled value`],scenarios:[{title:`Comments`,description:`Mention teammates in internal notes.`},{title:`Chat input`,description:`Add quick user references while composing.`}]};exports.mentionInputMock=e;

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

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

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

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/mention-input/mock.ts
+var e = {
+	code: "import { MentionInput } from \"@/index\"\n\nexport function Example() {\n  return (\n    <MentionInput\n      value=\"Assign @alice and @bob.\"\n      options={[{ label: \"Alice\", value: \"alice\" }, { label: \"Bob\", value: \"bob\" }]}\n      onValueChange={(value) => console.log(value)}\n    />\n  )\n}",
+	cliCommand: "npx tembro add mention-input",
+	highlights: [
+		"Trigger-based suggestion filtering",
+		"Keyboard navigation for suggestions",
+		"Auto insert with controlled value"
+	],
+	scenarios: [{
+		title: "Comments",
+		description: "Mention teammates in internal notes."
+	}, {
+		title: "Chat input",
+		description: "Add quick user references while composing."
+	}]
+};
+//#endregion
+export { e as mentionInputMock };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/inputs/mention-input.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i=[{label:`Alice`,value:`alice`},{label:`Bob`,value:`bob`},{label:`Charlie`,value:`charlie`}];function a(){let[e,a]=n.useState(`Hi @alice, please review this task.`),[o,s]=n.useState([]);return(0,r.jsxs)(`div`,{className:`space-y-3`,children:[(0,r.jsx)(t.MentionInput,{value:e,options:i,onValueChange:a,onMentionSelect:e=>s(t=>[...new Set([...t,e])])}),(0,r.jsxs)(`p`,{className:`text-sm text-muted-foreground`,children:[`Inserted mentions: `,o.join(`, `)||`None`]})]})}exports.MentionInputShowcase=a;

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

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

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

@@ -0,0 +1,35 @@
+import { MentionInput as e } from "../../../components/inputs/mention-input.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/mention-input/showcase.tsx
+var i = [
+	{
+		label: "Alice",
+		value: "alice"
+	},
+	{
+		label: "Bob",
+		value: "bob"
+	},
+	{
+		label: "Charlie",
+		value: "charlie"
+	}
+];
+function a() {
+	let [a, o] = t.useState("Hi @alice, please review this task."), [s, c] = t.useState([]);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ n(e, {
+			value: a,
+			options: i,
+			onValueChange: o,
+			onMentionSelect: (e) => c((t) => [...new Set([...t, e])])
+		}), /* @__PURE__ */ r("p", {
+			className: "text-sm text-muted-foreground",
+			children: ["Inserted mentions: ", s.join(", ") || "None"]
+		})]
+	});
+}
+//#endregion
+export { a as MentionInputShowcase };

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger } from "@/index"
+
+export function Example() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>New project</MenubarItem>
+          <MenubarItem>Open</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}`,cliCommand:`npx tembro add menubar`,highlights:[`Composable menubar surfaces with grouped actions`,`Trigger + content + item primitives`],scenarios:[{title:`Editor top bar`,description:`Display grouped app actions in one compact area.`},{title:`Admin tools`,description:`Expose grouped controls without full menu system overhead.`}]};exports.menubarMock=e;

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

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

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

@@ -0,0 +1,15 @@
+//#region src/showcase/premium/menubar/mock.ts
+var e = {
+	code: "import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger } from \"@/index\"\n\nexport function Example() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>New project</MenubarItem>\n          <MenubarItem>Open</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}",
+	cliCommand: "npx tembro add menubar",
+	highlights: ["Composable menubar surfaces with grouped actions", "Trigger + content + item primitives"],
+	scenarios: [{
+		title: "Editor top bar",
+		description: "Display grouped app actions in one compact area."
+	}, {
+		title: "Admin tools",
+		description: "Expose grouped controls without full menu system overhead."
+	}]
+};
+//#endregion
+export { e as menubarMock };

package/dist/showcase/premium/menubar/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/modern/menubar.cjs");let t=require("react/jsx-runtime");function n(){return(0,t.jsxs)(`div`,{className:`space-y-3`,children:[(0,t.jsxs)(e.Menubar,{className:`w-fit`,children:[(0,t.jsxs)(e.MenubarMenu,{children:[(0,t.jsx)(e.MenubarTrigger,{children:`File`}),(0,t.jsxs)(e.MenubarContent,{children:[(0,t.jsx)(e.MenubarItem,{children:`New project`}),(0,t.jsx)(e.MenubarItem,{children:`Open`}),(0,t.jsx)(e.MenubarItem,{children:`Save`})]})]}),(0,t.jsxs)(e.MenubarMenu,{children:[(0,t.jsx)(e.MenubarTrigger,{children:`Edit`}),(0,t.jsxs)(e.MenubarContent,{children:[(0,t.jsx)(e.MenubarItem,{children:`Undo`}),(0,t.jsx)(e.MenubarItem,{children:`Redo`}),(0,t.jsx)(e.MenubarItem,{children:`Find`})]})]})]}),(0,t.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Menubar is a non-dropdown primitive. Use it as a command surface for quick contextual actions.`})]})}exports.MenubarShowcase=n;

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

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

package/dist/showcase/premium/menubar/showcase.js

@@ -0,0 +1,25 @@
+import { Menubar as e, MenubarContent as t, MenubarItem as n, MenubarMenu as r, MenubarTrigger as i } from "../../../components/modern/menubar.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/showcase/premium/menubar/showcase.tsx
+function s() {
+	return /* @__PURE__ */ o("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ o(e, {
+			className: "w-fit",
+			children: [/* @__PURE__ */ o(r, { children: [/* @__PURE__ */ a(i, { children: "File" }), /* @__PURE__ */ o(t, { children: [
+				/* @__PURE__ */ a(n, { children: "New project" }),
+				/* @__PURE__ */ a(n, { children: "Open" }),
+				/* @__PURE__ */ a(n, { children: "Save" })
+			] })] }), /* @__PURE__ */ o(r, { children: [/* @__PURE__ */ a(i, { children: "Edit" }), /* @__PURE__ */ o(t, { children: [
+				/* @__PURE__ */ a(n, { children: "Undo" }),
+				/* @__PURE__ */ a(n, { children: "Redo" }),
+				/* @__PURE__ */ a(n, { children: "Find" })
+			] })] })]
+		}), /* @__PURE__ */ a("p", {
+			className: "text-sm text-muted-foreground",
+			children: "Menubar is a non-dropdown primitive. Use it as a command surface for quick contextual actions."
+		})]
+	});
+}
+//#endregion
+export { s as MenubarShowcase };

package/dist/showcase/premium/metric-grid/index.cjs

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

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

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

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

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

package/dist/showcase/premium/metric-grid/mock.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { MetricGrid } from "tembro"
+
+const items = [
+  { key: "users", label: "Users", value: "2,410", description: "Last 30 days" },
+  { key: "revenue", label: "Revenue", value: "$132k", description: "Compared with last month" },
+  { key: "errors", label: "Errors", value: "3", description: "Attention required" },
+]
+
+export function Example() {
+  return <MetricGrid items={items} columns={3} />
+}`,highlights:[`Dashboard-ready KPI tiles`,`Tone-based urgency states`,`Compact mode`,`Composable label and trend`],relatedBlockSlugs:[`dashboard-starter`,`crm-dashboard`,`users-table`],scenarios:[{title:`Overview dashboards`,description:`Show high-level metrics above charts and tables.`},{title:`Loading states`,description:`Replace values with placeholders while fetching real data.`},{title:`Empty states`,description:`Render no metrics with layout preserved and user messaging outside.`}],capabilityNotes:["Use meaningful `description` for quick interpretation and trend context.",`Keep the number of columns tied to viewport width and readability.`,"Use `compact` for dense cards in dense dashboard toolbars."]};exports.metricGridMock=e;

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

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

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

@@ -0,0 +1,36 @@
+//#region src/showcase/premium/metric-grid/mock.ts
+var e = {
+	code: "import { MetricGrid } from \"tembro\"\n\nconst items = [\n  { key: \"users\", label: \"Users\", value: \"2,410\", description: \"Last 30 days\" },\n  { key: \"revenue\", label: \"Revenue\", value: \"$132k\", description: \"Compared with last month\" },\n  { key: \"errors\", label: \"Errors\", value: \"3\", description: \"Attention required\" },\n]\n\nexport function Example() {\n  return <MetricGrid items={items} columns={3} />\n}",
+	highlights: [
+		"Dashboard-ready KPI tiles",
+		"Tone-based urgency states",
+		"Compact mode",
+		"Composable label and trend"
+	],
+	relatedBlockSlugs: [
+		"dashboard-starter",
+		"crm-dashboard",
+		"users-table"
+	],
+	scenarios: [
+		{
+			title: "Overview dashboards",
+			description: "Show high-level metrics above charts and tables."
+		},
+		{
+			title: "Loading states",
+			description: "Replace values with placeholders while fetching real data."
+		},
+		{
+			title: "Empty states",
+			description: "Render no metrics with layout preserved and user messaging outside."
+		}
+	],
+	capabilityNotes: [
+		"Use meaningful `description` for quick interpretation and trend context.",
+		"Keep the number of columns tied to viewport width and readability.",
+		"Use `compact` for dense cards in dense dashboard toolbars."
+	]
+};
+//#endregion
+export { e as metricGridMock };

package/dist/showcase/premium/metric-grid/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/metric-grid.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");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:e}){let[s,c]=r.useState(!1),[l,u]=r.useState(3);return(0,i.jsxs)(`div`,{className:`space-y-4`,children:[e===`playground`?(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Button,{size:`sm`,variant:s?`outline`:`default`,onClick:()=>c(e=>!e),children:s?`Use spacious`:`Use compact`}),o.map(e=>(0,i.jsxs)(t.Button,{size:`sm`,variant:l===e?`default`:`outline`,onClick:()=>u(e),children:[e,` cols`]},e))]}):null,(0,i.jsx)(n.MetricGrid,{items:a,columns:l,compact:s})]})}exports.MetricGridShowcase=s;