tembro 2.0.5 → 2.1.0

package/packages/cli/vendor/src/components/upload/file-upload.tsx

@@ -4,7 +4,8 @@ import { FileIcon, UploadCloudIcon, XIcon } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { cn, stopInteractivePropagation } from "@/lib/utils"
 
-export type FileUploadRejectReason = "max-files" | "max-size" | "type"
+export type FileUploadRejectReason = "max-files" | "max-size" | "type"
+export type FileUploadItemStatus = "idle" | "uploading" | "success" | "error"
 
 export type FileUploadRejectedFile = {
   file: File
@@ -24,13 +25,15 @@ export type FileUploadRejectionMessages = Partial<
   Record<FileUploadRejectReason, string | ((context: FileUploadRejectionMessageContext) => string)>
 >
 
-export type FileUploadRenderFileState = {
-  file: File
-  index: number
-  progress?: number
-  remove: () => void
-  removeLabel?: string
-}
+export type FileUploadRenderFileState = {
+  file: File
+  index: number
+  progress?: number
+  status: FileUploadItemStatus
+  remove: () => void
+  retry?: () => void
+  removeLabel?: string
+}
 
 export type FileUploadRenderRejectedFileState = {
   rejectedFile: FileUploadRejectedFile
@@ -70,13 +73,17 @@ export type FileUploadProps = NativeFileInputProps & {
   rejectionMessages?: FileUploadRejectionMessages
   maxFiles?: number
   maxSize?: number
-  appendFiles?: boolean
-  showFileList?: boolean
-  showClearButton?: boolean
-  loading?: boolean
-  progress?: number | Record<string, number>
-  renderFile?: (state: FileUploadRenderFileState) => React.ReactNode
-  renderRejectedFile?: (state: FileUploadRenderRejectedFileState) => React.ReactNode
+  appendFiles?: boolean
+  showFileList?: boolean
+  showClearButton?: boolean
+  loading?: boolean
+  progress?: number | Record<string, number>
+  status?: FileUploadItemStatus | Record<string, FileUploadItemStatus>
+  validateFile?: (file: File) => string | null | Promise<string | null>
+  onRetryFile?: (file: File, index: number) => void
+  fileTriggerLabel?: string
+  renderFile?: (state: FileUploadRenderFileState) => React.ReactNode
+  renderRejectedFile?: (state: FileUploadRenderRejectedFileState) => React.ReactNode
   renderActions?: (state: { openFileDialog: () => void; clearFiles: () => void; files: File[] }) => React.ReactNode
   className?: string
   inputClassName?: string
@@ -122,10 +129,15 @@ function getFileKey(file: File) {
   return `${file.name}-${file.size}-${file.lastModified}`
 }
 
-function getProgressForFile(progress: FileUploadProps["progress"], file: File) {
-  if (typeof progress === "number") return progress
-  return progress?.[getFileKey(file)] ?? progress?.[file.name]
-}
+function getProgressForFile(progress: FileUploadProps["progress"], file: File) {
+  if (typeof progress === "number") return progress
+  return progress?.[getFileKey(file)] ?? progress?.[file.name]
+}
+
+function getStatusForFile(status: FileUploadProps["status"], file: File): FileUploadItemStatus {
+  if (typeof status === "string") return status
+  return status?.[getFileKey(file)] ?? status?.[file.name] ?? "idle"
+}
 
 function resolveRejectionMessage(
   reason: FileUploadRejectReason,
@@ -148,29 +160,31 @@ function resolveRejectionMessage(
   }
 }
 
-function validateIncomingFiles({
+function validateIncomingFiles({
   currentFiles,
   incomingFiles,
   accept,
   maxFiles,
-  maxSize,
-  appendFiles,
-  rejectionMessages,
-}: {
+  maxSize,
+  appendFiles,
+  rejectionMessages,
+  validateFile,
+}: {
   currentFiles: File[]
   incomingFiles: File[]
   accept?: string
   maxFiles?: number
   maxSize?: number
-  appendFiles: boolean
-  rejectionMessages?: FileUploadRejectionMessages
-}) {
-  const accepted: File[] = []
-  const rejected: FileUploadRejectedFile[] = []
+  appendFiles: boolean
+  rejectionMessages?: FileUploadRejectionMessages
+  validateFile?: FileUploadProps["validateFile"]
+}) {
+  const accepted: File[] = []
+  const rejected: FileUploadRejectedFile[] = []
   const nextBase = appendFiles ? currentFiles : []
   const effectiveMaxFiles = maxFiles ?? (appendFiles ? undefined : incomingFiles.length)
 
-  for (const file of incomingFiles) {
+  for (const file of incomingFiles) {
     if (effectiveMaxFiles !== undefined && nextBase.length + accepted.length >= effectiveMaxFiles) {
       rejected.push({
         file,
@@ -189,17 +203,27 @@ function validateIncomingFiles({
       continue
     }
 
-    if (!fileMatchesAccept(file, accept)) {
+    if (!fileMatchesAccept(file, accept)) {
       rejected.push({
         file,
         reason: "type",
         message: resolveRejectionMessage("type", { file, maxFiles: effectiveMaxFiles, maxSize, accept }, rejectionMessages),
       })
-      continue
-    }
-
-    accepted.push(file)
-  }
+      continue
+    }
+
+    const customMessage = validateFile?.(file)
+    if (typeof customMessage === "string" && customMessage) {
+      rejected.push({
+        file,
+        reason: "type",
+        message: customMessage,
+      })
+      continue
+    }
+
+    accepted.push(file)
+  }
 
   return {
     accepted,
@@ -208,14 +232,25 @@ function validateIncomingFiles({
   }
 }
 
-function defaultRenderFile({ file, progress, remove, removeLabel = "Remove file" }: FileUploadRenderFileState) {
+function defaultRenderFile({ file, progress, status, remove, retry, removeLabel = "Remove file" }: FileUploadRenderFileState) {
   return (
     <div className="flex min-w-0 items-center gap-3">
       <span className="flex size-9 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/90 shadow-sm">
         <FileIcon className="size-4 text-muted-foreground" />
       </span>
       <div className="min-w-0 flex-1">
-        <div className="truncate text-sm font-medium text-foreground">{file.name}</div>
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="truncate text-sm font-medium text-foreground">{file.name}</div>
+          <span className={cn(
+            "rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em]",
+            status === "uploading" && "bg-primary/10 text-primary",
+            status === "success" && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+            status === "error" && "bg-destructive/10 text-destructive",
+            status === "idle" && "bg-muted text-muted-foreground"
+          )}>
+            {status}
+          </span>
+        </div>
         <div className="text-xs text-muted-foreground">{formatBytes(file.size)}</div>
         {typeof progress === "number" && (
           <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-muted/80">
@@ -226,6 +261,11 @@ function defaultRenderFile({ file, progress, remove, removeLabel = "Remove file"
           </div>
         )}
       </div>
+      {status === "error" && retry ? (
+        <Button type="button" variant="outline" size="sm" className="rounded-full" onClick={retry}>
+          Retry
+        </Button>
+      ) : null}
       <Button
         type="button"
         variant="ghost"
@@ -245,7 +285,7 @@ function defaultRenderFile({ file, progress, remove, removeLabel = "Remove file"
   )
 }
 
-function FileUpload({
+function FileUpload({
   files = [],
   onFilesChange,
   rejectedFiles,
@@ -264,9 +304,13 @@ function FileUpload({
   appendFiles = true,
   showFileList = true,
   showClearButton = true,
-  loading = false,
-  progress,
-  renderFile,
+  loading = false,
+  progress,
+  status,
+  validateFile,
+  onRetryFile,
+  fileTriggerLabel = "Open file picker",
+  renderFile,
   renderRejectedFile,
   renderActions,
   className,
@@ -316,13 +360,22 @@ function FileUpload({
   }, [onFilesChange, setRejectedFiles])
 
   const processFiles = React.useCallback(
-    (incomingFiles: File[]) => {
-      const result = validateIncomingFiles({ currentFiles: files, incomingFiles, accept, maxFiles, maxSize, appendFiles, rejectionMessages })
-      onFilesChange?.(result.nextFiles)
-      setRejectedFiles(result.rejected)
-    },
-    [accept, appendFiles, files, maxFiles, maxSize, onFilesChange, rejectionMessages, setRejectedFiles]
-  )
+    (incomingFiles: File[]) => {
+      const result = validateIncomingFiles({
+        currentFiles: files,
+        incomingFiles,
+        accept,
+        maxFiles,
+        maxSize,
+        appendFiles,
+        rejectionMessages,
+        validateFile,
+      })
+      onFilesChange?.(result.nextFiles)
+      setRejectedFiles(result.rejected)
+    },
+    [accept, appendFiles, files, maxFiles, maxSize, onFilesChange, rejectionMessages, setRejectedFiles, validateFile]
+  )
 
   const removeFile = React.useCallback(
     (fileIndex: number) => {
@@ -333,7 +386,7 @@ function FileUpload({
 
   const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     if (isDisabled) return
-    processFiles(Array.from(event.target.files ?? []))
+    processFiles(Array.from(event.target.files ?? []))
     event.target.value = ""
   }
 
@@ -371,8 +424,8 @@ function FileUpload({
     event.preventDefault()
     dragDepthRef.current = 0
     setIsDragging(false)
-    processFiles(Array.from(event.dataTransfer.files ?? []))
-  }
+    processFiles(Array.from(event.dataTransfer.files ?? []))
+  }
 
   return (
     <div data-slot="file-upload" className={cn("grid gap-3", className)}>
@@ -391,9 +444,9 @@ function FileUpload({
         data-slot="file-upload-dropzone"
         data-dragging={isDragging || undefined}
         data-disabled={isDisabled || undefined}
-        role="button"
-        aria-disabled={isDisabled || undefined}
-        aria-label={dropzoneAriaLabel}
+        role="button"
+        aria-disabled={isDisabled || undefined}
+        aria-label={dropzoneAriaLabel ?? fileTriggerLabel}
         tabIndex={isDisabled ? -1 : 0}
         className={cn(
           "grid cursor-pointer gap-4 rounded-[var(--radius-2xl)] border border-dashed border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_12%),var(--card))] p-6 text-center shadow-sm ring-1 ring-foreground/5 outline-none transition-[background-color,border-color,box-shadow,transform] hover:-translate-y-px hover:border-primary/35 hover:bg-muted/25 hover:shadow-[0_14px_36px_rgba(15,23,42,0.08)] focus-visible:ring-2 focus-visible:ring-ring data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/6 data-[dragging=true]:shadow-[0_18px_50px_color-mix(in_oklch,var(--primary),transparent_84%)] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-60",
@@ -432,6 +485,7 @@ function FileUpload({
               variant="outline"
               size="sm"
               disabled={isDisabled}
+              aria-label={typeof buttonLabel === "string" ? buttonLabel : fileTriggerLabel}
               onClick={(event) => {
                 stopInteractivePropagation(event)
                 openFileDialog()
@@ -463,13 +517,22 @@ function FileUpload({
 
       {showFileList && files.length > 0 && (
         <div data-slot="file-upload-list" className={cn("grid gap-2", fileListClassName)}>
-          {files.map((file, index) => {
-            const state = { file, index, progress: getProgressForFile(progress, file), remove: () => removeFile(index), removeLabel }
+          {files.map((file, index) => {
+            const state = {
+              file,
+              index,
+              progress: getProgressForFile(progress, file),
+              status: getStatusForFile(status, file),
+              remove: () => removeFile(index),
+              retry: onRetryFile ? () => onRetryFile(file, index) : undefined,
+              removeLabel,
+            }
 
             return (
               <div
                 key={`${file.name}-${file.lastModified}-${index}`}
                 data-slot="file-upload-item"
+                data-status={state.status}
                 className={cn("rounded-[min(var(--radius-xl),18px)] border border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_10%),var(--card))] p-3.5 shadow-sm ring-1 ring-foreground/5", fileItemClassName)}
               >
                 {renderFile?.(state) ?? defaultRenderFile(state)}

package/packages/cli/vendor/src/components/upload/image-upload.tsx

@@ -11,13 +11,33 @@ import {
 import { Button } from "@/components/ui/button"
 import { cn, stopInteractivePropagation } from "@/lib/utils"
 
-export type ImageUploadProps = Omit<FileUploadProps, "accept" | "renderFile"> & {
-  accept?: string
-  preview?: boolean
-  previewClassName?: string
-  imageClassName?: string
-  renderImageFile?: (state: FileUploadRenderFileState & { previewUrl?: string }) => React.ReactNode
-}
+export type ImageUploadProps = Omit<FileUploadProps, "accept" | "renderFile"> & {
+  accept?: string
+  preview?: boolean
+  previewClassName?: string
+  imageClassName?: string
+  minImageWidth?: number
+  minImageHeight?: number
+  aspectRatio?: number
+  aspectRatioTolerance?: number
+  renderImageFile?: (state: FileUploadRenderFileState & { previewUrl?: string }) => React.ReactNode
+}
+
+function readImageMeta(file: File) {
+  return new Promise<{ width: number; height: number }>((resolve, reject) => {
+    const url = URL.createObjectURL(file)
+    const image = new Image()
+    image.onload = () => {
+      resolve({ width: image.width, height: image.height })
+      URL.revokeObjectURL(url)
+    }
+    image.onerror = () => {
+      URL.revokeObjectURL(url)
+      reject(new Error("Image metadata could not be read"))
+    }
+    image.src = url
+  })
+}
 
 function useImagePreviewUrls(files: File[], enabled = true) {
   const [urls, setUrls] = React.useState<Record<string, string>>({})
@@ -104,22 +124,49 @@ function ImageUpload({
   buttonLabel = "Choose image",
   dropzoneLabel = "Drop images here or click to upload",
   preview = true,
-  previewClassName,
-  imageClassName,
-  files = [],
-  renderImageFile,
-  ...props
-}: ImageUploadProps) {
-  const previewUrls = useImagePreviewUrls(files, preview)
-
-  return (
-    <FileUpload
-      accept={accept}
-      buttonLabel={buttonLabel}
-      dropzoneLabel={dropzoneLabel}
-      files={files}
-      renderFile={(state) => {
-        const previewUrl = previewUrls[getFileKey(state.file)]
+  previewClassName,
+  imageClassName,
+  files = [],
+  minImageWidth,
+  minImageHeight,
+  aspectRatio,
+  aspectRatioTolerance = 0.04,
+  renderImageFile,
+  ...props
+}: ImageUploadProps) {
+  const previewUrls = useImagePreviewUrls(files, preview)
+
+  return (
+    <FileUpload
+      accept={accept}
+      buttonLabel={buttonLabel}
+      dropzoneLabel={dropzoneLabel}
+      files={files}
+      validateFile={async (file) => {
+        if (!file.type.startsWith("image/")) return "Only image files are allowed."
+        if (!minImageWidth && !minImageHeight && !aspectRatio) return null
+
+        const { width, height } = await readImageMeta(file)
+
+        if (minImageWidth && width < minImageWidth) {
+          return `Image width must be at least ${minImageWidth}px.`
+        }
+
+        if (minImageHeight && height < minImageHeight) {
+          return `Image height must be at least ${minImageHeight}px.`
+        }
+
+        if (aspectRatio) {
+          const ratio = width / height
+          if (Math.abs(ratio - aspectRatio) > aspectRatioTolerance) {
+            return `Image ratio must be close to ${aspectRatio.toFixed(2)}:1.`
+          }
+        }
+
+        return null
+      }}
+      renderFile={(state) => {
+        const previewUrl = previewUrls[getFileKey(state.file)]
 
         return renderImageFile?.({ ...state, previewUrl }) ??
           defaultRenderImageFile({ ...state, previewUrl, previewClassName, imageClassName })
@@ -129,4 +176,4 @@ function ImageUpload({
   )
 }
 
-export { ImageUpload, useImagePreviewUrls }
+export { ImageUpload, useImagePreviewUrls }

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

@@ -14,6 +14,9 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "overlay", registryName: "dialog", surface: "documented" },
   { slug: "form-field", registryName: "form-field-shell", surface: "documented" },
   { slug: "data-table", registryName: "data-table", surface: "documented" },
+  { slug: "calendar", registryName: "calendar", surface: "documented" },
+  { slug: "date-picker", registryName: "date-picker", surface: "documented" },
+  { slug: "date-range-picker", registryName: "date-range-picker", surface: "documented" },
   { slug: "alert", registryName: "alert", surface: "documented" },
   { slug: "bar-chart", registryName: "charts", surface: "documented" },
   { slug: "sidebar", registryName: "sidebar", surface: "documented" },

package/packages/cli/vendor/src/showcase/component-api-schema.ts

@@ -29,14 +29,16 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
       { name: "variant", type: "'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'warning' | 'link'", defaultValue: "'default'", description: "Controls visual hierarchy and action tone.", example: "variant=\"destructive\"" },
       { name: "size", type: "'xs' | 'sm' | 'default' | 'md' | 'lg' | 'xl' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'", defaultValue: "'default'", description: "Controls height, spacing and icon-only sizing.", example: "size=\"icon-sm\"" },
       { name: "loading", type: "boolean", defaultValue: "false", description: "Shows the spinner, disables interaction and communicates pending state.", example: "loading={isSaving}" },
-      { name: "loadingLabel", type: "string", defaultValue: "'Loading'", description: "Accessible label displayed while the button is loading.", example: "loadingLabel=\"Saving\"" },
-      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables the action and removes it from normal interaction.", example: "disabled={!canSubmit}" },
-      { name: "leftIcon", type: "ReactNode", defaultValue: "-", description: "Icon rendered before the label. Use for primary verbs and scan-friendly actions." },
-      { name: "rightIcon", type: "ReactNode", defaultValue: "-", description: "Icon rendered after the label. Use for forward navigation or external transitions." },
-      { name: "asChild", type: "boolean", defaultValue: "false", description: "Renders the visual button style on a child element for link or router composition.", example: "asChild" },
-      { name: "className", type: "string", defaultValue: "-", description: "Optional class override for spacing or layout composition." },
-      { name: "children", type: "ReactNode", defaultValue: "-", required: true, description: "Button label or icon content. Icon-only buttons must still provide an accessible name." },
-      { name: "aria-label", type: "string", defaultValue: "-", description: "Required for icon-only buttons so the action is announced correctly.", notes: "Use when children are only icons." },
+      { name: "loadingLabel", type: "string", defaultValue: "'Loading'", description: "Accessible label displayed while the button is loading.", example: "loadingLabel=\"Saving\"" },
+      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables the action and removes it from normal interaction.", example: "disabled={!canSubmit}" },
+      { name: "leftIcon", type: "ReactNode", defaultValue: "-", description: "Icon rendered before the label. Use for primary verbs and scan-friendly actions." },
+      { name: "rightIcon", type: "ReactNode", defaultValue: "-", description: "Icon rendered after the label. Use for forward navigation or external transitions." },
+      { name: "iconOnly", type: "boolean", defaultValue: "false", description: "Switches default sizing to the icon button size while keeping Button semantics.", example: "iconOnly aria-label=\"Download\"" },
+      { name: "fullWidth", type: "boolean", defaultValue: "false", description: "Expands the button to fill its parent width.", example: "fullWidth" },
+      { name: "pressed", type: "boolean", defaultValue: "false", description: "Marks toggle-like button state with aria-pressed and selected styling.", example: "pressed={active}" },
+      { name: "className", type: "string", defaultValue: "-", description: "Optional class override for spacing or layout composition." },
+      { name: "children", type: "ReactNode", defaultValue: "-", required: true, description: "Button label or icon content. Icon-only buttons must still provide an accessible name." },
+      { name: "aria-label", type: "string", defaultValue: "-", description: "Required for icon-only buttons so the action is announced correctly.", notes: "Use when children are only icons." },
     ],
     examples: [
       { title: "Primary action", code: "<Button>Save changes</Button>" },
@@ -51,18 +53,24 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
     source: "metadata",
     summary: "Primary typed-value surface. Start with Input and move into presets only when behavior requires it.",
     props: [
-      { name: "value", type: "string | number", defaultValue: "-", description: "Controlled input value.", example: "value={name}" },
-      { name: "defaultValue", type: "string | number", defaultValue: "-", description: "Uncontrolled initial value." },
-      { name: "onChange", type: "ChangeEventHandler<HTMLInputElement>", defaultValue: "-", description: "Native change handler for value updates.", example: "onChange={(event) => setValue(event.target.value)}" },
-      { name: "onValueChange", type: "(value: string) => void", defaultValue: "-", description: "Direct text callback for controlled string flows.", example: "onValueChange={setQuery}" },
-      { name: "type", type: "HTMLInputTypeAttribute", defaultValue: "'text'", description: "Native input type. Prefer presets only when formatting or masking is required." },
-      { name: "placeholder", type: "string", defaultValue: "-", description: "Short hint for empty input state." },
-      { name: "clearable", type: "boolean", defaultValue: "false", description: "Shows the built-in clear action when a value exists.", example: "clearable" },
-      { name: "onClear", type: "() => void", defaultValue: "-", description: "Called after the built-in clear action resets the field." },
-      { name: "trailingAction", type: "ReactNode", defaultValue: "-", description: "Interactive trailing slot for counters, shortcuts, or toggle actions.", example: "trailingAction={<span>12 results</span>}" },
-      { name: "replaceTrailingWhenClear", type: "boolean", defaultValue: "true", description: "Controls whether clear replaces trailing content or sits beside it." },
-      { name: "clearOnEscape", type: "boolean", defaultValue: "false", description: "Clears the value on Escape when clearable mode is active." },
-      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables editing and interaction." },
+      { name: "value", type: "string | number", defaultValue: "-", description: "Controlled input value.", example: "value={name}" },
+      { name: "defaultValue", type: "string | number", defaultValue: "-", description: "Uncontrolled initial value." },
+      { name: "kind", type: "'text' | 'search' | 'password' | 'number' | 'phone' | 'money' | 'quantity' | 'masked' | 'date' | 'date-range'", defaultValue: "'text'", description: "Routes Input into a supported preset without teaching a new public component name first.", example: "kind=\"search\"" },
+      { name: "onChange", type: "ChangeEventHandler<HTMLInputElement>", defaultValue: "-", description: "Native change handler for value updates.", example: "onChange={(event) => setValue(event.target.value)}" },
+      { name: "onValueChange", type: "(value: string) => void", defaultValue: "-", description: "Direct text callback for controlled string flows.", example: "onValueChange={setQuery}" },
+      { name: "type", type: "HTMLInputTypeAttribute", defaultValue: "'text'", description: "Native input type. Prefer presets only when formatting or masking is required." },
+      { name: "placeholder", type: "string", defaultValue: "-", description: "Short hint for empty input state." },
+      { name: "leading", type: "ReactNode", defaultValue: "-", description: "Non-interactive leading slot for icons, prefixes, or labels." },
+      { name: "trailing", type: "ReactNode", defaultValue: "-", description: "Passive trailing slot for units, counts, or status copy." },
+      { name: "clearable", type: "boolean", defaultValue: "false", description: "Shows the built-in clear action when a value exists.", example: "clearable" },
+      { name: "onClear", type: "() => void", defaultValue: "-", description: "Called after the built-in clear action resets the field." },
+      { name: "trailingAction", type: "ReactNode", defaultValue: "-", description: "Interactive trailing slot for counters, shortcuts, or toggle actions.", example: "trailingAction={<span>12 results</span>}" },
+      { name: "replaceTrailingWhenClear", type: "boolean", defaultValue: "true", description: "Controls whether clear replaces trailing content or sits beside it." },
+      { name: "clearOnEscape", type: "boolean", defaultValue: "false", description: "Clears the value on Escape when clearable mode is active." },
+      { name: "helperText", type: "ReactNode", defaultValue: "-", description: "Support copy rendered below the field." },
+      { name: "errorText", type: "ReactNode", defaultValue: "-", description: "Validation copy rendered below the field and connected to danger styling." },
+      { name: "showCharacterCount", type: "boolean", defaultValue: "false", description: "Shows current length and maxLength when available." },
+      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables editing and interaction." },
       { name: "required", type: "boolean", defaultValue: "false", description: "Marks the input as required for native validation." },
       { name: "name", type: "string", defaultValue: "-", description: "Form field name used during submission." },
       { name: "id", type: "string", defaultValue: "-", description: "Connects input to label and help text." },
@@ -75,27 +83,57 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
     ],
     accessibility: ["Always pair form inputs with labels.", "Use aria-describedby for helper/error text.", "Keep disabled and read-only states visually distinct."],
   },
-  select: {
-    slug: "select",
-    source: "metadata",
-    summary: "Primary selection surface. Start with Select and move into members only when async loading, multi-selection, or command-style filtering is required.",
-    props: [
-      { name: "value", type: "string | string[]", defaultValue: "-", description: "Controlled selected value. Multi-select uses an array." },
-      { name: "defaultValue", type: "string | string[]", defaultValue: "-", description: "Uncontrolled initial selected value." },
-      { name: "onValueChange", type: "(value: string | string[]) => void", defaultValue: "-", description: "Called when the selected value changes.", example: "onValueChange={setStatus}" },
-      { name: "options", type: "Array<{ label: string; value: string; disabled?: boolean }>", defaultValue: "[]", required: true, description: "Selectable option list." },
-      { name: "placeholder", type: "string", defaultValue: "-", description: "Text shown when no value is selected." },
-      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables the control and option selection." },
-      { name: "searchable", type: "boolean", defaultValue: "false", description: "Enables local filtering on the main Select surface." },
-      { name: "multiple", type: "boolean", defaultValue: "false", description: "Allows multiple values when the active member supports it." },
-    ],
-    examples: [
-      { title: "Primary select", code: "<Select value={status} onValueChange={setStatus} options={statusOptions} />" },
-      { title: "Searchable primary select", code: "<Select value={owner} onValueChange={setOwner} searchable options={ownerOptions} />" },
-      { title: "Async member direction", code: "// Prefer Select first; use AsyncSelect only when remote loading is required." },
-    ],
-    accessibility: ["Use clear option labels.", "Keep disabled options visible but not selectable.", "Do not replace long forms with hidden select menus."],
-  },
+  select: {
+    slug: "select",
+    source: "metadata",
+    summary: "Primary single-selection surface. Start with Select for finite option sets, then use AsyncSelect with isMulti only when remote loading or multi-value behavior is required.",
+    props: [
+      { name: "value", type: "string | null", defaultValue: "-", description: "Controlled selected value." },
+      { name: "defaultValue", type: "string | null", defaultValue: "-", description: "Uncontrolled initial selected value." },
+      { name: "onValueChange", type: "(value: string | undefined) => void", defaultValue: "-", description: "Called when the selected value changes.", example: "onValueChange={setStatus}" },
+      { name: "options", type: "Array<{ label: string; value: string; disabled?: boolean }>", defaultValue: "[]", required: true, description: "Selectable option list." },
+      { name: "groups", type: "Array<{ label?: ReactNode; options: SelectOption[] }>", defaultValue: "-", description: "Grouped selectable options for longer finite lists." },
+      { name: "placeholder", type: "string", defaultValue: "-", description: "Text shown when no value is selected." },
+      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables the control and option selection." },
+      { name: "searchable", type: "boolean", defaultValue: "false", description: "Enables local filtering on the main Select surface." },
+      { name: "clearable", type: "boolean", defaultValue: "false", description: "Shows a clear action when a value is selected." },
+      { name: "loading", type: "boolean", defaultValue: "false", description: "Disables selection and renders a loading state." },
+      { name: "emptyLabel", type: "ReactNode", defaultValue: "'No options found'", description: "Empty state content for local filtering." },
+      { name: "emptyMessage", type: "ReactNode", defaultValue: "-", description: "Alias for empty state content used by newer docs." },
+      { name: "renderOption", type: "(option, state) => ReactNode", defaultValue: "-", description: "Custom option renderer for richer rows." },
+    ],
+    examples: [
+      { title: "Primary select", code: "<Select value={status} onValueChange={setStatus} options={statusOptions} />" },
+      { title: "Searchable primary select", code: "<Select value={owner} onValueChange={setOwner} searchable options={ownerOptions} />" },
+      { title: "Grouped select", code: "<Select value={region} onValueChange={setRegion} groups={regionGroups} searchable />" },
+      { title: "Async member direction", code: "// Prefer Select first; use AsyncSelect only when remote loading is required." },
+    ],
+    accessibility: ["Use clear option labels.", "Keep disabled options visible but not selectable.", "Do not replace long forms with hidden select menus."],
+  },
+  textarea: {
+    slug: "textarea",
+    source: "metadata",
+    summary: "Multi-line text entry surface with helper, error, read-only, disabled and character-count support.",
+    props: [
+      { name: "value", type: "string", defaultValue: "-", description: "Controlled textarea value." },
+      { name: "defaultValue", type: "string", defaultValue: "-", description: "Uncontrolled initial value." },
+      { name: "onChange", type: "ChangeEventHandler<HTMLTextAreaElement>", defaultValue: "-", description: "Native change handler." },
+      { name: "onValueChange", type: "(value: string) => void", defaultValue: "-", description: "Direct text callback for controlled flows." },
+      { name: "rows", type: "number", defaultValue: "-", description: "Initial visible row count." },
+      { name: "maxLength", type: "number", defaultValue: "-", description: "Native maximum character length." },
+      { name: "helperText", type: "ReactNode", defaultValue: "-", description: "Support copy rendered below the field." },
+      { name: "errorText", type: "ReactNode", defaultValue: "-", description: "Validation copy rendered below the field and danger styling." },
+      { name: "showCharacterCount", type: "boolean", defaultValue: "false", description: "Shows current length and maxLength when available." },
+      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables editing." },
+      { name: "readOnly", type: "boolean", defaultValue: "false", description: "Keeps content copyable while preventing edits." },
+    ],
+    examples: [
+      { title: "Controlled note", code: "<Textarea value={note} onValueChange={setNote} helperText=\"Internal note\" />" },
+      { title: "Limited feedback", code: "<Textarea maxLength={240} showCharacterCount />" },
+      { title: "Error state", code: "<Textarea errorText=\"Please add at least 10 characters.\" />" },
+    ],
+    accessibility: ["Pair textareas with visible labels.", "Use helper and error copy instead of placeholder-only instructions.", "Keep read-only distinct from disabled."],
+  },
   "data-table": {
     slug: "data-table",
     source: "metadata",

package/packages/cli/vendor/src/showcase/create-demo.tsx

@@ -63,16 +63,17 @@ function createCodeSnippet(definition: ShowcaseDemoDefinition) {
 }
 
 const exactCodeSnippets: Record<string, string> = {
-  "search-input": `import { SearchInput } from "tembro"
-
-export function Demo() {
-  return (
-    <SearchInput
-      value="invoice"
-      onValueChange={(value) => console.log(value)}
-      placeholder="Search invoices..."
-      resultCount={12}
-      shortcut="Ctrl K"
+  "search-input": `import { Input } from "tembro"
+
+export function Demo() {
+  return (
+    <Input
+      type="search"
+      value="invoice"
+      onValueChange={(value) => console.log(value)}
+      placeholder="Search invoices..."
+      resultCount={12}
+      shortcut="Ctrl K"
     />
   )
 }`,
@@ -133,12 +134,12 @@ export function Demo() {
     />
   )
 }`,
-  "filter-bar": `import { Button, FilterBar, SearchInput } from "tembro"
-
-export function Demo() {
-  return (
+  "filter-bar": `import { Button, FilterBar, Input } from "tembro"
+
+export function Demo() {
+  return (
     <FilterBar
-      search={<SearchInput value="" placeholder="Search rows..." readOnly />}
+      search={<Input type="search" value="" placeholder="Search rows..." readOnly />}
       chips={[
         { key: "status", label: "Status", value: "Active", tone: "success" },
         { key: "owner", label: "Owner", value: "Azamat" },