tembro 2.1.8 → 2.1.10

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

@@ -1,11 +1,12 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { DateInput } from "tembro"
+import { Input } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState("2026-06-19")
 
   return (
-    <DateInput
+    <Input
+      kind="date"
       value={value}
       onValueChange={setValue}
       min="2026-06-01"
@@ -13,4 +14,4 @@ export function Example() {
       placeholder="YYYY-MM-DD"
     />
   )
-}`,htmlCode:`<label for="date">Date</label><input id="date" type="text" value="2026-06-19" placeholder="YYYY-MM-DD" />`,cliCommand:`npx tembro add date-input`,highlights:[`ISO-like string format assumptions`,`min/max constraints`,`Controlled editing`,`Clear disabled behavior`],relatedBlockSlugs:[`dashboard-starter`,`crm-dashboard`,`settings-form`],scenarios:[{title:`Birth date`,description:`Enforce a valid date window with min/max.`},{title:`Report filter`,description:`Use as single date boundary for dashboards.`},{title:`Default timezone`,description:`Keep string values and normalize at API boundary.`},{title:`Locked fields`,description:`Disable editing during restricted status windows.`}],capabilityNotes:[`Store normalized date string outside the component for stable API integration.`,`Show explicit range with helper text when min/max are enforced.`,`Validate parsed date and format on submit as an app-level safety layer.`,`Align placeholder format with your backend contract (ISO/locale).`]};exports.dateInputMock=e;
+}`,htmlCode:`<label for="date">Date</label><input id="date" type="text" value="2026-06-19" placeholder="YYYY-MM-DD" />`,cliCommand:`npx tembro add input`,highlights:[`ISO-like string format assumptions`,`min/max constraints`,`Controlled editing`,`Clear disabled behavior`],relatedBlockSlugs:[`dashboard-starter`,`crm-dashboard`,`settings-form`],scenarios:[{title:`Birth date`,description:`Enforce a valid date window with min/max.`},{title:`Report filter`,description:`Use as single date boundary for dashboards.`},{title:`Default timezone`,description:`Keep string values and normalize at API boundary.`},{title:`Locked fields`,description:`Disable editing during restricted status windows.`}],capabilityNotes:[`Store normalized date string outside the component for stable API integration.`,`Show explicit range with helper text when min/max are enforced.`,`Validate parsed date and format on submit as an app-level safety layer.`,`Align placeholder format with your backend contract (ISO/locale).`]};exports.dateInputMock=e;

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

@@ -1,8 +1,8 @@
 //#region src/showcase/premium/date-input/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { DateInput } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"2026-06-19\")\n\n  return (\n    <DateInput\n      value={value}\n      onValueChange={setValue}\n      min=\"2026-06-01\"\n      max=\"2026-12-31\"\n      placeholder=\"YYYY-MM-DD\"\n    />\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"2026-06-19\")\n\n  return (\n    <Input\n      kind=\"date\"\n      value={value}\n      onValueChange={setValue}\n      min=\"2026-06-01\"\n      max=\"2026-12-31\"\n      placeholder=\"YYYY-MM-DD\"\n    />\n  )\n}",
 	htmlCode: "<label for=\"date\">Date</label><input id=\"date\" type=\"text\" value=\"2026-06-19\" placeholder=\"YYYY-MM-DD\" />",
-	cliCommand: "npx tembro add date-input",
+	cliCommand: "npx tembro add input",
 	highlights: [
 		"ISO-like string format assumptions",
 		"min/max constraints",

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/inputs/date-input.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)(`2026-06-19`);return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.DateInput,{value:i,onValueChange:e=>a(e),min:`2026-06-01`,max:`2026-12-31`}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Value: `,i||`—`]}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.DateInputShowcase=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/input/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)(`2026-06-19`);return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.Input,{kind:`date`,value:i,onValueChange:e=>a(e),min:`2026-06-01`,max:`2026-12-31`}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Value: `,i||`—`]}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.DateInputShowcase=r;

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

