@wistia/ui 0.6.29 → 0.6.30

package/dist/index.d.mts

@@ -1194,6 +1194,10 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
      * This should be a single child that is a valid form field (or can pretend to be one).
      */
     children: JSX.Element;
+    /**
+     * Additional descriptive text to display below the form field
+     */
+    description?: ReactNode;
     /**
      * Valid label text
      */
@@ -1220,10 +1224,10 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
     labelPosition?: 'block' | 'inline-compact' | 'inline';
 };
 /**
- * Component description goes here
+ * FormField is a compound component that combines a label, form control, and optional description and error message.
  */
 declare const FormField: {
-    ({ children, label, name, error, value, labelPosition, id, ...props }: FormFieldProps): JSX.Element;
+    ({ children, description, error, id, label, labelPosition, name, value, ...props }: FormFieldProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -1194,6 +1194,10 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
      * This should be a single child that is a valid form field (or can pretend to be one).
      */
     children: JSX.Element;
+    /**
+     * Additional descriptive text to display below the form field
+     */
+    description?: ReactNode;
     /**
      * Valid label text
      */
@@ -1220,10 +1224,10 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
     labelPosition?: 'block' | 'inline-compact' | 'inline';
 };
 /**
- * Component description goes here
+ * FormField is a compound component that combines a label, form control, and optional description and error message.
  */
 declare const FormField: {
-    ({ children, label, name, error, value, labelPosition, id, ...props }: FormFieldProps): JSX.Element;
+    ({ children, description, error, id, label, labelPosition, name, value, ...props }: FormFieldProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.29
+ * @license @wistia/ui v0.6.30
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9269,24 +9269,29 @@ var ErrorMessages = ({ errors, id }) => {
 };
 var FormField = ({
   children,
+  description,
+  error,
+  id,
   label,
+  labelPosition,
   name,
-  error,
   value,
-  labelPosition,
-  id,
   ...props
 }) => {
   const formState = useContext3(FormContext);
   const checkboxGroup = useContext3(CheckboxGroupContext);
+  const defaultValue = formState.values[name];
   const isIntegratedLabel = children.type === Checkbox;
   const computedId = id ?? `${formState.formId}-${name}`;
   const computedError = error ?? formState.errors[name];
-  const defaultValue = formState.values[name];
+  const descriptionId = `${computedId}-description`;
+  const errorId = `${computedId}-error`;
+  const ariaDescribedby = [descriptionId, errorId].filter(Boolean).join(" ") || void 0;
   let childProps = {
     name,
     id: computedId,
     label: isIntegratedLabel ? label : void 0,
+    "aria-describedby": ariaDescribedby,
     ...props
   };
   if (isUndefined4(value) && isNotUndefined8(defaultValue)) {
@@ -9309,8 +9314,7 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": isNotNil12(error),
-      "aria-describedby": isNotNil12(error) ? `${computedId}-error` : void 0
+      "aria-invalid": isNotNil12(error)
     };
   }
   Children5.only(children);
@@ -9321,6 +9325,7 @@ var FormField = ({
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
         !isIntegratedLabel && /* @__PURE__ */ jsx225(Label, { htmlFor: computedId, children: label }),
+        isNotNil12(description) ? /* @__PURE__ */ jsx225(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement5(children, childProps),
         isNotNil12(computedError) ? /* @__PURE__ */ jsxs23(Fragment6, { children: [
           /* @__PURE__ */ jsx225("div", {}),
@@ -9328,7 +9333,7 @@ var FormField = ({
             ErrorMessages,
             {
               errors: computedError,
-              id: `${computedId}-error`
+              id: errorId
             }
           )
         ] }) : null