@yamada-ui/form-control - npm Package Compare versions

Comparing version 2.1.11-dev-20241212094045 to 2.1.11-dev-20241212095817

dist/fieldset.d.ts

@@ -9,2 +9,8 @@ import * as _yamada_ui_core from '@yamada-ui/core';
     /**
+     * If `true`, the fieldset will be disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
      * The fieldset error message to use.
@@ -18,5 +24,13 @@ */
     /**
+     * If `true`, the fieldset will be invalid.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /**
      * If `true`, the fieldset will be disabled.
      *
      * @default false
+     *
+     * @deprecated Use `disabled` instead.
      */
@@ -28,2 +42,4 @@ isDisabled?: boolean;
      * @default false
+     *
+     * @deprecated Use `invalid` instead.
      */
@@ -35,2 +51,4 @@ isInvalid?: boolean;
      * @default false
+     *
+     * @deprecated Use `readOnly` instead.
      */
@@ -42,2 +60,4 @@ isReadOnly?: boolean;
      * @default true
+     *
+     * @deprecated Use `replace` instead.
      */
@@ -49,2 +69,4 @@ isReplace?: boolean;
      * @default false
+     *
+     * @deprecated Use `required` instead.
      */
@@ -57,2 +79,20 @@ isRequired?: boolean;
     /**
+     * If `true`, the fieldset will be readonly.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * If `true`, switch between helper message and error message using isInvalid.
+     *
+     * @default true
+     */
+    replace?: boolean;
+    /**
+     * If `true`, the fieldset will be required.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
      * Props the error message component.
@@ -79,4 +119,8 @@ */
 interface LegendOptions {
+    /**
+     * @deprecated Use `required` instead.
+     */
     isRequired?: boolean;
     optionalIndicator?: ReactNode;
+    required?: boolean;
     requiredIndicator?: ReactNode;
@@ -83,0 +127,0 @@ }

dist/fieldset.js

@@ -49,7 +49,9 @@ "use client"
     const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("FormControl", props);