@@ -1,4 +1,4 @@
-import { DateInput as e } from "../../../components/inputs/date-input.js";
+import { Input as e } from "../../../components/ui/input/index.js";
 import { useState as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/showcase/premium/date-input/showcase.tsx
@@ -8,6 +8,7 @@ function i({ mode: i }) {
 		className: "space-y-4",
 		children: [
 			/* @__PURE__ */ n(e, {
+				kind: "date",
 				value: a,
 				onValueChange: (e) => o(e),
 				min: "2026-06-01",

package/dist/showcase/premium/date-range-input/mock.cjs

@@ -1,11 +1,12 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { DateRangeInput } from "@/index"
+import { Input } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState({ from: "2026-06-01", to: "2026-06-30" })
 
   return (
-    <DateRangeInput
+    <Input
+      kind="date-range"
       value={value}
       onValueChange={(nextValue) => setValue({ from: nextValue.from ?? "", to: nextValue.to ?? "" })}
       fromInputProps={{ min: "2026-06-01" }}
@@ -13,4 +14,4 @@ export function Example() {
       required
     />
   )
-}`,htmlCode:`<label for="date-range">Date range</label><input id="date-range" type="text" value="2026-06-01 to 2026-06-30" />`,cliCommand:`npx tembro add date-range-input`,highlights:[`from/to object contract`,`range behavior`,`min/max boundaries`,`single source of truth formatting`],relatedBlockSlugs:[`dashboard-starter`,`crm-dashboard`,`users-table`],scenarios:[{title:`Billing period`,description:`Keep report windows with explicit start/end boundaries.`},{title:`Dashboard filters`,description:`Use range to fetch metrics for a period.`},{title:`Date lock`,description:`Enforce required bounds while user is in restricted flow.`},{title:`Export window`,description:`Share range object to backend for date-interval export.`}],capabilityNotes:[`Treat partial ranges as invalid until both ends are present.`,`Validate from <= to at app layer to avoid inverted ranges.`,`Normalize all range values to canonical storage format.`,`Show user hint text for format and required bounds.`]};exports.dateRangeInputMock=e;
+}`,htmlCode:`<label for="date-range">Date range</label><input id="date-range" type="text" value="2026-06-01 to 2026-06-30" />`,cliCommand:`npx tembro add input`,highlights:[`from/to object contract`,`range behavior`,`min/max boundaries`,`single source of truth formatting`],relatedBlockSlugs:[`dashboard-starter`,`crm-dashboard`,`users-table`],scenarios:[{title:`Billing period`,description:`Keep report windows with explicit start/end boundaries.`},{title:`Dashboard filters`,description:`Use range to fetch metrics for a period.`},{title:`Date lock`,description:`Enforce required bounds while user is in restricted flow.`},{title:`Export window`,description:`Share range object to backend for date-interval export.`}],capabilityNotes:[`Treat partial ranges as invalid until both ends are present.`,`Validate from <= to at app layer to avoid inverted ranges.`,`Normalize all range values to canonical storage format.`,`Show user hint text for format and required bounds.`]};exports.dateRangeInputMock=e;

package/dist/showcase/premium/date-range-input/mock.js

@@ -1,8 +1,8 @@
 //#region src/showcase/premium/date-range-input/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { DateRangeInput } from \"@/index\"\n\nexport function Example() {\n  const [value, setValue] = useState({ from: \"2026-06-01\", to: \"2026-06-30\" })\n\n  return (\n    <DateRangeInput\n      value={value}\n      onValueChange={(nextValue) => setValue({ from: nextValue.from ?? \"\", to: nextValue.to ?? \"\" })}\n      fromInputProps={{ min: \"2026-06-01\" }}\n      toInputProps={{ max: \"2026-12-31\" }}\n      required\n    />\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState({ from: \"2026-06-01\", to: \"2026-06-30\" })\n\n  return (\n    <Input\n      kind=\"date-range\"\n      value={value}\n      onValueChange={(nextValue) => setValue({ from: nextValue.from ?? \"\", to: nextValue.to ?? \"\" })}\n      fromInputProps={{ min: \"2026-06-01\" }}\n      toInputProps={{ max: \"2026-12-31\" }}\n      required\n    />\n  )\n}",
 	htmlCode: "<label for=\"date-range\">Date range</label><input id=\"date-range\" type=\"text\" value=\"2026-06-01 to 2026-06-30\" />",
-	cliCommand: "npx tembro add date-range-input",
+	cliCommand: "npx tembro add input",
 	highlights: [
 		"from/to object contract",
 		"range behavior",

package/dist/showcase/premium/date-range-input/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/inputs/date-range-input.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)({from:`2026-06-01`,to:`2026-06-30`});return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.DateRangeInput,{value:i,onValueChange:e=>a({from:e.from??``,to:e.to??``}),fromInputProps:{min:`2026-06-01`},toInputProps:{max:`2026-12-31`}}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Range: `,i.from,` → `,i.to]}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.DateRangeInputShowcase=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/input/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)({from:`2026-06-01`,to:`2026-06-30`});return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.Input,{kind:`date-range`,value:i,onValueChange:e=>a({from:e.from??``,to:e.to??``}),fromInputProps:{min:`2026-06-01`},toInputProps:{max:`2026-12-31`}}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Range: `,i.from,` → `,i.to]}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.DateRangeInputShowcase=r;

package/dist/showcase/premium/date-range-input/showcase.js

@@ -1,4 +1,4 @@
-import { DateRangeInput as e } from "../../../components/inputs/date-range-input.js";
+import { Input as e } from "../../../components/ui/input/index.js";
 import { useState as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/showcase/premium/date-range-input/showcase.tsx
@@ -11,6 +11,7 @@ function i({ mode: i }) {
 		className: "space-y-4",
 		children: [
 			/* @__PURE__ */ n(e, {
+				kind: "date-range",
 				value: a,
 				onValueChange: (e) => o({
 					from: e.from ?? "",

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

@@ -1,11 +1,12 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { MaskedInput } from "tembro"
+import { Input } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState("AA-123")
 
   return (
-    <MaskedInput
+    <Input
+      kind="masked"
       value={value}
       onValueChange={(nextValue) => setValue(nextValue)}
       mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, "$1-")}
@@ -13,4 +14,4 @@ export function Example() {
     />
   )
 }
-`,htmlCode:`<label for="masked">Referral code</label><input id="masked" type="text" value="AA-123" placeholder="AA-123" />`,cliCommand:`npx tembro add masked-input`,highlights:[`Mask callback runs on each edit`,`Uppercase and slicing are explicit formatting assumptions`,`Raw value assumptions should be mirrored in validation and submit payloads`,`Use a deterministic placeholder that matches the mask contract`],relatedBlockSlugs:[`settings-form`,`crm-dashboard`,`auth-sign-in`],scenarios:[{title:`Referral codes`,description:`Use fixed pattern for short identifiers while typing.`},{title:`License keys`,description:`Apply grouping with a strict uppercase format and controlled length.`},{title:`Display normalization`,description:`Normalize display while preserving form-level expectations.`},{title:`Validation gate`,description:`Reject submission when value shape does not match mask contract.`}],capabilityNotes:[`Document whether callback receives raw text or already masked text.`,`If you need raw payload, sanitize before submit and keep canonical storage layer separate.`,`Use one mask function source for both form and API submission paths.`,`Treat partially typed values as invalid until user completion conditions are met.`]};exports.maskedInputMock=e;
+`,htmlCode:`<label for="masked">Referral code</label><input id="masked" type="text" value="AA-123" placeholder="AA-123" />`,cliCommand:`npx tembro add input`,highlights:[`Mask callback runs on each edit`,`Uppercase and slicing are explicit formatting assumptions`,`Raw value assumptions should be mirrored in validation and submit payloads`,`Use a deterministic placeholder that matches the mask contract`],relatedBlockSlugs:[`settings-form`,`crm-dashboard`,`auth-sign-in`],scenarios:[{title:`Referral codes`,description:`Use fixed pattern for short identifiers while typing.`},{title:`License keys`,description:`Apply grouping with a strict uppercase format and controlled length.`},{title:`Display normalization`,description:`Normalize display while preserving form-level expectations.`},{title:`Validation gate`,description:`Reject submission when value shape does not match mask contract.`}],capabilityNotes:[`Document whether callback receives raw text or already masked text.`,`If you need raw payload, sanitize before submit and keep canonical storage layer separate.`,`Use one mask function source for both form and API submission paths.`,`Treat partially typed values as invalid until user completion conditions are met.`]};exports.maskedInputMock=e;

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

@@ -1,8 +1,8 @@
 //#region src/showcase/premium/masked-input/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { MaskedInput } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"AA-123\")\n\n  return (\n    <MaskedInput\n      value={value}\n      onValueChange={(nextValue) => setValue(nextValue)}\n      mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, \"$1-\")}\n      placeholder=\"AA-123\"\n    />\n  )\n}\n",
+	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"AA-123\")\n\n  return (\n    <Input\n      kind=\"masked\"\n      value={value}\n      onValueChange={(nextValue) => setValue(nextValue)}\n      mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, \"$1-\")}\n      placeholder=\"AA-123\"\n    />\n  )\n}\n",
 	htmlCode: "<label for=\"masked\">Referral code</label><input id=\"masked\" type=\"text\" value=\"AA-123\" placeholder=\"AA-123\" />",
-	cliCommand: "npx tembro add masked-input",
+	cliCommand: "npx tembro add input",
 	highlights: [
 		"Mask callback runs on each edit",
 		"Uppercase and slicing are explicit formatting assumptions",

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/inputs/masked-input.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)(`AA-123`);return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.MaskedInput,{value:i,onValueChange:e=>a(e),mask:e=>e.toUpperCase().slice(0,6).replace(/(.{3})(?=.)/,`$1-`),placeholder:`AA-123`}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Display value: `,i||`—`]}),(0,n.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Task focus: fixed-format field where raw/display value assumptions should be documented.`}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.MaskedInputShowcase=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/input/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)(`AA-123`);return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.Input,{kind:`masked`,value:i,onValueChange:e=>a(e),mask:e=>e.toUpperCase().slice(0,6).replace(/(.{3})(?=.)/,`$1-`),placeholder:`AA-123`}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Display value: `,i||`—`]}),(0,n.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Task focus: fixed-format field where raw/display value assumptions should be documented.`}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.MaskedInputShowcase=r;

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

@@ -1,4 +1,4 @@
-import { MaskedInput as e } from "../../../components/inputs/masked-input.js";
+import { Input as e } from "../../../components/ui/input/index.js";
 import { useState as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/showcase/premium/masked-input/showcase.tsx
@@ -8,6 +8,7 @@ function i({ mode: i }) {
 		className: "space-y-4",
 		children: [
 			/* @__PURE__ */ n(e, {
+				kind: "masked",
 				value: a,
 				onValueChange: (e) => o(e),
 				mask: (e) => e.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, "$1-"),

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

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { MoneyInput } from "tembro"
+import { Input } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState<number | null>(2990.5)
@@ -7,7 +7,8 @@ export function Example() {
 
   return (
     <div className="space-y-3">
-      <MoneyInput
+      <Input
+        kind="money"
         value={value}
         onValueChange={(nextValue, rawValue) => {
           setValue(nextValue)
@@ -24,4 +25,4 @@ export function Example() {
       <p className="text-sm aui-text-muted">Use inputMode to match expected currency input source.</p>
     </div>
   )
-}`,htmlCode:`<label for="money">Budget</label><div>$<input id="money" inputmode="decimal" type="text" /></div>`,cliCommand:`npx tembro add money-input`,highlights:[`Currency prefix/suffix`,`Numeric payload`,`Invalid text handling`,`Custom keyboard mode`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Pricing`,description:`Capture billing amounts with stable parsing and formatting behavior.`},{title:`Raw display vs parsed value`,description:`Keep display string separate from numeric payload.`},{title:`Invalid input`,description:`Handle temporary invalid values while editing before form submit.`},{title:`Negative guard`,description:`Prevent or allow negatives based on financial rules.`}],capabilityNotes:["Use `onValueChange` for canonical numeric value and raw typed value.","Pair `MoneyInput` with schema validation to reject negative or extreme values.",`Use prefix/suffix that matches locale and accounting conventions.`,`In multi-currency systems, normalize and convert right after parsing.`]};exports.moneyInputMock=e;
+}`,htmlCode:`<label for="money">Budget</label><div>$<input id="money" inputmode="decimal" type="text" /></div>`,cliCommand:`npx tembro add input`,highlights:[`Currency prefix/suffix`,`Numeric payload`,`Invalid text handling`,`Custom keyboard mode`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Pricing`,description:`Capture billing amounts with stable parsing and formatting behavior.`},{title:`Raw display vs parsed value`,description:`Keep display string separate from numeric payload.`},{title:`Invalid input`,description:`Handle temporary invalid values while editing before form submit.`},{title:`Negative guard`,description:`Prevent or allow negatives based on financial rules.`}],capabilityNotes:["Use `onValueChange` for canonical numeric value and raw typed value.","Pair `MoneyInput` with schema validation to reject negative or extreme values.",`Use prefix/suffix that matches locale and accounting conventions.`,`In multi-currency systems, normalize and convert right after parsing.`]};exports.moneyInputMock=e;

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

@@ -1,8 +1,8 @@
 //#region src/showcase/premium/money-input/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { MoneyInput } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState<number | null>(2990.5)\n  const [raw, setRaw] = useState(\"$2,990.50\")\n\n  return (\n    <div className=\"space-y-3\">\n      <MoneyInput\n        value={value}\n        onValueChange={(nextValue, rawValue) => {\n          setValue(nextValue)\n          setRaw(rawValue)\n        }}\n        prefix=\"$\"\n        inputMode=\"decimal\"\n        step={0.5}\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Numeric value: <strong>{value === null ? \"invalid\" : value}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">Raw input: {raw}</p>\n      <p className=\"text-sm aui-text-muted\">Use inputMode to match expected currency input source.</p>\n    </div>\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState<number | null>(2990.5)\n  const [raw, setRaw] = useState(\"$2,990.50\")\n\n  return (\n    <div className=\"space-y-3\">\n      <Input\n        kind=\"money\"\n        value={value}\n        onValueChange={(nextValue, rawValue) => {\n          setValue(nextValue)\n          setRaw(rawValue)\n        }}\n        prefix=\"$\"\n        inputMode=\"decimal\"\n        step={0.5}\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Numeric value: <strong>{value === null ? \"invalid\" : value}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">Raw input: {raw}</p>\n      <p className=\"text-sm aui-text-muted\">Use inputMode to match expected currency input source.</p>\n    </div>\n  )\n}",
 	htmlCode: "<label for=\"money\">Budget</label><div>$<input id=\"money\" inputmode=\"decimal\" type=\"text\" /></div>",
-	cliCommand: "npx tembro add money-input",
+	cliCommand: "npx tembro add input",
 	highlights: [
 		"Currency prefix/suffix",
 		"Numeric payload",

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/inputs/money-input.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(){let[r,i]=(0,t.useState)(125.75);return(0,n.jsxs)(`div`,{className:`space-y-3`,children:[(0,n.jsx)(e.MoneyInput,{value:r,onValueChange:e=>i(e),prefix:`$`}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Parsed amount: `,r===null?`invalid`:`$${r.toFixed(2)}`]})]})}exports.MoneyInputShowcase=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/input/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(){let[r,i]=(0,t.useState)(125.75);return(0,n.jsxs)(`div`,{className:`space-y-3`,children:[(0,n.jsx)(e.Input,{kind:`money`,value:r,onValueChange:e=>i(e),prefix:`$`}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Parsed amount: `,r===null?`invalid`:`$${r.toFixed(2)}`]})]})}exports.MoneyInputShowcase=r;

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

@@ -1,4 +1,4 @@
-import { MoneyInput as e } from "../../../components/inputs/money-input.js";
+import { Input as e } from "../../../components/ui/input/index.js";
 import { useState as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/showcase/premium/money-input/showcase.tsx
@@ -7,6 +7,7 @@ function i() {
 	return /* @__PURE__ */ r("div", {
 		className: "space-y-3",
 		children: [/* @__PURE__ */ n(e, {
+			kind: "money",
 			value: i,
 			onValueChange: (e) => a(e),
 			prefix: "$"

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

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { NumberInput, parseNumberInput } from "tembro"
+import { Input } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState<number | null>(14)
@@ -7,16 +7,14 @@ export function Example() {
 
   return (
     <div className="space-y-3">
-      <NumberInput
+      <Input
+        kind="number"
         value={value}
         onNumberChange={(nextValue) => {
           setValue(nextValue)
           setRaw(String(nextValue ?? ""))
         }}
-        onChange={(event) => {
-          const candidate = parseNumberInput(event.target.value)
-          if (candidate === null) setRaw(event.target.value)
-        }}
+        onChange={(event) => setRaw(event.target.value)}
         min={0}
         max={100}
         step={5}
@@ -31,4 +29,4 @@ export function Example() {
       </p>
     </div>
   )
-}`,htmlCode:`<label for="example-number">Amount</label><input id="example-number" inputmode="decimal" type="text" />`,cliCommand:`npx tembro add number-input`,highlights:[`Numeric parsing`,`Min/max constraints`,`Decimal steps`,`allowEmpty fallback`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Budget field`,description:`Keep values inside business bounds while editing quickly.`},{title:`Invalid input`,description:`Use parser path to avoid NaN leaks into form data.`},{title:`Stepper steps`,description:`Use step values that match your business precision.`},{title:`Uncontrolled mode`,description:`Use defaultValue and HTML value when rapid typing is enough.`}],capabilityNotes:[`The component supports controlled numeric state and keeps string display behavior under user editing.`,"Use `min`/`max` with `clamp` semantics when downstream systems expect bounded values.","`allowEmpty` helps avoid forced 0 when field is cleared temporarily.",`Prefer controlled usage in forms that need instant validation and submit-time serialization.`]};exports.numberInputMock=e;
+}`,htmlCode:`<label for="example-number">Amount</label><input id="example-number" inputmode="decimal" type="text" />`,cliCommand:`npx tembro add input`,highlights:[`Numeric parsing`,`Min/max constraints`,`Decimal steps`,`allowEmpty fallback`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Budget field`,description:`Keep values inside business bounds while editing quickly.`},{title:`Invalid input`,description:`Use parser path to avoid NaN leaks into form data.`},{title:`Stepper steps`,description:`Use step values that match your business precision.`},{title:`Uncontrolled mode`,description:`Use defaultValue and HTML value when rapid typing is enough.`}],capabilityNotes:[`The component supports controlled numeric state and keeps string display behavior under user editing.`,"Use `min`/`max` with `clamp` semantics when downstream systems expect bounded values.","`allowEmpty` helps avoid forced 0 when field is cleared temporarily.",`Prefer controlled usage in forms that need instant validation and submit-time serialization.`]};exports.numberInputMock=e;

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

@@ -1,8 +1,8 @@
 //#region src/showcase/premium/number-input/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { NumberInput, parseNumberInput } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState<number | null>(14)\n  const [raw, setRaw] = useState(\"14\")\n\n  return (\n    <div className=\"space-y-3\">\n      <NumberInput\n        value={value}\n        onNumberChange={(nextValue) => {\n          setValue(nextValue)\n          setRaw(String(nextValue ?? \"\"))\n        }}\n        onChange={(event) => {\n          const candidate = parseNumberInput(event.target.value)\n          if (candidate === null) setRaw(event.target.value)\n        }}\n        min={0}\n        max={100}\n        step={5}\n        allowEmpty\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Parsed numeric: <strong>{value === null ? \"unset\" : value}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">Raw text: {raw}</p>\n      <p className=\"text-sm aui-text-muted\">\n        Try entering invalid chars to see how parse and clamp rules apply.\n      </p>\n    </div>\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState<number | null>(14)\n  const [raw, setRaw] = useState(\"14\")\n\n  return (\n    <div className=\"space-y-3\">\n      <Input\n        kind=\"number\"\n        value={value}\n        onNumberChange={(nextValue) => {\n          setValue(nextValue)\n          setRaw(String(nextValue ?? \"\"))\n        }}\n        onChange={(event) => setRaw(event.target.value)}\n        min={0}\n        max={100}\n        step={5}\n        allowEmpty\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Parsed numeric: <strong>{value === null ? \"unset\" : value}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">Raw text: {raw}</p>\n      <p className=\"text-sm aui-text-muted\">\n        Try entering invalid chars to see how parse and clamp rules apply.\n      </p>\n    </div>\n  )\n}",
 	htmlCode: "<label for=\"example-number\">Amount</label><input id=\"example-number\" inputmode=\"decimal\" type=\"text\" />",
-	cliCommand: "npx tembro add number-input",
+	cliCommand: "npx tembro add input",
 	highlights: [
 		"Numeric parsing",
 		"Min/max constraints",

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/inputs/number-input.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(){let[r,i]=(0,t.useState)(12);return(0,n.jsxs)(`div`,{className:`space-y-3`,children:[(0,n.jsx)(e.NumberInput,{value:r,onNumberChange:i,min:0,max:30,step:1}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Current value: `,r??`unset`]})]})}exports.NumberInputShowcase=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/input/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(){let[r,i]=(0,t.useState)(12);return(0,n.jsxs)(`div`,{className:`space-y-3`,children:[(0,n.jsx)(e.Input,{kind:`number`,value:r,onNumberChange:i,min:0,max:30,step:1}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Current value: `,r??`unset`]})]})}exports.NumberInputShowcase=r;

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

@@ -1,4 +1,4 @@
-import { NumberInput as e } from "../../../components/inputs/number-input.js";
+import { Input as e } from "../../../components/ui/input/index.js";
 import { useState as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/showcase/premium/number-input/showcase.tsx
@@ -7,6 +7,7 @@ function i() {
 	return /* @__PURE__ */ r("div", {
 		className: "space-y-3",
 		children: [/* @__PURE__ */ n(e, {
+			kind: "number",
 			value: i,
 			onNumberChange: a,
 			min: 0,

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

@@ -1,11 +1,12 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
-import { PasswordInput } from "tembro"
+import { Input } from "tembro"
 
 export function Example() {
   const [value, setValue] = React.useState("")
 
   return (
-    <PasswordInput
+    <Input
+      kind="password"
       value={value}
       onValueChange={setValue}
       placeholder="Enter workspace password"

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/password-input/mock.ts
 var e = {
-	code: "import * as React from \"react\"\nimport { PasswordInput } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <PasswordInput\n      value={value}\n      onValueChange={setValue}\n      placeholder=\"Enter workspace password\"\n      showCapsLockWarning\n    />\n  )\n}",
+	code: "import * as React from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Input\n      kind=\"password\"\n      value={value}\n      onValueChange={setValue}\n      placeholder=\"Enter workspace password\"\n      showCapsLockWarning\n    />\n  )\n}",
 	highlights: [
 		"Visibility toggle",
 		"Caps Lock warning support",

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/inputs/password-input.cjs"),n=require("../../../components/ui/badge/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({mode:e}){let[o,s]=r.useState(``),[c,l]=r.useState(!1),u=o.length>=12?`Strong`:o.length>=8?`Good`:o.length>=1?`Weak`:`Empty`;return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Sensitive field`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`PasswordInput should reduce mistakes in high-friction moments`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`The control should keep visibility, warnings, and state feedback inside one clean field instead of pushing users into extra UI.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Visibility toggle`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Caps Lock aware`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(t.PasswordInput,{value:o,onValueChange:s,visible:c,onVisibleChange:l,placeholder:`Enter workspace password`,showCapsLockWarning:!0})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Field state`}),(0,i.jsxs)(`div`,{className:`mt-4 space-y-2 text-sm leading-6 aui-text-muted`,children:[(0,i.jsxs)(`p`,{children:[`Length: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:o.length})]}),(0,i.jsxs)(`p`,{children:[`Visibility: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:c?`visible`:`hidden`})]}),(0,i.jsxs)(`p`,{children:[`Strength: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:u})]})]})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Usage note`}),(0,i.jsx)(`p`,{className:`mt-4 text-sm leading-6 aui-text-muted`,children:`Password fields should be operational and quiet. The user should not need a second component just to show, hide, or understand entry state.`})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`Desktopda Caps Lock yoqib ko‘rsangiz warning ham shu field ichida ko‘rinadi.`})}):null]})}exports.PasswordInputShowcase=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/input/index.cjs"),n=require("../../../components/ui/badge/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({mode:e}){let[o,s]=r.useState(``),[c,l]=r.useState(!1),u=o.length>=12?`Strong`:o.length>=8?`Good`:o.length>=1?`Weak`:`Empty`;return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Sensitive field`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`PasswordInput should reduce mistakes in high-friction moments`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`The control should keep visibility, warnings, and state feedback inside one clean field instead of pushing users into extra UI.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Visibility toggle`}),(0,i.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Caps Lock aware`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(t.Input,{kind:`password`,value:o,onValueChange:s,visible:c,onVisibleChange:l,placeholder:`Enter workspace password`,showCapsLockWarning:!0})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Field state`}),(0,i.jsxs)(`div`,{className:`mt-4 space-y-2 text-sm leading-6 aui-text-muted`,children:[(0,i.jsxs)(`p`,{children:[`Length: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:o.length})]}),(0,i.jsxs)(`p`,{children:[`Visibility: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:c?`visible`:`hidden`})]}),(0,i.jsxs)(`p`,{children:[`Strength: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:u})]})]})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Usage note`}),(0,i.jsx)(`p`,{className:`mt-4 text-sm leading-6 aui-text-muted`,children:`Password fields should be operational and quiet. The user should not need a second component just to show, hide, or understand entry state.`})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`Desktopda Caps Lock yoqib ko‘rsangiz warning ham shu field ichida ko‘rinadi.`})}):null]})}exports.PasswordInputShowcase=o;

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

