tembro 2.1.7 → 2.1.9

package/packages/cli/vendor/src/components/form/form-date-range-input.tsx

@@ -1,11 +1,11 @@
 import { Controller, type Control, type FieldPath, type FieldValues } from "react-hook-form"
 
 import { FormFieldShell, type FormFieldShellProps } from "@/components/form/form-field-shell"
-import {
-  DateRangeInput,
-  type DateRangeInputProps,
-  type DateRangeValue,
-} from "@/components/inputs/date-range-input"
+import {
+  DateRangeInput,
+  type DateRangeInputProps,
+  type DateRangeValue,
+} from "@/components/ui/input/date-range"
 
 export type FormDateRangeInputProps<
   TFieldValues extends FieldValues = FieldValues,

package/packages/cli/vendor/src/components/form/form-input.tsx

@@ -6,18 +6,18 @@ import {
   DateRangeInput,
   type DateRangeInputProps,
   type DateRangeValue,
-} from "@/components/inputs/date-range-input"
-import { DateInput, type DateInputProps } from "@/components/inputs/date-input"
+} from "@/components/ui/input/date-range"
+import { DateInput, type DateInputProps } from "@/components/ui/input/date"
 import { Input, type InputClearableProps, type InputSearchProps, type InputTextProps } from "@/components/ui/input"