-    const {
+    let {
       className,
       children,
+      disabled,
       errorMessage,
       helperMessage,
+      invalid,
       isDisabled = false,
@@ -62,2 +64,5 @@ isInvalid = false,
       optionalIndicator,
+      readOnly,
+      replace,
+      required,
       requiredIndicator,
@@ -72,3 +77,8 @@ errorMessageProps,
     id != null ? id : id = uuid;
-    const [isFocused, setFocused] = (0, import_react.useState)(false);
+    disabled != null ? disabled : disabled = isDisabled;
+    invalid != null ? invalid : invalid = isInvalid;
+    readOnly != null ? readOnly : readOnly = isReadOnly;
+    replace != null ? replace : replace = isReplace;
+    required != null ? required : required = isRequired;
+    const [focused, setFocused] = (0, import_react.useState)(false);
     const validChildren = (0, import_utils.getValidChildren)(children);
@@ -87,9 +97,9 @@ const customLabel = (0, import_utils.findChild)(validChildren, Label);
           id,
-          isDisabled,
-          isFocused,
-          isInvalid,
-          isReadOnly,
-          isReplace,
-          isRequired,
+          disabled,
+          focused,
+          invalid,
           labelId,
+          readOnly,
+          replace,
+          required,
           onBlur: () => setFocused(false),
@@ -103,6 +113,6 @@ onFocus: () => setFocused(true)
             className: (0, import_utils.cx)("ui-form__control", className),
-            "data-disabled": (0, import_utils.dataAttr)(isDisabled),
-            "data-focus": (0, import_utils.dataAttr)(isFocused),
-            "data-invalid": (0, import_utils.dataAttr)(isInvalid),
-            "data-readonly": (0, import_utils.dataAttr)(isReadOnly),
+            "data-disabled": (0, import_utils.dataAttr)(disabled),
+            "data-focus": (0, import_utils.dataAttr)(focused),
+            "data-invalid": (0, import_utils.dataAttr)(invalid),
+            "data-readonly": (0, import_utils.dataAttr)(readOnly),
             __css: css,
@@ -146,15 +156,15 @@ ...rest,
       id: formControlId,
-      isDisabled,
-      isFocused,
-      isInvalid,
-      isReadOnly,
-      isRequired,
-      labelId
+      disabled,
+      focused,
+      invalid,
+      labelId,
+      readOnly,
+      required
     } = (_a = useFormControlContext()) != null ? _a : {};
     const styles = (_b = useFormControlStyles()) != null ? _b : {};
     idProp != null ? idProp : idProp = labelId;
-    isRequiredProp != null ? isRequiredProp : isRequiredProp = isRequired;
+    isRequiredProp != null ? isRequiredProp : isRequiredProp = required;
     const css = {
       display: "block",
-      pointerEvents: isReadOnly ? "none" : void 0,
+      pointerEvents: readOnly ? "none" : void 0,
       ...styles.label
@@ -169,7 +179,7 @@ };
         className: (0, import_utils.cx)("ui-form__label", className),
-        style: { cursor: isDisabled ? "not-allowed" : void 0 },
-        "data-disabled": (0, import_utils.dataAttr)(isDisabled),
-        "data-focus": (0, import_utils.dataAttr)(isFocused),
-        "data-invalid": (0, import_utils.dataAttr)(isInvalid),
-        "data-readonly": (0, import_utils.dataAttr)(isReadOnly),
+        style: { cursor: disabled ? "not-allowed" : void 0 },
+        "data-disabled": (0, import_utils.dataAttr)(disabled),
+        "data-focus": (0, import_utils.dataAttr)(focused),
+        "data-invalid": (0, import_utils.dataAttr)(invalid),
+        "data-readonly": (0, import_utils.dataAttr)(readOnly),
         __css: css,
@@ -211,5 +221,5 @@ ...rest,
     var _a, _b;
-    const { id, isInvalid, isReplace } = (_a = useFormControlContext()) != null ? _a : {};
+    const { id, invalid, replace } = (_a = useFormControlContext()) != null ? _a : {};
     const styles = (_b = useFormControlStyles()) != null ? _b : {};
-    if (isReplace && isInvalid) return null;
+    if (replace && invalid) return null;
     const css = { ...styles.helperMessage };
@@ -233,5 +243,5 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     var _a, _b;
-    const { isInvalid } = (_a = useFormControlContext()) != null ? _a : {};
+    const { invalid } = (_a = useFormControlContext()) != null ? _a : {};
     const styles = (_b = useFormControlStyles()) != null ? _b : {};
-    if (!isInvalid) return null;
+    if (!invalid) return null;
     const css = { ...styles.errorMessage };
@@ -258,7 +268,9 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("Fieldset", props);
-    const {
+    let {
       className,
       children,
+      disabled,
       errorMessage,
       helperMessage,
+      invalid,
       isDisabled = false,
@@ -271,2 +283,5 @@ isInvalid = false,
       optionalIndicator,
+      readOnly,
+      replace,
+      required,
       requiredIndicator,
@@ -280,3 +295,8 @@ errorMessageProps,
     id != null ? id : id = uuid;
-    const [isFocused, setFocused] = (0, import_react2.useState)(false);
+    disabled != null ? disabled : disabled = isDisabled;
+    invalid != null ? invalid : invalid = isInvalid;
+    readOnly != null ? readOnly : readOnly = isReadOnly;
+    replace != null ? replace : replace = isReplace;
+    required != null ? required : required = isRequired;
+    const [focused, setFocused] = (0, import_react2.useState)(false);
     const validChildren = (0, import_utils2.getValidChildren)(children);
@@ -294,8 +314,8 @@ const customLegend = (0, import_utils2.findChild)(validChildren, Legend);
         value: {
-          isDisabled,
-          isFocused,
-          isInvalid,
-          isReadOnly,
-          isReplace,
-          isRequired,
+          disabled,
+          focused,
+          invalid,
+          readOnly,
+          replace,
+          required,
           onBlur: () => setFocused(false),
@@ -309,7 +329,7 @@ onFocus: () => setFocused(true)
             className: (0, import_utils2.cx)("ui-fieldset", className),
-            "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
-            "data-focus": (0, import_utils2.dataAttr)(isFocused),
-            "data-invalid": (0, import_utils2.dataAttr)(isInvalid),
-            "data-readonly": (0, import_utils2.dataAttr)(isReadOnly),
-            disabled: isDisabled,
+            "data-disabled": (0, import_utils2.dataAttr)(disabled),
+            "data-focus": (0, import_utils2.dataAttr)(focused),
+            "data-invalid": (0, import_utils2.dataAttr)(invalid),
+            "data-readonly": (0, import_utils2.dataAttr)(readOnly),
+            disabled,
             __css: css,
@@ -326,4 +346,4 @@ ...rest,
                     legend,
-                    (!isReplace || !isInvalid) && helperMessage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_visually_hidden.VisuallyHidden, { children: helperMessage }) : null,
-                    isInvalid && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_visually_hidden.VisuallyHidden, { children: errorMessage }) : null
+                    (!replace || !invalid) && helperMessage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_visually_hidden.VisuallyHidden, { children: helperMessage }) : null,
+                    invalid && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_visually_hidden.VisuallyHidden, { children: errorMessage }) : null
                   ]
@@ -350,2 +370,3 @@ }
     optionalIndicator = null,
+    required: requiredProp,
     requiredIndicator = null,
@@ -355,5 +376,5 @@ ...rest
     var _a, _b;
-    const { isDisabled, isFocused, isInvalid, isReadOnly, isRequired } = (_a = useFormControlContext()) != null ? _a : {};
+    const { disabled, focused, invalid, readOnly, required } = (_a = useFormControlContext()) != null ? _a : {};
     const styles = (_b = useFormControlStyles()) != null ? _b : {};
-    isRequiredProp != null ? isRequiredProp : isRequiredProp = isRequired;
+    requiredProp != null ? requiredProp : requiredProp = isRequiredProp != null ? isRequiredProp : required;
     const css = { ...styles.legend };