@@ -1,4 +1,4 @@
-import { PasswordInput as e } from "../../../components/inputs/password-input.js";
+import { Input as e } from "../../../components/ui/input/index.js";
 import { Badge as t } from "../../../components/ui/badge/index.js";
 import * as n from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
@@ -46,6 +46,7 @@ function o({ mode: o }) {
 			/* @__PURE__ */ r("section", {
 				className: a,
 				children: /* @__PURE__ */ r(e, {
+					kind: "password",
 					value: s,
 					onValueChange: c,
 					visible: l,

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

@@ -1,16 +1,17 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { PhoneInput } from "tembro"
+import { Input } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState("+998 90 123 45 67")
 
   return (
-    <PhoneInput
+    <Input
+      kind="phone"
       value={value}
       onValueChange={setValue}
-      defaultCountry="UZ"
+      countryCode="+998"
       placeholder="+998 90 123 45 67"
     />
   )
 }
-`,htmlCode:`<label for="phone">Phone</label><input id="phone" type="tel" inputmode="tel" placeholder="+998 90 123 45 67" />`,cliCommand:`npx tembro add phone-input`,highlights:[`Phone formatting assumptions`,`Locale/defaultCountry behavior`,`Controlled value contract`,`Raw vs displayed phone forms`],relatedBlockSlugs:[`users-table`,`settings-form`,`pricing-section`],scenarios:[{title:`Profile contact`,description:`Capture customer phone with predictable display behavior.`},{title:`Checkout phone`,description:`Format validation before creating verification records.`},{title:`Country switch`,description:`Change defaultCountry and keep callback contract stable.`},{title:`Backend integration`,description:`Persist normalized phone payload while rendering localized format.`}],capabilityNotes:[`Write down whether your backend expects E.164 or local phone format.`,`Avoid mixing formatted display and raw storage in schema validation.`,`For country-aware inputs, keep default country explicit in docs and migration notes.`,`Use one validator shared by form and API integration layers.`]};exports.phoneInputMock=e;
+`,htmlCode:`<label for="phone">Phone</label><input id="phone" type="tel" inputmode="tel" placeholder="+998 90 123 45 67" />`,cliCommand:`npx tembro add input`,highlights:[`Phone formatting assumptions`,`Locale/defaultCountry behavior`,`Controlled value contract`,`Raw vs displayed phone forms`],relatedBlockSlugs:[`users-table`,`settings-form`,`pricing-section`],scenarios:[{title:`Profile contact`,description:`Capture customer phone with predictable display behavior.`},{title:`Checkout phone`,description:`Format validation before creating verification records.`},{title:`Country switch`,description:`Change defaultCountry and keep callback contract stable.`},{title:`Backend integration`,description:`Persist normalized phone payload while rendering localized format.`}],capabilityNotes:[`Write down whether your backend expects E.164 or local phone format.`,`Avoid mixing formatted display and raw storage in schema validation.`,`For country-aware inputs, keep default country explicit in docs and migration notes.`,`Use one validator shared by form and API integration layers.`]};exports.phoneInputMock=e;

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

@@ -1,8 +1,8 @@
 //#region src/showcase/premium/phone-input/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { PhoneInput } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"+998 90 123 45 67\")\n\n  return (\n    <PhoneInput\n      value={value}\n      onValueChange={setValue}\n      defaultCountry=\"UZ\"\n      placeholder=\"+998 90 123 45 67\"\n    />\n  )\n}\n",
+	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = useState(\"+998 90 123 45 67\")\n\n  return (\n    <Input\n      kind=\"phone\"\n      value={value}\n      onValueChange={setValue}\n      countryCode=\"+998\"\n      placeholder=\"+998 90 123 45 67\"\n    />\n  )\n}\n",
 	htmlCode: "<label for=\"phone\">Phone</label><input id=\"phone\" type=\"tel\" inputmode=\"tel\" placeholder=\"+998 90 123 45 67\" />",
-	cliCommand: "npx tembro add phone-input",
+	cliCommand: "npx tembro add input",
 	highlights: [
 		"Phone formatting assumptions",
 		"Locale/defaultCountry behavior",

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/inputs/phone-input.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)(`+998 90 123 45 67`);return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.PhoneInput,{value:i,onValueChange:e=>a(e),countryCode:`+998`,placeholder:`+998 90 123 45 67`}),(0,n.jsxs)(`p`,{className:`aui-text-strong text-sm`,children:[`Canonical value: `,i||`—`]}),(0,n.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Display format is formatted for UX; raw value strategy is app-specific.`}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.PhoneInputShowcase=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/input/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({mode:r}){let[i,a]=(0,t.useState)(`+998 90 123 45 67`);return(0,n.jsxs)(`div`,{className:`space-y-4`,children:[(0,n.jsx)(e.Input,{kind:`phone`,value:i,onValueChange:e=>a(e),countryCode:`+998`,placeholder:`+998 90 123 45 67`}),(0,n.jsxs)(`p`,{className:`aui-text-strong text-sm`,children:[`Canonical value: `,i||`—`]}),(0,n.jsx)(`p`,{className:`aui-text-muted text-sm`,children:`Display format is formatted for UX; raw value strategy is app-specific.`}),(0,n.jsxs)(`p`,{className:`aui-text-muted text-sm`,children:[`Mode: `,r]})]})}exports.PhoneInputShowcase=r;

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

@@ -1,4 +1,4 @@
-import { PhoneInput as e } from "../../../components/inputs/phone-input.js";
+import { Input as e } from "../../../components/ui/input/index.js";
 import { useState as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/showcase/premium/phone-input/showcase.tsx
@@ -8,6 +8,7 @@ function i({ mode: i }) {
 		className: "space-y-4",
 		children: [
 			/* @__PURE__ */ n(e, {
+				kind: "phone",
 				value: a,
 				onValueChange: (e) => o(e),
 				countryCode: "+998",

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

@@ -1,12 +1,13 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { QuantityInput } from "tembro"
+import { Input } from "tembro"
 
 export function Example() {
   const [quantity, setQuantity] = useState<number | null>(3)
 
   return (
     <div className="space-y-3">
-      <QuantityInput
+      <Input
+        kind="quantity"
         value={quantity}
         onValueChange={(nextValue: number | null) => setQuantity(nextValue)}
         min={0}
@@ -25,4 +26,4 @@ export function Example() {
       </p>
     </div>
   )
-}`,htmlCode:`<label for="qty">Quantity</label><input id="qty" type="text" inputmode="numeric" />`,cliCommand:`npx tembro add quantity-input`,highlights:[`Stepper controls`,`min/max boundaries`,`controlled usage`,`compact row compatibility`],relatedBlockSlugs:[`crm-dashboard`,`users-table`,`settings-form`],scenarios:[{title:`Line item quantity`,description:`Use in carts and order forms with strict bounds.`},{title:`Inventory controls`,description:`Keep increments aligned with backend-stock constraints.`},{title:`Form tables`,description:`Compact control rendering works well in inline editable rows.`},{title:`Bounded values`,description:`Reject edits below zero and above maximum.`}],capabilityNotes:[`Show inline controls for quick adjustments when quantity edits are frequent.`,"Set `min`/`max` to protect impossible states in business rules.",`Use controlled flow to persist updates across rows and validation passes.`,`Disable controls when quantity is not editable to avoid inconsistent states.`]};exports.quantityInputMock=e;
+}`,htmlCode:`<label for="qty">Quantity</label><input id="qty" type="text" inputmode="numeric" />`,cliCommand:`npx tembro add input`,highlights:[`Stepper controls`,`min/max boundaries`,`controlled usage`,`compact row compatibility`],relatedBlockSlugs:[`crm-dashboard`,`users-table`,`settings-form`],scenarios:[{title:`Line item quantity`,description:`Use in carts and order forms with strict bounds.`},{title:`Inventory controls`,description:`Keep increments aligned with backend-stock constraints.`},{title:`Form tables`,description:`Compact control rendering works well in inline editable rows.`},{title:`Bounded values`,description:`Reject edits below zero and above maximum.`}],capabilityNotes:[`Show inline controls for quick adjustments when quantity edits are frequent.`,"Set `min`/`max` to protect impossible states in business rules.",`Use controlled flow to persist updates across rows and validation passes.`,`Disable controls when quantity is not editable to avoid inconsistent states.`]};exports.quantityInputMock=e;

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

@@ -1,8 +1,8 @@
 //#region src/showcase/premium/quantity-input/mock.ts
 var e = {
-	code: "import { useState } from \"react\"\nimport { QuantityInput } from \"tembro\"\n\nexport function Example() {\n  const [quantity, setQuantity] = useState<number | null>(3)\n\n  return (\n    <div className=\"space-y-3\">\n      <QuantityInput\n        value={quantity}\n        onValueChange={(nextValue: number | null) => setQuantity(nextValue)}\n        min={0}\n        max={10}\n        step={1}\n        showControls\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Items: <strong>{quantity ?? \"unset\"}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">\n        Controls should stay aligned with adjacent action columns in compact table rows.\n      </p>\n      <p className=\"text-sm aui-text-muted\">\n        Try increment/decrement at bounds to validate guardrails.\n      </p>\n    </div>\n  )\n}",
+	code: "import { useState } from \"react\"\nimport { Input } from \"tembro\"\n\nexport function Example() {\n  const [quantity, setQuantity] = useState<number | null>(3)\n\n  return (\n    <div className=\"space-y-3\">\n      <Input\n        kind=\"quantity\"\n        value={quantity}\n        onValueChange={(nextValue: number | null) => setQuantity(nextValue)}\n        min={0}\n        max={10}\n        step={1}\n        showControls\n      />\n      <p className=\"text-sm aui-text-subtle\">\n        Items: <strong>{quantity ?? \"unset\"}</strong>\n      </p>\n      <p className=\"text-sm aui-text-muted\">\n        Controls should stay aligned with adjacent action columns in compact table rows.\n      </p>\n      <p className=\"text-sm aui-text-muted\">\n        Try increment/decrement at bounds to validate guardrails.\n      </p>\n    </div>\n  )\n}",
 	htmlCode: "<label for=\"qty\">Quantity</label><input id=\"qty\" type=\"text\" inputmode=\"numeric\" />",
-	cliCommand: "npx tembro add quantity-input",
+	cliCommand: "npx tembro add input",
 	highlights: [
 		"Stepper controls",
 		"min/max boundaries",

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/inputs/quantity-input.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(){let[r,i]=(0,t.useState)(2);return(0,n.jsxs)(`div`,{className:`space-y-3`,children:[(0,n.jsx)(e.QuantityInput,{value:r,onValueChange:i,min:0,max:12,showControls:!0}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Quantity: `,r??`unset`]})]})}exports.QuantityInputShowcase=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/input/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(){let[r,i]=(0,t.useState)(2);return(0,n.jsxs)(`div`,{className:`space-y-3`,children:[(0,n.jsx)(e.Input,{kind:`quantity`,value:r,onValueChange:i,min:0,max:12,showControls:!0}),(0,n.jsxs)(`p`,{className:`aui-text-subtle text-sm`,children:[`Quantity: `,r??`unset`]})]})}exports.QuantityInputShowcase=r;

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

