tembro 2.0.4 → 2.0.6

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

@@ -8,7 +8,7 @@ import {
   type DateRangeValue,
 } from "@/components/inputs/date-range-input"
 import { DateInput, type DateInputProps } from "@/components/inputs/date-input"
-import { Input, type InputTextProps } from "@/components/ui/input"
+import { Input, type InputClearableProps, type InputSearchProps, type InputTextProps } from "@/components/ui/input"
 import { MaskedInput, type MaskedInputProps } from "@/components/inputs/masked-input"
 import { MoneyInput, type MoneyInputProps } from "@/components/inputs/money-input"
 import { NumberInput, type NumberInputProps } from "@/components/inputs/number-input"
@@ -18,14 +18,10 @@ import {
   type PhoneInputProps,
 } from "@/components/inputs/phone-input"
 import { QuantityInput, type QuantityInputProps } from "@/components/inputs/quantity-input"
-import { SearchInput, type SearchInputProps } from "@/components/inputs/search-input"
-import {
-  ClearableInput,
-  type ClearableInputProps,
-} from "@/components/inputs/clearable-input"
 import {
   FormFieldShell,
   type FormFieldShellControlProps,
+  resolveFormFieldIds,
 } from "@/components/form/form-field-shell"
 
 export type FormInputKind =
@@ -75,7 +71,7 @@ export type FormTextInputProps<
 export type FormInputSearchVariantProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = Omit<SearchInputProps, "name" | "value" | "defaultValue" | "onValueChange"> &
