npm - @yamada-ui/react - Versions diffs - 2.0.10-dev-20260301101758 → 2.1.0-dev-20260302125757 - Mend

@yamada-ui/react 2.0.10-dev-20260301101758 → 2.1.0-dev-20260302125757

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (683) hide show

package/dist/esm/components/field/field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"field.js","names":["createContext"],"sources":["../../../../src/components/field/field.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldStyle } from \"./field.style\"\nimport { isValidElement, useId, useMemo, useState } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, dataAttr, useSplitChildren } from \"../../utils\"\nimport { useFieldsetContext } from \"../fieldset\"\nimport { fieldStyle } from \"./field.style\"\n\nexport interface FieldContext\n extends FieldProps, Pick<FieldRootProps, \"replace\"> {\n errorMessageId: string\n focused: boolean\n helperMessageId: string\n id: string\n labelId: string\n onBlur: () => void\n onFocus: () => void\n}\n\nconst [FieldContext, useFieldContext] = createContext<FieldContext>({\n name: \"FieldContext\",\n strict: false,\n})\n\nexport { FieldContext, useFieldContext }\n\nexport interface FieldProps {\n /*\n If `true`, the field will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n If `true`, the field will be invalid.\n \n @default false\n /\n invalid?: boolean\n /\n If `true`, the field will be readonly.\n \n @default false\n /\n readOnly?: boolean\n /\n If `true`, the field will be required.\n \n @default false\n /\n required?: boolean\n}\n\nexport interface FieldRootProps\n extends\n HTMLStyledProps,\n ThemeProps<FieldStyle>,\n Pick<FieldLabelProps, \"optionalIndicator\" \| \"requiredIndicator\">,\n FieldProps {\n /\n The field error message to use.\n /\n errorMessage?: ReactNode\n /\n The field helper message to use.\n /\n helperMessage?: ReactNode\n /\n The field label to use.\n /\n label?: ReactNode\n /\n If `true`, switch between helper message and error message using invalid.\n \n @default true\n /\n replace?: boolean\n /\n Props the error message component.\n /\n errorMessageProps?: FieldErrorMessageProps\n /\n Props the helper message component.\n /\n helperMessageProps?: FieldHelperMessageProps\n /\n Props the label component.\n /\n labelProps?: FieldLabelProps\n}\n\nconst {\n PropsContext: FieldPropsContext,\n usePropsContext: useFieldPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FieldRootProps, FieldStyle>(\"field\", fieldStyle)\n\nexport { FieldPropsContext, useFieldPropsContext }\n\n/\n `Field` is a component used to group form elements with label, helper message, error message, etc.\n \n @see https://yamada-ui.com/docs/components/field\n /\nexport const FieldRoot = withProvider<\"div\", FieldRootProps>(\n ({\n id,\n children,\n disabled,\n errorMessage,\n helperMessage,\n invalid,\n label,\n optionalIndicator,\n readOnly,\n replace = true,\n required,\n requiredIndicator,\n errorMessageProps,\n helperMessageProps,\n labelProps,\n ...rest\n }) => {\n const uuid = useId()\n const labelId = useId()\n const helperMessageId = useId()\n const errorMessageId = useId()\n const [focused, setFocused] = useState<boolean>(false)\n const [\n omittedChildren,\n customLabel,\n customHelperMessage,\n customErrorMessage,\n ] = useSplitChildren(\n children,\n FieldLabel,\n FieldHelperMessage,\n FieldErrorMessage,\n )\n\n id ??= uuid\n\n const context = useMemo(\n () => ({\n id,\n disabled,\n errorMessageId,\n focused,\n helperMessageId,\n invalid,\n labelId,\n readOnly,\n replace,\n required,\n onBlur: () => setFocused(false),\n onFocus: () => setFocused(true),\n }),\n [\n id,\n disabled,\n labelId,\n focused,\n invalid,\n helperMessageId,\n errorMessageId,\n readOnly,\n replace,\n required,\n ],\n )\n\n return (\n <FieldContext value={context}>\n <styled.div\n data-disabled={dataAttr(disabled)}\n data-focus={dataAttr(focused)}\n data-invalid={dataAttr(invalid)}\n data-readonly={dataAttr(readOnly)}\n {...rest}\n >\n {customLabel \|\|\n (label ? (\n <FieldLabel\n optionalIndicator={optionalIndicator}\n requiredIndicator={requiredIndicator}\n {...labelProps}\n >\n {label}\n </FieldLabel>\n ) : null)}\n\n {omittedChildren}\n\n {customHelperMessage \|\|\n (helperMessage ? (\n <FieldHelperMessage {...helperMessageProps}>\n {helperMessage}\n </FieldHelperMessage>\n ) : null)}\n\n {customErrorMessage \|\|\n (errorMessage ? (\n <FieldErrorMessage {...errorMessageProps}>\n {errorMessage}\n </FieldErrorMessage>\n ) : null)}\n </styled.div>\n </FieldContext>\n )\n },\n \"root\",\n)()\n\nexport interface FieldLabelProps extends HTMLStyledProps<\"label\"> {\n /\n The optional indicator to use.\n /\n optionalIndicator?: ReactNode\n /\n If `true`, the field will be required.\n \n @default false\n /\n required?: boolean\n /\n The required indicator to use.\n /\n requiredIndicator?: ReactNode\n}\n\nexport const FieldLabel = withContext<\"label\", FieldLabelProps>(\n ({\n id,\n htmlFor,\n children,\n optionalIndicator = null,\n required,\n requiredIndicator = null,\n ...rest\n }) => {\n const fieldsetContext = useFieldsetContext()\n const fieldContext = useFieldContext()\n\n id ??= fieldContext?.labelId\n htmlFor ??= fieldContext?.id\n required ??= fieldContext?.required ?? fieldsetContext?.required\n\n const disabled = fieldContext?.disabled ?? fieldsetContext?.disabled\n const invalid = fieldContext?.invalid ?? fieldsetContext?.invalid\n const readOnly = fieldContext?.readOnly ?? fieldsetContext?.readOnly\n const focused = fieldContext?.focused\n\n return (\n <styled.label\n id={id}\n htmlFor={htmlFor}\n data-disabled={dataAttr(disabled)}\n data-focus={dataAttr(focused)}\n data-invalid={dataAttr(invalid)}\n data-readonly={dataAttr(readOnly)}\n {...rest}\n >\n {children}\n\n {required ? (\n requiredIndicator ? (\n <FieldRequiredIndicator>{requiredIndicator}</FieldRequiredIndicator>\n ) : (\n <FieldRequiredIndicator />\n )\n ) : (\n optionalIndicator\n )}\n </styled.label>\n )\n },\n \"label\",\n)()\n\ninterface FieldRequiredIndicatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst FieldRequiredIndicator = withContext<\"span\", FieldRequiredIndicatorProps>(\n ({ children, ...rest }) => {\n if (!isValidElement(children)) {\n return (\n <styled.span aria-hidden role=\"presentation\" {...rest}>\n {children ?? <></>}\n </styled.span>\n )\n } else {\n return children\n }\n },\n \"requiredIndicator\",\n)()\n\nexport interface FieldHelperMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldHelperMessage = withContext<\"span\", FieldHelperMessageProps>(\n (props) => {\n const fieldsetContext = useFieldsetContext()\n const {\n helperMessageId,\n invalid = fieldsetContext?.invalid,\n replace,\n } = useFieldContext() ?? {}\n\n return (\n <styled.span\n id={helperMessageId}\n hidden={replace && invalid ? true : false}\n {...props}\n />\n )\n },\n \"helperMessage\",\n)()\n\nexport interface FieldErrorMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldErrorMessage = withContext<\"span\", FieldErrorMessageProps>(\n (props) => {\n const fieldsetContext = useFieldsetContext()\n const { errorMessageId, invalid = fieldsetContext?.invalid } =\n useFieldContext() ?? {}\n\n return (\n <styled.span\n id={errorMessageId}\n aria-live={invalid ? \"polite\" : undefined}\n hidden={!invalid}\n {...props}\n />\n )\n },\n \"errorMessage\",\n)()\n"],"mappings":"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"}
1	+ {"version":3,"file":"field.js","names":["createContext"],"sources":["../../../../src/components/field/field.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldStyle } from \"./field.style\"\nimport { isValidElement, useId, useMemo, useState } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n createContext,\n dataAttr,\n isObject,\n useSplitChildren,\n} from \"../../utils\"\nimport { useFieldsetContext } from \"../fieldset\"\nimport { useFormContext } from \"../form\"\nimport { fieldStyle } from \"./field.style\"\n\nexport interface FieldContext\n extends FieldProps, Pick<FieldRootProps, \"replace\"> {\n errorMessageId: string\n focused: boolean\n helperMessageId: string\n id: string\n labelId: string\n onBlur: () => void\n onFocus: () => void\n}\n\nconst [FieldContext, useFieldContext] = createContext<FieldContext>({\n name: \"FieldContext\",\n strict: false,\n})\n\nexport { FieldContext, useFieldContext }\n\nexport interface FieldProps {\n /*\n If `true`, the field will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n If `true`, the field will be invalid.\n \n @default false\n /\n invalid?: boolean\n /\n If `true`, the field will be readonly.\n \n @default false\n /\n readOnly?: boolean\n /\n If `true`, the field will be required.\n \n @default false\n /\n required?: boolean\n}\n\nexport interface FieldRootProps\n extends\n HTMLStyledProps,\n ThemeProps<FieldStyle>,\n Pick<FieldLabelProps, \"optionalIndicator\" \| \"requiredIndicator\">,\n FieldProps {\n /\n The field error message to use.\n /\n errorMessage?: ReactNode\n /\n The field helper message to use.\n /\n helperMessage?: ReactNode\n /\n The field label to use.\n /\n label?: ReactNode\n /\n The name of the field.\n /\n name?: string\n /\n If `true`, switch between helper message and error message using invalid.\n \n @default true\n /\n replace?: boolean\n /\n Props the error message component.\n /\n errorMessageProps?: FieldErrorMessageProps\n /\n Props the helper message component.\n /\n helperMessageProps?: FieldHelperMessageProps\n /\n Props the label component.\n /\n labelProps?: FieldLabelProps\n}\n\nconst {\n PropsContext: FieldPropsContext,\n usePropsContext: useFieldPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FieldRootProps, FieldStyle>(\"field\", fieldStyle)\n\nexport { FieldPropsContext, useFieldPropsContext }\n\n/\n `Field` is a component used to group form elements with label, helper message, error message, etc.\n \n @see https://yamada-ui.com/docs/components/field\n /\nexport const FieldRoot = withProvider<\"div\", FieldRootProps>(\n ({\n id,\n name,\n children,\n disabled,\n errorMessage,\n helperMessage,\n invalid,\n label,\n optionalIndicator,\n readOnly,\n replace,\n required,\n requiredIndicator,\n errorMessageProps,\n helperMessageProps,\n labelProps,\n ...rest\n }) => {\n const uuid = useId()\n const labelId = useId()\n const helperMessageId = useId()\n const errorMessageId = useId()\n const formContext = useFormContext()\n const fieldsetContext = useFieldsetContext()\n const [focused, setFocused] = useState<boolean>(false)\n const [\n omittedChildren,\n customLabel,\n customHelperMessage,\n customErrorMessage,\n ] = useSplitChildren(\n children,\n FieldLabel,\n FieldHelperMessage,\n FieldErrorMessage,\n )\n\n id ??= uuid\n optionalIndicator ??= formContext?.optionalIndicator\n requiredIndicator ??= formContext?.requiredIndicator\n\n disabled ??= fieldsetContext?.disabled\n invalid ??= fieldsetContext?.invalid\n readOnly ??= fieldsetContext?.readOnly\n required ??= fieldsetContext?.required\n\n if (name) {\n disabled ??= isObject(formContext?.disabled)\n ? formContext.disabled[name]\n : formContext?.disabled\n invalid ??= isObject(formContext?.invalid)\n ? formContext.invalid[name]\n : formContext?.invalid\n readOnly ??= isObject(formContext?.readOnly)\n ? formContext.readOnly[name]\n : formContext?.readOnly\n required ??= isObject(formContext?.required)\n ? formContext.required[name]\n : formContext?.required\n replace ??= isObject(formContext?.replace)\n ? (formContext.replace[name] ?? true)\n : (formContext?.replace ?? true)\n errorMessage ??= formContext?.errorMessage?.[name]\n helperMessage ??= formContext?.helperMessage?.[name]\n }\n\n const context = useMemo(\n () => ({\n id,\n disabled,\n errorMessageId,\n focused,\n helperMessageId,\n invalid,\n labelId,\n readOnly,\n replace,\n required,\n onBlur: () => setFocused(false),\n onFocus: () => setFocused(true),\n }),\n [\n id,\n disabled,\n labelId,\n focused,\n invalid,\n helperMessageId,\n errorMessageId,\n readOnly,\n replace,\n required,\n ],\n )\n\n return (\n <FieldContext value={context}>\n <styled.div\n data-disabled={dataAttr(disabled)}\n data-focus={dataAttr(focused)}\n data-invalid={dataAttr(invalid)}\n data-readonly={dataAttr(readOnly)}\n role=\"group\"\n {...rest}\n >\n {customLabel \|\|\n (label ? (\n <FieldLabel\n optionalIndicator={optionalIndicator}\n requiredIndicator={requiredIndicator}\n {...labelProps}\n >\n {label}\n </FieldLabel>\n ) : null)}\n\n {omittedChildren}\n\n {customHelperMessage \|\|\n (helperMessage ? (\n <FieldHelperMessage {...helperMessageProps}>\n {helperMessage}\n </FieldHelperMessage>\n ) : null)}\n\n {customErrorMessage \|\|\n (errorMessage ? (\n <FieldErrorMessage {...errorMessageProps}>\n {errorMessage}\n </FieldErrorMessage>\n ) : null)}\n </styled.div>\n </FieldContext>\n )\n },\n \"root\",\n)()\n\nexport interface FieldLabelProps extends HTMLStyledProps<\"label\"> {\n /\n The optional indicator to use.\n /\n optionalIndicator?: ReactNode\n /\n If `true`, the field will be required.\n \n @default false\n /\n required?: boolean\n /\n The required indicator to use.\n /\n requiredIndicator?: ReactNode\n}\n\nexport const FieldLabel = withContext<\"label\", FieldLabelProps>(\n ({\n id,\n htmlFor,\n children,\n optionalIndicator = null,\n required,\n requiredIndicator = null,\n ...rest\n }) => {\n const fieldContext = useFieldContext()\n\n id ??= fieldContext?.labelId\n htmlFor ??= fieldContext?.id\n required ??= fieldContext?.required\n\n return (\n <styled.label\n id={id}\n htmlFor={htmlFor}\n data-disabled={dataAttr(fieldContext?.disabled)}\n data-focus={dataAttr(fieldContext?.focused)}\n data-invalid={dataAttr(fieldContext?.invalid)}\n data-readonly={dataAttr(fieldContext?.readOnly)}\n {...rest}\n >\n {children}\n\n {required ? (\n requiredIndicator ? (\n <FieldRequiredIndicator>{requiredIndicator}</FieldRequiredIndicator>\n ) : (\n <FieldRequiredIndicator />\n )\n ) : (\n optionalIndicator\n )}\n </styled.label>\n )\n },\n \"label\",\n)()\n\ninterface FieldRequiredIndicatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst FieldRequiredIndicator = withContext<\"span\", FieldRequiredIndicatorProps>(\n ({ children, ...rest }) => {\n if (!isValidElement(children)) {\n return (\n <styled.span aria-hidden role=\"presentation\" {...rest}>\n {children ?? <></>}\n </styled.span>\n )\n } else {\n return children\n }\n },\n \"requiredIndicator\",\n)()\n\nexport interface FieldHelperMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldHelperMessage = withContext<\"span\", FieldHelperMessageProps>(\n (props) => {\n const { helperMessageId, invalid, replace } = useFieldContext() ?? {}\n\n return (\n <styled.span\n id={helperMessageId}\n hidden={replace && invalid ? true : false}\n {...props}\n />\n )\n },\n \"helperMessage\",\n)()\n\nexport interface FieldErrorMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldErrorMessage = withContext<\"span\", FieldErrorMessageProps>(\n (props) => {\n const { errorMessageId, invalid } = useFieldContext() ?? {}\n\n return (\n <styled.span\n id={errorMessageId}\n aria-live={invalid ? \"polite\" : undefined}\n hidden={!invalid}\n {...props}\n />\n )\n },\n \"errorMessage\",\n)()\n"],"mappings":"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"}

