tembro 1.0.0

package/dist/showcase/premium/sheet-shell/showcase.js

@@ -0,0 +1,137 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { SheetShell as n } from "../../../components/overlay/sheet-shell.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/sheet-shell/showcase.tsx
+var o = "border-t border-[color:var(--aui-divider)] py-6";
+function s() {
+	let [s, c] = r.useState("right"), [l, u] = r.useState(!1);
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ i("section", {
+				className: "pb-6",
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between",
+					children: [/* @__PURE__ */ a("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ i("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Sheet shell"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Keep the page visible while editing"
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "mt-3 text-sm leading-6 aui-text-muted",
+								children: "Sheet is for context-preserving edits and side details that should not fully block the screen."
+							})
+						]
+					}), /* @__PURE__ */ a("div", {
+						className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
+						children: [
+							/* @__PURE__ */ a("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ i("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Side"
+								}), /* @__PURE__ */ i("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong capitalize",
+									children: s
+								})]
+							}),
+							/* @__PURE__ */ a("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ i("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Use for"
+								}), /* @__PURE__ */ i("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: "Quick edits"
+								})]
+							}),
+							/* @__PURE__ */ a("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ i("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Fallback"
+								}), /* @__PURE__ */ i("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: "Dialog"
+								})]
+							})
+						]
+					})]
+				})
+			}),
+			/* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-3",
+					children: [
+						/* @__PURE__ */ i(e, {
+							onClick: () => u(!0),
+							children: "Open sheet"
+						}),
+						/* @__PURE__ */ i(e, {
+							variant: "outline",
+							onClick: () => c((e) => e === "right" ? "left" : e === "left" ? "top" : e === "top" ? "bottom" : "right"),
+							children: "Cycle side"
+						}),
+						/* @__PURE__ */ i(t, {
+							variant: "outline",
+							children: "Context edit"
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ i("div", {
+					className: "border-y border-[color:var(--aui-divider)]",
+					children: [
+						"Use a sheet when returning to the same page context matters.",
+						"Keep the body focused on one task or one record.",
+						"If the interaction becomes global or destructive, switch to a stronger surface."
+					].map((e) => /* @__PURE__ */ i("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))
+				})
+			}),
+			/* @__PURE__ */ i(n, {
+				open: l,
+				onOpenChange: u,
+				side: s,
+				title: "Quick edit",
+				description: "Side sheets are best for quick updates and row actions.",
+				footer: /* @__PURE__ */ a("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ i(e, {
+						variant: "outline",
+						onClick: () => u(!1),
+						children: "Cancel"
+					}), /* @__PURE__ */ i(e, {
+						onClick: () => u(!1),
+						children: "Save"
+					})]
+				}),
+				children: /* @__PURE__ */ a("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ i("p", {
+						className: "text-sm aui-text-muted",
+						children: "Use this panel for quick edit actions and context-aware updates."
+					}), /* @__PURE__ */ i("p", {
+						className: "text-xs uppercase tracking-[0.22em] aui-text-muted",
+						children: "Keep the main page visible while editing."
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { s as SheetShellShowcase };

package/dist/showcase/premium/sidebar-nav/index.cjs

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

package/dist/showcase/premium/sidebar-nav/index.d.ts

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

package/dist/showcase/premium/sidebar-nav/index.js

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

package/dist/showcase/premium/sidebar-nav/mock.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { SidebarNav } from "tembro"
+
+const items = [
+  { key: "overview", label: "Overview", href: "/overview" },
+  { key: "resources", label: "Resources", href: "/resources", active: true },
+  { key: "settings", label: "Settings", href: "/settings", disabled: true },
+]
+
+export function Example() {
+  return <SidebarNav items={items} />
+}`,highlights:[`Compact and active states`,`Disabled route handling`,`Render hooks for custom link and item`,`Works with controlled active item`],scenarios:[{title:`Left navigation`,description:`Use SidebarNav for primary route anchors and command links.`},{title:`Custom links`,description:`Render each link through Next/React Router integration.`},{title:`Collapsed rail`,description:`Use compact mode on narrow sidebars and drawers.`}],capabilityNotes:["Keep `items` as source of truth for route and badge metadata.",`Preserve keys and active state consistency across re-renders.`,`For keyboard users, keep labels human-readable and non-empty.`,`Disabled items should still show intent but block interaction clearly.`]};exports.sidebarNavMock=e;

package/dist/showcase/premium/sidebar-nav/mock.d.ts

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

package/dist/showcase/premium/sidebar-nav/mock.js

@@ -0,0 +1,32 @@
+//#region src/showcase/premium/sidebar-nav/mock.ts
+var e = {
+	code: "import { SidebarNav } from \"tembro\"\n\nconst items = [\n  { key: \"overview\", label: \"Overview\", href: \"/overview\" },\n  { key: \"resources\", label: \"Resources\", href: \"/resources\", active: true },\n  { key: \"settings\", label: \"Settings\", href: \"/settings\", disabled: true },\n]\n\nexport function Example() {\n  return <SidebarNav items={items} />\n}",
+	highlights: [
+		"Compact and active states",
+		"Disabled route handling",
+		"Render hooks for custom link and item",
+		"Works with controlled active item"
+	],
+	scenarios: [
+		{
+			title: "Left navigation",
+			description: "Use SidebarNav for primary route anchors and command links."
+		},
+		{
+			title: "Custom links",
+			description: "Render each link through Next/React Router integration."
+		},
+		{
+			title: "Collapsed rail",
+			description: "Use compact mode on narrow sidebars and drawers."
+		}
+	],
+	capabilityNotes: [
+		"Keep `items` as source of truth for route and badge metadata.",
+		"Preserve keys and active state consistency across re-renders.",
+		"For keyboard users, keep labels human-readable and non-empty.",
+		"Disabled items should still show intent but block interaction clearly."
+	]
+};
+//#endregion
+export { e as sidebarNavMock };

package/dist/showcase/premium/sidebar-nav/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/layout/sidebar-nav.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=[{key:`overview`,label:`Overview`,href:`/overview`},{key:`products`,label:`Products`,href:`/products`},{key:`settings`,label:`Settings`,href:`/settings`,disabled:!0},{key:`billing`,label:`Billing`,href:`/billing`}],o=`border-t border-[color:var(--aui-divider)] py-6`;function s({mode:e}){let[s,c]=r.useState(a[0]?.key??`overview`),[l,u]=r.useState(e===`playground`),d=r.useMemo(()=>a.map(e=>({...e,active:e.key===s,onSelect:()=>c(e.key)})),[s]),f=a.find(e=>e.key===s)?.label??`Overview`;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-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.26em] aui-text-muted`,children:`Route navigation`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Sidebar nav should orient the page fast`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Show active route, disabled destination, and collapsed behavior in one calm preview instead of a standalone toy sidebar.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Active route`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Disabled item`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Collapsed`})]})]})}),(0,i.jsxs)(`div`,{className:`${o} grid gap-4 xl:grid-cols-[0.92fr_1.08fr]`,children:[(0,i.jsxs)(`section`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Workspace navigation`}),(0,i.jsx)(`div`,{className:`mt-3 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-3`,children:(0,i.jsx)(n.SidebarNav,{items:d,collapsed:l})})]}),(0,i.jsxs)(`section`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current context`}),(0,i.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:f}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Collapsed mode is useful only when the shell still leaves enough context elsewhere. Do not collapse navigation if labels are the only orientation cue on the page.`}),e===`playground`?(0,i.jsx)(`button`,{type:`button`,onClick:()=>u(e=>!e),className:`mt-4 rounded-full border border-[color:var(--aui-divider)] px-4 py-2 text-sm aui-text-muted transition hover:text-[color:var(--aui-fg)]`,children:l?`Expand nav`:`Collapse nav`}):null]})]})]})}exports.SidebarNavShowcase=s;

package/dist/showcase/premium/sidebar-nav/showcase.d.ts

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

package/dist/showcase/premium/sidebar-nav/showcase.js

@@ -0,0 +1,113 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { SidebarNav as t } from "../../../components/layout/sidebar-nav.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/sidebar-nav/showcase.tsx
+var a = [
+	{
+		key: "overview",
+		label: "Overview",
+		href: "/overview"
+	},
+	{
+		key: "products",
+		label: "Products",
+		href: "/products"
+	},
+	{
+		key: "settings",
+		label: "Settings",
+		href: "/settings",
+		disabled: !0
+	},
+	{
+		key: "billing",
+		label: "Billing",
+		href: "/billing"
+	}
+], o = "border-t border-[color:var(--aui-divider)] py-6";
+function s({ mode: s }) {
+	let [c, l] = n.useState(a[0]?.key ?? "overview"), [u, d] = n.useState(s === "playground"), f = n.useMemo(() => a.map((e) => ({
+		...e,
+		active: e.key === c,
+		onSelect: () => l(e.key)
+	})), [c]), p = a.find((e) => e.key === c)?.label ?? "Overview";
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-0",
+		children: [/* @__PURE__ */ r("section", {
+			className: "pb-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: "Route navigation"
+						}),
+						/* @__PURE__ */ r("h3", {
+							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+							children: "Sidebar nav should orient the page fast"
+						}),
+						/* @__PURE__ */ r("p", {
+							className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+							children: "Show active route, disabled destination, and collapsed behavior in one calm preview instead of a standalone toy sidebar."
+						})
+					]
+				}), /* @__PURE__ */ i("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Active route"
+						}),
+						/* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Disabled item"
+						}),
+						/* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Collapsed"
+						})
+					]
+				})]
+			})
+		}), /* @__PURE__ */ i("div", {
+			className: `${o} grid gap-4 xl:grid-cols-[0.92fr_1.08fr]`,
+			children: [/* @__PURE__ */ i("section", { children: [/* @__PURE__ */ r("p", {
+				className: "text-sm font-medium aui-text-muted",
+				children: "Workspace navigation"
+			}), /* @__PURE__ */ r("div", {
+				className: "mt-3 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-3",
+				children: /* @__PURE__ */ r(t, {
+					items: f,
+					collapsed: u
+				})
+			})] }), /* @__PURE__ */ i("section", { children: [
+				/* @__PURE__ */ r("p", {
+					className: "text-sm font-medium aui-text-muted",
+					children: "Current context"
+				}),
+				/* @__PURE__ */ r("p", {
+					className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+					children: p
+				}),
+				/* @__PURE__ */ r("p", {
+					className: "mt-2 text-sm leading-6 aui-text-muted",
+					children: "Collapsed mode is useful only when the shell still leaves enough context elsewhere. Do not collapse navigation if labels are the only orientation cue on the page."
+				}),
+				s === "playground" ? /* @__PURE__ */ r("button", {
+					type: "button",
+					onClick: () => d((e) => !e),
+					className: "mt-4 rounded-full border border-[color:var(--aui-divider)] px-4 py-2 text-sm aui-text-muted transition hover:text-[color:var(--aui-fg)]",
+					children: u ? "Expand nav" : "Collapse nav"
+				}) : null
+			] })]
+		})]
+	});
+}
+//#endregion
+export { s as SidebarNavShowcase };

package/dist/showcase/premium/simple-select/index.cjs

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

package/dist/showcase/premium/simple-select/index.d.ts

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

package/dist/showcase/premium/simple-select/index.js

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

package/dist/showcase/premium/simple-select/mock.cjs

@@ -0,0 +1,29 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { Button, SimpleSelect } from "@/index"
+
+const selectOptions = [
+  { value: "public", label: "Public", disabled: false },
+  { value: "private", label: "Private", disabled: false },
+  { value: "internal", label: "Internal", disabled: false },
+  { value: "archived", label: "Archived", disabled: true },
+]
+
+export function Example() {
+  const [value, setValue] = useState("private")
+
+  return (
+    <div className="space-y-3">
+      <SimpleSelect
+        options={selectOptions}
+        value={value}
+        onValueChange={(nextValue) => setValue(nextValue ?? "private")}
+        placeholder="Visibility"
+        size="sm"
+      />
+      <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-muted">
+        Current visibility: <strong>{value}</strong>
+      </div>
+      <Button variant="outline" onClick={() => setValue("public")}>Reset public</Button>
+    </div>
+  )
+}`,htmlCode:`<button data-slot="simple-select-trigger">Open options</button>`,cliCommand:`npx tembro add simple-select`,highlights:[`Controlled usage`,`Static options`,`Clear default value`,`Disabled option handling`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Controlled visibility`,description:"Use controlled `value` when parent flow tracks visibility state."},{title:`Static catalog`,description:`Use fixed options for status and tier fields.`},{title:`Clear/reset flow`,description:`Expose a reset path before destructive transitions.`},{title:`Compact trigger`,description:`Use small size in dense row or toolbar layouts.`}],capabilityNotes:[`SimpleSelect is best for local option lists that don't require async loading.`,`Avoid rebuilding options each render; memoize if options are computed.`,`Use disabled options to communicate temporarily unavailable targets.`,`Always keep selected value in a controlled parent when used in complex forms.`]};exports.simpleSelectMock=e;

package/dist/showcase/premium/simple-select/mock.d.ts

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

package/dist/showcase/premium/simple-select/mock.js

@@ -0,0 +1,43 @@
+//#region src/showcase/premium/simple-select/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { Button, SimpleSelect } from \"@/index\"\n\nconst selectOptions = [\n  { value: \"public\", label: \"Public\", disabled: false },\n  { value: \"private\", label: \"Private\", disabled: false },\n  { value: \"internal\", label: \"Internal\", disabled: false },\n  { value: \"archived\", label: \"Archived\", disabled: true },\n]\n\nexport function Example() {\n  const [value, setValue] = useState(\"private\")\n\n  return (\n    <div className=\"space-y-3\">\n      <SimpleSelect\n        options={selectOptions}\n        value={value}\n        onValueChange={(nextValue) => setValue(nextValue ?? \"private\")}\n        placeholder=\"Visibility\"\n        size=\"sm\"\n      />\n      <div className=\"rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-muted\">\n        Current visibility: <strong>{value}</strong>\n      </div>\n      <Button variant=\"outline\" onClick={() => setValue(\"public\")}>Reset public</Button>\n    </div>\n  )\n}",
+	htmlCode: "<button data-slot=\"simple-select-trigger\">Open options</button>",
+	cliCommand: "npx tembro add simple-select",
+	highlights: [
+		"Controlled usage",
+		"Static options",
+		"Clear default value",
+		"Disabled option handling"
+	],
+	relatedBlockSlugs: [
+		"settings-form",
+		"users-table",
+		"crm-dashboard"
+	],
+	scenarios: [
+		{
+			title: "Controlled visibility",
+			description: "Use controlled `value` when parent flow tracks visibility state."
+		},
+		{
+			title: "Static catalog",
+			description: "Use fixed options for status and tier fields."
+		},
+		{
+			title: "Clear/reset flow",
+			description: "Expose a reset path before destructive transitions."
+		},
+		{
+			title: "Compact trigger",
+			description: "Use small size in dense row or toolbar layouts."
+		}
+	],
+	capabilityNotes: [
+		"SimpleSelect is best for local option lists that don't require async loading.",
+		"Avoid rebuilding options each render; memoize if options are computed.",
+		"Use disabled options to communicate temporarily unavailable targets.",
+		"Always keep selected value in a controlled parent when used in complex forms."
+	]
+};
+//#endregion
+export { e as simpleSelectMock };

package/dist/showcase/premium/simple-select/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/inputs/simple-select.cjs"),r=require("../../component-route-data.cjs");let i=require("react"),a=require("react/jsx-runtime");function o({mode:o}){let[s,c]=(0,i.useState)(`private`),[l,u]=(0,i.useState)(0),d=r.routeSimpleSelectOptions,f=d.find(e=>e.value===s);return(0,a.jsxs)(`div`,{className:`space-y-4`,children:[(0,a.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`SimpleSelect is the lightweight static member`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Use it only when you want a thinner wrapper around the main Select surface for static option lists.`}),(0,a.jsxs)(`div`,{className:`mt-3 flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Badge,{variant:`outline`,children:`Static options`}),(0,a.jsx)(t.Badge,{variant:`outline`,children:`Searchable`}),(0,a.jsx)(t.Badge,{variant:`outline`,children:`Clearable`})]})]}),(0,a.jsx)(n.SimpleSelect,{value:s,onValueChange:e=>c(e),options:d,placeholder:`Visibility`,searchable:!0,clearable:!0}),(0,a.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Current value`}),(0,a.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:f?.label??`Nothing selected`})]}),(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Behavior`}),(0,a.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Clear icon and disabled items behave inside the same trigger model.`})]}),(0,a.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`When to use`}),(0,a.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Choose this for local option lists before moving to AsyncSelect.`})]})]}),(0,a.jsx)(n.SimpleSelect,{defaultValue:`public`,options:d},l),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(e.Button,{variant:`outline`,size:`sm`,onClick:()=>c(void 0),children:`Clear controlled`}),(0,a.jsx)(e.Button,{variant:`outline`,size:`sm`,onClick:()=>u(e=>e+1),children:`Reset uncontrolled sample`})]}),o===`playground`?(0,a.jsx)(`p`,{className:`aui-text-muted rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:`Controlled selection can power filter states, while uncontrolled default usage is fine for one-off static forms. If the list becomes remote, move back to the Select family and choose AsyncSelect.`}):null]})}exports.SimpleSelectShowcase=o;

package/dist/showcase/premium/simple-select/showcase.d.ts

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

package/dist/showcase/premium/simple-select/showcase.js

@@ -0,0 +1,112 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { SimpleSelect as n } from "../../../components/inputs/simple-select.js";
+import { routeSimpleSelectOptions as r } from "../../component-route-data.js";
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/showcase/premium/simple-select/showcase.tsx
+function s({ mode: s }) {
+	let [c, l] = i("private"), [u, d] = i(0), f = r, p = f.find((e) => e.value === c);
+	return /* @__PURE__ */ o("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
+				children: [
+					/* @__PURE__ */ a("p", {
+						className: "text-sm font-medium aui-text-strong",
+						children: "SimpleSelect is the lightweight static member"
+					}),
+					/* @__PURE__ */ a("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: "Use it only when you want a thinner wrapper around the main Select surface for static option lists."
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "mt-3 flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ a(t, {
+								variant: "outline",
+								children: "Static options"
+							}),
+							/* @__PURE__ */ a(t, {
+								variant: "outline",
+								children: "Searchable"
+							}),
+							/* @__PURE__ */ a(t, {
+								variant: "outline",
+								children: "Clearable"
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ a(n, {
+				value: c,
+				onValueChange: (e) => l(e),
+				options: f,
+				placeholder: "Visibility",
+				searchable: !0,
+				clearable: !0
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "grid gap-3 md:grid-cols-3",
+				children: [
+					/* @__PURE__ */ o("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ a("p", {
+							className: "font-medium aui-text-strong",
+							children: "Current value"
+						}), /* @__PURE__ */ a("p", {
+							className: "mt-2 aui-text-muted",
+							children: p?.label ?? "Nothing selected"
+						})]
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ a("p", {
+							className: "font-medium aui-text-strong",
+							children: "Behavior"
+						}), /* @__PURE__ */ a("p", {
+							className: "mt-2 aui-text-muted",
+							children: "Clear icon and disabled items behave inside the same trigger model."
+						})]
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ a("p", {
+							className: "font-medium aui-text-strong",
+							children: "When to use"
+						}), /* @__PURE__ */ a("p", {
+							className: "mt-2 aui-text-muted",
+							children: "Choose this for local option lists before moving to AsyncSelect."
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ a(n, {
+				defaultValue: "public",
+				options: f
+			}, u),
+			/* @__PURE__ */ o("div", {
+				className: "flex flex-wrap gap-2",
+				children: [/* @__PURE__ */ a(e, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => l(void 0),
+					children: "Clear controlled"
+				}), /* @__PURE__ */ a(e, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => d((e) => e + 1),
+					children: "Reset uncontrolled sample"
+				})]
+			}),
+			s === "playground" ? /* @__PURE__ */ a("p", {
+				className: "aui-text-muted rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+				children: "Controlled selection can power filter states, while uncontrolled default usage is fine for one-off static forms. If the list becomes remote, move back to the Select family and choose AsyncSelect."
+			}) : null
+		]
+	});
+}
+//#endregion
+export { s as SimpleSelectShowcase };

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Skeleton, SkeletonCard, SkeletonText } from "@/index"
+
+export function Example() {
+  return (
+    <div className="space-y-4">
+      <Skeleton className="h-10 w-48" />
+      <SkeletonText rows={3} />
+      <SkeletonCard avatar rows={4} />
+    </div>
+  )
+}`,cliCommand:`npx tembro add skeleton`,highlights:[`Base line/block placeholder plus text and card presets`,`Useful while data shape is known but content is still loading`,`Keeps layout stable before real content arrives`],scenarios:[{title:`Header loading`,description:`Reserve title and toolbar space before the API resolves.`},{title:`List row loading`,description:`Prevent layout jump inside dense operational screens.`},{title:`Card loading`,description:`Show content shape without implying final values yet.`}]};exports.skeletonMock=e;

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

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

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

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/skeleton/mock.ts
+var e = {
+	code: "import { Skeleton, SkeletonCard, SkeletonText } from \"@/index\"\n\nexport function Example() {\n  return (\n    <div className=\"space-y-4\">\n      <Skeleton className=\"h-10 w-48\" />\n      <SkeletonText rows={3} />\n      <SkeletonCard avatar rows={4} />\n    </div>\n  )\n}",
+	cliCommand: "npx tembro add skeleton",
+	highlights: [
+		"Base line/block placeholder plus text and card presets",
+		"Useful while data shape is known but content is still loading",
+		"Keeps layout stable before real content arrives"
+	],
+	scenarios: [
+		{
+			title: "Header loading",
+			description: "Reserve title and toolbar space before the API resolves."
+		},
+		{
+			title: "List row loading",
+			description: "Prevent layout jump inside dense operational screens."
+		},
+		{
+			title: "Card loading",
+			description: "Show content shape without implying final values yet."
+		}
+	]
+};
+//#endregion
+export { e as skeletonMock };

package/dist/showcase/premium/skeleton/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/ui/skeleton/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`border-t border-[color:var(--aui-divider)] py-6`;function s(){let[e,s]=i.useState(!0);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsxs)(`section`,{className:`pb-6`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed primitive`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Skeleton preserves shape before real data arrives`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use skeletons only when the destination layout is already known. Otherwise prefer a simpler loading state.`})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center justify-between gap-3`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Dashboard summary loading`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Toggle the preview to compare loading shape and resolved content.`})]}),(0,a.jsx)(t.Button,{variant:`outline`,size:`sm`,onClick:()=>s(e=>!e),children:e?`Show resolved state`:`Show loading state`})]}),(0,a.jsx)(`div`,{className:`mt-5 grid gap-4 xl:grid-cols-3`,children:Array.from({length:3},(t,i)=>(0,a.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:e?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.Skeleton,{className:`h-4 w-24`}),(0,a.jsx)(r.Skeleton,{className:`mt-4 h-9 w-32`}),(0,a.jsx)(r.Skeleton,{className:`mt-4 h-3 w-20`})]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(`p`,{className:`text-sm aui-text-muted`,children:[`Metric `,i+1]}),(0,a.jsx)(`p`,{className:`mt-4 text-3xl font-semibold aui-text-strong`,children:[`24.8k`,`91.4%`,`128`][i]}),(0,a.jsx)(n.Badge,{className:`mt-4`,variant:`secondary`,children:`Live`})]})},i))})]}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Text and card presets`}),(0,a.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:"Use the base primitive for custom shapes, then reach for `SkeletonText` or `SkeletonCard` when the pattern repeats often."}),(0,a.jsxs)(`div`,{className:`mt-5 space-y-4`,children:[(0,a.jsx)(r.SkeletonText,{rows:4}),(0,a.jsx)(r.SkeletonCard,{avatar:!0,rows:4})]})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Guidance`}),(0,a.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsx)(`p`,{children:`Do not animate huge full-page skeleton walls if a calmer page-level loading state would do the job.`}),(0,a.jsx)(`p`,{children:`Keep placeholder geometry close to the final layout. A misleading shape is worse than no skeleton at all.`}),(0,a.jsx)(`p`,{children:`When the loading state is long or uncertain, switch to a clearer status surface with explanation.`})]})]})]})})]})}exports.SkeletonShowcase=s;

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

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