tembro 3.0.0 → 3.1.5

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

@@ -0,0 +1,147 @@
+import { cn as e } from "../../../lib/utils.js";
+import { Button as t } from "../../../components/ui/button/index.js";
+import { Carousel as n, CarouselItem as r } from "../../../components/display/carousel.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/showcase/premium/carousel/showcase.tsx
+var s = [
+	{
+		title: "Onboarding",
+		text: "Guide quickly from first login.",
+		tone: "Launch",
+		detail: "Hero slider for product onboarding and release tours."
+	},
+	{
+		title: "Components",
+		text: "Review ready-made dashboard patterns.",
+		tone: "Library",
+		detail: "Card rail, docs previews, and swipe-ready gallery states."
+	},
+	{
+		title: "Release",
+		text: "Publish, test, and iterate faster.",
+		tone: "Ship",
+		detail: "Active slide details stay below the main frame for context."
+	}
+];
+function c() {
+	let [c, l] = i.useState(!0), [u, d] = i.useState(!0), [f, p] = i.useState(!1), [m, h] = i.useState(0), [g, _] = i.useState(!1);
+	return /* @__PURE__ */ o("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "flex flex-wrap gap-3",
+				children: [
+					/* @__PURE__ */ o(t, {
+						size: "sm",
+						variant: c ? "default" : "outline",
+						onClick: () => l((e) => !e),
+						children: [c ? "Hide" : "Show", " arrows"]
+					}),
+					/* @__PURE__ */ o(t, {
+						size: "sm",
+						variant: u ? "default" : "outline",
+						onClick: () => d((e) => !e),
+						children: [u ? "Hide" : "Show", " dots"]
+					}),
+					/* @__PURE__ */ o(t, {
+						size: "sm",
+						variant: f ? "default" : "outline",
+						onClick: () => p((e) => !e),
+						children: [f ? "Stop" : "Start", " autoplay"]
+					})
+				]
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "grid gap-3 md:grid-cols-3",
+				children: s.map((e, n) => /* @__PURE__ */ o(t, {
+					type: "button",
+					variant: m === n ? "default" : "outline",
+					className: "justify-start",
+					onClick: () => h(n),
+					children: [
+						n + 1,
+						". ",
+						e.title
+					]
+				}, e.title))
+			}),
+			/* @__PURE__ */ a(n, {
+				index: m,
+				loop: !0,
+				showArrows: c,
+				showDots: u,
+				showStatus: !0,
+				showThumbnails: !0,
+				autoplay: f,
+				autoplayInterval: 2200,
+				showPlaybackControl: !0,
+				aspectRatio: "16 / 9",
+				onIndexChange: (e) => h(e),
+				onAutoplayChange: _,
+				previousLabel: "Previous slide",
+				nextLabel: "Next slide",
+				renderThumbnail: (t, n, r) => /* @__PURE__ */ o("div", {
+					className: e("grid gap-1 p-3", r && "bg-primary/5"),
+					children: [/* @__PURE__ */ o("div", {
+						className: "text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground",
+						children: ["0", n + 1]
+					}), /* @__PURE__ */ a("div", {
+						className: "text-sm font-medium text-foreground",
+						children: s[n]?.title
+					})]
+				}),
+				renderActiveDetail: (e, t) => /* @__PURE__ */ o("div", {
+					className: "rounded-[20px] border border-border/70 bg-card/80 p-4",
+					children: [/* @__PURE__ */ a("p", {
+						className: "text-sm font-semibold text-foreground",
+						children: s[t]?.title
+					}), /* @__PURE__ */ a("p", {
+						className: "mt-1 text-sm text-muted-foreground",
+						children: s[t]?.detail
+					})]
+				}),
+				children: s.map((e, t) => /* @__PURE__ */ a(r, { children: /* @__PURE__ */ a("div", {
+					className: "min-h-56 rounded-xl border border-border bg-card p-8",
+					children: /* @__PURE__ */ o("div", {
+						className: "flex items-start justify-between gap-3",
+						children: [/* @__PURE__ */ o("div", {
+							className: "grid gap-2",
+							children: [
+								/* @__PURE__ */ a("p", {
+									className: "text-[11px] font-semibold uppercase tracking-[0.24em] text-primary",
+									children: e.tone
+								}),
+								/* @__PURE__ */ a("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground",
+									children: `Slide ${t + 1}`
+								}),
+								/* @__PURE__ */ a("h3", {
+									className: "text-lg font-semibold text-foreground",
+									children: e.title
+								}),
+								/* @__PURE__ */ a("p", {
+									className: "text-sm text-muted-foreground",
+									children: e.text
+								})
+							]
+						}), /* @__PURE__ */ o("div", {
+							className: "rounded-full border border-border/70 px-3 py-1 text-xs text-muted-foreground",
+							children: [
+								t + 1,
+								"/",
+								s.length
+							]
+						})]
+					})
+				}) }, e.title))
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "text-sm text-muted-foreground",
+				children: ["Playback: ", g || f ? "active" : "paused"]
+			})
+		]
+	});
+}
+//#endregion
+export { c as CarouselShowcase };

