@yamada-ui/react 2.3.0-next-20260515022613 → 2.3.0-next-20260516024028

package/dist/cjs/components/checkbox/use-checkbox.cjs

@@ -13,7 +13,7 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 	const group = require_use_checkbox_group.useCheckboxGroupContext();
 	const { max, value: groupValue, getInputProps: getGroupInputProps, getLabelProps } = group ?? {};
 	const uuid = (0, react.useId)();
-	const { props: { id, ref, name, "aria-controls": ariaControlsProp, "aria-labelledby": ariaLabelledbyProp, checked: checkedProp, defaultChecked = false, disabled, indeterminate = false, readOnly, required, tabIndex, value, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = require_use_field_props.useFieldProps({
+	const { props: { id, ref, name, "aria-controls": ariaControls, "aria-labelledby": ariaLabelledby, checked: checkedProp, defaultChecked = false, disabled, indeterminate = false, readOnly, required, tabIndex, value, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = require_use_field_props.useFieldProps({
 		id: group ? uuid : void 0,
 		...props,
 		notSupportReadOnly: true
@@ -39,7 +39,8 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 		setChecked
 	]);
 	const getRootProps = (0, react.useCallback)((props = {}) => {
-		const merged = require_props.mergeProps(dataProps, {
+		const merged = require_props.mergeProps({
+			...dataProps,
 			"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
 			"data-indeterminate": (0, require_utils_index.utils_exports.dataAttr)(indeterminate)
 		}, rest, props)();
@@ -51,19 +52,20 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 		rest,
 		getLabelProps
 	]);
-	const getInputProps = (0, react.useCallback)(({ "aria-controls": ariaControls, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, ...props } = {}) => {
-		const sharedProps = {
+	const getInputProps = (0, react.useCallback)((props = {}) => {
+		const sharedProps = require_props.mergeProps({
 			...dataProps,
 			...ariaProps,
 			id,
+			ref: require_ref.mergeRefs(ref, indeterminateRef),
 			type: "checkbox",
 			name,
 			style: require_dom.visuallyHiddenAttributes.style,
 			"aria-checked": indeterminate ? "mixed" : checked,
-			"aria-controls": (0, require_utils_index.utils_exports.cx)(ariaControls, ariaControlsProp),
-			"aria-describedby": (0, require_utils_index.utils_exports.cx)(resolvedAriaDescribedby, ariaDescribedby),
+			"aria-controls": ariaControls,
+			"aria-describedby": resolvedAriaDescribedby,
 			"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(!interactive),
-			"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledby, ariaLabelledbyProp),
+			"aria-labelledby": ariaLabelledby,
 			"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
 			"data-indeterminate": (0, require_utils_index.utils_exports.dataAttr)(indeterminate),
 			checked,
@@ -71,13 +73,11 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 			readOnly,
 			required,
 			tabIndex,
-			value,
-			...props,
-			ref: require_ref.mergeRefs(props.ref, ref, indeterminateRef),
-			onBlur: (0, require_utils_index.utils_exports.handlerAll)(props.onBlur, eventProps.onBlur),
-			onChange: (0, require_utils_index.utils_exports.handlerAll)(props.onChange, onChange),
-			onFocus: (0, require_utils_index.utils_exports.handlerAll)(props.onFocus, eventProps.onFocus)
-		};
+			value
+		}, props, {
+			...eventProps,
+			onChange
+		})();
 		return getGroupInputProps?.(sharedProps) ?? sharedProps;
 	}, [
 		dataProps,
@@ -86,10 +86,10 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 		name,
 		indeterminate,
 		checked,
-		ariaControlsProp,
+		ariaControls,
 		resolvedAriaDescribedby,
 		interactive,
-		ariaLabelledbyProp,
+		ariaLabelledby,
 		disabled,
 		readOnly,
 		required,
@@ -97,8 +97,7 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 		value,
 		ref,
 		indeterminateRef,
-		eventProps.onBlur,
-		eventProps.onFocus,
+		eventProps,
 		onChange,
 		getGroupInputProps
 	]);

package/dist/cjs/components/checkbox/use-checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-checkbox.cjs","names":["useCheckboxGroupContext","useFieldProps","useControllableEventState","mergeProps","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/checkbox/use-checkbox.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  cx,\n  dataAttr,\n  handlerAll,\n  isNumber,\n  isUndefined,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useCheckboxGroupContext } from \"./use-checkbox-group\"\n\nexport interface UseCheckboxProps<Y extends string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean\n  /**\n   * If `true`, the checkbox will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * If `true`, the checkbox will be indeterminate.\n   *\n   * @default false\n   */\n  indeterminate?: boolean\n  /**\n   * The name of the input field in a checkbox.\n   */\n  name?: string\n  /**\n   * The value of the checkbox.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the checkbox is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checkbox is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useCheckbox = <Y extends string = string>({\n  \"aria-describedby\": ariaDescribedbyProp,\n  ...props\n}: UseCheckboxProps<Y> = {}) => {\n  const group = useCheckboxGroupContext()\n  const {\n    max,\n    value: groupValue,\n    getInputProps: getGroupInputProps,\n    getLabelProps,\n  } = group ?? {}\n  const uuid = useId()\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-controls\": ariaControlsProp,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      indeterminate = false,\n      readOnly,\n      required,\n      tabIndex,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n    dataProps,\n    eventProps,\n  } = useFieldProps({\n    id: group ? uuid : undefined,\n    ...props,\n    notSupportReadOnly: true,\n  })\n  const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n  const resolvedChecked =\n    !isUndefined(groupValue) && !isUndefined(value)\n      ? groupValue.includes(value)\n      : checkedProp\n  const [checked, setChecked] = useControllableEventState({\n    defaultValue: defaultChecked,\n    value: resolvedChecked,\n    onChange: onChangeProp,\n  })\n  const trulyDisabled =\n    !checked && isNumber(max) && group && group.value.length >= max\n  const interactive = !(readOnly || trulyDisabled)\n  const indeterminateRef = useCallback(\n    (el: HTMLInputElement | null) => {\n      if (el) el.indeterminate = indeterminate\n    },\n    [indeterminate],\n  )\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return (ev.defaultPrevented = true)\n\n      if (indeterminate) ev.target.checked = true\n\n      setChecked(ev)\n    },\n    [interactive, indeterminate, setChecked],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(\n        dataProps,\n        {\n          \"data-checked\": dataAttr(checked),\n          \"data-indeterminate\": dataAttr(indeterminate),\n        },\n        rest,\n        props,\n      )()\n\n      return getLabelProps?.(merged) ?? merged\n    },\n    [dataProps, checked, indeterminate, rest, getLabelProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({\n      \"aria-controls\": ariaControls,\n      \"aria-describedby\": ariaDescribedby,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) => {\n      const sharedProps = {\n        ...dataProps,\n        ...ariaProps,\n        id,\n        type: \"checkbox\",\n        name,\n        style: visuallyHiddenAttributes.style,\n        \"aria-checked\": indeterminate ? (\"mixed\" as const) : checked,\n        \"aria-controls\": cx(ariaControls, ariaControlsProp),\n        \"aria-describedby\": cx(resolvedAriaDescribedby, ariaDescribedby),\n        \"aria-disabled\": ariaAttr(!interactive),\n        \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n        \"data-checked\": dataAttr(checked),\n        \"data-indeterminate\": dataAttr(indeterminate),\n        checked,\n        disabled,\n        readOnly,\n        required,\n        tabIndex,\n        value,\n        ...props,\n        ref: mergeRefs(props.ref, ref, indeterminateRef),\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onChange: handlerAll(props.onChange, onChange),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n\n      return getGroupInputProps?.(sharedProps) ?? sharedProps\n    },\n    [\n      dataProps,\n      ariaProps,\n      id,\n      name,\n      indeterminate,\n      checked,\n      ariaControlsProp,\n      resolvedAriaDescribedby,\n      interactive,\n      ariaLabelledbyProp,\n      disabled,\n      readOnly,\n      required,\n      tabIndex,\n      value,\n      ref,\n      indeterminateRef,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onChange,\n      getGroupInputProps,\n    ],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-hidden\": \"true\",\n      \"data-checked\": dataAttr(checked),\n      \"data-indeterminate\": dataAttr(indeterminate),\n      ...props,\n    }),\n    [dataProps, checked, indeterminate],\n  )\n\n  return {\n    checked,\n    indeterminate,\n    getIndicatorProps,\n    getInputProps,\n    getRootProps,\n    onChange,\n  }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n"],"mappings":"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"}
+{"version":3,"file":"use-checkbox.cjs","names":["useCheckboxGroupContext","useFieldProps","useControllableEventState","mergeProps","mergeRefs","visuallyHiddenAttributes"],"sources":["../../../../src/components/checkbox/use-checkbox.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  dataAttr,\n  isNumber,\n  isUndefined,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useCheckboxGroupContext } from \"./use-checkbox-group\"\n\nexport interface UseCheckboxProps<Y extends string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean\n  /**\n   * If `true`, the checkbox will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * If `true`, the checkbox will be indeterminate.\n   *\n   * @default false\n   */\n  indeterminate?: boolean\n  /**\n   * The name of the input field in a checkbox.\n   */\n  name?: string\n  /**\n   * The value of the checkbox.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the checkbox is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checkbox is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useCheckbox = <Y extends string = string>({\n  \"aria-describedby\": ariaDescribedbyProp,\n  ...props\n}: UseCheckboxProps<Y> = {}) => {\n  const group = useCheckboxGroupContext()\n  const {\n    max,\n    value: groupValue,\n    getInputProps: getGroupInputProps,\n    getLabelProps,\n  } = group ?? {}\n  const uuid = useId()\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-controls\": ariaControls,\n      \"aria-labelledby\": ariaLabelledby,\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      indeterminate = false,\n      readOnly,\n      required,\n      tabIndex,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n    dataProps,\n    eventProps,\n  } = useFieldProps({\n    id: group ? uuid : undefined,\n    ...props,\n    notSupportReadOnly: true,\n  })\n  const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n  const resolvedChecked =\n    !isUndefined(groupValue) && !isUndefined(value)\n      ? groupValue.includes(value)\n      : checkedProp\n  const [checked, setChecked] = useControllableEventState({\n    defaultValue: defaultChecked,\n    value: resolvedChecked,\n    onChange: onChangeProp,\n  })\n  const trulyDisabled =\n    !checked && isNumber(max) && group && group.value.length >= max\n  const interactive = !(readOnly || trulyDisabled)\n  const indeterminateRef = useCallback(\n    (el: HTMLInputElement | null) => {\n      if (el) el.indeterminate = indeterminate\n    },\n    [indeterminate],\n  )\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return (ev.defaultPrevented = true)\n\n      if (indeterminate) ev.target.checked = true\n\n      setChecked(ev)\n    },\n    [interactive, indeterminate, setChecked],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(\n        {\n          ...dataProps,\n          \"data-checked\": dataAttr(checked),\n          \"data-indeterminate\": dataAttr(indeterminate),\n        },\n        rest,\n        props,\n      )()\n\n      return getLabelProps?.(merged) ?? merged\n    },\n    [dataProps, checked, indeterminate, rest, getLabelProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const sharedProps = mergeProps(\n        {\n          ...dataProps,\n          ...ariaProps,\n          id,\n          ref: mergeRefs(ref, indeterminateRef),\n          type: \"checkbox\",\n          name,\n          style: visuallyHiddenAttributes.style,\n          \"aria-checked\": indeterminate ? (\"mixed\" as const) : checked,\n          \"aria-controls\": ariaControls,\n          \"aria-describedby\": resolvedAriaDescribedby,\n          \"aria-disabled\": ariaAttr(!interactive),\n          \"aria-labelledby\": ariaLabelledby,\n          \"data-checked\": dataAttr(checked),\n          \"data-indeterminate\": dataAttr(indeterminate),\n          checked,\n          disabled,\n          readOnly,\n          required,\n          tabIndex,\n          value,\n        },\n        props,\n        { ...eventProps, onChange },\n      )()\n\n      return getGroupInputProps?.(sharedProps) ?? sharedProps\n    },\n    [\n      dataProps,\n      ariaProps,\n      id,\n      name,\n      indeterminate,\n      checked,\n      ariaControls,\n      resolvedAriaDescribedby,\n      interactive,\n      ariaLabelledby,\n      disabled,\n      readOnly,\n      required,\n      tabIndex,\n      value,\n      ref,\n      indeterminateRef,\n      eventProps,\n      onChange,\n      getGroupInputProps,\n    ],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-hidden\": \"true\",\n      \"data-checked\": dataAttr(checked),\n      \"data-indeterminate\": dataAttr(indeterminate),\n      ...props,\n    }),\n    [dataProps, checked, indeterminate],\n  )\n\n  return {\n    checked,\n    indeterminate,\n    getIndicatorProps,\n    getInputProps,\n    getRootProps,\n    onChange,\n  }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n"],"mappings":"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"}

package/dist/esm/components/checkbox/use-checkbox.js

@@ -12,7 +12,7 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 	const group = useCheckboxGroupContext();
 	const { max, value: groupValue, getInputProps: getGroupInputProps, getLabelProps } = group ?? {};
 	const uuid = useId();
-	const { props: { id, ref, name, "aria-controls": ariaControlsProp, "aria-labelledby": ariaLabelledbyProp, checked: checkedProp, defaultChecked = false, disabled, indeterminate = false, readOnly, required, tabIndex, value, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = useFieldProps({
+	const { props: { id, ref, name, "aria-controls": ariaControls, "aria-labelledby": ariaLabelledby, checked: checkedProp, defaultChecked = false, disabled, indeterminate = false, readOnly, required, tabIndex, value, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = useFieldProps({
 		id: group ? uuid : void 0,
 		...props,
 		notSupportReadOnly: true
@@ -38,7 +38,8 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 		setChecked
 	]);
 	const getRootProps = useCallback((props = {}) => {
-		const merged = mergeProps(dataProps, {
+		const merged = mergeProps({
+			...dataProps,
 			"data-checked": (0, utils_exports.dataAttr)(checked),
 			"data-indeterminate": (0, utils_exports.dataAttr)(indeterminate)
 		}, rest, props)();
@@ -50,19 +51,20 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 		rest,
 		getLabelProps
 	]);
-	const getInputProps = useCallback(({ "aria-controls": ariaControls, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, ...props } = {}) => {
-		const sharedProps = {
+	const getInputProps = useCallback((props = {}) => {
+		const sharedProps = mergeProps({
 			...dataProps,
 			...ariaProps,
 			id,
+			ref: mergeRefs(ref, indeterminateRef),
 			type: "checkbox",
 			name,
 			style: visuallyHiddenAttributes.style,
 			"aria-checked": indeterminate ? "mixed" : checked,
-			"aria-controls": (0, utils_exports.cx)(ariaControls, ariaControlsProp),
-			"aria-describedby": (0, utils_exports.cx)(resolvedAriaDescribedby, ariaDescribedby),
+			"aria-controls": ariaControls,
+			"aria-describedby": resolvedAriaDescribedby,
 			"aria-disabled": (0, utils_exports.ariaAttr)(!interactive),
-			"aria-labelledby": (0, utils_exports.cx)(ariaLabelledby, ariaLabelledbyProp),
+			"aria-labelledby": ariaLabelledby,
 			"data-checked": (0, utils_exports.dataAttr)(checked),
 			"data-indeterminate": (0, utils_exports.dataAttr)(indeterminate),
 			checked,
@@ -70,13 +72,11 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 			readOnly,
 			required,
 			tabIndex,
-			value,
-			...props,
-			ref: mergeRefs(props.ref, ref, indeterminateRef),
-			onBlur: (0, utils_exports.handlerAll)(props.onBlur, eventProps.onBlur),
-			onChange: (0, utils_exports.handlerAll)(props.onChange, onChange),
-			onFocus: (0, utils_exports.handlerAll)(props.onFocus, eventProps.onFocus)
-		};
+			value
+		}, props, {
+			...eventProps,
+			onChange
+		})();
 		return getGroupInputProps?.(sharedProps) ?? sharedProps;
 	}, [
 		dataProps,
@@ -85,10 +85,10 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 		name,
 		indeterminate,
 		checked,
-		ariaControlsProp,
+		ariaControls,
 		resolvedAriaDescribedby,
 		interactive,
-		ariaLabelledbyProp,
+		ariaLabelledby,
 		disabled,
 		readOnly,
 		required,
@@ -96,8 +96,7 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 		value,
 		ref,
 		indeterminateRef,
-		eventProps.onBlur,
-		eventProps.onFocus,
+		eventProps,
 		onChange,
 		getGroupInputProps
 	]);

package/dist/esm/components/checkbox/use-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-checkbox.js","names":[],"sources":["../../../../src/components/checkbox/use-checkbox.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  cx,\n  dataAttr,\n  handlerAll,\n  isNumber,\n  isUndefined,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useCheckboxGroupContext } from \"./use-checkbox-group\"\n\nexport interface UseCheckboxProps<Y extends string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean\n  /**\n   * If `true`, the checkbox will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * If `true`, the checkbox will be indeterminate.\n   *\n   * @default false\n   */\n  indeterminate?: boolean\n  /**\n   * The name of the input field in a checkbox.\n   */\n  name?: string\n  /**\n   * The value of the checkbox.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the checkbox is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checkbox is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useCheckbox = <Y extends string = string>({\n  \"aria-describedby\": ariaDescribedbyProp,\n  ...props\n}: UseCheckboxProps<Y> = {}) => {\n  const group = useCheckboxGroupContext()\n  const {\n    max,\n    value: groupValue,\n    getInputProps: getGroupInputProps,\n    getLabelProps,\n  } = group ?? {}\n  const uuid = useId()\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-controls\": ariaControlsProp,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      indeterminate = false,\n      readOnly,\n      required,\n      tabIndex,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n    dataProps,\n    eventProps,\n  } = useFieldProps({\n    id: group ? uuid : undefined,\n    ...props,\n    notSupportReadOnly: true,\n  })\n  const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n  const resolvedChecked =\n    !isUndefined(groupValue) && !isUndefined(value)\n      ? groupValue.includes(value)\n      : checkedProp\n  const [checked, setChecked] = useControllableEventState({\n    defaultValue: defaultChecked,\n    value: resolvedChecked,\n    onChange: onChangeProp,\n  })\n  const trulyDisabled =\n    !checked && isNumber(max) && group && group.value.length >= max\n  const interactive = !(readOnly || trulyDisabled)\n  const indeterminateRef = useCallback(\n    (el: HTMLInputElement | null) => {\n      if (el) el.indeterminate = indeterminate\n    },\n    [indeterminate],\n  )\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return (ev.defaultPrevented = true)\n\n      if (indeterminate) ev.target.checked = true\n\n      setChecked(ev)\n    },\n    [interactive, indeterminate, setChecked],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(\n        dataProps,\n        {\n          \"data-checked\": dataAttr(checked),\n          \"data-indeterminate\": dataAttr(indeterminate),\n        },\n        rest,\n        props,\n      )()\n\n      return getLabelProps?.(merged) ?? merged\n    },\n    [dataProps, checked, indeterminate, rest, getLabelProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({\n      \"aria-controls\": ariaControls,\n      \"aria-describedby\": ariaDescribedby,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) => {\n      const sharedProps = {\n        ...dataProps,\n        ...ariaProps,\n        id,\n        type: \"checkbox\",\n        name,\n        style: visuallyHiddenAttributes.style,\n        \"aria-checked\": indeterminate ? (\"mixed\" as const) : checked,\n        \"aria-controls\": cx(ariaControls, ariaControlsProp),\n        \"aria-describedby\": cx(resolvedAriaDescribedby, ariaDescribedby),\n        \"aria-disabled\": ariaAttr(!interactive),\n        \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n        \"data-checked\": dataAttr(checked),\n        \"data-indeterminate\": dataAttr(indeterminate),\n        checked,\n        disabled,\n        readOnly,\n        required,\n        tabIndex,\n        value,\n        ...props,\n        ref: mergeRefs(props.ref, ref, indeterminateRef),\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onChange: handlerAll(props.onChange, onChange),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n\n      return getGroupInputProps?.(sharedProps) ?? sharedProps\n    },\n    [\n      dataProps,\n      ariaProps,\n      id,\n      name,\n      indeterminate,\n      checked,\n      ariaControlsProp,\n      resolvedAriaDescribedby,\n      interactive,\n      ariaLabelledbyProp,\n      disabled,\n      readOnly,\n      required,\n      tabIndex,\n      value,\n      ref,\n      indeterminateRef,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onChange,\n      getGroupInputProps,\n    ],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-hidden\": \"true\",\n      \"data-checked\": dataAttr(checked),\n      \"data-indeterminate\": dataAttr(indeterminate),\n      ...props,\n    }),\n    [dataProps, checked, indeterminate],\n  )\n\n  return {\n    checked,\n    indeterminate,\n    getIndicatorProps,\n    getInputProps,\n    getRootProps,\n    onChange,\n  }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n"],"mappings":"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"}
+{"version":3,"file":"use-checkbox.js","names":[],"sources":["../../../../src/components/checkbox/use-checkbox.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  dataAttr,\n  isNumber,\n  isUndefined,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useCheckboxGroupContext } from \"./use-checkbox-group\"\n\nexport interface UseCheckboxProps<Y extends string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean\n  /**\n   * If `true`, the checkbox will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * If `true`, the checkbox will be indeterminate.\n   *\n   * @default false\n   */\n  indeterminate?: boolean\n  /**\n   * The name of the input field in a checkbox.\n   */\n  name?: string\n  /**\n   * The value of the checkbox.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the checkbox is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checkbox is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useCheckbox = <Y extends string = string>({\n  \"aria-describedby\": ariaDescribedbyProp,\n  ...props\n}: UseCheckboxProps<Y> = {}) => {\n  const group = useCheckboxGroupContext()\n  const {\n    max,\n    value: groupValue,\n    getInputProps: getGroupInputProps,\n    getLabelProps,\n  } = group ?? {}\n  const uuid = useId()\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-controls\": ariaControls,\n      \"aria-labelledby\": ariaLabelledby,\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      indeterminate = false,\n      readOnly,\n      required,\n      tabIndex,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n    dataProps,\n    eventProps,\n  } = useFieldProps({\n    id: group ? uuid : undefined,\n    ...props,\n    notSupportReadOnly: true,\n  })\n  const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n  const resolvedChecked =\n    !isUndefined(groupValue) && !isUndefined(value)\n      ? groupValue.includes(value)\n      : checkedProp\n  const [checked, setChecked] = useControllableEventState({\n    defaultValue: defaultChecked,\n    value: resolvedChecked,\n    onChange: onChangeProp,\n  })\n  const trulyDisabled =\n    !checked && isNumber(max) && group && group.value.length >= max\n  const interactive = !(readOnly || trulyDisabled)\n  const indeterminateRef = useCallback(\n    (el: HTMLInputElement | null) => {\n      if (el) el.indeterminate = indeterminate\n    },\n    [indeterminate],\n  )\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return (ev.defaultPrevented = true)\n\n      if (indeterminate) ev.target.checked = true\n\n      setChecked(ev)\n    },\n    [interactive, indeterminate, setChecked],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(\n        {\n          ...dataProps,\n          \"data-checked\": dataAttr(checked),\n          \"data-indeterminate\": dataAttr(indeterminate),\n        },\n        rest,\n        props,\n      )()\n\n      return getLabelProps?.(merged) ?? merged\n    },\n    [dataProps, checked, indeterminate, rest, getLabelProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const sharedProps = mergeProps(\n        {\n          ...dataProps,\n          ...ariaProps,\n          id,\n          ref: mergeRefs(ref, indeterminateRef),\n          type: \"checkbox\",\n          name,\n          style: visuallyHiddenAttributes.style,\n          \"aria-checked\": indeterminate ? (\"mixed\" as const) : checked,\n          \"aria-controls\": ariaControls,\n          \"aria-describedby\": resolvedAriaDescribedby,\n          \"aria-disabled\": ariaAttr(!interactive),\n          \"aria-labelledby\": ariaLabelledby,\n          \"data-checked\": dataAttr(checked),\n          \"data-indeterminate\": dataAttr(indeterminate),\n          checked,\n          disabled,\n          readOnly,\n          required,\n          tabIndex,\n          value,\n        },\n        props,\n        { ...eventProps, onChange },\n      )()\n\n      return getGroupInputProps?.(sharedProps) ?? sharedProps\n    },\n    [\n      dataProps,\n      ariaProps,\n      id,\n      name,\n      indeterminate,\n      checked,\n      ariaControls,\n      resolvedAriaDescribedby,\n      interactive,\n      ariaLabelledby,\n      disabled,\n      readOnly,\n      required,\n      tabIndex,\n      value,\n      ref,\n      indeterminateRef,\n      eventProps,\n      onChange,\n      getGroupInputProps,\n    ],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-hidden\": \"true\",\n      \"data-checked\": dataAttr(checked),\n      \"data-indeterminate\": dataAttr(indeterminate),\n      ...props,\n    }),\n    [dataProps, checked, indeterminate],\n  )\n\n  return {\n    checked,\n    indeterminate,\n    getIndicatorProps,\n    getInputProps,\n    getRootProps,\n    onChange,\n  }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n"],"mappings":";;;;;;;;;;AAkEA,MAAa,eAA0C,EACrD,oBAAoB,qBACpB,GAAG,UACoB,EAAE,KAAK;CAC9B,MAAM,QAAQ,yBAAyB;CACvC,MAAM,EACJ,KACA,OAAO,YACP,eAAe,oBACf,kBACE,SAAS,EAAE;CACf,MAAM,OAAO,OAAO;CACpB,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,iBAAiB,cACjB,mBAAmB,gBACnB,SAAS,aACT,iBAAiB,OACjB,UACA,gBAAgB,OAChB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,iBAAiB,GAAG,aACrD,WACA,eACE,cAAc;EAChB,IAAI,QAAQ,OAAO,KAAA;EACnB,GAAG;EACH,oBAAoB;EACrB,CAAC;CACF,MAAM,0BAA0B,QAAQ,sBAAsB;CAK9D,MAAM,CAAC,SAAS,cAAc,0BAA0B;EACtD,cAAc;EACd,OALA,EAAA,GAAA,cAAA,aAAa,WAAW,IAAI,EAAA,GAAA,cAAA,aAAa,MAAM,GAC3C,WAAW,SAAS,MAAM,GAC1B;EAIJ,UAAU;EACX,CAAC;CACF,MAAM,gBACJ,CAAC,YAAA,GAAA,cAAA,UAAoB,IAAI,IAAI,SAAS,MAAM,MAAM,UAAU;CAC9D,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,mBAAmB,aACtB,OAAgC;EAC/B,IAAI,IAAI,GAAG,gBAAgB;IAE7B,CAAC,cAAc,CAChB;CAED,MAAM,WAAW,aACd,OAAsC;EACrC,IAAI,CAAC,aAAa,OAAQ,GAAG,mBAAmB;EAEhD,IAAI,eAAe,GAAG,OAAO,UAAU;EAEvC,WAAW,GAAG;IAEhB;EAAC;EAAa;EAAe;EAAW,CACzC;CAED,MAAM,eAAoC,aACvC,QAAQ,EAAE,KAAK;EACd,MAAM,SAAS,WACb;GACE,GAAG;GACH,iBAAA,GAAA,cAAA,UAAyB,QAAQ;GACjC,uBAAA,GAAA,cAAA,UAA+B,cAAc;GAC9C,EACD,MACA,MACD,EAAE;EAEH,OAAO,gBAAgB,OAAO,IAAI;IAEpC;EAAC;EAAW;EAAS;EAAe;EAAM;EAAc,CACzD;CAED,MAAM,gBAAqC,aACxC,QAAQ,EAAE,KAAK;EACd,MAAM,cAAc,WAClB;GACE,GAAG;GACH,GAAG;GACH;GACA,KAAK,UAAU,KAAK,iBAAiB;GACrC,MAAM;GACN;GACA,OAAO,yBAAyB;GAChC,gBAAgB,gBAAiB,UAAoB;GACrD,iBAAiB;GACjB,oBAAoB;GACpB,kBAAA,GAAA,cAAA,UAA0B,CAAC,YAAY;GACvC,mBAAmB;GACnB,iBAAA,GAAA,cAAA,UAAyB,QAAQ;GACjC,uBAAA,GAAA,cAAA,UAA+B,cAAc;GAC7C;GACA;GACA;GACA;GACA;GACA;GACD,EACD,OACA;GAAE,GAAG;GAAY;GAAU,CAC5B,EAAE;EAEH,OAAO,qBAAqB,YAAY,IAAI;IAE9C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAaD,OAAO;EACL;EACA;EACA,mBAdoC,aACnC,QAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,iBAAA,GAAA,cAAA,UAAyB,QAAQ;GACjC,uBAAA,GAAA,cAAA,UAA+B,cAAc;GAC7C,GAAG;GACJ,GACD;GAAC;GAAW;GAAS;GAAc,CAMlB;EACjB;EACA;EACA;EACD"}

package/dist/types/components/accordion/accordion.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/accordion/accordion.style.d.ts
-declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
+declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, {
   panel: {
     button: {
       rounded: "l2";

package/dist/types/components/alert/alert.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/alert/alert.style.d.ts
-declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, {
+declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "description" | "root", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "description" | "root">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "description" | "root">>, {
   island: {
     description: {
       color: "fg.muted";

package/dist/types/components/autocomplete/autocomplete.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/autocomplete/autocomplete.style.d.ts
-declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "valueText" | "empty">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "empty" | "valueText">>, {
   xs: {
     empty: {
       gap: "1.5";

package/dist/types/components/avatar/avatar.d.ts

@@ -23,7 +23,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
    */
   imageProps?: AvatarImageProps;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {

package/dist/types/components/breadcrumb/breadcrumb.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/breadcrumb/breadcrumb.style.d.ts
-declare const breadcrumbStyle: ComponentSlotStyle<"link" | "list" | "separator" | "ellipsis" | "item" | "root", CSSPropObject<CSSSlotObject<"link" | "list" | "separator" | "ellipsis" | "item" | "root">>, {
+declare const breadcrumbStyle: ComponentSlotStyle<"link" | "list" | "separator" | "ellipsis" | "root" | "item", CSSPropObject<CSSSlotObject<"link" | "list" | "separator" | "ellipsis" | "root" | "item">>, {
   sm: {
     list: {
       fontSize: "sm";

package/dist/types/components/calendar/calendar.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/calendar/calendar.style.d.ts
-declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "prev" | "month" | "week" | "control" | "weekday" | "day" | "months" | "years" | "weeks", {
+declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "month" | "week" | "prev" | "control" | "weekday" | "day" | "months" | "years" | "weeks", {
   /**
    * If `true`, the calendar will be fixed rows.
    *
@@ -73,7 +73,7 @@ declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "
       "--font-size": "fontSizes.xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "prev" | "month" | "week" | "control" | "weekday" | "day" | "months" | "years" | "weeks">>>;
+}, CSSModifierObject<CSSSlotObject<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "month" | "week" | "prev" | "control" | "weekday" | "day" | "months" | "years" | "weeks">>>;
 type CalendarStyle = typeof calendarStyle;
 //#endregion
 export { CalendarStyle, calendarStyle };

package/dist/types/components/carousel/carousel.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/carousel/carousel.style.d.ts
-declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "indicator" | "item" | "root" | "trigger" | "prev" | "indicators", CSSPropObject<CSSSlotObject<"list" | "next" | "indicator" | "item" | "root" | "trigger" | "prev" | "indicators">>, {
+declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root" | "item" | "indicator" | "trigger" | "prev" | "indicators", CSSPropObject<CSSSlotObject<"list" | "next" | "root" | "item" | "indicator" | "trigger" | "prev" | "indicators">>, {
   sm: {
     root: {
       h: "sm";
@@ -17,7 +17,7 @@ declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "indicator" |
       h: "lg";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"list" | "next" | "indicator" | "item" | "root" | "trigger" | "prev" | "indicators">>>;
+}, CSSModifierObject<CSSSlotObject<"list" | "next" | "root" | "item" | "indicator" | "trigger" | "prev" | "indicators">>>;
 type CarouselStyle = typeof carouselStyle;
 //#endregion
 export { CarouselStyle, carouselStyle };

package/dist/types/components/checkbox/checkbox.d.ts

@@ -37,7 +37,7 @@ interface CheckboxProps<Y extends string = string> extends Merge<HTMLStyledProps
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       rounded: {
         indicator: {
@@ -133,7 +133,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxPropsContext: _$react.Context<Partial<CheckboxProps<string>> | undefined>, useCheckboxPropsContext: () => Partial<CheckboxProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxPropsContext: _$react.Context<Partial<CheckboxProps<string>> | undefined>, useCheckboxPropsContext: () => Partial<CheckboxProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       rounded: {
         indicator: {
@@ -229,7 +229,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       rounded: {
         indicator: {

package/dist/types/components/checkbox/checkbox.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/checkbox/checkbox.style.d.ts
-declare const checkboxStyle: ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+declare const checkboxStyle: ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
   /**
    * The shape of the component
    *

package/dist/types/components/checkbox-card/checkbox-card.d.ts

@@ -63,7 +63,7 @@ interface CheckboxCardRootProps<Y extends string = string> extends Merge<HTMLSty
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
+declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "description" | "root" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {
@@ -213,7 +213,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: _$react.Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: _$react.Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "description" | "root" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {
@@ -363,7 +363,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "description" | "root" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {

package/dist/types/components/checkbox-card/checkbox-card.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/checkbox-card/checkbox-card.style.d.ts
-declare const checkboxCardStyle: ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
+declare const checkboxCardStyle: ComponentSlotStyle<"group" | "description" | "root" | "indicator" | "addon", {
   /**
    * The justify indicator of the component
    *

package/dist/types/components/color-picker/color-picker.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/color-picker/color-picker.style.d.ts
-declare const colorPickerStyle: ComponentSlotStyle<"input" | "content" | "icon" | "root" | "field" | "colorSwatch" | "eyeDropper", CSSPropObject<CSSSlotObject<"input" | "content" | "icon" | "root" | "field" | "colorSwatch" | "eyeDropper">>, {
+declare const colorPickerStyle: ComponentSlotStyle<"input" | "content" | "icon" | "root" | "colorSwatch" | "field" | "eyeDropper", CSSPropObject<CSSSlotObject<"input" | "content" | "icon" | "root" | "colorSwatch" | "field" | "eyeDropper">>, {
   xs: {
     field: {
       fontSize: "1em";

package/dist/types/components/data-list/data-list.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/data-list/data-list.style.d.ts
-declare const dataListStyle: ComponentSlotStyle<"term" | "item" | "root" | "description", {
+declare const dataListStyle: ComponentSlotStyle<"term" | "description" | "root" | "item", {
   /**
    * The orientation of the data list.
    *

package/dist/types/components/dropzone/dropzone.d.ts

@@ -41,7 +41,7 @@ declare const DropzoneRoot: Component<({
   loadingProps,
   overlayProps,
   ...rest
-}: WithoutThemeProps<DropzoneRootProps, ComponentSlotStyle<"title" | "overlay" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "overlay" | "loading" | "icon" | "root" | "description">>, {
+}: WithoutThemeProps<DropzoneRootProps, ComponentSlotStyle<"title" | "overlay" | "loading" | "icon" | "description" | "root", CSSPropObject<CSSSlotObject<"title" | "overlay" | "loading" | "icon" | "description" | "root">>, {
   xs: {
     root: {
       minH: "xs";

package/dist/types/components/dropzone/dropzone.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/dropzone/dropzone.style.d.ts
-declare const dropzoneStyle: ComponentSlotStyle<"title" | "overlay" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "overlay" | "loading" | "icon" | "root" | "description">>, {
+declare const dropzoneStyle: ComponentSlotStyle<"title" | "overlay" | "loading" | "icon" | "description" | "root", CSSPropObject<CSSSlotObject<"title" | "overlay" | "loading" | "icon" | "description" | "root">>, {
   xs: {
     root: {
       minH: "xs";

package/dist/types/components/empty-state/empty-state.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/empty-state/empty-state.style.d.ts
-declare const emptyState: ComponentSlotStyle<"title" | "content" | "indicator" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "content" | "indicator" | "root" | "description">>, {
+declare const emptyState: ComponentSlotStyle<"title" | "content" | "description" | "root" | "indicator", CSSPropObject<CSSSlotObject<"title" | "content" | "description" | "root" | "indicator">>, {
   sm: {
     content: {
       gap: "xs";
@@ -47,7 +47,7 @@ declare const emptyState: ComponentSlotStyle<"title" | "content" | "indicator" |
       fontSize: "xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"title" | "content" | "indicator" | "root" | "description">>>;
+}, CSSModifierObject<CSSSlotObject<"title" | "content" | "description" | "root" | "indicator">>>;
 type EmptyState = typeof emptyState;
 //#endregion
 export { EmptyState, emptyState };

package/dist/types/components/flip/flip.d.ts

@@ -82,7 +82,7 @@ declare const Flip: Component<({
   onChange,
   onClick: onClickProp,
   ...rest
-}: WithoutThemeProps<FlipProps, ComponentSlotStyle<"from" | "to" | "item" | "root", CSSPropObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>>, keyof FlipProps>) => _$react_jsx_runtime0.JSX.Element, FlipProps>;
+}: WithoutThemeProps<FlipProps, ComponentSlotStyle<"from" | "to" | "root" | "item", CSSPropObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>>, keyof FlipProps>) => _$react_jsx_runtime0.JSX.Element, FlipProps>;
 //#endregion
 export { Flip, FlipProps, FlipPropsContext, useFlipPropsContext };
 //# sourceMappingURL=flip.d.ts.map

package/dist/types/components/flip/flip.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/flip/flip.style.d.ts
-declare const flipStyle: ComponentSlotStyle<"from" | "to" | "item" | "root", CSSPropObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>>;
+declare const flipStyle: ComponentSlotStyle<"from" | "to" | "root" | "item", CSSPropObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>>;
 type FlipStyle = typeof flipStyle;
 //#endregion
 export { FlipStyle, flipStyle };

package/dist/types/components/form/form.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/form/form.style.d.ts
-declare const formStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "group" | "root" | "description" | "submitButton", CSSPropObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "group" | "root" | "description" | "submitButton">>, {
+declare const formStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "group" | "description" | "root" | "submitButton", CSSPropObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "group" | "description" | "root" | "submitButton">>, {
   sm: {
     body: {
       gap: "5";

package/dist/types/components/icon/icon.d.ts

@@ -8,11 +8,11 @@ import * as _$_yamada_ui_utils0 from "@yamada-ui/utils";
 
 //#region src/components/icon/icon.d.ts
 interface IconProps extends HTMLStyledProps<"svg">, ThemeProps<IconStyle> {}
-declare const component: <D extends "fragment" | As = "div", H extends _$_yamada_ui_utils0.Dict = IconProps>(el: D | _$react.FC<H>, {
+declare const component: <D extends As | "fragment" = "div", H extends _$_yamada_ui_utils0.Dict = IconProps>(el: D | _$react.FC<H>, {
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<H>, ...superProps: SuperProps<H>[]) => D extends "fragment" ? _$react.FunctionComponent<H> : Component<Exclude<D, "fragment">, H>, IconPropsContext: _$react.Context<Partial<IconProps> | undefined>, useIconPropsContext: () => Partial<IconProps> | undefined, withContext: <D extends "fragment" | As = "div", H extends IconProps = IconProps, R extends keyof H = keyof H>(el: D | _$react.FC<WithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>>, {
+  }?: ComponentOptions) => (initialProps?: InitialProps<H>, ...superProps: SuperProps<H>[]) => D extends "fragment" ? _$react.FunctionComponent<H> : Component<Exclude<D, "fragment">, H>, IconPropsContext: _$react.Context<Partial<IconProps> | undefined>, useIconPropsContext: () => Partial<IconProps> | undefined, withContext: <D extends As | "fragment" = "div", H extends IconProps = IconProps, R extends keyof H = keyof H>(el: D | _$react.FC<WithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>>, {
     name,
     className,
     withContext,

package/dist/types/components/list/list.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/list/list.style.d.ts
-declare const listStyle: ComponentSlotStyle<"icon" | "item" | "root", {
+declare const listStyle: ComponentSlotStyle<"icon" | "root" | "item", {
   styleType: {
     circle: {
       root: {
@@ -35,7 +35,7 @@ declare const listStyle: ComponentSlotStyle<"icon" | "item" | "root", {
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"icon" | "item" | "root">>>;
+}, CSSModifierObject<CSSSlotObject<"icon" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"icon" | "root" | "item">>>;
 type ListStyle = typeof listStyle;
 //#endregion
 export { ListStyle, listStyle };

package/dist/types/components/loading/loading.d.ts

@@ -17,7 +17,7 @@ interface LoadingProps extends WithoutThemeProps<IconProps>, ThemeProps<LoadingS
    */
   secondaryColor?: CSSProps["color"];
 }
-declare const LoadingPropsContext: _$react.Context<Partial<LoadingProps> | undefined>, useLoadingPropsContext: () => Partial<LoadingProps> | undefined, withContext: <D extends "fragment" | As = "div", H extends LoadingProps = LoadingProps, R extends keyof H = keyof H>(el: D | _$react.FC<WithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>>, {
+declare const LoadingPropsContext: _$react.Context<Partial<LoadingProps> | undefined>, useLoadingPropsContext: () => Partial<LoadingProps> | undefined, withContext: <D extends As | "fragment" = "div", H extends LoadingProps = LoadingProps, R extends keyof H = keyof H>(el: D | _$react.FC<WithoutThemeProps<H, ComponentStyle<CSSPropObject<CSSObject>, CSSModifierObject, CSSModifierObject>, R>>, {
     name,
     className,
     withContext,

package/dist/types/components/menu/menu.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/menu/menu.style.d.ts
-declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item">>, {
+declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>, {
   sm: {
     command: {
       fontSize: "2xs";
@@ -86,7 +86,7 @@ declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "con
       px: "2";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item">>>;
+}, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>>;
 type MenuStyle = typeof menuStyle;
 //#endregion
 export { MenuStyle, menuStyle };

package/dist/types/components/native-accordion/native-accordion.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/native-accordion/native-accordion.style.d.ts
-declare const nativeAccordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", {
+declare const nativeAccordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "root" | "item", {
   /**
    * If `true`, animate the accordion items when they are expanded or collapsed.
    *
@@ -31,7 +31,7 @@ declare const nativeAccordionStyle: ComponentSlotStyle<"button" | "panel" | "ico
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
+}, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, {
   panel: {
     button: {
       rounded: "l2";

package/dist/types/components/notice/notice.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/notice/notice.style.d.ts
-declare const noticeStyle: ComponentSlotStyle<"content" | "item" | "root" | "closeButton", CSSPropObject<CSSSlotObject<"content" | "item" | "root" | "closeButton">>, CSSModifierObject<CSSSlotObject<"content" | "item" | "root" | "closeButton">>, CSSModifierObject<CSSSlotObject<"content" | "item" | "root" | "closeButton">>>;
+declare const noticeStyle: ComponentSlotStyle<"content" | "root" | "closeButton" | "item", CSSPropObject<CSSSlotObject<"content" | "root" | "closeButton" | "item">>, CSSModifierObject<CSSSlotObject<"content" | "root" | "closeButton" | "item">>, CSSModifierObject<CSSSlotObject<"content" | "root" | "closeButton" | "item">>>;
 type NoticeStyle = typeof noticeStyle;
 //#endregion
 export { NoticeStyle };

package/dist/types/components/pagination/pagination.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/pagination/pagination.style.d.ts
-declare const paginationStyle: ComponentSlotStyle<"text" | "item" | "root", CSSPropObject<CSSSlotObject<"text" | "item" | "root">>, {
+declare const paginationStyle: ComponentSlotStyle<"text" | "root" | "item", CSSPropObject<CSSSlotObject<"text" | "root" | "item">>, {
   xs: {
     item: {
       fontSize: "{font-size}";

package/dist/types/components/password-input/strength-meter.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/password-input/strength-meter.style.d.ts
-declare const strengthMeterStyle: ComponentSlotStyle<"label" | "indicator" | "root" | "indicators", CSSPropObject<CSSSlotObject<"label" | "indicator" | "root" | "indicators">>, CSSModifierObject<CSSSlotObject<"label" | "indicator" | "root" | "indicators">>, CSSModifierObject<CSSSlotObject<"label" | "indicator" | "root" | "indicators">>>;
+declare const strengthMeterStyle: ComponentSlotStyle<"label" | "root" | "indicator" | "indicators", CSSPropObject<CSSSlotObject<"label" | "root" | "indicator" | "indicators">>, CSSModifierObject<CSSSlotObject<"label" | "root" | "indicator" | "indicators">>, CSSModifierObject<CSSSlotObject<"label" | "root" | "indicator" | "indicators">>>;
 type StrengthMeterStyle = typeof strengthMeterStyle;
 //#endregion
 export { StrengthMeterStyle, strengthMeterStyle };

package/dist/types/components/radio/radio.d.ts

@@ -29,7 +29,7 @@ interface RadioProps<Y extends string = string> extends Merge<HTMLStyledProps<"l
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       circle: {
         indicator: {
@@ -135,7 +135,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioPropsContext: _$react.Context<Partial<RadioProps<string>> | undefined>, useRadioPropsContext: () => Partial<RadioProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioPropsContext: _$react.Context<Partial<RadioProps<string>> | undefined>, useRadioPropsContext: () => Partial<RadioProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       circle: {
         indicator: {
@@ -241,7 +241,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       circle: {
         indicator: {

package/dist/types/components/radio/radio.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/radio/radio.style.d.ts
-declare const radioStyle: ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+declare const radioStyle: ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
   /**
    * The shape of the component
    *

package/dist/types/components/radio-card/radio-card.d.ts

@@ -55,7 +55,7 @@ interface RadioCardRootProps<Y extends string = string> extends Merge<HTMLStyled
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
+declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "description" | "root" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {
@@ -232,7 +232,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: _$react.Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: _$react.Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "description" | "root" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {
@@ -409,7 +409,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "description" | "root" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {

package/dist/types/components/radio-card/radio-card.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/radio-card/radio-card.style.d.ts
-declare const radioCardStyle: ComponentSlotStyle<"group" | "indicator" | "root" | "description" | "addon", {
+declare const radioCardStyle: ComponentSlotStyle<"group" | "description" | "root" | "indicator" | "addon", {
   /**
    * The justify indicator of the component
    *

package/dist/types/components/rating/rating.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/rating/rating.style.d.ts
-declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"group" | "icon" | "item" | "root">>, {
+declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"group" | "icon" | "root" | "item">>, {
   xs: {
     icon: {
       fontSize: "md";
@@ -27,7 +27,7 @@ declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "item" | "root"
       fontSize: "3xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"group" | "icon" | "item" | "root">>>;
+}, CSSModifierObject<CSSSlotObject<"group" | "icon" | "root" | "item">>>;
 type RatingStyle = typeof ratingStyle;
 //#endregion
 export { RatingStyle, ratingStyle };

package/dist/types/components/reorder/reorder.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/reorder/reorder.style.d.ts
-declare const reorderStyle: ComponentSlotStyle<"item" | "root" | "trigger", {
+declare const reorderStyle: ComponentSlotStyle<"root" | "item" | "trigger", {
   /**
    * The orientation of the reorder.
    *

package/dist/types/components/resizable/resizable.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/resizable/resizable.style.d.ts
-declare const resizableStyle: ComponentSlotStyle<"icon" | "item" | "root" | "trigger", {
+declare const resizableStyle: ComponentSlotStyle<"icon" | "root" | "item" | "trigger", {
   /**
    * The orientation of the resizable.
    *
@@ -19,7 +19,7 @@ declare const resizableStyle: ComponentSlotStyle<"icon" | "item" | "root" | "tri
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"icon" | "item" | "root" | "trigger">>, {
+}, CSSModifierObject<CSSSlotObject<"icon" | "root" | "item" | "trigger">>, {
   border: {
     icon: {
       bg: "colorScheme.muted";

package/dist/types/components/segmented-control/segmented-control.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/segmented-control/segmented-control.style.d.ts
-declare const segmentedControlStyle: ComponentSlotStyle<"indicator" | "item" | "root", {
+declare const segmentedControlStyle: ComponentSlotStyle<"root" | "item" | "indicator", {
   /**
    * If `true`, the segmented control will be full rounded.
    *
@@ -113,7 +113,7 @@ declare const segmentedControlStyle: ComponentSlotStyle<"indicator" | "item" | "
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"indicator" | "item" | "root">>>;
+}, CSSModifierObject<CSSSlotObject<"root" | "item" | "indicator">>>;
 type SegmentedControlStyle = typeof segmentedControlStyle;
 //#endregion
 export { SegmentedControlStyle, segmentedControlStyle };

package/dist/types/components/select/select.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/select/select.style.d.ts
-declare const selectStyle: ComponentSlotStyle<"label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "valueText", {
+declare const selectStyle: ComponentSlotStyle<"label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText", {
   /**
    * If `true`, wrap the value text.
    *

package/dist/types/components/status/status.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/status/status.style.d.ts
-declare const statusStyle: ComponentSlotStyle<"label" | "indicator" | "root", CSSPropObject<CSSSlotObject<"label" | "indicator" | "root">>, {
+declare const statusStyle: ComponentSlotStyle<"label" | "root" | "indicator", CSSPropObject<CSSSlotObject<"label" | "root" | "indicator">>, {
   sm: {
     indicator: {
       boxSize: "2";
@@ -26,7 +26,7 @@ declare const statusStyle: ComponentSlotStyle<"label" | "indicator" | "root", CS
       fontSize: "lg";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"label" | "indicator" | "root">>>;
+}, CSSModifierObject<CSSSlotObject<"label" | "root" | "indicator">>>;
 type StatusStyle = typeof statusStyle;
 //#endregion
 export { StatusStyle, statusStyle };

package/dist/types/components/steps/steps.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/steps/steps.style.d.ts
-declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "indicator" | "item" | "root" | "description", {
+declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "description" | "root" | "item" | "indicator", {
   /**
    * The orientation of the steps.
    *

package/dist/types/components/timeline/timeline.d.ts

@@ -69,7 +69,7 @@ declare const TimelineRoot: Component<({
   index,
   items,
   ...rest
-}: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "indicator" | "item" | "root" | "connector" | "description", {
+}: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "description" | "root" | "item" | "indicator" | "connector", {
   align: {
     center: {
       content: {

package/dist/types/components/timeline/timeline.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/timeline/timeline.style.d.ts
-declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "indicator" | "item" | "root" | "connector" | "description", {
+declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "description" | "root" | "item" | "indicator" | "connector", {
   /**
    * The alignment of the timeline.
    *

package/dist/types/components/toggle/toggle.d.ts

@@ -12,7 +12,7 @@ import * as _$_yamada_ui_utils0 from "@yamada-ui/utils";
 
 //#region src/components/toggle/toggle.d.ts
 interface ToggleProps<Y extends string = string> extends Omit<WithoutThemeProps<IconButtonProps, ToggleStyle>, "aria-label" | "onChange" | "ref" | "value">, UseToggleProps<Y>, Pick<UseInputBorderProps, "errorBorderColor">, ThemeProps<ToggleStyle> {}
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
+declare const component: <H extends As | "fragment" = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
     fullRounded: {
       true: {
         root: {

package/dist/types/components/tree/tree.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/tree/tree.style.d.ts
-declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "indicator" | "item" | "root", {
+declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "root" | "item" | "indicator", {
   /**
    * The shape of the component
    *

package/dist/types/providers/i18n-provider/i18n-provider.d.ts

@@ -134,7 +134,7 @@ declare const I18nContext: _$react.Context<I18nContext<{
   readonly toggle: {
     readonly "Toggle button": "Toggle button";
   };
-}, "progress.Loading..." | "progress.{value} percent" | "select.Clear value" | "table.Clear sorting" | "table.Page size" | "table.Select all rows" | "table.Select row" | "table.Sort ascending" | "table.Sort descending" | "toggle.Toggle button" | "slider.Slider thumb" | "modal.Close modal" | "modal.Open modal" | "closeButton.Close" | "tag.Close tag" | "stat.Decreased by" | "stat.Increased by" | "sidebar.Close sidebar" | "sidebar.Open sidebar" | "actionBar.Close action bar" | "actionBar.Open action bar" | "autocomplete.Clear value" | "autocomplete.No results found" | "avatar.Avatar Icon" | "breadcrumb.Breadcrumb" | "breadcrumb.Ellipsis" | "calendar.Choose the month" | "calendar.Choose the year" | "calendar.Go to the next month" | "calendar.Go to the previous month" | "calendar.Today" | "carousel.Go to next slide" | "carousel.Go to previous slide" | "carousel.Go to {page} slide" | "carousel.Slides" | "carousel.{page} of {total}" | "colorPicker.Pick a color" | "colorSelector.Pick a color" | "colorSwatch.Color swatch group" | "datePicker.Clear value" | "hueSlider.Blue" | "hueSlider.Cyan" | "hueSlider.Green" | "hueSlider.Magenta" | "hueSlider.Red" | "hueSlider.Yellow" | "numberInput.Decrease" | "numberInput.Increase" | "pagination.Go to first page" | "pagination.Go to last page" | "pagination.Go to next page" | "pagination.Go to page {value}" | "pagination.Go to previous page" | "pagination.Pagination" | "pagination.{value} / {total}" | "pagination.{value} of {total}" | "passwordInput.Password strength meter" | "passwordInput.Toggle password visibility" | "saturationSlider.Saturation and brightness thumb" | "saturationSlider.Saturation {saturation}%, Brightness {brightness}%">>;
+}, "progress.Loading..." | "progress.{value} percent" | "select.Clear value" | "table.Clear sorting" | "table.Page size" | "table.Select all rows" | "table.Select row" | "table.Sort ascending" | "table.Sort descending" | "toggle.Toggle button" | "slider.Slider thumb" | "modal.Close modal" | "modal.Open modal" | "closeButton.Close" | "actionBar.Close action bar" | "actionBar.Open action bar" | "autocomplete.Clear value" | "autocomplete.No results found" | "avatar.Avatar Icon" | "breadcrumb.Breadcrumb" | "breadcrumb.Ellipsis" | "calendar.Choose the month" | "calendar.Choose the year" | "calendar.Go to the next month" | "calendar.Go to the previous month" | "calendar.Today" | "carousel.Go to next slide" | "carousel.Go to previous slide" | "carousel.Go to {page} slide" | "carousel.Slides" | "carousel.{page} of {total}" | "colorPicker.Pick a color" | "colorSelector.Pick a color" | "colorSwatch.Color swatch group" | "datePicker.Clear value" | "hueSlider.Blue" | "hueSlider.Cyan" | "hueSlider.Green" | "hueSlider.Magenta" | "hueSlider.Red" | "hueSlider.Yellow" | "numberInput.Decrease" | "numberInput.Increase" | "pagination.Go to first page" | "pagination.Go to last page" | "pagination.Go to next page" | "pagination.Go to page {value}" | "pagination.Go to previous page" | "pagination.Pagination" | "pagination.{value} / {total}" | "pagination.{value} of {total}" | "passwordInput.Password strength meter" | "passwordInput.Toggle password visibility" | "saturationSlider.Saturation and brightness thumb" | "saturationSlider.Saturation {saturation}%, Brightness {brightness}%" | "sidebar.Close sidebar" | "sidebar.Open sidebar" | "stat.Decreased by" | "stat.Increased by" | "tag.Close tag">>;
 interface I18nProviderProps {
   children?: ReactNode;
   /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yamada-ui/react",
   "type": "module",
-  "version": "2.3.0-next-20260515022613",
+  "version": "2.3.0-next-20260516024028",
   "description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
   "keywords": [
     "yamada",