tembro 2.0.4 → 2.0.5

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

@@ -1,7 +1,11 @@
 import * as React from "react"
 import { Controller, type Control, type FieldPath, type FieldValues } 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 { Switch } from "@/components/ui/switch"
 import { cn } from "@/lib/utils"
 
@@ -47,33 +51,40 @@ function FormSwitch<
   id,
   onCheckedChange,
   ...props
-}: FormSwitchProps<TFieldValues, TName>) {
-  const switchId = id ?? name
-  const labelContent = label ? (
-    <label
-      htmlFor={switchId}
-      className={cn("text-sm font-medium leading-none", disabled && "opacity-60", labelClassName)}
-    >
-      {label}
-      {required && (requiredIndicator ?? <span className="ml-1 text-destructive">*</span>)}
-    </label>
-  ) : null
-
-  return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field, fieldState }) => {
-        const switchControl = (
-          <Switch
-            id={switchId}
-            ref={field.ref}
-            checked={Boolean(field.value)}
-            disabled={disabled || readOnly}
-            aria-invalid={fieldState.invalid || undefined}
-            className={fieldClassName}
-            onBlur={field.onBlur}
-            onCheckedChange={(checked) => {
+}: FormSwitchProps<TFieldValues, TName>) {
+  const switchId = id ?? name
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => {
+        const error = fieldState.error?.message
+        const resolvedIds = resolveFormFieldIds(switchId, { description, error })
+        const labelContent = label ? (
+          <label
+            id={resolvedIds.labelId}
+            htmlFor={switchId}
+            className={cn("text-sm font-medium leading-none", disabled && "opacity-60", labelClassName)}
+          >
+            {label}
+            {required && (requiredIndicator ?? <span className="ml-1 text-destructive">*</span>)}
+          </label>
+        ) : null
+
+        const switchControl = (
+          <Switch
+            id={switchId}
+            ref={field.ref}
+            checked={Boolean(field.value)}
+            disabled={disabled || readOnly}
+            aria-invalid={fieldState.invalid || undefined}
+            aria-labelledby={label ? resolvedIds.labelId : undefined}
+            aria-describedby={resolvedIds.describedBy}
+            aria-errormessage={error ? resolvedIds.errorId : undefined}
+            className={fieldClassName}
+            onBlur={field.onBlur}
+            onCheckedChange={(checked) => {
               field.onChange(checked)
               onCheckedChange?.(checked)
             }}
@@ -81,19 +92,22 @@ function FormSwitch<
           />
         )
 
-        return labelPlacement === "start" ? (
-          <FormFieldShell
-            label={label}
-            description={description}
-            required={required}
-            error={fieldState.error?.message}
-            htmlFor={switchId}
-            className={className}
-            layout={layout}
-            descriptionPosition={descriptionPosition}
-            labelAction={labelAction}
-            requiredIndicator={requiredIndicator}
-            errorIcon={errorIcon}
+        return labelPlacement === "start" ? (
+          <FormFieldShell
+            label={label}
+            description={description}
+            required={required}
+            error={error}
+            htmlFor={switchId}
+            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}
@@ -106,12 +120,14 @@ function FormSwitch<
             {switchControl}
           </FormFieldShell>
         ) : (
-          <FormFieldShell
-            error={fieldState.error?.message}
-            className={className}
-            errorIcon={errorIcon}
-            showErrorIcon={showErrorIcon}
-            disabled={disabled}
+          <FormFieldShell
+            error={error}
+            className={className}
+            descriptionId={resolvedIds.descriptionId}
+            errorId={resolvedIds.errorId}
+            errorIcon={errorIcon}
+            showErrorIcon={showErrorIcon}
+            disabled={disabled}
             readOnly={readOnly}
             errorClassName={errorClassName}
             contentClassName={contentClassName}
@@ -121,17 +137,20 @@ function FormSwitch<
 
               {(label || description || labelAction) && (
                 <div className="grid min-w-0 gap-1">
-                  {(label || labelAction) && (
-                    <div className={cn("flex items-center justify-between gap-2", labelRowClassName)}>
-                      {labelContent}
-                      {labelAction && <div className="shrink-0 text-sm">{labelAction}</div>}
-                    </div>
-                  )}
-                  {description && (
-                    <p className={cn("text-xs text-muted-foreground", descriptionClassName)}>
-                      {description}
-                    </p>
-                  )}
+                  {(label || labelAction) && (
+                    <div className={cn("flex items-center justify-between gap-2", labelRowClassName)}>
+                      {labelContent}
+                      {labelAction && <div className="shrink-0 text-sm">{labelAction}</div>}
+                    </div>
+                  )}
+                  {description && (
+                    <p
+                      id={resolvedIds.descriptionId}
+                      className={cn("text-xs text-muted-foreground", descriptionClassName)}
+                    >
+                      {description}
+                    </p>
+                  )}
                 </div>
               )}
             </div>

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,15 +90,24 @@ 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
-}
+  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,
@@ -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,10 +139,11 @@ 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
@@ -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>
@@ -773,8 +797,9 @@ function AsyncMultiSelect<
   closeOnSelect = false,
   debounceMs = 250,
   minSearchLength = 0,
-  maxSelected,
-  showSelectAll = false,
+  maxSelected,
+  maxVisibleTags,
+  showSelectAll = false,
   labels,
   renderOption,
   renderValue,
@@ -783,11 +808,12 @@ function AsyncMultiSelect<
   renderEmpty,
   renderError,
   renderMinSearch,
-  renderMaxSelected,
-  onCreateOption,
-  createOptionLabel,
-  showCreateOption,
-  triggerClassName,
+  renderMaxSelected,
+  onCreateOption,
+  createOptionLabel,
+  showCreateOption,
+  showSelectedDescription = true,
+  triggerClassName,
   contentClassName,
   searchClassName,
   optionClassName,
@@ -825,17 +851,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 +1080,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 +1097,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 +1118,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 && (