package/dist/src/showcase/premium/checkbox/data.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{id:`release`,label:`Enable release checklist`,description:`Primary controlled state`,checked:!0},{id:`ship`,label:`Ship docs update`,description:`Default checked example`,checked:!0},{id:`locked`,label:`Locked permission`,description:`Disabled access item`,disabled:!0},{id:`notify`,label:`Notify stakeholders`,description:`Unchecked follow-up action`}];exports.checkboxDemoItems=e;

package/dist/src/showcase/premium/checkbox/data.js

@@ -0,0 +1,28 @@
+//#region src/showcase/premium/checkbox/data.ts
+var e = [
+	{
+		id: "release",
+		label: "Enable release checklist",
+		description: "Primary controlled state",
+		checked: !0
+	},
+	{
+		id: "ship",
+		label: "Ship docs update",
+		description: "Default checked example",
+		checked: !0
+	},
+	{
+		id: "locked",
+		label: "Locked permission",
+		description: "Disabled access item",
+		disabled: !0
+	},
+	{
+		id: "notify",
+		label: "Notify stakeholders",
+		description: "Unchecked follow-up action"
+	}
+];
+//#endregion
+export { e as checkboxDemoItems };

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

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

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

@@ -0,0 +1,4 @@
+import { checkboxDemoItems as e } from "./data.js";
+import { CheckboxShowcase as t } from "./showcase.js";
+import { checkboxMock as n } from "./mock.js";
+export { t as CheckboxShowcase, e as checkboxDemoItems, n as checkboxMock };

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

@@ -0,0 +1,27 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { Checkbox } from "tembro"
+
+export function Example() {
+  const [termsAccepted, setTermsAccepted] = React.useState(false)
+
+  return (
+    <div className="space-y-3">
+      <label className="flex items-center gap-2">
+        <Checkbox
+          checked={termsAccepted}
+          onCheckedChange={(checked) => setTermsAccepted(Boolean(checked))}
+        />
+        <span>Accept terms and conditions</span>
+      </label>
+      <label className="flex items-center gap-2">
+        <Checkbox id="indeterminate" indeterminate />
+        <span>Parent selection (mixed state)</span>
+      </label>
+      <label className="flex items-center gap-2">
+        <Checkbox id="readonly" readOnly checked />
+        <span>Read-only state example</span>
+      </label>
+    </div>
+  )
+}
+`,cliCommand:`npx tembro add checkbox`,highlights:[`Checked state`,`Indeterminate-ready API`,`Task lists`,`Permission groups`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Release checklist`,description:`Track deployment readiness with simple binary controls.`},{title:`Permissions`,description:`Apply checkbox groups in role and access screens.`},{title:`Bulk selection`,description:`Use in table rows and mass-action workflows.`},{title:`Task confirmation`,description:`Represent short check sequences inside setup and review screens.`}],capabilityNotes:[`Supports checked, disabled and indeterminate-ready API usage patterns.`,`Pair each checkbox with label elements for accessible toggles.`,`Use checked/unchecked states for workflows, not custom state machines.`,`For mixed selections, compute parent indeterminate state from child selections.`]};exports.checkboxMock=e;

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