+> = Omit<InputSearchProps, "name" | "value" | "defaultValue" | "onValueChange" | "kind"> &
   FormControlledFieldProps<TFieldValues, TName> & {
     kind: "search"
     onValueChange?: (value: string) => void
@@ -133,7 +129,7 @@ export type FormInputDateRangeVariantProps<
 export type FormInputClearableVariantProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = Omit<ClearableInputProps, "name" | "value" | "defaultValue" | "onValueChange"> &
+> = Omit<InputClearableProps, "name" | "value" | "defaultValue" | "onValueChange" | "kind"> &
   FormControlledFieldProps<TFieldValues, TName> & {
     kind: "clearable"
     emptyValue?: unknown
@@ -198,6 +194,7 @@ function buildShellProps<
     description: props.description,
     required: props.required,
     className: props.className,
+    htmlFor: props.id ?? props.name,
     layout: props.layout,
     descriptionPosition: props.descriptionPosition,
     labelAction: props.labelAction,
@@ -230,6 +227,10 @@ function FormInput<
       rules={props.rules}
       render={({ field, fieldState }) => {
         const error = fieldState.error?.message
+        const resolvedIds = resolveFormFieldIds(inputId, {
+          description: props.description,
+          error,
+        })
 
         if (kind === "search") {
           const {
@@ -261,9 +262,17 @@ function FormInput<
           } = props as FormInputSearchVariantProps<TFieldValues, TName>
 
           return (
-            <FormFieldShell {...shellProps} error={error} htmlFor={id ?? inputId}>
-              <SearchInput
-                {...searchProps}
+            <FormFieldShell
+              {...shellProps}
+              labelId={resolvedIds.labelId}
+              descriptionId={resolvedIds.descriptionId}
+              errorId={resolvedIds.errorId}
+              error={error}
+              htmlFor={id ?? inputId}
+            >
+              <Input
+                {...(searchProps as Omit<InputSearchProps, "kind">)}
+                type="search"
                 id={id ?? inputId}
                 name={field.name}
                 ref={field.ref}
@@ -272,6 +281,8 @@ function FormInput<
                 readOnly={props.readOnly}
                 inputClassName={fieldClassName ?? resolvedFieldClassName}
                 aria-invalid={fieldState.invalid || undefined}
+                aria-describedby={resolvedIds.describedBy}
+                aria-errormessage={error ? resolvedIds.errorId : undefined}
                 onBlur={(event: React.FocusEvent<HTMLInputElement>) => {
                   field.onBlur()
                   onBlur?.(event)
@@ -315,7 +326,14 @@ function FormInput<
               } = props as FormInputPasswordVariantProps<TFieldValues, TName>
 
           return (
-            <FormFieldShell {...shellProps} error={error} htmlFor={id ?? inputId}>
+            <FormFieldShell
+              {...shellProps}
+              labelId={resolvedIds.labelId}
+              descriptionId={resolvedIds.descriptionId}
+              errorId={resolvedIds.errorId}
+              error={error}
+              htmlFor={id ?? inputId}
+            >
               <Input
                 {...(passwordProps as Omit<InputTextInputProps, "kind">)}
                 type="password"
@@ -326,6 +344,8 @@ function FormInput<
                 disabled={disabled}
                 readOnly={props.readOnly}
                 inputClassName={fieldClassName ?? resolvedFieldClassName}
+                aria-describedby={resolvedIds.describedBy}
+                aria-errormessage={error ? resolvedIds.errorId : undefined}
                 onBlur={(event: React.FocusEvent<HTMLInputElement>) => {
                   field.onBlur()
                   onBlur?.(event)
@@ -372,7 +392,14 @@ function FormInput<
           } = props as FormInputNumberVariantProps<TFieldValues, TName>
 
           return (
-            <FormFieldShell {...shellProps} error={error} htmlFor={id ?? inputId}>
+            <FormFieldShell
+              {...shellProps}
+              labelId={resolvedIds.labelId}
+              descriptionId={resolvedIds.descriptionId}
+              errorId={resolvedIds.errorId}
+              error={error}
+              htmlFor={id ?? inputId}
+            >
               <NumberInput
                 {...numberProps}
                 id={id ?? inputId}
@@ -383,6 +410,8 @@ function FormInput<
                 readOnly={props.readOnly}
                 className={fieldClassName ?? resolvedFieldClassName}
                 aria-invalid={fieldState.invalid || undefined}
+                aria-describedby={resolvedIds.describedBy}
+                aria-errormessage={error ? resolvedIds.errorId : undefined}
                 onBlur={(event: React.FocusEvent<HTMLInputElement>) => {
                   field.onBlur()
                   onBlur?.(event)
@@ -433,7 +462,14 @@ function FormInput<
             valueMode === "raw" ? formatPhoneDigits(fieldValue, countryCode, maxDigits) : fieldValue
 
           return (
-            <FormFieldShell {...shellProps} error={error} htmlFor={id ?? inputId}>
+            <FormFieldShell
+              {...shellProps}
+              labelId={resolvedIds.labelId}
+              descriptionId={resolvedIds.descriptionId}
+              errorId={resolvedIds.errorId}
+              error={error}
+              htmlFor={id ?? inputId}
+            >
               <PhoneInput
                 {...phoneProps}
                 id={id ?? inputId}
@@ -446,6 +482,8 @@ function FormInput<
                 maxDigits={maxDigits}
                 className={fieldClassName ?? resolvedFieldClassName}
                 aria-invalid={fieldState.invalid || undefined}
+                aria-describedby={resolvedIds.describedBy}
+                aria-errormessage={error ? resolvedIds.errorId : undefined}
                 onBlur={(event: React.FocusEvent<HTMLInputElement>) => {
                   field.onBlur()
                   onBlur?.(event)
@@ -491,7 +529,14 @@ function FormInput<
           } = props as FormInputDateVariantProps<TFieldValues, TName>
 
           return (
-            <FormFieldShell {...shellProps} error={error} htmlFor={id ?? inputId}>
+            <FormFieldShell
+              {...shellProps}
+              labelId={resolvedIds.labelId}
+              descriptionId={resolvedIds.descriptionId}
+              errorId={resolvedIds.errorId}
+              error={error}
+              htmlFor={id ?? inputId}
+            >
               <DateInput
                 {...dateProps}
                 id={id ?? inputId}
@@ -502,6 +547,8 @@ function FormInput<
                 readOnly={props.readOnly}
                 className={fieldClassName ?? resolvedFieldClassName}
                 aria-invalid={fieldState.invalid || undefined}
+                aria-describedby={resolvedIds.describedBy}
+                aria-errormessage={error ? resolvedIds.errorId : undefined}
                 onBlur={(event: React.FocusEvent<HTMLInputElement>) => {
                   field.onBlur()
                   onBlur?.(event)
@@ -546,9 +593,17 @@ function FormInput<
           } = props as FormInputClearableVariantProps<TFieldValues, TName>
 
           return (
-            <FormFieldShell {...shellProps} error={error} htmlFor={id ?? inputId}>
-              <ClearableInput
-                {...clearableProps}
+            <FormFieldShell
+              {...shellProps}
+              labelId={resolvedIds.labelId}
+              descriptionId={resolvedIds.descriptionId}
+              errorId={resolvedIds.errorId}
+              error={error}
+              htmlFor={id ?? inputId}
+            >
+              <Input
+                {...(clearableProps as Omit<InputClearableProps, "kind">)}
+                clearable
                 id={id ?? inputId}
                 name={field.name}
                 ref={field.ref}
@@ -557,6 +612,8 @@ function FormInput<
                 readOnly={props.readOnly}
                 className={fieldClassName ?? resolvedFieldClassName}
                 aria-invalid={fieldState.invalid || undefined}
+                aria-describedby={resolvedIds.describedBy}
+                aria-errormessage={error ? resolvedIds.errorId : undefined}
                 onBlur={(event: React.FocusEvent<HTMLInputElement>) => {
                   field.onBlur()
                   onBlur?.(event)
@@ -601,7 +658,14 @@ function FormInput<
           } = props as FormInputMaskedVariantProps<TFieldValues, TName>
 
           return (
-            <FormFieldShell {...shellProps} error={error} htmlFor={id ?? inputId}>
+            <FormFieldShell
+              {...shellProps}
+              labelId={resolvedIds.labelId}
+              descriptionId={resolvedIds.descriptionId}
+              errorId={resolvedIds.errorId}
+              error={error}
+              htmlFor={id ?? inputId}
+            >
               <MaskedInput
                 {...maskedProps}
                 id={id ?? inputId}
@@ -612,6 +676,8 @@ function FormInput<
                 readOnly={props.readOnly}
                 className={fieldClassName ?? resolvedFieldClassName}
                 aria-invalid={fieldState.invalid || undefined}
+                aria-describedby={resolvedIds.describedBy}
+                aria-errormessage={error ? resolvedIds.errorId : undefined}
                 onBlur={(event: React.FocusEvent<HTMLInputElement>) => {
                   field.onBlur()
                   onBlur?.(event)
@@ -657,7 +723,14 @@ function FormInput<
           } = props as FormInputMoneyVariantProps<TFieldValues, TName>
 
           return (
-            <FormFieldShell {...shellProps} error={error} htmlFor={id ?? inputId}>
+            <FormFieldShell
+              {...shellProps}
+              labelId={resolvedIds.labelId}
+              descriptionId={resolvedIds.descriptionId}
+              errorId={resolvedIds.errorId}
+              error={error}
+              htmlFor={id ?? inputId}
+            >
               <MoneyInput
                 {...moneyProps}
                 id={id ?? inputId}
@@ -668,6 +741,8 @@ function FormInput<
                 readOnly={props.readOnly}
                 className={fieldClassName ?? resolvedFieldClassName}
                 aria-invalid={fieldState.invalid || undefined}
+                aria-describedby={resolvedIds.describedBy}
+                aria-errormessage={error ? resolvedIds.errorId : undefined}
                 onBlur={(event: React.FocusEvent<HTMLInputElement>) => {
                   field.onBlur()
                   onBlur?.(event)
@@ -712,7 +787,14 @@ function FormInput<
           } = props as FormInputQuantityVariantProps<TFieldValues, TName>
 
           return (
-            <FormFieldShell {...shellProps} error={error} htmlFor={id ?? inputId}>
+            <FormFieldShell
+              {...shellProps}
+              labelId={resolvedIds.labelId}
+              descriptionId={resolvedIds.descriptionId}
+              errorId={resolvedIds.errorId}
+              error={error}
+              htmlFor={id ?? inputId}
+            >
               <QuantityInput
                 {...quantityProps}
                 id={id ?? inputId}
@@ -723,6 +805,8 @@ function FormInput<
                 readOnly={props.readOnly}
                 className={fieldClassName ?? resolvedFieldClassName}
                 aria-invalid={fieldState.invalid || undefined}
+                aria-describedby={resolvedIds.describedBy}
+                aria-errormessage={error ? resolvedIds.errorId : undefined}
                 onBlur={(event: React.FocusEvent<HTMLInputElement>) => {
                   field.onBlur()
                   onBlur?.(event)
@@ -767,7 +851,14 @@ function FormInput<
           const currentValue = field.value as DateRangeValue | undefined
 
           return (
-            <FormFieldShell {...shellProps} error={error} htmlFor={id ?? inputId}>
+            <FormFieldShell
+              {...shellProps}
+              labelId={resolvedIds.labelId}
+              descriptionId={resolvedIds.descriptionId}
+              errorId={resolvedIds.errorId}
+              error={error}
+              htmlFor={id ?? inputId}
+            >
               <DateRangeInput
                 {...rangeProps}
                 id={id ?? inputId}
@@ -780,11 +871,15 @@ function FormInput<
                   ...(rangeProps.fromInputProps ?? {}),
                   disabled,
                   readOnly: props.readOnly,
+                  "aria-describedby": resolvedIds.describedBy,
+                  "aria-errormessage": error ? resolvedIds.errorId : undefined,
                 }}
                 toInputProps={{
                   ...(rangeProps.toInputProps ?? {}),
                   disabled,
                   readOnly: props.readOnly,
+                  "aria-describedby": resolvedIds.describedBy,
+                  "aria-errormessage": error ? resolvedIds.errorId : undefined,
                 }}
                 onValueChange={(value) => {
                   field.onChange(value)
@@ -831,7 +926,14 @@ function FormInput<
         } = props as FormTextInputProps<TFieldValues, TName>
 
         return (
-          <FormFieldShell {...shellProps} error={error} htmlFor={id ?? inputId}>
+          <FormFieldShell
+            {...shellProps}
+            labelId={resolvedIds.labelId}
+            descriptionId={resolvedIds.descriptionId}
+            errorId={resolvedIds.errorId}
+            error={error}
+            htmlFor={id ?? inputId}
+          >
             <Input
               {...(inputProps as Omit<InputTextInputProps, "kind">)}
               id={id ?? inputId}
@@ -852,6 +954,8 @@ function FormInput<
                 onChange?.(event)
               }}
               aria-invalid={fieldState.invalid || undefined}
+              aria-describedby={resolvedIds.describedBy}
+              aria-errormessage={error ? resolvedIds.errorId : undefined}
               className={fieldClassName ?? resolvedFieldClassName}
             />
           </FormFieldShell>

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

@@ -6,10 +6,11 @@ import {
   type AsyncSelectOption,
   type AsyncSelectProps,
 } from "@/components/inputs/async-select"
-import { SimpleSelect, type SimpleSelectProps } from "@/components/inputs/simple-select"
+import { Select, type SelectProps } from "@/components/ui/select"
 import {
   FormFieldShell,
   type FormFieldShellControlProps,
+  resolveFormFieldIds,
 } from "@/components/form/form-field-shell"
 
 export type FormSelectKind = "simple" | "async"
@@ -26,7 +27,7 @@ type FormSelectBaseProps<
 export type FormSimpleSelectProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = Omit<SimpleSelectProps, "value" | "onValueChange" | "disabled"> &
+> = Omit<SelectProps, "children" | "value" | "onValueChange" | "disabled"> &
   FormSelectBaseProps<TFieldValues, TName> & {
     kind?: "simple"
     emptyValue?: unknown
@@ -68,6 +69,7 @@ function buildShellProps<
     description: props.description,
     required: props.required,
     className: props.className,
+    htmlFor: props.name,
     layout: props.layout,
     descriptionPosition: props.descriptionPosition,
     labelAction: props.labelAction,
@@ -101,6 +103,11 @@ function FormSelect<
       name={props.name}
       render={({ field, fieldState }) => {
         const error = fieldState.error?.message
+        const controlId = `${props.name}`
+        const resolvedIds = resolveFormFieldIds(controlId, {
+          description: props.description,
+          error,
+        })
 
         if (kind === "async") {
           const {
@@ -131,11 +138,19 @@ function FormSelect<
           } = props as FormSelectAsyncVariantProps<TFieldValues, TName, TValue, TData, TOption>
 
           return (
-            <FormFieldShell {...shellProps} error={error}>
-            <AsyncSelect<TValue, TData, TOption>
+            <FormFieldShell
+              {...shellProps}
+              labelId={resolvedIds.labelId}
+              descriptionId={resolvedIds.descriptionId}
+              errorId={resolvedIds.errorId}
+              error={error}
+            >
+              <AsyncSelect<TValue, TData, TOption>
                 {...asyncProps}
                 value={field.value == null || field.value === "" ? undefined : (String(field.value) as TValue)}
                 disabled={disabled || readOnly}
+                aria-describedby={resolvedIds.describedBy}
+                aria-errormessage={error ? resolvedIds.errorId : undefined}
                 onValueChange={(nextValue, option) => {
                   field.onChange(nextValue ?? emptyValue)
                   onValueChange?.(nextValue, option)
@@ -174,11 +189,19 @@ function FormSelect<
         } = props as FormSimpleSelectProps<TFieldValues, TName>
 
         return (
-          <FormFieldShell {...shellProps} error={error}>
-            <SimpleSelect
+          <FormFieldShell
+            {...shellProps}
+            labelId={resolvedIds.labelId}
+            descriptionId={resolvedIds.descriptionId}
+            errorId={resolvedIds.errorId}
+            error={error}
+          >
+            <Select
               {...simpleProps}
-              value={field.value == null ? "" : String(field.value)}
+              value={field.value == null ? undefined : String(field.value)}
               disabled={disabled || readOnly}
+              aria-describedby={resolvedIds.describedBy}
+              aria-errormessage={error ? resolvedIds.errorId : undefined}
               onValueChange={(nextValue) => {
                 field.onChange(nextValue || emptyValue)
                 onValueChange?.(nextValue as string)

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>