tembro 1.0.0

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

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

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

@@ -0,0 +1,8 @@
+export type DialogDemoItem = {
+    label: string;
+    triggerVariant: "default" | "destructive";
+    title: string;
+    description: string;
+    confirmLabel: string;
+    confirmVariant: "default" | "destructive";
+};

package/dist/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/showcase/premium/divider/index.d.ts

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

package/dist/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/showcase/premium/divider/mock.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Divider } from "@/index"
+
+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/showcase/premium/divider/mock.d.ts

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

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

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/divider/mock.ts
+var e = {
+	code: "import { Divider } from \"@/index\"\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/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/showcase/premium/divider/showcase.d.ts

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

package/dist/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/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/showcase/premium/drawer/index.d.ts

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

package/dist/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/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/showcase/premium/drawer/mock.d.ts

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

package/dist/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/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/showcase/premium/drawer/showcase.d.ts

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

package/dist/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/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/showcase/premium/dropdown-menu/index.d.ts

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

package/dist/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 };

package/dist/showcase/premium/dropdown-menu/mock.cjs

@@ -0,0 +1,48 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuShortcut,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "tembro"
+
+export function Example() {
+  const [status, setStatus] = useState("private")
+  const [notifications, setNotifications] = useState(true)
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>Open actions</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>Workspace actions</DropdownMenuLabel>
+        <DropdownMenuItem>Open workspace</DropdownMenuItem>
+        <DropdownMenuItem disabled>Delete from archive</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem checked={notifications} onCheckedChange={(value) => setNotifications(Boolean(value))}>
+          Notification access
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem checked>
+          Show hidden sections
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>Visibility</DropdownMenuLabel>
+        <DropdownMenuRadioGroup value={status} onValueChange={setStatus}>
+          <DropdownMenuRadioItem value="public">Public</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="private">Private</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="internal">Internal</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+        <DropdownMenuItem variant="destructive">
+          Remove workspace
+          <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}`,htmlCode:`<button data-slot="dropdown-trigger">Open menu</button>`,cliCommand:`npx tembro add dropdown-menu`,highlights:[`Action items`,`Checkbox and radio items`,`Shortcut labels`,`Disabled/danger variants`],relatedBlockSlugs:[`settings-form`,`users-table`,`dashboard-starter`],scenarios:[{title:`Action menu`,description:`Use stable command-like menus for compact row actions.`},{title:`Bulk controls`,description:`Checkbox and radio items make complex menu states explicit.`},{title:`Keyboard hints`,description:`Render shortcuts to teach power users.`},{title:`Destructive entry`,description:`Keep dangerous actions visually and semantically distinct.`}],capabilityNotes:[`Use DropdownMenu for compact choice surfaces that must stay within local context.`,`Keep disabled actions visible to preserve discoverability of temporarily unavailable commands.`,`Reserve destructive variants for actions that remove data or change ownership.`,`Map menu items to real route or action handlers and avoid deep workflows inside a single menu item.`]};exports.dropdownMenuMock=e;

package/dist/showcase/premium/dropdown-menu/mock.d.ts

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

package/dist/showcase/premium/dropdown-menu/mock.js

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/dropdown-menu/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuShortcut,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"tembro\"\n\nexport function Example() {\n  const [status, setStatus] = useState(\"private\")\n  const [notifications, setNotifications] = useState(true)\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger>Open actions</DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuLabel>Workspace actions</DropdownMenuLabel>\n        <DropdownMenuItem>Open workspace</DropdownMenuItem>\n        <DropdownMenuItem disabled>Delete from archive</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuCheckboxItem checked={notifications} onCheckedChange={(value) => setNotifications(Boolean(value))}>\n          Notification access\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem checked>\n          Show hidden sections\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuLabel>Visibility</DropdownMenuLabel>\n        <DropdownMenuRadioGroup value={status} onValueChange={setStatus}>\n          <DropdownMenuRadioItem value=\"public\">Public</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"private\">Private</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"internal\">Internal</DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n        <DropdownMenuItem variant=\"destructive\">\n          Remove workspace\n          <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}",
+	htmlCode: "<button data-slot=\"dropdown-trigger\">Open menu</button>",
+	cliCommand: "npx tembro add dropdown-menu",
+	highlights: [
+		"Action items",
+		"Checkbox and radio items",
+		"Shortcut labels",
+		"Disabled/danger variants"
+	],
+	relatedBlockSlugs: [
+		"settings-form",
+		"users-table",
+		"dashboard-starter"
+	],
+	scenarios: [
+		{
+			title: "Action menu",
+			description: "Use stable command-like menus for compact row actions."
+		},
+		{
+			title: "Bulk controls",
+			description: "Checkbox and radio items make complex menu states explicit."
+		},
+		{
+			title: "Keyboard hints",
+			description: "Render shortcuts to teach power users."
+		},
+		{
+			title: "Destructive entry",
+			description: "Keep dangerous actions visually and semantically distinct."
+		}
+	],
+	capabilityNotes: [
+		"Use DropdownMenu for compact choice surfaces that must stay within local context.",
+		"Keep disabled actions visible to preserve discoverability of temporarily unavailable commands.",
+		"Reserve destructive variants for actions that remove data or change ownership.",
+		"Map menu items to real route or action handlers and avoid deep workflows inside a single menu item."
+	]
+};
+//#endregion
+export { e as dropdownMenuMock };

package/dist/showcase/premium/dropdown-menu/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/dropdown-menu/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`border-t border-[color:var(--aui-divider)] py-6`;function o({mode:e}){let[o,s]=r.useState(`private`),[c,l]=r.useState(!0);return(0,i.jsxs)(`div`,{className:`space-y-0`,children:[(0,i.jsx)(`section`,{className:`pb-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between`,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:`Dropdown menu`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Secondary actions belong here`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Use one trigger for quick actions, tiny settings, and destructive follow-ups.`})]}),(0,i.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Status`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:o===`public`?`Public`:`Private`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Notifications`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:c?`On`:`Off`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Route`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:e===`playground`?`Interactive`:`Docs`})]})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-5 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Live menu`}),(0,i.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:`Open and verify small state changes`})]}),(0,i.jsxs)(n.DropdownMenu,{children:[(0,i.jsx)(n.DropdownMenuTrigger,{children:(0,i.jsx)(t.Button,{children:`Open menu`})}),(0,i.jsxs)(n.DropdownMenuContent,{children:[(0,i.jsx)(n.DropdownMenuLabel,{children:`Workspace actions`}),(0,i.jsx)(n.DropdownMenuItem,{children:`Open workspace`}),(0,i.jsx)(n.DropdownMenuItem,{disabled:!0,children:`Delete from archive`}),(0,i.jsx)(n.DropdownMenuSeparator,{}),(0,i.jsx)(n.DropdownMenuCheckboxItem,{checked:c,onCheckedChange:e=>l(!!e),children:`Notification access`}),(0,i.jsx)(n.DropdownMenuGroup,{children:(0,i.jsxs)(n.DropdownMenuRadioGroup,{value:o,onValueChange:e=>s(e),children:[(0,i.jsx)(n.DropdownMenuRadioItem,{value:`public`,children:`Public`}),(0,i.jsx)(n.DropdownMenuRadioItem,{value:`private`,children:`Private`})]})}),(0,i.jsx)(n.DropdownMenuSeparator,{}),(0,i.jsxs)(n.DropdownMenuItem,{variant:`destructive`,children:[`Remove workspace`,(0,i.jsx)(n.DropdownMenuShortcut,{children:`⌘D`})]})]})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Keep the main CTA outside the menu.`,`Use radio and checkbox items only for very small settings.`,`Destructive items should still be explicit and easy to notice.`].map(e=>(0,i.jsx)(`div`,{className:`border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0`,children:e},e))})})]})}exports.DropdownMenuShowcase=o;