@@ -0,0 +1,42 @@
+//#region src/showcase/premium/checkbox/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { Checkbox } from \"tembro\"\n\nexport function Example() {\n  const [termsAccepted, setTermsAccepted] = React.useState(false)\n\n  return (\n    <div className=\"space-y-3\">\n      <label className=\"flex items-center gap-2\">\n        <Checkbox\n          checked={termsAccepted}\n          onCheckedChange={(checked) => setTermsAccepted(Boolean(checked))}\n        />\n        <span>Accept terms and conditions</span>\n      </label>\n      <label className=\"flex items-center gap-2\">\n        <Checkbox id=\"indeterminate\" indeterminate />\n        <span>Parent selection (mixed state)</span>\n      </label>\n      <label className=\"flex items-center gap-2\">\n        <Checkbox id=\"readonly\" readOnly checked />\n        <span>Read-only state example</span>\n      </label>\n    </div>\n  )\n}\n",
+	cliCommand: "npx tembro add checkbox",
+	highlights: [
+		"Checked state",
+		"Indeterminate-ready API",
+		"Task lists",
+		"Permission groups"
+	],
+	relatedBlockSlugs: [
+		"settings-form",
+		"users-table",
+		"crm-dashboard"
+	],
+	scenarios: [
+		{
+			title: "Release checklist",
+			description: "Track deployment readiness with simple binary controls."
+		},
+		{
+			title: "Permissions",
+			description: "Apply checkbox groups in role and access screens."
+		},
+		{
+			title: "Bulk selection",
+			description: "Use in table rows and mass-action workflows."
+		},
+		{
+			title: "Task confirmation",
+			description: "Represent short check sequences inside setup and review screens."
+		}
+	],
+	capabilityNotes: [
+		"Supports checked, disabled and indeterminate-ready API usage patterns.",
+		"Pair each checkbox with label elements for accessible toggles.",
+		"Use checked/unchecked states for workflows, not custom state machines.",
+		"For mixed selections, compute parent indeterminate state from child selections."
+	]
+};
+//#endregion
+export { e as checkboxMock };