-import { MaskedInput, type MaskedInputProps } from "@/components/inputs/masked-input"
-import { MoneyInput, type MoneyInputProps } from "@/components/inputs/money-input"
-import { NumberInput, type NumberInputProps } from "@/components/inputs/number-input"
+import { MaskedInput, type MaskedInputProps } from "@/components/ui/input/masked"
+import { MoneyInput, type MoneyInputProps } from "@/components/ui/input/money"
+import { NumberInput, type NumberInputProps } from "@/components/ui/input/number"
 import {
   PhoneInput,
   formatPhoneDigits,
   type PhoneInputProps,
-} from "@/components/inputs/phone-input"
-import { QuantityInput, type QuantityInputProps } from "@/components/inputs/quantity-input"
+} from "@/components/ui/input/phone"
+import { QuantityInput, type QuantityInputProps } from "@/components/ui/input/quantity"
 import {
   FormFieldShell,
   type FormFieldShellControlProps,

package/packages/cli/vendor/src/components/inputs/index.ts

@@ -1,20 +1,6 @@
 export * from "./async-select"
-export * from "./clearable-input"
-export * from "./combobox"
-export * from "./color-input"
-export * from "./date-input"
-export * from "./date-range-input"
-export * from "./masked-input"
-export * from "./money-input"
-export * from "./number-input"
 export * from "./otp-input"
-export * from "./password-input"
-export * from "./phone-input"
-export * from "./quantity-input"
-export * from "./quantity-stepper"
 export * from "./rating"
-export * from "./search-input"
-export * from "./simple-select"
 export * from "./json-input"
 export * from "./time-picker"
 export * from "./slider"

package/packages/cli/vendor/src/components/inputs/public.ts

@@ -1,27 +1,8 @@
-// Select-family members
 export * from "./async-select"
-export * from "./combobox"
-export * from "./simple-select"
-
-// Input-family members
-export * from "./clearable-input"
-export * from "./color-input"
-export * from "./date-input"
-export * from "./date-range-input"
-export * from "./masked-input"
-export * from "./money-input"
-export * from "./number-input"
 export * from "./otp-input"
-export * from "./password-input"
-export * from "./phone-input"
-export * from "./quantity-input"
-export * from "./quantity-stepper"
 export * from "./rating"
-export * from "./search-input"
 export * from "./slider"
 export * from "./tag-input"
 export * from "./inline-editable"
-
-// Advanced / modern inputs
 export * from "./json-input"
 export * from "./time-picker"

package/packages/cli/vendor/src/components/{inputs/clearable-input.tsx → ui/input/clearable.tsx}

@@ -3,8 +3,8 @@
 import * as React from "react"
 import { XIcon } from "lucide-react"
 
-import { InputDecorator } from "@/components/inputs/input-decorator"
-import { createInputChangeHandler, getInputValue } from "@/components/inputs/input-value"
+import { InputDecorator } from "./decorator"
+import { createInputChangeHandler, getInputValue } from "./value"
 import { stopInteractivePropagation } from "@/lib/utils"
 
 export type ClearableInputProps = Omit<

package/packages/cli/vendor/src/components/{inputs/date-range-input.tsx → ui/input/date-range.tsx}

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { DateInput, type DateInputProps } from "@/components/inputs/date-input"
+import { DateInput, type DateInputProps } from "./date"
 import { cn } from "@/lib/utils"
 
 export type DateRangeValue = {

package/packages/cli/vendor/src/components/{inputs/date-input.tsx → ui/input/date.tsx}

@@ -1,8 +1,8 @@
 import * as React from "react"
 import { CalendarDaysIcon } from "lucide-react"
 
-import { InputDecorator } from "@/components/inputs/input-decorator"
-import { createInputChangeHandler, getInputValue } from "@/components/inputs/input-value"
+import { InputDecorator } from "./decorator"
+import { createInputChangeHandler, getInputValue } from "./value"
 
 export type DateInputProps = Omit<
   React.ComponentProps<typeof InputDecorator>,

package/packages/cli/vendor/src/components/ui/input/index.tsx

@@ -11,17 +11,17 @@ import {
   InputGroupText,
   InputGroupTextarea,
 } from "./group"
-import { InputDecorator } from "@/components/inputs/input-decorator"
-import { ClearableInput, type ClearableInputProps } from "@/components/inputs/clearable-input"
-import { DateInput, type DateInputProps } from "@/components/inputs/date-input"
-import { DateRangeInput, type DateRangeInputProps } from "@/components/inputs/date-range-input"
-import { MoneyInput, type MoneyInputProps } from "@/components/inputs/money-input"
-import { MaskedInput, type MaskedInputProps } from "@/components/inputs/masked-input"
-import { NumberInput, type NumberInputProps } from "@/components/inputs/number-input"
-import { PasswordInput, type PasswordInputProps } from "@/components/inputs/password-input"
-import { PhoneInput, type PhoneInputProps } from "@/components/inputs/phone-input"
-import { QuantityInput, type QuantityInputProps } from "@/components/inputs/quantity-input"
-import { SearchInput, type SearchInputProps } from "@/components/inputs/search-input"
+import { ClearableInput, type ClearableInputProps } from "./clearable"
+import { DateInput, type DateInputProps } from "./date"
+import { DateRangeInput, type DateRangeInputProps } from "./date-range"
+import { InputDecorator } from "./decorator"
+import { MaskedInput, type MaskedInputProps } from "./masked"
+import { MoneyInput, type MoneyInputProps } from "./money"
+import { NumberInput, type NumberInputProps } from "./number"
+import { PasswordInput, type PasswordInputProps } from "./password"
+import { PhoneInput, type PhoneInputProps } from "./phone"
+import { QuantityInput, type QuantityInputProps } from "./quantity"
+import { SearchInput, type SearchInputProps } from "./search"
 import { cn } from "@/lib/utils"
 
 export type InputKind =

package/packages/cli/vendor/src/components/{inputs/masked-input.tsx → ui/input/masked.tsx}

@@ -1,7 +1,7 @@
 import * as React from "react"
 
-import { InputDecorator } from "@/components/inputs/input-decorator"
-import { getInputValue, setInputElementValue } from "@/components/inputs/input-value"
+import { InputDecorator } from "./decorator"
+import { getInputValue, setInputElementValue } from "./value"
 
 export type MaskedInputProps = Omit<
   React.ComponentProps<typeof InputDecorator>,

package/packages/cli/vendor/src/components/{inputs/money-input.tsx → ui/input/money.tsx}

@@ -1,8 +1,8 @@
 import * as React from "react"
 
-import { InputChrome } from "@/components/inputs/input-chrome"
-import { getInputValue } from "@/components/inputs/input-value"
-import { parseMoneyLikeInput } from "@/components/inputs/numeric-value"
+import { InputChrome } from "./chrome"
+import { getInputValue } from "./value"
+import { parseMoneyLikeInput } from "./numeric-value"
 import { InputPrimitive } from "@/components/ui/input-primitive"
 import { cn } from "@/lib/utils"
 

package/packages/cli/vendor/src/components/{inputs/number-input.tsx → ui/input/number.tsx}

@@ -1,8 +1,8 @@
 import * as React from "react"
 
-import { InputDecorator } from "@/components/inputs/input-decorator"
-import { getInputValue } from "@/components/inputs/input-value"
-import { clampNumericValue, parseDecimalInput } from "@/components/inputs/numeric-value"
+import { InputDecorator } from "./decorator"
+import { getInputValue } from "./value"
+import { clampNumericValue, parseDecimalInput } from "./numeric-value"
 
 export type NumberInputProps = Omit<
   React.ComponentProps<typeof InputDecorator>,

package/packages/cli/vendor/src/components/{inputs/password-input.tsx → ui/input/password.tsx}

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { EyeIcon, EyeOffIcon } from "lucide-react"
 
-import { InputDecorator } from "@/components/inputs/input-decorator"
+import { InputDecorator } from "./decorator"
 
 export type PasswordInputProps = Omit<
   React.ComponentProps<typeof InputDecorator>,

package/packages/cli/vendor/src/components/{inputs/phone-input.tsx → ui/input/phone.tsx}

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { PhoneIcon } from "lucide-react"
 
-import { MaskedInput, type MaskedInputProps } from "@/components/inputs/masked-input"
+import { MaskedInput, type MaskedInputProps } from "./masked"
 
 export type PhoneInputProps = Omit<MaskedInputProps, "mask" | "unmask" | "inputMode"> & {
   countryCode?: string

package/packages/cli/vendor/src/components/{inputs/quantity-input.tsx → ui/input/quantity.tsx}

@@ -1,9 +1,9 @@
 import * as React from "react"
 import { MinusIcon, PlusIcon } from "lucide-react"
 
-import { InputChrome } from "@/components/inputs/input-chrome"
-import { getInputValue } from "@/components/inputs/input-value"
-import { clampNumericValue, parseDecimalInput } from "@/components/inputs/numeric-value"
+import { InputChrome } from "./chrome"
+import { getInputValue } from "./value"
+import { clampNumericValue, parseDecimalInput } from "./numeric-value"
 import { Button } from "@/components/ui/button"
 import { InputPrimitive } from "@/components/ui/input-primitive"
 import { cn } from "@/lib/utils"

package/packages/cli/vendor/src/components/{inputs/search-input.tsx → ui/input/search.tsx}

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { LoaderCircleIcon, SearchIcon } from "lucide-react"
 
-import { ClearableInput, type ClearableInputProps } from "@/components/inputs/clearable-input"
+import { ClearableInput, type ClearableInputProps } from "./clearable"
 
 export type SearchInputProps = Omit<ClearableInputProps, "leadingIcon" | "type" | "onValueChange"> & {
   searchIcon?: React.ReactNode

package/packages/cli/vendor/src/public-component-surface.ts

@@ -30,7 +30,6 @@ export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "skeleton", registryName: "skeleton", surface: "standalone" },
   { slug: "spinner", registryName: "spinner", surface: "standalone" },
   { slug: "command-bar", registryName: "command-bar", surface: "standalone" },
-  { slug: "quantity-stepper", registryName: "quantity-stepper", surface: "standalone" },
   { slug: "inline-editable", registryName: "inline-editable", surface: "standalone" },
   { slug: "avatar", registryName: "avatar", surface: "standalone" },
   { slug: "code-block", registryName: "code-block", surface: "standalone" },

package/packages/cli/vendor/src/showcase/fallback.tsx

@@ -12,7 +12,6 @@ import {
   Carousel,
   CarouselItem,
   CodeBlock,
-  ColorInput,
   CopyButton,
   CopyField,
   DataState,
@@ -41,7 +40,6 @@ import {
   PropertyGrid,
   QuickActionGrid,
   QRCode,
-  QuantityStepper,
   RangeSlider,
   Rating,
   ResizableHandle,
@@ -445,8 +443,8 @@ function renderGenericPreviewSurface(
     return <OtpInput value={state.textValue.replace(/\D/g, "").slice(0, 6)} onValueChange={(value) => setState({ textValue: value })} />
   }
 
-  if (item.slug === "color-input") {
-    return <ColorInput defaultValue="#22c55e" label="Accent color" description="Theme token preview." />
+  if (item.slug === "color-input") {
+    return <Input type="color" defaultValue="#22c55e" aria-label="Accent color" />
   }
 
   if (item.slug === "tag-input") {
@@ -704,8 +702,8 @@ function renderGenericPreviewSurface(
     return <QRCode value="https://azamat-ui.vercel.app" alt="Azamat UI" />
   }
 
-  if (item.slug === "quantity-stepper") {
-    return <QuantityStepper defaultValue={3} min={1} max={10} />
+  if (item.slug === "quantity-stepper") {
+    return <Input kind="quantity" value={3} min={1} max={10} showControls aria-label="Quantity" />
   }
 
   if (item.slug === "resizable-panel") {

package/packages/cli/vendor/src/showcase/premium/combobox/mock.ts

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const comboboxMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { Button, Combobox } from "@/index"
+import { Button, Select } from "tembro"
 
 const teammateOptions = [
   { value: "azamat", label: "Azamat", description: "Design system owner" },
@@ -15,12 +15,13 @@ export function Example() {
 
   return (
     <div className="space-y-3">
-      <Combobox
+      <Select
         value={value}
         onValueChange={(nextValue) => setValue(nextValue ?? "azamat")}
         options={teammateOptions}
         placeholder="Assign owner"
         searchPlaceholder="Search teammate..."
+        searchable
       />
       <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-muted">
         Current owner: <strong>{value}</strong>
@@ -30,7 +31,7 @@ export function Example() {
   )
 }`,
   htmlCode: `<button data-slot="combobox-trigger">Open combobox</button>`,
-  cliCommand: "npx tembro add combobox",
+  cliCommand: "npx tembro add select",
   highlights: ["Search-led selection", "Controlled value", "Description rows", "Fast reassignment flow"],
   relatedBlockSlugs: ["settings-form", "users-table", "crm-dashboard"],
   scenarios: [

package/packages/cli/vendor/src/showcase/premium/combobox/showcase.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { Badge, Button, Combobox } from "@/index"
+import { Badge, Button, Select } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -42,14 +42,14 @@ export function ComboboxShowcase({ state, setState }: ComponentDemoProps) {
           <div className={panelClass}>
             <p className="text-sm font-medium aui-text-muted">Assign component owner</p>
             <div className="mt-3">
-              <Combobox
+              <Select
                 value={currentValue}
                 options={teammateOptions.map((option) => ({ ...option }))}
                 onValueChange={(value) => setState({ selectValue: value ?? "azamat" })}
                 placeholder="Choose teammate"
                 searchPlaceholder="Search teammate..."
+                searchable
                 clearable
-                allowDeselect
                 showSelectedDescription
                 onSearchChange={setSearchValue}
               />

package/packages/cli/vendor/src/showcase/premium/date-input/mock.ts

@@ -2,13 +2,14 @@ import type { ComponentDemoMock } from "../types"
 
 export const dateInputMock: ComponentDemoMock = {
   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"
@@ -18,7 +19,7 @@ export function Example() {
   )
 }`,
   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", "Controlled editing", "Clear disabled behavior"],
   relatedBlockSlugs: ["dashboard-starter", "crm-dashboard", "settings-form"],
   scenarios: [

package/packages/cli/vendor/src/showcase/premium/date-input/showcase.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react"
 
-import { DateInput } from "@/index"
+import { Input } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -9,7 +9,8 @@ export function DateInputShowcase({ mode }: ComponentDemoProps) {
 
   return (
     <div className="space-y-4">
-      <DateInput
+      <Input
+        kind="date"
         value={value}
         onValueChange={(nextValue: string) => setValue(nextValue)}
         min="2026-06-01"

package/packages/cli/vendor/src/showcase/premium/date-range-input/mock.ts

@@ -2,13 +2,14 @@ import type { ComponentDemoMock } from "../types"
 
 export const dateRangeInputMock: ComponentDemoMock = {
   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" }}
@@ -18,7 +19,7 @@ export function Example() {
   )
 }`,
   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", "min/max boundaries", "single source of truth formatting"],
   relatedBlockSlugs: ["dashboard-starter", "crm-dashboard", "users-table"],
   scenarios: [

package/packages/cli/vendor/src/showcase/premium/date-range-input/showcase.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react"
 
-import { DateRangeInput } from "@/index"
+import { Input } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -9,7 +9,8 @@ export function DateRangeInputShowcase({ mode }: ComponentDemoProps) {
 
   return (
     <div className="space-y-4">
-      <DateRangeInput
+      <Input
+        kind="date-range"
         value={value}
         onValueChange={(nextValue: { from?: string | null; to?: string | null }) => setValue({ from: nextValue.from ?? "", to: nextValue.to ?? "" })}
         fromInputProps={{ min: "2026-06-01" }}

package/packages/cli/vendor/src/showcase/premium/masked-input/mock.ts

@@ -2,13 +2,14 @@ import type { ComponentDemoMock } from "../types"
 
 export const maskedInputMock: ComponentDemoMock = {
   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-")}
@@ -18,7 +19,7 @@ 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",
+  cliCommand: "npx tembro add input",
   highlights: [
     "Mask callback runs on each edit",
     "Uppercase and slicing are explicit formatting assumptions",

package/packages/cli/vendor/src/showcase/premium/masked-input/showcase.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react"
 
-import { MaskedInput } from "@/index"
+import { Input } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -9,7 +9,8 @@ export function MaskedInputShowcase({ mode }: ComponentDemoProps) {
 
   return (
     <div className="space-y-4">
-      <MaskedInput
+      <Input
+        kind="masked"
         value={value}
         onValueChange={(nextValue: string) => setValue(nextValue)}
         mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, "$1-")}

package/packages/cli/vendor/src/showcase/premium/money-input/mock.ts

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const moneyInputMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { MoneyInput } from "tembro"
+import { Input } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState<number | null>(2990.5)
@@ -10,7 +10,8 @@ export function Example() {
 
   return (
     <div className="space-y-3">
-      <MoneyInput
+      <Input
+        kind="money"
         value={value}
         onValueChange={(nextValue, rawValue) => {
           setValue(nextValue)
@@ -29,7 +30,7 @@ export function Example() {
   )
 }`,
   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", "Invalid text handling", "Custom keyboard mode"],
   relatedBlockSlugs: ["settings-form", "users-table", "crm-dashboard"],
   scenarios: [

package/packages/cli/vendor/src/showcase/premium/money-input/showcase.tsx

@@ -1,13 +1,14 @@
 import { useState } from "react"
 
-import { MoneyInput } from "@/index"
+import { Input } from "@/index"
 
 export function MoneyInputShowcase() {
   const [value, setValue] = useState<number | null>(125.75)
 
   return (
     <div className="space-y-3">
-      <MoneyInput
+      <Input
+        kind="money"
         value={value}
         onValueChange={(nextValue: number | null) => setValue(nextValue)}
         prefix="$"

package/packages/cli/vendor/src/showcase/premium/number-input/mock.ts

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const numberInputMock: ComponentDemoMock = {
   code: `import { useState } from "react"
-import { NumberInput, parseNumberInput } from "tembro"
+import { Input } from "tembro"
 
 export function Example() {
   const [value, setValue] = useState<number | null>(14)
@@ -10,16 +10,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}
@@ -36,7 +34,7 @@ export function Example() {
   )
 }`,
   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", "Decimal steps", "allowEmpty fallback"],
   relatedBlockSlugs: ["settings-form", "users-table", "crm-dashboard"],
   scenarios: [

package/packages/cli/vendor/src/showcase/premium/number-input/showcase.tsx

@@ -1,13 +1,13 @@
 import { useState } from "react"
 
-import { NumberInput } from "@/index"
+import { Input } from "@/index"
 
 export function NumberInputShowcase() {
   const [value, setValue] = useState<number | null>(12)
 
   return (
     <div className="space-y-3">
-      <NumberInput value={value} onNumberChange={setValue} min={0} max={30} step={1} />
+      <Input kind="number" value={value} onNumberChange={setValue} min={0} max={30} step={1} />
       <p className="aui-text-subtle text-sm">Current value: {value ?? "unset"}</p>
     </div>
   )

package/packages/cli/vendor/src/showcase/premium/password-input/mock.ts

@@ -2,13 +2,14 @@ import type { ComponentDemoMock } from "../types"
 
 export const passwordInputMock: ComponentDemoMock = {
   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/packages/cli/vendor/src/showcase/premium/password-input/showcase.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { Badge, PasswordInput } from "@/index"
+import { Badge, Input } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -36,7 +36,8 @@ export function PasswordInputShowcase({ mode }: ComponentDemoProps) {
       </section>
 
       <section className={panelClass}>
-        <PasswordInput
+        <Input
+          kind="password"
           value={password}
           onValueChange={setPassword}
           visible={visible}