tembro 3.0.0 → 3.1.5

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/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/src/showcase/premium/divider/index.cjs

@@ -0,0 +1 @@
+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;

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

@@ -0,0 +1,86 @@
+import { Divider as e } from "../../../components/ui/divider/index.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/showcase/premium/divider/showcase.tsx
+function r() {
+	return /* @__PURE__ */ n("div", {
+		className: "space-y-6 rounded-xl border border-border bg-card p-5",
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ t("p", {
+					className: "text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground",
+					children: "Divider modes"
+				}), /* @__PURE__ */ t("p", {
+					className: "text-sm text-muted-foreground",
+					children: "Use labels and orientation to keep content hierarchy readable without extra layout noise."
+				})]
+			}),
+			/* @__PURE__ */ t("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((r, i) => /* @__PURE__ */ n("div", {
+					className: "rounded-lg border border-border/80 px-4 py-3",
+					children: [
+						/* @__PURE__ */ t("div", {
+							className: "text-xs text-muted-foreground",
+							children: r.label
+						}),
+						/* @__PURE__ */ t(e, {
+							orientation: "horizontal",
+							label: i === 0 ? void 0 : r.label,
+							...r.props
+						}),
+						/* @__PURE__ */ t("div", {
+							className: "text-sm text-foreground",
+							children: "Row before section"
+						})
+					]
+				}, r.label + i))
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "flex h-28 items-center justify-between gap-4 rounded-lg border border-border/80 bg-background p-4",
+				children: [
+					/* @__PURE__ */ t("div", {
+						className: "text-sm text-foreground",
+						children: "A"
+					}),
+					/* @__PURE__ */ t(e, { orientation: "vertical" }),
+					/* @__PURE__ */ t("div", {
+						className: "text-sm text-foreground",
+						children: "B"
+					}),
+					/* @__PURE__ */ t(e, {
+						orientation: "vertical",
+						dashed: !0
+					}),
+					/* @__PURE__ */ t("div", {
+						className: "text-sm text-foreground",
+						children: "C"
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { r as DividerShowcase };

package/dist/src/showcase/premium/drawer/index.cjs

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

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

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

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

@@ -0,0 +1,21 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { Button, Drawer, DrawerCloseButton } from "tembro"
+
+export function Example() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open drawer</Button>
+      <Drawer
+        open={open}
+        onOpenChange={setOpen}
+        title="Workspace details"
+        description="Quick side-panel context"
+        footer={<DrawerCloseButton>Close</DrawerCloseButton>}
+      >
+        Drawer content
+      </Drawer>
+    </>
+  )
+}`,highlights:[`Contextual side panel`,`Multiple side placements`,`Scrollable body area`,`Footer action support`],scenarios:[{title:`Inspect record`,description:`Open customer, invoice, or task details without losing the current page.`},{title:`Quick edit`,description:`Handle light edits or metadata checks in a side surface.`},{title:`Context panel`,description:`Keep supporting information available next to a dense dashboard.`}],capabilityNotes:[`Use drawer when the user should keep page context while inspecting or editing something secondary.`,`Right-side drawers fit admin inspection flows well.`,`If the content becomes a full task, it may deserve its own route instead.`]};exports.drawerMock=e;

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

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/drawer/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { Button, Drawer, DrawerCloseButton } from \"tembro\"\n\nexport function Example() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open drawer</Button>\n      <Drawer\n        open={open}\n        onOpenChange={setOpen}\n        title=\"Workspace details\"\n        description=\"Quick side-panel context\"\n        footer={<DrawerCloseButton>Close</DrawerCloseButton>}\n      >\n        Drawer content\n      </Drawer>\n    </>\n  )\n}",
+	highlights: [
+		"Contextual side panel",
+		"Multiple side placements",
+		"Scrollable body area",
+		"Footer action support"
+	],
+	scenarios: [
+		{
+			title: "Inspect record",
+			description: "Open customer, invoice, or task details without losing the current page."
+		},
+		{
+			title: "Quick edit",
+			description: "Handle light edits or metadata checks in a side surface."
+		},
+		{
+			title: "Context panel",
+			description: "Keep supporting information available next to a dense dashboard."
+		}
+	],
+	capabilityNotes: [
+		"Use drawer when the user should keep page context while inspecting or editing something secondary.",
+		"Right-side drawers fit admin inspection flows well.",
+		"If the content becomes a full task, it may deserve its own route instead."
+	]
+};
+//#endregion
+export { e as drawerMock };

package/dist/src/showcase/premium/drawer/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/overlay/drawer.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(!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:`Context panel`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Drawer should extend context, not replace routing without reason`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This surface is for inspection and short tasks when the user should keep their place in the current dashboard or table.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Context preserving`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Secondary task`})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Live drawer`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Open the drawer to inspect workspace details without leaving the current surface.`})]}),(0,a.jsx)(t.Button,{onClick:()=>c(!0),children:`Open drawer`})]})}),(0,a.jsx)(r.Drawer,{open:s,onOpenChange:c,title:`Workspace details`,description:`Context panel for billing, members, and operational notes.`,footer:(0,a.jsx)(r.DrawerCloseButton,{children:`Close panel`}),children:(0,a.jsxs)(`div`,{className:`space-y-4`,children:[(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-divider)] p-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`Billing owner`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm aui-text-muted`,children:`Azamat Jurayev`})]}),(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-divider)] p-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`Current note`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm aui-text-muted`,children:`This workspace is waiting for compliance verification before release.`})]})]})}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`Drawer route o‘rnini bosmasligi kerak. U ko‘proq side inspection yoki qisqa edit uchun yaxshi.`})}):null]})}exports.DrawerShowcase=s;

