tembro 1.0.0

package/dist/showcase/premium/date-range-picker/mock.js

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/date-range-picker/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { DateRangePicker } from \"@/index\"\n\nexport function Example() {\n  const [value, setValue] = useState({ from: \"2026-06-01\", to: \"2026-06-07\" })\n\n  return (\n    <DateRangePicker\n      value={value}\n      onValueChange={(nextValue) => setValue({ from: nextValue.from ?? \"\", to: nextValue.to ?? \"\" })}\n      min=\"2026-06-01\"\n      max=\"2026-12-31\"\n      disabledDates={[\"2026-06-21\", \"2026-06-22\"]}\n    />\n  )\n}",
+	htmlCode: "<label for=\"date-range-picker\">Date range</label><input id=\"date-range-picker\" type=\"text\" value=\"2026-06-01 to 2026-06-07\" />",
+	cliCommand: "npx tembro add date-range-picker",
+	highlights: [
+		"Range popover behavior",
+		"disabledDates support",
+		"from/to object format",
+		"min/max constraints"
+	],
+	relatedBlockSlugs: [
+		"crm-dashboard",
+		"users-table",
+		"pricing-section"
+	],
+	scenarios: [
+		{
+			title: "Reporting window",
+			description: "Select a period for period-based reports."
+		},
+		{
+			title: "Campaign sprint",
+			description: "Keep campaign launch and end dates linked as a single value."
+		},
+		{
+			title: "Blocked windows",
+			description: "Exclude blackout dates with disabledDates list."
+		},
+		{
+			title: "Read-only mode",
+			description: "Disable pickers for locked records and history editing."
+		}
+	],
+	capabilityNotes: [
+		"Validate that `from` is before `to` before submit.",
+		"Use partial range guards and avoid fetching until both bounds are selected.",
+		"Normalize to server timezone to avoid midnight and boundary drift.",
+		"Store disabled periods in one source and share with all date controls."
+	]
+};
+//#endregion
+export { e as dateRangePickerMock };

package/dist/showcase/premium/date-range-picker/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/calendar/date-range-picker.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)({from:`2026-06-01`,to:`2026-06-07`});return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.DateRangePicker,{value:i,onValueChange:e=>a({from:e.from??``,to:e.to??``}),min:`2026-06-01`,max:`2026-12-31`,disabledDates:[`2026-06-21`,`2026-06-22`]}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Range: `,i.from,` → `,i.to]}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.DateRangePickerShowcase=r;

package/dist/showcase/premium/date-range-picker/showcase.d.ts

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

package/dist/showcase/premium/date-range-picker/showcase.js

@@ -0,0 +1,40 @@
+import { DateRangePicker as e } from "../../../components/calendar/date-range-picker.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/date-range-picker/showcase.tsx
+function i({ mode: i }) {
+	let [a, o] = t({
+		from: "2026-06-01",
+		to: "2026-06-07"
+	});
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ n(e, {
+				value: a,
+				onValueChange: (e) => o({
+					from: e.from ?? "",
+					to: e.to ?? ""
+				}),
+				min: "2026-06-01",
+				max: "2026-12-31",
+				disabledDates: ["2026-06-21", "2026-06-22"]
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "aui-text-subtle text-sm",
+				children: [
+					"Range: ",
+					a.from,
+					" → ",
+					a.to
+				]
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "aui-text-muted text-sm",
+				children: ["Mode: ", i]
+			})
+		]
+	});
+}
+//#endregion
+export { i as DateRangePickerShowcase };

package/dist/showcase/premium/description-list/index.cjs

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

package/dist/showcase/premium/description-list/index.d.ts

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

package/dist/showcase/premium/description-list/index.js

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

package/dist/showcase/premium/description-list/mock.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { DescriptionList } from "tembro"
+
+export function Example() {
+  return (
+    <DescriptionList
+      title="Invoice details"
+      items={[
+        { key: "customer", label: "Customer", value: "Acme Growth" },
+        { key: "status", label: "Status", value: "Paid" },
+        { key: "total", label: "Total", value: "$4,280" },
+      ]}
+    />
+  )
+}`,highlights:[`Structured key-value layout`,`Grid column control`,`Header actions and descriptions`,`Good for entity, invoice, and profile details`],scenarios:[{title:`Invoice facts`,description:`Display billing metadata in a scannable form.`},{title:`Workspace profile`,description:`Group account settings and ownership information clearly.`},{title:`Customer summary`,description:`Expose key details without writing a custom grid every time.`}],capabilityNotes:[`Description lists work best for static or slow-changing factual data.`,`Use them when labels matter as much as values.`,`Avoid forcing long narrative content into this format.`]};exports.descriptionListMock=e;

