tembro 1.0.0

package/dist/showcase/premium/button/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");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");var o=[[`Default`,`default`],[`Secondary`,`secondary`],[`Outline`,`outline`],[`Ghost`,`ghost`],[`Destructive`,`destructive`]],s=[`Ready`,`Focus`,`Loading`,`Disabled`],c=`border-t border-[color:var(--aui-divider)] py-6`;function l({label:e,variant:n}){return(0,a.jsxs)(`div`,{className:`grid gap-3 border-b border-[color:var(--aui-divider)] py-4 last:border-b-0 md:grid-cols-[160px_1fr] md:items-center`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-sm font-semibold`,children:e}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:`npm package variant`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:n,children:e}),(0,a.jsx)(t.Button,{variant:n,size:`sm`,children:`Small`}),(0,a.jsx)(t.Button,{variant:n,size:`icon`,"aria-label":`${e} icon button`,children:(0,a.jsx)(i.ArrowRightIcon,{className:`size-4`})})]})]})}function u({state:e,variant:n}){return e===`Loading`?(0,a.jsx)(t.Button,{variant:n,loading:!0,loadingLabel:`Saving`,children:`Save`}):(0,a.jsx)(t.Button,{variant:n,disabled:e===`Disabled`,className:e===`Focus`?`ring-2 ring-[color:var(--aui-ring)] ring-offset-2 ring-offset-[color:var(--aui-page-bg)]`:void 0,children:e})}function d(){let[e,d]=r.useState(`default`),[f,p]=r.useState(`idle`),[m,h]=r.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 from npm`}),(0,a.jsx)(`h3`,{className:`aui-text-strong mt-3 text-2xl font-semibold tracking-tight`,children:`Real tembro buttons`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-3 max-w-2xl text-sm leading-6`,children:`This preview uses the exported Button component directly from the installed package. The docs page only provides spacing around it.`})]}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px] xl:items-start`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Approval action row`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Primary, secondary and outline actions should read clearly without custom wrapper styles.`}),(0,a.jsx)(`div`,{className:`mt-5 flex flex-wrap gap-2`,children:o.map(([n,r])=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===r?`default`:`outline`,onClick:()=>d(r),children:n},r))})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,a.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-sm font-semibold`,children:`Invoice #4821`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:`Requires finance approval`})]}),(0,a.jsx)(n.Badge,{variant:f===`done`?`secondary`:`outline`,children:f===`idle`?`Pending`:f===`saving`?`Saving`:`Approved`})]}),(0,a.jsxs)(`div`,{className:`mt-4 flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:`secondary`,onClick:()=>h(e=>e+1),children:`Save draft`}),(0,a.jsx)(t.Button,{variant:`outline`,children:`Preview`}),(0,a.jsx)(t.Button,{variant:e,loading:f===`saving`,loadingLabel:`Approving`,onClick:()=>{h(e=>e+1),p(`saving`),window.setTimeout(()=>p(`done`),850)},children:f===`done`?`Approved`:`Approve invoice`})]})]})]})}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Interaction states`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Keep the important states visible without a heavy table or nested card matrix.`}),(0,a.jsx)(`div`,{className:`mt-5 grid gap-3 sm:grid-cols-2`,children:s.map(t=>(0,a.jsxs)(`div`,{className:`flex items-center justify-between gap-4 border-b border-[color:var(--aui-divider)] py-3`,children:[(0,a.jsx)(`span`,{className:`aui-text-muted text-xs font-semibold uppercase tracking-[0.2em]`,children:t}),(0,a.jsx)(u,{state:t,variant:e})]},t))})]}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Variant rail`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`All variants use the same exported Button API.`}),(0,a.jsx)(`div`,{className:`mt-2`,children:o.map(([e,t])=>(0,a.jsx)(l,{label:e,variant:t},t))})]})]})}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`grid gap-5 xl:grid-cols-[1fr_1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Production footer`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`A compact footer pattern for forms, settings pages and dashboard actions.`}),(0,a.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:`secondary`,children:`Save draft`}),(0,a.jsx)(t.Button,{variant:`outline`,children:`Preview`}),(0,a.jsxs)(t.Button,{children:[`Continue`,(0,a.jsx)(i.ArrowRightIcon,{className:`ml-2 size-4`})]})]})]}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Icon, async and danger`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Loading and disabled states stay readable; destructive actions remain visually distinct.`}),(0,a.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-2`,children:[(0,a.jsxs)(t.Button,{variant:`destructive`,children:[(0,a.jsx)(i.Trash2Icon,{className:`mr-2 size-4`}),`Delete`]}),(0,a.jsx)(t.Button,{loading:!0,loadingLabel:`Publishing`,children:`Publish`}),(0,a.jsx)(t.Button,{variant:`outline`,size:`icon`,"aria-label":`Download`,children:(0,a.jsx)(i.DownloadIcon,{className:`size-4`})}),(0,a.jsx)(`a`,{href:`#`,className:t.buttonVariants({variant:`link`}),children:`Text link`})]})]})]})}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3 text-sm`,children:[(0,a.jsx)(`span`,{className:`aui-text-muted`,children:`Interaction count:`}),(0,a.jsx)(n.Badge,{variant:`secondary`,children:m}),(0,a.jsx)(`span`,{className:`aui-text-muted`,children:`Selected variant:`}),(0,a.jsx)(n.Badge,{variant:`outline`,children:e})]})})]})}exports.ButtonShowcase=d;

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

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

