tembro 2.0.4 → 2.0.5

package/packages/cli/vendor/src/components/form/form-field-shell.tsx

@@ -6,16 +6,19 @@ import { cn } from "@/lib/utils"
 export type FormFieldLayout = "vertical" | "horizontal" | "inline"
 export type FormFieldDescriptionPosition = "top" | "bottom"
 
-export type FormFieldShellProps = React.ComponentProps<"div"> & {
-  label?: React.ReactNode
-  description?: React.ReactNode
-  error?: React.ReactNode
-  required?: boolean
-  htmlFor?: string
-  layout?: FormFieldLayout
-  descriptionPosition?: FormFieldDescriptionPosition
-  labelAction?: React.ReactNode
-  requiredIndicator?: React.ReactNode
+export type FormFieldShellProps = React.ComponentProps<"div"> & {
+  label?: React.ReactNode
+  description?: React.ReactNode
+  error?: React.ReactNode
+  required?: boolean
+  htmlFor?: string
+  labelId?: string
+  descriptionId?: string
+  errorId?: string
+  layout?: FormFieldLayout
+  descriptionPosition?: FormFieldDescriptionPosition
+  labelAction?: React.ReactNode
+  requiredIndicator?: React.ReactNode
   errorIcon?: React.ReactNode
   showErrorIcon?: boolean
   disabled?: boolean
@@ -29,14 +32,18 @@ export type FormFieldShellProps = React.ComponentProps<"div"> & {
 
 export type FormFieldShellControlProps = Pick<
   FormFieldShellProps,
-  | "label"
-  | "description"
-  | "required"
-  | "className"
-  | "layout"
-  | "descriptionPosition"
-  | "labelAction"
-  | "requiredIndicator"
+  | "label"
+  | "description"
+  | "required"
+  | "className"
+  | "htmlFor"
+  | "labelId"
+  | "descriptionId"
+  | "errorId"
+  | "layout"
+  | "descriptionPosition"
+  | "labelAction"
+  | "requiredIndicator"
   | "errorIcon"
   | "showErrorIcon"
   | "disabled"
@@ -45,9 +52,32 @@ export type FormFieldShellControlProps = Pick<
   | "labelRowClassName"
   | "descriptionClassName"
   | "errorClassName"
-  | "contentClassName"
->
-
+  | "contentClassName"
+>
+
+export type FormFieldMessageState = {
+  description?: React.ReactNode
+  error?: React.ReactNode
+}
+
+export type FormFieldResolvedIds = {
+  labelId: string
+  descriptionId: string
+  errorId: string
+  describedBy?: string
+}
+
+function resolveFormFieldIds(id: string, state: FormFieldMessageState = {}): FormFieldResolvedIds {
+  const labelId = `${id}-label`
+  const descriptionId = `${id}-description`
+  const errorId = `${id}-error`
+  const describedBy = [state.description ? descriptionId : null, state.error ? errorId : null]
+    .filter(Boolean)
+    .join(" ") || undefined
+
+  return { labelId, descriptionId, errorId, describedBy }
+}
+
 const layoutClassName: Record<FormFieldLayout, string> = {
   vertical: "grid gap-2",
   horizontal: "grid gap-2 sm:grid-cols-[minmax(0,12rem)_1fr] sm:items-start sm:gap-5",
@@ -58,12 +88,15 @@ function FormFieldShell({
   className,
   label,
   description,
-  error,
-  required = false,
-  htmlFor,
-  layout = "vertical",
-  descriptionPosition = "top",
-  labelAction,
+  error,
+  required = false,
+  htmlFor,
+  labelId,
+  descriptionId,
+  errorId,
+  layout = "vertical",
+  descriptionPosition = "top",
+  labelAction,
   requiredIndicator = <span className="ml-1 text-destructive">*</span>,
   errorIcon,
   showErrorIcon = true,
@@ -92,9 +125,10 @@ function FormFieldShell({
       )}
     >
       {label ? (
-        <label
-          data-slot="form-field-label"
-          htmlFor={htmlFor}
+        <label
+          data-slot="form-field-label"
+          htmlFor={htmlFor}
+          id={labelId}
           className={cn(
             "min-w-0 text-sm font-semibold leading-none tracking-tight text-foreground",
             disabled && "cursor-not-allowed opacity-60",
@@ -117,9 +151,10 @@ function FormFieldShell({
     </div>
   ) : null
 
-  const descriptionNode = description ? (
+  const descriptionNode = description ? (
     <p
       data-slot="form-field-description"
+      id={descriptionId}
       className={cn("text-sm leading-6 text-muted-foreground", disabled && "opacity-60", descriptionClassName)}
     >
       {description}
@@ -135,6 +170,9 @@ function FormFieldShell({
   const errorNode = error ? (
     <p
       data-slot="form-field-error"
+      id={errorId}
+      role="alert"
+      aria-live="polite"
       className={cn(
         "flex items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-destructive/18 bg-destructive/8 px-3 py-2 text-sm font-medium leading-6 text-destructive",
         errorClassName
@@ -189,6 +227,6 @@ function FormFieldShell({
       )}
     </div>
   )
-}
-
-export { FormFieldShell }
+}
+
+export { FormFieldShell, resolveFormFieldIds }

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

@@ -26,6 +26,7 @@ import {
 import {
   FormFieldShell,
   type FormFieldShellControlProps,
+  resolveFormFieldIds,
 } from "@/components/form/form-field-shell"
 
 export type FormInputKind =
@@ -198,6 +199,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 +232,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,7 +267,14 @@ function FormInput<
           } = props as FormInputSearchVariantProps<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}
+            >
               <SearchInput
                 {...searchProps}
                 id={id ?? inputId}
@@ -272,6 +285,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 +330,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 +348,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 +396,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 +414,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 +466,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 +486,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 +533,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 +551,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,7 +597,14 @@ function FormInput<
           } = props as FormInputClearableVariantProps<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}
+            >
               <ClearableInput
                 {...clearableProps}
                 id={id ?? inputId}
@@ -557,6 +615,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 +661,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 +679,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 +726,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 +744,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 +790,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 +808,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 +854,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 +874,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 +929,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 +957,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

@@ -10,6 +10,7 @@ import { SimpleSelect, type SimpleSelectProps } from "@/components/inputs/simple
 import {
   FormFieldShell,
   type FormFieldShellControlProps,
+  resolveFormFieldIds,
 } from "@/components/form/form-field-shell"
 
 export type FormSelectKind = "simple" | "async"
@@ -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}>
+          <FormFieldShell
+            {...shellProps}
+            labelId={resolvedIds.labelId}
+            descriptionId={resolvedIds.descriptionId}
+            errorId={resolvedIds.errorId}
+            error={error}
+          >
             <SimpleSelect
               {...simpleProps}
               value={field.value == null ? "" : 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)