package/dist/showcase/premium/description-list/mock.d.ts

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

package/dist/showcase/premium/description-list/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/description-list/mock.ts
+var e = {
+	code: "import { DescriptionList } from \"tembro\"\n\nexport function Example() {\n  return (\n    <DescriptionList\n      title=\"Invoice details\"\n      items={[\n        { key: \"customer\", label: \"Customer\", value: \"Acme Growth\" },\n        { key: \"status\", label: \"Status\", value: \"Paid\" },\n        { key: \"total\", label: \"Total\", value: \"$4,280\" },\n      ]}\n    />\n  )\n}",
+	highlights: [
+		"Structured key-value layout",
+		"Grid column control",
+		"Header actions and descriptions",
+		"Good for entity, invoice, and profile details"
+	],
+	scenarios: [
+		{
+			title: "Invoice facts",
+			description: "Display billing metadata in a scannable form."
+		},
+		{
+			title: "Workspace profile",
+			description: "Group account settings and ownership information clearly."
+		},
+		{
+			title: "Customer summary",
+			description: "Expose key details without writing a custom grid every time."
+		}
+	],
+	capabilityNotes: [
+		"Description lists work best for static or slow-changing factual data.",
+		"Use them when labels matter as much as values.",
+		"Avoid forcing long narrative content into this format."
+	]
+};
+//#endregion
+export { e as descriptionListMock };

package/dist/showcase/premium/description-list/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/display/description-list.cjs");let r=require("react/jsx-runtime");var i=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function a({mode:a}){return(0,r.jsxs)(`div`,{className:`space-y-5`,children:[(0,r.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,r.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,r.jsxs)(`div`,{className:`max-w-xl`,children:[(0,r.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Facts surface`}),(0,r.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`DescriptionList should turn raw metadata into readable facts`}),(0,r.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This surface is strongest when the user needs to inspect concrete fields quickly, not interpret a dense freeform card.`})]}),(0,r.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,r.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Structured`}),(0,r.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Operational metadata`})]})]})}),(0,r.jsx)(n.DescriptionList,{title:`Invoice details`,description:`Stable operational metadata for support and billing teams.`,columns:2,actions:(0,r.jsx)(e.Button,{size:`sm`,variant:`outline`,children:`Edit`}),items:[{key:`customer`,label:`Customer`,value:`Acme Growth`},{key:`status`,label:`Status`,value:`Paid`},{key:`owner`,label:`Owner`,value:`A. Jurayev`},{key:`amount`,label:`Total`,value:`$4,280`},{key:`method`,label:`Payment method`,value:`Corporate card`},{key:`notes`,label:`Notes`,value:`Requires monthly reconciliation with finance.`,span:2}]}),a===`playground`?(0,r.jsx)(`section`,{className:i,children:(0,r.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`Bu component invoice, profile, workspace yoki customer detail kabi factual sahifalarda foydali.`})}):null]})}exports.DescriptionListShowcase=a;

package/dist/showcase/premium/description-list/showcase.d.ts

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

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

