npm - tembro - Versions diffs - 3.0.0 → 3.1.1 - Mend

tembro 3.0.0 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2515) hide show

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

@@ -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 ADDED Viewed

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1 @@

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

@@ -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 ADDED Viewed

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

@@ -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/src/showcase/premium/dropdown-menu/mock.cjs ADDED Viewed

@@ -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/src/showcase/premium/dropdown-menu/mock.js ADDED Viewed

@@ -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/src/showcase/premium/dropdown-menu/showcase.cjs ADDED Viewed

@@ -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),[u,d]=r.useState(!1),[f,p]=r.useState(!1);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.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:`Menu close`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:f?`Pinned open`:`Auto close`})]})]})]})}),(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.jsxs)(n.DropdownMenuItem,{children:[(0,i.jsxs)(`span`,{className:`grid gap-0.5`,children:[(0,i.jsx)(`span`,{children:`Open workspace`}),(0,i.jsx)(n.DropdownMenuItemDescription,{children:`Go to the main dashboard route`})]}),(0,i.jsx)(n.DropdownMenuShortcut,{children:`↵`})]}),(0,i.jsx)(n.DropdownMenuItem,{disabled:!0,children:(0,i.jsxs)(`span`,{className:`grid gap-0.5`,children:[(0,i.jsx)(`span`,{children:`Delete from archive`}),(0,i.jsx)(n.DropdownMenuItemDescription,{children:`Locked until retention expires`})]})}),(0,i.jsx)(n.DropdownMenuSeparator,{}),(0,i.jsx)(n.DropdownMenuCheckboxItem,{checked:c,closeOnSelect:!f,onCheckedChange:e=>l(!!e),children:`Notification access`}),(0,i.jsx)(n.DropdownMenuCheckboxItem,{checked:u,closeOnSelect:!f,onCheckedChange:e=>d(!!e),children:`Compact density`}),(0,i.jsx)(n.DropdownMenuCheckboxItem,{checked:f,closeOnSelect:!1,onCheckedChange:e=>p(!!e),children:`Keep menu open`}),(0,i.jsxs)(n.DropdownMenuSub,{children:[(0,i.jsx)(n.DropdownMenuSubTrigger,{children:`Export`}),(0,i.jsxs)(n.DropdownMenuSubContent,{children:[(0,i.jsx)(n.DropdownMenuItem,{children:`CSV`}),(0,i.jsx)(n.DropdownMenuItem,{children:`PDF summary`}),(0,i.jsx)(n.DropdownMenuItem,{children:`JSON payload`})]})]}),(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/src/showcase/premium/dropdown-menu/showcase.js ADDED Viewed

@@ -0,0 +1,166 @@
+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, DropdownMenuItemDescription as o, DropdownMenuLabel as s, DropdownMenuRadioGroup as c, DropdownMenuRadioItem as l, DropdownMenuSeparator as u, DropdownMenuShortcut as d, DropdownMenuSub as f, DropdownMenuSubContent as p, DropdownMenuSubTrigger as m, DropdownMenuTrigger as h } from "../../../components/ui/dropdown-menu/index.js";
+import * as g from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/showcase/premium/dropdown-menu/showcase.tsx
+var y = "border-t border-[color:var(--aui-divider)] py-6";
+function b({ mode: b }) {
+	let [x, S] = g.useState("private"), [C, w] = g.useState(!0), [T, E] = g.useState(!1), [D, O] = g.useState(!1);
+	return /* @__PURE__ */ v("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ _("section", {
+				className: "pb-6",
+				children: /* @__PURE__ */ v("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between",
+					children: [/* @__PURE__ */ v("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ _("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Dropdown menu"
+							}),
+							/* @__PURE__ */ _("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Secondary actions belong here"
+							}),
+							/* @__PURE__ */ _("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__ */ v("div", {
+						className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
+						children: [
+							/* @__PURE__ */ v("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ _("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Status"
+								}), /* @__PURE__ */ _("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: x === "public" ? "Public" : "Private"
+								})]
+							}),
+							/* @__PURE__ */ v("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ _("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Notifications"
+								}), /* @__PURE__ */ _("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: C ? "On" : "Off"
+								})]
+							}),
+							/* @__PURE__ */ v("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ _("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Route"
+								}), /* @__PURE__ */ _("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: b === "playground" ? "Interactive" : "Docs"
+								})]
+							}),
+							/* @__PURE__ */ v("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ _("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Menu close"
+								}), /* @__PURE__ */ _("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: D ? "Pinned open" : "Auto close"
+								})]
+							})
+						]
+					})]
+				})
+			}),
+			/* @__PURE__ */ _("section", {
+				className: y,
+				children: /* @__PURE__ */ v("div", {
+					className: "flex flex-col gap-5 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ v("div", {
+						className: "max-w-xl",
+						children: [/* @__PURE__ */ _("p", {
+							className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+							children: "Live menu"
+						}), /* @__PURE__ */ _("h4", {
+							className: "mt-2 text-xl font-semibold tracking-tight aui-text-strong",
+							children: "Open and verify small state changes"
+						})]
+					}), /* @__PURE__ */ v(t, { children: [/* @__PURE__ */ _(h, { children: /* @__PURE__ */ _(e, { children: "Open menu" }) }), /* @__PURE__ */ v(r, { children: [
+						/* @__PURE__ */ _(s, { children: "Workspace actions" }),
+						/* @__PURE__ */ v(a, { children: [/* @__PURE__ */ v("span", {
+							className: "grid gap-0.5",
+							children: [/* @__PURE__ */ _("span", { children: "Open workspace" }), /* @__PURE__ */ _(o, { children: "Go to the main dashboard route" })]
+						}), /* @__PURE__ */ _(d, { children: "↵" })] }),
+						/* @__PURE__ */ _(a, {
+							disabled: !0,
+							children: /* @__PURE__ */ v("span", {
+								className: "grid gap-0.5",
+								children: [/* @__PURE__ */ _("span", { children: "Delete from archive" }), /* @__PURE__ */ _(o, { children: "Locked until retention expires" })]
+							})
+						}),
+						/* @__PURE__ */ _(u, {}),
+						/* @__PURE__ */ _(n, {
+							checked: C,
+							closeOnSelect: !D,
+							onCheckedChange: (e) => w(!!e),
+							children: "Notification access"
+						}),
+						/* @__PURE__ */ _(n, {
+							checked: T,
+							closeOnSelect: !D,
+							onCheckedChange: (e) => E(!!e),
+							children: "Compact density"
+						}),
+						/* @__PURE__ */ _(n, {
+							checked: D,
+							closeOnSelect: !1,
+							onCheckedChange: (e) => O(!!e),
+							children: "Keep menu open"
+						}),
+						/* @__PURE__ */ v(f, { children: [/* @__PURE__ */ _(m, { children: "Export" }), /* @__PURE__ */ v(p, { children: [
+							/* @__PURE__ */ _(a, { children: "CSV" }),
+							/* @__PURE__ */ _(a, { children: "PDF summary" }),
+							/* @__PURE__ */ _(a, { children: "JSON payload" })
+						] })] }),
+						/* @__PURE__ */ _(i, { children: /* @__PURE__ */ v(c, {
+							value: x,
+							onValueChange: (e) => S(e),
+							children: [/* @__PURE__ */ _(l, {
+								value: "public",
+								children: "Public"
+							}), /* @__PURE__ */ _(l, {
+								value: "private",
+								children: "Private"
+							})]
+						}) }),
+						/* @__PURE__ */ _(u, {}),
+						/* @__PURE__ */ v(a, {
+							variant: "destructive",
+							children: ["Remove workspace", /* @__PURE__ */ _(d, { children: "⌘D" })]
+						})
+					] })] })]
+				})
+			}),
+			/* @__PURE__ */ _("section", {
+				className: y,
+				children: /* @__PURE__ */ _("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__ */ _("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 { b as DropdownMenuShowcase };

package/dist/{showcase/premium/rich-text-editor → src/showcase/premium/dual-list-picker}/index.cjs RENAMED Viewed

	@@ -1 +1 @@
1	- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./mock.cjs"),t=require("./showcase.cjs");exports.~~RichTextEditorShowcase~~=t.~~RichTextEditorShowcase~~,exports.~~richTextEditorMock~~=e.~~richTextEditorMock~~;
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/src/showcase/premium/dual-list-picker/index.js ADDED Viewed

@@ -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 };

package/dist/src/showcase/premium/dual-list-picker/mock.cjs ADDED Viewed

@@ -0,0 +1,20 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { DualListPicker } from "tembro"
+const items = [
+  { label: "Analytics", value: "analytics" },
+  { label: "Reports", value: "reports" },
+]
+export function Example() {
+  const [picked, setPicked] = useState(["analytics"])
+  return (
+    <DualListPicker
+      items={items}
+      picked={picked}
+      onPickedChange={setPicked}
+      availableTitle="Available"
+      pickedTitle="Selected"
+    />
+  )
+}`,cliCommand:`npx tembro add dual-list-picker`,highlights:[`Move items between available/selected lists`,`Supports disabled choices`,`Simple controlled value pattern`],scenarios:[{title:`Role permissions`,description:`Select which modules are available for a user role.`},{title:`Feature toggles`,description:`Move capabilities between disabled and enabled buckets.`}]};exports.dualListPickerMock=e;

package/dist/src/showcase/premium/dual-list-picker/mock.js ADDED Viewed

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/dual-list-picker/mock.ts
+var e = {
+	code: "import { DualListPicker } from \"tembro\"\n\nconst items = [\n  { label: \"Analytics\", value: \"analytics\" },\n  { label: \"Reports\", value: \"reports\" },\n]\n\nexport function Example() {\n  const [picked, setPicked] = useState([\"analytics\"])\n\n  return (\n    <DualListPicker\n      items={items}\n      picked={picked}\n      onPickedChange={setPicked}\n      availableTitle=\"Available\"\n      pickedTitle=\"Selected\"\n    />\n  )\n}",
+	cliCommand: "npx tembro add dual-list-picker",
+	highlights: [
+		"Move items between available/selected lists",
+		"Supports disabled choices",
+		"Simple controlled value pattern"
+	],
+	scenarios: [{
+		title: "Role permissions",
+		description: "Select which modules are available for a user role."
+	}, {
+		title: "Feature toggles",
+		description: "Move capabilities between disabled and enabled buckets."
+	}]
+};
+//#endregion
+export { e as dualListPickerMock };

package/dist/src/showcase/premium/dual-list-picker/showcase.cjs ADDED Viewed

@@ -0,0 +1 @@

+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/modern/dual-list-picker.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i=[{label:`Analytics`,value:`analytics`},{label:`Reports`,value:`reports`},{label:`Integrations`,value:`integrations`},{label:`Billing`,value:`billing`},{label:`Notifications`,value:`notifications`,disabled:!0}];function a(){let[e,a]=n.useState([`analytics`]);return(0,r.jsxs)(`div`,{className:`space-y-4`,children:[(0,r.jsxs)(`p`,{className:`text-sm text-muted-foreground`,children:[`Selected: `,e.join(`, `)||`None`]}),(0,r.jsx)(t.DualListPicker,{items:i,picked:e,onPickedChange:a,availableTitle:`All modules`,pickedTitle:`Enabled modules`}),(0,r.jsx)(`button`,{type:`button`,className:`rounded-md border px-3 py-1.5 text-sm`,onClick:()=>a([]),children:`Clear selection`})]})}exports.DualListPickerShowcase=a;