@@ -365,6 +386,6 @@ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         className: (0, import_utils2.cx)("ui-fieldset__legend", className),
-        "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
-        "data-focus": (0, import_utils2.dataAttr)(isFocused),
-        "data-invalid": (0, import_utils2.dataAttr)(isInvalid),
-        "data-readonly": (0, import_utils2.dataAttr)(isReadOnly),
+        "data-disabled": (0, import_utils2.dataAttr)(disabled),
+        "data-focus": (0, import_utils2.dataAttr)(focused),
+        "data-invalid": (0, import_utils2.dataAttr)(invalid),
+        "data-readonly": (0, import_utils2.dataAttr)(readOnly),
         __css: css,
@@ -374,3 +395,3 @@ ...rest,
           children,
-          isRequiredProp ? requiredIndicator ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RequiredIndicator, { children: requiredIndicator }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RequiredIndicator, {}) : optionalIndicator
+          requiredProp ? requiredIndicator ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RequiredIndicator, { children: requiredIndicator }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RequiredIndicator, {}) : optionalIndicator
         ]
@@ -377,0 +398,0 @@ }

dist/form-control.d.ts

@@ -13,2 +13,16 @@ import * as _yamada_ui_core from '@yamada-ui/core';
      */
+    disabled?: boolean;
+    /**
+     * If `true`, the form control will be invalid.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * If `true`, the form control will be disabled.
+     *
+     * @default false
+     *
+     * @deprecated Use `disabled` instead.
+     */
     isDisabled?: boolean;
@@ -19,2 +33,4 @@ /**
      * @default false
+     *
+     * @deprecated Use `invalid` instead.
      */
@@ -26,2 +42,4 @@ isInvalid?: boolean;
      * @default false
+     *
+     * @deprecated Use `readOnly` instead.
      */
@@ -33,4 +51,18 @@ isReadOnly?: boolean;
      * @default false
+     *
+     * @deprecated Use `required` instead.
      */
     isRequired?: boolean;
+    /**
+     * If `true`, the form control will be readonly.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * If `true`, the form control will be required.
+     *
+     * @default false
+     */
+    required?: boolean;
 }
