@commercetools/nimbus 2.0.1 → 2.2.0

package/dist/components/form-field/components/form-field.root.d.ts

@@ -1,9 +1,12 @@
 import { FormFieldProps } from '../form-field.types';
 /**
- * # FormField
+ * # FormField.Root
  *
  * displays miscellaneous inputs in a FormField context
  *
- * @see {@link https://nimbus-documentation.vercel.app/components/inputs/formfield}
+ * @supportsStyleProps
  */
-export declare const FormFieldRoot: ({ ref: forwardedRef, id, isInvalid, isRequired, isDisabled, isReadOnly, children, ...props }: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormFieldRoot: {
+    ({ ref: forwardedRef, id, isInvalid, isRequired, isDisabled, isReadOnly, children, ...props }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/form-field/components/index.d.ts

@@ -0,0 +1,6 @@
+export { FormFieldRoot } from './form-field.root';
+export { FormFieldLabel } from './form-field.label';
+export { FormFieldInput } from './form-field.input';
+export { FormFieldDescription } from './form-field.description';
+export { FormFieldError } from './form-field.error';
+export { FormFieldInfoBox } from './form-field.info-box';

package/dist/components/form-field/form-field.d.ts

@@ -1,17 +1,145 @@
-import { FormFieldRoot } from './components/form-field.root';
-import { FormFieldLabel } from './components/form-field.label';
-import { FormFieldInput } from './components/form-field.input';
-import { FormFieldDescription } from './components/form-field.description';
-import { FormFieldError } from './components/form-field.error';
-import { FormFieldInfoBox } from './components/form-field.info-box';
+import { FormFieldRoot, FormFieldLabel, FormFieldInput, FormFieldDescription, FormFieldError, FormFieldInfoBox } from './components';
 export declare const FormField: {
-    Root: ({ ref: forwardedRef, id, isInvalid, isRequired, isDisabled, isReadOnly, children, ...props }: import('./form-field.types').FormFieldProps) => import("react/jsx-runtime").JSX.Element;
-    Label: ({ children, ...labelSlotProps }: import('./form-field.types').FormFieldLabelSlotProps) => null;
-    Input: ({ children, ...inputSlotProps }: import('./form-field.types').FormFieldInputSlotProps) => null;
-    Description: ({ children, ...descriptionSlotProps }: import('./form-field.types').FormFieldDescriptionSlotProps) => null;
-    Error: ({ children, ...errorSlotProps }: import('./form-field.types').FormFieldErrorSlotProps) => null;
-    InfoBox: ({ children }: {
-        children: import('react').ReactNode;
-    }) => null;
+    /**
+     * # FormField.Root
+     *
+     * The root container for the form field that provides context and state management
+     * for all child components. Handles React Aria integration for accessibility,
+     * manages field state (required, invalid, disabled, readonly), and coordinates
+     * rendering of label, input, description, and error elements.
+     *
+     * @example
+     * ```tsx
+     * <FormField.Root isRequired isInvalid>
+     *   <FormField.Label>Username</FormField.Label>
+     *   <FormField.Input>
+     *     <TextInput />
+     *   </FormField.Input>
+     *   <FormField.Description>Enter your username</FormField.Description>
+     *   <FormField.Error>Username is required</FormField.Error>
+     * </FormField.Root>
+     * ```
+     */
+    Root: {
+        ({ ref: forwardedRef, id, isInvalid, isRequired, isDisabled, isReadOnly, children, ...props }: import('./form-field.types').FormFieldProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # FormField.Label
+     *
+     * The label element for the form field. Automatically associates with the input
+     * via React Aria and displays a required indicator when the field is required.
+     * Supports an optional info box trigger for additional field information.
+     *
+     * @example
+     * ```tsx
+     * <FormField.Root>
+     *   <FormField.Label>Email Address</FormField.Label>
+     *   <FormField.InfoBox>
+     *     Your email will be used for account notifications
+     *   </FormField.InfoBox>
+     *   <FormField.Input>
+     *     <TextInput />
+     *   </FormField.Input>
+     * </FormField.Root>
+     * ```
+     */
+    Label: {
+        ({ children, ...labelSlotProps }: import('./form-field.types').FormFieldLabelSlotProps): null;
+        displayName: string;
+    };
+    /**
+     * # FormField.Input
+     *
+     * The input wrapper element that receives and displays the actual input component.
+     * Automatically clones children and passes accessibility props, validation state,
+     * and field attributes from React Aria.
+     *
+     * @example
+     * ```tsx
+     * <FormField.Root>
+     *   <FormField.Label>Password</FormField.Label>
+     *   <FormField.Input>
+     *     <PasswordInput />
+     *   </FormField.Input>
+     * </FormField.Root>
+     * ```
+     */
+    Input: {
+        ({ children, ...inputSlotProps }: import('./form-field.types').FormFieldInputSlotProps): null;
+        displayName: string;
+    };
+    /**
+     * # FormField.Description
+     *
+     * The description element that provides helpful information about the field.
+     * Automatically associates with the input via `aria-describedby` for screen readers.
+     *
+     * @example
+     * ```tsx
+     * <FormField.Root>
+     *   <FormField.Label>Username</FormField.Label>
+     *   <FormField.Input>
+     *     <TextInput />
+     *   </FormField.Input>
+     *   <FormField.Description>
+     *     Must be 3-20 characters, letters and numbers only
+     *   </FormField.Description>
+     * </FormField.Root>
+     * ```
+     */
+    Description: {
+        ({ children, ...descriptionSlotProps }: import('./form-field.types').FormFieldDescriptionSlotProps): null;
+        displayName: string;
+    };
+    /**
+     * # FormField.Error
+     *
+     * The error message element that displays validation errors. Only visible when
+     * the field is invalid. Automatically associates with the input via
+     * `aria-errormessage` and includes an error icon.
+     *
+     * @example
+     * ```tsx
+     * <FormField.Root isInvalid>
+     *   <FormField.Label>Email</FormField.Label>
+     *   <FormField.Input>
+     *     <TextInput />
+     *   </FormField.Input>
+     *   <FormField.Error>Please enter a valid email address</FormField.Error>
+     * </FormField.Root>
+     * ```
+     */
+    Error: {
+        ({ children, ...errorSlotProps }: import('./form-field.types').FormFieldErrorSlotProps): null;
+        displayName: string;
+    };
+    /**
+     * # FormField.InfoBox
+     *
+     * The info box content that appears in a popover when the help icon next to
+     * the label is clicked. Use for additional context or instructions that don't
+     * need to be visible by default.
+     *
+     * @example
+     * ```tsx
+     * <FormField.Root>
+     *   <FormField.Label>API Key</FormField.Label>
+     *   <FormField.InfoBox>
+     *     Your API key can be found in your account settings.
+     *     Keep it secure and never share it publicly.
+     *   </FormField.InfoBox>
+     *   <FormField.Input>
+     *     <TextInput />
+     *   </FormField.Input>
+     * </FormField.Root>
+     * ```
+     */
+    InfoBox: {
+        ({ children }: {
+            children: import('react').ReactNode;
+        }): null;
+        displayName: string;
+    };
 };
 export { FormFieldRoot as _FormFieldRoot, FormFieldLabel as _FormFieldLabel, FormFieldInput as _FormFieldInput, FormFieldDescription as _FormFieldDescription, FormFieldError as _FormFieldError, FormFieldInfoBox as _FormFieldInfoBox, };

package/dist/components/form-field/form-field.recipe.d.ts

@@ -2,7 +2,7 @@
  * Recipe configuration for the FormField component.
  * Defines the styling variants and base styles using Chakra UI's recipe system.
  */
-export declare const formFieldRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"description" | "root" | "label" | "popover" | "input" | "error", {
+export declare const formFieldRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "popover" | "input" | "label" | "description" | "error", {
     size: {
         md: {
             root: {