tembro 1.0.0

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

@@ -0,0 +1,72 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Carousel as t, CarouselItem as n } from "../../../components/display/carousel.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/carousel/showcase.tsx
+var o = [
+	{
+		title: "Onboarding",
+		text: "Guide quickly from first login."
+	},
+	{
+		title: "Components",
+		text: "Review ready-made dashboard patterns."
+	},
+	{
+		title: "Release",
+		text: "Publish, test, and iterate faster."
+	}
+];
+function s() {
+	let [s, c] = r.useState(!0), [l, u] = r.useState(!0), [d, f] = r.useState(0);
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-5",
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex flex-wrap gap-3",
+			children: [/* @__PURE__ */ a(e, {
+				size: "sm",
+				variant: s ? "default" : "outline",
+				onClick: () => c((e) => !e),
+				children: [s ? "Hide" : "Show", " arrows"]
+			}), /* @__PURE__ */ a(e, {
+				size: "sm",
+				variant: l ? "default" : "outline",
+				onClick: () => u((e) => !e),
+				children: [l ? "Hide" : "Show", " dots"]
+			})]
+		}), /* @__PURE__ */ i(t, {
+			index: d,
+			loop: !0,
+			showArrows: s,
+			showDots: l,
+			onIndexChange: (e) => f(e),
+			previousLabel: "Previous slide",
+			nextLabel: "Next slide",
+			children: o.map((e, t) => /* @__PURE__ */ i(n, { children: /* @__PURE__ */ i("div", {
+				className: "rounded-xl border border-border bg-card p-8",
+				children: /* @__PURE__ */ i("div", {
+					className: "flex items-start justify-between gap-3",
+					children: /* @__PURE__ */ a("div", {
+						className: "grid gap-2",
+						children: [
+							/* @__PURE__ */ i("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground",
+								children: `Slide ${t + 1}`
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "text-lg font-semibold text-foreground",
+								children: e.title
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "text-sm text-muted-foreground",
+								children: e.text
+							})
+						]
+					})
+				})
+			}) }, e.title))
+		})]
+	});
+}
+//#endregion
+export { s as CarouselShowcase };

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Cascader } from "@/index"
+
+const options = [{ value: "eu", label: "Europe", children: [{ value: "uk", label: "United Kingdom", children: [{ value: "london", label: "London" }] }] }]
+
+export function Example() {
+  const [value, setValue] = useState<string[]>([])
+
+  return <Cascader options={options} value={value} onValueChange={setValue} />
+}`,cliCommand:`npx tembro add cascader`,highlights:[`Three-level dependency selects`,`Controlled by string path value`,`Disabled states for unavailable levels`],scenarios:[{title:`Location selector`,description:`Choose region / country / city in one compact control.`},{title:`Category trees`,description:`Pick nested taxonomy in forms.`}]};exports.cascaderMock=e;

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

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

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

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/cascader/mock.ts
+var e = {
+	code: "import { Cascader } from \"@/index\"\n\nconst options = [{ value: \"eu\", label: \"Europe\", children: [{ value: \"uk\", label: \"United Kingdom\", children: [{ value: \"london\", label: \"London\" }] }] }]\n\nexport function Example() {\n  const [value, setValue] = useState<string[]>([])\n\n  return <Cascader options={options} value={value} onValueChange={setValue} />\n}",
+	cliCommand: "npx tembro add cascader",
+	highlights: [
+		"Three-level dependency selects",
+		"Controlled by string path value",
+		"Disabled states for unavailable levels"
+	],
+	scenarios: [{
+		title: "Location selector",
+		description: "Choose region / country / city in one compact control."
+	}, {
+		title: "Category trees",
+		description: "Pick nested taxonomy in forms."
+	}]
+};
+//#endregion
+export { e as cascaderMock };

package/dist/showcase/premium/cascader/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/inputs/cascader.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i=[{value:`eu`,label:`Europe`,children:[{value:`uk`,label:`United Kingdom`,children:[{value:`london`,label:`London`}]}]},{value:`us`,label:`United States`,children:[{value:`ca`,label:`California`,children:[{value:`sf`,label:`San Francisco`}]}]}];function a(){let[e,a]=n.useState([]);return(0,r.jsxs)(`div`,{className:`space-y-3`,children:[(0,r.jsx)(t.Cascader,{options:i,value:e,onValueChange:a}),(0,r.jsxs)(`p`,{className:`text-sm text-muted-foreground`,children:[`Selected path: `,e.length?e.join(` / `):`Not selected`]})]})}exports.CascaderShowcase=a;

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

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

package/dist/showcase/premium/cascader/showcase.js

@@ -0,0 +1,43 @@
+import { Cascader as e } from "../../../components/inputs/cascader.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/cascader/showcase.tsx
+var i = [{
+	value: "eu",
+	label: "Europe",
+	children: [{
+		value: "uk",
+		label: "United Kingdom",
+		children: [{
+			value: "london",
+			label: "London"
+		}]
+	}]
+}, {
+	value: "us",
+	label: "United States",
+	children: [{
+		value: "ca",
+		label: "California",
+		children: [{
+			value: "sf",
+			label: "San Francisco"
+		}]
+	}]
+}];
+function a() {
+	let [a, o] = t.useState([]);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ n(e, {
+			options: i,
+			value: a,
+			onValueChange: o
+		}), /* @__PURE__ */ r("p", {
+			className: "text-sm text-muted-foreground",
+			children: ["Selected path: ", a.length ? a.join(" / ") : "Not selected"]
+		})]
+	});
+}
+//#endregion
+export { a as CascaderShowcase };

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

@@ -0,0 +1,2 @@
+import type { CheckboxDemoItem } from "./types";
+export declare const checkboxDemoItems: CheckboxDemoItem[];

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

@@ -0,0 +1,4 @@
+export { CheckboxShowcase } from "./showcase";
+export { checkboxMock } from "./mock";
+export { checkboxDemoItems } from "./data";
+export type { CheckboxDemoItem } from "./types";

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

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

package/dist/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/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}){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.jsx)(`div`,{className:`mt-6 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,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 `,o.checked?`enabled`:`disabled`]}),(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 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`})]})]})})]})}exports.CheckboxShowcase=o;

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

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

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