package/dist/src/showcase/premium/drawer/showcase.js

@@ -0,0 +1,103 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { Drawer as n, DrawerCloseButton as r } from "../../../components/overlay/drawer.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/showcase/premium/drawer/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(!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: "Context panel"
+							}),
+							/* @__PURE__ */ a("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Drawer should extend context, not replace routing without reason"
+							}),
+							/* @__PURE__ */ a("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "This surface is for inspection and short tasks when the user should keep their place in the current dashboard or table."
+							})
+						]
+					}), /* @__PURE__ */ o("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ a(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Context preserving"
+						}), /* @__PURE__ */ a(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Secondary task"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ a("section", {
+				className: s,
+				children: /* @__PURE__ */ o("div", {
+					className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
+					children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Live drawer"
+					}), /* @__PURE__ */ a("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: "Open the drawer to inspect workspace details without leaving the current surface."
+					})] }), /* @__PURE__ */ a(e, {
+						onClick: () => u(!0),
+						children: "Open drawer"
+					})]
+				})
+			}),
+			/* @__PURE__ */ a(n, {
+				open: l,
+				onOpenChange: u,
+				title: "Workspace details",
+				description: "Context panel for billing, members, and operational notes.",
+				footer: /* @__PURE__ */ a(r, { children: "Close panel" }),
+				children: /* @__PURE__ */ o("div", {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ o("div", {
+						className: "rounded-2xl border border-[color:var(--aui-divider)] p-4",
+						children: [/* @__PURE__ */ a("p", {
+							className: "text-sm font-medium aui-text-strong",
+							children: "Billing owner"
+						}), /* @__PURE__ */ a("p", {
+							className: "mt-2 text-sm aui-text-muted",
+							children: "Azamat Jurayev"
+						})]
+					}), /* @__PURE__ */ o("div", {
+						className: "rounded-2xl border border-[color:var(--aui-divider)] p-4",
+						children: [/* @__PURE__ */ a("p", {
+							className: "text-sm font-medium aui-text-strong",
+							children: "Current note"
+						}), /* @__PURE__ */ a("p", {
+							className: "mt-2 text-sm aui-text-muted",
+							children: "This workspace is waiting for compliance verification before release."
+						})]
+					})]
+				})
+			}),
+			c === "playground" ? /* @__PURE__ */ a("section", {
+				className: s,
+				children: /* @__PURE__ */ a("p", {
+					className: "text-sm aui-text-muted",
+					children: "Drawer route o‘rnini bosmasligi kerak. U ko‘proq side inspection yoki qisqa edit uchun yaxshi."
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { c as DrawerShowcase };

package/dist/src/showcase/premium/dropdown-menu/index.cjs

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

package/dist/src/showcase/premium/dropdown-menu/index.js

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