@@ -0,0 +1,99 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { DescriptionList as n } from "../../../components/display/description-list.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/description-list/showcase.tsx
+var a = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function o({ mode: o }) {
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ r("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: /* @__PURE__ */ i("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ i("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ r("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Facts surface"
+							}),
+							/* @__PURE__ */ r("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "DescriptionList should turn raw metadata into readable facts"
+							}),
+							/* @__PURE__ */ r("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "This surface is strongest when the user needs to inspect concrete fields quickly, not interpret a dense freeform card."
+							})
+						]
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ r(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Structured"
+						}), /* @__PURE__ */ r(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Operational metadata"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ r(n, {
+				title: "Invoice details",
+				description: "Stable operational metadata for support and billing teams.",
+				columns: 2,
+				actions: /* @__PURE__ */ r(e, {
+					size: "sm",
+					variant: "outline",
+					children: "Edit"
+				}),
+				items: [
+					{
+						key: "customer",
+						label: "Customer",
+						value: "Acme Growth"
+					},
+					{
+						key: "status",
+						label: "Status",
+						value: "Paid"
+					},
+					{
+						key: "owner",
+						label: "Owner",
+						value: "A. Jurayev"
+					},
+					{
+						key: "amount",
+						label: "Total",
+						value: "$4,280"
+					},
+					{
+						key: "method",
+						label: "Payment method",
+						value: "Corporate card"
+					},
+					{
+						key: "notes",
+						label: "Notes",
+						value: "Requires monthly reconciliation with finance.",
+						span: 2
+					}
+				]
+			}),
+			o === "playground" ? /* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ r("p", {
+					className: "text-sm aui-text-muted",
+					children: "Bu component invoice, profile, workspace yoki customer detail kabi factual sahifalarda foydali."
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { o as DescriptionListShowcase };

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Descriptions } from "@/index"
+
+export function Example() {
+  return (
+    <Descriptions
+      title="Project profile"
+      extra={<span className="text-sm text-muted-foreground">Draft</span>}
+      items={[
+        { key: "owner", label: "Owner", value: "Azamat UI Team" },
+        { key: "status", label: "Status", value: "In review" },
+        { key: "release", label: "Release", value: "v0.3.27", span: 2 },
+        { key: "stack", label: "Tech", value: "React + Tailwind" },
+      ]}
+    />
+  )
+}`,cliCommand:`npx tembro add descriptions`,highlights:[`Title and metadata layout in a compact two-axis grid`,`Bordered style with configurable columns`,`Simple API for label and value metadata`],scenarios:[{title:`Overview`,description:`Use for project metadata and entity summary blocks.`},{title:`Admin views`,description:`Keep important fields readable in dense dashboard tables.`}]};exports.descriptionsMock=e;

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

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

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

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/descriptions/mock.ts
+var e = {
+	code: "import { Descriptions } from \"@/index\"\n\nexport function Example() {\n  return (\n    <Descriptions\n      title=\"Project profile\"\n      extra={<span className=\"text-sm text-muted-foreground\">Draft</span>}\n      items={[\n        { key: \"owner\", label: \"Owner\", value: \"Azamat UI Team\" },\n        { key: \"status\", label: \"Status\", value: \"In review\" },\n        { key: \"release\", label: \"Release\", value: \"v0.3.27\", span: 2 },\n        { key: \"stack\", label: \"Tech\", value: \"React + Tailwind\" },\n      ]}\n    />\n  )\n}",
+	cliCommand: "npx tembro add descriptions",
+	highlights: [
+		"Title and metadata layout in a compact two-axis grid",
+		"Bordered style with configurable columns",
+		"Simple API for label and value metadata"
+	],
+	scenarios: [{
+		title: "Overview",
+		description: "Use for project metadata and entity summary blocks."
+	}, {
+		title: "Admin views",
+		description: "Keep important fields readable in dense dashboard tables."
+	}]
+};
+//#endregion
+export { e as descriptionsMock };

package/dist/showcase/premium/descriptions/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/descriptions.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a(){let[e,a]=r.useState(3),[o,s]=r.useState(!0);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Button,{size:`sm`,variant:e===1?`default`:`outline`,onClick:()=>a(1),children:`1 col`}),(0,i.jsx)(t.Button,{size:`sm`,variant:e===2?`default`:`outline`,onClick:()=>a(2),children:`2 col`}),(0,i.jsx)(t.Button,{size:`sm`,variant:e===3?`default`:`outline`,onClick:()=>a(3),children:`3 col`}),(0,i.jsx)(t.Button,{size:`sm`,variant:e===4?`default`:`outline`,onClick:()=>a(4),children:`4 col`}),(0,i.jsx)(t.Button,{size:`sm`,variant:o?`default`:`outline`,onClick:()=>s(e=>!e),children:o?`Bordered`:`Unbordered`})]}),(0,i.jsx)(n.Descriptions,{title:`Project profile`,extra:(0,i.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:`Draft`}),bordered:o,columns:e,items:[{key:`owner`,label:`Owner`,value:`Azamat UI Team`},{key:`status`,label:`Status`,value:`In review`},{key:`release`,label:`Release`,value:`v0.3.27`,span:2},{key:`stack`,label:`Tech`,value:`React + Tailwind`},{key:`source`,label:`Source`,value:`Package-first components`,span:4}]})]})}exports.DescriptionsShowcase=a;

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

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

package/dist/showcase/premium/descriptions/showcase.js

@@ -0,0 +1,85 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Descriptions as t } from "../../../components/display/descriptions.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/descriptions/showcase.tsx
+function a() {
+	let [a, o] = n.useState(3), [s, c] = n.useState(!0);
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-5",
+		children: [/* @__PURE__ */ i("div", {
+			className: "flex flex-wrap gap-2",
+			children: [
+				/* @__PURE__ */ r(e, {
+					size: "sm",
+					variant: a === 1 ? "default" : "outline",
+					onClick: () => o(1),
+					children: "1 col"
+				}),
+				/* @__PURE__ */ r(e, {
+					size: "sm",
+					variant: a === 2 ? "default" : "outline",
+					onClick: () => o(2),
+					children: "2 col"
+				}),
+				/* @__PURE__ */ r(e, {
+					size: "sm",
+					variant: a === 3 ? "default" : "outline",
+					onClick: () => o(3),
+					children: "3 col"
+				}),
+				/* @__PURE__ */ r(e, {
+					size: "sm",
+					variant: a === 4 ? "default" : "outline",
+					onClick: () => o(4),
+					children: "4 col"
+				}),
+				/* @__PURE__ */ r(e, {
+					size: "sm",
+					variant: s ? "default" : "outline",
+					onClick: () => c((e) => !e),
+					children: s ? "Bordered" : "Unbordered"
+				})
+			]
+		}), /* @__PURE__ */ r(t, {
+			title: "Project profile",
+			extra: /* @__PURE__ */ r("span", {
+				className: "text-sm text-muted-foreground",
+				children: "Draft"
+			}),
+			bordered: s,
+			columns: a,
+			items: [
+				{
+					key: "owner",
+					label: "Owner",
+					value: "Azamat UI Team"
+				},
+				{
+					key: "status",
+					label: "Status",
+					value: "In review"
+				},
+				{
+					key: "release",
+					label: "Release",
+					value: "v0.3.27",
+					span: 2
+				},
+				{
+					key: "stack",
+					label: "Tech",
+					value: "React + Tailwind"
+				},
+				{
+					key: "source",
+					label: "Source",
+					value: "Package-first components",
+					span: 4
+				}
+			]
+		})]
+	});
+}
+//#endregion
+export { a as DescriptionsShowcase };

