tembro 3.1.1 → 3.1.5

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

@@ -1,45 +1,26 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { Label, Input } from "tembro"
+import { Input } from "tembro"
 
 export function Example() {
   const [query, setQuery] = useState("buttons")
+  const [budget, setBudget] = useState<number | null>(1200)
 
   return (
-    <form className="space-y-4">
-      <div>
-        <Label htmlFor="support-email">Support email</Label>
-        <Input id="support-email" type="email" defaultValue="team@acme.io" required />
-      </div>
-
-      <div>
-        <Label htmlFor="component-search">Search components</Label>
-        <Input
-          id="component-search"
-          value={query}
-          onValueChange={setQuery}
-          placeholder="Search by slug or title"
-          clearable
-          trailingAction={<span className="text-xs text-muted-foreground">12 results</span>}
-          replaceTrailingWhenClear={false}
-        />
-      </div>
-
-      <div>
-        <Label htmlFor="api-prefix">Cost estimate</Label>
-        <Input
-          id="api-prefix"
-          defaultValue="120"
-          readOnly
-          trailing={<span className="text-sm aui-text-muted">USD</span>}
-        />
-      </div>
-
-      <div>
-        <Label htmlFor="disabled-input">Locked status</Label>
-        <Input id="disabled-input" disabled value="Locked while syncing" />
-      </div>
-    </form>
+    <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`],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;
+<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,6 +1,6 @@
 //#region src/showcase/premium/input/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { Label, Input } from \"tembro\"\n\nexport function Example() {\n  const [query, setQuery] = useState(\"buttons\")\n\n  return (\n    <form className=\"space-y-4\">\n      <div>\n        <Label htmlFor=\"support-email\">Support email</Label>\n        <Input id=\"support-email\" type=\"email\" defaultValue=\"team@acme.io\" required />\n      </div>\n\n      <div>\n        <Label htmlFor=\"component-search\">Search components</Label>\n        <Input\n          id=\"component-search\"\n          value={query}\n          onValueChange={setQuery}\n          placeholder=\"Search by slug or title\"\n          clearable\n          trailingAction={<span className=\"text-xs text-muted-foreground\">12 results</span>}\n          replaceTrailingWhenClear={false}\n        />\n      </div>\n\n      <div>\n        <Label htmlFor=\"api-prefix\">Cost estimate</Label>\n        <Input\n          id=\"api-prefix\"\n          defaultValue=\"120\"\n          readOnly\n          trailing={<span className=\"text-sm aui-text-muted\">USD</span>}\n        />\n      </div>\n\n      <div>\n        <Label htmlFor=\"disabled-input\">Locked status</Label>\n        <Input id=\"disabled-input\" disabled value=\"Locked while syncing\" />\n      </div>\n    </form>\n  )\n}\n",
+	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: [
@@ -8,7 +8,8 @@ var e = {
 		"Label + control association with htmlFor",
 		"Validation-ready required states",
 		"Disabled and readOnly form states",
-		"Built-in clear action and trailing metadata"
+		"Built-in clear action and trailing metadata",
+		"Password, numeric, money, phone, date and quantity kinds through one import"
 	],
 	relatedBlockSlugs: [
 		"users-table",

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

@@ -1 +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`;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`})]})]})]})})]})}exports.InputShowcase=c;
+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

@@ -7,200 +7,351 @@ 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";
+	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("section", {
+				className: "pb-6",
 				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: "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 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
-									})
+									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", {
+							}),
+							/* @__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"
+									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-2",
+									className: "mt-3",
 									children: /* @__PURE__ */ a(t, {
-										value: n[2].defaultValue,
-										disabled: !0,
-										"aria-label": n[2].label
+										"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: "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", {
+							}),
+							/* @__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: "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: "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: [
-								/* @__PURE__ */ a(e, {
-									type: "button",
-									size: "sm",
-									onClick: () => l({ textValue: "Dashboard" }),
-									children: "Fill sample"
+								"Clearable project name",
+								/* @__PURE__ */ a(t, {
+									kind: "clearable",
+									value: T,
+									onValueChange: E,
+									placeholder: "Enter a project name",
+									clearOnEscape: !0
 								}),
-								/* @__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__ */ a("span", {
+									className: "text-xs font-normal aui-text-muted",
+									children: "Use the clear control or press Escape while the field is focused."
 								})
 							]
 						})
-					]
-				})]
+					})
+				]
 			})
-		})]
+		]
 	});
 }
 //#endregion