tembro 3.1.16 → 4.0.0

package/dist/src/showcase/premium/info-card/mock.js

@@ -1,31 +0,0 @@
-//#region src/showcase/premium/info-card/mock.ts
-var e = {
-	code: "import { InfoCard } from \"tembro\"\n\nexport function Example() {\n  return (\n    <InfoCard\n      title=\"Team\"\n      description=\"Active workspace members and billing snapshot.\"\n      eyebrow=\"KPI context\"\n      compact\n    >\n      Keep status, metadata and helper actions in one reusable card.\n    </InfoCard>\n  )\n}",
-	highlights: [
-		"Compact and standard card modes",
-		"Supports header, body and footer slots",
-		"Good for metadata blocks",
-		"Reusable on dashboard and forms"
-	],
-	scenarios: [
-		{
-			title: "Context blocks",
-			description: "Display metadata near complex forms or tables."
-		},
-		{
-			title: "Action cards",
-			description: "Add CTA area and media when quick guidance is needed."
-		},
-		{
-			title: "Dashboard cards",
-			description: "Compose many cards for module summaries."
-		}
-	],
-	capabilityNotes: [
-		"Use `eyebrow` for micro-headings and quick context.",
-		"Use `media` to place avatars or charts next to text.",
-		"Switch to `compact` in dense lists; keep default for detailed descriptions."
-	]
-};
-//#endregion
-export { e as infoCardMock };

package/dist/src/showcase/premium/info-card/showcase.cjs

@@ -1 +0,0 @@
-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/info-card.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a={title:`Workspace`,description:`Use one card per logical entity and keep content scannable.`,actions:(0,i.jsxs)(`div`,{className:`flex gap-2`,children:[(0,i.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Export`}),(0,i.jsx)(t.Button,{size:`sm`,children:`Open`})]})};function o({mode:e}){let[o,s]=r.useState(e===`playground`),[c,l]=r.useState(`vertical`),[u,d]=r.useState(!0);return(0,i.jsxs)(`div`,{className:`space-y-4`,children:[e===`playground`?(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Button,{size:`sm`,variant:o?`default`:`outline`,onClick:()=>s(e=>!e),children:o?`Use spacious`:`Use compact`}),(0,i.jsx)(t.Button,{size:`sm`,variant:c===`vertical`?`default`:`outline`,onClick:()=>l(`vertical`),children:`Vertical`}),(0,i.jsx)(t.Button,{size:`sm`,variant:c===`horizontal`?`default`:`outline`,onClick:()=>l(`horizontal`),children:`Horizontal`}),(0,i.jsx)(t.Button,{size:`sm`,variant:u?`default`:`outline`,onClick:()=>d(e=>!e),children:u?`Selected`:`Default`})]}):null,(0,i.jsx)(n.InfoCard,{eyebrow:`Summary`,title:a.title,description:a.description,actions:a.actions,compact:o,orientation:c,selected:u,children:(0,i.jsx)(`p`,{className:`aui-text-muted mt-2 text-sm`,children:`Keep micro metadata and status chips in one card surface.`})}),(0,i.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,i.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Header + actions`}),(0,i.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Action area stays isolated from the parent card click/select state.`})]}),(0,i.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Density`}),(0,i.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Compact and regular modes cover dashboard tiles and detail summaries.`})]}),(0,i.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Orientation`}),(0,i.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Vertical and horizontal layouts reuse the same surface API.`})]})]})]})}exports.InfoCardShowcase=o;

package/dist/src/showcase/premium/info-card/showcase.js

@@ -1,107 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { InfoCard as t } from "../../../components/display/info-card.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/showcase/premium/info-card/showcase.tsx
-var a = {
-	title: "Workspace",
-	description: "Use one card per logical entity and keep content scannable.",
-	actions: /* @__PURE__ */ i("div", {
-		className: "flex gap-2",
-		children: [/* @__PURE__ */ r(e, {
-			size: "sm",
-			variant: "outline",
-			children: "Export"
-		}), /* @__PURE__ */ r(e, {
-			size: "sm",
-			children: "Open"
-		})]
-	})
-};
-function o({ mode: o }) {
-	let [s, c] = n.useState(o === "playground"), [l, u] = n.useState("vertical"), [d, f] = n.useState(!0);
-	return /* @__PURE__ */ i("div", {
-		className: "space-y-4",
-		children: [
-			o === "playground" ? /* @__PURE__ */ i("div", {
-				className: "flex flex-wrap gap-2",
-				children: [
-					/* @__PURE__ */ r(e, {
-						size: "sm",
-						variant: s ? "default" : "outline",
-						onClick: () => c((e) => !e),
-						children: s ? "Use spacious" : "Use compact"
-					}),
-					/* @__PURE__ */ r(e, {
-						size: "sm",
-						variant: l === "vertical" ? "default" : "outline",
-						onClick: () => u("vertical"),
-						children: "Vertical"
-					}),
-					/* @__PURE__ */ r(e, {
-						size: "sm",
-						variant: l === "horizontal" ? "default" : "outline",
-						onClick: () => u("horizontal"),
-						children: "Horizontal"
-					}),
-					/* @__PURE__ */ r(e, {
-						size: "sm",
-						variant: d ? "default" : "outline",
-						onClick: () => f((e) => !e),
-						children: d ? "Selected" : "Default"
-					})
-				]
-			}) : null,
-			/* @__PURE__ */ r(t, {
-				eyebrow: "Summary",
-				title: a.title,
-				description: a.description,
-				actions: a.actions,
-				compact: s,
-				orientation: l,
-				selected: d,
-				children: /* @__PURE__ */ r("p", {
-					className: "aui-text-muted mt-2 text-sm",
-					children: "Keep micro metadata and status chips in one card surface."
-				})
-			}),
-			/* @__PURE__ */ i("div", {
-				className: "grid gap-3 md:grid-cols-3",
-				children: [
-					/* @__PURE__ */ i("div", {
-						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
-						children: [/* @__PURE__ */ r("p", {
-							className: "font-medium aui-text-strong",
-							children: "Header + actions"
-						}), /* @__PURE__ */ r("p", {
-							className: "mt-2 aui-text-muted",
-							children: "Action area stays isolated from the parent card click/select state."
-						})]
-					}),
-					/* @__PURE__ */ i("div", {
-						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
-						children: [/* @__PURE__ */ r("p", {
-							className: "font-medium aui-text-strong",
-							children: "Density"
-						}), /* @__PURE__ */ r("p", {
-							className: "mt-2 aui-text-muted",
-							children: "Compact and regular modes cover dashboard tiles and detail summaries."
-						})]
-					}),
-					/* @__PURE__ */ i("div", {
-						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
-						children: [/* @__PURE__ */ r("p", {
-							className: "font-medium aui-text-strong",
-							children: "Orientation"
-						}), /* @__PURE__ */ r("p", {
-							className: "mt-2 aui-text-muted",
-							children: "Vertical and horizontal layouts reuse the same surface API."
-						})]
-					})
-				]
-			})
-		]
-	});
-}
-//#endregion
-export { o as InfoCardShowcase };

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

@@ -1 +0,0 @@
-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

@@ -1,30 +0,0 @@
-//#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

@@ -1 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,45 +0,0 @@
-//#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

@@ -1 +0,0 @@
-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(`Tembro`);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

@@ -1,358 +0,0 @@
-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("Tembro");
-	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

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

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

@@ -1 +0,0 @@
-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

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