tembro 2.0.4 → 2.0.6

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

@@ -1,7 +1,11 @@
 import * as React from "react"
 import { Controller, type Control, type FieldPath, type FieldValues, type RegisterOptions } from "react-hook-form"
 
-import { FormFieldShell, type FormFieldShellControlProps } from "@/components/form/form-field-shell"
+import {
+  FormFieldShell,
+  type FormFieldShellControlProps,
+  resolveFormFieldIds,
+} from "@/components/form/form-field-shell"
 import { Textarea } from "@/components/ui/textarea"
 
 export type FormTextareaProps<
@@ -48,59 +52,69 @@ function FormTextarea<
   onChange,
   onBlur,
   ...props
-}: FormTextareaProps<TFieldValues, TName>) {
-  const textareaId = id ?? name
-
-  return (
+}: FormTextareaProps<TFieldValues, TName>) {
+  const textareaId = id ?? name
+
+  return (
     <Controller
       control={control}
       name={name}
       rules={rules}
-      render={({ field, fieldState }) => (
-        <FormFieldShell
-          label={label}
-          description={description}
-          required={required}
-          error={fieldState.error?.message}
-          htmlFor={textareaId}
-          className={className}
-          layout={layout}
-          descriptionPosition={descriptionPosition}
-          labelAction={labelAction}
-          requiredIndicator={requiredIndicator}
-          errorIcon={errorIcon}
-          showErrorIcon={showErrorIcon}
-          disabled={disabled}
-          readOnly={readOnly}
-          labelClassName={labelClassName}
-          labelRowClassName={labelRowClassName}
-          descriptionClassName={descriptionClassName}
-          errorClassName={errorClassName}
-          contentClassName={contentClassName}
-        >
-          <Textarea
-            id={textareaId}
-            ref={field.ref}
-            name={field.name}
-            value={transformIn ? transformIn(field.value) : field.value ?? ""}
-            disabled={disabled}
-            readOnly={readOnly}
-            onBlur={(event) => {
-              field.onBlur()
-              onBlur?.(event)
-            }}
-            onChange={(event) => {
-              field.onChange(transformOut ? transformOut(event) : event)
-              onChange?.(event)
-            }}
-            aria-invalid={fieldState.invalid || undefined}
-            className={fieldClassName}
-            {...props}
-          />
-        </FormFieldShell>
-      )}
-    />
-  )
-}
+      render={({ field, fieldState }) => {
+        const error = fieldState.error?.message
+        const resolvedIds = resolveFormFieldIds(textareaId, { description, error })
+
+        return (
+          <FormFieldShell
+            label={label}
+            description={description}
+            required={required}
+            error={error}
+            htmlFor={textareaId}
+            labelId={resolvedIds.labelId}
+            descriptionId={resolvedIds.descriptionId}
+            errorId={resolvedIds.errorId}
+            className={className}
+            layout={layout}
+            descriptionPosition={descriptionPosition}
+            labelAction={labelAction}
+            requiredIndicator={requiredIndicator}
+            errorIcon={errorIcon}
+            showErrorIcon={showErrorIcon}
+            disabled={disabled}
+            readOnly={readOnly}
+            labelClassName={labelClassName}
+            labelRowClassName={labelRowClassName}
+            descriptionClassName={descriptionClassName}
+            errorClassName={errorClassName}
+            contentClassName={contentClassName}
+          >
+            <Textarea
+              id={textareaId}
+              ref={field.ref}
+              name={field.name}
+              value={transformIn ? transformIn(field.value) : field.value ?? ""}
+              disabled={disabled}
+              readOnly={readOnly}
+              onBlur={(event) => {
+                field.onBlur()
+                onBlur?.(event)
+              }}
+              onChange={(event) => {
+                field.onChange(transformOut ? transformOut(event) : event)
+                onChange?.(event)
+              }}
+              aria-invalid={fieldState.invalid || undefined}
+              aria-describedby={resolvedIds.describedBy}
+              aria-errormessage={error ? resolvedIds.errorId : undefined}
+              className={fieldClassName}
+              {...props}
+            />
+          </FormFieldShell>
+        )
+      }}
+    />
+  )
+}
 
 export { FormTextarea }

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