@@ -50,2 +82,4 @@ interface FormControlAdditionalOptions extends LabelOptions {
      * @default true
+     *
+     * @deprecated Use `replace` instead.
      */
@@ -58,2 +92,8 @@ isReplace?: boolean;
     /**
+     * If `true`, switch between helper message and error message using isInvalid.
+     *
+     * @default true
+     */
+    replace?: boolean;
+    /**
      * Props the error message component.
@@ -74,8 +114,8 @@ */
 interface FormControlContext {
-    isDisabled: boolean;
-    isFocused: boolean;
-    isInvalid: boolean;
-    isReadOnly: boolean;
-    isReplace: boolean;
-    isRequired: boolean;
+    disabled: boolean;
+    focused: boolean;
+    invalid: boolean;
+    readOnly: boolean;
+    replace: boolean;
+    required: boolean;
     onBlur: () => void;
@@ -105,10 +145,26 @@ onFocus: () => void;
 }
-declare const useFormControl: <Y extends Dict = Dict<any>>({ id: idProp, disabled, isDisabled: isDisabledProp, isInvalid: isInvalidProp, isReadOnly: isReadOnlyProp, isRequired: isRequiredProp, readOnly, required, ...rest }: UseFormControlOptions & Y) => {
+declare const useFormControl: <Y extends Dict = Dict<any>>({ id: idProp, disabled: disabledProp, invalid: invalidProp, isDisabled: isDisabledProp, isInvalid: isInvalidProp, isReadOnly: isReadOnlyProp, isRequired: isRequiredProp, readOnly: readOnlyProp, required: requiredProp, ...rest }: UseFormControlOptions & Y) => {
     id: string | undefined;
+    disabled: boolean | undefined;
+    invalid: boolean | undefined;
+    /**
+     * @deprecated Use `disabled` instead.
+     */
     isDisabled: boolean | undefined;
+    /**
+     * @deprecated Use `invalid` instead.
+     */
     isInvalid: boolean | undefined;
+    /**
+     * @deprecated Use `readOnly` instead.
+     */
     isReadOnly: boolean | undefined;
+    /**
+     * @deprecated Use `required` instead.
+     */
     isRequired: boolean | undefined;
     labelId: string | undefined;
-} & Omit<UseFormControlOptions & Y, "disabled" | "id" | "isRequired" | "isDisabled" | "isInvalid" | "isReadOnly" | "readOnly" | "required">;
+    readOnly: boolean | undefined;
+    required: boolean | undefined;
+} & Omit<UseFormControlOptions & Y, "disabled" | "id" | "isRequired" | "required" | "invalid" | "isDisabled" | "isInvalid" | "isReadOnly" | "readOnly">;
 interface UseFormControlProps<Y extends HTMLElement> extends FormControlOptions {
@@ -122,3 +178,3 @@ id?: string;
 }
-declare const useFormControlProps: <Y extends HTMLElement, M extends Dict>({ id, disabled, isDisabled, isInvalid, isReadOnly, isRequired, readOnly, required, onBlur, onFocus, ...rest }: M & UseFormControlProps<Y>) => {
+declare const useFormControlProps: <Y extends HTMLElement, M extends Dict>({ id, disabled, invalid, isDisabled, isInvalid, isReadOnly, isRequired, readOnly, required, onBlur, onFocus, ...rest }: M & UseFormControlProps<Y>) => {
     _active?: {} | undefined;
@@ -140,3 +196,3 @@ _focus?: {} | undefined;
     onFocus: (event: react.FocusEvent<Y, Element>) => void;
-} & Omit<M & UseFormControlProps<Y>, "disabled" | "id" | "onFocus" | "onBlur" | "isRequired" | "isDisabled" | "isInvalid" | "isReadOnly" | "readOnly" | "required">;
+} & Omit<M & UseFormControlProps<Y>, "disabled" | "id" | "onFocus" | "onBlur" | "isRequired" | "required" | "invalid" | "isDisabled" | "isInvalid" | "isReadOnly" | "readOnly">;
 type FormControlProperty = (typeof formControlProperties)[number];
@@ -147,3 +203,3 @@ declare const formControlProperties: readonly ["disabled", "required", "readOnly", "aria-disabled", "aria-readonly", "aria-required", "aria-invalid", "data-readonly", "onFocus", "onBlur", "_hover", "_active", "_focus", "_invalid", "_focusVisible"];
     pick?: FormControlProperty[];
-}) => ("_active" | "_focus" | "_focusVisible" | "_hover" | "_invalid" | "disabled" | "aria-disabled" | "aria-invalid" | "aria-readonly" | "aria-required" | "onFocus" | "onBlur" | "data-readonly" | "readOnly" | "required")[];
+}) => ("_active" | "_focus" | "_focusVisible" | "_hover" | "_invalid" | "disabled" | "aria-disabled" | "aria-invalid" | "aria-readonly" | "aria-required" | "onFocus" | "onBlur" | "required" | "readOnly" | "data-readonly")[];
 interface LabelOptions {
@@ -150,0 +206,0 @@ isRequired?: boolean;

dist/form-control.js

@@ -54,7 +54,9 @@ "use client"
     const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("FormControl", props);
-    const {
+    let {
       className,
       children,
+      disabled,
       errorMessage,
       helperMessage,
+      invalid,
       isDisabled = false,
@@ -67,2 +69,5 @@ isInvalid = false,
       optionalIndicator,
+      readOnly,
+      replace,
+      required,
       requiredIndicator,
@@ -77,3 +82,8 @@ errorMessageProps,
     id != null ? id : id = uuid;
-    const [isFocused, setFocused] = (0, import_react.useState)(false);
+    disabled != null ? disabled : disabled = isDisabled;
+    invalid != null ? invalid : invalid = isInvalid;
+    readOnly != null ? readOnly : readOnly = isReadOnly;
+    replace != null ? replace : replace = isReplace;
+    required != null ? required : required = isRequired;
+    const [focused, setFocused] = (0, import_react.useState)(false);
     const validChildren = (0, import_utils.getValidChildren)(children);
@@ -92,9 +102,9 @@ const customLabel = (0, import_utils.findChild)(validChildren, Label);
           id,
-          isDisabled,
-          isFocused,
-          isInvalid,
-          isReadOnly,
-          isReplace,
-          isRequired,
+          disabled,
+          focused,
+          invalid,
           labelId,
+          readOnly,
+          replace,
+          required,
           onBlur: () => setFocused(false),
@@ -108,6 +118,6 @@ onFocus: () => setFocused(true)
             className: (0, import_utils.cx)("ui-form__control", className),
-            "data-disabled": (0, import_utils.dataAttr)(isDisabled),
-            "data-focus": (0, import_utils.dataAttr)(isFocused),
-            "data-invalid": (0, import_utils.dataAttr)(isInvalid),
-            "data-readonly": (0, import_utils.dataAttr)(isReadOnly),
+            "data-disabled": (0, import_utils.dataAttr)(disabled),
+            "data-focus": (0, import_utils.dataAttr)(focused),
+            "data-invalid": (0, import_utils.dataAttr)(invalid),
+            "data-readonly": (0, import_utils.dataAttr)(readOnly),
             __css: css,
@@ -139,3 +149,4 @@ ...rest,
   id: idProp,
-  disabled,
+  disabled: disabledProp,
+  invalid: invalidProp,
   isDisabled: isDisabledProp,
@@ -145,21 +156,37 @@ isInvalid: isInvalidProp,
   isRequired: isRequiredProp,
-  readOnly,
-  required,
+  readOnly: readOnlyProp,
+  required: requiredProp,
   ...rest
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const control = useFormControlContext();
   const id = idProp != null ? idProp : control == null ? void 0 : control.id;
   const labelId = control == null ? void 0 : control.labelId;
-  const isDisabled = (_a = disabled != null ? disabled : isDisabledProp) != null ? _a : control == null ? void 0 : control.isDisabled;
-  const isReadOnly = (_b = readOnly != null ? readOnly : isReadOnlyProp) != null ? _b : control == null ? void 0 : control.isReadOnly;
-  const isRequired = (_c = required != null ? required : isRequiredProp) != null ? _c : control == null ? void 0 : control.isRequired;
-  const isInvalid = isInvalidProp != null ? isInvalidProp : control == null ? void 0 : control.isInvalid;
+  const disabled = (_a = disabledProp != null ? disabledProp : isDisabledProp) != null ? _a : control == null ? void 0 : control.disabled;
+  const readOnly = (_b = readOnlyProp != null ? readOnlyProp : isReadOnlyProp) != null ? _b : control == null ? void 0 : control.readOnly;
+  const required = (_c = requiredProp != null ? requiredProp : isRequiredProp) != null ? _c : control == null ? void 0 : control.required;
+  const invalid = (_d = invalidProp != null ? invalidProp : isInvalidProp) != null ? _d : control == null ? void 0 : control.invalid;
   return {
     id,
-    isDisabled,
-    isInvalid,
-    isReadOnly,
-    isRequired,
+    disabled,
+    invalid,
+    /**
+     * @deprecated Use `disabled` instead.
+     */
+    isDisabled: disabled,
+    /**
+     * @deprecated Use `invalid` instead.
+     */
+    isInvalid: invalid,
+    /**
+     * @deprecated Use `readOnly` instead.
+     */
+    isReadOnly: readOnly,
+    /**
+     * @deprecated Use `required` instead.
+     */
+    isRequired: required,
     labelId,
+    readOnly,
+    required,
     ...rest
@@ -171,2 +198,3 @@ };
   disabled,
+  invalid,
   isDisabled,
@@ -183,10 +211,10 @@ isInvalid,
   const control = useFormControlContext();
-  disabled != null ? disabled : disabled = isDisabled != null ? isDisabled : control == null ? void 0 : control.isDisabled;
-  required != null ? required : required = isRequired != null ? isRequired : control == null ? void 0 : control.isRequired;
-  readOnly != null ? readOnly : readOnly = isReadOnly != null ? isReadOnly : control == null ? void 0 : control.isReadOnly;
-  isInvalid != null ? isInvalid : isInvalid = control == null ? void 0 : control.isInvalid;
+  disabled != null ? disabled : disabled = isDisabled != null ? isDisabled : control == null ? void 0 : control.disabled;
+  required != null ? required : required = isRequired != null ? isRequired : control == null ? void 0 : control.required;
+  readOnly != null ? readOnly : readOnly = isReadOnly != null ? isReadOnly : control == null ? void 0 : control.readOnly;
+  invalid != null ? invalid : invalid = isInvalid != null ? isInvalid : control == null ? void 0 : control.invalid;
   return {
     id: id != null ? id : control == null ? void 0 : control.id,
     "aria-disabled": (0, import_utils.ariaAttr)(disabled),
-    "aria-invalid": (0, import_utils.ariaAttr)(isInvalid),
+    "aria-invalid": (0, import_utils.ariaAttr)(invalid),
     "aria-readonly": (0, import_utils.ariaAttr)(readOnly),
@@ -254,15 +282,15 @@ "aria-required": (0, import_utils.ariaAttr)(required),
       id: formControlId,
-      isDisabled,
-      isFocused,
-      isInvalid,
-      isReadOnly,
-      isRequired,
-      labelId
+      disabled,
+      focused,
+      invalid,
+      labelId,
+      readOnly,
+      required
     } = (_a = useFormControlContext()) != null ? _a : {};
     const styles = (_b = useFormControlStyles()) != null ? _b : {};
     idProp != null ? idProp : idProp = labelId;
-    isRequiredProp != null ? isRequiredProp : isRequiredProp = isRequired;
+    isRequiredProp != null ? isRequiredProp : isRequiredProp = required;
     const css = {
       display: "block",
-      pointerEvents: isReadOnly ? "none" : void 0,
+      pointerEvents: readOnly ? "none" : void 0,
       ...styles.label
@@ -277,7 +305,7 @@ };
         className: (0, import_utils.cx)("ui-form__label", className),
-        style: { cursor: isDisabled ? "not-allowed" : void 0 },
-        "data-disabled": (0, import_utils.dataAttr)(isDisabled),
-        "data-focus": (0, import_utils.dataAttr)(isFocused),
-        "data-invalid": (0, import_utils.dataAttr)(isInvalid),
-        "data-readonly": (0, import_utils.dataAttr)(isReadOnly),
+        style: { cursor: disabled ? "not-allowed" : void 0 },
+        "data-disabled": (0, import_utils.dataAttr)(disabled),
+        "data-focus": (0, import_utils.dataAttr)(focused),
+        "data-invalid": (0, import_utils.dataAttr)(invalid),
+        "data-readonly": (0, import_utils.dataAttr)(readOnly),
         __css: css,
@@ -319,5 +347,5 @@ ...rest,
     var _a, _b;
-    const { id, isInvalid, isReplace } = (_a = useFormControlContext()) != null ? _a : {};
+    const { id, invalid, replace } = (_a = useFormControlContext()) != null ? _a : {};
     const styles = (_b = useFormControlStyles()) != null ? _b : {};
-    if (isReplace && isInvalid) return null;
+    if (replace && invalid) return null;
     const css = { ...styles.helperMessage };
@@ -341,5 +369,5 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     var _a, _b;
-    const { isInvalid } = (_a = useFormControlContext()) != null ? _a : {};
+    const { invalid } = (_a = useFormControlContext()) != null ? _a : {};
     const styles = (_b = useFormControlStyles()) != null ? _b : {};
-    if (!isInvalid) return null;
+    if (!invalid) return null;
     const css = { ...styles.errorMessage };
@@ -346,0 +374,0 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

dist/index.js

@@ -59,7 +59,9 @@ "use client"
     const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("FormControl", props);
-    const {
+    let {
       className,
       children,
+      disabled,
       errorMessage,
       helperMessage,
+      invalid,
       isDisabled = false,
@@ -72,2 +74,5 @@ isInvalid = false,
       optionalIndicator,
+      readOnly,
+      replace,
+      required,
       requiredIndicator,
@@ -82,3 +87,8 @@ errorMessageProps,
     id != null ? id : id = uuid;
-    const [isFocused, setFocused] = (0, import_react.useState)(false);
+    disabled != null ? disabled : disabled = isDisabled;
+    invalid != null ? invalid : invalid = isInvalid;
+    readOnly != null ? readOnly : readOnly = isReadOnly;
+    replace != null ? replace : replace = isReplace;
+    required != null ? required : required = isRequired;
+    const [focused, setFocused] = (0, import_react.useState)(false);
     const validChildren = (0, import_utils.getValidChildren)(children);
@@ -97,9 +107,9 @@ const customLabel = (0, import_utils.findChild)(validChildren, Label);
           id,
-          isDisabled,
-          isFocused,
-          isInvalid,
-          isReadOnly,
-          isReplace,
-          isRequired,
+          disabled,
+          focused,
+          invalid,
           labelId,
+          readOnly,
+          replace,
+          required,
           onBlur: () => setFocused(false),
@@ -113,6 +123,6 @@ onFocus: () => setFocused(true)
             className: (0, import_utils.cx)("ui-form__control", className),
-            "data-disabled": (0, import_utils.dataAttr)(isDisabled),
-            "data-focus": (0, import_utils.dataAttr)(isFocused),
-            "data-invalid": (0, import_utils.dataAttr)(isInvalid),
-            "data-readonly": (0, import_utils.dataAttr)(isReadOnly),
+            "data-disabled": (0, import_utils.dataAttr)(disabled),
+            "data-focus": (0, import_utils.dataAttr)(focused),
+            "data-invalid": (0, import_utils.dataAttr)(invalid),
+            "data-readonly": (0, import_utils.dataAttr)(readOnly),
             __css: css,
@@ -144,3 +154,4 @@ ...rest,
   id: idProp,
-  disabled,
+  disabled: disabledProp,
+  invalid: invalidProp,
   isDisabled: isDisabledProp,
@@ -150,21 +161,37 @@ isInvalid: isInvalidProp,
   isRequired: isRequiredProp,
-  readOnly,
-  required,
+  readOnly: readOnlyProp,
+  required: requiredProp,
   ...rest
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const control = useFormControlContext();
   const id = idProp != null ? idProp : control == null ? void 0 : control.id;
   const labelId = control == null ? void 0 : control.labelId;
-  const isDisabled = (_a = disabled != null ? disabled : isDisabledProp) != null ? _a : control == null ? void 0 : control.isDisabled;
-  const isReadOnly = (_b = readOnly != null ? readOnly : isReadOnlyProp) != null ? _b : control == null ? void 0 : control.isReadOnly;
-  const isRequired = (_c = required != null ? required : isRequiredProp) != null ? _c : control == null ? void 0 : control.isRequired;
-  const isInvalid = isInvalidProp != null ? isInvalidProp : control == null ? void 0 : control.isInvalid;
+  const disabled = (_a = disabledProp != null ? disabledProp : isDisabledProp) != null ? _a : control == null ? void 0 : control.disabled;
+  const readOnly = (_b = readOnlyProp != null ? readOnlyProp : isReadOnlyProp) != null ? _b : control == null ? void 0 : control.readOnly;
+  const required = (_c = requiredProp != null ? requiredProp : isRequiredProp) != null ? _c : control == null ? void 0 : control.required;
+  const invalid = (_d = invalidProp != null ? invalidProp : isInvalidProp) != null ? _d : control == null ? void 0 : control.invalid;
   return {
     id,
-    isDisabled,
-    isInvalid,
-    isReadOnly,
-    isRequired,
+    disabled,
+    invalid,
+    /**
+     * @deprecated Use `disabled` instead.
+     */
+    isDisabled: disabled,
+    /**
+     * @deprecated Use `invalid` instead.
+     */
+    isInvalid: invalid,
+    /**
+     * @deprecated Use `readOnly` instead.
+     */
+    isReadOnly: readOnly,
+    /**
+     * @deprecated Use `required` instead.
+     */
+    isRequired: required,
     labelId,
+    readOnly,
+    required,
     ...rest
@@ -176,2 +203,3 @@ };
   disabled,
+  invalid,
   isDisabled,
@@ -188,10 +216,10 @@ isInvalid,
   const control = useFormControlContext();
-  disabled != null ? disabled : disabled = isDisabled != null ? isDisabled : control == null ? void 0 : control.isDisabled;
-  required != null ? required : required = isRequired != null ? isRequired : control == null ? void 0 : control.isRequired;
-  readOnly != null ? readOnly : readOnly = isReadOnly != null ? isReadOnly : control == null ? void 0 : control.isReadOnly;
-  isInvalid != null ? isInvalid : isInvalid = control == null ? void 0 : control.isInvalid;
+  disabled != null ? disabled : disabled = isDisabled != null ? isDisabled : control == null ? void 0 : control.disabled;
+  required != null ? required : required = isRequired != null ? isRequired : control == null ? void 0 : control.required;
+  readOnly != null ? readOnly : readOnly = isReadOnly != null ? isReadOnly : control == null ? void 0 : control.readOnly;
+  invalid != null ? invalid : invalid = isInvalid != null ? isInvalid : control == null ? void 0 : control.invalid;
   return {
     id: id != null ? id : control == null ? void 0 : control.id,
     "aria-disabled": (0, import_utils.ariaAttr)(disabled),
-    "aria-invalid": (0, import_utils.ariaAttr)(isInvalid),
+    "aria-invalid": (0, import_utils.ariaAttr)(invalid),
     "aria-readonly": (0, import_utils.ariaAttr)(readOnly),
@@ -259,15 +287,15 @@ "aria-required": (0, import_utils.ariaAttr)(required),
       id: formControlId,
-      isDisabled,
-      isFocused,
-      isInvalid,
-      isReadOnly,
-      isRequired,
-      labelId
+      disabled,
+      focused,
+      invalid,
+      labelId,
+      readOnly,
+      required
     } = (_a = useFormControlContext()) != null ? _a : {};
     const styles = (_b = useFormControlStyles()) != null ? _b : {};
     idProp != null ? idProp : idProp = labelId;
-    isRequiredProp != null ? isRequiredProp : isRequiredProp = isRequired;
+    isRequiredProp != null ? isRequiredProp : isRequiredProp = required;
     const css = {
       display: "block",
-      pointerEvents: isReadOnly ? "none" : void 0,
+      pointerEvents: readOnly ? "none" : void 0,
       ...styles.label
@@ -282,7 +310,7 @@ };
         className: (0, import_utils.cx)("ui-form__label", className),
-        style: { cursor: isDisabled ? "not-allowed" : void 0 },
-        "data-disabled": (0, import_utils.dataAttr)(isDisabled),
-        "data-focus": (0, import_utils.dataAttr)(isFocused),
-        "data-invalid": (0, import_utils.dataAttr)(isInvalid),
-        "data-readonly": (0, import_utils.dataAttr)(isReadOnly),
+        style: { cursor: disabled ? "not-allowed" : void 0 },
+        "data-disabled": (0, import_utils.dataAttr)(disabled),
+        "data-focus": (0, import_utils.dataAttr)(focused),
+        "data-invalid": (0, import_utils.dataAttr)(invalid),
+        "data-readonly": (0, import_utils.dataAttr)(readOnly),
         __css: css,
@@ -324,5 +352,5 @@ ...rest,
     var _a, _b;
-    const { id, isInvalid, isReplace } = (_a = useFormControlContext()) != null ? _a : {};
+    const { id, invalid, replace } = (_a = useFormControlContext()) != null ? _a : {};
     const styles = (_b = useFormControlStyles()) != null ? _b : {};
-    if (isReplace && isInvalid) return null;
+    if (replace && invalid) return null;
     const css = { ...styles.helperMessage };
@@ -346,5 +374,5 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     var _a, _b;
-    const { isInvalid } = (_a = useFormControlContext()) != null ? _a : {};
+    const { invalid } = (_a = useFormControlContext()) != null ? _a : {};
     const styles = (_b = useFormControlStyles()) != null ? _b : {};
-    if (!isInvalid) return null;
+    if (!invalid) return null;
     const css = { ...styles.errorMessage };
@@ -371,7 +399,9 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("Fieldset", props);
-    const {
+    let {
       className,
       children,
+      disabled,
       errorMessage,
       helperMessage,
+      invalid,
       isDisabled = false,
@@ -384,2 +414,5 @@ isInvalid = false,
       optionalIndicator,
+      readOnly,
+      replace,
+      required,
       requiredIndicator,
@@ -393,3 +426,8 @@ errorMessageProps,
     id != null ? id : id = uuid;
-    const [isFocused, setFocused] = (0, import_react2.useState)(false);
+    disabled != null ? disabled : disabled = isDisabled;
+    invalid != null ? invalid : invalid = isInvalid;
+    readOnly != null ? readOnly : readOnly = isReadOnly;
+    replace != null ? replace : replace = isReplace;
+    required != null ? required : required = isRequired;
+    const [focused, setFocused] = (0, import_react2.useState)(false);
     const validChildren = (0, import_utils2.getValidChildren)(children);
@@ -407,8 +445,8 @@ const customLegend = (0, import_utils2.findChild)(validChildren, Legend);
         value: {
-          isDisabled,
-          isFocused,
-          isInvalid,
-          isReadOnly,
-          isReplace,
-          isRequired,
+          disabled,
+          focused,
+          invalid,
+          readOnly,
+          replace,
+          required,
           onBlur: () => setFocused(false),
@@ -422,7 +460,7 @@ onFocus: () => setFocused(true)
             className: (0, import_utils2.cx)("ui-fieldset", className),
-            "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
-            "data-focus": (0, import_utils2.dataAttr)(isFocused),
-            "data-invalid": (0, import_utils2.dataAttr)(isInvalid),
-            "data-readonly": (0, import_utils2.dataAttr)(isReadOnly),
-            disabled: isDisabled,
+            "data-disabled": (0, import_utils2.dataAttr)(disabled),
+            "data-focus": (0, import_utils2.dataAttr)(focused),
+            "data-invalid": (0, import_utils2.dataAttr)(invalid),
+            "data-readonly": (0, import_utils2.dataAttr)(readOnly),
+            disabled,
             __css: css,
@@ -439,4 +477,4 @@ ...rest,
                     legend,
-                    (!isReplace || !isInvalid) && helperMessage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_visually_hidden.VisuallyHidden, { children: helperMessage }) : null,
-                    isInvalid && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_visually_hidden.VisuallyHidden, { children: errorMessage }) : null
+                    (!replace || !invalid) && helperMessage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_visually_hidden.VisuallyHidden, { children: helperMessage }) : null,
+                    invalid && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_visually_hidden.VisuallyHidden, { children: errorMessage }) : null
                   ]
@@ -463,2 +501,3 @@ }
     optionalIndicator = null,
+    required: requiredProp,
     requiredIndicator = null,
@@ -468,5 +507,5 @@ ...rest
     var _a, _b;
-    const { isDisabled, isFocused, isInvalid, isReadOnly, isRequired } = (_a = useFormControlContext()) != null ? _a : {};
+    const { disabled, focused, invalid, readOnly, required } = (_a = useFormControlContext()) != null ? _a : {};
     const styles = (_b = useFormControlStyles()) != null ? _b : {};
-    isRequiredProp != null ? isRequiredProp : isRequiredProp = isRequired;
+    requiredProp != null ? requiredProp : requiredProp = isRequiredProp != null ? isRequiredProp : required;
     const css = { ...styles.legend };
@@ -478,6 +517,6 @@ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         className: (0, import_utils2.cx)("ui-fieldset__legend", className),
-        "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
-        "data-focus": (0, import_utils2.dataAttr)(isFocused),
-        "data-invalid": (0, import_utils2.dataAttr)(isInvalid),
-        "data-readonly": (0, import_utils2.dataAttr)(isReadOnly),
+        "data-disabled": (0, import_utils2.dataAttr)(disabled),
+        "data-focus": (0, import_utils2.dataAttr)(focused),
+        "data-invalid": (0, import_utils2.dataAttr)(invalid),
+        "data-readonly": (0, import_utils2.dataAttr)(readOnly),
         __css: css,
@@ -487,3 +526,3 @@ ...rest,
           children,
-          isRequiredProp ? requiredIndicator ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RequiredIndicator, { children: requiredIndicator }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RequiredIndicator, {}) : optionalIndicator
+          requiredProp ? requiredIndicator ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RequiredIndicator, { children: requiredIndicator }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RequiredIndicator, {}) : optionalIndicator
         ]
