tembro 3.0.0 → 3.1.5

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[{kind:`search`,label:`Search components`,placeholder:`Search components...`},{kind:`email`,label:`Team email`,defaultValue:`team@azamatui.dev`},{kind:`disabled`,label:`Disabled state`,defaultValue:`Read-only unavailable`},{kind:`readOnly`,label:`Readonly preview`,defaultValue:`Readonly state`},{kind:`toolbar`,label:`Filter by owner`,placeholder:`Type owner name...`}];exports.inputDemoFields=e;

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

@@ -0,0 +1,30 @@
+//#region src/showcase/premium/input/data.ts
+var e = [
+	{
+		kind: "search",
+		label: "Search components",
+		placeholder: "Search components..."
+	},
+	{
+		kind: "email",
+		label: "Team email",
+		defaultValue: "team@azamatui.dev"
+	},
+	{
+		kind: "disabled",
+		label: "Disabled state",
+		defaultValue: "Read-only unavailable"
+	},
+	{
+		kind: "readOnly",
+		label: "Readonly preview",
+		defaultValue: "Readonly state"
+	},
+	{
+		kind: "toolbar",
+		label: "Filter by owner",
+		placeholder: "Type owner name..."
+	}
+];
+//#endregion
+export { e as inputDemoFields };

package/dist/src/showcase/premium/input/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.InputShowcase=t.InputShowcase,exports.inputDemoFields=e.inputDemoFields,exports.inputMock=n.inputMock;

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

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

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

