tembro 1.0.0

package/dist/showcase/premium/popover/showcase.js

@@ -0,0 +1,108 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Popover as t, PopoverContent as n, PopoverDescription as r, PopoverHeader as i, PopoverTitle as a, PopoverTrigger as o } from "../../../components/ui/popover/index.js";
+import { popoverDemoItems as s } from "./data.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/showcase/premium/popover/showcase.tsx
+var u = "border-t border-[color:var(--aui-divider)] py-6";
+function d() {
+	return /* @__PURE__ */ l("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ c("section", {
+				className: "pb-6",
+				children: /* @__PURE__ */ l("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between",
+					children: [/* @__PURE__ */ l("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ c("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Popover"
+							}),
+							/* @__PURE__ */ c("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Keep it short and contextual"
+							}),
+							/* @__PURE__ */ c("p", {
+								className: "mt-3 text-sm leading-6 aui-text-muted",
+								children: "Popover should add nearby context, not replace the page or become a hidden modal."
+							})
+						]
+					}), /* @__PURE__ */ l("div", {
+						className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
+						children: [
+							/* @__PURE__ */ l("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ c("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Examples"
+								}), /* @__PURE__ */ c("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: s.length
+								})]
+							}),
+							/* @__PURE__ */ l("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ c("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Use for"
+								}), /* @__PURE__ */ c("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: "Short help"
+								})]
+							}),
+							/* @__PURE__ */ l("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ c("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Avoid for"
+								}), /* @__PURE__ */ c("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: "Full flows"
+								})]
+							})
+						]
+					})]
+				})
+			}),
+			/* @__PURE__ */ c("section", {
+				className: u,
+				children: /* @__PURE__ */ c("div", {
+					className: "grid gap-4 xl:grid-cols-3",
+					children: s.map((s) => /* @__PURE__ */ l("div", {
+						className: "rounded-[20px] border border-[color:var(--aui-divider)] px-4 py-4",
+						children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
+							className: "text-sm font-semibold aui-text-strong",
+							children: s.title
+						}), /* @__PURE__ */ c("p", {
+							className: "mt-2 text-sm leading-6 aui-text-muted",
+							children: s.description
+						})] }), /* @__PURE__ */ c("div", {
+							className: "mt-4",
+							children: /* @__PURE__ */ l(t, { children: [/* @__PURE__ */ c(o, {
+								render: /* @__PURE__ */ c(e, { variant: s.variant }),
+								children: s.label
+							}), /* @__PURE__ */ c(n, { children: /* @__PURE__ */ l(i, { children: [/* @__PURE__ */ c(a, { children: s.title }), /* @__PURE__ */ c(r, { children: s.description })] }) })] })
+						})]
+					}, s.label))
+				})
+			}),
+			/* @__PURE__ */ c("section", {
+				className: u,
+				children: /* @__PURE__ */ c("div", {
+					className: "border-y border-[color:var(--aui-divider)]",
+					children: [
+						"Trigger text should already hint that extra context exists.",
+						"If users need multiple actions or long reading, move up to a heavier surface.",
+						"Popover body should stay compact enough to scan in one glance."
+					].map((e) => /* @__PURE__ */ c("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))
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { d as PopoverShowcase };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});

package/dist/showcase/premium/popover/types.d.ts

@@ -0,0 +1,6 @@
+export type PopoverDemoItem = {
+    label: string;
+    variant: "outline" | "secondary";
+    title: string;
+    description: string;
+};

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Progress, ProgressCard } from "tembro"
+
+export function Example() {
+  return (
+    <div className="space-y-4">
+      <Progress label="Migration status" value={72} showValue />
+      <ProgressCard
+        title="Workspace import"
+        description="Current completion state"
+        value={58}
+        tone="info"
+      />
+    </div>
+  )
+}`,highlights:[`Linear progress with contextual label`,`Value formatting`,`Tone support for risk and success states`,`Card wrapper for dashboard surfaces`],scenarios:[{title:`Import flow`,description:`Show users how much data sync or onboarding remains.`},{title:`Release readiness`,description:`Track operational completion state in dashboards.`},{title:`Background jobs`,description:`Expose live or indeterminate processing in a compact way.`}],capabilityNotes:[`Progress is strongest when tied to a real milestone or measurable completion state.`,`Use indeterminate only when precise completion cannot be known yet.`,`Label the meaning of the progress, not just the percent.`]};exports.progressMock=e;

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

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

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

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/progress/mock.ts
+var e = {
+	code: "import { Progress, ProgressCard } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-4\">\n      <Progress label=\"Migration status\" value={72} showValue />\n      <ProgressCard\n        title=\"Workspace import\"\n        description=\"Current completion state\"\n        value={58}\n        tone=\"info\"\n      />\n    </div>\n  )\n}",
+	highlights: [
+		"Linear progress with contextual label",
+		"Value formatting",
+		"Tone support for risk and success states",
+		"Card wrapper for dashboard surfaces"
+	],
+	scenarios: [
+		{
+			title: "Import flow",
+			description: "Show users how much data sync or onboarding remains."
+		},
+		{
+			title: "Release readiness",
+			description: "Track operational completion state in dashboards."
+		},
+		{
+			title: "Background jobs",
+			description: "Expose live or indeterminate processing in a compact way."
+		}
+	],
+	capabilityNotes: [
+		"Progress is strongest when tied to a real milestone or measurable completion state.",
+		"Use indeterminate only when precise completion cannot be known yet.",
+		"Label the meaning of the progress, not just the percent."
+	]
+};
+//#endregion
+export { e as progressMock };

package/dist/showcase/premium/progress/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/display/progress.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function s({mode:e}){let[s,c]=i.useState(58),[l,u]=i.useState(!1);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:`Completion signal`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Progress should explain movement, not just paint a bar`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`A useful progress surface ties completion to a concrete workflow like sync, rollout, approval, or onboarding.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Deterministic`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Indeterminate`})]})]})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(r.Progress,{label:`Workspace import`,description:`Records indexed and validated`,value:s,tone:`info`,showValue:!0,indeterminate:l})}),(0,a.jsx)(r.ProgressCard,{title:`Release readiness`,description:`Checks passed before public rollout`,value:s,tone:s>=80?`success`:s>=50?`info`:`warning`,footer:(0,a.jsx)(`p`,{className:`text-xs aui-text-muted`,children:`Promote only when all gates are green.`})})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>c(e=>Math.max(0,e-10)),children:`-10`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>c(e=>Math.min(100,e+10)),children:`+10`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>u(e=>!e),children:`Toggle indeterminate`})]})}):null]})}exports.ProgressShowcase=s;

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

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

package/dist/showcase/premium/progress/showcase.js

@@ -0,0 +1,100 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { Progress as n, ProgressCard as r } from "../../../components/display/progress.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/showcase/premium/progress/showcase.tsx
+var s = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function c({ mode: c }) {
+	let [l, u] = i.useState(58), [d, f] = i.useState(!1);
+	return /* @__PURE__ */ o("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ a("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: "Completion signal"
+							}),
+							/* @__PURE__ */ a("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Progress should explain movement, not just paint a bar"
+							}),
+							/* @__PURE__ */ a("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "A useful progress surface ties completion to a concrete workflow like sync, rollout, approval, or onboarding."
+							})
+						]
+					}), /* @__PURE__ */ o("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ a(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Deterministic"
+						}), /* @__PURE__ */ a(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Indeterminate"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [/* @__PURE__ */ a("section", {
+					className: s,
+					children: /* @__PURE__ */ a(n, {
+						label: "Workspace import",
+						description: "Records indexed and validated",
+						value: l,
+						tone: "info",
+						showValue: !0,
+						indeterminate: d
+					})
+				}), /* @__PURE__ */ a(r, {
+					title: "Release readiness",
+					description: "Checks passed before public rollout",
+					value: l,
+					tone: l >= 80 ? "success" : l >= 50 ? "info" : "warning",
+					footer: /* @__PURE__ */ a("p", {
+						className: "text-xs aui-text-muted",
+						children: "Promote only when all gates are green."
+					})
+				})]
+			}),
+			c === "playground" ? /* @__PURE__ */ a("section", {
+				className: s,
+				children: /* @__PURE__ */ o("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => u((e) => Math.max(0, e - 10)),
+							children: "-10"
+						}),
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => u((e) => Math.min(100, e + 10)),
+							children: "+10"
+						}),
+						/* @__PURE__ */ a(e, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => f((e) => !e),
+							children: "Toggle indeterminate"
+						})
+					]
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { c as ProgressShowcase };

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { PropertyGrid } from "@/index"
+
+export function Example() {
+  return (
+    <PropertyGrid
+      columns={3}
+      items={[
+        { key: "owner", label: "Owner", value: "Azamat Jurayev" },
+        { key: "status", label: "Status", value: "Ready for review" },
+        { key: "version", label: "Version", value: "0.3.27" },
+      ]}
+    />
+  )
+}`,cliCommand:`npx tembro add property-grid`,highlights:[`Dense key/value metadata layout`,`Responsive columns with optional span support`,`Useful for entity details, release summaries, and integration metadata`],scenarios:[{title:`Entity details`,description:`Render many small facts without a full description list layout.`},{title:`Release summary`,description:`Group ownership, version and environment metadata.`},{title:`Integration card`,description:`Show endpoints, modes and dates in a compact details grid.`}]};exports.propertyGridMock=e;

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

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

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

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/property-grid/mock.ts
+var e = {
+	code: "import { PropertyGrid } from \"@/index\"\n\nexport function Example() {\n  return (\n    <PropertyGrid\n      columns={3}\n      items={[\n        { key: \"owner\", label: \"Owner\", value: \"Azamat Jurayev\" },\n        { key: \"status\", label: \"Status\", value: \"Ready for review\" },\n        { key: \"version\", label: \"Version\", value: \"0.3.27\" },\n      ]}\n    />\n  )\n}",
+	cliCommand: "npx tembro add property-grid",
+	highlights: [
+		"Dense key/value metadata layout",
+		"Responsive columns with optional span support",
+		"Useful for entity details, release summaries, and integration metadata"
+	],
+	scenarios: [
+		{
+			title: "Entity details",
+			description: "Render many small facts without a full description list layout."
+		},
+		{
+			title: "Release summary",
+			description: "Group ownership, version and environment metadata."
+		},
+		{
+			title: "Integration card",
+			description: "Show endpoints, modes and dates in a compact details grid."
+		}
+	]
+};
+//#endregion
+export { e as propertyGridMock };

package/dist/showcase/premium/property-grid/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/display/property-grid.cjs");let n=require("react/jsx-runtime");var r=`border-t border-[color:var(--aui-divider)] py-6`;function i(){return(0,n.jsxs)(`div`,{className:`space-y-0`,children:[(0,n.jsxs)(`section`,{className:`pb-6`,children:[(0,n.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,n.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`PropertyGrid packs metadata into a compact surface`}),(0,n.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Reach for it when the page needs many small facts and a full DescriptionList would feel too linear.`})]}),(0,n.jsx)(`section`,{className:r,children:(0,n.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,n.jsxs)(`div`,{children:[(0,n.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Release summary metadata`}),(0,n.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`The grid layout works well for ownership, dates, environment and deployment facts.`}),(0,n.jsx)(t.PropertyGrid,{className:`mt-5`,columns:3,items:[{key:`owner`,label:`Owner`,value:`Azamat Jurayev`},{key:`status`,label:`Status`,value:(0,n.jsx)(e.Badge,{variant:`secondary`,children:`Ready`})},{key:`version`,label:`Version`,value:`0.3.27`},{key:`environment`,label:`Environment`,value:`Production`},{key:`updated`,label:`Updated`,value:`Today, 14:40`},{key:`notes`,label:`Notes`,value:`Premium demos expanded for core display and utility routes.`,span:2}]})]}),(0,n.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,n.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,n.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,n.jsx)(`p`,{children:`PropertyGrid is best for short values. If the content becomes paragraph-length, a linear details layout will read better.`}),(0,n.jsx)(`p`,{children:"Use `span` sparingly to keep rhythm predictable across breakpoints."})]})]})]})})]})}exports.PropertyGridShowcase=i;

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

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

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

@@ -0,0 +1,93 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { PropertyGrid as t } from "../../../components/display/property-grid.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/property-grid/showcase.tsx
+var i = "border-t border-[color:var(--aui-divider)] py-6";
+function a() {
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-0",
+		children: [/* @__PURE__ */ r("section", {
+			className: "pb-6",
+			children: [
+				/* @__PURE__ */ n("p", {
+					className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+					children: "Installed display primitive"
+				}),
+				/* @__PURE__ */ n("h3", {
+					className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+					children: "PropertyGrid packs metadata into a compact surface"
+				}),
+				/* @__PURE__ */ n("p", {
+					className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
+					children: "Reach for it when the page needs many small facts and a full DescriptionList would feel too linear."
+				})
+			]
+		}), /* @__PURE__ */ n("section", {
+			className: i,
+			children: /* @__PURE__ */ r("div", {
+				className: "grid gap-6 xl:grid-cols-[1fr_360px]",
+				children: [/* @__PURE__ */ r("div", { children: [
+					/* @__PURE__ */ n("p", {
+						className: "text-lg font-semibold aui-text-strong",
+						children: "Release summary metadata"
+					}),
+					/* @__PURE__ */ n("p", {
+						className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
+						children: "The grid layout works well for ownership, dates, environment and deployment facts."
+					}),
+					/* @__PURE__ */ n(t, {
+						className: "mt-5",
+						columns: 3,
+						items: [
+							{
+								key: "owner",
+								label: "Owner",
+								value: "Azamat Jurayev"
+							},
+							{
+								key: "status",
+								label: "Status",
+								value: /* @__PURE__ */ n(e, {
+									variant: "secondary",
+									children: "Ready"
+								})
+							},
+							{
+								key: "version",
+								label: "Version",
+								value: "0.3.27"
+							},
+							{
+								key: "environment",
+								label: "Environment",
+								value: "Production"
+							},
+							{
+								key: "updated",
+								label: "Updated",
+								value: "Today, 14:40"
+							},
+							{
+								key: "notes",
+								label: "Notes",
+								value: "Premium demos expanded for core display and utility routes.",
+								span: 2
+							}
+						]
+					})
+				] }), /* @__PURE__ */ r("div", {
+					className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
+					children: [/* @__PURE__ */ n("p", {
+						className: "text-sm font-semibold aui-text-strong",
+						children: "Guidance"
+					}), /* @__PURE__ */ r("div", {
+						className: "mt-3 space-y-3 text-sm leading-6 aui-text-muted",
+						children: [/* @__PURE__ */ n("p", { children: "PropertyGrid is best for short values. If the content becomes paragraph-length, a linear details layout will read better." }), /* @__PURE__ */ n("p", { children: "Use `span` sparingly to keep rhythm predictable across breakpoints." })]
+					})]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { a as PropertyGridShowcase };

package/dist/showcase/premium/qr-code/index.cjs

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

package/dist/showcase/premium/qr-code/index.d.ts

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

package/dist/showcase/premium/qr-code/index.js

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

package/dist/showcase/premium/qr-code/mock.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { QRCode } from "@/index"
+
+export function Example() {
+  return <QRCode value="https://azamat-ui.vercel.app" alt="Azamat UI" />
+}`,cliCommand:`npx tembro add qr-code`,highlights:[`Fallback SVG renderer if no image is provided`,`Configurable size and module density`,`Works with plain strings and long URLs`],scenarios:[{title:`Marketing`,description:`Expose links in campaigns and materials.`},{title:`Apps`,description:`Generate codes for sharing deep links in dashboards.`}]};exports.qrCodeMock=e;

package/dist/showcase/premium/qr-code/mock.d.ts

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

package/dist/showcase/premium/qr-code/mock.js

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/qr-code/mock.ts
+var e = {
+	code: "import { QRCode } from \"@/index\"\n\nexport function Example() {\n  return <QRCode value=\"https://azamat-ui.vercel.app\" alt=\"Azamat UI\" />\n}",
+	cliCommand: "npx tembro add qr-code",
+	highlights: [
+		"Fallback SVG renderer if no image is provided",
+		"Configurable size and module density",
+		"Works with plain strings and long URLs"
+	],
+	scenarios: [{
+		title: "Marketing",
+		description: "Expose links in campaigns and materials."
+	}, {
+		title: "Apps",
+		description: "Generate codes for sharing deep links in dashboards."
+	}]
+};
+//#endregion
+export { e as qrCodeMock };

package/dist/showcase/premium/qr-code/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/qr-code.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=[`https://azamat-ui.vercel.app`,`https://github.com`,`mailto:hello@example.com`];function o(){let[e,o]=r.useState(0),s=a[e%a.length];return(0,i.jsxs)(`div`,{className:`space-y-3`,children:[(0,i.jsx)(`div`,{className:`flex gap-2`,children:(0,i.jsx)(t.Button,{size:`sm`,onClick:()=>o(e=>(e+1)%a.length),children:`Next payload`})}),(0,i.jsx)(n.QRCode,{value:s,alt:s,size:176}),(0,i.jsxs)(`p`,{className:`text-xs text-muted-foreground`,children:[`Payload: `,s]})]})}exports.QRCodeShowcase=o;

package/dist/showcase/premium/qr-code/showcase.d.ts

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

package/dist/showcase/premium/qr-code/showcase.js

@@ -0,0 +1,37 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { QRCode as t } from "../../../components/display/qr-code.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/qr-code/showcase.tsx
+var a = [
+	"https://azamat-ui.vercel.app",
+	"https://github.com",
+	"mailto:hello@example.com"
+];
+function o() {
+	let [o, s] = n.useState(0), c = a[o % a.length];
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "flex gap-2",
+				children: /* @__PURE__ */ r(e, {
+					size: "sm",
+					onClick: () => s((e) => (e + 1) % a.length),
+					children: "Next payload"
+				})
+			}),
+			/* @__PURE__ */ r(t, {
+				value: c,
+				alt: c,
+				size: 176
+			}),
+			/* @__PURE__ */ i("p", {
+				className: "text-xs text-muted-foreground",
+				children: ["Payload: ", c]
+			})
+		]
+	});
+}
+//#endregion
+export { o as QRCodeShowcase };

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { QuantityInput } from "@/index"
+
+export function Example() {
+  const [quantity, setQuantity] = useState<number | null>(3)
+
+  return (
+    <div className="space-y-3">
+      <QuantityInput
+        value={quantity}
+        onValueChange={(nextValue: number | null) => setQuantity(nextValue)}
+        min={0}
+        max={10}
+        step={1}
+        showControls
+      />
+      <p className="text-sm aui-text-subtle">
+        Items: <strong>{quantity ?? "unset"}</strong>
+      </p>
+      <p className="text-sm aui-text-muted">
+        Controls should stay aligned with adjacent action columns in compact table rows.
+      </p>
+      <p className="text-sm aui-text-muted">
+        Try increment/decrement at bounds to validate guardrails.
+      </p>
+    </div>
+  )
+}`,htmlCode:`<label for="qty">Quantity</label><input id="qty" type="text" inputmode="numeric" />`,cliCommand:`npx tembro add quantity-input`,highlights:[`Stepper controls`,`min/max boundaries`,`controlled usage`,`compact row compatibility`],relatedBlockSlugs:[`crm-dashboard`,`users-table`,`settings-form`],scenarios:[{title:`Line item quantity`,description:`Use in carts and order forms with strict bounds.`},{title:`Inventory controls`,description:`Keep increments aligned with backend-stock constraints.`},{title:`Form tables`,description:`Compact control rendering works well in inline editable rows.`},{title:`Bounded values`,description:`Reject edits below zero and above maximum.`}],capabilityNotes:[`Show inline controls for quick adjustments when quantity edits are frequent.`,"Set `min`/`max` to protect impossible states in business rules.",`Use controlled flow to persist updates across rows and validation passes.`,`Disable controls when quantity is not editable to avoid inconsistent states.`]};exports.quantityInputMock=e;

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

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