package/dist/showcase/premium/button/showcase.js

@@ -0,0 +1,285 @@
+import { Button as e, buttonVariants as t } from "../../../components/ui/button/index.js";
+import { Badge as n } from "../../../components/ui/badge/index.js";
+import * as r from "react";
+import { ArrowRightIcon as i, DownloadIcon as a, Trash2Icon as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/showcase/premium/button/showcase.tsx
+var l = [
+	["Default", "default"],
+	["Secondary", "secondary"],
+	["Outline", "outline"],
+	["Ghost", "ghost"],
+	["Destructive", "destructive"]
+], u = [
+	"Ready",
+	"Focus",
+	"Loading",
+	"Disabled"
+], d = "border-t border-[color:var(--aui-divider)] py-6";
+function f({ label: t, variant: n }) {
+	return /* @__PURE__ */ c("div", {
+		className: "grid gap-3 border-b border-[color:var(--aui-divider)] py-4 last:border-b-0 md:grid-cols-[160px_1fr] md:items-center",
+		children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
+			className: "aui-text-strong text-sm font-semibold",
+			children: t
+		}), /* @__PURE__ */ s("p", {
+			className: "aui-text-muted mt-1 text-xs",
+			children: "npm package variant"
+		})] }), /* @__PURE__ */ c("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: [
+				/* @__PURE__ */ s(e, {
+					variant: n,
+					children: t
+				}),
+				/* @__PURE__ */ s(e, {
+					variant: n,
+					size: "sm",
+					children: "Small"
+				}),
+				/* @__PURE__ */ s(e, {
+					variant: n,
+					size: "icon",
+					"aria-label": `${t} icon button`,
+					children: /* @__PURE__ */ s(i, { className: "size-4" })
+				})
+			]
+		})]
+	});
+}
+function p({ state: t, variant: n }) {
+	return t === "Loading" ? /* @__PURE__ */ s(e, {
+		variant: n,
+		loading: !0,
+		loadingLabel: "Saving",
+		children: "Save"
+	}) : /* @__PURE__ */ s(e, {
+		variant: n,
+		disabled: t === "Disabled",
+		className: t === "Focus" ? "ring-2 ring-[color:var(--aui-ring)] ring-offset-2 ring-offset-[color:var(--aui-page-bg)]" : void 0,
+		children: t
+	});
+}
+function m() {
+	let [m, h] = r.useState("default"), [g, _] = r.useState("idle"), [v, y] = r.useState(0);
+	return /* @__PURE__ */ c("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ c("section", {
+				className: "pb-6",
+				children: [
+					/* @__PURE__ */ s("p", {
+						className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+						children: "Installed from npm"
+					}),
+					/* @__PURE__ */ s("h3", {
+						className: "aui-text-strong mt-3 text-2xl font-semibold tracking-tight",
+						children: "Real tembro buttons"
+					}),
+					/* @__PURE__ */ s("p", {
+						className: "aui-text-muted mt-3 max-w-2xl text-sm leading-6",
+						children: "This preview uses the exported Button component directly from the installed package. The docs page only provides spacing around it."
+					})
+				]
+			}),
+			/* @__PURE__ */ s("section", {
+				className: d,
+				children: /* @__PURE__ */ c("div", {
+					className: "grid gap-6 xl:grid-cols-[1fr_360px] xl:items-start",
+					children: [/* @__PURE__ */ c("div", { children: [
+						/* @__PURE__ */ s("p", {
+							className: "aui-text-strong text-lg font-semibold",
+							children: "Approval action row"
+						}),
+						/* @__PURE__ */ s("p", {
+							className: "aui-text-muted mt-2 max-w-xl text-sm leading-6",
+							children: "Primary, secondary and outline actions should read clearly without custom wrapper styles."
+						}),
+						/* @__PURE__ */ s("div", {
+							className: "mt-5 flex flex-wrap gap-2",
+							children: l.map(([t, n]) => /* @__PURE__ */ s(e, {
+								type: "button",
+								size: "sm",
+								variant: m === n ? "default" : "outline",
+								onClick: () => h(n),
+								children: t
+							}, n))
+						})
+					] }), /* @__PURE__ */ c("div", {
+						className: "rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
+						children: [/* @__PURE__ */ c("div", {
+							className: "flex items-start justify-between gap-4",
+							children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
+								className: "aui-text-strong text-sm font-semibold",
+								children: "Invoice #4821"
+							}), /* @__PURE__ */ s("p", {
+								className: "aui-text-muted mt-1 text-xs",
+								children: "Requires finance approval"
+							})] }), /* @__PURE__ */ s(n, {
+								variant: g === "done" ? "secondary" : "outline",
+								children: g === "idle" ? "Pending" : g === "saving" ? "Saving" : "Approved"
+							})]
+						}), /* @__PURE__ */ c("div", {
+							className: "mt-4 flex flex-wrap items-center gap-2",
+							children: [
+								/* @__PURE__ */ s(e, {
+									variant: "secondary",
+									onClick: () => y((e) => e + 1),
+									children: "Save draft"
+								}),
+								/* @__PURE__ */ s(e, {
+									variant: "outline",
+									children: "Preview"
+								}),
+								/* @__PURE__ */ s(e, {
+									variant: m,
+									loading: g === "saving",
+									loadingLabel: "Approving",
+									onClick: () => {
+										y((e) => e + 1), _("saving"), window.setTimeout(() => _("done"), 850);
+									},
+									children: g === "done" ? "Approved" : "Approve invoice"
+								})
+							]
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ s("section", {
+				className: d,
+				children: /* @__PURE__ */ c("div", {
+					className: "grid gap-6 xl:grid-cols-[1fr_1fr]",
+					children: [/* @__PURE__ */ c("div", { children: [
+						/* @__PURE__ */ s("p", {
+							className: "aui-text-strong text-lg font-semibold",
+							children: "Interaction states"
+						}),
+						/* @__PURE__ */ s("p", {
+							className: "aui-text-muted mt-2 max-w-xl text-sm leading-6",
+							children: "Keep the important states visible without a heavy table or nested card matrix."
+						}),
+						/* @__PURE__ */ s("div", {
+							className: "mt-5 grid gap-3 sm:grid-cols-2",
+							children: u.map((e) => /* @__PURE__ */ c("div", {
+								className: "flex items-center justify-between gap-4 border-b border-[color:var(--aui-divider)] py-3",
+								children: [/* @__PURE__ */ s("span", {
+									className: "aui-text-muted text-xs font-semibold uppercase tracking-[0.2em]",
+									children: e
+								}), /* @__PURE__ */ s(p, {
+									state: e,
+									variant: m
+								})]
+							}, e))
+						})
+					] }), /* @__PURE__ */ c("div", { children: [
+						/* @__PURE__ */ s("p", {
+							className: "aui-text-strong text-lg font-semibold",
+							children: "Variant rail"
+						}),
+						/* @__PURE__ */ s("p", {
+							className: "aui-text-muted mt-2 max-w-xl text-sm leading-6",
+							children: "All variants use the same exported Button API."
+						}),
+						/* @__PURE__ */ s("div", {
+							className: "mt-2",
+							children: l.map(([e, t]) => /* @__PURE__ */ s(f, {
+								label: e,
+								variant: t
+							}, t))
+						})
+					] })]
+				})
+			}),
+			/* @__PURE__ */ s("section", {
+				className: d,
+				children: /* @__PURE__ */ c("div", {
+					className: "grid gap-5 xl:grid-cols-[1fr_1fr]",
+					children: [/* @__PURE__ */ c("div", { children: [
+						/* @__PURE__ */ s("p", {
+							className: "aui-text-strong text-lg font-semibold",
+							children: "Production footer"
+						}),
+						/* @__PURE__ */ s("p", {
+							className: "aui-text-muted mt-2 max-w-xl text-sm leading-6",
+							children: "A compact footer pattern for forms, settings pages and dashboard actions."
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "mt-5 flex flex-wrap items-center gap-2",
+							children: [
+								/* @__PURE__ */ s(e, {
+									variant: "secondary",
+									children: "Save draft"
+								}),
+								/* @__PURE__ */ s(e, {
+									variant: "outline",
+									children: "Preview"
+								}),
+								/* @__PURE__ */ c(e, { children: ["Continue", /* @__PURE__ */ s(i, { className: "ml-2 size-4" })] })
+							]
+						})
+					] }), /* @__PURE__ */ c("div", { children: [
+						/* @__PURE__ */ s("p", {
+							className: "aui-text-strong text-lg font-semibold",
+							children: "Icon, async and danger"
+						}),
+						/* @__PURE__ */ s("p", {
+							className: "aui-text-muted mt-2 max-w-xl text-sm leading-6",
+							children: "Loading and disabled states stay readable; destructive actions remain visually distinct."
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "mt-5 flex flex-wrap items-center gap-2",
+							children: [
+								/* @__PURE__ */ c(e, {
+									variant: "destructive",
+									children: [/* @__PURE__ */ s(o, { className: "mr-2 size-4" }), "Delete"]
+								}),
+								/* @__PURE__ */ s(e, {
+									loading: !0,
+									loadingLabel: "Publishing",
+									children: "Publish"
+								}),
+								/* @__PURE__ */ s(e, {
+									variant: "outline",
+									size: "icon",
+									"aria-label": "Download",
+									children: /* @__PURE__ */ s(a, { className: "size-4" })
+								}),
+								/* @__PURE__ */ s("a", {
+									href: "#",
+									className: t({ variant: "link" }),
+									children: "Text link"
+								})
+							]
+						})
+					] })]
+				})
+			}),
+			/* @__PURE__ */ s("section", {
+				className: d,
+				children: /* @__PURE__ */ c("div", {
+					className: "flex flex-wrap items-center gap-3 text-sm",
+					children: [
+						/* @__PURE__ */ s("span", {
+							className: "aui-text-muted",
+							children: "Interaction count:"
+						}),
+						/* @__PURE__ */ s(n, {
+							variant: "secondary",
+							children: v
+						}),
+						/* @__PURE__ */ s("span", {
+							className: "aui-text-muted",
+							children: "Selected variant:"
+						}),
+						/* @__PURE__ */ s(n, {
+							variant: "outline",
+							children: m
+						})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { m as ButtonShowcase };

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

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

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

@@ -0,0 +1,13 @@
+export type ButtonDemoAction = {
+    label: string;
+    variant: "default" | "secondary" | "outline" | "destructive" | "ghost" | "link";
+    size?: "default" | "sm" | "lg" | "icon";
+    loading?: boolean;
+    disabled?: boolean;
+    icon?: "download" | "arrow" | "none";
+    asLink?: boolean;
+};
+export type ButtonDemoRow = {
+    title: string;
+    actions: ButtonDemoAction[];
+};

package/dist/showcase/premium/button-group/index.cjs

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

package/dist/showcase/premium/button-group/index.d.ts

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

package/dist/showcase/premium/button-group/index.js

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

package/dist/showcase/premium/button-group/mock.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { ButtonGroup } from "tembro"
+
+export function Example() {
+  const [view, setView] = React.useState("list")
+
+  return (
+    <ButtonGroup
+      items={[
+        { key: "list", label: "List", variant: view === "list" ? "default" : "outline", onClick: () => setView("list") },
+        { key: "board", label: "Board", variant: view === "board" ? "default" : "outline", onClick: () => setView("board") },
+        { key: "timeline", label: "Timeline", variant: view === "timeline" ? "default" : "outline", onClick: () => setView("timeline") },
+      ]}
+    />
+  )
+}`,highlights:[`Attached or separated button layouts`,`Good for view switching`,`Compact grouped controls`,`Uses the same button API as the rest of the system`],scenarios:[{title:`View switcher`,description:`Toggle list, board, and timeline modes with a compact control.`},{title:`Segmented admin actions`,description:`Group related operations without building a custom segmented component.`},{title:`Toolbar compactness`,description:`Save horizontal space in filter and table toolbars.`}],capabilityNotes:[`ButtonGroup works best when options are closely related and mutually understandable together.`,`Active state should remain obvious without overwhelming the rest of the toolbar.`,`If the choices represent route navigation, tabs may be a better semantic fit.`]};exports.buttonGroupMock=e;

package/dist/showcase/premium/button-group/mock.d.ts

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

package/dist/showcase/premium/button-group/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/button-group/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { ButtonGroup } from \"tembro\"\n\nexport function Example() {\n  const [view, setView] = React.useState(\"list\")\n\n  return (\n    <ButtonGroup\n      items={[\n        { key: \"list\", label: \"List\", variant: view === \"list\" ? \"default\" : \"outline\", onClick: () => setView(\"list\") },\n        { key: \"board\", label: \"Board\", variant: view === \"board\" ? \"default\" : \"outline\", onClick: () => setView(\"board\") },\n        { key: \"timeline\", label: \"Timeline\", variant: view === \"timeline\" ? \"default\" : \"outline\", onClick: () => setView(\"timeline\") },\n      ]}\n    />\n  )\n}",
+	highlights: [
+		"Attached or separated button layouts",
+		"Good for view switching",
+		"Compact grouped controls",
+		"Uses the same button API as the rest of the system"
+	],
+	scenarios: [
+		{
+			title: "View switcher",
+			description: "Toggle list, board, and timeline modes with a compact control."
+		},
+		{
+			title: "Segmented admin actions",
+			description: "Group related operations without building a custom segmented component."
+		},
+		{
+			title: "Toolbar compactness",
+			description: "Save horizontal space in filter and table toolbars."
+		}
+	],
+	capabilityNotes: [
+		"ButtonGroup works best when options are closely related and mutually understandable together.",
+		"Active state should remain obvious without overwhelming the rest of the toolbar.",
+		"If the choices represent route navigation, tabs may be a better semantic fit."
+	]
+};
+//#endregion
+export { e as buttonGroupMock };

package/dist/showcase/premium/button-group/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/actions/button-group.cjs"),n=require("../../../components/ui/badge/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({mode:e}){let[o,s]=r.useState(`list`);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-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:`Grouped control`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`ButtonGroup should make adjacent choices feel like one control set`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use it for closely related toggles like view mode or density. It should reduce toolbar noise, not create another visual cluster.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`View switching`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Toolbar compactness`})]})]})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(t.ButtonGroup,{items:[{key:`list`,label:`List`,variant:o===`list`?`default`:`outline`,onClick:()=>s(`list`)},{key:`board`,label:`Board`,variant:o===`board`?`default`:`outline`,onClick:()=>s(`board`)},{key:`timeline`,label:`Timeline`,variant:o===`timeline`?`default`:`outline`,onClick:()=>s(`timeline`)}]})}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selected view`}),(0,i.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:o})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`ButtonGroup list/board/timeline kabi yaqin tanlovlar uchun yaxshi ishlaydi.`})}):null]})}exports.ButtonGroupShowcase=o;

package/dist/showcase/premium/button-group/showcase.d.ts

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

package/dist/showcase/premium/button-group/showcase.js

@@ -0,0 +1,92 @@
+import { ButtonGroup as e } from "../../../components/actions/button-group.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/button-group/showcase.tsx
+var a = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function o({ mode: o }) {
+	let [s, c] = n.useState("list");
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ r("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: /* @__PURE__ */ i("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ i("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ r("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Grouped control"
+							}),
+							/* @__PURE__ */ r("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "ButtonGroup should make adjacent choices feel like one control set"
+							}),
+							/* @__PURE__ */ r("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "Use it for closely related toggles like view mode or density. It should reduce toolbar noise, not create another visual cluster."
+							})
+						]
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ r(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "View switching"
+						}), /* @__PURE__ */ r(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Toolbar compactness"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [/* @__PURE__ */ r("section", {
+					className: a,
+					children: /* @__PURE__ */ r(e, { items: [
+						{
+							key: "list",
+							label: "List",
+							variant: s === "list" ? "default" : "outline",
+							onClick: () => c("list")
+						},
+						{
+							key: "board",
+							label: "Board",
+							variant: s === "board" ? "default" : "outline",
+							onClick: () => c("board")
+						},
+						{
+							key: "timeline",
+							label: "Timeline",
+							variant: s === "timeline" ? "default" : "outline",
+							onClick: () => c("timeline")
+						}
+					] })
+				}), /* @__PURE__ */ i("section", {
+					className: a,
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Selected view"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-base font-medium aui-text-strong",
+						children: s
+					})]
+				})]
+			}),
+			o === "playground" ? /* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ r("p", {
+					className: "text-sm aui-text-muted",
+					children: "ButtonGroup list/board/timeline kabi yaqin tanlovlar uchun yaxshi ishlaydi."
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { o as ButtonGroupShowcase };

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { Calendar } from "tembro"
+
+export function Example() {
+  const [range, setRange] = React.useState({ from: "2026-07-10", to: "2026-07-15" })
+
+  return (
+    <Calendar
+      mode="range"
+      range={range}
+      onRangeChange={setRange}
+      numberOfMonths={2}
+      min="2026-07-01"
+      max="2026-08-31"
+      disabledDates={["2026-07-18", "2026-07-19"]}
+    />
+  )
+}`,highlights:[`Single and range selection`,`Multiple month viewport`,`Disabled, min, and max date rules`,`Keyboard-friendly navigation`],scenarios:[{title:`Booking window`,description:`Pick an available range while blocked dates stay non-interactive.`},{title:`Reporting period`,description:`Show two months at once for dashboard and export filters.`},{title:`Approval deadline`,description:`Constrain selection to operational dates with min/max bounds.`}],capabilityNotes:["Use `numberOfMonths={2}` when the user compares short windows across month boundaries.",`Prefer disabled dates for business rules like blackout periods and full-capacity days.`,`Keep range mode close to the workflow that depends on it.`]};exports.calendarMock=e;

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

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

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

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/calendar/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { Calendar } from \"tembro\"\n\nexport function Example() {\n  const [range, setRange] = React.useState({ from: \"2026-07-10\", to: \"2026-07-15\" })\n\n  return (\n    <Calendar\n      mode=\"range\"\n      range={range}\n      onRangeChange={setRange}\n      numberOfMonths={2}\n      min=\"2026-07-01\"\n      max=\"2026-08-31\"\n      disabledDates={[\"2026-07-18\", \"2026-07-19\"]}\n    />\n  )\n}",
+	highlights: [
+		"Single and range selection",
+		"Multiple month viewport",
+		"Disabled, min, and max date rules",
+		"Keyboard-friendly navigation"
+	],
+	scenarios: [
+		{
+			title: "Booking window",
+			description: "Pick an available range while blocked dates stay non-interactive."
+		},
+		{
+			title: "Reporting period",
+			description: "Show two months at once for dashboard and export filters."
+		},
+		{
+			title: "Approval deadline",
+			description: "Constrain selection to operational dates with min/max bounds."
+		}
+	],
+	capabilityNotes: [
+		"Use `numberOfMonths={2}` when the user compares short windows across month boundaries.",
+		"Prefer disabled dates for business rules like blackout periods and full-capacity days.",
+		"Keep range mode close to the workflow that depends on it."
+	]
+};
+//#endregion
+export { e as calendarMock };