package/dist/src/showcase/premium/checkbox/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/checkbox/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("./data.cjs");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({state:o,setState:s}){let c=o.checked?`checked`:o.textValue===`mixed`?`mixed`:`unchecked`;return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`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:`Binary lists`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Checkboxes should read like a checklist`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`The preview should show task-like selection, disabled permissions, and follow-up actions in one readable stack instead of floating toggles.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Default checked`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Disabled`})]})]}),(0,i.jsxs)(`div`,{className:`mt-6 grid gap-3 md:grid-cols-3`,children:[(0,i.jsxs)(`div`,{className:`${a} flex items-start gap-3`,children:[(0,i.jsx)(t.Checkbox,{size:`lg`,allowIndeterminate:!0,checked:c===`mixed`?`indeterminate`:c===`checked`,onCheckedStateChange:e=>{s(e===`indeterminate`?{checked:!1,textValue:`mixed`}:e?{checked:!0,textValue:`checked`}:{checked:!1,textValue:`unchecked`})}}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`Approval state`}),(0,i.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:"Use `indeterminate` when not all child tasks are complete."})]})]}),(0,i.jsxs)(`div`,{className:`${a} flex items-start gap-3`,children:[(0,i.jsx)(t.Checkbox,{size:`lg`,checked:`indeterminate`}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`Indeterminate`}),(0,i.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:`Useful for parent rows and bulk selection summaries.`})]})]}),(0,i.jsxs)(`div`,{className:`${a} flex items-start gap-3`,children:[(0,i.jsx)(t.Checkbox,{size:`lg`,checked:!0,disabled:!0}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:`Disabled selected`}),(0,i.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:`Shows permission-locked completion without becoming clickable.`})]})]})]}),(0,i.jsx)(`div`,{className:`mt-3 grid gap-3`,children:r.checkboxDemoItems.map((e,n)=>(0,i.jsxs)(`label`,{htmlFor:e.id,className:`${a} flex items-start gap-3`,children:[(0,i.jsx)(t.Checkbox,{id:e.id,checked:n===0?o.checked:e.checked,disabled:e.disabled,invalid:n===0&&c===`unchecked`,onCheckedChange:n===0?e=>s({checked:!!e}):void 0,defaultChecked:n>0?e.checked:void 0}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-strong`,children:e.label}),(0,i.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:e.description})]})]},e.label))})]}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,i.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Release checklist is `,c]}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Toggle the first row or use these actions to verify controlled tri-state checkbox behavior.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(e.Button,{type:`button`,size:`sm`,onClick:()=>s({checked:!0}),children:`Enable`}),(0,i.jsx)(e.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>s({checked:!1}),children:`Disable`}),(0,i.jsx)(e.Button,{type:`button`,size:`sm`,variant:`outline`,onClick:()=>s({checked:!1,textValue:`mixed`}),children:`Set mixed`})]})]})})]})}exports.CheckboxShowcase=o;

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

@@ -0,0 +1,184 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Checkbox as t } from "../../../components/ui/checkbox/index.js";
+import { Badge as n } from "../../../components/ui/badge/index.js";
+import { checkboxDemoItems as r } from "./data.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/checkbox/showcase.tsx
+var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function s({ state: s, setState: c }) {
+	let l = s.checked ? "checked" : s.textValue === "mixed" ? "mixed" : "unchecked";
+	return /* @__PURE__ */ a("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__ */ a("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start 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: "Binary lists"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Checkboxes should read like a checklist"
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "The preview should show task-like selection, disabled permissions, and follow-up actions in one readable stack instead of floating toggles."
+							})
+						]
+					}), /* @__PURE__ */ a("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ i(n, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Controlled"
+							}),
+							/* @__PURE__ */ i(n, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Default checked"
+							}),
+							/* @__PURE__ */ i(n, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Disabled"
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "mt-6 grid gap-3 md:grid-cols-3",
+					children: [
+						/* @__PURE__ */ a("div", {
+							className: `${o} flex items-start gap-3`,
+							children: [/* @__PURE__ */ i(t, {
+								size: "lg",
+								allowIndeterminate: !0,
+								checked: l === "mixed" ? "indeterminate" : l === "checked",
+								onCheckedStateChange: (e) => {
+									c(e === "indeterminate" ? {
+										checked: !1,
+										textValue: "mixed"
+									} : e ? {
+										checked: !0,
+										textValue: "checked"
+									} : {
+										checked: !1,
+										textValue: "unchecked"
+									});
+								}
+							}), /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+								className: "text-sm font-medium aui-text-strong",
+								children: "Approval state"
+							}), /* @__PURE__ */ i("p", {
+								className: "mt-1 text-sm aui-text-muted",
+								children: "Use `indeterminate` when not all child tasks are complete."
+							})] })]
+						}),
+						/* @__PURE__ */ a("div", {
+							className: `${o} flex items-start gap-3`,
+							children: [/* @__PURE__ */ i(t, {
+								size: "lg",
+								checked: "indeterminate"
+							}), /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+								className: "text-sm font-medium aui-text-strong",
+								children: "Indeterminate"
+							}), /* @__PURE__ */ i("p", {
+								className: "mt-1 text-sm aui-text-muted",
+								children: "Useful for parent rows and bulk selection summaries."
+							})] })]
+						}),
+						/* @__PURE__ */ a("div", {
+							className: `${o} flex items-start gap-3`,
+							children: [/* @__PURE__ */ i(t, {
+								size: "lg",
+								checked: !0,
+								disabled: !0
+							}), /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+								className: "text-sm font-medium aui-text-strong",
+								children: "Disabled selected"
+							}), /* @__PURE__ */ i("p", {
+								className: "mt-1 text-sm aui-text-muted",
+								children: "Shows permission-locked completion without becoming clickable."
+							})] })]
+						})
+					]
+				}),
+				/* @__PURE__ */ i("div", {
+					className: "mt-3 grid gap-3",
+					children: r.map((e, n) => /* @__PURE__ */ a("label", {
+						htmlFor: e.id,
+						className: `${o} flex items-start gap-3`,
+						children: [/* @__PURE__ */ i(t, {
+							id: e.id,
+							checked: n === 0 ? s.checked : e.checked,
+							disabled: e.disabled,
+							invalid: n === 0 && l === "unchecked",
+							onCheckedChange: n === 0 ? (e) => c({ checked: !!e }) : void 0,
+							defaultChecked: n > 0 ? e.checked : void 0
+						}), /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+							className: "text-sm font-medium aui-text-strong",
+							children: e.label
+						}), /* @__PURE__ */ i("p", {
+							className: "mt-1 text-sm aui-text-muted",
+							children: e.description
+						})] })]
+					}, e.label))
+				})
+			]
+		}), /* @__PURE__ */ i("section", {
+			className: o,
+			children: /* @__PURE__ */ a("div", {
+				className: "flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between",
+				children: [/* @__PURE__ */ a("div", { children: [
+					/* @__PURE__ */ i("p", {
+						className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+						children: "Live state"
+					}),
+					/* @__PURE__ */ a("h4", {
+						className: "mt-2 text-lg font-semibold aui-text-strong",
+						children: ["Release checklist is ", l]
+					}),
+					/* @__PURE__ */ i("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: "Toggle the first row or use these actions to verify controlled tri-state checkbox behavior."
+					})
+				] }), /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						/* @__PURE__ */ i(e, {
+							type: "button",
+							size: "sm",
+							onClick: () => c({ checked: !0 }),
+							children: "Enable"
+						}),
+						/* @__PURE__ */ i(e, {
+							type: "button",
+							size: "sm",
+							variant: "secondary",
+							onClick: () => c({ checked: !1 }),
+							children: "Disable"
+						}),
+						/* @__PURE__ */ i(e, {
+							type: "button",
+							size: "sm",
+							variant: "outline",
+							onClick: () => c({
+								checked: !1,
+								textValue: "mixed"
+							}),
+							children: "Set mixed"
+						})
+					]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { s as CheckboxShowcase };

package/dist/src/showcase/premium/checkbox/types.cjs

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

package/dist/src/showcase/premium/code-block/index.cjs

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

package/dist/src/showcase/premium/code-block/index.js

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

package/dist/src/showcase/premium/code-block/mock.cjs

@@ -0,0 +1,7 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { CodeBlock } from "tembro"
+
+const snippet = \`npx tembro add button select\`
+
+export function Example() {
+  return <CodeBlock title="CLI" language="bash" code={snippet} />
+}`,cliCommand:`npx tembro add code-block`,highlights:[`Header with title, language and built-in copy action`,`Supports long wrapped snippets or horizontal scroll`,`Useful for CLI, config and docs snippets`],scenarios:[{title:`CLI docs`,description:`Show install or add commands with fast copy action.`},{title:`Config snippet`,description:`Render small code samples without building a syntax highlighter.`},{title:`Response sample`,description:`Present payload examples in compact technical docs.`}]};exports.codeBlockMock=e;