package/dist/showcase/premium/dialog/data.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{label:`Open dialog`,triggerVariant:`default`,title:`Publish update`,description:`Confirm the release notes and push this component update live.`,confirmLabel:`Publish`,confirmVariant:`default`},{label:`Delete item`,triggerVariant:`destructive`,title:`Delete resource`,description:`This action cannot be undone once the resource is removed.`,confirmLabel:`Delete permanently`,confirmVariant:`destructive`},{label:`Start form`,triggerVariant:`default`,title:`Create workspace`,description:`Open a focused form when you need explicit name and visibility fields.`,confirmLabel:`Create`,confirmVariant:`default`}];exports.dialogDemoItems=e;

package/dist/showcase/premium/dialog/data.d.ts

@@ -0,0 +1,2 @@
+import type { DialogDemoItem } from "./types";
+export declare const dialogDemoItems: DialogDemoItem[];

package/dist/showcase/premium/dialog/data.js

@@ -0,0 +1,29 @@
+//#region src/showcase/premium/dialog/data.ts
+var e = [
+	{
+		label: "Open dialog",
+		triggerVariant: "default",
+		title: "Publish update",
+		description: "Confirm the release notes and push this component update live.",
+		confirmLabel: "Publish",
+		confirmVariant: "default"
+	},
+	{
+		label: "Delete item",
+		triggerVariant: "destructive",
+		title: "Delete resource",
+		description: "This action cannot be undone once the resource is removed.",
+		confirmLabel: "Delete permanently",
+		confirmVariant: "destructive"
+	},
+	{
+		label: "Start form",
+		triggerVariant: "default",
+		title: "Create workspace",
+		description: "Open a focused form when you need explicit name and visibility fields.",
+		confirmLabel: "Create",
+		confirmVariant: "default"
+	}
+];
+//#endregion
+export { e as dialogDemoItems };

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

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

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

@@ -0,0 +1,4 @@
+export { DialogShowcase } from "./showcase";
+export { dialogMock } from "./mock";
+export { dialogDemoItems } from "./data";
+export type { DialogDemoItem } from "./types";

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