package/dist/showcase/premium/calendar/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/calendar/calendar.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`,s=[`2026-07-18`,`2026-07-19`,`2026-07-25`];function c({mode:e}){let[c,l]=i.useState(`2026-07-14`),[u,d]=i.useState({from:`2026-07-10`,to:`2026-07-15`}),[f,p]=i.useState(2);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:`Date control`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Calendar should feel precise, not decorative`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Real usage needs visible range selection, disabled business dates, and month comparison without clutter. This surface shows all three.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Range mode`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Blocked dates`})]})]})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[1.15fr_0.85fr]`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Range selection`}),(0,a.jsx)(`div`,{className:`mt-4 overflow-x-auto pb-1`,children:(0,a.jsx)(r.Calendar,{mode:`range`,range:u,onRangeChange:d,defaultMonth:`2026-07-01`,min:`2026-07-01`,max:`2026-08-31`,disabledDates:s,numberOfMonths:f,pagedNavigation:!0})})]}),(0,a.jsxs)(`div`,{className:`space-y-4`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Single date`}),(0,a.jsx)(`div`,{className:`mt-4 overflow-x-auto pb-1`,children:(0,a.jsx)(r.Calendar,{value:c,onValueChange:l,defaultMonth:`2026-07-01`,min:`2026-07-01`,max:`2026-07-31`,disabledDates:s})})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selection summary`}),(0,a.jsxs)(`div`,{className:`mt-4 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsxs)(`p`,{children:[`Single: `,(0,a.jsx)(`span`,{className:`font-medium aui-text-strong`,children:c})]}),(0,a.jsxs)(`p`,{children:[`Range start: `,(0,a.jsx)(`span`,{className:`font-medium aui-text-strong`,children:u.from??`not selected`})]}),(0,a.jsxs)(`p`,{children:[`Range end: `,(0,a.jsx)(`span`,{className:`font-medium aui-text-strong`,children:u.to??`not selected`})]})]})]})]})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:f===1?`default`:`outline`,onClick:()=>p(1),children:`1 month`}),(0,a.jsx)(t.Button,{size:`sm`,variant:f===2?`default`:`outline`,onClick:()=>p(2),children:`2 months`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>{l(`2026-07-14`),d({from:`2026-07-10`,to:`2026-07-15`})},children:`Reset selection`})]})}):null]})}exports.CalendarShowcase=c;

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

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