tembro 2.1.13 → 3.1.1

package/dist/src/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`],closeOnPresetSelect:!0,presets:[{label:`This week`,value:{from:`2026-06-01`,to:`2026-06-07`}},{label:`Next 14 days`,value:{from:`2026-06-08`,to:`2026-06-20`}},{label:`Q3`,value:{from:`2026-07-01`,to:`2026-09-30`}}],labels:{placeholder:`Choose reporting range`,apply:`Apply range`,clear:`Clear`,start:`Start`,end:`End`}}),(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/src/showcase/premium/date-range-picker/showcase.js

@@ -0,0 +1,71 @@
+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"],
+				closeOnPresetSelect: !0,
+				presets: [
+					{
+						label: "This week",
+						value: {
+							from: "2026-06-01",
+							to: "2026-06-07"
+						}
+					},
+					{
+						label: "Next 14 days",
+						value: {
+							from: "2026-06-08",
+							to: "2026-06-20"
+						}
+					},
+					{
+						label: "Q3",
+						value: {
+							from: "2026-07-01",
+							to: "2026-09-30"
+						}
+					}
+				],
+				labels: {
+					placeholder: "Choose reporting range",
+					apply: "Apply range",
+					clear: "Clear",
+					start: "Start",
+					end: "End"
+				}
+			}),
+			/* @__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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/showcase/premium/descriptions/mock.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Descriptions } from "tembro"
+
+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/src/showcase/premium/descriptions/mock.js

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/descriptions/mock.ts
+var e = {
+	code: "import { Descriptions } from \"tembro\"\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/src/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/src/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/src/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/src/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/src/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/src/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/src/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 "tembro"
+
+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/src/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 \"tembro\"\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/src/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/src/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 };

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

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

package/dist/{showcase/premium/menubar → src/showcase/premium/divider}/index.cjs

@@ -1 +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;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./mock.cjs"),t=require("./showcase.cjs");exports.DividerShowcase=t.DividerShowcase,exports.dividerMock=e.dividerMock;

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

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

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

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Divider } from "tembro"
+
+export function Example() {
+  return (
+    <div className="space-y-6">
+      <Divider label="Sections" />
+      <Divider orientation="horizontal" dashed label="Dashed" />
+      <Divider dashed orientation="vertical" />
+    </div>
+  )
+}`,cliCommand:`npx tembro add divider`,highlights:[`Horizontal divider as labeled group boundary`,`Vertical divider for compact dense layouts`,`Dashed style for low-emphasis sections`],scenarios:[{title:`Settings page`,description:`Separate header and settings controls.`},{title:`Data list`,description:`Use a subtle split before action groups.`},{title:`Card interior`,description:`Distinguish primary/secondary areas without extra wrappers.`}]};exports.dividerMock=e;

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

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/divider/mock.ts
+var e = {
+	code: "import { Divider } from \"tembro\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-6\">\n      <Divider label=\"Sections\" />\n      <Divider orientation=\"horizontal\" dashed label=\"Dashed\" />\n      <Divider dashed orientation=\"vertical\" />\n    </div>\n  )\n}",
+	cliCommand: "npx tembro add divider",
+	highlights: [
+		"Horizontal divider as labeled group boundary",
+		"Vertical divider for compact dense layouts",
+		"Dashed style for low-emphasis sections"
+	],
+	scenarios: [
+		{
+			title: "Settings page",
+			description: "Separate header and settings controls."
+		},
+		{
+			title: "Data list",
+			description: "Use a subtle split before action groups."
+		},
+		{
+			title: "Card interior",
+			description: "Distinguish primary/secondary areas without extra wrappers."
+		}
+	]
+};
+//#endregion
+export { e as dividerMock };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/divider/index.cjs");let t=require("react/jsx-runtime");function n(){return(0,t.jsxs)(`div`,{className:`space-y-6 rounded-xl border border-border bg-card p-5`,children:[(0,t.jsxs)(`div`,{className:`space-y-2`,children:[(0,t.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground`,children:`Divider modes`}),(0,t.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Use labels and orientation to keep content hierarchy readable without extra layout noise.`})]}),(0,t.jsx)(`div`,{className:`space-y-5`,children:[{label:`No label`,props:{label:void 0}},{label:`Team access`,props:{}},{label:`Dashed section`,props:{dashed:!0}},{label:`Start label`,props:{labelPosition:`start`}},{label:`End label`,props:{labelPosition:`end`}}].map((n,r)=>(0,t.jsxs)(`div`,{className:`rounded-lg border border-border/80 px-4 py-3`,children:[(0,t.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:n.label}),(0,t.jsx)(e.Divider,{orientation:`horizontal`,label:r===0?void 0:n.label,...n.props}),(0,t.jsx)(`div`,{className:`text-sm text-foreground`,children:`Row before section`})]},n.label+r))}),(0,t.jsxs)(`div`,{className:`flex h-28 items-center justify-between gap-4 rounded-lg border border-border/80 bg-background p-4`,children:[(0,t.jsx)(`div`,{className:`text-sm text-foreground`,children:`A`}),(0,t.jsx)(e.Divider,{orientation:`vertical`}),(0,t.jsx)(`div`,{className:`text-sm text-foreground`,children:`B`}),(0,t.jsx)(e.Divider,{orientation:`vertical`,dashed:!0}),(0,t.jsx)(`div`,{className:`text-sm text-foreground`,children:`C`})]})]})}exports.DividerShowcase=n;