@@ -0,0 +1,108 @@
+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 }) {
+	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__ */ i("div", {
+				className: "mt-6 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,
+						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 ", s.checked ? "enabled" : "disabled"]
+					}),
+					/* @__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 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"
+					})]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { s as CheckboxShowcase };

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

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

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

@@ -0,0 +1,7 @@
+export type CheckboxDemoItem = {
+    label: string;
+    description: string;
+    id: string;
+    checked?: boolean;
+    disabled?: boolean;
+};

package/dist/showcase/premium/clearable-input/index.cjs

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

package/dist/showcase/premium/clearable-input/index.d.ts

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

package/dist/showcase/premium/clearable-input/index.js

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

package/dist/showcase/premium/clearable-input/mock.cjs

@@ -0,0 +1,15 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { ClearableInput } from "tembro"
+
+export function Example() {
+  const [value, setValue] = React.useState("workspace token")
+
+  return (
+    <ClearableInput
+      value={value}
+      onValueChange={setValue}
+      placeholder="Filter or paste value..."
+      clearOnEscape
+    />
+  )
+}`,highlights:[`Inline clear action`,`Escape-to-clear support`,`Focus restore after clearing`,`Small but high-frequency utility input`],scenarios:[{title:`Filter reset`,description:`Let users clear a short filter without hunting for an extra reset button.`},{title:`Token paste`,description:`Remove a pasted value quickly and stay focused in the same field.`},{title:`Toolbar utility`,description:`Use in dense admin bars where compact cleanup matters.`}],capabilityNotes:[`Clearable input is strongest for short-lived values like filters and quick entry.`,`Escape clear is useful only when the input is frequently changed.`,`Keep the field visually quiet so the clear action feels secondary.`]};exports.clearableInputMock=e;

package/dist/showcase/premium/clearable-input/mock.d.ts

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

package/dist/showcase/premium/clearable-input/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/clearable-input/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { ClearableInput } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = React.useState(\"workspace token\")\n\n  return (\n    <ClearableInput\n      value={value}\n      onValueChange={setValue}\n      placeholder=\"Filter or paste value...\"\n      clearOnEscape\n    />\n  )\n}",
+	highlights: [
+		"Inline clear action",
+		"Escape-to-clear support",
+		"Focus restore after clearing",
+		"Small but high-frequency utility input"
+	],
+	scenarios: [
+		{
+			title: "Filter reset",
+			description: "Let users clear a short filter without hunting for an extra reset button."
+		},
+		{
+			title: "Token paste",
+			description: "Remove a pasted value quickly and stay focused in the same field."
+		},
+		{
+			title: "Toolbar utility",
+			description: "Use in dense admin bars where compact cleanup matters."
+		}
+	],
+	capabilityNotes: [
+		"Clearable input is strongest for short-lived values like filters and quick entry.",
+		"Escape clear is useful only when the input is frequently changed.",
+		"Keep the field visually quiet so the clear action feels secondary."
+	]
+};
+//#endregion
+export { e as clearableInputMock };

package/dist/showcase/premium/clearable-input/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/inputs/clearable-input.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(`workspace token`);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:`Utility input`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`ClearableInput should remove friction from repetitive short entry`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This control exists for fields people revise often. Clear has to feel instant and keep focus where the user already is.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Escape clear`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Focus restore`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(t.ClearableInput,{value:o,onValueChange:s,placeholder:`Filter or paste value...`,clearOnEscape:!0})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current value`}),(0,i.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:o||`Empty`})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Usage note`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Good for toolbar filters, small token fields, and any place users repeatedly enter and clear short text.`})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:"`Escape` bosib ham clear bo‘lishini sinab ko‘ring."})}):null]})}exports.ClearableInputShowcase=o;

package/dist/showcase/premium/clearable-input/showcase.d.ts

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

package/dist/showcase/premium/clearable-input/showcase.js

@@ -0,0 +1,88 @@
+import { ClearableInput as e } from "../../../components/inputs/clearable-input.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/clearable-input/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("workspace token");
+	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: "Utility input"
+							}),
+							/* @__PURE__ */ r("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "ClearableInput should remove friction from repetitive short entry"
+							}),
+							/* @__PURE__ */ r("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "This control exists for fields people revise often. Clear has to feel instant and keep focus where the user already is."
+							})
+						]
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ r(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Escape clear"
+						}), /* @__PURE__ */ r(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Focus restore"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ r(e, {
+					value: s,
+					onValueChange: c,
+					placeholder: "Filter or paste value...",
+					clearOnEscape: !0
+				})
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [/* @__PURE__ */ i("section", {
+					className: a,
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Current value"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-base font-medium aui-text-strong",
+						children: s || "Empty"
+					})]
+				}), /* @__PURE__ */ i("section", {
+					className: a,
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Usage note"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-sm leading-6 aui-text-muted",
+						children: "Good for toolbar filters, small token fields, and any place users repeatedly enter and clear short text."
+					})]
+				})]
+			}),
+			o === "playground" ? /* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ r("p", {
+					className: "text-sm aui-text-muted",
+					children: "`Escape` bosib ham clear bo‘lishini sinab ko‘ring."
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { o as ClearableInputShowcase };

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

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

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

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

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