@commercetools/nimbus 2.9.1 → 2.11.0

package/dist/chunks/form-field-BVbjVnSV.es.js

@@ -0,0 +1,353 @@
+import { createContext as z, useRef as V, useState as _, useMemo as b, useEffect as m, useContext as f, Children as A, isValidElement as H, cloneElement as D } from "react";
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+import { createSlotRecipeContext as G } from "@chakra-ui/react/styled-system";
+import { $ as J } from "./useField-lGJsB_QJ.es.js";
+import { $ as K } from "./useObjectRef-tuMEdnba.es.js";
+import { m as O } from "./merge-refs-D-zSwpoh.es.js";
+import { j as Q, $ as R, k as T } from "./Dialog-Dwy2_Ptk.es.js";
+import { HelpOutline as U, ErrorOutline as W } from "@commercetools/nimbus-icons";
+import { B as F } from "./box-DuBoAZvq.es.js";
+import { I as X } from "./icon-button-COjLtd6N.es.js";
+const a = /* @__PURE__ */ z({
+  context: {
+    label: null,
+    description: null,
+    error: null,
+    info: null
+  },
+  setContext: () => {
+  },
+  inputProps: {}
+}), { withProvider: Y, withContext: u } = /* @__PURE__ */ G({
+  key: "nimbusFormField"
+}), Z = /* @__PURE__ */ Y("div", "root"), q = /* @__PURE__ */ u("div", "label"), oo = /* @__PURE__ */ u("div", "input"), ro = /* @__PURE__ */ u("div", "description"), eo = /* @__PURE__ */ u("div", "error"), to = /* @__PURE__ */ u("div", "popover"), P = function({
+  ref: l,
+  id: r,
+  isInvalid: o,
+  isRequired: i,
+  isDisabled: p,
+  isReadOnly: c,
+  children: g,
+  ...N
+}) {
+  const B = V(null), k = K(O(B, l)), [e, x] = _({
+    label: null,
+    description: null,
+    error: null,
+    info: null,
+    isInvalid: o,
+    isRequired: i,
+    isDisabled: p,
+    isReadOnly: c
+  }), I = b(() => {
+    const s = {
+      id: r,
+      description: e.description,
+      errorMessage: e.error
+    };
+    return e.label ? s.label = e.label : (s["aria-label"] = "empty-label", s["aria-labelledby"] = "empty-label"), s;
+  }, [r, e.description, e.error, e.label]), { labelProps: L, fieldProps: h, descriptionProps: M, errorMessageProps: j } = J(I);
+  m(() => {
+    x((s) => ({
+      ...s,
+      isInvalid: o,
+      isRequired: i,
+      isDisabled: p,
+      isReadOnly: c
+    }));
+  }, [o, i, p, c]);
+  const $ = b(
+    () => ({
+      ...h,
+      isInvalid: o,
+      isRequired: i,
+      isDisabled: p,
+      isReadOnly: c
+    }),
+    [h, o, i, p, c]
+  ), w = b(
+    () => ({ context: e, setContext: x, inputProps: $ }),
+    [e, $]
+  );
+  return /* @__PURE__ */ n(a.Provider, { value: w, children: /* @__PURE__ */ d(Z, { ref: k, ...N, children: [
+    e.label && /* @__PURE__ */ d(q, { ...e.labelSlotProps, children: [
+      /* @__PURE__ */ d("label", { ...L, "data-required": i, children: [
+        e.label,
+        i && /* @__PURE__ */ n("sup", { "aria-hidden": "true", children: "*" })
+      ] }),
+      e.info && /* @__PURE__ */ d(Q, { children: [
+        /* @__PURE__ */ n(
+          F,
+          {
+            as: "span",
+            display: "inline-block",
+            position: "relative",
+            width: "1ch",
+            height: "1ch",
+            ml: "200",
+            children: /* @__PURE__ */ n(
+              F,
+              {
+                as: "span",
+                display: "inline-flex",
+                position: "absolute",
+                top: "50%",
+                right: "50%",
+                transform: "translate(50%, -50%)",
+                children: /* @__PURE__ */ n(
+                  X,
+                  {
+                    "aria-label": "__MORE INFO",
+                    size: "2xs",
+                    colorPalette: "info",
+                    variant: "link",
+                    children: /* @__PURE__ */ n(U, {})
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(to, { asChild: !0, children: /* @__PURE__ */ n(T, { children: /* @__PURE__ */ n(F, { p: "300", children: e.info }) }) }) })
+      ] })
+    ] }),
+    e.description && /* @__PURE__ */ n(
+      ro,
+      {
+        ...M,
+        ...e.descriptionSlotProps,
+        children: e.description
+      }
+    ),
+    o && e.error && /* @__PURE__ */ d(
+      eo,
+      {
+        ...j,
+        ...e.errorSlotProps,
+        children: [
+          /* @__PURE__ */ n(
+            F,
+            {
+              as: W,
+              display: "inline-flex",
+              boxSize: "400",
+              flexShrink: "0",
+              mt: "50"
+            }
+          ),
+          e.error
+        ]
+      }
+    ),
+    g
+  ] }) });
+};
+P.displayName = "FormField.Root";
+const S = ({
+  children: t,
+  ...l
+}) => {
+  const { setContext: r } = f(a);
+  return m(() => (r((o) => ({
+    ...o,
+    label: t,
+    labelSlotProps: l
+  })), () => {
+    r((o) => ({
+      ...o,
+      label: null,
+      labelSlotProps: void 0
+    }));
+  }), [t, r]), null;
+};
+S.displayName = "FormField.Label";
+const C = ({
+  children: t,
+  ...l
+}) => {
+  const { inputProps: r } = f(a);
+  return /* @__PURE__ */ n(oo, { ...l, children: A.map(t, (o) => H(o) ? D(o, r) : o) });
+};
+C.displayName = "FormField.Input";
+const v = ({
+  children: t,
+  ...l
+}) => {
+  const { setContext: r } = f(a);
+  return m(() => (r((o) => ({
+    ...o,
+    description: t,
+    descriptionSlotProps: l
+  })), () => {
+    r((o) => ({
+      ...o,
+      description: null,
+      descriptionSlotProps: void 0
+    }));
+  }), [t, r]), null;
+};
+v.displayName = "FormField.Description";
+const y = ({
+  children: t,
+  ...l
+}) => {
+  const { setContext: r } = f(a);
+  return m(() => (r((o) => ({
+    ...o,
+    error: t,
+    errorSlotProps: l
+  })), () => {
+    r((o) => ({
+      ...o,
+      error: null,
+      errorSlotProps: void 0
+    }));
+  }), [t, r]), null;
+};
+y.displayName = "FormField.Error";
+const E = ({ children: t }) => {
+  const { setContext: l } = f(a);
+  return m(() => (l((r) => ({
+    ...r,
+    info: t
+  })), () => {
+    l((r) => ({
+      ...r,
+      info: null
+    }));
+  }), [t, l]), null;
+};
+E.displayName = "FormField.InfoBox";
+const Fo = {
+  /**
+   * # 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: P,
+  /**
+   * # 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: S,
+  /**
+   * # 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: C,
+  /**
+   * # 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: v,
+  /**
+   * # 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: y,
+  /**
+   * # 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: E
+};
+export {
+  Fo as F,
+  v as a,
+  y as b,
+  E as c,
+  C as d,
+  S as e,
+  P as f
+};
+//# sourceMappingURL=form-field-BVbjVnSV.es.js.map

package/dist/chunks/form-field-BVbjVnSV.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-BVbjVnSV.es.js","sources":["../../src/components/form-field/components/form-field.context.tsx","../../src/components/form-field/form-field.slots.tsx","../../src/components/form-field/components/form-field.root.tsx","../../src/components/form-field/components/form-field.label.tsx","../../src/components/form-field/components/form-field.input.tsx","../../src/components/form-field/components/form-field.description.tsx","../../src/components/form-field/components/form-field.error.tsx","../../src/components/form-field/components/form-field.info-box.tsx","../../src/components/form-field/form-field.tsx"],"sourcesContent":["import { createContext, type ReactNode } from \"react\";\nimport type {\n  FormFieldDescriptionSlotProps,\n  FormFieldErrorSlotProps,\n  FormFieldLabelSlotProps,\n} from \"../form-field.types\";\n\nexport type FormFieldInputProps = Record<string, unknown>;\n\nexport type FormFieldContextPayloadType = {\n  label: ReactNode;\n  labelSlotProps?: FormFieldLabelSlotProps;\n  description: ReactNode;\n  descriptionSlotProps?: FormFieldDescriptionSlotProps;\n  error: ReactNode;\n  errorSlotProps?: FormFieldErrorSlotProps;\n  info: ReactNode;\n  isInvalid?: boolean;\n  isRequired?: boolean;\n  isDisabled?: boolean;\n  isReadOnly?: boolean;\n};\n\nexport type FormFieldContextType = {\n  context: FormFieldContextPayloadType;\n  setContext: React.Dispatch<React.SetStateAction<FormFieldContextPayloadType>>;\n  inputProps: FormFieldInputProps;\n};\n\nexport const FormFieldContext = createContext<FormFieldContextType>({\n  context: {\n    label: null,\n    description: null,\n    error: null,\n    info: null,\n  },\n  setContext: () => {},\n  inputProps: {},\n});\n","import { createSlotRecipeContext } from \"@chakra-ui/react/styled-system\";\nimport type {\n  FormFieldRootSlotProps,\n  FormFieldLabelSlotProps,\n  FormFieldInputSlotProps,\n  FormFieldDescriptionSlotProps,\n  FormFieldErrorSlotProps,\n  FormFieldPopoverSlotProps,\n} from \"./form-field.types\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"nimbusFormField\",\n});\n\n// Root slot\nexport const FormFieldRootSlot = withProvider<\n  HTMLDivElement,\n  FormFieldRootSlotProps\n>(\"div\", \"root\");\n\n// Label Slot\nexport const FormFieldLabelSlot = withContext<\n  HTMLDivElement,\n  FormFieldLabelSlotProps\n>(\"div\", \"label\");\n\n// Input Slot\nexport const FormFieldInputSlot = withContext<\n  HTMLDivElement,\n  FormFieldInputSlotProps\n>(\"div\", \"input\");\n\n// Description Slot\nexport const FormFieldDescriptionSlot = withContext<\n  HTMLDivElement,\n  FormFieldDescriptionSlotProps\n>(\"div\", \"description\");\n\n// Error Slot\nexport const FormFieldErrorSlot = withContext<\n  HTMLDivElement,\n  FormFieldErrorSlotProps\n>(\"div\", \"error\");\n\n// Error Slot\nexport const FormFieldPopoverSlot = withContext<\n  HTMLDivElement,\n  FormFieldPopoverSlotProps\n>(\"div\", \"popover\");\n","import { useEffect, useMemo, useState, useRef } from \"react\";\nimport type { FormFieldProps } from \"../form-field.types\";\nimport { useField, useObjectRef } from \"react-aria\";\nimport { mergeRefs } from \"@/utils\";\nimport {\n  FormFieldContext,\n  type FormFieldContextPayloadType,\n} from \"./form-field.context\";\nimport {\n  FormFieldDescriptionSlot,\n  FormFieldErrorSlot,\n  FormFieldLabelSlot,\n  FormFieldPopoverSlot,\n  FormFieldRootSlot,\n} from \"../form-field.slots\";\nimport { Dialog, DialogTrigger, Popover } from \"react-aria-components\";\nimport { Box, IconButton } from \"@/components\";\nimport { ErrorOutline, HelpOutline } from \"@commercetools/nimbus-icons\";\n\n/**\n * # FormField.Root\n *\n * displays miscellaneous inputs in a FormField context\n *\n * @supportsStyleProps\n */\nexport const FormFieldRoot = function FormFieldRoot({\n  ref: forwardedRef,\n  id,\n  isInvalid,\n  isRequired,\n  isDisabled,\n  isReadOnly,\n  children,\n  ...props\n}: FormFieldProps) {\n  const localRef = useRef<HTMLDivElement>(null);\n  const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n  const [context, setContext] = useState<FormFieldContextPayloadType>({\n    label: null,\n    description: null,\n    error: null,\n    info: null,\n    isInvalid,\n    isRequired,\n    isDisabled,\n    isReadOnly,\n  });\n\n  const useFieldArgs: Parameters<typeof useField>[0] = useMemo(() => {\n    const args: Parameters<typeof useField>[0] = {\n      id,\n      description: context.description,\n      errorMessage: context.error,\n    };\n\n    if (context.label) {\n      args.label = context.label;\n    } else {\n      // Context will always start out null, so we need to stub out some aria attributes\n      // FIXME: This is a hack to get the form field to work, but it's not the best solution\n      // FIXME: We should find a better way to handle this by redesigning the FormField component's structure\n      args[\"aria-label\"] = \"empty-label\";\n      args[\"aria-labelledby\"] = \"empty-label\";\n    }\n\n    return args;\n  }, [id, context.description, context.error, context.label]);\n\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField(useFieldArgs);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      isInvalid,\n      isRequired,\n      isDisabled,\n      isReadOnly,\n    }));\n  }, [isInvalid, isRequired, isDisabled, isReadOnly]);\n\n  const inputProps = useMemo(\n    () => ({\n      ...fieldProps,\n      isInvalid,\n      isRequired,\n      isDisabled,\n      isReadOnly,\n    }),\n    [fieldProps, isInvalid, isRequired, isDisabled, isReadOnly]\n  );\n\n  const contextValue = useMemo(\n    () => ({ context, setContext, inputProps }),\n    [context, inputProps]\n  );\n\n  return (\n    <FormFieldContext.Provider value={contextValue}>\n      <FormFieldRootSlot ref={ref} {...props}>\n        {context.label && (\n          <FormFieldLabelSlot {...context.labelSlotProps}>\n            <label {...labelProps} data-required={isRequired}>\n              {context.label}\n              {isRequired && <sup aria-hidden=\"true\">*</sup>}\n            </label>\n            {context.info && (\n              <DialogTrigger>\n                <Box\n                  as=\"span\"\n                  display=\"inline-block\"\n                  position=\"relative\"\n                  width=\"1ch\"\n                  height=\"1ch\"\n                  ml=\"200\"\n                >\n                  <Box\n                    as=\"span\"\n                    display=\"inline-flex\"\n                    position=\"absolute\"\n                    top=\"50%\"\n                    right=\"50%\"\n                    transform=\"translate(50%, -50%)\"\n                  >\n                    <IconButton\n                      aria-label=\"__MORE INFO\"\n                      size=\"2xs\"\n                      colorPalette=\"info\"\n                      variant=\"link\"\n                    >\n                      <HelpOutline />\n                    </IconButton>\n                  </Box>\n                </Box>\n                <Popover>\n                  <FormFieldPopoverSlot asChild>\n                    <Dialog>\n                      <Box p=\"300\">{context.info}</Box>\n                    </Dialog>\n                  </FormFieldPopoverSlot>\n                </Popover>\n              </DialogTrigger>\n            )}\n          </FormFieldLabelSlot>\n        )}\n        {context.description && (\n          <FormFieldDescriptionSlot\n            {...descriptionProps}\n            {...context.descriptionSlotProps}\n          >\n            {context.description}\n          </FormFieldDescriptionSlot>\n        )}\n        {isInvalid && context.error && (\n          <FormFieldErrorSlot\n            {...errorMessageProps}\n            {...context.errorSlotProps}\n          >\n            <Box\n              as={ErrorOutline}\n              display=\"inline-flex\"\n              boxSize=\"400\"\n              flexShrink=\"0\"\n              mt=\"50\"\n            />\n            {context.error}\n          </FormFieldErrorSlot>\n        )}\n        {children}\n      </FormFieldRootSlot>\n    </FormFieldContext.Provider>\n  );\n};\n\nFormFieldRoot.displayName = \"FormField.Root\";\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldLabelSlotProps } from \"../form-field.types\";\n\n/**\n * FormField.Label - The label element for the form field\n *\n * @supportsStyleProps\n */\n// TODO: should this be wrapped in react-aria's `LabelContext` provider?, e.g. https://react-spectrum.adobe.com/react-aria/TextField.html#custom-children\nexport const FormFieldLabel = ({\n  children,\n  ...labelSlotProps\n}: FormFieldLabelSlotProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      label: children,\n      labelSlotProps,\n    }));\n\n    // Cleanup: clear label when component unmounts\n    return () => {\n      setContext((prevContext) => ({\n        ...prevContext,\n        label: null,\n        labelSlotProps: undefined,\n      }));\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, setContext]);\n\n  return null;\n};\n\nFormFieldLabel.displayName = \"FormField.Label\";\n","import { Children, cloneElement, isValidElement, useContext } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldInputSlotProps } from \"../form-field.types\";\nimport { FormFieldInputSlot } from \"../form-field.slots\";\n\n/**\n * FormField.Input - The input wrapper element for the form field\n *\n * Renders children directly (with injected field props) to avoid\n * the state-based indirection that causes cursor position issues\n * on controlled inputs.\n *\n * @supportsStyleProps\n */\nexport const FormFieldInput = ({\n  children,\n  ...inputSlotProps\n}: FormFieldInputSlotProps) => {\n  const { inputProps } = useContext(FormFieldContext);\n\n  return (\n    <FormFieldInputSlot {...inputSlotProps}>\n      {Children.map(children, (child) => {\n        if (isValidElement(child)) {\n          return cloneElement(child, inputProps);\n        }\n        return child;\n      })}\n    </FormFieldInputSlot>\n  );\n};\n\nFormFieldInput.displayName = \"FormField.Input\";\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldDescriptionSlotProps } from \"../form-field.types\";\n\n/**\n * FormField.Description - The description element for the form field\n *\n * @supportsStyleProps\n */\nexport const FormFieldDescription = ({\n  children,\n  ...descriptionSlotProps\n}: FormFieldDescriptionSlotProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      description: children,\n      descriptionSlotProps,\n    }));\n\n    // Cleanup: clear description when component unmounts\n    return () => {\n      setContext((prevContext) => ({\n        ...prevContext,\n        description: null,\n        descriptionSlotProps: undefined,\n      }));\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, setContext]);\n\n  return null;\n};\n\nFormFieldDescription.displayName = \"FormField.Description\";\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldErrorSlotProps } from \"../form-field.types\";\n\n/**\n * FormField.Error - The error message element for the form field\n *\n * @supportsStyleProps\n */\nexport const FormFieldError = ({\n  children,\n  ...errorSlotProps\n}: FormFieldErrorSlotProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      error: children,\n      errorSlotProps,\n    }));\n\n    // Cleanup: clear error when component unmounts\n    return () => {\n      setContext((prevContext) => ({\n        ...prevContext,\n        error: null,\n        errorSlotProps: undefined,\n      }));\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, setContext]);\n\n  return null;\n};\n\nFormFieldError.displayName = \"FormField.Error\";\n","import { useContext, useEffect, type ReactNode } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\n\ntype FormFieldInfoBoxProps = {\n  /**\n   * The content to display in the InfoBox\n   */\n  children: ReactNode;\n};\n\n/**\n * FormField.InfoBox - The info box popover content for the form field\n *\n * @supportsStyleProps\n */\nexport const FormFieldInfoBox = ({ children }: FormFieldInfoBoxProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      info: children,\n    }));\n\n    // Cleanup: clear info when component unmounts\n    return () => {\n      setContext((prevContext) => ({\n        ...prevContext,\n        info: null,\n      }));\n    };\n  }, [children, setContext]);\n\n  return null;\n};\n\nFormFieldInfoBox.displayName = \"FormField.InfoBox\";\n","import {\n  FormFieldRoot,\n  FormFieldLabel,\n  FormFieldInput,\n  FormFieldDescription,\n  FormFieldError,\n  FormFieldInfoBox,\n} from \"./components\";\n\nexport const FormField = {\n  /**\n   * # FormField.Root\n   *\n   * The root container for the form field that provides context and state management\n   * for all child components. Handles React Aria integration for accessibility,\n   * manages field state (required, invalid, disabled, readonly), and coordinates\n   * rendering of label, input, description, and error elements.\n   *\n   * @example\n   * ```tsx\n   * <FormField.Root isRequired isInvalid>\n   *   <FormField.Label>Username</FormField.Label>\n   *   <FormField.Input>\n   *     <TextInput />\n   *   </FormField.Input>\n   *   <FormField.Description>Enter your username</FormField.Description>\n   *   <FormField.Error>Username is required</FormField.Error>\n   * </FormField.Root>\n   * ```\n   */\n  Root: FormFieldRoot,\n\n  /**\n   * # FormField.Label\n   *\n   * The label element for the form field. Automatically associates with the input\n   * via React Aria and displays a required indicator when the field is required.\n   * Supports an optional info box trigger for additional field information.\n   *\n   * @example\n   * ```tsx\n   * <FormField.Root>\n   *   <FormField.Label>Email Address</FormField.Label>\n   *   <FormField.InfoBox>\n   *     Your email will be used for account notifications\n   *   </FormField.InfoBox>\n   *   <FormField.Input>\n   *     <TextInput />\n   *   </FormField.Input>\n   * </FormField.Root>\n   * ```\n   */\n  Label: FormFieldLabel,\n\n  /**\n   * # FormField.Input\n   *\n   * The input wrapper element that receives and displays the actual input component.\n   * Automatically clones children and passes accessibility props, validation state,\n   * and field attributes from React Aria.\n   *\n   * @example\n   * ```tsx\n   * <FormField.Root>\n   *   <FormField.Label>Password</FormField.Label>\n   *   <FormField.Input>\n   *     <PasswordInput />\n   *   </FormField.Input>\n   * </FormField.Root>\n   * ```\n   */\n  Input: FormFieldInput,\n\n  /**\n   * # FormField.Description\n   *\n   * The description element that provides helpful information about the field.\n   * Automatically associates with the input via `aria-describedby` for screen readers.\n   *\n   * @example\n   * ```tsx\n   * <FormField.Root>\n   *   <FormField.Label>Username</FormField.Label>\n   *   <FormField.Input>\n   *     <TextInput />\n   *   </FormField.Input>\n   *   <FormField.Description>\n   *     Must be 3-20 characters, letters and numbers only\n   *   </FormField.Description>\n   * </FormField.Root>\n   * ```\n   */\n  Description: FormFieldDescription,\n\n  /**\n   * # FormField.Error\n   *\n   * The error message element that displays validation errors. Only visible when\n   * the field is invalid. Automatically associates with the input via\n   * `aria-errormessage` and includes an error icon.\n   *\n   * @example\n   * ```tsx\n   * <FormField.Root isInvalid>\n   *   <FormField.Label>Email</FormField.Label>\n   *   <FormField.Input>\n   *     <TextInput />\n   *   </FormField.Input>\n   *   <FormField.Error>Please enter a valid email address</FormField.Error>\n   * </FormField.Root>\n   * ```\n   */\n  Error: FormFieldError,\n\n  /**\n   * # FormField.InfoBox\n   *\n   * The info box content that appears in a popover when the help icon next to\n   * the label is clicked. Use for additional context or instructions that don't\n   * need to be visible by default.\n   *\n   * @example\n   * ```tsx\n   * <FormField.Root>\n   *   <FormField.Label>API Key</FormField.Label>\n   *   <FormField.InfoBox>\n   *     Your API key can be found in your account settings.\n   *     Keep it secure and never share it publicly.\n   *   </FormField.InfoBox>\n   *   <FormField.Input>\n   *     <TextInput />\n   *   </FormField.Input>\n   * </FormField.Root>\n   * ```\n   */\n  InfoBox: FormFieldInfoBox,\n};\n\nexport {\n  FormFieldRoot as _FormFieldRoot,\n  FormFieldLabel as _FormFieldLabel,\n  FormFieldInput as _FormFieldInput,\n  FormFieldDescription as _FormFieldDescription,\n  FormFieldError as _FormFieldError,\n  FormFieldInfoBox as _FormFieldInfoBox,\n};\n"],"names":["FormFieldContext","createContext","withProvider","withContext","createSlotRecipeContext","FormFieldRootSlot","FormFieldLabelSlot","FormFieldInputSlot","FormFieldDescriptionSlot","FormFieldErrorSlot","FormFieldPopoverSlot","FormFieldRoot","forwardedRef","id","isInvalid","isRequired","isDisabled","isReadOnly","children","props","localRef","useRef","ref","useObjectRef","mergeRefs","context","setContext","useState","useFieldArgs","useMemo","args","labelProps","fieldProps","descriptionProps","errorMessageProps","useField","useEffect","prevContext","inputProps","contextValue","jsx","jsxs","DialogTrigger","Box","IconButton","HelpOutline","Popover","Dialog","ErrorOutline","FormFieldLabel","labelSlotProps","useContext","FormFieldInput","inputSlotProps","child","isValidElement","cloneElement","FormFieldDescription","descriptionSlotProps","FormFieldError","errorSlotProps","FormFieldInfoBox","FormField"],"mappings":"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"}

package/dist/chunks/form-field-BgYwFv45.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const t=require("react"),l=require("react/jsx-runtime"),k=require("@chakra-ui/react/styled-system"),R=require("./useField-BVQNiEG8.cjs.js"),w=require("./useObjectRef-mEu7QX6X.cjs.js"),z=require("./merge-refs-D8liJcZz.cjs.js"),x=require("./Dialog-3tr7frni.cjs.js"),E=require("@commercetools/nimbus-icons"),F=require("./box-CWni3A32.cjs.js"),D=require("./icon-button-BwxwVPZQ.cjs.js"),a=t.createContext({context:{label:null,description:null,error:null,info:null},setContext:()=>{},inputProps:{}}),{withProvider:V,withContext:p}=k.createSlotRecipeContext({key:"nimbusFormField"}),_=V("div","root"),A=p("div","label"),H=p("div","input"),J=p("div","description"),O=p("div","error"),W=p("div","popover"),m=function({ref:s,id:o,isInvalid:e,isRequired:i,isDisabled:u,isReadOnly:d,children:v,...y}){const B=t.useRef(null),g=w.$03e8ab2d84d7657a$export$4338b53315abf666(z.mergeRefs(B,s)),[r,P]=t.useState({label:null,description:null,error:null,info:null,isInvalid:e,isRequired:i,isDisabled:u,isReadOnly:d}),N=t.useMemo(()=>{const c={id:o,description:r.description,errorMessage:r.error};return r.label?c.label=r.label:(c["aria-label"]="empty-label",c["aria-labelledby"]="empty-label"),c},[o,r.description,r.error,r.label]),{labelProps:I,fieldProps:S,descriptionProps:M,errorMessageProps:q}=R.$191c9b6d48a0a4e2$export$294aa081a6c6f55d(N);t.useEffect(()=>{P(c=>({...c,isInvalid:e,isRequired:i,isDisabled:u,isReadOnly:d}))},[e,i,u,d]);const $=t.useMemo(()=>({...S,isInvalid:e,isRequired:i,isDisabled:u,isReadOnly:d}),[S,e,i,u,d]),L=t.useMemo(()=>({context:r,setContext:P,inputProps:$}),[r,$]);return l.jsx(a.Provider,{value:L,children:l.jsxs(_,{ref:g,...y,children:[r.label&&l.jsxs(A,{...r.labelSlotProps,children:[l.jsxs("label",{...I,"data-required":i,children:[r.label,i&&l.jsx("sup",{"aria-hidden":"true",children:"*"})]}),r.info&&l.jsxs(x.$f2ff30fde7b014be$export$2e1e1122cf0cba88,{children:[l.jsx(F.Box,{as:"span",display:"inline-block",position:"relative",width:"1ch",height:"1ch",ml:"200",children:l.jsx(F.Box,{as:"span",display:"inline-flex",position:"absolute",top:"50%",right:"50%",transform:"translate(50%, -50%)",children:l.jsx(D.IconButton,{"aria-label":"__MORE INFO",size:"2xs",colorPalette:"info",variant:"link",children:l.jsx(E.HelpOutline,{})})})}),l.jsx(x.$542a13ca2fa5b484$export$5b6b19405a83ff9d,{children:l.jsx(W,{asChild:!0,children:l.jsx(x.$f2ff30fde7b014be$export$3ddf2d174ce01153,{children:l.jsx(F.Box,{p:"300",children:r.info})})})})]})]}),r.description&&l.jsx(J,{...M,...r.descriptionSlotProps,children:r.description}),e&&r.error&&l.jsxs(O,{...q,...r.errorSlotProps,children:[l.jsx(F.Box,{as:E.ErrorOutline,display:"inline-flex",boxSize:"400",flexShrink:"0",mt:"50"}),r.error]}),v]})})};m.displayName="FormField.Root";const f=({children:n,...s})=>{const{setContext:o}=t.useContext(a);return t.useEffect(()=>(o(e=>({...e,label:n,labelSlotProps:s})),()=>{o(e=>({...e,label:null,labelSlotProps:void 0}))}),[n,o]),null};f.displayName="FormField.Label";const b=({children:n,...s})=>{const{inputProps:o}=t.useContext(a);return l.jsx(H,{...s,children:t.Children.map(n,e=>t.isValidElement(e)?t.cloneElement(e,o):e)})};b.displayName="FormField.Input";const h=({children:n,...s})=>{const{setContext:o}=t.useContext(a);return t.useEffect(()=>(o(e=>({...e,description:n,descriptionSlotProps:s})),()=>{o(e=>({...e,description:null,descriptionSlotProps:void 0}))}),[n,o]),null};h.displayName="FormField.Description";const j=({children:n,...s})=>{const{setContext:o}=t.useContext(a);return t.useEffect(()=>(o(e=>({...e,error:n,errorSlotProps:s})),()=>{o(e=>({...e,error:null,errorSlotProps:void 0}))}),[n,o]),null};j.displayName="FormField.Error";const C=({children:n})=>{const{setContext:s}=t.useContext(a);return t.useEffect(()=>(s(o=>({...o,info:n})),()=>{s(o=>({...o,info:null}))}),[n,s]),null};C.displayName="FormField.InfoBox";const G={Root:m,Label:f,Input:b,Description:h,Error:j,InfoBox:C};exports.FormField=G;exports.FormFieldDescription=h;exports.FormFieldError=j;exports.FormFieldInfoBox=C;exports.FormFieldInput=b;exports.FormFieldLabel=f;exports.FormFieldRoot=m;
+//# sourceMappingURL=form-field-BgYwFv45.cjs.js.map

package/dist/chunks/form-field-BgYwFv45.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-BgYwFv45.cjs.js","sources":["../../src/components/form-field/components/form-field.context.tsx","../../src/components/form-field/form-field.slots.tsx","../../src/components/form-field/components/form-field.root.tsx","../../src/components/form-field/components/form-field.label.tsx","../../src/components/form-field/components/form-field.input.tsx","../../src/components/form-field/components/form-field.description.tsx","../../src/components/form-field/components/form-field.error.tsx","../../src/components/form-field/components/form-field.info-box.tsx","../../src/components/form-field/form-field.tsx"],"sourcesContent":["import { createContext, type ReactNode } from \"react\";\nimport type {\n  FormFieldDescriptionSlotProps,\n  FormFieldErrorSlotProps,\n  FormFieldLabelSlotProps,\n} from \"../form-field.types\";\n\nexport type FormFieldInputProps = Record<string, unknown>;\n\nexport type FormFieldContextPayloadType = {\n  label: ReactNode;\n  labelSlotProps?: FormFieldLabelSlotProps;\n  description: ReactNode;\n  descriptionSlotProps?: FormFieldDescriptionSlotProps;\n  error: ReactNode;\n  errorSlotProps?: FormFieldErrorSlotProps;\n  info: ReactNode;\n  isInvalid?: boolean;\n  isRequired?: boolean;\n  isDisabled?: boolean;\n  isReadOnly?: boolean;\n};\n\nexport type FormFieldContextType = {\n  context: FormFieldContextPayloadType;\n  setContext: React.Dispatch<React.SetStateAction<FormFieldContextPayloadType>>;\n  inputProps: FormFieldInputProps;\n};\n\nexport const FormFieldContext = createContext<FormFieldContextType>({\n  context: {\n    label: null,\n    description: null,\n    error: null,\n    info: null,\n  },\n  setContext: () => {},\n  inputProps: {},\n});\n","import { createSlotRecipeContext } from \"@chakra-ui/react/styled-system\";\nimport type {\n  FormFieldRootSlotProps,\n  FormFieldLabelSlotProps,\n  FormFieldInputSlotProps,\n  FormFieldDescriptionSlotProps,\n  FormFieldErrorSlotProps,\n  FormFieldPopoverSlotProps,\n} from \"./form-field.types\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"nimbusFormField\",\n});\n\n// Root slot\nexport const FormFieldRootSlot = withProvider<\n  HTMLDivElement,\n  FormFieldRootSlotProps\n>(\"div\", \"root\");\n\n// Label Slot\nexport const FormFieldLabelSlot = withContext<\n  HTMLDivElement,\n  FormFieldLabelSlotProps\n>(\"div\", \"label\");\n\n// Input Slot\nexport const FormFieldInputSlot = withContext<\n  HTMLDivElement,\n  FormFieldInputSlotProps\n>(\"div\", \"input\");\n\n// Description Slot\nexport const FormFieldDescriptionSlot = withContext<\n  HTMLDivElement,\n  FormFieldDescriptionSlotProps\n>(\"div\", \"description\");\n\n// Error Slot\nexport const FormFieldErrorSlot = withContext<\n  HTMLDivElement,\n  FormFieldErrorSlotProps\n>(\"div\", \"error\");\n\n// Error Slot\nexport const FormFieldPopoverSlot = withContext<\n  HTMLDivElement,\n  FormFieldPopoverSlotProps\n>(\"div\", \"popover\");\n","import { useEffect, useMemo, useState, useRef } from \"react\";\nimport type { FormFieldProps } from \"../form-field.types\";\nimport { useField, useObjectRef } from \"react-aria\";\nimport { mergeRefs } from \"@/utils\";\nimport {\n  FormFieldContext,\n  type FormFieldContextPayloadType,\n} from \"./form-field.context\";\nimport {\n  FormFieldDescriptionSlot,\n  FormFieldErrorSlot,\n  FormFieldLabelSlot,\n  FormFieldPopoverSlot,\n  FormFieldRootSlot,\n} from \"../form-field.slots\";\nimport { Dialog, DialogTrigger, Popover } from \"react-aria-components\";\nimport { Box, IconButton } from \"@/components\";\nimport { ErrorOutline, HelpOutline } from \"@commercetools/nimbus-icons\";\n\n/**\n * # FormField.Root\n *\n * displays miscellaneous inputs in a FormField context\n *\n * @supportsStyleProps\n */\nexport const FormFieldRoot = function FormFieldRoot({\n  ref: forwardedRef,\n  id,\n  isInvalid,\n  isRequired,\n  isDisabled,\n  isReadOnly,\n  children,\n  ...props\n}: FormFieldProps) {\n  const localRef = useRef<HTMLDivElement>(null);\n  const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n  const [context, setContext] = useState<FormFieldContextPayloadType>({\n    label: null,\n    description: null,\n    error: null,\n    info: null,\n    isInvalid,\n    isRequired,\n    isDisabled,\n    isReadOnly,\n  });\n\n  const useFieldArgs: Parameters<typeof useField>[0] = useMemo(() => {\n    const args: Parameters<typeof useField>[0] = {\n      id,\n      description: context.description,\n      errorMessage: context.error,\n    };\n\n    if (context.label) {\n      args.label = context.label;\n    } else {\n      // Context will always start out null, so we need to stub out some aria attributes\n      // FIXME: This is a hack to get the form field to work, but it's not the best solution\n      // FIXME: We should find a better way to handle this by redesigning the FormField component's structure\n      args[\"aria-label\"] = \"empty-label\";\n      args[\"aria-labelledby\"] = \"empty-label\";\n    }\n\n    return args;\n  }, [id, context.description, context.error, context.label]);\n\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField(useFieldArgs);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      isInvalid,\n      isRequired,\n      isDisabled,\n      isReadOnly,\n    }));\n  }, [isInvalid, isRequired, isDisabled, isReadOnly]);\n\n  const inputProps = useMemo(\n    () => ({\n      ...fieldProps,\n      isInvalid,\n      isRequired,\n      isDisabled,\n      isReadOnly,\n    }),\n    [fieldProps, isInvalid, isRequired, isDisabled, isReadOnly]\n  );\n\n  const contextValue = useMemo(\n    () => ({ context, setContext, inputProps }),\n    [context, inputProps]\n  );\n\n  return (\n    <FormFieldContext.Provider value={contextValue}>\n      <FormFieldRootSlot ref={ref} {...props}>\n        {context.label && (\n          <FormFieldLabelSlot {...context.labelSlotProps}>\n            <label {...labelProps} data-required={isRequired}>\n              {context.label}\n              {isRequired && <sup aria-hidden=\"true\">*</sup>}\n            </label>\n            {context.info && (\n              <DialogTrigger>\n                <Box\n                  as=\"span\"\n                  display=\"inline-block\"\n                  position=\"relative\"\n                  width=\"1ch\"\n                  height=\"1ch\"\n                  ml=\"200\"\n                >\n                  <Box\n                    as=\"span\"\n                    display=\"inline-flex\"\n                    position=\"absolute\"\n                    top=\"50%\"\n                    right=\"50%\"\n                    transform=\"translate(50%, -50%)\"\n                  >\n                    <IconButton\n                      aria-label=\"__MORE INFO\"\n                      size=\"2xs\"\n                      colorPalette=\"info\"\n                      variant=\"link\"\n                    >\n                      <HelpOutline />\n                    </IconButton>\n                  </Box>\n                </Box>\n                <Popover>\n                  <FormFieldPopoverSlot asChild>\n                    <Dialog>\n                      <Box p=\"300\">{context.info}</Box>\n                    </Dialog>\n                  </FormFieldPopoverSlot>\n                </Popover>\n              </DialogTrigger>\n            )}\n          </FormFieldLabelSlot>\n        )}\n        {context.description && (\n          <FormFieldDescriptionSlot\n            {...descriptionProps}\n            {...context.descriptionSlotProps}\n          >\n            {context.description}\n          </FormFieldDescriptionSlot>\n        )}\n        {isInvalid && context.error && (\n          <FormFieldErrorSlot\n            {...errorMessageProps}\n            {...context.errorSlotProps}\n          >\n            <Box\n              as={ErrorOutline}\n              display=\"inline-flex\"\n              boxSize=\"400\"\n              flexShrink=\"0\"\n              mt=\"50\"\n            />\n            {context.error}\n          </FormFieldErrorSlot>\n        )}\n        {children}\n      </FormFieldRootSlot>\n    </FormFieldContext.Provider>\n  );\n};\n\nFormFieldRoot.displayName = \"FormField.Root\";\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldLabelSlotProps } from \"../form-field.types\";\n\n/**\n * FormField.Label - The label element for the form field\n *\n * @supportsStyleProps\n */\n// TODO: should this be wrapped in react-aria's `LabelContext` provider?, e.g. https://react-spectrum.adobe.com/react-aria/TextField.html#custom-children\nexport const FormFieldLabel = ({\n  children,\n  ...labelSlotProps\n}: FormFieldLabelSlotProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      label: children,\n      labelSlotProps,\n    }));\n\n    // Cleanup: clear label when component unmounts\n    return () => {\n      setContext((prevContext) => ({\n        ...prevContext,\n        label: null,\n        labelSlotProps: undefined,\n      }));\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, setContext]);\n\n  return null;\n};\n\nFormFieldLabel.displayName = \"FormField.Label\";\n","import { Children, cloneElement, isValidElement, useContext } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldInputSlotProps } from \"../form-field.types\";\nimport { FormFieldInputSlot } from \"../form-field.slots\";\n\n/**\n * FormField.Input - The input wrapper element for the form field\n *\n * Renders children directly (with injected field props) to avoid\n * the state-based indirection that causes cursor position issues\n * on controlled inputs.\n *\n * @supportsStyleProps\n */\nexport const FormFieldInput = ({\n  children,\n  ...inputSlotProps\n}: FormFieldInputSlotProps) => {\n  const { inputProps } = useContext(FormFieldContext);\n\n  return (\n    <FormFieldInputSlot {...inputSlotProps}>\n      {Children.map(children, (child) => {\n        if (isValidElement(child)) {\n          return cloneElement(child, inputProps);\n        }\n        return child;\n      })}\n    </FormFieldInputSlot>\n  );\n};\n\nFormFieldInput.displayName = \"FormField.Input\";\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldDescriptionSlotProps } from \"../form-field.types\";\n\n/**\n * FormField.Description - The description element for the form field\n *\n * @supportsStyleProps\n */\nexport const FormFieldDescription = ({\n  children,\n  ...descriptionSlotProps\n}: FormFieldDescriptionSlotProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      description: children,\n      descriptionSlotProps,\n    }));\n\n    // Cleanup: clear description when component unmounts\n    return () => {\n      setContext((prevContext) => ({\n        ...prevContext,\n        description: null,\n        descriptionSlotProps: undefined,\n      }));\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, setContext]);\n\n  return null;\n};\n\nFormFieldDescription.displayName = \"FormField.Description\";\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldErrorSlotProps } from \"../form-field.types\";\n\n/**\n * FormField.Error - The error message element for the form field\n *\n * @supportsStyleProps\n */\nexport const FormFieldError = ({\n  children,\n  ...errorSlotProps\n}: FormFieldErrorSlotProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      error: children,\n      errorSlotProps,\n    }));\n\n    // Cleanup: clear error when component unmounts\n    return () => {\n      setContext((prevContext) => ({\n        ...prevContext,\n        error: null,\n        errorSlotProps: undefined,\n      }));\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, setContext]);\n\n  return null;\n};\n\nFormFieldError.displayName = \"FormField.Error\";\n","import { useContext, useEffect, type ReactNode } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\n\ntype FormFieldInfoBoxProps = {\n  /**\n   * The content to display in the InfoBox\n   */\n  children: ReactNode;\n};\n\n/**\n * FormField.InfoBox - The info box popover content for the form field\n *\n * @supportsStyleProps\n */\nexport const FormFieldInfoBox = ({ children }: FormFieldInfoBoxProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      info: children,\n    }));\n\n    // Cleanup: clear info when component unmounts\n    return () => {\n      setContext((prevContext) => ({\n        ...prevContext,\n        info: null,\n      }));\n    };\n  }, [children, setContext]);\n\n  return null;\n};\n\nFormFieldInfoBox.displayName = \"FormField.InfoBox\";\n","import {\n  FormFieldRoot,\n  FormFieldLabel,\n  FormFieldInput,\n  FormFieldDescription,\n  FormFieldError,\n  FormFieldInfoBox,\n} from \"./components\";\n\nexport const FormField = {\n  /**\n   * # FormField.Root\n   *\n   * The root container for the form field that provides context and state management\n   * for all child components. Handles React Aria integration for accessibility,\n   * manages field state (required, invalid, disabled, readonly), and coordinates\n   * rendering of label, input, description, and error elements.\n   *\n   * @example\n   * ```tsx\n   * <FormField.Root isRequired isInvalid>\n   *   <FormField.Label>Username</FormField.Label>\n   *   <FormField.Input>\n   *     <TextInput />\n   *   </FormField.Input>\n   *   <FormField.Description>Enter your username</FormField.Description>\n   *   <FormField.Error>Username is required</FormField.Error>\n   * </FormField.Root>\n   * ```\n   */\n  Root: FormFieldRoot,\n\n  /**\n   * # FormField.Label\n   *\n   * The label element for the form field. Automatically associates with the input\n   * via React Aria and displays a required indicator when the field is required.\n   * Supports an optional info box trigger for additional field information.\n   *\n   * @example\n   * ```tsx\n   * <FormField.Root>\n   *   <FormField.Label>Email Address</FormField.Label>\n   *   <FormField.InfoBox>\n   *     Your email will be used for account notifications\n   *   </FormField.InfoBox>\n   *   <FormField.Input>\n   *     <TextInput />\n   *   </FormField.Input>\n   * </FormField.Root>\n   * ```\n   */\n  Label: FormFieldLabel,\n\n  /**\n   * # FormField.Input\n   *\n   * The input wrapper element that receives and displays the actual input component.\n   * Automatically clones children and passes accessibility props, validation state,\n   * and field attributes from React Aria.\n   *\n   * @example\n   * ```tsx\n   * <FormField.Root>\n   *   <FormField.Label>Password</FormField.Label>\n   *   <FormField.Input>\n   *     <PasswordInput />\n   *   </FormField.Input>\n   * </FormField.Root>\n   * ```\n   */\n  Input: FormFieldInput,\n\n  /**\n   * # FormField.Description\n   *\n   * The description element that provides helpful information about the field.\n   * Automatically associates with the input via `aria-describedby` for screen readers.\n   *\n   * @example\n   * ```tsx\n   * <FormField.Root>\n   *   <FormField.Label>Username</FormField.Label>\n   *   <FormField.Input>\n   *     <TextInput />\n   *   </FormField.Input>\n   *   <FormField.Description>\n   *     Must be 3-20 characters, letters and numbers only\n   *   </FormField.Description>\n   * </FormField.Root>\n   * ```\n   */\n  Description: FormFieldDescription,\n\n  /**\n   * # FormField.Error\n   *\n   * The error message element that displays validation errors. Only visible when\n   * the field is invalid. Automatically associates with the input via\n   * `aria-errormessage` and includes an error icon.\n   *\n   * @example\n   * ```tsx\n   * <FormField.Root isInvalid>\n   *   <FormField.Label>Email</FormField.Label>\n   *   <FormField.Input>\n   *     <TextInput />\n   *   </FormField.Input>\n   *   <FormField.Error>Please enter a valid email address</FormField.Error>\n   * </FormField.Root>\n   * ```\n   */\n  Error: FormFieldError,\n\n  /**\n   * # FormField.InfoBox\n   *\n   * The info box content that appears in a popover when the help icon next to\n   * the label is clicked. Use for additional context or instructions that don't\n   * need to be visible by default.\n   *\n   * @example\n   * ```tsx\n   * <FormField.Root>\n   *   <FormField.Label>API Key</FormField.Label>\n   *   <FormField.InfoBox>\n   *     Your API key can be found in your account settings.\n   *     Keep it secure and never share it publicly.\n   *   </FormField.InfoBox>\n   *   <FormField.Input>\n   *     <TextInput />\n   *   </FormField.Input>\n   * </FormField.Root>\n   * ```\n   */\n  InfoBox: FormFieldInfoBox,\n};\n\nexport {\n  FormFieldRoot as _FormFieldRoot,\n  FormFieldLabel as _FormFieldLabel,\n  FormFieldInput as _FormFieldInput,\n  FormFieldDescription as _FormFieldDescription,\n  FormFieldError as _FormFieldError,\n  FormFieldInfoBox as _FormFieldInfoBox,\n};\n"],"names":["FormFieldContext","createContext","withProvider","withContext","createSlotRecipeContext","FormFieldRootSlot","FormFieldLabelSlot","FormFieldInputSlot","FormFieldDescriptionSlot","FormFieldErrorSlot","FormFieldPopoverSlot","FormFieldRoot","forwardedRef","id","isInvalid","isRequired","isDisabled","isReadOnly","children","props","localRef","useRef","ref","useObjectRef","mergeRefs","context","setContext","useState","useFieldArgs","useMemo","args","labelProps","fieldProps","descriptionProps","errorMessageProps","useField","useEffect","prevContext","inputProps","contextValue","jsx","jsxs","DialogTrigger","Box","IconButton","HelpOutline","Popover","Dialog","ErrorOutline","FormFieldLabel","labelSlotProps","useContext","FormFieldInput","inputSlotProps","child","isValidElement","cloneElement","FormFieldDescription","descriptionSlotProps","FormFieldError","errorSlotProps","FormFieldInfoBox","FormField"],"mappings":"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"}