package/dist/src/showcase/premium/code-block/mock.js

@@ -0,0 +1,26 @@
+//#region src/showcase/premium/code-block/mock.ts
+var e = {
+	code: "import { CodeBlock } from \"tembro\"\n\nconst snippet = `npx tembro add button select`\n\nexport function Example() {\n  return <CodeBlock title=\"CLI\" language=\"bash\" code={snippet} />\n}",
+	cliCommand: "npx tembro add code-block",
+	highlights: [
+		"Header with title, language and built-in copy action",
+		"Supports long wrapped snippets or horizontal scroll",
+		"Useful for CLI, config and docs snippets"
+	],
+	scenarios: [
+		{
+			title: "CLI docs",
+			description: "Show install or add commands with fast copy action."
+		},
+		{
+			title: "Config snippet",
+			description: "Render small code samples without building a syntax highlighter."
+		},
+		{
+			title: "Response sample",
+			description: "Present payload examples in compact technical docs."
+		}
+	]
+};
+//#endregion
+export { e as codeBlockMock };

package/dist/src/showcase/premium/code-block/showcase.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/badge/index.cjs"),t=require("../../../components/display/code-block.cjs");let n=require("react/jsx-runtime");var r=`border-t border-[color:var(--aui-divider)] py-6`,i=`npx tembro init
+npx tembro add button input data-table`,a=`:root {
+  --aui-card-radius: 18px;
+  --aui-card-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
+}`;function o(){return(0,n.jsxs)(`div`,{className:`space-y-0`,children:[(0,n.jsxs)(`section`,{className:`pb-6`,children:[(0,n.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed display primitive`}),(0,n.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`CodeBlock keeps docs snippets clean and copyable`}),(0,n.jsx)(`p`,{className:`mt-3 max-w-2xl text-sm leading-6 aui-text-muted`,children:`Use it for short technical snippets where product docs need clean framing, title, language label and inline copy.`})]}),(0,n.jsx)(`section`,{className:r,children:(0,n.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px]`,children:[(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(t.CodeBlock,{title:`Install`,language:`bash`,code:i}),(0,n.jsx)(t.CodeBlock,{title:`Token override`,language:`css`,code:a,wrap:!0})]}),(0,n.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] p-4`,children:[(0,n.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,n.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:`Use when`}),(0,n.jsx)(e.Badge,{variant:`secondary`,children:`Docs`})]}),(0,n.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,n.jsx)(`p`,{children:`Prefer CodeBlock when the snippet itself is the content. Do not wrap every small inline token in a code panel.`}),(0,n.jsx)(`p`,{children:`For long articles or syntax-highlighting needs, you may still layer a richer renderer around the same route.`})]})]})]})})]})}exports.CodeBlockShowcase=o;