@@ -0,0 +1,4 @@
+import { dialogDemoItems as e } from "./data.js";
+import { DialogShowcase as t } from "./showcase.js";
+import { dialogMock as n } from "./mock.js";
+export { t as DialogShowcase, e as dialogDemoItems, n as dialogMock };

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

@@ -0,0 +1,24 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/index"
+
+export function Example() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger render={<Button>Publish</Button>} />
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Publish update</DialogTitle>
+          <DialogDescription>
+            Confirm that these notes are final before moving to production.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
+          <Button>Publish</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}`,htmlCode:`<button data-slot="dialog-trigger">Open dialog</button>`,cliCommand:`npx tembro add dialog`,highlights:[`Controlled open state`,`Title and description requirement`,`Destructive confirm flow`,`Close + confirm action pattern`],relatedBlockSlugs:[`auth-sign-in`,`settings-form`,`crm-dashboard`],scenarios:[{title:`Controlled modal`,description:`Use open/onOpenChange when external logic must gate workflow.`},{title:`Publish confirmation`,description:`Protect irreversible actions with explicit confirm/cancel controls.`},{title:`Destructive confirm`,description:`Use tone and labeling that communicates permanence.`},{title:`Form dialog`,description:`Render focused forms and validation inside a constrained modal shell.`}],capabilityNotes:[`Use Dialog for focused single-purpose user tasks; avoid replacing entire workflow in an overlay.`,`Title and description should clearly explain context and impact.`,`Controlled props are important when submitting calls backend APIs or opening from global state.`,`For destructive actions, prefer explicit wording and secondary cancel path.`]};exports.dialogMock=e;

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

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

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

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/dialog/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from \"@/index\"\n\nexport function Example() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button>Publish</Button>} />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Publish update</DialogTitle>\n          <DialogDescription>\n            Confirm that these notes are final before moving to production.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogFooter>\n          <Button variant=\"outline\" onClick={() => setOpen(false)}>Cancel</Button>\n          <Button>Publish</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}",
+	htmlCode: "<button data-slot=\"dialog-trigger\">Open dialog</button>",
+	cliCommand: "npx tembro add dialog",
+	highlights: [
+		"Controlled open state",
+		"Title and description requirement",
+		"Destructive confirm flow",
+		"Close + confirm action pattern"
+	],
+	relatedBlockSlugs: [
+		"auth-sign-in",
+		"settings-form",
+		"crm-dashboard"
+	],
+	scenarios: [
+		{
+			title: "Controlled modal",
+			description: "Use open/onOpenChange when external logic must gate workflow."
+		},
+		{
+			title: "Publish confirmation",
+			description: "Protect irreversible actions with explicit confirm/cancel controls."
+		},
+		{
+			title: "Destructive confirm",
+			description: "Use tone and labeling that communicates permanence."
+		},
+		{
+			title: "Form dialog",
+			description: "Render focused forms and validation inside a constrained modal shell."
+		}
+	],
+	capabilityNotes: [
+		"Use Dialog for focused single-purpose user tasks; avoid replacing entire workflow in an overlay.",
+		"Title and description should clearly explain context and impact.",
+		"Controlled props are important when submitting calls backend APIs or opening from global state.",
+		"For destructive actions, prefer explicit wording and secondary cancel path."
+	]
+};
+//#endregion
+export { e as dialogMock };

package/dist/showcase/premium/dialog/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/ui/dialog/index.cjs"),r=require("./data.cjs");let i=require("react/jsx-runtime");var a=`border-t border-[color:var(--aui-divider)] py-6`;function o(){return(0,i.jsxs)(`div`,{className:`space-y-0`,children:[(0,i.jsx)(`section`,{className:`pb-6`,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:`Overlay`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Dialogs should justify focus`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Use them for short, high-risk, or confirm-first actions. Keep the trigger, title, description, and footer actions explicit.`})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`div`,{className:`grid gap-4 xl:grid-cols-3`,children:r.dialogDemoItems.map(r=>(0,i.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] px-4 py-4`,children:[(0,i.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:r.title}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:r.description})]}),(0,i.jsx)(t.Badge,{variant:r.confirmVariant===`destructive`?`destructive`:`outline`,children:r.confirmLabel})]}),(0,i.jsx)(`div`,{className:`mt-4`,children:(0,i.jsxs)(n.Dialog,{children:[(0,i.jsx)(n.DialogTrigger,{render:(0,i.jsx)(e.Button,{variant:r.triggerVariant}),children:r.label}),(0,i.jsxs)(n.DialogContent,{children:[(0,i.jsxs)(n.DialogHeader,{children:[(0,i.jsx)(n.DialogTitle,{children:r.title}),(0,i.jsx)(n.DialogDescription,{children:r.description})]}),(0,i.jsx)(n.DialogFooter,{showCloseButton:!0,children:(0,i.jsx)(e.Button,{variant:r.confirmVariant,children:r.confirmLabel})})]})]})})]},r.label))})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`div`,{className:`grid gap-3`,children:[`Keep the page understandable before the overlay opens.`,`Use outcome-specific action labels inside the dialog footer.`,`Do not move long multi-step workflows into a small modal by default.`].map(e=>(0,i.jsx)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3 text-sm leading-6 aui-text-muted`,children:e},e))})})]})}exports.DialogShowcase=o;

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

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

package/dist/showcase/premium/dialog/showcase.js

@@ -0,0 +1,84 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { Dialog as n, DialogContent as r, DialogDescription as i, DialogFooter as a, DialogHeader as o, DialogTitle as s, DialogTrigger as c } from "../../../components/ui/dialog/index.js";
+import { dialogDemoItems as l } from "./data.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/showcase/premium/dialog/showcase.tsx
+var f = "border-t border-[color:var(--aui-divider)] py-6";
+function p() {
+	return /* @__PURE__ */ d("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ u("section", {
+				className: "pb-6",
+				children: /* @__PURE__ */ d("div", {
+					className: "max-w-xl",
+					children: [
+						/* @__PURE__ */ u("p", {
+							className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+							children: "Overlay"
+						}),
+						/* @__PURE__ */ u("h3", {
+							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+							children: "Dialogs should justify focus"
+						}),
+						/* @__PURE__ */ u("p", {
+							className: "mt-3 text-sm leading-6 aui-text-muted",
+							children: "Use them for short, high-risk, or confirm-first actions. Keep the trigger, title, description, and footer actions explicit."
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ u("section", {
+				className: f,
+				children: /* @__PURE__ */ u("div", {
+					className: "grid gap-4 xl:grid-cols-3",
+					children: l.map((l) => /* @__PURE__ */ d("div", {
+						className: "rounded-[20px] border border-[color:var(--aui-divider)] px-4 py-4",
+						children: [/* @__PURE__ */ d("div", {
+							className: "flex items-start justify-between gap-4",
+							children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+								className: "text-sm font-semibold aui-text-strong",
+								children: l.title
+							}), /* @__PURE__ */ u("p", {
+								className: "mt-2 text-sm leading-6 aui-text-muted",
+								children: l.description
+							})] }), /* @__PURE__ */ u(t, {
+								variant: l.confirmVariant === "destructive" ? "destructive" : "outline",
+								children: l.confirmLabel
+							})]
+						}), /* @__PURE__ */ u("div", {
+							className: "mt-4",
+							children: /* @__PURE__ */ d(n, { children: [/* @__PURE__ */ u(c, {
+								render: /* @__PURE__ */ u(e, { variant: l.triggerVariant }),
+								children: l.label
+							}), /* @__PURE__ */ d(r, { children: [/* @__PURE__ */ d(o, { children: [/* @__PURE__ */ u(s, { children: l.title }), /* @__PURE__ */ u(i, { children: l.description })] }), /* @__PURE__ */ u(a, {
+								showCloseButton: !0,
+								children: /* @__PURE__ */ u(e, {
+									variant: l.confirmVariant,
+									children: l.confirmLabel
+								})
+							})] })] })
+						})]
+					}, l.label))
+				})
+			}),
+			/* @__PURE__ */ u("section", {
+				className: f,
+				children: /* @__PURE__ */ u("div", {
+					className: "grid gap-3",
+					children: [
+						"Keep the page understandable before the overlay opens.",
+						"Use outcome-specific action labels inside the dialog footer.",
+						"Do not move long multi-step workflows into a small modal by default."
+					].map((e) => /* @__PURE__ */ u("div", {
+						className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3 text-sm leading-6 aui-text-muted",
+						children: e
+					}, e))
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { p as DialogShowcase };