@@ -0,0 +1,26 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
+import { Input } from "tembro"
+
+export function Example() {
+  const [query, setQuery] = useState("buttons")
+  const [budget, setBudget] = useState<number | null>(1200)
+
+  return (
+    <div className="grid gap-4">
+      <Input
+        kind="search"
+        value={query}
+        onValueChange={setQuery}
+        placeholder="Search components"
+        clearOnEscape
+      />
+      <Input kind="password" autoComplete="current-password" />
+      <Input kind="money" value={budget} onValueChange={setBudget} prefix="$" suffix="USD" />
+      <Input kind="phone" defaultValue="+998 90 123 45 67" />
+      <Input kind="date" defaultValue="2026-07-13" />
+      <Input kind="quantity" defaultValue={3} min={1} max={12} />
+    </div>
+  )
+}
+`,htmlCode:`<label for="example">Search components</label>
+<input id="example" data-slot="input" type="text" placeholder="Search components..." />`,cliCommand:`npx tembro add input`,highlights:[`Controlled and uncontrolled value flows`,`Label + control association with htmlFor`,`Validation-ready required states`,`Disabled and readOnly form states`,`Built-in clear action and trailing metadata`,`Password, numeric, money, phone, date and quantity kinds through one import`],relatedBlockSlugs:[`users-table`,`settings-form`,`crm-dashboard`],scenarios:[{title:`Search`,description:`Use compact inputs inside headers and filter bars.`},{title:`Email capture`,description:`Pair Input with label and validation for accessible form entry.`},{title:`Read-only preview`,description:`Use readOnly for audit logs or prefilled settings values.`},{title:`Disabled editing`,description:`Prevent changes during lock states and permission restrictions.`}],capabilityNotes:[`Supports controlled text entry with placeholder, disabled state, and direct text callbacks.`,`Works with label-first forms, validation messages, clearable behavior, and trailing actions.`,`Use type attributes to narrow input modes: search, email, password, url, etc.`,`Can be used in compact toolbar, modal, and full-width form layouts.`]};exports.inputMock=e;

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

@@ -0,0 +1,45 @@
+//#region src/showcase/premium/input/mock.ts
+var e = {
+	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [query, setQuery] = useState(\"buttons\")\n  const [budget, setBudget] = useState<number | null>(1200)\n\n  return (\n    <div className=\"grid gap-4\">\n      <Input\n        kind=\"search\"\n        value={query}\n        onValueChange={setQuery}\n        placeholder=\"Search components\"\n        clearOnEscape\n      />\n      <Input kind=\"password\" autoComplete=\"current-password\" />\n      <Input kind=\"money\" value={budget} onValueChange={setBudget} prefix=\"$\" suffix=\"USD\" />\n      <Input kind=\"phone\" defaultValue=\"+998 90 123 45 67\" />\n      <Input kind=\"date\" defaultValue=\"2026-07-13\" />\n      <Input kind=\"quantity\" defaultValue={3} min={1} max={12} />\n    </div>\n  )\n}\n",
+	htmlCode: "<label for=\"example\">Search components</label>\n<input id=\"example\" data-slot=\"input\" type=\"text\" placeholder=\"Search components...\" />",
+	cliCommand: "npx tembro add input",
+	highlights: [
+		"Controlled and uncontrolled value flows",
+		"Label + control association with htmlFor",
+		"Validation-ready required states",
+		"Disabled and readOnly form states",
+		"Built-in clear action and trailing metadata",
+		"Password, numeric, money, phone, date and quantity kinds through one import"
+	],
+	relatedBlockSlugs: [
+		"users-table",
+		"settings-form",
+		"crm-dashboard"
+	],
+	scenarios: [
+		{
+			title: "Search",
+			description: "Use compact inputs inside headers and filter bars."
+		},
+		{
+			title: "Email capture",
+			description: "Pair Input with label and validation for accessible form entry."
+		},
+		{
+			title: "Read-only preview",
+			description: "Use readOnly for audit logs or prefilled settings values."
+		},
+		{
+			title: "Disabled editing",
+			description: "Prevent changes during lock states and permission restrictions."
+		}
+	],
+	capabilityNotes: [
+		"Supports controlled text entry with placeholder, disabled state, and direct text callbacks.",
+		"Works with label-first forms, validation messages, clearable behavior, and trailing actions.",
+		"Use type attributes to narrow input modes: search, email, password, url, etc.",
+		"Can be used in compact toolbar, modal, and full-width form layouts."
+	]
+};
+//#endregion
+export { e as inputMock };

package/dist/src/showcase/premium/input/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/input/index.cjs"),r=require("./data.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s=`border-t border-[color:var(--aui-divider)] py-6`;function c({state:e,setState:c}){let l=r.inputDemoFields[0],u=e.textValue.trim().length>0,[d,f]=i.useState(`search`),p=d===`search`?l.label:`Profile contact`,m=d===`search`?l.placeholder:`owner@azamatui.dev`,h=d===`search`?`text`:`email`,[g,_]=i.useState(1250),[v,y]=i.useState(3),[b,x]=i.useState(`+998 90 123 45 67`),[S,C]=i.useState(`2026-07-13`),[w,T]=i.useState(`Azamat UI`);return(0,o.jsxs)(`div`,{className:`space-y-0`,children:[(0,o.jsxs)(`section`,{className:`pb-6`,children:[(0,o.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between`,children:[(0,o.jsxs)(`div`,{className:`max-w-xl`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Text entry`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`One field should define the rhythm`}),(0,o.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Show the real input first, then verify disabled and read-only states around it.`})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Mode`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold capitalize aui-text-strong`,children:d})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Value`}),(0,o.jsx)(`p`,{className:`mt-2 truncate text-lg font-semibold aui-text-strong`,children:u?e.textValue:`Empty`})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`State`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:u?`Filled`:`Ready`})]})]})]}),(0,o.jsxs)(`div`,{className:`mt-6 flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{size:`sm`,variant:d===`search`?`default`:`outline`,onClick:()=>f(`search`),children:`Search field`}),(0,o.jsx)(t.Button,{size:`sm`,variant:d===`profile`?`default`:`outline`,onClick:()=>f(`profile`),children:`Email field`})]})]}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]`,children:[(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Primary field`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:d===`search`?`Search-driven input`:`Profile contact field`})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] p-4`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:p}),(0,o.jsx)(`div`,{className:`mt-3`,children:(0,o.jsx)(n.Input,{"aria-label":p,value:e.textValue,onChange:e=>c({textValue:e.target.value}),placeholder:m,type:h,kind:d===`search`?`search`:`text`,className:`w-full`})})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-2`,children:[(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs aui-text-muted`,children:`Email sample`}),(0,o.jsx)(`div`,{className:`mt-2`,children:(0,o.jsx)(n.Input,{defaultValue:r.inputDemoFields[1].defaultValue,type:`email`,"aria-label":r.inputDemoFields[1].label})})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs aui-text-muted`,children:`Disabled sample`}),(0,o.jsx)(`div`,{className:`mt-2`,children:(0,o.jsx)(n.Input,{value:r.inputDemoFields[2].defaultValue,disabled:!0,"aria-label":r.inputDemoFields[2].label})})]})]})]}),(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,o.jsx)(a.MailIcon,{className:`size-4 aui-text-muted`}),(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Read only`}),(0,o.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:r.inputDemoFields[3].label})]})]}),(0,o.jsx)(n.Input,{defaultValue:r.inputDemoFields[3].defaultValue,readOnly:!0,"aria-label":r.inputDemoFields[3].label}),(0,o.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Default field should stay legible before any decorators or wrappers are added.`,`Disabled state should look intentionally inactive without losing structure.`,`Read-only fields must remain easy to scan and copy.`,`Avoid extra shells when the real input already provides the right chrome.`].map(e=>(0,o.jsx)(`div`,{className:`border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0`,children:e},e))}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{type:`button`,size:`sm`,onClick:()=>c({textValue:`Dashboard`}),children:`Fill sample`}),(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:`outline`,onClick:()=>c({textValue:`finance@azamat.dev`}),children:`Email sample`}),(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c({textValue:``}),children:`Clear`})]})]})]})}),(0,o.jsxs)(`section`,{className:s,"data-slot":`input-kind-showcase`,children:[(0,o.jsxs)(`div`,{className:`max-w-2xl`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Unified kind API`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:`One import, every production input`}),(0,o.jsxs)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:[`Change only the `,(0,o.jsx)(`code`,{children:`kind`}),` prop. Validation, disabled state, value callbacks and keyboard behavior stay in the same public component.`]})]}),(0,o.jsxs)(`div`,{className:`mt-6 grid gap-x-6 gap-y-5 md:grid-cols-2 xl:grid-cols-3`,children:[(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Password`,(0,o.jsx)(n.Input,{kind:`password`,defaultValue:`tembro-2026`,autoComplete:`current-password`}),(0,o.jsx)(`span`,{className:`text-xs font-normal aui-text-muted`,children:`Built-in visibility toggle and caps-lock feedback.`})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Numeric threshold`,(0,o.jsx)(n.Input,{kind:`number`,defaultValue:24,min:0,max:100,step:1}),(0,o.jsx)(`span`,{className:`text-xs font-normal aui-text-muted`,children:`Native limits with normalized numeric callbacks.`})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Budget`,(0,o.jsx)(n.Input,{kind:`money`,value:g,onValueChange:_,prefix:`$`,suffix:`USD`}),(0,o.jsxs)(`span`,{className:`text-xs font-normal aui-text-muted`,children:[`Current value: `,g??`empty`]})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Phone`,(0,o.jsx)(n.Input,{kind:`phone`,value:b,onValueChange:x}),(0,o.jsxs)(`span`,{className:`text-xs font-normal aui-text-muted`,children:[`Normalized value: `,b||`empty`]})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Release date`,(0,o.jsx)(n.Input,{kind:`date`,value:S,onValueChange:C}),(0,o.jsxs)(`span`,{className:`text-xs font-normal aui-text-muted`,children:[`ISO value: `,S||`empty`]})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Seats`,(0,o.jsx)(n.Input,{kind:`quantity`,value:v,onValueChange:y,min:1,max:12}),(0,o.jsx)(`span`,{className:`text-xs font-normal aui-text-muted`,children:`Use the buttons or type a value directly.`})]})]}),(0,o.jsx)(`div`,{className:`mt-6 border-t border-[color:var(--aui-divider)] pt-5`,children:(0,o.jsxs)(`label`,{className:`grid max-w-xl gap-2 text-sm font-medium aui-text-strong`,children:[`Clearable project name`,(0,o.jsx)(n.Input,{kind:`clearable`,value:w,onValueChange:T,placeholder:`Enter a project name`,clearOnEscape:!0}),(0,o.jsx)(`span`,{className:`text-xs font-normal aui-text-muted`,children:`Use the clear control or press Escape while the field is focused.`})]})})]})]})}exports.InputShowcase=c;

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

@@ -0,0 +1,358 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Input as t } from "../../../components/ui/input/index.js";
+import { inputDemoFields as n } from "./data.js";
+import * as r from "react";
+import { MailIcon as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/showcase/premium/input/showcase.tsx
+var s = "border-t border-[color:var(--aui-divider)] py-6";
+function c({ state: c, setState: l }) {
+	let u = n[0], d = c.textValue.trim().length > 0, [f, p] = r.useState("search"), m = f === "search" ? u.label : "Profile contact", h = f === "search" ? u.placeholder : "owner@azamatui.dev", g = f === "search" ? "text" : "email", [_, v] = r.useState(1250), [y, b] = r.useState(3), [x, S] = r.useState("+998 90 123 45 67"), [C, w] = r.useState("2026-07-13"), [T, E] = r.useState("Azamat UI");
+	return /* @__PURE__ */ o("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ o("section", {
+				className: "pb-6",
+				children: [/* @__PURE__ */ o("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between",
+					children: [/* @__PURE__ */ o("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ a("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Text entry"
+							}),
+							/* @__PURE__ */ a("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "One field should define the rhythm"
+							}),
+							/* @__PURE__ */ a("p", {
+								className: "mt-3 text-sm leading-6 aui-text-muted",
+								children: "Show the real input first, then verify disabled and read-only states around it."
+							})
+						]
+					}), /* @__PURE__ */ o("div", {
+						className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
+						children: [
+							/* @__PURE__ */ o("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ a("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Mode"
+								}), /* @__PURE__ */ a("p", {
+									className: "mt-2 text-lg font-semibold capitalize aui-text-strong",
+									children: f
+								})]
+							}),
+							/* @__PURE__ */ o("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ a("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Value"
+								}), /* @__PURE__ */ a("p", {
+									className: "mt-2 truncate text-lg font-semibold aui-text-strong",
+									children: d ? c.textValue : "Empty"
+								})]
+							}),
+							/* @__PURE__ */ o("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ a("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "State"
+								}), /* @__PURE__ */ a("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: d ? "Filled" : "Ready"
+								})]
+							})
+						]
+					})]
+				}), /* @__PURE__ */ o("div", {
+					className: "mt-6 flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ a(e, {
+						size: "sm",
+						variant: f === "search" ? "default" : "outline",
+						onClick: () => p("search"),
+						children: "Search field"
+					}), /* @__PURE__ */ a(e, {
+						size: "sm",
+						variant: f === "profile" ? "default" : "outline",
+						onClick: () => p("profile"),
+						children: "Email field"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ a("section", {
+				className: s,
+				children: /* @__PURE__ */ o("div", {
+					className: "grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]",
+					children: [/* @__PURE__ */ o("div", {
+						className: "space-y-4",
+						children: [
+							/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+								children: "Primary field"
+							}), /* @__PURE__ */ a("h4", {
+								className: "mt-2 text-xl font-semibold tracking-tight aui-text-strong",
+								children: f === "search" ? "Search-driven input" : "Profile contact field"
+							})] }),
+							/* @__PURE__ */ o("div", {
+								className: "rounded-[20px] border border-[color:var(--aui-divider)] p-4",
+								children: [/* @__PURE__ */ a("p", {
+									className: "text-sm font-medium aui-text-muted",
+									children: m
+								}), /* @__PURE__ */ a("div", {
+									className: "mt-3",
+									children: /* @__PURE__ */ a(t, {
+										"aria-label": m,
+										value: c.textValue,
+										onChange: (e) => l({ textValue: e.target.value }),
+										placeholder: h,
+										type: g,
+										kind: f === "search" ? "search" : "text",
+										className: "w-full"
+									})
+								})]
+							}),
+							/* @__PURE__ */ o("div", {
+								className: "grid gap-3 sm:grid-cols-2",
+								children: [/* @__PURE__ */ o("div", {
+									className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+									children: [/* @__PURE__ */ a("p", {
+										className: "text-xs aui-text-muted",
+										children: "Email sample"
+									}), /* @__PURE__ */ a("div", {
+										className: "mt-2",
+										children: /* @__PURE__ */ a(t, {
+											defaultValue: n[1].defaultValue,
+											type: "email",
+											"aria-label": n[1].label
+										})
+									})]
+								}), /* @__PURE__ */ o("div", {
+									className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+									children: [/* @__PURE__ */ a("p", {
+										className: "text-xs aui-text-muted",
+										children: "Disabled sample"
+									}), /* @__PURE__ */ a("div", {
+										className: "mt-2",
+										children: /* @__PURE__ */ a(t, {
+											value: n[2].defaultValue,
+											disabled: !0,
+											"aria-label": n[2].label
+										})
+									})]
+								})]
+							})
+						]
+					}), /* @__PURE__ */ o("div", {
+						className: "space-y-4",
+						children: [
+							/* @__PURE__ */ o("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ a(i, { className: "size-4 aui-text-muted" }), /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Read only"
+								}), /* @__PURE__ */ a("p", {
+									className: "mt-1 text-sm aui-text-muted",
+									children: n[3].label
+								})] })]
+							}),
+							/* @__PURE__ */ a(t, {
+								defaultValue: n[3].defaultValue,
+								readOnly: !0,
+								"aria-label": n[3].label
+							}),
+							/* @__PURE__ */ a("div", {
+								className: "border-y border-[color:var(--aui-divider)]",
+								children: [
+									"Default field should stay legible before any decorators or wrappers are added.",
+									"Disabled state should look intentionally inactive without losing structure.",
+									"Read-only fields must remain easy to scan and copy.",
+									"Avoid extra shells when the real input already provides the right chrome."
+								].map((e) => /* @__PURE__ */ a("div", {
+									className: "border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0",
+									children: e
+								}, e))
+							}),
+							/* @__PURE__ */ o("div", {
+								className: "flex flex-wrap gap-2",
+								children: [
+									/* @__PURE__ */ a(e, {
+										type: "button",
+										size: "sm",
+										onClick: () => l({ textValue: "Dashboard" }),
+										children: "Fill sample"
+									}),
+									/* @__PURE__ */ a(e, {
+										type: "button",
+										size: "sm",
+										variant: "outline",
+										onClick: () => l({ textValue: "finance@azamat.dev" }),
+										children: "Email sample"
+									}),
+									/* @__PURE__ */ a(e, {
+										type: "button",
+										size: "sm",
+										variant: "secondary",
+										onClick: () => l({ textValue: "" }),
+										children: "Clear"
+									})
+								]
+							})
+						]
+					})]
+				})
+			}),
+			/* @__PURE__ */ o("section", {
+				className: s,
+				"data-slot": "input-kind-showcase",
+				children: [
+					/* @__PURE__ */ o("div", {
+						className: "max-w-2xl",
+						children: [
+							/* @__PURE__ */ a("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+								children: "Unified kind API"
+							}),
+							/* @__PURE__ */ a("h4", {
+								className: "mt-2 text-xl font-semibold tracking-tight aui-text-strong",
+								children: "One import, every production input"
+							}),
+							/* @__PURE__ */ o("p", {
+								className: "mt-2 text-sm leading-6 aui-text-muted",
+								children: [
+									"Change only the ",
+									/* @__PURE__ */ a("code", { children: "kind" }),
+									" prop. Validation, disabled state, value callbacks and keyboard behavior stay in the same public component."
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "mt-6 grid gap-x-6 gap-y-5 md:grid-cols-2 xl:grid-cols-3",
+						children: [
+							/* @__PURE__ */ o("label", {
+								className: "grid gap-2 text-sm font-medium aui-text-strong",
+								children: [
+									"Password",
+									/* @__PURE__ */ a(t, {
+										kind: "password",
+										defaultValue: "tembro-2026",
+										autoComplete: "current-password"
+									}),
+									/* @__PURE__ */ a("span", {
+										className: "text-xs font-normal aui-text-muted",
+										children: "Built-in visibility toggle and caps-lock feedback."
+									})
+								]
+							}),
+							/* @__PURE__ */ o("label", {
+								className: "grid gap-2 text-sm font-medium aui-text-strong",
+								children: [
+									"Numeric threshold",
+									/* @__PURE__ */ a(t, {
+										kind: "number",
+										defaultValue: 24,
+										min: 0,
+										max: 100,
+										step: 1
+									}),
+									/* @__PURE__ */ a("span", {
+										className: "text-xs font-normal aui-text-muted",
+										children: "Native limits with normalized numeric callbacks."
+									})
+								]
+							}),
+							/* @__PURE__ */ o("label", {
+								className: "grid gap-2 text-sm font-medium aui-text-strong",
+								children: [
+									"Budget",
+									/* @__PURE__ */ a(t, {
+										kind: "money",
+										value: _,
+										onValueChange: v,
+										prefix: "$",
+										suffix: "USD"
+									}),
+									/* @__PURE__ */ o("span", {
+										className: "text-xs font-normal aui-text-muted",
+										children: ["Current value: ", _ ?? "empty"]
+									})
+								]
+							}),
+							/* @__PURE__ */ o("label", {
+								className: "grid gap-2 text-sm font-medium aui-text-strong",
+								children: [
+									"Phone",
+									/* @__PURE__ */ a(t, {
+										kind: "phone",
+										value: x,
+										onValueChange: S
+									}),
+									/* @__PURE__ */ o("span", {
+										className: "text-xs font-normal aui-text-muted",
+										children: ["Normalized value: ", x || "empty"]
+									})
+								]
+							}),
+							/* @__PURE__ */ o("label", {
+								className: "grid gap-2 text-sm font-medium aui-text-strong",
+								children: [
+									"Release date",
+									/* @__PURE__ */ a(t, {
+										kind: "date",
+										value: C,
+										onValueChange: w
+									}),
+									/* @__PURE__ */ o("span", {
+										className: "text-xs font-normal aui-text-muted",
+										children: ["ISO value: ", C || "empty"]
+									})
+								]
+							}),
+							/* @__PURE__ */ o("label", {
+								className: "grid gap-2 text-sm font-medium aui-text-strong",
+								children: [
+									"Seats",
+									/* @__PURE__ */ a(t, {
+										kind: "quantity",
+										value: y,
+										onValueChange: b,
+										min: 1,
+										max: 12
+									}),
+									/* @__PURE__ */ a("span", {
+										className: "text-xs font-normal aui-text-muted",
+										children: "Use the buttons or type a value directly."
+									})
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ a("div", {
+						className: "mt-6 border-t border-[color:var(--aui-divider)] pt-5",
+						children: /* @__PURE__ */ o("label", {
+							className: "grid max-w-xl gap-2 text-sm font-medium aui-text-strong",
+							children: [
+								"Clearable project name",
+								/* @__PURE__ */ a(t, {
+									kind: "clearable",
+									value: T,
+									onValueChange: E,
+									placeholder: "Enter a project name",
+									clearOnEscape: !0
+								}),
+								/* @__PURE__ */ a("span", {
+									className: "text-xs font-normal aui-text-muted",
+									children: "Use the clear control or press Escape while the field is focused."
+								})
+							]
+						})
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { c as InputShowcase };

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

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

package/dist/src/showcase/premium/json-input/index.cjs

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

package/dist/src/showcase/premium/json-input/index.js

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

package/dist/src/showcase/premium/json-input/mock.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { JsonInput } from "tembro"
+
+export function Example() {
+  return <JsonInput value='{"name":"tembro"}' />
+}`,cliCommand:`npx tembro add json-input`,highlights:[`Validates JSON on edit`,`Returns parsed payload and validity in callback`,`Great for admin panels accepting structured config`],scenarios:[{title:`Webhooks`,description:`Validate headers/payload examples before save.`},{title:`Feature flags`,description:`Let power users edit nested JSON settings.`}]};exports.jsonInputMock=e;

package/dist/src/showcase/premium/json-input/mock.js

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/json-input/mock.ts
+var e = {
+	code: "import { JsonInput } from \"tembro\"\n\nexport function Example() {\n  return <JsonInput value='{\"name\":\"tembro\"}' />\n}",
+	cliCommand: "npx tembro add json-input",
+	highlights: [
+		"Validates JSON on edit",
+		"Returns parsed payload and validity in callback",
+		"Great for admin panels accepting structured config"
+	],
+	scenarios: [{
+		title: "Webhooks",
+		description: "Validate headers/payload examples before save."
+	}, {
+		title: "Feature flags",
+		description: "Let power users edit nested JSON settings."
+	}]
+};
+//#endregion
+export { e as jsonInputMock };

package/dist/src/showcase/premium/json-input/showcase.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/inputs/json-input.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i(){let[e,i]=n.useState(`{
+  "name": "Azamat UI",
+  "version": 1
+}`),[a,o]=n.useState(!0);return(0,r.jsxs)(`div`,{className:`space-y-3`,children:[(0,r.jsx)(t.JsonInput,{value:e,onValueChange:(e,t,n)=>{o(n)},onChange:e=>i(e.target.value)}),(0,r.jsx)(`p`,{className:`text-sm ${a?`text-emerald-600`:`text-destructive`}`,children:a?`JSON is valid`:`JSON is invalid`})]})}exports.JsonInputShowcase=i;

package/dist/src/showcase/premium/json-input/showcase.js

@@ -0,0 +1,22 @@
+import { JsonInput as e } from "../../../components/inputs/json-input.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/showcase/premium/json-input/showcase.tsx
+function i() {
+	let [i, a] = t.useState("{\n  \"name\": \"Azamat UI\",\n  \"version\": 1\n}"), [o, s] = t.useState(!0);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ n(e, {
+			value: i,
+			onValueChange: (e, t, n) => {
+				s(n);
+			},
+			onChange: (e) => a(e.target.value)
+		}), /* @__PURE__ */ n("p", {
+			className: `text-sm ${o ? "text-emerald-600" : "text-destructive"}`,
+			children: o ? "JSON is valid" : "JSON is invalid"
+		})]
+	});
+}
+//#endregion
+export { i as JsonInputShowcase };

package/dist/src/showcase/premium/kanban-board/index.cjs

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

package/dist/src/showcase/premium/kanban-board/index.js

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

package/dist/src/showcase/premium/kanban-board/mock.cjs

@@ -0,0 +1,29 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { KanbanBoard } from "tembro"
+
+const initialColumns = [
+  {
+    key: "todo",
+    title: "To Do",
+    cards: [
+      { key: "a", title: "Prototype", description: "Build initial modal flow." },
+      { key: "b", title: "Audit", description: "Review token contrast." },
+    ],
+  },
+  {
+    key: "progress",
+    title: "In progress",
+    cards: [{ key: "c", title: "Implement", description: "Add demo variants." }],
+  },
+]
+
+export function Example() {
+  const [columns, setColumns] = React.useState(initialColumns)
+
+  return (
+    <KanbanBoard
+      columns={columns}
+      onColumnsChange={setColumns}
+    />
+  )
+}`,cliCommand:`npx tembro add kanban`,highlights:[`Cross-column pointer, touch and keyboard movement`,`Controlled and uncontrolled board state`,`Empty-lane drops, cancel handling and drag overlays`],scenarios:[{title:`Task board`,description:`Keep tasks in grouped lanes with minimal state.`},{title:`Issue triage`,description:`Move and reorder issues across real workflow states.`}]};exports.kanbanBoardMock=e;

package/dist/src/showcase/premium/kanban-board/mock.js

@@ -0,0 +1,19 @@
+//#region src/showcase/premium/kanban-board/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { KanbanBoard } from \"tembro\"\n\nconst initialColumns = [\n  {\n    key: \"todo\",\n    title: \"To Do\",\n    cards: [\n      { key: \"a\", title: \"Prototype\", description: \"Build initial modal flow.\" },\n      { key: \"b\", title: \"Audit\", description: \"Review token contrast.\" },\n    ],\n  },\n  {\n    key: \"progress\",\n    title: \"In progress\",\n    cards: [{ key: \"c\", title: \"Implement\", description: \"Add demo variants.\" }],\n  },\n]\n\nexport function Example() {\n  const [columns, setColumns] = React.useState(initialColumns)\n\n  return (\n    <KanbanBoard\n      columns={columns}\n      onColumnsChange={setColumns}\n    />\n  )\n}",
+	cliCommand: "npx tembro add kanban",
+	highlights: [
+		"Cross-column pointer, touch and keyboard movement",
+		"Controlled and uncontrolled board state",
+		"Empty-lane drops, cancel handling and drag overlays"
+	],
+	scenarios: [{
+		title: "Task board",
+		description: "Keep tasks in grouped lanes with minimal state."
+	}, {
+		title: "Issue triage",
+		description: "Move and reorder issues across real workflow states."
+	}]
+};
+//#endregion
+export { e as kanbanBoardMock };

package/dist/src/showcase/premium/kanban-board/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/display/kanban.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=[{key:`todo`,title:`To do`,description:`Incoming tasks`,cards:[{key:`a`,title:`Audit inputs`,description:`Collect edge cases`,meta:`high`},{key:`b`,title:`Review docs`,description:`Ensure API completeness`,meta:`medium`}]},{key:`done`,title:`Done`,description:`Completed work`,cards:[]},{key:`inProgress`,title:`In progress`,description:`Current sprint`,cards:[{key:`c`,title:`Add demos`,description:`Finish missing routes`,meta:`urgent`}]}];function o(){let[e,o]=r.useState(a),[s,c]=r.useState(void 0);return(0,i.jsxs)(`div`,{className:`space-y-4`,children:[(0,i.jsx)(`div`,{className:`flex gap-2`,children:(0,i.jsx)(t.Button,{size:`sm`,onClick:()=>o(e=>[...e,{key:`new-${Date.now()}`,title:`New`,cards:[]}]),children:`Add lane`})}),(0,i.jsx)(n.KanbanBoard,{columns:e,onColumnsChange:o,onCardClick:e=>c(String(e.key)),renderCard:(e,t,{handle:n})=>(0,i.jsxs)(`div`,{className:`rounded-lg border bg-card p-3`,children:[(0,i.jsxs)(`div`,{className:`flex items-start justify-between gap-2`,children:[(0,i.jsx)(`div`,{className:`font-medium text-sm`,children:e.title}),n]}),(0,i.jsx)(`div`,{className:`mt-1 text-xs text-muted-foreground`,children:e.description}),e.meta&&(0,i.jsx)(`div`,{className:`mt-2 text-xs text-foreground/80`,children:e.meta})]})}),s&&(0,i.jsxs)(`div`,{className:`rounded-md border border-dashed p-3 text-sm text-muted-foreground`,children:[`Selected card: `,s]})]})}exports.KanbanBoardShowcase=o;