tembro 2.0.6 → 2.1.1

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

@@ -2,19 +2,109 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export type TextareaProps = React.ComponentProps<"textarea">
-
-function Textarea({ className, ...props }: TextareaProps) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "flex field-sizing-content min-h-28 w-full rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] px-4 py-3.5 text-sm font-medium text-foreground shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none placeholder:text-muted-foreground/78 hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[0_0_0_1px_color-mix(in_oklch,var(--destructive),transparent_32%)] read-only:bg-[color:var(--aui-control-surface-readonly,var(--muted))]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
+export type TextareaProps = React.ComponentProps<"textarea"> & {
+  onValueChange?: (value: string) => void
+  helperText?: React.ReactNode
+  errorText?: React.ReactNode
+  showCharacterCount?: boolean
+  countFormatter?: (currentLength: number, maxLength?: number) => React.ReactNode
+  wrapperClassName?: string
+  textareaClassName?: string
+}
+
+function getTextareaLength(value: TextareaProps["value"] | TextareaProps["defaultValue"]) {
+  if (typeof value === "string") return value.length
+  if (typeof value === "number") return String(value).length
+  if (Array.isArray(value)) return value.join("").length
+  return 0
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      className,
+      value,
+      defaultValue,
+      onChange,
+      onValueChange,
+      helperText,
+      errorText,
+      showCharacterCount = false,
+      countFormatter,
+      wrapperClassName,
+      textareaClassName,
+      maxLength,
+      "aria-invalid": ariaInvalid,
+      ...props
+    },
+    ref
+  ) => {
+    const isControlled = value !== undefined
+    const [uncontrolledLength, setUncontrolledLength] = React.useState(() => getTextareaLength(defaultValue))
+    const currentLength = isControlled ? getTextareaLength(value) : uncontrolledLength
+    const helperMessage = errorText ?? helperText
+    const invalid = Boolean(errorText) || ariaInvalid === true || ariaInvalid === "true"
+
+    const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+      if (!isControlled) {
+        setUncontrolledLength(event.target.value.length)
+      }
+      onChange?.(event)
+      onValueChange?.(event.target.value)
+    }
+
+    const textarea = (
+      <textarea
+        data-slot="textarea"
+        value={value}
+        defaultValue={isControlled ? undefined : defaultValue}
+        maxLength={maxLength}
+        aria-invalid={invalid || undefined}
+        className={cn(
+          "flex field-sizing-content min-h-28 w-full rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] px-4 py-3.5 text-sm font-medium text-foreground shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none placeholder:text-muted-foreground/78 hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[0_0_0_1px_color-mix(in_oklch,var(--destructive),transparent_32%)] read-only:bg-[color:var(--aui-control-surface-readonly,var(--muted))]",
+          textareaClassName,
+          className
+        )}
+        onChange={handleChange}
+        ref={ref}
+        {...props}
+      />
+    )
+
+    if (!helperMessage && !showCharacterCount) {
+      return textarea
+    }
+
+    return (
+      <div data-slot="textarea-field" className={cn("grid gap-1.5", wrapperClassName)}>
+        {textarea}
+        <div data-slot="textarea-meta" className="flex items-start justify-between gap-3 px-1">
+          <div
+            data-slot="textarea-helper"
+            className={cn(
+              "min-w-0 text-xs leading-5",
+              errorText ? "text-destructive" : "text-muted-foreground"
+            )}
+          >
+            {helperMessage}
+          </div>
+          {showCharacterCount ? (
+            <div
+              data-slot="textarea-count"
+              className={cn(
+                "shrink-0 text-[11px] font-medium tabular-nums",
+                errorText ? "text-destructive" : "text-muted-foreground"
+              )}
+            >
+              {countFormatter?.(currentLength, maxLength) ??
+                (typeof maxLength === "number" ? `${currentLength}/${maxLength}` : currentLength)}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
 export { Textarea }

package/packages/cli/vendor/src/components/ui/textarea.tsx

@@ -0,0 +1,2 @@
+export * from "./textarea/index"
+

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

@@ -1,37 +1,82 @@
 import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
 
 import { cn } from "@/lib/utils"
 
-export type TooltipProps = Omit<React.ComponentProps<"span">, "content"> & {
+export type TooltipProps = Omit<TooltipPrimitive.Root.Props, "children"> &
+  Omit<React.ComponentProps<"span">, "content" | "children"> & {
   content: React.ReactNode
-  side?: "top" | "bottom" | "left" | "right"
+  children: React.ReactNode
+  side?: TooltipPrimitive.Positioner.Props["side"]
+  align?: TooltipPrimitive.Positioner.Props["align"]
+  sideOffset?: TooltipPrimitive.Positioner.Props["sideOffset"]
+  alignOffset?: TooltipPrimitive.Positioner.Props["alignOffset"]
+  collisionPadding?: TooltipPrimitive.Positioner.Props["collisionPadding"]
+  delay?: TooltipPrimitive.Trigger.Props["delay"]
+  closeDelay?: TooltipPrimitive.Trigger.Props["closeDelay"]
   disabled?: boolean
 }
 
-const sideClassName = {
-  top: "bottom-full left-1/2 mb-2 -translate-x-1/2",
-  bottom: "left-1/2 top-full mt-2 -translate-x-1/2",
-  left: "right-full top-1/2 mr-2 -translate-y-1/2",
-  right: "left-full top-1/2 ml-2 -translate-y-1/2",
+function getPlainText(node: React.ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") return String(node)
+  if (Array.isArray(node)) return node.map(getPlainText).join("")
+  if (React.isValidElement<{ children?: React.ReactNode }>(node)) return getPlainText(node.props.children)
+  return ""
 }
 
-function Tooltip({ content, side = "top", disabled = false, className, children, ...props }: TooltipProps) {
+function Tooltip({
+  content,
+  side = "top",
+  align = "center",
+  sideOffset = 8,
+  alignOffset = 0,
+  collisionPadding = 8,
+  delay = 500,
+  closeDelay = 0,
+  disabled = false,
+  className,
+  children,
+  ...props
+}: TooltipProps) {
+  const trigger = React.isValidElement(children) ? (
+    children
+  ) : (
+    <span className="inline-flex">{children}</span>
+  )
+  const contentText = getPlainText(content)
+  const shouldRenderFallbackLabel =
+    !disabled && contentText.length > 0 && !getPlainText(children).includes(contentText)
+
   return (
-    <span data-slot="tooltip" className={cn("group/tooltip relative inline-flex", className)} {...props}>
-      {children}
-      {!disabled && (
-        <span
-          data-slot="tooltip-content"
-          role="tooltip"
-          className={cn(
-            "pointer-events-none absolute z-50 hidden max-w-64 whitespace-nowrap rounded-xl border border-border/75 bg-popover/98 px-2.5 py-1.5 text-[11px] font-medium text-popover-foreground shadow-[0_16px_42px_color-mix(in_oklch,var(--foreground),transparent_86%)] backdrop-blur group-hover/tooltip:block group-focus-within/tooltip:block",
-            sideClassName[side]
-          )}
+    <TooltipPrimitive.Root disabled={disabled}>
+      <TooltipPrimitive.Trigger
+        data-slot="tooltip-trigger"
+        delay={delay}
+        closeDelay={closeDelay}
+        disabled={disabled}
+        render={<span data-slot="tooltip" className={cn("inline-flex", className)} {...props} />}
+      >
+        {trigger}
+        {shouldRenderFallbackLabel ? <span className="sr-only">{content}</span> : null}
+      </TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Positioner
+          className="isolate z-50"
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+          alignOffset={alignOffset}
+          collisionPadding={collisionPadding}
         >
-          {content}
-        </span>
-      )}
-    </span>
+          <TooltipPrimitive.Popup
+            data-slot="tooltip-content"
+            className="z-50 max-w-64 origin-(--transform-origin) rounded-[var(--radius-lg)] border border-border/75 bg-popover/98 px-2.5 py-1.5 text-[11px] font-medium leading-4 text-popover-foreground shadow-[0_16px_42px_color-mix(in_oklch,var(--foreground),transparent_86%)] outline-hidden backdrop-blur duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95"
+          >
+            {content}
+          </TooltipPrimitive.Popup>
+        </TooltipPrimitive.Positioner>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
   )
 }
 

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" },