@@ -1,4 +1,4 @@
-import { QuantityInput as e } from "../../../components/inputs/quantity-input.js";
+import { Input as e } from "../../../components/ui/input/index.js";
 import { useState as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/showcase/premium/quantity-input/showcase.tsx
@@ -7,6 +7,7 @@ function i() {
 	return /* @__PURE__ */ r("div", {
 		className: "space-y-3",
 		children: [/* @__PURE__ */ n(e, {
+			kind: "quantity",
 			value: i,
 			onValueChange: a,
 			min: 0,

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

@@ -1,11 +1,12 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
-import { Kbd, SearchInput } from "tembro"
+import { Input, Kbd } from "tembro"
 
 export function Example() {
   const [value, setValue] = React.useState("")
 
   return (
-    <SearchInput
+    <Input
+      kind="search"
       value={value}
       onValueChange={setValue}
       placeholder="Search customers, invoices, or routes..."

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

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/search-input/mock.ts
 var e = {
-	code: "import * as React from \"react\"\nimport { Kbd, SearchInput } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <SearchInput\n      value={value}\n      onValueChange={setValue}\n      placeholder=\"Search customers, invoices, or routes...\"\n      resultCount={18}\n      shortcut={<Kbd>Ctrl+K</Kbd>}\n      debounceMs={250}\n    />\n  )\n}",
+	code: "import * as React from \"react\"\nimport { Input, Kbd } from \"tembro\"\n\nexport function Example() {\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Input\n      kind=\"search\"\n      value={value}\n      onValueChange={setValue}\n      placeholder=\"Search customers, invoices, or routes...\"\n      resultCount={18}\n      shortcut={<Kbd>Ctrl+K</Kbd>}\n      debounceMs={250}\n    />\n  )\n}",
 	highlights: [
 		"Search icon, result count, and shortcut support",
 		"Debounced value callback",

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/inputs/search-input.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/ui/kbd/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,s=[`Acme Growth workspace`,`Invoice 2048 approval`,`Northwind billing route`,`Customer retention dashboard`,`Workspace member access`,`Export usage report`];function c({mode:e}){let[c,l]=i.useState(``),[u,d]=i.useState(``),f=i.useMemo(()=>{let e=u.trim().toLowerCase();return e?s.filter(t=>t.toLowerCase().includes(e)):s},[u]);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Search control`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`SearchInput should shorten finding, not add interface noise`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`A good search field exposes intent clearly: what can be searched, how many matches remain, and whether the query is still being processed.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Debounced`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Shortcut aware`})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(t.SearchInput,{value:c,onValueChange:l,onDebouncedValueChange:d,placeholder:`Search customers, invoices, or routes...`,resultCount:f.length,shortcut:(0,a.jsx)(r.Kbd,{children:`Ctrl+K`}),debounceMs:250})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[0.95fr_1.05fr]`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Resolved query`}),(0,a.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:u||`No active query`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`The debounced value represents what should usually drive remote or expensive filters.`})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Preview results`}),(0,a.jsx)(`div`,{className:`mt-4 space-y-2 text-sm`,children:f.map(e=>(0,a.jsx)(`div`,{className:`rounded-2xl border border-[color:var(--aui-divider)] px-3 py-2 aui-text-muted`,children:e},e))})]})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(`p`,{className:`text-sm aui-text-muted`,children:"Try searching for `invoice`, `workspace`, or `billing`."})}):null]})}exports.SearchInputShowcase=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/input/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/ui/kbd/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,s=[`Acme Growth workspace`,`Invoice 2048 approval`,`Northwind billing route`,`Customer retention dashboard`,`Workspace member access`,`Export usage report`];function c({mode:e}){let[c,l]=i.useState(``),[u,d]=i.useState(``),f=i.useMemo(()=>{let e=u.trim().toLowerCase();return e?s.filter(t=>t.toLowerCase().includes(e)):s},[u]);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Search control`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`SearchInput should shorten finding, not add interface noise`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`A good search field exposes intent clearly: what can be searched, how many matches remain, and whether the query is still being processed.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Debounced`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Shortcut aware`})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(t.Input,{kind:`search`,value:c,onValueChange:l,onDebouncedValueChange:d,placeholder:`Search customers, invoices, or routes...`,resultCount:f.length,shortcut:(0,a.jsx)(r.Kbd,{children:`Ctrl+K`}),debounceMs:250})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[0.95fr_1.05fr]`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Resolved query`}),(0,a.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:u||`No active query`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`The debounced value represents what should usually drive remote or expensive filters.`})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Preview results`}),(0,a.jsx)(`div`,{className:`mt-4 space-y-2 text-sm`,children:f.map(e=>(0,a.jsx)(`div`,{className:`rounded-2xl border border-[color:var(--aui-divider)] px-3 py-2 aui-text-muted`,children:e},e))})]})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(`p`,{className:`text-sm aui-text-muted`,children:"Try searching for `invoice`, `workspace`, or `billing`."})}):null]})}exports.SearchInputShowcase=c;

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