package/dist/src/showcase/premium/code-block/showcase.js

@@ -0,0 +1,62 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { CodeBlock as t } from "../../../components/display/code-block.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/code-block/showcase.tsx
+var i = "border-t border-[color:var(--aui-divider)] py-6", a = "npx tembro init\nnpx tembro add button input data-table", o = ":root {\n  --aui-card-radius: 18px;\n  --aui-card-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);\n}";
+function s() {
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-0",
+		children: [/* @__PURE__ */ r("section", {
+			className: "pb-6",
+			children: [
+				/* @__PURE__ */ n("p", {
+					className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
+					children: "Installed display primitive"
+				}),
+				/* @__PURE__ */ n("h3", {
+					className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+					children: "CodeBlock keeps docs snippets clean and copyable"
+				}),
+				/* @__PURE__ */ n("p", {
+					className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
+					children: "Use it for short technical snippets where product docs need clean framing, title, language label and inline copy."
+				})
+			]
+		}), /* @__PURE__ */ n("section", {
+			className: i,
+			children: /* @__PURE__ */ r("div", {
+				className: "grid gap-6 xl:grid-cols-[1fr_360px]",
+				children: [/* @__PURE__ */ r("div", {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ n(t, {
+						title: "Install",
+						language: "bash",
+						code: a
+					}), /* @__PURE__ */ n(t, {
+						title: "Token override",
+						language: "css",
+						code: o,
+						wrap: !0
+					})]
+				}), /* @__PURE__ */ r("div", {
+					className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
+					children: [/* @__PURE__ */ r("div", {
+						className: "flex items-center justify-between gap-3",
+						children: [/* @__PURE__ */ n("p", {
+							className: "text-sm font-semibold aui-text-strong",
+							children: "Use when"
+						}), /* @__PURE__ */ n(e, {
+							variant: "secondary",
+							children: "Docs"
+						})]
+					}), /* @__PURE__ */ r("div", {
+						className: "mt-3 space-y-3 text-sm leading-6 aui-text-muted",
+						children: [/* @__PURE__ */ n("p", { children: "Prefer CodeBlock when the snippet itself is the content. Do not wrap every small inline token in a code panel." }), /* @__PURE__ */ n("p", { children: "For long articles or syntax-highlighting needs, you may still layer a richer renderer around the same route." })]
+					})]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { s as CodeBlockShowcase };

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

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

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

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

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

@@ -0,0 +1,20 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { CollapseGroup } from "tembro"
+
+const sections = [
+  {
+    key: "permissions",
+    title: "Permissions",
+    description: "Who can publish and archive components.",
+    content: "Owners can publish. Editors can update docs. Viewers can inspect previews only.",
+  },
+  {
+    key: "release",
+    title: "Release notes",
+    description: "What changed in this version.",
+    content: "Added Tooltip, Combobox and Collapse public docs surfaces.",
+  },
+]
+
+export function Example() {
+  return <CollapseGroup items={sections} type="single" defaultValue="permissions" />
+}`,htmlCode:`<details data-slot="collapse"><summary>Open details</summary></details>`,cliCommand:`npx tembro add collapse`,highlights:[`Progressive disclosure`,`Single or multiple open items`,`Dense settings layout`,`Controlled group state`],relatedBlockSlugs:[`settings-form`,`dashboard-starter`,`crm-dashboard`],scenarios:[{title:`FAQ and settings`,description:`Reveal more detail without turning the page into a long wall of text.`},{title:`Release notes`,description:`Show secondary information only when the user asks for it.`},{title:`Admin sections`,description:`Useful in compact pages where every line of space matters.`}],capabilityNotes:[`Use Collapse when the default page should stay compact but details must remain nearby.`,'For one-open-at-a-time behavior, prefer `CollapseGroup` with `type="single"`.',`Do not hide critical validation or destructive warnings inside collapsed content.`,`Keep titles scannable so users know what each section reveals before opening it.`]};exports.collapseMock=e;

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

@@ -0,0 +1,39 @@
+//#region src/showcase/premium/collapse/mock.ts
+var e = {
+	code: "import { CollapseGroup } from \"tembro\"\n\nconst sections = [\n  {\n    key: \"permissions\",\n    title: \"Permissions\",\n    description: \"Who can publish and archive components.\",\n    content: \"Owners can publish. Editors can update docs. Viewers can inspect previews only.\",\n  },\n  {\n    key: \"release\",\n    title: \"Release notes\",\n    description: \"What changed in this version.\",\n    content: \"Added Tooltip, Combobox and Collapse public docs surfaces.\",\n  },\n]\n\nexport function Example() {\n  return <CollapseGroup items={sections} type=\"single\" defaultValue=\"permissions\" />\n}",
+	htmlCode: "<details data-slot=\"collapse\"><summary>Open details</summary></details>",
+	cliCommand: "npx tembro add collapse",
+	highlights: [
+		"Progressive disclosure",
+		"Single or multiple open items",
+		"Dense settings layout",
+		"Controlled group state"
+	],
+	relatedBlockSlugs: [
+		"settings-form",
+		"dashboard-starter",
+		"crm-dashboard"
+	],
+	scenarios: [
+		{
+			title: "FAQ and settings",
+			description: "Reveal more detail without turning the page into a long wall of text."
+		},
+		{
+			title: "Release notes",
+			description: "Show secondary information only when the user asks for it."
+		},
+		{
+			title: "Admin sections",
+			description: "Useful in compact pages where every line of space matters."
+		}
+	],
+	capabilityNotes: [
+		"Use Collapse when the default page should stay compact but details must remain nearby.",
+		"For one-open-at-a-time behavior, prefer `CollapseGroup` with `type=\"single\"`.",
+		"Do not hide critical validation or destructive warnings inside collapsed content.",
+		"Keep titles scannable so users know what each section reveals before opening it."
+	]
+};
+//#endregion
+export { e as collapseMock };