package/dist/showcase/premium/dropdown-menu/showcase.d.ts

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

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

@@ -0,0 +1,132 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { DropdownMenu as t, DropdownMenuCheckboxItem as n, DropdownMenuContent as r, DropdownMenuGroup as i, DropdownMenuItem as a, DropdownMenuLabel as o, DropdownMenuRadioGroup as s, DropdownMenuRadioItem as c, DropdownMenuSeparator as l, DropdownMenuShortcut as u, DropdownMenuTrigger as d } from "../../../components/ui/dropdown-menu/index.js";
+import * as f from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/showcase/premium/dropdown-menu/showcase.tsx
+var h = "border-t border-[color:var(--aui-divider)] py-6";
+function g({ mode: g }) {
+	let [_, v] = f.useState("private"), [y, b] = f.useState(!0);
+	return /* @__PURE__ */ m("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ p("section", {
+				className: "pb-6",
+				children: /* @__PURE__ */ m("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between",
+					children: [/* @__PURE__ */ m("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ p("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Dropdown menu"
+							}),
+							/* @__PURE__ */ p("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Secondary actions belong here"
+							}),
+							/* @__PURE__ */ p("p", {
+								className: "mt-3 text-sm leading-6 aui-text-muted",
+								children: "Use one trigger for quick actions, tiny settings, and destructive follow-ups."
+							})
+						]
+					}), /* @__PURE__ */ m("div", {
+						className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
+						children: [
+							/* @__PURE__ */ m("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ p("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Status"
+								}), /* @__PURE__ */ p("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: _ === "public" ? "Public" : "Private"
+								})]
+							}),
+							/* @__PURE__ */ m("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ p("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Notifications"
+								}), /* @__PURE__ */ p("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: y ? "On" : "Off"
+								})]
+							}),
+							/* @__PURE__ */ m("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ p("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Route"
+								}), /* @__PURE__ */ p("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: g === "playground" ? "Interactive" : "Docs"
+								})]
+							})
+						]
+					})]
+				})
+			}),
+			/* @__PURE__ */ p("section", {
+				className: h,
+				children: /* @__PURE__ */ m("div", {
+					className: "flex flex-col gap-5 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ m("div", {
+						className: "max-w-xl",
+						children: [/* @__PURE__ */ p("p", {
+							className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+							children: "Live menu"
+						}), /* @__PURE__ */ p("h4", {
+							className: "mt-2 text-xl font-semibold tracking-tight aui-text-strong",
+							children: "Open and verify small state changes"
+						})]
+					}), /* @__PURE__ */ m(t, { children: [/* @__PURE__ */ p(d, { children: /* @__PURE__ */ p(e, { children: "Open menu" }) }), /* @__PURE__ */ m(r, { children: [
+						/* @__PURE__ */ p(o, { children: "Workspace actions" }),
+						/* @__PURE__ */ p(a, { children: "Open workspace" }),
+						/* @__PURE__ */ p(a, {
+							disabled: !0,
+							children: "Delete from archive"
+						}),
+						/* @__PURE__ */ p(l, {}),
+						/* @__PURE__ */ p(n, {
+							checked: y,
+							onCheckedChange: (e) => b(!!e),
+							children: "Notification access"
+						}),
+						/* @__PURE__ */ p(i, { children: /* @__PURE__ */ m(s, {
+							value: _,
+							onValueChange: (e) => v(e),
+							children: [/* @__PURE__ */ p(c, {
+								value: "public",
+								children: "Public"
+							}), /* @__PURE__ */ p(c, {
+								value: "private",
+								children: "Private"
+							})]
+						}) }),
+						/* @__PURE__ */ p(l, {}),
+						/* @__PURE__ */ m(a, {
+							variant: "destructive",
+							children: ["Remove workspace", /* @__PURE__ */ p(u, { children: "⌘D" })]
+						})
+					] })] })]
+				})
+			}),
+			/* @__PURE__ */ p("section", {
+				className: h,
+				children: /* @__PURE__ */ p("div", {
+					className: "border-y border-[color:var(--aui-divider)]",
+					children: [
+						"Keep the main CTA outside the menu.",
+						"Use radio and checkbox items only for very small settings.",
+						"Destructive items should still be explicit and easy to notice."
+					].map((e) => /* @__PURE__ */ p("div", {
+						className: "border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0",
+						children: e
+					}, e))
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { g as DropdownMenuShowcase };

package/dist/showcase/premium/dual-list-picker/index.cjs

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

package/dist/showcase/premium/dual-list-picker/index.d.ts

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

package/dist/showcase/premium/dual-list-picker/index.js

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