@@ -1,4 +1,4 @@
-import { SearchInput as e } from "../../../components/inputs/search-input.js";
+import { Input as e } from "../../../components/ui/input/index.js";
 import { Badge as t } from "../../../components/ui/badge/index.js";
 import { Kbd as n } from "../../../components/ui/kbd/index.js";
 import * as r from "react";
@@ -57,6 +57,7 @@ function c({ mode: c }) {
 			/* @__PURE__ */ i("section", {
 				className: o,
 				children: /* @__PURE__ */ i(e, {
+					kind: "search",
 					value: l,
 					onValueChange: u,
 					onDebouncedValueChange: f,

package/dist/showcase/premium/simple-select/mock.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useState } from "react"
-import { Button, SimpleSelect } from "tembro"
+import { Button, Select } from "tembro"
 
 const selectOptions = [
   { value: "public", label: "Public", disabled: false },
@@ -13,7 +13,7 @@ export function Example() {
 
   return (
     <div className="space-y-3">
-      <SimpleSelect
+      <Select
         options={selectOptions}
         value={value}
         onValueChange={(nextValue) => setValue(nextValue ?? "private")}
@@ -26,4 +26,4 @@ export function Example() {
       <Button variant="outline" onClick={() => setValue("public")}>Reset public</Button>
     </div>
   )
-}`,htmlCode:`<button data-slot="simple-select-trigger">Open options</button>`,cliCommand:`npx tembro add simple-select`,highlights:[`Controlled usage`,`Static options`,`Clear default value`,`Disabled option handling`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Controlled visibility`,description:"Use controlled `value` when parent flow tracks visibility state."},{title:`Static catalog`,description:`Use fixed options for status and tier fields.`},{title:`Clear/reset flow`,description:`Expose a reset path before destructive transitions.`},{title:`Compact trigger`,description:`Use small size in dense row or toolbar layouts.`}],capabilityNotes:[`SimpleSelect is best for local option lists that don't require async loading.`,`Avoid rebuilding options each render; memoize if options are computed.`,`Use disabled options to communicate temporarily unavailable targets.`,`Always keep selected value in a controlled parent when used in complex forms.`]};exports.simpleSelectMock=e;
+}`,htmlCode:`<button data-slot="simple-select-trigger">Open options</button>`,cliCommand:`npx tembro add select`,highlights:[`Controlled usage`,`Static options`,`Clear default value`,`Disabled option handling`],relatedBlockSlugs:[`settings-form`,`users-table`,`crm-dashboard`],scenarios:[{title:`Controlled visibility`,description:"Use controlled `value` when parent flow tracks visibility state."},{title:`Static catalog`,description:`Use fixed options for status and tier fields.`},{title:`Clear/reset flow`,description:`Expose a reset path before destructive transitions.`},{title:`Compact trigger`,description:`Use small size in dense row or toolbar layouts.`}],capabilityNotes:[`SimpleSelect is best for local option lists that don't require async loading.`,`Avoid rebuilding options each render; memoize if options are computed.`,`Use disabled options to communicate temporarily unavailable targets.`,`Always keep selected value in a controlled parent when used in complex forms.`]};exports.simpleSelectMock=e;