@@ -4,13 +4,4 @@ export * from "./form-input"
 export * from "./form-select"
 export * from "./form-switch"
 export * from "./form-textarea"
-export * from "./form-date-picker"
-export * from "./form-date-range-picker"
-// Compatibility aliases
 export * from "./form-async-select"
-export * from "./form-date-input"
-export * from "./form-date-range-input"
-export * from "./form-number-input"
-export * from "./form-password-input"
-export * from "./form-phone-input"
-export * from "./form-search-input"

package/packages/cli/vendor/src/components/inputs/async-select.tsx

@@ -48,9 +48,10 @@ export type AsyncSelectStateRenderer<
   TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
 > = (state: AsyncSelectRenderState<TValue, TData, TOption>) => React.ReactNode
 
-export type AsyncSelectLabels = {
-  placeholder?: string
-  searchPlaceholder?: string
+export type AsyncSelectLabels = {
+  placeholder?: string
+  multiPlaceholder?: string
+  searchPlaceholder?: string
   loading?: string
   creating?: string
   empty?: string
@@ -59,18 +60,20 @@ export type AsyncSelectLabels = {
   clearAll?: string
   selectAll?: string
   minSearchLength?: (minSearchLength: number) => string
-  maxSelected?: (maxSelected: number) => string
-  selectedCount?: (count: number) => string
-}
-
-export type AsyncSelectProps<
-  TValue extends string = string,
-  TData = unknown,
-  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
-> = Omit<React.ComponentProps<"div">, "onChange"> & {
-  value?: TValue
-  selectedOption?: TOption | null
-  onValueChange?: (value: TValue | undefined, option?: TOption) => void
+  maxSelected?: (maxSelected: number) => string
+  selectedCount?: (count: number) => string
+  hiddenSelected?: (count: number) => string
+}
+
+export type AsyncSelectProps<
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+> = Omit<React.ComponentProps<"div">, "onChange"> & {
+  isMulti?: false
+  value?: TValue
+  selectedOption?: TOption | null
+  onValueChange?: (value: TValue | undefined, option?: TOption) => void
   loadOptions: (search: string, signal?: AbortSignal) => Promise<AsyncSelectOptionsResult<TValue, TData, TOption>>
   loadSelectedOption?: (value: TValue, signal?: AbortSignal) => Promise<TOption | null | undefined>
   defaultOptions?: AsyncSelectOptionsResult<TValue, TData, TOption>
@@ -87,21 +90,30 @@ export type AsyncSelectProps<
   renderEmpty?: AsyncSelectStateRenderer<TValue, TData, TOption>
   renderError?: AsyncSelectStateRenderer<TValue, TData, TOption>
   renderMinSearch?: AsyncSelectStateRenderer<TValue, TData, TOption>
-  onCreateOption?: (search: string) => Promise<TOption> | TOption
-  createOptionLabel?: (search: string) => React.ReactNode
-  showCreateOption?: (search: string, options: TOption[]) => boolean
-  triggerClassName?: string
+  onCreateOption?: (search: string) => Promise<TOption> | TOption
+  createOptionLabel?: (search: string) => React.ReactNode
+  showCreateOption?: (search: string, options: TOption[]) => boolean
+  showSelectedDescription?: boolean
+  triggerClassName?: string
   contentClassName?: string
   searchClassName?: string
   optionClassName?: string
-  invalid?: boolean
-}
-
-export type AsyncMultiSelectProps<
-  TValue extends string = string,
-  TData = unknown,
-  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
-> = Omit<React.ComponentProps<"div">, "onChange"> & {
+  invalid?: boolean
+}
+
+export type AsyncSelectMultiModeProps<
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+> = AsyncMultiSelectProps<TValue, TData, TOption> & {
+  isMulti: true
+}
+
+export type AsyncMultiSelectProps<
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+> = Omit<React.ComponentProps<"div">, "onChange"> & {
   value?: TValue[]
   selectedOptions?: TOption[]
   onValueChange?: (value: TValue[], options: TOption[]) => void
@@ -115,8 +127,9 @@ export type AsyncMultiSelectProps<
   closeOnSelect?: boolean
   debounceMs?: number
   minSearchLength?: number
-  maxSelected?: number
-  showSelectAll?: boolean
+  maxSelected?: number
+  maxVisibleTags?: number
+  showSelectAll?: boolean
   labels?: AsyncSelectLabels
   renderOption?: (option: TOption, state: { selected: boolean }) => React.ReactNode
   renderValue?: (option: TOption) => React.ReactNode
@@ -126,16 +139,17 @@ export type AsyncMultiSelectProps<
   renderError?: AsyncSelectStateRenderer<TValue, TData, TOption>
   renderMinSearch?: AsyncSelectStateRenderer<TValue, TData, TOption>
   renderMaxSelected?: AsyncSelectStateRenderer<TValue, TData, TOption>
-  onCreateOption?: (search: string) => Promise<TOption> | TOption
-  createOptionLabel?: (search: string) => React.ReactNode
-  showCreateOption?: (search: string, options: TOption[]) => boolean
-  triggerClassName?: string
+  onCreateOption?: (search: string) => Promise<TOption> | TOption
+  createOptionLabel?: (search: string) => React.ReactNode
+  showCreateOption?: (search: string, options: TOption[]) => boolean
+  showSelectedDescription?: boolean
+  triggerClassName?: string
   contentClassName?: string
   searchClassName?: string
   optionClassName?: string
   tagClassName?: string
-  invalid?: boolean
-}
+  invalid?: boolean
+}
 
 type AsyncSelectCacheEntry<
   TValue extends string,
@@ -410,14 +424,21 @@ function AsyncCreateButton({
   )
 }
 
-function AsyncSelect<
-  TValue extends string = string,
-  TData = unknown,
-  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
->({
-  className,
-  value,
-  selectedOption,
+function AsyncSelect<
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+>(props: AsyncSelectProps<TValue, TData, TOption> | AsyncSelectMultiModeProps<TValue, TData, TOption>) {
+  if ("isMulti" in props && props.isMulti) {
+    const multiProps = { ...props }
+    delete (multiProps as { isMulti?: true }).isMulti
+    return <AsyncMultiSelect {...multiProps} />
+  }
+
+  const {
+  className,
+  value,
+  selectedOption,
   onValueChange,
   loadOptions,
   loadSelectedOption,
@@ -434,17 +455,18 @@ function AsyncSelect<
   renderLoading,
   renderEmpty,
   renderError,
-  renderMinSearch,
-  onCreateOption,
-  createOptionLabel,
-  showCreateOption,
-  triggerClassName,
+  renderMinSearch,
+  onCreateOption,
+  createOptionLabel,
+  showCreateOption,
+  showSelectedDescription = true,
+  triggerClassName,
   contentClassName,
-  searchClassName,
-  optionClassName,
-  invalid,
-  ...props
-}: AsyncSelectProps<TValue, TData, TOption>) {
+  searchClassName,
+  optionClassName,
+  invalid,
+  ...rootProps
+  } = props as AsyncSelectProps<TValue, TData, TOption>
   const resolvedDefaultGroups = React.useMemo(() => normalizeOptionGroups(defaultOptions), [defaultOptions])
   const defaultFlatOptions = React.useMemo(() => flattenOptionGroups(resolvedDefaultGroups), [resolvedDefaultGroups])
   const [open, setOpen] = React.useState(false)
@@ -613,7 +635,7 @@ function AsyncSelect<
   }
 
   return (
-    <div data-slot="async-select" className={cn("w-full", className)} {...props}>
+    <div data-slot="async-select" className={cn("w-full", className)} {...rootProps}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger
           render={
@@ -633,16 +655,18 @@ function AsyncSelect<
           }
         >
           <span className="min-w-0 flex-1 text-left">
-            {currentOption ? (
+            {currentOption ? (
               <span className="flex min-w-0 flex-col gap-0.5">
                 <span className="truncate font-semibold">
-                  {renderValue?.(currentOption) ?? currentOption.label}
-                </span>
-                {currentOption.disabled && currentOption.disabledReason && (
-                  <span className="truncate text-xs text-muted-foreground">{currentOption.disabledReason}</span>
-                )}
-              </span>
-            ) : (
+                  {renderValue?.(currentOption) ?? currentOption.label}
+                </span>
+                {showSelectedDescription && (currentOption.description || (currentOption.disabled && currentOption.disabledReason)) ? (
+                  <span className="truncate text-xs text-muted-foreground">
+                    {currentOption.description ?? currentOption.disabledReason}
+                  </span>
+                ) : null}
+              </span>
+            ) : (
               <span className="truncate text-muted-foreground">{labels?.placeholder ?? "Select"}</span>
             )}
           </span>
@@ -754,7 +778,10 @@ function AsyncSelect<
   )
 }
 
-function AsyncMultiSelect<
+/**
+ * @deprecated Prefer `AsyncSelect` with `isMulti` for new usage.
+ */
+function AsyncMultiSelect<
   TValue extends string = string,
   TData = unknown,
   TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
@@ -773,8 +800,9 @@ function AsyncMultiSelect<
   closeOnSelect = false,
   debounceMs = 250,
   minSearchLength = 0,
-  maxSelected,
-  showSelectAll = false,
+  maxSelected,
+  maxVisibleTags,
+  showSelectAll = false,
   labels,
   renderOption,
   renderValue,
@@ -783,11 +811,12 @@ function AsyncMultiSelect<
   renderEmpty,
   renderError,
   renderMinSearch,
-  renderMaxSelected,
-  onCreateOption,
-  createOptionLabel,
-  showCreateOption,
-  triggerClassName,
+  renderMaxSelected,
+  onCreateOption,
+  createOptionLabel,
+  showCreateOption,
+  showSelectedDescription = true,
+  triggerClassName,
   contentClassName,
   searchClassName,
   optionClassName,
@@ -825,17 +854,20 @@ function AsyncMultiSelect<
     () => ({ search, minSearchLength, options: flatOptions, selectedCount: values.length, maxSelected }),
     [flatOptions, maxSelected, minSearchLength, search, values.length]
   )
-  const hasValue = values.length > 0
-  const canClear = clearable && hasValue && !disabled
-  const isMaxReached = typeof maxSelected === "number" && values.length >= maxSelected
-  const searchTooShort = searchKey.length < minSearchLength
+  const hasValue = values.length > 0
+  const canClear = clearable && hasValue && !disabled
+  const isMaxReached = typeof maxSelected === "number" && values.length >= maxSelected
+  const resolvedMaxVisibleTags = Math.max(maxVisibleTags ?? values.length, 1)
+  const searchTooShort = searchKey.length < minSearchLength
   const canCreate =
     !searchTooShort &&
     Boolean(onCreateOption) &&
     (showCreateOption ?? defaultShowCreateOption)(search, flatOptions)
   const visibleSelectableOptions = flatOptions.filter((option) => !option.disabled)
   const unselectedVisibleOptions = visibleSelectableOptions.filter((option) => !selectedSet.has(option.value))
-  const canSelectAll = showSelectAll && unselectedVisibleOptions.length > 0 && !isMaxReached
+  const canSelectAll = showSelectAll && unselectedVisibleOptions.length > 0 && !isMaxReached
+  const visibleTagOptions = currentOptions.slice(0, resolvedMaxVisibleTags)
+  const hiddenTagCount = Math.max(currentOptions.length - visibleTagOptions.length, 0)
 
   React.useEffect(() => {
     cacheRef.current.clear()
@@ -1051,11 +1083,12 @@ function AsyncMultiSelect<
           }
         >
           <span className="flex min-w-0 flex-1 flex-wrap gap-1 text-left">
-            {currentOptions.length > 0 ? (
-              currentOptions.map((option) => (
-                <span
-                  key={option.value}
-                  data-slot="async-select-tag"
+            {currentOptions.length > 0 ? (
+              <>
+              {visibleTagOptions.map((option) => (
+                <span
+                  key={option.value}
+                  data-slot="async-select-tag"
                   className={cn(
                     "inline-flex max-w-full items-center gap-1.5 rounded-[var(--radius-sm)] border border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] px-2 py-1 text-xs font-medium text-foreground",
                     tagClassName
@@ -1067,9 +1100,11 @@ function AsyncMultiSelect<
                         renderValue?.(option) ??
                         option.label}
                     </span>
-                    {option.disabled && option.disabledReason && (
-                      <span className="truncate text-[11px] text-muted-foreground">{option.disabledReason}</span>
-                    )}
+                    {showSelectedDescription && (option.description || (option.disabled && option.disabledReason)) ? (
+                      <span className="truncate text-[11px] text-muted-foreground">
+                        {option.description ?? option.disabledReason}
+                      </span>
+                    ) : null}
                   </span>
                   {!disabled && (
                     <span
@@ -1086,14 +1121,26 @@ function AsyncMultiSelect<
                     >
                       <XIcon className="size-3" />
                     </span>
-                  )}
-                </span>
-              ))
-            ) : (
-              <span className="truncate text-muted-foreground">
-                {labels?.placeholder ?? "Select"}
-              </span>
-            )}
+                  )}
+                </span>
+              ))}
+              {hiddenTagCount > 0 ? (
+                <span
+                  data-slot="async-select-tag-overflow"
+                  className={cn(
+                    "inline-flex max-w-full items-center rounded-[var(--radius-sm)] border border-dashed border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_58%)] px-2 py-1 text-xs font-medium text-muted-foreground",
+                    tagClassName
+                  )}
+                >
+                  {labels?.hiddenSelected?.(hiddenTagCount) ?? `+${hiddenTagCount} more`}
+                </span>
+              ) : null}
+              </>
+            ) : (
+              <span className="truncate text-muted-foreground">
+                {labels?.multiPlaceholder ?? labels?.placeholder ?? "Select"}
+              </span>
+            )}
           </span>
           <span className="ml-2 flex shrink-0 items-center gap-1">
             {canClear && (

package/packages/cli/vendor/src/components/inputs/combobox.tsx

@@ -15,15 +15,19 @@ export type ComboboxOption<TValue extends string = string> = {
   hidden?: boolean
 }
 
-export type ComboboxProps<TValue extends string = string> = React.ComponentProps<"div"> & {
+export type ComboboxProps<TValue extends string = string> = React.ComponentProps<"div"> & {
   value?: TValue
   options: ComboboxOption<TValue>[]
   onValueChange?: (value: TValue | undefined, option?: ComboboxOption<TValue>) => void
   placeholder?: React.ReactNode
   searchPlaceholder?: string
-  emptyLabel?: React.ReactNode
-  disabled?: boolean
+  emptyLabel?: React.ReactNode
+  disabled?: boolean
   invalid?: boolean
+  clearable?: boolean
+  allowDeselect?: boolean
+  showSelectedDescription?: boolean
+  onSearchChange?: (value: string) => void
   triggerClassName?: string
   contentClassName?: string
   optionClassName?: string
@@ -36,9 +40,13 @@ function Combobox<TValue extends string = string>({
   onValueChange,
   placeholder = "Select option",
   searchPlaceholder = "Search...",
-  emptyLabel = "No option found",
+  emptyLabel = "No option found",
   disabled = false,
   invalid,
+  clearable = false,
+  allowDeselect = false,
+  showSelectedDescription = true,
+  onSearchChange,
   triggerClassName,
   contentClassName,
   optionClassName,
@@ -58,7 +66,16 @@ function Combobox<TValue extends string = string>({
 
   return (
     <div data-slot="combobox" className={cn("grid w-full gap-2", className)} {...props}>
-      <Popover open={open} onOpenChange={setOpen}>
+      <Popover
+        open={open}
+        onOpenChange={(nextOpen) => {
+          setOpen(nextOpen)
+          if (!nextOpen) {
+            setSearch("")
+            onSearchChange?.("")
+          }
+        }}
+      >
         <PopoverTrigger
           render={
             <Button
@@ -71,9 +88,40 @@ function Combobox<TValue extends string = string>({
             />
           }
         >
-          <span className={cn("min-w-0 flex-1 truncate font-medium", !selectedOption && "font-normal text-muted-foreground")}>
-            {selectedOption?.label ?? placeholder}
+          <span className={cn("min-w-0 flex-1", !selectedOption && "text-muted-foreground")}>
+            {selectedOption ? (
+              <span className="flex min-w-0 flex-col items-start">
+                <span className="truncate font-medium">{selectedOption.label}</span>
+                {showSelectedDescription && selectedOption.description ? (
+                  <span className="truncate text-[11px] text-muted-foreground">{selectedOption.description}</span>
+                ) : null}
+              </span>
+            ) : (
+              <span className="truncate font-normal">{placeholder}</span>
+            )}
           </span>
+          {clearable && selectedOption && !disabled ? (
+            <span
+              role="button"
+              tabIndex={0}
+              aria-label="Clear value"
+              className="inline-flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted/55 hover:text-foreground"
+              onClick={(event) => {
+                event.preventDefault()
+                event.stopPropagation()
+                onValueChange?.(undefined, undefined)
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  onValueChange?.(undefined, undefined)
+                }
+              }}
+            >
+              ×
+            </span>
+          ) : null}
           <ChevronDownIcon className="size-4 opacity-60" />
         </PopoverTrigger>
         <PopoverContent
@@ -83,7 +131,15 @@ function Combobox<TValue extends string = string>({
         >
           <div className="relative mb-2">
             <SearchIcon className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-            <Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder={searchPlaceholder} className={cn("h-9 pl-8", searchClassName)} />
+            <Input
+              value={search}
+              onChange={(event) => {
+                setSearch(event.target.value)
+                onSearchChange?.(event.target.value)
+              }}
+              placeholder={searchPlaceholder}
+              className={cn("h-9 pl-8", searchClassName)}
+            />
           </div>
           <div className="max-h-64 overflow-y-auto">
             {filteredOptions.length ? filteredOptions.map((option) => {
@@ -99,7 +155,8 @@ function Combobox<TValue extends string = string>({
                     optionClassName
                   )}
                   onClick={() => {
-                    onValueChange?.(option.value, option)
+                    const nextValue = allowDeselect && active ? undefined : option.value
+                    onValueChange?.(nextValue, nextValue ? option : undefined)
                     setOpen(false)
                   }}
                 >

package/packages/cli/vendor/src/components/inputs/search-input.tsx

@@ -14,8 +14,11 @@ export type SearchInputProps = Omit<ClearableInputProps, "leadingIcon" | "type"
   onValueChange?: (value: string) => void
   onDebouncedValueChange?: (value: string) => void
 }
-
-const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+
+/**
+ * @deprecated Prefer `Input` with `type="search"` and search-related props for new usage.
+ */
+const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
   (
     {
       searchIcon,