@@ -490,0 +529,0 @@ }

package.json

 {
   "name": "@yamada-ui/form-control",
-  "version": "2.1.11-dev-20241212094045",
+  "version": "2.1.11-dev-20241212095817",
   "description": "Yamada UI form control component",
@@ -39,5 +39,5 @@ "keywords": [
   "dependencies": {
-    "@yamada-ui/core": "1.16.2-dev-20241212094045",
-    "@yamada-ui/utils": "1.6.2-dev-20241212094045",
-    "@yamada-ui/visually-hidden": "1.0.20-dev-20241212094045"
+    "@yamada-ui/core": "1.16.2-dev-20241212095817",
+    "@yamada-ui/utils": "1.6.2-dev-20241212095817",
+    "@yamada-ui/visually-hidden": "1.0.20-dev-20241212095817"
   },
@@ -44,0 +44,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

199963

increased by10.28%

Lines of code

2223

increased by11.43%

Dependency changes

• + Added@yamada-ui/core@1.16.2-dev-20241212095817(transitive)

• + Added@yamada-ui/portal@1.0.27-dev-20241212095817(transitive)

• + Added@yamada-ui/utils@1.6.2-dev-20241212095817(transitive)

• + Added@yamada-ui/visually-hidden@1.0.20-dev-20241212095817(transitive)

• - Removed@yamada-ui/core@1.16.2-dev-20241212094045(transitive)

• - Removed@yamada-ui/portal@1.0.27-dev-20241212094045(transitive)

• - Removed@yamada-ui/utils@1.6.2-dev-20241212094045(transitive)

• - Removed@yamada-ui/visually-hidden@1.0.20-dev-20241212094045(transitive)

• Updated@yamada-ui/core@1.16.2-dev-20241212095817

• Updated@yamada-ui/utils@1.6.2-dev-20241212095817

• Updated@yamada-ui/visually-hidden@1.0.20-dev-20241212095817