tembro 3.1.1 → 3.1.5

package/packages/cli/vendor/src/showcase/premium/file-upload/showcase.tsx

@@ -1,10 +1,24 @@
 import * as React from "react"
 
-import { Badge, FileUpload } from "@/index"
+import { Badge, Button, FileUpload } from "@/index"
 
 export function FileUploadShowcase() {
   const [files, setFiles] = React.useState<File[]>([])
   const [status, setStatus] = React.useState<Record<string, "idle" | "uploading" | "success" | "error">>({})
+  const [progress, setProgress] = React.useState<Record<string, number>>({})
+
+  const loadSamples = () => {
+    const now = Date.now()
+    const samples = [
+      new File(["release notes"], "release-notes.pdf", { type: "application/pdf", lastModified: now }),
+      new File(["contract draft"], "contract.docx", { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document", lastModified: now + 1 }),
+      new File(["preview image"], "preview.png", { type: "image/png", lastModified: now + 2 }),
+    ]
+    const keys = samples.map((file) => `${file.name}-${file.size}-${file.lastModified}`)
+    setFiles(samples)
+    setStatus({ [keys[0]]: "uploading", [keys[1]]: "error", [keys[2]]: "success" })
+    setProgress({ [keys[0]]: 46, [keys[1]]: 72, [keys[2]]: 100 })
+  }
 
   React.useEffect(() => {
     setStatus((current) => {
@@ -31,6 +45,15 @@ export function FileUploadShowcase() {
         </p>
       </div>
 
+      <div className="flex flex-wrap gap-2">
+        <Button size="sm" onClick={loadSamples}>Load sample files</Button>
+        <Button size="sm" variant="outline" disabled={files.length === 0} onClick={() => {
+          setFiles([])
+          setStatus({})
+          setProgress({})
+        }}>Clear demo</Button>
+      </div>
+
       <FileUpload
         files={files}
         onFilesChange={setFiles}
@@ -38,14 +61,22 @@ export function FileUploadShowcase() {
         accept=".pdf,.docx,.png"
         maxFiles={4}
         maxSize={4 * 1024 * 1024}
+        progress={progress}
         dropzoneLabel="Upload release assets"
         dropzoneDescription="Drag files here or choose from your device."
-        helperText="Supports PDF, DOCX and PNG up to 4 MB."
+        helperText="Supports PDF, DOCX and PNG up to 4 MB. Filenames containing private are rejected."
+        validateFile={(file) => file.name.toLowerCase().includes("private") ? "Private files cannot be uploaded here." : null}
+        rejectionMessages={{
+          "max-files": ({ maxFiles }) => `Only ${maxFiles} release assets are allowed.`,
+          "max-size": "This asset exceeds the 4 MB release limit.",
+        }}
         onRetryFile={(file) => {
           const key = `${file.name}-${file.size}-${file.lastModified}`
           setStatus((current) => ({ ...current, [key]: "uploading" }))
+          setProgress((current) => ({ ...current, [key]: 35 }))
           window.setTimeout(() => {
             setStatus((current) => ({ ...current, [key]: "success" }))
+            setProgress((current) => ({ ...current, [key]: 100 }))
           }, 900)
         }}
       />

package/packages/cli/vendor/src/showcase/premium/image-cropper/index.ts

@@ -0,0 +1,2 @@
+export * from "./mock"
+export * from "./showcase"

package/packages/cli/vendor/src/showcase/premium/image-cropper/mock.ts

@@ -0,0 +1,15 @@
+import type { ComponentDemoMock } from "../types"
+
+export const imageCropperMock: ComponentDemoMock = {
+  code: `import { ImageCropper } from "tembro"
+
+export function Example() {
+  return <ImageCropper src="/profile-photo.jpg" aspect={1} cropShape="round" />
+}`,
+  cliCommand: "npx tembro add image-cropper",
+  highlights: ["Drag, zoom, rotation, and pixel crop coordinates", "Canvas helper exports the selected area as a Blob"],
+  scenarios: [
+    { title: "Avatar editor", description: "Crop profile media into a consistent square or circle." },
+    { title: "Asset manager", description: "Prepare upload dimensions before saving media." },
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/image-cropper/showcase.tsx

@@ -0,0 +1,14 @@
+import * as React from "react"
+import { ImageCropper } from "@/index"
+
+const demoImage = "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80"
+
+export function ImageCropperShowcase() {
+  const [cropSummary, setCropSummary] = React.useState("Move or zoom the image")
+  return (
+    <div className="grid gap-3">
+      <ImageCropper src={demoImage} aspect={16 / 9} onCropComplete={(_, pixels) => setCropSummary(`${Math.round(pixels.width)} × ${Math.round(pixels.height)} px`)} />
+      <p className="text-xs text-muted-foreground">Crop: {cropSummary}</p>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/index.ts

@@ -2,7 +2,6 @@ import type { ComponentDemoBundle } from "./types"
 
 import { alertMock, AlertShowcase } from "./alert"
 import { AlertDialogShowcase, alertDialogMock } from "./alert-dialog"
-import { accordionMock, AccordionShowcase } from "./accordion"
 import { activityFeedMock, ActivityFeedShowcase } from "./activity-feed"
 import { ActionMenuShowcase, actionMenuMock } from "./action-menu"
 import { appSidebarMock, AppSidebarShowcase } from "./app-sidebar"
@@ -10,7 +9,7 @@ import { asyncSelectMock, AsyncSelectShowcase } from "./async-select"
 import { asyncMultiSelectMock, AsyncMultiSelectShowcase } from "./async-multi-select"
 import { avatarMock, AvatarShowcase } from "./avatar"
 import { carouselMock, CarouselShowcase } from "./carousel"
-import { clearableInputMock, ClearableInputShowcase } from "./clearable-input"
+import { colorPickerMock, ColorPickerShowcase } from "./color-picker"
 import { jsonInputMock, JsonInputShowcase } from "./json-input"
 import { badgeMock, BadgeShowcase } from "./badge"
 import { dividerMock, DividerShowcase } from "./divider"
@@ -24,65 +23,44 @@ import { checkboxMock, CheckboxShowcase } from "./checkbox"
 import { codeBlockMock, CodeBlockShowcase } from "./code-block"
 import { dualListPickerMock, DualListPickerShowcase } from "./dual-list-picker"
 import { collapseMock, CollapseShowcase } from "./collapse"
-import { comboboxMock, ComboboxShowcase } from "./combobox"
-import { commandBarMock, CommandBarShowcase } from "./command-bar"
-import { commandPaletteMock, CommandPaletteShowcase } from "./command-palette"
-import { ConfirmDialogShowcase, confirmDialogMock } from "./confirm-dialog"
-import { copyButtonMock, CopyButtonShowcase } from "./copy-button"
-import { copyFieldMock, CopyFieldShowcase } from "./copy-field"
-import { dataStateMock, DataStateShowcase } from "./data-state"
+import { commandPaletteMock, CommandPaletteShowcase } from "./command-palette"
+import { ConfirmDialogShowcase, confirmDialogMock } from "./confirm-dialog"
+import { copyButtonMock, CopyButtonShowcase } from "./copy-button"
+import { dataStateMock, DataStateShowcase } from "./data-state"
 import { dataTableMock, DataTableShowcase } from "./data-table"
-import { dateInputMock, DateInputShowcase } from "./date-input"
 import { DatePickerShowcase, datePickerMock } from "./date-picker"
-import { DateRangeInputShowcase, dateRangeInputMock } from "./date-range-input"
 import { DateRangePickerShowcase, dateRangePickerMock } from "./date-range-picker"
 import { DescriptionListShowcase, descriptionListMock } from "./description-list"
-import { descriptionsMock, DescriptionsShowcase } from "./descriptions"
 import { dialogMock, DialogShowcase } from "./dialog"
 import { dropdownMenuMock, DropdownMenuShowcase } from "./dropdown-menu"
 import { DrawerShowcase, drawerMock } from "./drawer"
 import { FormWrapperShowcase, formRHFWrapperMock, formSelectMock } from "./form-wrapper"
-import { hoverCardMock, HoverCardShowcase } from "./hover-card"
-import { kanbanBoardMock, KanbanBoardShowcase } from "./kanban-board"
-import { infoCardMock, InfoCardShowcase } from "./info-card"
+import { kanbanBoardMock, KanbanBoardShowcase } from "./kanban-board"
+import { infoCardMock, InfoCardShowcase } from "./info-card"
+import { imageCropperMock, ImageCropperShowcase } from "./image-cropper"
 import { inputMock, InputShowcase } from "./input"
 import { kbdMock, KbdShowcase } from "./kbd"
 import { listMock, ListShowcase } from "./list"
 import { loadingStateMock, LoadingStateShowcase } from "./loading-state"
 import { timePickerMock, TimePickerShowcase } from "./time-picker"
-import { stickyFooterBarMock, StickyFooterBarShowcase } from "./sticky-footer-bar"
-import { maskedInputMock, MaskedInputShowcase } from "./masked-input"
-import { metricGridMock, MetricGridShowcase } from "./metric-grid"
-import { modalShellMock, ModalShellShowcase } from "./modal-shell"
 import { resizablePanelMock, ResizablePanelShowcase } from "./resizable-panel"
-import { moneyInputMock, MoneyInputShowcase } from "./money-input"
 import { NotificationCenterShowcase, notificationCenterMock } from "./notification-center"
-import { numberInputMock, NumberInputShowcase } from "./number-input"
 import { OtpInputShowcase, otpInputMock } from "./otp-input"
-import { pageContainerMock, PageContainerShowcase } from "./page-container"
-import { pageHeaderMock, PageHeaderShowcase } from "./page-header"
-import { PageTabsShowcase, pageTabsMock } from "./page-tabs"
 import { sectionMock, SectionShowcase } from "./section"
-import { phoneInputMock, PhoneInputShowcase } from "./phone-input"
 import { pageStateMock, PageStateShowcase } from "./page-state"
 import { paginationMock, PaginationShowcase } from "./pagination"
 import { popoverMock, PopoverShowcase } from "./popover"
-import { propertyGridMock, PropertyGridShowcase } from "./property-grid"
 import { ProgressShowcase, progressMock } from "./progress"
-import { quantityInputMock, QuantityInputShowcase } from "./quantity-input"
+import { qrCodeMock, QRCodeShowcase } from "./qr-code"
 import { radioGroupMock, RadioGroupShowcase } from "./radio-group"
-import { resultMock, ResultShowcase } from "./result"
-import { rightClickMenuMock, RightClickMenuShowcase } from "./right-click-menu"
+import { rightClickMenuMock, RightClickMenuShowcase } from "./right-click-menu"
+import { richTextEditorMock, RichTextEditorShowcase } from "./rich-text-editor"
 import { scrollBoxMock, ScrollBoxShowcase } from "./scroll-box"
 import { savedFilterSelectMock, SavedFilterSelectShowcase } from "./saved-filter-select"
 import { sortableListMock, SortableListShowcase } from "./sortable-list"
-import { searchInputMock, SearchInputShowcase } from "./search-input"
+import { signaturePadMock, SignaturePadShowcase } from "./signature-pad"
 import { segmentedControlMock, SegmentedControlShowcase } from "./segmented-control"
 import { selectMock, SelectShowcase } from "./select"
-import { sheetShellMock, SheetShellShowcase } from "./sheet-shell"
-import { sidebarNavMock, SidebarNavShowcase } from "./sidebar-nav"
-import { appShellMock, AppShellShowcase } from "./app-shell"
-import { simpleSelectMock, SimpleSelectShowcase } from "./simple-select"
 import { sliderMock, SliderShowcase } from "./slider"
 import { skeletonMock, SkeletonShowcase } from "./skeleton"
 import { spinnerMock, SpinnerShowcase } from "./spinner"
@@ -100,7 +78,6 @@ import { toastMock, ToastShowcase } from "./toast"
 import { tooltipMock, TooltipShowcase } from "./tooltip"
 import { fileUploadMock, FileUploadShowcase } from "./file-upload"
 import { imageUploadMock, ImageUploadShowcase } from "./image-upload"
-import { passwordInputMock, PasswordInputShowcase } from "./password-input"
 import { ratingMock, RatingShowcase } from "./rating"
 import { virtualListMock, VirtualListShowcase } from "./virtual-list"
 
@@ -110,72 +87,54 @@ export type { ComponentDemoBundle, ComponentDemoMock, ComponentDemoProps, Compon
 export const premiumShowcaseDemoRegistry: Record<string, ComponentDemoBundle> = {
   alert: { mock: alertMock, Showcase: AlertShowcase },
   "alert-dialog": { mock: alertDialogMock, Showcase: AlertDialogShowcase },
-  accordion: { mock: accordionMock, Showcase: AccordionShowcase },
   "action-menu": { mock: actionMenuMock, Showcase: ActionMenuShowcase },
   button: { mock: buttonMock, Showcase: ButtonShowcase },
   "button-group": { mock: buttonGroupMock, Showcase: ButtonGroupShowcase },
   calendar: { mock: calendarMock, Showcase: CalendarShowcase },
   "calendar-scheduler": { mock: calendarSchedulerMock, Showcase: CalendarSchedulerShowcase },
-  "command-bar": { mock: commandBarMock, Showcase: CommandBarShowcase },
   "command-palette": { mock: commandPaletteMock, Showcase: CommandPaletteShowcase },
   "carousel": { mock: carouselMock, Showcase: CarouselShowcase },
-  "clearable-input": { mock: clearableInputMock, Showcase: ClearableInputShowcase },
+  "color-picker": { mock: colorPickerMock, Showcase: ColorPickerShowcase },
   "code-block": { mock: codeBlockMock, Showcase: CodeBlockShowcase },
   "dual-list-picker": { mock: dualListPickerMock, Showcase: DualListPickerShowcase },
   divider: { mock: dividerMock, Showcase: DividerShowcase },
-  input: { mock: inputMock, Showcase: InputShowcase },
+  input: { mock: inputMock, Showcase: InputShowcase },
+  "number-input": { mock: inputMock, Showcase: InputShowcase },
   textarea: { mock: textareaMock, Showcase: TextareaShowcase },
   select: { mock: selectMock, Showcase: SelectShowcase },
-  combobox: { mock: comboboxMock, Showcase: ComboboxShowcase },
   "radio-group": { mock: radioGroupMock, Showcase: RadioGroupShowcase },
-  "simple-select": { mock: simpleSelectMock, Showcase: SimpleSelectShowcase },
   "async-select": { mock: asyncSelectMock, Showcase: AsyncSelectShowcase },
   "async-multi-select": { mock: asyncMultiSelectMock, Showcase: AsyncMultiSelectShowcase },
   avatar: { mock: avatarMock, Showcase: AvatarShowcase },
-  "number-input": { mock: numberInputMock, Showcase: NumberInputShowcase },
-  "money-input": { mock: moneyInputMock, Showcase: MoneyInputShowcase },
-  "password-input": { mock: passwordInputMock, Showcase: PasswordInputShowcase },
-  "date-input": { mock: dateInputMock, Showcase: DateInputShowcase },
-  "date-range-input": { mock: dateRangeInputMock, Showcase: DateRangeInputShowcase },
   "date-picker": { mock: datePickerMock, Showcase: DatePickerShowcase },
   "date-range-picker": { mock: dateRangePickerMock, Showcase: DateRangePickerShowcase },
   "description-list": { mock: descriptionListMock, Showcase: DescriptionListShowcase },
-  descriptions: { mock: descriptionsMock, Showcase: DescriptionsShowcase },
   drawer: { mock: drawerMock, Showcase: DrawerShowcase },
   "json-input": { mock: jsonInputMock, Showcase: JsonInputShowcase },
   kanban: { mock: kanbanBoardMock, Showcase: KanbanBoardShowcase },
   "otp-input": { mock: otpInputMock, Showcase: OtpInputShowcase },
-  "quantity-input": { mock: quantityInputMock, Showcase: QuantityInputShowcase },
+  "qr-code": { mock: qrCodeMock, Showcase: QRCodeShowcase },
   rating: { mock: ratingMock, Showcase: RatingShowcase },
-  "masked-input": { mock: maskedInputMock, Showcase: MaskedInputShowcase },
-  "phone-input": { mock: phoneInputMock, Showcase: PhoneInputShowcase },
-  "search-input": { mock: searchInputMock, Showcase: SearchInputShowcase },
+  "signature-pad": { mock: signaturePadMock, Showcase: SignaturePadShowcase },
   slider: { mock: sliderMock, Showcase: SliderShowcase },
   "time-picker": { mock: timePickerMock, Showcase: TimePickerShowcase },
   "tag-input": { mock: tagInputMock, Showcase: TagInputShowcase },
   "dropdown-menu": { mock: dropdownMenuMock, Showcase: DropdownMenuShowcase },
   "confirm-dialog": { mock: confirmDialogMock, Showcase: ConfirmDialogShowcase },
-  checkbox: { mock: checkboxMock, Showcase: CheckboxShowcase },
-  "copy-button": { mock: copyButtonMock, Showcase: CopyButtonShowcase },
-  "copy-field": { mock: copyFieldMock, Showcase: CopyFieldShowcase },
-  switch: { mock: switchMock, Showcase: SwitchShowcase },
+  checkbox: { mock: checkboxMock, Showcase: CheckboxShowcase },
+  "copy-button": { mock: copyButtonMock, Showcase: CopyButtonShowcase },
+  switch: { mock: switchMock, Showcase: SwitchShowcase },
   badge: { mock: badgeMock, Showcase: BadgeShowcase },
   card: { mock: cardMock, Showcase: CardShowcase },
   tabs: { mock: tabsMock, Showcase: TabsShowcase },
   collapse: { mock: collapseMock, Showcase: CollapseShowcase },
   kbd: { mock: kbdMock, Showcase: KbdShowcase },
-  "modal-shell": { mock: modalShellMock, Showcase: ModalShellShowcase },
-  "sheet-shell": { mock: sheetShellMock, Showcase: SheetShellShowcase },
   dialog: { mock: dialogMock, Showcase: DialogShowcase },
-  popover: { mock: popoverMock, Showcase: PopoverShowcase },
-  tooltip: { mock: tooltipMock, Showcase: TooltipShowcase },
-  "hover-card": { mock: hoverCardMock, Showcase: HoverCardShowcase },
-  "right-click-menu": { mock: rightClickMenuMock, Showcase: RightClickMenuShowcase },
+  popover: { mock: popoverMock, Showcase: PopoverShowcase },
+  tooltip: { mock: tooltipMock, Showcase: TooltipShowcase },
+  "right-click-menu": { mock: rightClickMenuMock, Showcase: RightClickMenuShowcase },
+  "rich-text-editor": { mock: richTextEditorMock, Showcase: RichTextEditorShowcase },
   "data-table": { mock: dataTableMock, Showcase: DataTableShowcase },
-  "data-table-column-visibility-menu": { mock: dataTableMock, Showcase: DataTableShowcase },
-  "data-table-sortable-header": { mock: dataTableMock, Showcase: DataTableShowcase },
-  "data-table-bulk-actions": { mock: dataTableMock, Showcase: DataTableShowcase },
-  "data-table-view-presets": { mock: dataTableMock, Showcase: DataTableShowcase },
   "saved-filter-select": { mock: savedFilterSelectMock, Showcase: SavedFilterSelectShowcase },
   "sortable-list": { mock: sortableListMock, Showcase: SortableListShowcase },
   "form-field": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
@@ -192,28 +151,21 @@ export const premiumShowcaseDemoRegistry: Record<string, ComponentDemoBundle> =
   spinner: { mock: spinnerMock, Showcase: SpinnerShowcase },
   table: { mock: tableMock, Showcase: TableShowcase },
   sidebar: { mock: appSidebarMock, Showcase: AppSidebarShowcase },
-  "app-shell": { mock: appShellMock, Showcase: AppShellShowcase },
-  "sidebar-nav": { mock: sidebarNavMock, Showcase: SidebarNavShowcase },
   breadcrumbs: { mock: breadcrumbsMock, Showcase: BreadcrumbsShowcase },
-  "page-header": { mock: pageHeaderMock, Showcase: PageHeaderShowcase },
-  "page-container": { mock: pageContainerMock, Showcase: PageContainerShowcase },
   "page-state": { mock: pageStateMock, Showcase: PageStateShowcase },
-  "page-tabs": { mock: pageTabsMock, Showcase: PageTabsShowcase },
   pagination: { mock: paginationMock, Showcase: PaginationShowcase },
-  "metric-grid": { mock: metricGridMock, Showcase: MetricGridShowcase },
   "notification-center": { mock: notificationCenterMock, Showcase: NotificationCenterShowcase },
-  "info-card": { mock: infoCardMock, Showcase: InfoCardShowcase },
+  "info-card": { mock: infoCardMock, Showcase: InfoCardShowcase },
+  "image-cropper": { mock: imageCropperMock, Showcase: ImageCropperShowcase },
   list: { mock: listMock, Showcase: ListShowcase },
-  "property-grid": { mock: propertyGridMock, Showcase: PropertyGridShowcase },
   "activity-feed": { mock: activityFeedMock, Showcase: ActivityFeedShowcase },
   "loading-state": { mock: loadingStateMock, Showcase: LoadingStateShowcase },
   "data-state": { mock: dataStateMock, Showcase: DataStateShowcase },
-  progress: { mock: progressMock, Showcase: ProgressShowcase },
-  result: { mock: resultMock, Showcase: ResultShowcase },
+  progress: { mock: progressMock, Showcase: ProgressShowcase },
+  "progress-circle": { mock: progressMock, Showcase: ProgressShowcase },
   "resizable-panel": { mock: resizablePanelMock, Showcase: ResizablePanelShowcase },
   section: { mock: sectionMock, Showcase: SectionShowcase },
   statistic: { mock: statisticMock, Showcase: StatisticShowcase },
-  "sticky-footer-bar": { mock: stickyFooterBarMock, Showcase: StickyFooterBarShowcase },
   tag: { mock: tagMock, Showcase: TagShowcase },
   typography: { mock: typographyMock, Showcase: TypographyShowcase },
   "tree-view": { mock: treeViewMock, Showcase: TreeViewShowcase },

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

@@ -1,7 +1,7 @@
 import type { ComponentDemoMock } from "../types"
 
 export const inputMock: ComponentDemoMock = {
-  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: [
@@ -9,7 +9,8 @@ export const inputMock: ComponentDemoMock = {
     "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", "settings-form", "crm-dashboard"],
   scenarios: [

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

@@ -18,6 +18,11 @@ export function InputShowcase({ state, setState }: ComponentDemoProps) {
   const activeLabel = activeMode === "search" ? searchField.label : "Profile contact"
   const activePlaceholder = activeMode === "search" ? searchField.placeholder : "owner@azamatui.dev"
   const activeType = activeMode === "search" ? "text" : "email"
+  const [moneyValue, setMoneyValue] = React.useState<number | null>(1250)
+  const [quantityValue, setQuantityValue] = React.useState<number | null>(3)
+  const [phoneValue, setPhoneValue] = React.useState("+998 90 123 45 67")
+  const [dateValue, setDateValue] = React.useState("2026-07-13")
+  const [clearableValue, setClearableValue] = React.useState("Azamat UI")
 
   return (
     <div className="space-y-0">
@@ -134,6 +139,68 @@ export function InputShowcase({ state, setState }: ComponentDemoProps) {
           </div>
         </div>
       </section>
+
+      <section className={panelClass} data-slot="input-kind-showcase">
+        <div className="max-w-2xl">
+          <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Unified kind API</p>
+          <h4 className="mt-2 text-xl font-semibold tracking-tight aui-text-strong">One import, every production input</h4>
+          <p className="mt-2 text-sm leading-6 aui-text-muted">
+            Change only the <code>kind</code> prop. Validation, disabled state, value callbacks and keyboard behavior stay in the same public component.
+          </p>
+        </div>
+
+        <div className="mt-6 grid gap-x-6 gap-y-5 md:grid-cols-2 xl:grid-cols-3">
+          <label className="grid gap-2 text-sm font-medium aui-text-strong">
+            Password
+            <Input kind="password" defaultValue="tembro-2026" autoComplete="current-password" />
+            <span className="text-xs font-normal aui-text-muted">Built-in visibility toggle and caps-lock feedback.</span>
+          </label>
+
+          <label className="grid gap-2 text-sm font-medium aui-text-strong">
+            Numeric threshold
+            <Input kind="number" defaultValue={24} min={0} max={100} step={1} />
+            <span className="text-xs font-normal aui-text-muted">Native limits with normalized numeric callbacks.</span>
+          </label>
+
+          <label className="grid gap-2 text-sm font-medium aui-text-strong">
+            Budget
+            <Input kind="money" value={moneyValue} onValueChange={setMoneyValue} prefix="$" suffix="USD" />
+            <span className="text-xs font-normal aui-text-muted">Current value: {moneyValue ?? "empty"}</span>
+          </label>
+
+          <label className="grid gap-2 text-sm font-medium aui-text-strong">
+            Phone
+            <Input kind="phone" value={phoneValue} onValueChange={setPhoneValue} />
+            <span className="text-xs font-normal aui-text-muted">Normalized value: {phoneValue || "empty"}</span>
+          </label>
+
+          <label className="grid gap-2 text-sm font-medium aui-text-strong">
+            Release date
+            <Input kind="date" value={dateValue} onValueChange={setDateValue} />
+            <span className="text-xs font-normal aui-text-muted">ISO value: {dateValue || "empty"}</span>
+          </label>
+
+          <label className="grid gap-2 text-sm font-medium aui-text-strong">
+            Seats
+            <Input kind="quantity" value={quantityValue} onValueChange={setQuantityValue} min={1} max={12} />
+            <span className="text-xs font-normal aui-text-muted">Use the buttons or type a value directly.</span>
+          </label>
+        </div>
+
+        <div className="mt-6 border-t border-[color:var(--aui-divider)] pt-5">
+          <label className="grid max-w-xl gap-2 text-sm font-medium aui-text-strong">
+            Clearable project name
+            <Input
+              kind="clearable"
+              value={clearableValue}
+              onValueChange={setClearableValue}
+              placeholder="Enter a project name"
+              clearOnEscape
+            />
+            <span className="text-xs font-normal aui-text-muted">Use the clear control or press Escape while the field is focused.</span>
+          </label>
+        </div>
+      </section>
     </div>
   )
 }

package/packages/cli/vendor/src/showcase/premium/page-state/mock.ts

@@ -1,19 +1,22 @@
 import type { ComponentDemoMock } from "../types"
 
 export const pageStateMock: ComponentDemoMock = {
-  code: `import { Button, PageState } from "tembro"
+  code: `import { Button, InlineState, PageState } from "tembro"
 
 export function Example() {
   return (
-    <PageState
-      tone="error"
-      title="Connection failed"
-      description="We could not sync workspace usage. Retry after restoring the API token."
-      action={<Button variant="outline">Retry sync</Button>}
-    />
+    <>
+      <PageState
+        tone="error"
+        title="Connection failed"
+        description="We could not sync workspace usage. Retry after restoring the API token."
+        action={<Button variant="outline">Retry sync</Button>}
+      />
+      <InlineState tone="empty" title="No comments" onRetry={() => refetch()} />
+    </>
   )
 }`,
-  highlights: ["Full-page status surface", "Built for empty, loading, success, info, and error flows", "Single decisive CTA", "Works as route-level fallback or section state"],
+  highlights: ["Full-page and compact inline surfaces", "Empty, loading, success, info, and error flows", "Retry and custom action support", "Accessible status and alert roles"],
   scenarios: [
     { title: "No data yet", description: "Guide the first useful action when a route has no content." },
     { title: "Load failed", description: "Keep retry and explanation visible without dropping the user into confusion." },

package/packages/cli/vendor/src/showcase/premium/page-state/showcase.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { Badge, Button, PageState } from "@/index"
+import { Badge, Button, InlineState, PageState } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -11,6 +11,8 @@ const tones = ["empty", "loading", "error", "success", "info"] as const
 
 export function PageStateShowcase({ mode }: ComponentDemoProps) {
   const [toneIndex, setToneIndex] = React.useState(2)
+  const [actionMessage, setActionMessage] = React.useState("No action triggered yet")
+  const [retryCount, setRetryCount] = React.useState(0)
   const tone = tones[toneIndex] ?? "error"
 
   return (
@@ -49,14 +51,33 @@ export function PageStateShowcase({ mode }: ComponentDemoProps) {
         }
         action={
           tone === "loading" ? undefined : (
-            <Button variant={tone === "error" ? "outline" : "default"}>
+            <Button variant={tone === "error" ? "outline" : "default"} onClick={() => setActionMessage(`${tone} action completed`)}>
               {tone === "empty" ? "Create invoice" : tone === "error" ? "Retry sync" : tone === "success" ? "Open dashboard" : "View progress"}
             </Button>
           )
         }
-        extra={tone === "error" ? <Button variant="ghost">Open logs</Button> : undefined}
+        extra={tone === "error" ? <Button variant="ghost" onClick={() => setActionMessage("Logs opened")}>Open logs</Button> : undefined}
       />
 
+      <section className={panelClass}>
+        <div className="grid gap-4 lg:grid-cols-2">
+          <InlineState
+            tone="error"
+            title="Widget unavailable"
+            description={`Compact retry state. Attempts: ${retryCount}`}
+            retryLabel="Retry widget"
+            onRetry={() => setRetryCount((value) => value + 1)}
+          />
+          <InlineState
+            tone="success"
+            title="Changes published"
+            description="Use the compact surface inside a section without replacing the whole route."
+            action={<Button size="sm" onClick={() => setActionMessage("Published changes opened")}>View changes</Button>}
+          />
+        </div>
+        <p aria-live="polite" className="mt-4 text-sm aui-text-muted">{actionMessage}</p>
+      </section>
+
       {mode === "playground" ? (
         <section className={panelClass}>
           <div className="flex flex-wrap gap-2">

package/packages/cli/vendor/src/showcase/premium/qr-code/index.ts

@@ -0,0 +1,2 @@
+export * from "./mock"
+export * from "./showcase"

package/packages/cli/vendor/src/showcase/premium/qr-code/mock.ts

@@ -0,0 +1,15 @@
+import type { ComponentDemoMock } from "../types"
+
+export const qrCodeMock: ComponentDemoMock = {
+  code: `import { QRCode } from "tembro"
+
+export function Example() {
+  return <QRCode value="https://example.com/invoices/INV-2048" errorCorrectionLevel="H" size={180} />
+}`,
+  cliCommand: "npx tembro add qr-code",
+  highlights: ["Real standards-compliant QR encoding", "SVG output with configurable error correction and colors"],
+  scenarios: [
+    { title: "Payment links", description: "Encode checkout or invoice URLs into scan-ready symbols." },
+    { title: "Device pairing", description: "Share connection payloads with stronger error correction." },
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/qr-code/showcase.tsx

@@ -0,0 +1,12 @@
+import * as React from "react"
+import { QRCode } from "@/index"
+
+export function QRCodeShowcase() {
+  const [value, setValue] = React.useState("https://tembro.dev/components/qr-code")
+  return (
+    <div className="mx-auto grid max-w-sm justify-items-center gap-4">
+      <QRCode value={value} size={184} errorCorrectionLevel="H" />
+      <input aria-label="QR code value" value={value} className="h-10 w-full rounded-md border bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring" onChange={(event) => setValue(event.target.value)} />
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/rich-text-editor/index.ts

@@ -0,0 +1,2 @@
+export * from "./mock"
+export * from "./showcase"

package/packages/cli/vendor/src/showcase/premium/rich-text-editor/mock.ts

@@ -0,0 +1,15 @@
+import type { ComponentDemoMock } from "../types"
+
+export const richTextEditorMock: ComponentDemoMock = {
+  code: `import { RichTextEditor } from "tembro"
+
+export function Example() {
+  return <RichTextEditor defaultValue="<p>Write the release notes...</p>" onValueChange={console.log} />
+}`,
+  cliCommand: "npx tembro add rich-text-editor",
+  highlights: ["TipTap and ProseMirror editing engine", "HTML/text output with formatting, history, lists, quotes, and links"],
+  scenarios: [
+    { title: "Knowledge base", description: "Author structured support and documentation content." },
+    { title: "Product updates", description: "Create formatted release notes with controlled persistence." },
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/rich-text-editor/showcase.tsx

@@ -0,0 +1,12 @@
+import * as React from "react"
+import { RichTextEditor } from "@/index"
+
+export function RichTextEditorShowcase() {
+  const [value, setValue] = React.useState("<h2>Release notes</h2><p>Describe what changed for customers.</p>")
+  return (
+    <div className="grid gap-3">
+      <RichTextEditor value={value} onValueChange={setValue} onLinkRequest={() => "https://tembro.dev"} />
+      <p className="text-xs text-muted-foreground">{value.length} HTML characters</p>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/signature-pad/index.ts

@@ -0,0 +1,2 @@
+export * from "./mock"
+export * from "./showcase"

package/packages/cli/vendor/src/showcase/premium/signature-pad/mock.ts

@@ -0,0 +1,20 @@
+import type { ComponentDemoMock } from "../types"
+
+export const signaturePadMock: ComponentDemoMock = {
+  code: `import { SignaturePad } from "tembro"
+
+export function Example() {
+  return (
+    <SignaturePad
+      onValueChange={(strokes) => console.log(strokes)}
+      onStrokeEnd={(stroke) => console.log(stroke)}
+    />
+  )
+}`,
+  cliCommand: "npx tembro add signature-pad",
+  highlights: ["Controlled normalized stroke data", "Undo, clear, pointer capture, and PNG export API"],
+  scenarios: [
+    { title: "Approval flow", description: "Capture a signature without coupling form state to canvas pixels." },
+    { title: "Delivery proof", description: "Store normalized strokes or export the rendered signature as PNG." },
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/signature-pad/showcase.tsx

@@ -0,0 +1,14 @@
+import * as React from "react"
+
+import { SignaturePad, type SignatureStroke } from "@/index"
+
+export function SignaturePadShowcase() {
+  const [strokes, setStrokes] = React.useState<SignatureStroke[]>([])
+
+  return (
+    <div className="mx-auto grid w-full max-w-xl gap-3">
+      <SignaturePad value={strokes} onValueChange={setStrokes} />
+      <p className="text-sm text-muted-foreground">{strokes.length} stroke{strokes.length === 1 ? "" : "s"} captured</p>
+    </div>
+  )
+}