package/dist/esm/components/field/use-field-props.js CHANGED Viewed

@@ -4,14 +4,17 @@ import { useSafeLayoutEffect } from "../../utils/effect.js";
 import { utils_exports } from "../../utils/index.js";
 import { useEnvironment } from "../../core/system/environment-provider.js";
 import "../../core/index.js";
+import { useFormContext } from "../form/form.js";
+import "../form/index.js";
 import { useFieldsetContext } from "../fieldset/fieldset.js";
 import "../fieldset/index.js";
 import { useFieldContext } from "./field.js";
 import { useMemo, useState } from "react";
 //#region src/components/field/use-field-props.ts
-const useFieldProps = ({ id, "aria-describedby": ariaDescribedby, disabled, invalid, notSupportReadOnly, readOnly, required, onBlur, onFocus, ...rest } = {}) => {
+const useFieldProps = ({ id, name, "aria-describedby": ariaDescribedby, disabled, invalid, notSupportReadOnly, readOnly, required, onBlur, onFocus, ...rest } = {}) => {
 	const { getDocument } = useEnvironment();
+	const formContext = useFormContext();
 	const fieldsetContext = useFieldsetContext();
 	const fieldContext = useFieldContext();
 	const [errorMessageId, setErrorMessageId] = useState(void 0);
@@ -21,6 +24,12 @@ const useFieldProps = ({ id, "aria-describedby": ariaDescribedby, disabled, inva
 	required ??= fieldContext?.required ?? fieldsetContext?.required;
 	readOnly ??= fieldContext?.readOnly ?? fieldsetContext?.readOnly;
 	invalid ??= fieldContext?.invalid ?? fieldsetContext?.invalid;
+	if (name) {
+		disabled ??= (0, utils_exports.isObject)(formContext?.disabled) ? formContext.disabled[name] : formContext?.disabled;
+		required ??= (0, utils_exports.isObject)(formContext?.required) ? formContext.required[name] : formContext?.required;
+		readOnly ??= (0, utils_exports.isObject)(formContext?.readOnly) ? formContext.readOnly[name] : formContext?.readOnly;
+		invalid ??= (0, utils_exports.isObject)(formContext?.invalid) ? formContext.invalid[name] : formContext?.invalid;
+	}
 	useSafeLayoutEffect(() => {
 		const hasErrorMessage = !!fieldContext?.errorMessageId && !!getDocument()?.getElementById(fieldContext.errorMessageId);
 		const hasHelperMessage = !!fieldContext?.helperMessageId && !!getDocument()?.getElementById(fieldContext.helperMessageId);
@@ -34,12 +43,14 @@ const useFieldProps = ({ id, "aria-describedby": ariaDescribedby, disabled, inva
 	]);
 	const props = useMemo(() => ({
 		id,
+		name,
 		disabled,
 		readOnly,
 		required,
 		...rest
 	}), [
 		id,
+		name,
 		disabled,
 		readOnly,
 		required,

package/dist/esm/components/field/use-field-props.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-field-props.js","names":[],"sources":["../../../../src/components/field/use-field-props.ts"],"sourcesContent":["\"use client\"\n\nimport type { FocusEventHandler } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type { FieldProps } from \"./field\"\nimport { useMemo, useState } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport {\n ariaAttr,\n cx,\n dataAttr,\n handlerAll,\n useSafeLayoutEffect,\n} from \"../../utils\"\nimport { useFieldsetContext } from \"../fieldset\"\nimport { useFieldContext } from \"./field\"\n\nexport interface UseFieldProps<Y extends HTMLElement> extends FieldProps {\n id?: string\n notSupportReadOnly?: boolean\n onBlur?: FocusEventHandler<Y>\n onFocus?: FocusEventHandler<Y>\n}\n\nexport const useFieldProps = <Y extends HTMLElement, M extends Dict>(\n {\n id,\n \"aria-describedby\": ariaDescribedby,\n disabled,\n invalid,\n notSupportReadOnly,\n readOnly,\n required,\n onBlur,\n onFocus,\n ...rest\n }: M & UseFieldProps<Y> = {} as M & UseFieldProps<Y>,\n) => {\n const { getDocument } = useEnvironment()\n const fieldsetContext = useFieldsetContext()\n const fieldContext = useFieldContext()\n const [errorMessageId, setErrorMessageId] = useState<string \| undefined>(\n undefined,\n )\n const [helperMessageId, setHelperMessageId] = useState<string \| undefined>(\n undefined,\n )\n\n id ??= fieldContext?.id\n disabled ??= fieldContext?.disabled ?? fieldsetContext?.disabled\n required ??= fieldContext?.required ?? fieldsetContext?.required\n readOnly ??= fieldContext?.readOnly ?? fieldsetContext?.readOnly\n invalid ??= fieldContext?.invalid ?? fieldsetContext?.invalid\n\n useSafeLayoutEffect(() => {\n const hasErrorMessage =\n !!fieldContext?.errorMessageId &&\n !!getDocument()?.getElementById(fieldContext.errorMessageId)\n const hasHelperMessage =\n !!fieldContext?.helperMessageId &&\n !!getDocument()?.getElementById(fieldContext.helperMessageId)\n\n setErrorMessageId(\n invalid && hasErrorMessage ? fieldContext.errorMessageId : undefined,\n )\n setHelperMessageId(\n (!fieldContext?.replace \|\| !invalid) && hasHelperMessage\n ? fieldContext.helperMessageId\n : undefined,\n )\n }, [\n fieldContext?.errorMessageId,\n fieldContext?.helperMessageId,\n fieldContext?.replace,\n invalid,\n ])\n\n const props = useMemo(\n () => ({\n id,\n disabled,\n readOnly,\n required,\n ...rest,\n }),\n [id, disabled, readOnly, required, rest],\n )\n const dataProps = useMemo(\n () => ({\n \"data-disabled\": dataAttr(disabled),\n \"data-invalid\": dataAttr(invalid),\n \"data-readonly\": dataAttr(readOnly),\n \"data-required\": dataAttr(required),\n }),\n [disabled, invalid, readOnly, required],\n )\n const ariaProps = useMemo(\n () => ({\n \"aria-describedby\":\n ariaDescribedby ?? cx(errorMessageId, helperMessageId),\n \"aria-disabled\": ariaAttr(\n notSupportReadOnly ? readOnly \|\| disabled : disabled,\n ),\n \"aria-invalid\": ariaAttr(invalid),\n \"aria-readonly\": notSupportReadOnly ? undefined : ariaAttr(readOnly),\n \"aria-required\": ariaAttr(required),\n }),\n [\n errorMessageId,\n helperMessageId,\n ariaDescribedby,\n notSupportReadOnly,\n readOnly,\n disabled,\n invalid,\n required,\n ],\n )\n const eventProps = useMemo(\n () => ({\n onBlur: handlerAll(fieldContext?.onBlur, onBlur),\n onFocus: handlerAll(fieldContext?.onFocus, onFocus),\n }),\n [fieldContext?.onBlur, fieldContext?.onFocus, onBlur, onFocus],\n )\n\n return {\n context: fieldContext,\n props,\n ariaProps,\n dataProps,\n eventProps,\n }\n}\n\nexport const resetFieldProps = {\n disabled: false,\n invalid: false,\n readOnly: false,\n required: false,\n}\n"],"mappings":"~~;;;;;;;;;;;;AAwBA~~,MAAa,iBACX,EACE,IACA,oBAAoB,iBACpB,UACA,SACA,oBACA,UACA,UACA,QACA,SACA,GAAG,SACqB,EAAE,KACzB;CACH,MAAM,EAAE,gBAAgB,gBAAgB;CACxC,MAAM,kBAAkB,oBAAoB;CAC5C,MAAM,eAAe,iBAAiB;CACtC,MAAM,CAAC,gBAAgB,qBAAqB,SAC1C,OACD;CACD,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,OACD;AAED,QAAO,cAAc;AACrB,cAAa,cAAc,YAAY,iBAAiB;AACxD,cAAa,cAAc,YAAY,iBAAiB;AACxD,cAAa,cAAc,YAAY,iBAAiB;AACxD,aAAY,cAAc,WAAW,iBAAiB;AAEtD,2BAA0B;EACxB,MAAM,kBACJ,CAAC,CAAC,cAAc,kBAChB,CAAC,CAAC,aAAa,EAAE,eAAe,aAAa,eAAe;EAC9D,MAAM,mBACJ,CAAC,CAAC,cAAc,mBAChB,CAAC,CAAC,aAAa,EAAE,eAAe,aAAa,gBAAgB;AAE/D,oBACE,WAAW,kBAAkB,aAAa,iBAAiB,OAC5D;AACD,sBACG,CAAC,cAAc,WAAW,CAAC,YAAY,mBACpC,aAAa,kBACb,OACL;IACA;EACD,cAAc;EACd,cAAc;EACd,cAAc;EACd;EACD,CAAC;CAEF,MAAM,QAAQ,eACL;EACL;EACA;EACA;EACA;EACA,GAAG;EACJ,GACD;EAAC;EAAI;EAAU;EAAU;EAAU;EAAK,~~CACzC~~;CACD,MAAM,YAAY,eACT;EACL,6CAA0B,SAAS;EACnC,4CAAyB,QAAQ;EACjC,6CAA0B,SAAS;EACnC,6CAA0B,SAAS;EACpC,GACD;EAAC;EAAU;EAAS;EAAU;EAAS,CACxC;AA+BD,QAAO;EACL,SAAS;EACT;EACA,WAjCgB,eACT;GACL,oBACE,yCAAsB,gBAAgB,gBAAgB;GACxD,6CACE,qBAAqB,YAAY,WAAW,SAC7C;GACD,4CAAyB,QAAQ;GACjC,iBAAiB,qBAAqB,qCAAqB,SAAS;GACpE,6CAA0B,SAAS;GACpC,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAaC;EACA,YAbiB,eACV;GACL,sCAAmB,cAAc,QAAQ,OAAO;GAChD,uCAAoB,cAAc,SAAS,QAAQ;GACpD,GACD;GAAC,cAAc;GAAQ,cAAc;GAAS;GAAQ;GAAQ,CAC/D;EAQA;;AAGH,MAAa,kBAAkB;CAC7B,UAAU;CACV,SAAS;CACT,UAAU;CACV,UAAU;CACX"}
1	+ {"version":3,"file":"use-field-props.js","names":[],"sources":["../../../../src/components/field/use-field-props.ts"],"sourcesContent":["\"use client\"\n\nimport type { FocusEventHandler } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type { FieldProps } from \"./field\"\nimport { useMemo, useState } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport {\n ariaAttr,\n cx,\n dataAttr,\n handlerAll,\n isObject,\n useSafeLayoutEffect,\n} from \"../../utils\"\nimport { useFieldsetContext } from \"../fieldset\"\nimport { useFormContext } from \"../form\"\nimport { useFieldContext } from \"./field\"\n\nexport interface UseFieldProps<Y extends HTMLElement> extends FieldProps {\n id?: string\n name?: string\n notSupportReadOnly?: boolean\n onBlur?: FocusEventHandler<Y>\n onFocus?: FocusEventHandler<Y>\n}\n\nexport const useFieldProps = <Y extends HTMLElement, M extends Dict>(\n {\n id,\n name,\n \"aria-describedby\": ariaDescribedby,\n disabled,\n invalid,\n notSupportReadOnly,\n readOnly,\n required,\n onBlur,\n onFocus,\n ...rest\n }: M & UseFieldProps<Y> = {} as M & UseFieldProps<Y>,\n) => {\n const { getDocument } = useEnvironment()\n const formContext = useFormContext()\n const fieldsetContext = useFieldsetContext()\n const fieldContext = useFieldContext()\n const [errorMessageId, setErrorMessageId] = useState<string \| undefined>(\n undefined,\n )\n const [helperMessageId, setHelperMessageId] = useState<string \| undefined>(\n undefined,\n )\n\n id ??= fieldContext?.id\n disabled ??= fieldContext?.disabled ?? fieldsetContext?.disabled\n required ??= fieldContext?.required ?? fieldsetContext?.required\n readOnly ??= fieldContext?.readOnly ?? fieldsetContext?.readOnly\n invalid ??= fieldContext?.invalid ?? fieldsetContext?.invalid\n\n if (name) {\n disabled ??= isObject(formContext?.disabled)\n ? formContext.disabled[name]\n : formContext?.disabled\n required ??= isObject(formContext?.required)\n ? formContext.required[name]\n : formContext?.required\n readOnly ??= isObject(formContext?.readOnly)\n ? formContext.readOnly[name]\n : formContext?.readOnly\n invalid ??= isObject(formContext?.invalid)\n ? formContext.invalid[name]\n : formContext?.invalid\n }\n\n useSafeLayoutEffect(() => {\n const hasErrorMessage =\n !!fieldContext?.errorMessageId &&\n !!getDocument()?.getElementById(fieldContext.errorMessageId)\n const hasHelperMessage =\n !!fieldContext?.helperMessageId &&\n !!getDocument()?.getElementById(fieldContext.helperMessageId)\n\n setErrorMessageId(\n invalid && hasErrorMessage ? fieldContext.errorMessageId : undefined,\n )\n setHelperMessageId(\n (!fieldContext?.replace \|\| !invalid) && hasHelperMessage\n ? fieldContext.helperMessageId\n : undefined,\n )\n }, [\n fieldContext?.errorMessageId,\n fieldContext?.helperMessageId,\n fieldContext?.replace,\n invalid,\n ])\n\n const props = useMemo(\n () => ({\n id,\n name,\n disabled,\n readOnly,\n required,\n ...rest,\n }),\n [id, name, disabled, readOnly, required, rest],\n )\n const dataProps = useMemo(\n () => ({\n \"data-disabled\": dataAttr(disabled),\n \"data-invalid\": dataAttr(invalid),\n \"data-readonly\": dataAttr(readOnly),\n \"data-required\": dataAttr(required),\n }),\n [disabled, invalid, readOnly, required],\n )\n const ariaProps = useMemo(\n () => ({\n \"aria-describedby\":\n ariaDescribedby ?? cx(errorMessageId, helperMessageId),\n \"aria-disabled\": ariaAttr(\n notSupportReadOnly ? readOnly \|\| disabled : disabled,\n ),\n \"aria-invalid\": ariaAttr(invalid),\n \"aria-readonly\": notSupportReadOnly ? undefined : ariaAttr(readOnly),\n \"aria-required\": ariaAttr(required),\n }),\n [\n errorMessageId,\n helperMessageId,\n ariaDescribedby,\n notSupportReadOnly,\n readOnly,\n disabled,\n invalid,\n required,\n ],\n )\n const eventProps = useMemo(\n () => ({\n onBlur: handlerAll(fieldContext?.onBlur, onBlur),\n onFocus: handlerAll(fieldContext?.onFocus, onFocus),\n }),\n [fieldContext?.onBlur, fieldContext?.onFocus, onBlur, onFocus],\n )\n\n return {\n context: fieldContext,\n props,\n ariaProps,\n dataProps,\n eventProps,\n }\n}\n\nexport const resetFieldProps = {\n disabled: false,\n invalid: false,\n readOnly: false,\n required: false,\n}\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAa,iBACX,EACE,IACA,MACA,oBAAoB,iBACpB,UACA,SACA,oBACA,UACA,UACA,QACA,SACA,GAAG,SACqB,EAAE,KACzB;CACH,MAAM,EAAE,gBAAgB,gBAAgB;CACxC,MAAM,cAAc,gBAAgB;CACpC,MAAM,kBAAkB,oBAAoB;CAC5C,MAAM,eAAe,iBAAiB;CACtC,MAAM,CAAC,gBAAgB,qBAAqB,SAC1C,OACD;CACD,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,OACD;AAED,QAAO,cAAc;AACrB,cAAa,cAAc,YAAY,iBAAiB;AACxD,cAAa,cAAc,YAAY,iBAAiB;AACxD,cAAa,cAAc,YAAY,iBAAiB;AACxD,aAAY,cAAc,WAAW,iBAAiB;AAEtD,KAAI,MAAM;AACR,2CAAsB,aAAa,SAAS,GACxC,YAAY,SAAS,QACrB,aAAa;AACjB,2CAAsB,aAAa,SAAS,GACxC,YAAY,SAAS,QACrB,aAAa;AACjB,2CAAsB,aAAa,SAAS,GACxC,YAAY,SAAS,QACrB,aAAa;AACjB,0CAAqB,aAAa,QAAQ,GACtC,YAAY,QAAQ,QACpB,aAAa;;AAGnB,2BAA0B;EACxB,MAAM,kBACJ,CAAC,CAAC,cAAc,kBAChB,CAAC,CAAC,aAAa,EAAE,eAAe,aAAa,eAAe;EAC9D,MAAM,mBACJ,CAAC,CAAC,cAAc,mBAChB,CAAC,CAAC,aAAa,EAAE,eAAe,aAAa,gBAAgB;AAE/D,oBACE,WAAW,kBAAkB,aAAa,iBAAiB,OAC5D;AACD,sBACG,CAAC,cAAc,WAAW,CAAC,YAAY,mBACpC,aAAa,kBACb,OACL;IACA;EACD,cAAc;EACd,cAAc;EACd,cAAc;EACd;EACD,CAAC;CAEF,MAAM,QAAQ,eACL;EACL;EACA;EACA;EACA;EACA;EACA,GAAG;EACJ,GACD;EAAC;EAAI;EAAM;EAAU;EAAU;EAAU;EAAK,CAC/C;CACD,MAAM,YAAY,eACT;EACL,6CAA0B,SAAS;EACnC,4CAAyB,QAAQ;EACjC,6CAA0B,SAAS;EACnC,6CAA0B,SAAS;EACpC,GACD;EAAC;EAAU;EAAS;EAAU;EAAS,CACxC;AA+BD,QAAO;EACL,SAAS;EACT;EACA,WAjCgB,eACT;GACL,oBACE,yCAAsB,gBAAgB,gBAAgB;GACxD,6CACE,qBAAqB,YAAY,WAAW,SAC7C;GACD,4CAAyB,QAAQ;GACjC,iBAAiB,qBAAqB,qCAAqB,SAAS;GACpE,6CAA0B,SAAS;GACpC,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAaC;EACA,YAbiB,eACV;GACL,sCAAmB,cAAc,QAAQ,OAAO;GAChD,uCAAoB,cAAc,SAAS,QAAQ;GACpD,GACD;GAAC,cAAc;GAAQ,cAAc;GAAS;GAAQ;GAAQ,CAC/D;EAQA;;AAGH,MAAa,kBAAkB;CAC7B,UAAU;CACV,SAAS;CACT,UAAU;CACV,UAAU;CACX"}

package/dist/esm/components/fieldset/fieldset.js CHANGED Viewed

@@ -7,6 +7,8 @@ import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { fieldsetStyle } from "./fieldset.style.js";
+import { useFormContext } from "../form/form.js";
+import "../form/index.js";
 import { useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -21,7 +23,7 @@ const { PropsContext: FieldsetPropsContext, usePropsContext: useFieldsetPropsCon
 *
 * @see https://yamada-ui.com/docs/components/fieldset
 */
-const FieldsetRoot = withProvider(({ id, children, disabled, errorMessage, helperMessage, invalid, legend, readOnly, required, contentProps, errorMessageProps, headerProps, helperMessageProps, legendProps, ...rest }) => {
+const FieldsetRoot = withProvider(({ id, "aria-labelledby": ariaLabelledBy, children, disabled, errorMessage, helperMessage, invalid, legend, readOnly, required, contentProps, errorMessageProps, headerProps, helperMessageProps, legendProps, ...rest }) => {
 	const uuid = useId();
 	const [omittedChildren, customLegend, customHeader, customContent, customHelperMessage, customErrorMessage] = useSplitChildren(children, FieldsetLegend, FieldsetHeader, FieldsetContent, FieldsetHelperMessage, FieldsetErrorMessage);
 	id ??= uuid;
@@ -40,6 +42,7 @@ const FieldsetRoot = withProvider(({ id, children, disabled, errorMessage, helpe
 			required
 		]),
 		children: /* @__PURE__ */ jsxs(styled.fieldset, {
+			"aria-labelledby": (0, utils_exports.cx)(id, ariaLabelledBy),
 			...rest,
 			children: [
 				customHeader || /* @__PURE__ */ jsxs(FieldsetHeader, {
@@ -63,7 +66,14 @@ const FieldsetRoot = withProvider(({ id, children, disabled, errorMessage, helpe
 			]
 		})
 	});
-}, "root")();
+}, "root")((props) => {
+	const { size, variant } = useFormContext() ?? {};
+	return {
+		size,
+		variant,
+		...props
+	};
+});
 const FieldsetLegend = withContext("legend", "legend")(void 0, (props) => {
 	const { id, disabled, invalid } = useFieldsetContext() ?? {};
 	return {

package/dist/esm/components/fieldset/fieldset.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fieldset.js","names":["createContext"],"sources":["../../../../src/components/fieldset/fieldset.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { FieldsetStyle } from \"./fieldset.style\"\nimport { useId, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, dataAttr, useSplitChildren } from \"../../utils\"\nimport { fieldsetStyle } from \"./fieldset.style\"\n\ninterface FieldsetContext extends Pick<\n FieldsetRootProps,\n \"disabled\" \| \"invalid\" \| \"readOnly\" \| \"required\"\n> {\n id?: string\n}\n\nconst [FieldsetContext, useFieldsetContext] = createContext<FieldsetContext>({\n name: \"FieldsetContext\",\n strict: false,\n})\n\nexport { FieldsetContext, useFieldsetContext }\n\nexport interface FieldsetRootProps\n extends HTMLStyledProps<\"fieldset\">, ThemeProps<FieldsetStyle>, FieldProps {\n /*\n The fieldset error message to use.\n /\n errorMessage?: ReactNode\n /\n The fieldset helper message to use.\n /\n helperMessage?: ReactNode\n /\n The fieldset legend to use.\n /\n legend?: ReactNode\n /\n Props the content component.\n /\n contentProps?: FieldsetContentProps\n /\n Props the error message component.\n /\n errorMessageProps?: FieldsetErrorMessageProps\n /\n Props the header component.\n /\n headerProps?: FieldsetHeaderProps\n /\n Props the helper message component.\n /\n helperMessageProps?: FieldsetHelperMessageProps\n /\n Props the legend component.\n /\n legendProps?: FieldsetLegendProps\n}\n\nconst {\n PropsContext: FieldsetPropsContext,\n usePropsContext: useFieldsetPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FieldsetRootProps, FieldsetStyle, FieldsetContext>(\n \"fieldset\",\n fieldsetStyle,\n)\n\nexport { FieldsetPropsContext, useFieldsetPropsContext }\n\n/\n `Fieldset` is a component used to group multiple controls.\n \n @see https://yamada-ui.com/docs/components/fieldset\n */\nexport const FieldsetRoot = withProvider<\"fieldset\", FieldsetRootProps>(\n ({\n id,\n children,\n disabled,\n errorMessage,\n helperMessage,\n invalid,\n legend,\n readOnly,\n required,\n contentProps,\n errorMessageProps,\n headerProps,\n helperMessageProps,\n legendProps,\n ...rest\n }) => {\n const uuid = useId()\n const [\n omittedChildren,\n customLegend,\n customHeader,\n customContent,\n customHelperMessage,\n customErrorMessage,\n ] = useSplitChildren(\n children,\n FieldsetLegend,\n FieldsetHeader,\n FieldsetContent,\n FieldsetHelperMessage,\n FieldsetErrorMessage,\n )\n\n id ??= uuid\n\n const context = useMemo(\n () => ({\n id,\n disabled,\n invalid,\n readOnly,\n required,\n }),\n [id, disabled, invalid, readOnly, required],\n )\n\n return (\n <FieldsetContext value={context}>\n <styled.fieldset {...rest}>\n {customHeader \|\| (\n <FieldsetHeader {...headerProps}>\n {customLegend \|\|\n (legend ? (\n <FieldsetLegend {...legendProps}>{legend}</FieldsetLegend>\n ) : null)}\n\n {customHelperMessage \|\|\n (helperMessage ? (\n <FieldsetHelperMessage {...helperMessageProps}>\n {helperMessage}\n </FieldsetHelperMessage>\n ) : null)}\n </FieldsetHeader>\n )}\n\n {customContent \|\| (\n <FieldsetContent {...contentProps}>\n {omittedChildren}\n </FieldsetContent>\n )}\n\n {customErrorMessage \|\|\n (errorMessage ? (\n <FieldsetErrorMessage {...errorMessageProps}>\n {errorMessage}\n </FieldsetErrorMessage>\n ) : null)}\n </styled.fieldset>\n </FieldsetContext>\n )\n },\n \"root\",\n)()\n\nexport interface FieldsetLegendProps extends HTMLStyledProps<\"legend\"> {}\n\nexport const FieldsetLegend = withContext<\"legend\", FieldsetLegendProps>(\n \"legend\",\n \"legend\",\n)(undefined, (props) => {\n const { id, disabled, invalid } = useFieldsetContext() ?? {}\n\n return {\n id,\n \"data-disabled\": dataAttr(disabled),\n \"data-invalid\": dataAttr(invalid),\n ...props,\n }\n})\n\nexport interface FieldsetHeaderProps extends HTMLStyledProps {}\n\nexport const FieldsetHeader = withContext<\"div\", FieldsetHeaderProps>(\n \"div\",\n \"header\",\n)()\n\nexport interface FieldsetContentProps extends HTMLStyledProps {}\n\nexport const FieldsetContent = withContext<\"div\", FieldsetContentProps>(\n \"div\",\n \"content\",\n)()\n\nexport interface FieldsetHelperMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldsetHelperMessage = withContext<\n \"span\",\n FieldsetHelperMessageProps\n>(\"span\", \"helperMessage\")(undefined, (props) => {\n const { id } = useFieldsetContext() ?? {}\n\n return { \"aria-describedby\": id, ...props }\n})\n\nexport interface FieldsetErrorMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldsetErrorMessage = withContext<\n \"span\",\n FieldsetErrorMessageProps\n>((props) => {\n const { invalid } = useFieldsetContext() ?? {}\n\n return (\n <styled.span\n aria-live={invalid ? \"polite\" : undefined}\n hidden={!invalid}\n {...props}\n />\n )\n}, \"errorMessage\")()\n"],"mappings":"~~;;;;;;;;;;;;;AAkBA~~,MAAM,CAAC,iBAAiB,sBAAsBA,gBAA+B;CAC3E,MAAM;CACN,QAAQ;CACT,CAAC;AAwCF,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,aACA,iBACE,oBACF,YACA,cACD;;;;;;AASD,MAAa,eAAe,cACzB,EACC,IACA,UACA,UACA,cACA,eACA,SACA,QACA,UACA,UACA,cACA,mBACA,aACA,oBACA,aACA,GAAG,WACC;CACJ,MAAM,OAAO,OAAO;CACpB,MAAM,CACJ,iBACA,cACA,cACA,eACA,qBACA,sBACE,iBACF,UACA,gBACA,gBACA,iBACA,uBACA,qBACD;AAED,QAAO;AAaP,QACE,oBAAC;EAAgB,OAZH,eACP;GACL;GACA;GACA;GACA;GACA;GACD,GACD;GAAC;GAAI;GAAU;GAAS;GAAU;GAAS,CAC5C;YAIG,qBAAC,OAAO;GAAS,GAAI;;~~IAClB~~,gBACC,qBAAC;KAAe,GAAI;gBACjB,iBACE,SACC,oBAAC;MAAe,GAAI;gBAAc;OAAwB,GACxD,OAEL,wBACE,gBACC,oBAAC;MAAsB,GAAI;gBACxB;OACqB,GACtB;MACS;IAGlB,iBACC,oBAAC;KAAgB,GAAI;eAClB;MACe;IAGnB,uBACE,eACC,oBAAC;KAAqB,GAAI;eACvB;MACoB,GACrB;;IACU;GACF;GAGtB,OACD,EAAE;~~AAIH~~,MAAa,iBAAiB,YAC5B,UACA,SACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,IAAI,UAAU,YAAY,oBAAoB,IAAI,EAAE;AAE5D,QAAO;EACL;EACA,6CAA0B,SAAS;EACnC,4CAAyB,QAAQ;EACjC,GAAG;EACJ;EACD;AAIF,MAAa,iBAAiB,YAC5B,OACA,SACD,EAAE;AAIH,MAAa,kBAAkB,YAC7B,OACA,UACD,EAAE;AAIH,MAAa,wBAAwB,YAGnC,QAAQ,gBAAgB,CAAC,SAAY,UAAU;CAC/C,MAAM,EAAE,OAAO,oBAAoB,IAAI,EAAE;AAEzC,QAAO;EAAE,oBAAoB;EAAI,GAAG;EAAO;EAC3C;AAIF,MAAa,uBAAuB,aAGjC,UAAU;CACX,MAAM,EAAE,YAAY,oBAAoB,IAAI,EAAE;AAE9C,QACE,oBAAC,OAAO;EACN,aAAW,UAAU,WAAW;EAChC,QAAQ,CAAC;EACT,GAAI;GACJ;GAEH,eAAe,EAAE"}
1	+ {"version":3,"file":"fieldset.js","names":["createContext"],"sources":["../../../../src/components/fieldset/fieldset.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { FieldsetStyle } from \"./fieldset.style\"\nimport { useId, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, cx, dataAttr, useSplitChildren } from \"../../utils\"\nimport { useFormContext } from \"../form\"\nimport { fieldsetStyle } from \"./fieldset.style\"\n\ninterface FieldsetContext extends Pick<\n FieldsetRootProps,\n \"disabled\" \| \"invalid\" \| \"readOnly\" \| \"required\"\n> {\n id?: string\n}\n\nconst [FieldsetContext, useFieldsetContext] = createContext<FieldsetContext>({\n name: \"FieldsetContext\",\n strict: false,\n})\n\nexport { FieldsetContext, useFieldsetContext }\n\nexport interface FieldsetRootProps\n extends HTMLStyledProps<\"fieldset\">, ThemeProps<FieldsetStyle>, FieldProps {\n /*\n The fieldset error message to use.\n /\n errorMessage?: ReactNode\n /\n The fieldset helper message to use.\n /\n helperMessage?: ReactNode\n /\n The fieldset legend to use.\n /\n legend?: ReactNode\n /\n Props the content component.\n /\n contentProps?: FieldsetContentProps\n /\n Props the error message component.\n /\n errorMessageProps?: FieldsetErrorMessageProps\n /\n Props the header component.\n /\n headerProps?: FieldsetHeaderProps\n /\n Props the helper message component.\n /\n helperMessageProps?: FieldsetHelperMessageProps\n /\n Props the legend component.\n /\n legendProps?: FieldsetLegendProps\n}\n\nconst {\n PropsContext: FieldsetPropsContext,\n usePropsContext: useFieldsetPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FieldsetRootProps, FieldsetStyle, FieldsetContext>(\n \"fieldset\",\n fieldsetStyle,\n)\n\nexport { FieldsetPropsContext, useFieldsetPropsContext }\n\n/\n `Fieldset` is a component used to group multiple controls.\n \n @see https://yamada-ui.com/docs/components/fieldset\n */\nexport const FieldsetRoot = withProvider<\"fieldset\", FieldsetRootProps>(\n ({\n id,\n \"aria-labelledby\": ariaLabelledBy,\n children,\n disabled,\n errorMessage,\n helperMessage,\n invalid,\n legend,\n readOnly,\n required,\n contentProps,\n errorMessageProps,\n headerProps,\n helperMessageProps,\n legendProps,\n ...rest\n }) => {\n const uuid = useId()\n const [\n omittedChildren,\n customLegend,\n customHeader,\n customContent,\n customHelperMessage,\n customErrorMessage,\n ] = useSplitChildren(\n children,\n FieldsetLegend,\n FieldsetHeader,\n FieldsetContent,\n FieldsetHelperMessage,\n FieldsetErrorMessage,\n )\n\n id ??= uuid\n\n const context = useMemo(\n () => ({\n id,\n disabled,\n invalid,\n readOnly,\n required,\n }),\n [id, disabled, invalid, readOnly, required],\n )\n\n return (\n <FieldsetContext value={context}>\n <styled.fieldset aria-labelledby={cx(id, ariaLabelledBy)} {...rest}>\n {customHeader \|\| (\n <FieldsetHeader {...headerProps}>\n {customLegend \|\|\n (legend ? (\n <FieldsetLegend {...legendProps}>{legend}</FieldsetLegend>\n ) : null)}\n\n {customHelperMessage \|\|\n (helperMessage ? (\n <FieldsetHelperMessage {...helperMessageProps}>\n {helperMessage}\n </FieldsetHelperMessage>\n ) : null)}\n </FieldsetHeader>\n )}\n\n {customContent \|\| (\n <FieldsetContent {...contentProps}>\n {omittedChildren}\n </FieldsetContent>\n )}\n\n {customErrorMessage \|\|\n (errorMessage ? (\n <FieldsetErrorMessage {...errorMessageProps}>\n {errorMessage}\n </FieldsetErrorMessage>\n ) : null)}\n </styled.fieldset>\n </FieldsetContext>\n )\n },\n \"root\",\n)((props) => {\n const { size, variant } = useFormContext() ?? {}\n\n return { size, variant, ...props }\n})\n\nexport interface FieldsetLegendProps extends HTMLStyledProps<\"legend\"> {}\n\nexport const FieldsetLegend = withContext<\"legend\", FieldsetLegendProps>(\n \"legend\",\n \"legend\",\n)(undefined, (props) => {\n const { id, disabled, invalid } = useFieldsetContext() ?? {}\n\n return {\n id,\n \"data-disabled\": dataAttr(disabled),\n \"data-invalid\": dataAttr(invalid),\n ...props,\n }\n})\n\nexport interface FieldsetHeaderProps extends HTMLStyledProps {}\n\nexport const FieldsetHeader = withContext<\"div\", FieldsetHeaderProps>(\n \"div\",\n \"header\",\n)()\n\nexport interface FieldsetContentProps extends HTMLStyledProps {}\n\nexport const FieldsetContent = withContext<\"div\", FieldsetContentProps>(\n \"div\",\n \"content\",\n)()\n\nexport interface FieldsetHelperMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldsetHelperMessage = withContext<\n \"span\",\n FieldsetHelperMessageProps\n>(\"span\", \"helperMessage\")(undefined, (props) => {\n const { id } = useFieldsetContext() ?? {}\n\n return { \"aria-describedby\": id, ...props }\n})\n\nexport interface FieldsetErrorMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldsetErrorMessage = withContext<\n \"span\",\n FieldsetErrorMessageProps\n>((props) => {\n const { invalid } = useFieldsetContext() ?? {}\n\n return (\n <styled.span\n aria-live={invalid ? \"polite\" : undefined}\n hidden={!invalid}\n {...props}\n />\n )\n}, \"errorMessage\")()\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAM,CAAC,iBAAiB,sBAAsBA,gBAA+B;CAC3E,MAAM;CACN,QAAQ;CACT,CAAC;AAwCF,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,aACA,iBACE,oBACF,YACA,cACD;;;;;;AASD,MAAa,eAAe,cACzB,EACC,IACA,mBAAmB,gBACnB,UACA,UACA,cACA,eACA,SACA,QACA,UACA,UACA,cACA,mBACA,aACA,oBACA,aACA,GAAG,WACC;CACJ,MAAM,OAAO,OAAO;CACpB,MAAM,CACJ,iBACA,cACA,cACA,eACA,qBACA,sBACE,iBACF,UACA,gBACA,gBACA,iBACA,uBACA,qBACD;AAED,QAAO;AAaP,QACE,oBAAC;EAAgB,OAZH,eACP;GACL;GACA;GACA;GACA;GACA;GACD,GACD;GAAC;GAAI;GAAU;GAAS;GAAU;GAAS,CAC5C;YAIG,qBAAC,OAAO;GAAS,yCAAoB,IAAI,eAAe;GAAE,GAAI;;IAC3D,gBACC,qBAAC;KAAe,GAAI;gBACjB,iBACE,SACC,oBAAC;MAAe,GAAI;gBAAc;OAAwB,GACxD,OAEL,wBACE,gBACC,oBAAC;MAAsB,GAAI;gBACxB;OACqB,GACtB;MACS;IAGlB,iBACC,oBAAC;KAAgB,GAAI;eAClB;MACe;IAGnB,uBACE,eACC,oBAAC;KAAqB,GAAI;eACvB;MACoB,GACrB;;IACU;GACF;GAGtB,OACD,EAAE,UAAU;CACX,MAAM,EAAE,MAAM,YAAY,gBAAgB,IAAI,EAAE;AAEhD,QAAO;EAAE;EAAM;EAAS,GAAG;EAAO;EAClC;AAIF,MAAa,iBAAiB,YAC5B,UACA,SACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,IAAI,UAAU,YAAY,oBAAoB,IAAI,EAAE;AAE5D,QAAO;EACL;EACA,6CAA0B,SAAS;EACnC,4CAAyB,QAAQ;EACjC,GAAG;EACJ;EACD;AAIF,MAAa,iBAAiB,YAC5B,OACA,SACD,EAAE;AAIH,MAAa,kBAAkB,YAC7B,OACA,UACD,EAAE;AAIH,MAAa,wBAAwB,YAGnC,QAAQ,gBAAgB,CAAC,SAAY,UAAU;CAC/C,MAAM,EAAE,OAAO,oBAAoB,IAAI,EAAE;AAEzC,QAAO;EAAE,oBAAoB;EAAI,GAAG;EAAO;EAC3C;AAIF,MAAa,uBAAuB,aAGjC,UAAU;CACX,MAAM,EAAE,YAAY,oBAAoB,IAAI,EAAE;AAE9C,QACE,oBAAC,OAAO;EACN,aAAW,UAAU,WAAW;EAChC,QAAQ,CAAC;EACT,GAAI;GACJ;GAEH,eAAe,EAAE"}

package/dist/esm/components/fieldset/fieldset.style.js CHANGED Viewed

@@ -43,7 +43,7 @@ const fieldsetStyle = defineComponentSlotStyle({
 		} },
 		outline: { root: { borderWidth: "1px" } },
 		panel: { root: { layerStyle: "panel" } },
-		plain: {}
+		plain: { root: {} }
 	},
 	sizes: {
 		sm: {

package/dist/esm/components/fieldset/fieldset.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fieldset.style.js","names":[],"sources":["../../../../src/components/fieldset/fieldset.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const fieldsetStyle = defineComponentSlotStyle({\n base: {\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n w: \"full\",\n },\n errorMessage: {\n alignItems: \"center\",\n color: \"fg.error\",\n display: \"inline-flex\",\n gap: \"1\",\n },\n header: {\n display: \"flex\",\n flexDirection: \"column\",\n w: \"full\",\n },\n helperMessage: {\n alignItems: \"center\",\n color: \"fg.muted\",\n display: \"inline-flex\",\n gap: \"1\",\n },\n legend: {\n fontWeight: \"medium\",\n _disabled: {\n opacity: 0.4~~,\n~~ },\n },\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n w: \"full\",\n },\n },\n\n variants: {\n elevated: {\n root: {\n bg: \"bg.panel\"~~,\n~~ boxShadow: \"md\"~~,\n~~ }~~,\n~~ },\n outline: {\n root: {\n borderWidth: \"1px\"~~,\n~~ }~~,\n~~ },\n panel: {\n root: {\n layerStyle: \"panel\"~~,\n~~ }~~,\n~~ },\n plain: {},\n },\n\n sizes: {\n sm: {\n content: {\n gap: \"3\"~~,\n~~ },\n errorMessage: {\n fontSize: \"sm\"~~,\n~~ },\n header: {\n gap: \"1\"~~,\n~~ },\n helperMessage: {\n fontSize: \"sm\"~~,\n~~ },\n legend: {\n fontSize: \"md\"~~,\n~~ },\n root: {\n gap: \"3\"~~,\n~~ },\n },\n md: {\n content: {\n gap: \"4\"~~,\n~~ },\n errorMessage: {\n fontSize: \"sm\"~~,\n~~ },\n header: {\n gap: \"1\"~~,\n~~ },\n helperMessage: {\n fontSize: \"sm\"~~,\n~~ },\n legend: {\n fontSize: \"md\"~~,\n~~ },\n root: {\n gap: \"4\"~~,\n~~ },\n },\n lg: {\n content: {\n gap: \"6\"~~,\n~~ },\n errorMessage: {\n fontSize: \"md\"~~,\n~~ },\n header: {\n gap: \"1\"~~,\n~~ },\n helperMessage: {\n fontSize: \"md\"~~,\n~~ },\n legend: {\n fontSize: \"lg\"~~,\n~~ },\n root: {\n gap: \"6\"~~,\n~~ },\n },\n },\n\n compounds: [\n {\n css: {\n root: {\n p: \"3\"~~,\n~~ rounded: \"l2\"~~,\n~~ }~~,\n~~ },\n size: \"sm\",\n variant: [\"elevated\", \"outline\", \"panel\"],\n },\n {\n css: {\n root: {\n p: \"4\"~~,\n~~ rounded: \"l2\"~~,\n~~ }~~,\n~~ },\n size: \"md\",\n variant: [\"elevated\", \"outline\", \"panel\"],\n },\n {\n css: {\n root: {\n p: \"6\"~~,\n~~ rounded: \"l2\"~~,\n~~ }~~,\n~~ },\n size: \"lg\",\n variant: [\"elevated\", \"outline\", \"panel\"],\n },\n ],\n\n defaultProps: {\n size: \"md\",\n variant: \"plain\",\n },\n})\n\nexport type FieldsetStyle = typeof fieldsetStyle\n"],"mappings":";;;;AAEA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,SAAS;GACP,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,cAAc;GACZ,YAAY;GACZ,OAAO;GACP,SAAS;GACT,KAAK;GACN;EACD,QAAQ;GACN,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,eAAe;GACb,YAAY;GACZ,OAAO;GACP,SAAS;GACT,KAAK;GACN;EACD,QAAQ;GACN,YAAY;GACZ,WAAW,~~EACT~~,SAAS,~~IACV~~;~~GACF~~;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACF;CAED,UAAU;EACR,UAAU,~~EACR~~,MAAM;~~GACJ~~,IAAI;~~GACJ~~,WAAW;~~GACZ~~,~~EACF~~;~~EACD~~,SAAS,~~EACP~~,MAAM,~~EACJ~~,aAAa,~~OACd~~,~~EACF~~;~~EACD~~,OAAO,~~EACL~~,MAAM,~~EACJ~~,YAAY,~~SACb~~,~~EACF~~;~~EACD~~,OAAO,EAAE;~~EACV~~;CAED,OAAO;EACL,IAAI;GACF,SAAS,~~EACP~~,KAAK,~~KACN~~;~~GACD~~,cAAc,~~EACZ~~,UAAU,~~MACX~~;~~GACD~~,QAAQ,~~EACN~~,KAAK,~~KACN~~;~~GACD~~,eAAe,~~EACb~~,UAAU,~~MACX~~;~~GACD~~,QAAQ,~~EACN~~,UAAU,~~MACX~~;~~GACD~~,MAAM,~~EACJ~~,KAAK,~~KACN~~;~~GACF~~;EACD,IAAI;GACF,SAAS,~~EACP~~,KAAK,~~KACN~~;~~GACD~~,cAAc,~~EACZ~~,UAAU,~~MACX~~;~~GACD~~,QAAQ,~~EACN~~,KAAK,~~KACN~~;~~GACD~~,eAAe,~~EACb~~,UAAU,~~MACX~~;~~GACD~~,QAAQ,~~EACN~~,UAAU,~~MACX~~;~~GACD~~,MAAM,~~EACJ~~,KAAK,~~KACN~~;~~GACF~~;EACD,IAAI;GACF,SAAS,~~EACP~~,KAAK,~~KACN~~;~~GACD~~,cAAc,~~EACZ~~,UAAU,~~MACX~~;~~GACD~~,QAAQ,~~EACN~~,KAAK,~~KACN~~;~~GACD~~,eAAe,~~EACb~~,UAAU,~~MACX~~;~~GACD~~,QAAQ,~~EACN~~,UAAU,~~MACX~~;~~GACD~~,MAAM,~~EACJ~~,KAAK,~~KACN~~;~~GACF~~;EACF;CAED,WAAW;EACT;GACE,KAAK,~~EACH~~,MAAM;~~IACJ~~,GAAG;~~IACH~~,SAAS;~~IACV~~,~~EACF~~;~~GACD~~,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,~~EACH~~,MAAM;~~IACJ~~,GAAG;~~IACH~~,SAAS;~~IACV~~,~~EACF~~;~~GACD~~,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,~~EACH~~,MAAM;~~IACJ~~,GAAG;~~IACH~~,SAAS;~~IACV~~,~~EACF~~;~~GACD~~,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}
1	+ {"version":3,"file":"fieldset.style.js","names":[],"sources":["../../../../src/components/fieldset/fieldset.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const fieldsetStyle = defineComponentSlotStyle({\n base: {\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n w: \"full\",\n },\n errorMessage: {\n alignItems: \"center\",\n color: \"fg.error\",\n display: \"inline-flex\",\n gap: \"1\",\n },\n header: {\n display: \"flex\",\n flexDirection: \"column\",\n w: \"full\",\n },\n helperMessage: {\n alignItems: \"center\",\n color: \"fg.muted\",\n display: \"inline-flex\",\n gap: \"1\",\n },\n legend: {\n fontWeight: \"medium\",\n _disabled: { opacity: 0.4 },\n },\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n w: \"full\",\n },\n },\n\n variants: {\n elevated: { root: { bg: \"bg.panel\", boxShadow: \"md\" } },\n outline: { root: { borderWidth: \"1px\" } },\n panel: { root: { layerStyle: \"panel\" } },\n plain: { root: {} },\n },\n\n sizes: {\n sm: {\n content: { gap: \"3\" },\n errorMessage: { fontSize: \"sm\" },\n header: { gap: \"1\" },\n helperMessage: { fontSize: \"sm\" },\n legend: { fontSize: \"md\" },\n root: { gap: \"3\" },\n },\n md: {\n content: { gap: \"4\" },\n errorMessage: { fontSize: \"sm\" },\n header: { gap: \"1\" },\n helperMessage: { fontSize: \"sm\" },\n legend: { fontSize: \"md\" },\n root: { gap: \"4\" },\n },\n lg: {\n content: { gap: \"6\" },\n errorMessage: { fontSize: \"md\" },\n header: { gap: \"1\" },\n helperMessage: { fontSize: \"md\" },\n legend: { fontSize: \"lg\" },\n root: { gap: \"6\" },\n },\n },\n\n compounds: [\n {\n css: { root: { p: \"3\", rounded: \"l2\" } },\n size: \"sm\",\n variant: [\"elevated\", \"outline\", \"panel\"],\n },\n {\n css: { root: { p: \"4\", rounded: \"l2\" } },\n size: \"md\",\n variant: [\"elevated\", \"outline\", \"panel\"],\n },\n {\n css: { root: { p: \"6\", rounded: \"l2\" } },\n size: \"lg\",\n variant: [\"elevated\", \"outline\", \"panel\"],\n },\n ],\n\n defaultProps: {\n size: \"md\",\n variant: \"plain\",\n },\n})\n\nexport type FieldsetStyle = typeof fieldsetStyle\n"],"mappings":";;;;AAEA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,SAAS;GACP,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,cAAc;GACZ,YAAY;GACZ,OAAO;GACP,SAAS;GACT,KAAK;GACN;EACD,QAAQ;GACN,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,eAAe;GACb,YAAY;GACZ,OAAO;GACP,SAAS;GACT,KAAK;GACN;EACD,QAAQ;GACN,YAAY;GACZ,WAAW,EAAE,SAAS,IAAK;GAC5B;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACF;CAED,UAAU;EACR,UAAU,EAAE,MAAM;GAAE,IAAI;GAAY,WAAW;GAAM,EAAE;EACvD,SAAS,EAAE,MAAM,EAAE,aAAa,OAAO,EAAE;EACzC,OAAO,EAAE,MAAM,EAAE,YAAY,SAAS,EAAE;EACxC,OAAO,EAAE,MAAM,EAAE,EAAE;EACpB;CAED,OAAO;EACL,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAK,KAAK;GACnB;EACD,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAK,KAAK;GACnB;EACD,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAK,KAAK;GACnB;EACF;CAED,WAAW;EACT;GACE,KAAK,EAAE,MAAM;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACxC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,EAAE,MAAM;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACxC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,EAAE,MAAM;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACxC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}

package/dist/esm/components/file-button/file-button.js CHANGED Viewed

@@ -5,10 +5,10 @@ import { createComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { Portal } from "../portal/portal.js";
 import "../portal/index.js";
-import { useInputBorder } from "../input/use-input-border.js";
-import "../input/index.js";
 import { Button } from "../button/button.js";
 import "../button/index.js";
+import { useInputBorder } from "../input/use-input-border.js";
+import "../input/index.js";
 import { fileButtonStyle } from "./file-button.style.js";
 import { useFileButton } from "./use-file-button.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/file-button/use-file-button.js CHANGED Viewed

@@ -1,21 +1,18 @@
 "use client";
-import { utils_exports } from "../../utils/index.js";
 import { useFileInput } from "../file-input/use-file-input.js";
 import "../file-input/index.js";
 import { useCallback } from "react";
 //#region src/components/file-button/use-file-button.ts
 const useFileButton = (props = {}) => {
-	const { interactive, clickableProps, getInputProps } = useFileInput(props);
+	const { clickableProps, getInputProps } = useFileInput(props);
 	return {
 		clickableProps,
 		getButtonProps: useCallback((props$1) => ({
 			...clickableProps,
-			"aria-disabled": (0, utils_exports.ariaAttr)(!interactive),
-			tabIndex: interactive ? clickableProps.tabIndex : -1,
 			...props$1
-		}), [clickableProps, interactive]),
+		}), [clickableProps]),
 		getInputProps
 	};
 };

package/dist/esm/components/file-button/use-file-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-file-button.js","names":["props"],"sources":["../../../../src/components/file-button/use-file-button.ts"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseFileInputProps } from \"../file-input\"\nimport { useCallback } from \"react\"\nimport { ~~ariaAttr } from \"../../utils\"\nimport {~~ useFileInput } from \"../file-input\"\n\nexport interface UseFileButtonProps\n extends UseFileInputProps<\"button\">, FieldProps {}\n\nexport const useFileButton = (props: UseFileButtonProps = {}) => {\n const { ~~interactive,~~ clickableProps, getInputProps } ~~=\n~~ useFileInput<\"button\">(props)\n\n const getButtonProps: PropGetter<\"button\"> = useCallback(\n (props) => ({\n ...clickableProps,\n ~~\"aria-disabled\": ariaAttr(!interactive),\n tabIndex: interactive ? clickableProps.tabIndex : -1,\n~~ ...props,\n }),\n [clickableProps~~, interactive~~],\n )\n\n return {\n clickableProps,\n getButtonProps,\n getInputProps,\n }\n}\n\nexport type UseFileButtonReturn = ReturnType<typeof useFileButton>\n"],"mappings":"~~;;;;;;;;AAYA~~,MAAa,iBAAiB,QAA4B,EAAE,KAAK;CAC/D,MAAM,EAAE,~~aAAa,~~gBAAgB,~~kBACnC~~,aAAuB,MAAM;~~AAY/B~~,QAAO;EACL;EACA,~~gBAZ2C~~,aAC1C,aAAW;GACV,GAAG;GACH,~~6CAA0B,CAAC,YAAY;GACvC,UAAU,cAAc,eAAe,WAAW;GAClD,~~GAAGA;GACJ,GACD,CAAC,~~gBAAgB~~,~~YAAY,CAC9B~~;EAKC;EACD"}
1	+ {"version":3,"file":"use-file-button.js","names":["props"],"sources":["../../../../src/components/file-button/use-file-button.ts"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseFileInputProps } from \"../file-input\"\nimport { useCallback } from \"react\"\nimport { useFileInput } from \"../file-input\"\n\nexport interface UseFileButtonProps\n extends UseFileInputProps<\"button\">, FieldProps {}\n\nexport const useFileButton = (props: UseFileButtonProps = {}) => {\n const { clickableProps, getInputProps } = useFileInput<\"button\">(props)\n\n const getButtonProps: PropGetter<\"button\"> = useCallback(\n (props) => ({\n ...clickableProps,\n ...props,\n }),\n [clickableProps],\n )\n\n return {\n clickableProps,\n getButtonProps,\n getInputProps,\n }\n}\n\nexport type UseFileButtonReturn = ReturnType<typeof useFileButton>\n"],"mappings":";;;;;;;AAWA,MAAa,iBAAiB,QAA4B,EAAE,KAAK;CAC/D,MAAM,EAAE,gBAAgB,kBAAkB,aAAuB,MAAM;AAUvE,QAAO;EACL;EACA,gBAV2C,aAC1C,aAAW;GACV,GAAG;GACH,GAAGA;GACJ,GACD,CAAC,eAAe,CACjB;EAKC;EACD"}

package/dist/esm/components/file-input/use-file-input.js CHANGED Viewed

@@ -11,7 +11,10 @@ import { useCallback, useRef } from "react";
 //#region src/components/file-input/use-file-input.ts
 const useFileInput = (props) => {
-	const { props: { id, ref, form, name, accept, defaultValue, disabled, multiple, readOnly, required, resetRef, value, onChange: onChangeProp, onClick: onClickProp, ...rest }, ariaProps, dataProps, eventProps } = useFieldProps(props);
+	const { props: { id, ref, form, name, accept, defaultValue, disabled, multiple, readOnly, required, resetRef, value, onChange: onChangeProp, onClick: onClickProp, ...rest }, ariaProps, dataProps, eventProps } = useFieldProps({
+		...props,
+		notSupportReadOnly: true
+	});
 	const interactive = !(readOnly || disabled);
 	const inputRef = useRef(null);
 	const [values, setValues] = useControllableState({
@@ -33,10 +36,12 @@ const useFileInput = (props) => {
 		setValues(files?.length ? files : void 0);
 	}, [setValues]);
 	const clickableProps = useClickable({
+		...ariaProps,
 		...dataProps,
 		...eventProps,
 		...rest,
-		disabled,
+		disabled: !interactive,
+		focusable: readOnly && !disabled,
 		focusOnClick: interactive,
 		onClick: (0, utils_exports.handlerAll)(onClickProp, onClick)
 	});

package/dist/esm/components/file-input/use-file-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-file-input.js","names":["getInputProps: PropGetter<\"input\">","props"],"sources":["../../../../src/components/file-input/use-file-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n assignRef,\n dataAttr,\n handlerAll,\n isNull,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport type UseFileInputProps<Y extends \"button\" \| \"input\" = \"input\"> =\n FieldProps &\n Omit<HTMLProps<Y>, \"defaultValue\" \| \"onChange\" \| \"ref\" \| \"value\"> &\n Pick<HTMLProps<\"input\">, \"accept\" \| \"multiple\" \| \"ref\"> & {\n /*\n The initial value of the file input.\n /\n defaultValue?: File[]\n /\n Ref to a reset function.\n /\n resetRef?: RefObject<(() => void) \| null>\n /\n The value of the file input.\n /\n value?: File[]\n /\n Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] \| undefined) => void\n }\n\nexport const useFileInput = <Y extends \"button\" \| \"input\" = \"input\">(\n props: UseFileInputProps<Y>,\n) => {\n const {\n props: {\n id,\n ref,\n form,\n name,\n accept,\n defaultValue,\n disabled,\n multiple,\n readOnly,\n required,\n resetRef,\n value,\n onChange: onChangeProp,\n onClick: onClickProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps<HTMLElement, UseFileInputProps<Y>>(props)\n const interactive = !(readOnly \|\| disabled)\n const inputRef = useRef<HTMLInputElement>(null)\n const [values, setValues] = useControllableState<File[] \| undefined>({\n defaultValue,\n value,\n onChange: onChangeProp,\n })\n const count = values?.length ?? 0\n\n const onClick = useCallback(() => {\n if (!interactive) return\n\n inputRef.current?.click()\n }, [interactive])\n\n const onReset = useCallback(() => {\n if (inputRef.current) inputRef.current.value = \"\"\n\n setValues(undefined)\n }, [setValues])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n const files = !isNull(ev.currentTarget.files)\n ? Array.from(ev.currentTarget.files)\n : undefined\n\n setValues(files?.length ? files : undefined)\n },\n [setValues],\n )\n\n const clickableProps = useClickable<HTMLElement, Dict>({\n ...dataProps,\n ...eventProps,\n ...rest,\n disabled,\n focusOnClick: interactive,\n onClick: handlerAll(onClickProp, onClick),\n })\n\n assignRef(resetRef, onReset)\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...visuallyHiddenAttributes,\n ...ariaProps,\n ...dataProps,\n id,\n form,\n type: \"file\",\n name,\n accept,\n disabled,\n multiple,\n readOnly,\n required,\n ...props,\n ref: mergeRefs(inputRef, props.ref, ref),\n onChange: handlerAll(props.onChange, onChange),\n }),\n [\n required,\n ariaProps,\n dataProps,\n id,\n form,\n name,\n accept,\n disabled,\n multiple,\n readOnly,\n ref,\n onChange,\n ],\n )\n\n const getFieldProps: PropGetter = useCallback(\n (props = {}) => ({\n \"data-placeholder\": dataAttr(!count),\n ...clickableProps,\n tabIndex: interactive ? 0 : clickableProps.tabIndex,\n ...props,\n }),\n [clickableProps, count, interactive],\n )\n\n return {\n disabled,\n interactive,\n readOnly,\n required,\n values,\n clickableProps,\n getFieldProps,\n getInputProps,\n }\n}\n\nexport type UseFileInputReturn = ReturnType<typeof useFileInput>\n"],"mappings":";;;;;;;;;;;;AAyCA,MAAa,gBACX,UACG;CACH,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,MACA,QACA,cACA,UACA,UACA,UACA,UACA,UACA,OACA,UAAU,cACV,SAAS,aACT,GAAG,QAEL,WACA,WACA,eACE,cAAiD,~~MAAM~~;~~CAC3D~~,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,QAAQ,aAAa,qBAAyC;EACnE;EACA;EACA,UAAU;EACX,CAAC;CACF,MAAM,QAAQ,QAAQ,UAAU;CAEhC,MAAM,UAAU,kBAAkB;AAChC,MAAI,CAAC,YAAa;AAElB,WAAS,SAAS,OAAO;IACxB,CAAC,YAAY,CAAC;CAEjB,MAAM,UAAU,kBAAkB;AAChC,MAAI,SAAS,QAAS,UAAS,QAAQ,QAAQ;AAE/C,YAAU,OAAU;IACnB,CAAC,UAAU,CAAC;CAEf,MAAM,WAAW,aACd,OAAsC;EACrC,MAAM,QAAQ,2BAAQ,GAAG,cAAc,MAAM,GACzC,MAAM,KAAK,GAAG,cAAc,MAAM,GAClC;AAEJ,YAAU,OAAO,SAAS,QAAQ,OAAU;IAE9C,CAAC,UAAU,CACZ;CAED,MAAM,iBAAiB,aAAgC;EACrD,GAAG;EACH,GAAG;EACH,GAAG;EACH;~~EACA~~,cAAc;EACd,uCAAoB,aAAa,QAAQ;EAC1C,CAAC;AAEF,WAAU,UAAU,QAAQ;CAE5B,MAAMA,gBAAqC,aACxC,UAAQ,EAAE,MAAM;EACf,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACA;EACA,MAAM;EACN;EACA;EACA;EACA;EACA;EACA;EACA,GAAGC;EACH,KAAK,UAAU,UAAUA,QAAM,KAAK,IAAI;EACxC,wCAAqBA,QAAM,UAAU,SAAS;EAC/C,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAYD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,eAjBgC,aAC/B,UAAQ,EAAE,MAAM;GACf,gDAA6B,CAAC,MAAM;GACpC,GAAG;GACH,UAAU,cAAc,IAAI,eAAe;GAC3C,GAAGA;GACJ,GACD;GAAC;GAAgB;GAAO;GAAY,CACrC;EAUC;EACD"}
1	+ {"version":3,"file":"use-file-input.js","names":["getInputProps: PropGetter<\"input\">","props"],"sources":["../../../../src/components/file-input/use-file-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n assignRef,\n dataAttr,\n handlerAll,\n isNull,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport type UseFileInputProps<Y extends \"button\" \| \"input\" = \"input\"> =\n FieldProps &\n Omit<HTMLProps<Y>, \"defaultValue\" \| \"onChange\" \| \"ref\" \| \"value\"> &\n Pick<HTMLProps<\"input\">, \"accept\" \| \"multiple\" \| \"ref\"> & {\n /*\n The initial value of the file input.\n /\n defaultValue?: File[]\n /\n Ref to a reset function.\n /\n resetRef?: RefObject<(() => void) \| null>\n /\n The value of the file input.\n /\n value?: File[]\n /\n Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] \| undefined) => void\n }\n\nexport const useFileInput = <Y extends \"button\" \| \"input\" = \"input\">(\n props: UseFileInputProps<Y>,\n) => {\n const {\n props: {\n id,\n ref,\n form,\n name,\n accept,\n defaultValue,\n disabled,\n multiple,\n readOnly,\n required,\n resetRef,\n value,\n onChange: onChangeProp,\n onClick: onClickProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps<HTMLElement, UseFileInputProps<Y>>({\n ...props,\n notSupportReadOnly: true,\n })\n const interactive = !(readOnly \|\| disabled)\n const inputRef = useRef<HTMLInputElement>(null)\n const [values, setValues] = useControllableState<File[] \| undefined>({\n defaultValue,\n value,\n onChange: onChangeProp,\n })\n const count = values?.length ?? 0\n\n const onClick = useCallback(() => {\n if (!interactive) return\n\n inputRef.current?.click()\n }, [interactive])\n\n const onReset = useCallback(() => {\n if (inputRef.current) inputRef.current.value = \"\"\n\n setValues(undefined)\n }, [setValues])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n const files = !isNull(ev.currentTarget.files)\n ? Array.from(ev.currentTarget.files)\n : undefined\n\n setValues(files?.length ? files : undefined)\n },\n [setValues],\n )\n\n const clickableProps = useClickable<HTMLElement, Dict>({\n ...ariaProps,\n ...dataProps,\n ...eventProps,\n ...rest,\n disabled: !interactive,\n focusable: readOnly && !disabled,\n focusOnClick: interactive,\n onClick: handlerAll(onClickProp, onClick),\n })\n\n assignRef(resetRef, onReset)\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...visuallyHiddenAttributes,\n ...ariaProps,\n ...dataProps,\n id,\n form,\n type: \"file\",\n name,\n accept,\n disabled,\n multiple,\n readOnly,\n required,\n ...props,\n ref: mergeRefs(inputRef, props.ref, ref),\n onChange: handlerAll(props.onChange, onChange),\n }),\n [\n required,\n ariaProps,\n dataProps,\n id,\n form,\n name,\n accept,\n disabled,\n multiple,\n readOnly,\n ref,\n onChange,\n ],\n )\n\n const getFieldProps: PropGetter = useCallback(\n (props = {}) => ({\n \"data-placeholder\": dataAttr(!count),\n ...clickableProps,\n tabIndex: interactive ? 0 : clickableProps.tabIndex,\n ...props,\n }),\n [clickableProps, count, interactive],\n )\n\n return {\n disabled,\n interactive,\n readOnly,\n required,\n values,\n clickableProps,\n getFieldProps,\n getInputProps,\n }\n}\n\nexport type UseFileInputReturn = ReturnType<typeof useFileInput>\n"],"mappings":";;;;;;;;;;;;AAyCA,MAAa,gBACX,UACG;CACH,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,MACA,QACA,cACA,UACA,UACA,UACA,UACA,UACA,OACA,UAAU,cACV,SAAS,aACT,GAAG,QAEL,WACA,WACA,eACE,cAAiD;EACnD,GAAG;EACH,oBAAoB;EACrB,CAAC;CACF,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,QAAQ,aAAa,qBAAyC;EACnE;EACA;EACA,UAAU;EACX,CAAC;CACF,MAAM,QAAQ,QAAQ,UAAU;CAEhC,MAAM,UAAU,kBAAkB;AAChC,MAAI,CAAC,YAAa;AAElB,WAAS,SAAS,OAAO;IACxB,CAAC,YAAY,CAAC;CAEjB,MAAM,UAAU,kBAAkB;AAChC,MAAI,SAAS,QAAS,UAAS,QAAQ,QAAQ;AAE/C,YAAU,OAAU;IACnB,CAAC,UAAU,CAAC;CAEf,MAAM,WAAW,aACd,OAAsC;EACrC,MAAM,QAAQ,2BAAQ,GAAG,cAAc,MAAM,GACzC,MAAM,KAAK,GAAG,cAAc,MAAM,GAClC;AAEJ,YAAU,OAAO,SAAS,QAAQ,OAAU;IAE9C,CAAC,UAAU,CACZ;CAED,MAAM,iBAAiB,aAAgC;EACrD,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,UAAU,CAAC;EACX,WAAW,YAAY,CAAC;EACxB,cAAc;EACd,uCAAoB,aAAa,QAAQ;EAC1C,CAAC;AAEF,WAAU,UAAU,QAAQ;CAE5B,MAAMA,gBAAqC,aACxC,UAAQ,EAAE,MAAM;EACf,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACA;EACA,MAAM;EACN;EACA;EACA;EACA;EACA;EACA;EACA,GAAGC;EACH,KAAK,UAAU,UAAUA,QAAM,KAAK,IAAI;EACxC,wCAAqBA,QAAM,UAAU,SAAS;EAC/C,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAYD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,eAjBgC,aAC/B,UAAQ,EAAE,MAAM;GACf,gDAA6B,CAAC,MAAM;GACpC,GAAG;GACH,UAAU,cAAc,IAAI,eAAe;GAC3C,GAAGA;GACJ,GACD;GAAC;GAAgB;GAAO;GAAY,CACrC;EAUC;EACD"}

package/dist/esm/components/form/form.js ADDED Viewed

@@ -0,0 +1,124 @@
+"use client";
+import { useSplitChildren } from "../../utils/children.js";
+import { createContext as createContext$1 } from "../../utils/context.js";
+import { utils_exports } from "../../utils/index.js";
+import { styled } from "../../core/system/factory.js";
+import { createSlotComponent } from "../../core/components/create-component.js";
+import "../../core/index.js";
+import { formStyle } from "./form.style.js";
+import { Button } from "../button/button.js";
+import "../button/index.js";
+import { useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form/form.tsx
+const [FormContext, useFormContext] = createContext$1({
+	name: "FormContext",
+	strict: false
+});
+const { PropsContext: FormPropsContext, usePropsContext: useFormPropsContext, withContext, withProvider } = createSlotComponent("form", formStyle);
+/**
+* `Form` is a component used to group multiple form elements.
+*
+* @see https://yamada-ui.com/docs/components/form
+*/
+const FormRoot = withProvider(({ id, size, variant, "aria-labelledby": ariaLabelledBy, children, description, disabled, errorMessage, helperMessage, invalid, noValidate = true, optionalIndicator, readOnly, replace, required, requiredIndicator, submitButton, title, bodyProps, descriptionProps, footerProps, headerProps, submitButtonProps, titleProps, ...rest }) => {
+	const uuid = useId();
+	const titleId = useId();
+	const descriptionId = useId();
+	const [omittedChildren, customHeader, customBody, customFooter, customTitle, customDescription, customSubmitButton] = useSplitChildren(children, FormHeader, FormBody, FormFooter, FormTitle, FormDescription, FormSubmitButton);
+	id ??= uuid;
+	return /* @__PURE__ */ jsx(FormContext, {
+		value: useMemo(() => ({
+			id,
+			size,
+			variant,
+			descriptionId,
+			disabled,
+			errorMessage,
+			helperMessage,
+			invalid,
+			optionalIndicator,
+			readOnly,
+			replace,
+			required,
+			requiredIndicator,
+			titleId
+		}), [
+			id,
+			titleId,
+			descriptionId,
+			disabled,
+			size,
+			variant,
+			errorMessage,
+			helperMessage,
+			invalid,
+			readOnly,
+			replace,
+			required,
+			optionalIndicator,
+			requiredIndicator
+		]),
+		children: /* @__PURE__ */ jsxs(styled.form, {
+			id,
+			"aria-labelledby": (0, utils_exports.cx)(titleId, descriptionId, ariaLabelledBy),
+			noValidate,
+			...rest,
+			children: [
+				customHeader || (customTitle || title || customDescription || description ? /* @__PURE__ */ jsxs(FormHeader, {
+					...headerProps,
+					children: [customTitle || (title ? /* @__PURE__ */ jsx(FormTitle, {
+						...titleProps,
+						children: title
+					}) : null), customDescription || (description ? /* @__PURE__ */ jsx(FormDescription, {
+						...descriptionProps,
+						children: description
+					}) : null)]
+				}) : null),
+				customBody || /* @__PURE__ */ jsx(FormBody, {
+					...bodyProps,
+					children: omittedChildren
+				}),
+				customFooter || (customSubmitButton || submitButton ? /* @__PURE__ */ jsx(FormFooter, {
+					...footerProps,
+					children: customSubmitButton || (submitButton ? /* @__PURE__ */ jsx(FormSubmitButton, {
+						...submitButtonProps,
+						children: submitButton
+					}) : null)
+				}) : null)
+			]
+		})
+	});
+}, "root", { transferProps: ["size", "variant"] })();
+const FormHeader = withContext("div", "header")();
+const FormTitle = withContext("h3", "title")(void 0, (props) => {
+	const { titleId } = useFormContext() ?? {};
+	return {
+		id: titleId,
+		...props
+	};
+});
+const FormDescription = withContext("p", "description")(void 0, (props) => {
+	const { descriptionId, titleId } = useFormContext() ?? {};
+	return {
+		id: descriptionId,
+		"aria-describedby": titleId,
+		...props
+	};
+});
+const FormBody = withContext("div", "body")();
+const FormGroup = withContext("div", "group")();
+const FormFooter = withContext("div", "footer")();
+const FormSubmitButton = withContext(Button, "submitButton")({ type: "submit" }, (props) => {
+	const { id } = useFormContext() ?? {};
+	return {
+		form: id,
+		...props
+	};
+});
+//#endregion
+export { FormBody, FormContext, FormDescription, FormFooter, FormGroup, FormHeader, FormPropsContext, FormRoot, FormSubmitButton, FormTitle, useFormContext, useFormPropsContext };
+//# sourceMappingURL=form.js.map

package/dist/esm/components/form/form.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"form.js","names":["createContext"],"sources":["../../../../src/components/form/form.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { FormStyle } from \"./form.style\"\nimport { useId, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, cx, useSplitChildren } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { formStyle } from \"./form.style\"\n\ninterface FormContext extends Pick<\n FormRootProps,\n | \"disabled\"\n | \"errorMessage\"\n | \"helperMessage\"\n | \"invalid\"\n | \"optionalIndicator\"\n | \"readOnly\"\n | \"replace\"\n | \"required\"\n | \"requiredIndicator\"\n | \"size\"\n | \"variant\"\n> {\n descriptionId: string\n id: string\n titleId: string\n}\n\nconst [FormContext, useFormContext] = createContext<FormContext>({\n name: \"FormContext\",\n strict: false,\n})\n\nexport { FormContext, useFormContext }\n\nexport interface FormRootProps\n extends Omit<HTMLStyledProps<\"form\">, \"title\">, ThemeProps<FormStyle> {\n /**\n * The form description to use.\n */\n description?: ReactNode\n /**\n * An object managing the disabled state of each field.\n */\n disabled?: boolean | { [key: string]: boolean | undefined }\n /**\n * An object managing the error message of each field.\n */\n errorMessage?: { [key: string]: ReactNode }\n /**\n * An object managing the helper message of each field.\n */\n helperMessage?: { [key: string]: ReactNode }\n /**\n * An object managing the invalid state of each field.\n */\n invalid?: boolean | { [key: string]: boolean | undefined }\n /**\n * The optional indicator to use for each field.\n */\n optionalIndicator?: ReactNode\n /**\n * An object managing the read only state of each field.\n */\n readOnly?: boolean | { [key: string]: boolean | undefined }\n /**\n * An object managing the replace state of each field.\n */\n replace?: boolean | { [key: string]: boolean | undefined }\n /**\n * An object managing the required state of each field.\n */\n required?: boolean | { [key: string]: boolean | undefined }\n /**\n * The required indicator to use for each field.\n */\n requiredIndicator?: ReactNode\n /**\n * The submit button to use.\n */\n submitButton?: ReactNode\n /**\n * The form title to use.\n */\n title?: ReactNode\n /**\n * Props the body component.\n */\n bodyProps?: FormBodyProps\n /**\n * Props the description component.\n */\n descriptionProps?: FormDescriptionProps\n /**\n * Props the footer component.\n */\n footerProps?: FormFooterProps\n /**\n * Props the header component.\n */\n headerProps?: FormHeaderProps\n /**\n * Props the submit button component.\n */\n submitButtonProps?: FormSubmitButtonProps\n /**\n * Props the title component.\n */\n titleProps?: FormTitleProps\n}\n\nconst {\n PropsContext: FormPropsContext,\n usePropsContext: useFormPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FormRootProps, FormStyle, FormContext>(\n \"form\",\n formStyle,\n)\n\nexport { FormPropsContext, useFormPropsContext }\n\n/**\n * `Form` is a component used to group multiple form elements.\n *\n * @see https://yamada-ui.com/docs/components/form\n */\nexport const FormRoot = withProvider<\"form\", FormRootProps, \"size\" | \"variant\">(\n ({\n id,\n size,\n variant,\n \"aria-labelledby\": ariaLabelledBy,\n children,\n description,\n disabled,\n errorMessage,\n helperMessage,\n invalid,\n noValidate = true,\n optionalIndicator,\n readOnly,\n replace,\n required,\n requiredIndicator,\n submitButton,\n title,\n bodyProps,\n descriptionProps,\n footerProps,\n headerProps,\n submitButtonProps,\n titleProps,\n ...rest\n }) => {\n const uuid = useId()\n const titleId = useId()\n const descriptionId = useId()\n const [\n omittedChildren,\n customHeader,\n customBody,\n customFooter,\n customTitle,\n customDescription,\n customSubmitButton,\n ] = useSplitChildren(\n children,\n FormHeader,\n FormBody,\n FormFooter,\n FormTitle,\n FormDescription,\n FormSubmitButton,\n )\n\n id ??= uuid\n\n const context = useMemo(\n () => ({\n id,\n size,\n variant,\n descriptionId,\n disabled,\n errorMessage,\n helperMessage,\n invalid,\n optionalIndicator,\n readOnly,\n replace,\n required,\n requiredIndicator,\n titleId,\n }),\n [\n id,\n titleId,\n descriptionId,\n disabled,\n size,\n variant,\n errorMessage,\n helperMessage,\n invalid,\n readOnly,\n replace,\n required,\n optionalIndicator,\n requiredIndicator,\n ],\n )\n\n return (\n <FormContext value={context}>\n <styled.form\n id={id}\n aria-labelledby={cx(titleId, descriptionId, ariaLabelledBy)}\n noValidate={noValidate}\n {...rest}\n >\n {customHeader ||\n (customTitle || title || customDescription || description ? (\n <FormHeader {...headerProps}>\n {customTitle ||\n (title ? (\n <FormTitle {...titleProps}>{title}</FormTitle>\n ) : null)}\n\n {customDescription ||\n (description ? (\n <FormDescription {...descriptionProps}>\n {description}\n </FormDescription>\n ) : null)}\n </FormHeader>\n ) : null)}\n\n {customBody || <FormBody {...bodyProps}>{omittedChildren}</FormBody>}\n\n {customFooter ||\n (customSubmitButton || submitButton ? (\n <FormFooter {...footerProps}>\n {customSubmitButton ||\n (submitButton ? (\n <FormSubmitButton {...submitButtonProps}>\n {submitButton}\n </FormSubmitButton>\n ) : null)}\n </FormFooter>\n ) : null)}\n </styled.form>\n </FormContext>\n )\n },\n \"root\",\n { transferProps: [\"size\", \"variant\"] },\n)()\n\nexport interface FormHeaderProps extends HTMLStyledProps {}\n\nexport const FormHeader = withContext<\"div\", FormHeaderProps>(\"div\", \"header\")()\n\nexport interface FormTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const FormTitle = withContext<\"h3\", FormTitleProps>(\"h3\", \"title\")(\n undefined,\n (props) => {\n const { titleId } = useFormContext() ?? {}\n\n return { id: titleId, ...props }\n },\n)\n\nexport interface FormDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const FormDescription = withContext<\"p\", FormDescriptionProps>(\n \"p\",\n \"description\",\n)(undefined, (props) => {\n const { descriptionId, titleId } = useFormContext() ?? {}\n\n return { id: descriptionId, \"aria-describedby\": titleId, ...props }\n})\n\nexport interface FormBodyProps extends HTMLStyledProps {}\n\nexport const FormBody = withContext<\"div\", FormBodyProps>(\"div\", \"body\")()\n\nexport interface FormGroupProps extends HTMLStyledProps {}\n\nexport const FormGroup = withContext<\"div\", FormGroupProps>(\"div\", \"group\")()\n\nexport interface FormFooterProps extends HTMLStyledProps {}\n\nexport const FormFooter = withContext<\"div\", FormFooterProps>(\"div\", \"footer\")()\n\nexport interface FormSubmitButtonProps extends ButtonProps {}\n\nexport const FormSubmitButton = withContext<\"button\", FormSubmitButtonProps>(\n Button,\n \"submitButton\",\n)({ type: \"submit\" }, (props) => {\n const { id } = useFormContext() ?? {}\n\n return { form: id, ...props }\n})\n"],"mappings":";;;;;;;;;;;;;;;AA+BA,MAAM,CAAC,aAAa,kBAAkBA,gBAA2B;CAC/D,MAAM;CACN,QAAQ;CACT,CAAC;AAgFF,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,aACA,iBACE,oBACF,QACA,UACD;;;;;;AASD,MAAa,WAAW,cACrB,EACC,IACA,MACA,SACA,mBAAmB,gBACnB,UACA,aACA,UACA,cACA,eACA,SACA,aAAa,MACb,mBACA,UACA,SACA,UACA,mBACA,cACA,OACA,WACA,kBACA,aACA,aACA,mBACA,YACA,GAAG,WACC;CACJ,MAAM,OAAO,OAAO;CACpB,MAAM,UAAU,OAAO;CACvB,MAAM,gBAAgB,OAAO;CAC7B,MAAM,CACJ,iBACA,cACA,YACA,cACA,aACA,mBACA,sBACE,iBACF,UACA,YACA,UACA,YACA,WACA,iBACA,iBACD;AAED,QAAO;AAqCP,QACE,oBAAC;EAAY,OApCC,eACP;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;YAIG,qBAAC,OAAO;GACF;GACJ,yCAAoB,SAAS,eAAe,eAAe;GAC/C;GACZ,GAAI;;IAEH,iBACE,eAAe,SAAS,qBAAqB,cAC5C,qBAAC;KAAW,GAAI;gBACb,gBACE,QACC,oBAAC;MAAU,GAAI;gBAAa;OAAkB,GAC5C,OAEL,sBACE,cACC,oBAAC;MAAgB,GAAI;gBAClB;OACe,GAChB;MACK,GACX;IAEL,cAAc,oBAAC;KAAS,GAAI;eAAY;MAA2B;IAEnE,iBACE,sBAAsB,eACrB,oBAAC;KAAW,GAAI;eACb,uBACE,eACC,oBAAC;MAAiB,GAAI;gBACnB;OACgB,GACjB;MACK,GACX;;IACM;GACF;GAGlB,QACA,EAAE,eAAe,CAAC,QAAQ,UAAU,EAAE,CACvC,EAAE;AAIH,MAAa,aAAa,YAAoC,OAAO,SAAS,EAAE;AAIhF,MAAa,YAAY,YAAkC,MAAM,QAAQ,CACvE,SACC,UAAU;CACT,MAAM,EAAE,YAAY,gBAAgB,IAAI,EAAE;AAE1C,QAAO;EAAE,IAAI;EAAS,GAAG;EAAO;EAEnC;AAID,MAAa,kBAAkB,YAC7B,KACA,cACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,eAAe,YAAY,gBAAgB,IAAI,EAAE;AAEzD,QAAO;EAAE,IAAI;EAAe,oBAAoB;EAAS,GAAG;EAAO;EACnE;AAIF,MAAa,WAAW,YAAkC,OAAO,OAAO,EAAE;AAI1E,MAAa,YAAY,YAAmC,OAAO,QAAQ,EAAE;AAI7E,MAAa,aAAa,YAAoC,OAAO,SAAS,EAAE;AAIhF,MAAa,mBAAmB,YAC9B,QACA,eACD,CAAC,EAAE,MAAM,UAAU,GAAG,UAAU;CAC/B,MAAM,EAAE,OAAO,gBAAgB,IAAI,EAAE;AAErC,QAAO;EAAE,MAAM;EAAI,GAAG;EAAO;EAC7B"}

package/dist/esm/components/form/form.style.js ADDED Viewed

@@ -0,0 +1,108 @@
+import { defineComponentSlotStyle } from "../../core/system/config.js";
+import "../../core/index.js";
+import { fieldsetStyle } from "../fieldset/fieldset.style.js";
+import "../fieldset/index.js";
+//#region src/components/form/form.style.ts
+const formStyle = defineComponentSlotStyle({
+	base: {
+		body: {
+			display: "flex",
+			flexDirection: "column",
+			w: "full"
+		},
+		description: {
+			alignItems: "center",
+			color: "fg.muted",
+			display: "inline-flex"
+		},
+		footer: {
+			display: "flex",
+			justifyContent: "flex-end"
+		},
+		group: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		header: {
+			display: "flex",
+			flexDirection: "column",
+			w: "full"
+		},
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			w: "full"
+		},
+		submitButton: {},
+		title: {
+			display: "flex",
+			fontWeight: "medium"
+		}
+	},
+	variants: {
+		elevated: { group: fieldsetStyle.variants?.elevated.root },
+		outline: { group: fieldsetStyle.variants?.outline.root },
+		panel: { group: fieldsetStyle.variants?.panel.root },
+		plain: { group: fieldsetStyle.variants?.plain.root }
+	},
+	sizes: {
+		sm: {
+			body: { gap: "5" },
+			description: {
+				fontSize: "sm",
+				gap: "1"
+			},
+			footer: { gap: "3" },
+			group: { gap: fieldsetStyle.sizes?.sm.root.gap },
+			header: { gap: "1" },
+			root: { gap: "5" },
+			title: {
+				fontSize: "xl",
+				gap: "1"
+			}
+		},
+		md: {
+			body: { gap: "6" },
+			description: {
+				fontSize: "sm",
+				gap: "1"
+			},
+			footer: { gap: "4" },
+			group: { gap: fieldsetStyle.sizes?.md.root.gap },
+			header: { gap: "1" },
+			root: { gap: "6" },
+			title: {
+				fontSize: "2xl",
+				gap: "1"
+			}
+		},
+		lg: {
+			body: { gap: "8" },
+			description: {
+				fontSize: "md",
+				gap: "1"
+			},
+			footer: { gap: "6" },
+			group: { gap: fieldsetStyle.sizes?.lg.root.gap },
+			header: { gap: "1" },
+			root: { gap: "8" },
+			title: {
+				fontSize: "3xl",
+				gap: "1"
+			}
+		}
+	},
+	compounds: fieldsetStyle.compounds?.map(({ css, ...rest }) => ({
+		css: { group: css.root },
+		...rest
+	})),
+	defaultProps: {
+		size: "md",
+		variant: "plain"
+	}
+});
+//#endregion
+export { formStyle };
+//# sourceMappingURL=form.style.js.map