@yamada-ui/form-control/dist/chunk-UTKIIZMO.mjs

Yamada UI form control component

"use client"
import {
  ErrorMessage,
  FormControlContextProvider,
  FormControlStylesProvider,
  HelperMessage,
  RequiredIndicator,
  useFormControlContext,
  useFormControlStyles
} from "./chunk-6MABFBBX.mjs";

// src/fieldset.tsx
import {
  forwardRef,
  omitThemeProps,
  ui,
  useComponentMultiStyle
} from "@yamada-ui/core";
import { cx, dataAttr, findChild, getValidChildren } from "@yamada-ui/utils";
import { VisuallyHidden } from "@yamada-ui/visually-hidden";
import { useId, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var Fieldset = forwardRef(
  ({ id, ...props }, ref) => {
    const [styles, mergedProps] = useComponentMultiStyle("Fieldset", props);
    const uuid = useId();
    const {
      className,
      children,
      isDisabled = false,
      disabled = isDisabled,
      errorMessage,
      helperMessage,
      isInvalid = false,
      invalid = isInvalid,
      isReadOnly = false,
      isReplace = true,
      isRequired = false,
      legend,
      optionalIndicator,
      readOnly = isReadOnly,
      replace = isReplace,
      required = isRequired,
      requiredIndicator,
      errorMessageProps,
      helperMessageProps,
      legendProps,
      ...rest
    } = omitThemeProps(mergedProps);
    const [focused, setFocused] = useState(false);
    const validChildren = getValidChildren(children);
    const customLegend = findChild(validChildren, Legend);
    const customHelperMessage = findChild(validChildren, HelperMessage);
    const customErrorMessage = findChild(validChildren, ErrorMessage);
    const isCustomLegend = !!customLegend;
    const isCustomHelperMessage = !!customHelperMessage;
    const isCustomErrorMessage = !!customErrorMessage;
    const css = { ...styles.container };
    id != null ? id : id = uuid;
    return /* @__PURE__ */ jsx(
      FormControlContextProvider,
      {
        value: {
          disabled,
          focused,
          invalid,
          readOnly,
          replace,
          required,
          onBlur: () => setFocused(false),
          onFocus: () => setFocused(true)
        },
        children: /* @__PURE__ */ jsx(FormControlStylesProvider, { value: styles, children: /* @__PURE__ */ jsxs(
          ui.fieldset,
          {
            ref,
            className: cx("ui-fieldset", className),
            "data-disabled": dataAttr(disabled),
            "data-focus": dataAttr(focused),
            "data-invalid": dataAttr(invalid),
            "data-readonly": dataAttr(readOnly),
            disabled,
            __css: css,
            ...rest,
            children: [
              !isCustomLegend && legend ? /* @__PURE__ */ jsxs(
                Legend,
                {
                  optionalIndicator,
                  requiredIndicator,
                  ...legendProps,
                  children: [
                    legend,
                    (!replace || !invalid) && helperMessage ? /* @__PURE__ */ jsx(VisuallyHidden, { children: helperMessage }) : null,
                    invalid && errorMessage ? /* @__PURE__ */ jsx(VisuallyHidden, { children: errorMessage }) : null
                  ]
                }
              ) : null,
              children,
              !isCustomHelperMessage && helperMessage ? /* @__PURE__ */ jsx(HelperMessage, { ...helperMessageProps, children: helperMessage }) : null,
              !isCustomErrorMessage && errorMessage ? /* @__PURE__ */ jsx(ErrorMessage, { ...errorMessageProps, children: errorMessage }) : null
            ]
          }
        ) })
      }
    );
  }
);
Fieldset.displayName = "Fieldset";
Fieldset.__ui__ = "Fieldset";
var Legend = forwardRef(
  ({
    className,
    children,
    isRequired,
    optionalIndicator = null,
    required: requiredProp = isRequired,
    requiredIndicator = null,
    ...rest
  }, ref) => {
    var _a, _b;
    const { disabled, focused, invalid, readOnly, required } = (_a = useFormControlContext()) != null ? _a : {};
    const styles = (_b = useFormControlStyles()) != null ? _b : {};
    const css = { ...styles.legend };
    requiredProp != null ? requiredProp : requiredProp = required;
    return /* @__PURE__ */ jsxs(
      ui.legend,
      {
        ref,
        className: cx("ui-fieldset__legend", className),
        "data-disabled": dataAttr(disabled),
        "data-focus": dataAttr(focused),
        "data-invalid": dataAttr(invalid),
        "data-readonly": dataAttr(readOnly),
        __css: css,
        ...rest,
        children: [
          children,
          requiredProp ? requiredIndicator ? /* @__PURE__ */ jsx(RequiredIndicator, { children: requiredIndicator }) : /* @__PURE__ */ jsx(RequiredIndicator, {}) : optionalIndicator
        ]
      }
    );
  }
);
Legend.displayName = "Legend";
Legend.__ui__ = "Legend";

export {
  Fieldset,
  Legend
};
//# sourceMappingURL=chunk-UTKIIZMO.mjs.map