@yamada-ui/react 2.2.1-dev-20260429022802 → 2.2.1-dev-20260429024151

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

@@ -4,6 +4,8 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_dom = require('../../utils/dom.cjs');
 const require_ref = require('../../utils/ref.cjs');
 const require_utils_index = require('../../utils/index.cjs');
+const require_props = require('../../core/components/props.cjs');
+require('../../core/index.cjs');
 const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
 const require_use_field_props = require('../field/use-field-props.cjs');
 require('../field/index.cjs');
@@ -31,51 +33,43 @@ const useSwitch = (props = {}) => {
 	const onKeyDown = (0, react.useCallback)((ev) => {
 		if (interactive && checkOnEnter && ev.key === "Enter") inputRef.current?.click();
 	}, [interactive, checkOnEnter]);
-	const getRootProps = (0, react.useCallback)((props$1 = {}) => ({
-		...dataProps,
+	const getRootProps = (0, react.useCallback)((props$1 = {}) => require_props.mergeProps(dataProps, {
 		htmlFor: id,
-		"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
-		...rest,
-		...props$1
-	}), [
+		"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked)
+	}, rest, props$1)(), [
 		checked,
 		rest,
 		id,
 		dataProps
 	]);
-	const getTrackProps = (0, react.useCallback)((props$1 = {}) => ({
-		"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
-		...dataProps,
-		...props$1
-	}), [checked, dataProps]);
-	const getThumbProps = (0, react.useCallback)((props$1 = {}) => ({
-		"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
-		...dataProps,
-		...props$1
-	}), [checked, dataProps]);
+	const getTrackProps = (0, react.useCallback)((props$1 = {}) => require_props.mergeProps(dataProps, { "data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked) }, props$1)(), [checked, dataProps]);
+	const getThumbProps = (0, react.useCallback)((props$1 = {}) => require_props.mergeProps(dataProps, { "data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked) }, props$1)(), [checked, dataProps]);
 	return {
 		checked,
-		getInputProps: (0, react.useCallback)((props$1 = {}) => ({
-			...ariaProps,
-			...dataProps,
-			id,
-			type: "checkbox",
-			name,
-			style: require_dom.visuallyHiddenAttributes.style,
-			checked,
-			disabled,
-			readOnly,
-			required,
-			role: "switch",
-			tabIndex: interactive ? 0 : -1,
-			value,
-			...props$1,
-			ref: require_ref.mergeRefs(inputRef, props$1.ref, ref),
-			onBlur: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onBlur, props$1.onBlur),
-			onChange: (0, require_utils_index.utils_exports.handlerAll)(props$1.onChange, onChange),
-			onFocus: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onFocus, props$1.onFocus),
-			onKeyDown: (0, require_utils_index.utils_exports.handlerAll)(props$1.onKeyDown, onKeyDown)
-		}), [
+		getInputProps: (0, react.useCallback)((props$1 = {}) => {
+			return {
+				...require_props.mergeProps(ariaProps, dataProps, {
+					id,
+					type: "checkbox",
+					name,
+					style: require_dom.visuallyHiddenAttributes.style,
+					checked,
+					disabled,
+					readOnly,
+					required,
+					role: "switch",
+					tabIndex: interactive ? 0 : -1,
+					value
+				}, {
+					onBlur: eventProps.onBlur,
+					onFocus: eventProps.onFocus
+				}, props$1, {
+					onChange,
+					onKeyDown
+				})({ mergeRef: false }),
+				ref: require_ref.mergeRefs(inputRef, props$1.ref, ref)
+			};
+		}, [
 			ariaProps,
 			dataProps,
 			id,
@@ -91,11 +85,7 @@ const useSwitch = (props = {}) => {
 			onChange,
 			onKeyDown
 		]),
-		getLabelProps: (0, react.useCallback)((props$1 = {}) => ({
-			...dataProps,
-			"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
-			...props$1
-		}), [dataProps, checked]),
+		getLabelProps: (0, react.useCallback)((props$1 = {}) => require_props.mergeProps(dataProps, { "data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked) }, props$1)(), [dataProps, checked]),
 		getRootProps,
 		getThumbProps,
 		getTrackProps

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

@@ -1 +1 @@
-{"version":3,"file":"use-switch.cjs","names":["useFieldProps","useControllableState","getRootProps: PropGetter<\"label\">","props","getTrackProps: PropGetter","getThumbProps: PropGetter","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number | string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the switch will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the switch will be checked when the Enter key is pressed.\n   *\n   * @default true\n   */\n  checkOnEnter?: boolean\n  /**\n   * If `true`, the switch will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The tab-index property of the underlying input element.\n   */\n  tabIndex?: number\n  /**\n   * The value to be used in the switch input.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the switch 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 switch is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number | string = string>(\n  props: UseSwitchProps<Y> = {},\n) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      ref,\n      name,\n      checked: checkedProp,\n      checkOnEnter = true,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return ev.preventDefault()\n\n      setChecked(ev.target.checked)\n      onChangeProp?.(ev)\n    },\n    [onChangeProp, setChecked, interactive],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (interactive && checkOnEnter && ev.key === \"Enter\")\n        inputRef.current?.click()\n    },\n    [interactive, checkOnEnter],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      htmlFor: id,\n      \"data-checked\": dataAttr(checked),\n      ...rest,\n      ...props,\n    }),\n    [checked, rest, id, dataProps],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-checked\": dataAttr(checked),\n      ...dataProps,\n      ...props,\n    }),\n    [checked, dataProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-checked\": dataAttr(checked),\n      ...dataProps,\n      ...props,\n    }),\n    [checked, dataProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...ariaProps,\n      ...dataProps,\n      id,\n      type: \"checkbox\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      role: \"switch\",\n      tabIndex: interactive ? 0 : -1,\n      value,\n      ...props,\n      ref: mergeRefs(inputRef, props.ref, ref),\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      ariaProps,\n      dataProps,\n      id,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      interactive,\n      value,\n      ref,\n      eventProps,\n      onChange,\n      onKeyDown,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"data-checked\": dataAttr(checked),\n      ...props,\n    }),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;;;;AAyEA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,yBAAc;CACpB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACEA,sCAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,6BAAoC,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAcC,gEAAqB;EACjD,cAAc;EACd,OAAO;EACR,CAAC;CAEF,MAAM,mCACH,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAO,GAAG,gBAAgB;AAE5C,aAAW,GAAG,OAAO,QAAQ;AAC7B,iBAAe,GAAG;IAEpB;EAAC;EAAc;EAAY;EAAY,CACxC;CAED,MAAM,oCACH,OAAwC;AACvC,MAAI,eAAe,gBAAgB,GAAG,QAAQ,QAC5C,UAAS,SAAS,OAAO;IAE7B,CAAC,aAAa,aAAa,CAC5B;CAED,MAAMC,uCACH,UAAQ,EAAE,MAAM;EACf,GAAG;EACH,SAAS;EACT,gEAAyB,QAAQ;EACjC,GAAG;EACH,GAAGC;EACJ,GACD;EAAC;EAAS;EAAM;EAAI;EAAU,CAC/B;CAED,MAAMC,wCACH,UAAQ,EAAE,MAAM;EACf,gEAAyB,QAAQ;EACjC,GAAG;EACH,GAAGD;EACJ,GACD,CAAC,SAAS,UAAU,CACrB;CAED,MAAME,wCACH,UAAQ,EAAE,MAAM;EACf,gEAAyB,QAAQ;EACjC,GAAG;EACH,GAAGF;EACJ,GACD,CAAC,SAAS,UAAU,CACrB;AAmDD,QAAO;EACL;EACA,uCAlDC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAOG,qCAAyB;GAChC;GACA;GACA;GACA;GACA,MAAM;GACN,UAAU,cAAc,IAAI;GAC5B;GACA,GAAGH;GACH,KAAKI,sBAAU,UAAUJ,QAAM,KAAK,IAAI;GACxC,0DAAmB,WAAW,QAAQA,QAAM,OAAO;GACnD,4DAAqBA,QAAM,UAAU,SAAS;GAC9C,2DAAoB,WAAW,SAASA,QAAM,QAAQ;GACtD,6DAAsBA,QAAM,WAAW,UAAU;GAClD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAcC,uCAXC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,gEAAyB,QAAQ;GACjC,GAAGA;GACJ,GACD,CAAC,WAAW,QAAQ,CACrB;EAMC;EACA;EACA;EACD"}
+{"version":3,"file":"use-switch.cjs","names":["useFieldProps","useControllableState","getRootProps: PropGetter<\"label\">","mergeProps","props","getTrackProps: PropGetter","getThumbProps: PropGetter","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, mergeRefs, visuallyHiddenAttributes } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number | string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the switch will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the switch will be checked when the Enter key is pressed.\n   *\n   * @default true\n   */\n  checkOnEnter?: boolean\n  /**\n   * If `true`, the switch will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The tab-index property of the underlying input element.\n   */\n  tabIndex?: number\n  /**\n   * The value to be used in the switch input.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the switch 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 switch is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number | string = string>(\n  props: UseSwitchProps<Y> = {},\n) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      ref,\n      name,\n      checked: checkedProp,\n      checkOnEnter = true,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return ev.preventDefault()\n\n      setChecked(ev.target.checked)\n      onChangeProp?.(ev)\n    },\n    [onChangeProp, setChecked, interactive],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (interactive && checkOnEnter && ev.key === \"Enter\")\n        inputRef.current?.click()\n    },\n    [interactive, checkOnEnter],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) =>\n      mergeProps(\n        dataProps,\n        { htmlFor: id, \"data-checked\": dataAttr(checked) },\n        rest,\n        props,\n      )(),\n    [checked, rest, id, dataProps],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const mergedProps = mergeProps(\n        ariaProps,\n        dataProps,\n        {\n          id,\n          type: \"checkbox\",\n          name,\n          style: visuallyHiddenAttributes.style,\n          checked,\n          disabled,\n          readOnly,\n          required,\n          role: \"switch\",\n          tabIndex: interactive ? 0 : -1,\n          value,\n        },\n        { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n        props,\n        { onChange, onKeyDown },\n      )({ mergeRef: false })\n\n      return {\n        ...mergedProps,\n        ref: mergeRefs(inputRef, props.ref, ref),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      id,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      interactive,\n      value,\n      ref,\n      eventProps,\n      onChange,\n      onKeyDown,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;;;;;;AAqEA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,yBAAc;CACpB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACEA,sCAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,6BAAoC,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAcC,gEAAqB;EACjD,cAAc;EACd,OAAO;EACR,CAAC;CAEF,MAAM,mCACH,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAO,GAAG,gBAAgB;AAE5C,aAAW,GAAG,OAAO,QAAQ;AAC7B,iBAAe,GAAG;IAEpB;EAAC;EAAc;EAAY;EAAY,CACxC;CAED,MAAM,oCACH,OAAwC;AACvC,MAAI,eAAe,gBAAgB,GAAG,QAAQ,QAC5C,UAAS,SAAS,OAAO;IAE7B,CAAC,aAAa,aAAa,CAC5B;CAED,MAAMC,uCACH,UAAQ,EAAE,KACTC,yBACE,WACA;EAAE,SAAS;EAAI,gEAAyB,QAAQ;EAAE,EAClD,MACAC,QACD,EAAE,EACL;EAAC;EAAS;EAAM;EAAI;EAAU,CAC/B;CAED,MAAMC,wCACH,UAAQ,EAAE,KACTF,yBAAW,WAAW,EAAE,gEAAyB,QAAQ,EAAE,EAAEC,QAAM,EAAE,EACvE,CAAC,SAAS,UAAU,CACrB;CAED,MAAME,wCACH,UAAQ,EAAE,KACTH,yBAAW,WAAW,EAAE,gEAAyB,QAAQ,EAAE,EAAEC,QAAM,EAAE,EACvE,CAAC,SAAS,UAAU,CACrB;AAsDD,QAAO;EACL;EACA,uCArDC,UAAQ,EAAE,KAAK;AAsBd,UAAO;IACL,GAtBkBD,yBAClB,WACA,WACA;KACE;KACA,MAAM;KACN;KACA,OAAOI,qCAAyB;KAChC;KACA;KACA;KACA;KACA,MAAM;KACN,UAAU,cAAc,IAAI;KAC5B;KACD,EACD;KAAE,QAAQ,WAAW;KAAQ,SAAS,WAAW;KAAS,EAC1DH,SACA;KAAE;KAAU;KAAW,CACxB,CAAC,EAAE,UAAU,OAAO,CAAC;IAIpB,KAAKI,sBAAU,UAAUJ,QAAM,KAAK,IAAI;IACzC;KAEH;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAWC,uCARC,UAAQ,EAAE,KACTD,yBAAW,WAAW,EAAE,gEAAyB,QAAQ,EAAE,EAAEC,QAAM,EAAE,EACvE,CAAC,WAAW,QAAQ,CACrB;EAMC;EACA;EACA;EACD"}

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

@@ -3,6 +3,8 @@
 import { visuallyHiddenAttributes } from "../../utils/dom.js";
 import { mergeRefs } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
+import { mergeProps } from "../../core/components/props.js";
+import "../../core/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { useFieldProps } from "../field/use-field-props.js";
 import "../field/index.js";
@@ -30,51 +32,43 @@ const useSwitch = (props = {}) => {
 	const onKeyDown = useCallback((ev) => {
 		if (interactive && checkOnEnter && ev.key === "Enter") inputRef.current?.click();
 	}, [interactive, checkOnEnter]);
-	const getRootProps = useCallback((props$1 = {}) => ({
-		...dataProps,
+	const getRootProps = useCallback((props$1 = {}) => mergeProps(dataProps, {
 		htmlFor: id,
-		"data-checked": (0, utils_exports.dataAttr)(checked),
-		...rest,
-		...props$1
-	}), [
+		"data-checked": (0, utils_exports.dataAttr)(checked)
+	}, rest, props$1)(), [
 		checked,
 		rest,
 		id,
 		dataProps
 	]);
-	const getTrackProps = useCallback((props$1 = {}) => ({
-		"data-checked": (0, utils_exports.dataAttr)(checked),
-		...dataProps,
-		...props$1
-	}), [checked, dataProps]);
-	const getThumbProps = useCallback((props$1 = {}) => ({
-		"data-checked": (0, utils_exports.dataAttr)(checked),
-		...dataProps,
-		...props$1
-	}), [checked, dataProps]);
+	const getTrackProps = useCallback((props$1 = {}) => mergeProps(dataProps, { "data-checked": (0, utils_exports.dataAttr)(checked) }, props$1)(), [checked, dataProps]);
+	const getThumbProps = useCallback((props$1 = {}) => mergeProps(dataProps, { "data-checked": (0, utils_exports.dataAttr)(checked) }, props$1)(), [checked, dataProps]);
 	return {
 		checked,
-		getInputProps: useCallback((props$1 = {}) => ({
-			...ariaProps,
-			...dataProps,
-			id,
-			type: "checkbox",
-			name,
-			style: visuallyHiddenAttributes.style,
-			checked,
-			disabled,
-			readOnly,
-			required,
-			role: "switch",
-			tabIndex: interactive ? 0 : -1,
-			value,
-			...props$1,
-			ref: mergeRefs(inputRef, props$1.ref, ref),
-			onBlur: (0, utils_exports.handlerAll)(eventProps.onBlur, props$1.onBlur),
-			onChange: (0, utils_exports.handlerAll)(props$1.onChange, onChange),
-			onFocus: (0, utils_exports.handlerAll)(eventProps.onFocus, props$1.onFocus),
-			onKeyDown: (0, utils_exports.handlerAll)(props$1.onKeyDown, onKeyDown)
-		}), [
+		getInputProps: useCallback((props$1 = {}) => {
+			return {
+				...mergeProps(ariaProps, dataProps, {
+					id,
+					type: "checkbox",
+					name,
+					style: visuallyHiddenAttributes.style,
+					checked,
+					disabled,
+					readOnly,
+					required,
+					role: "switch",
+					tabIndex: interactive ? 0 : -1,
+					value
+				}, {
+					onBlur: eventProps.onBlur,
+					onFocus: eventProps.onFocus
+				}, props$1, {
+					onChange,
+					onKeyDown
+				})({ mergeRef: false }),
+				ref: mergeRefs(inputRef, props$1.ref, ref)
+			};
+		}, [
 			ariaProps,
 			dataProps,
 			id,
@@ -90,11 +84,7 @@ const useSwitch = (props = {}) => {
 			onChange,
 			onKeyDown
 		]),
-		getLabelProps: useCallback((props$1 = {}) => ({
-			...dataProps,
-			"data-checked": (0, utils_exports.dataAttr)(checked),
-			...props$1
-		}), [dataProps, checked]),
+		getLabelProps: useCallback((props$1 = {}) => mergeProps(dataProps, { "data-checked": (0, utils_exports.dataAttr)(checked) }, props$1)(), [dataProps, checked]),
 		getRootProps,
 		getThumbProps,
 		getTrackProps

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

@@ -1 +1 @@
-{"version":3,"file":"use-switch.js","names":["getRootProps: PropGetter<\"label\">","props","getTrackProps: PropGetter","getThumbProps: PropGetter"],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number | string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the switch will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the switch will be checked when the Enter key is pressed.\n   *\n   * @default true\n   */\n  checkOnEnter?: boolean\n  /**\n   * If `true`, the switch will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The tab-index property of the underlying input element.\n   */\n  tabIndex?: number\n  /**\n   * The value to be used in the switch input.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the switch 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 switch is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number | string = string>(\n  props: UseSwitchProps<Y> = {},\n) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      ref,\n      name,\n      checked: checkedProp,\n      checkOnEnter = true,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return ev.preventDefault()\n\n      setChecked(ev.target.checked)\n      onChangeProp?.(ev)\n    },\n    [onChangeProp, setChecked, interactive],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (interactive && checkOnEnter && ev.key === \"Enter\")\n        inputRef.current?.click()\n    },\n    [interactive, checkOnEnter],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      htmlFor: id,\n      \"data-checked\": dataAttr(checked),\n      ...rest,\n      ...props,\n    }),\n    [checked, rest, id, dataProps],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-checked\": dataAttr(checked),\n      ...dataProps,\n      ...props,\n    }),\n    [checked, dataProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-checked\": dataAttr(checked),\n      ...dataProps,\n      ...props,\n    }),\n    [checked, dataProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...ariaProps,\n      ...dataProps,\n      id,\n      type: \"checkbox\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      role: \"switch\",\n      tabIndex: interactive ? 0 : -1,\n      value,\n      ...props,\n      ref: mergeRefs(inputRef, props.ref, ref),\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      ariaProps,\n      dataProps,\n      id,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      interactive,\n      value,\n      ref,\n      eventProps,\n      onChange,\n      onKeyDown,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"data-checked\": dataAttr(checked),\n      ...props,\n    }),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;;;AAyEA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,OAAO,OAAO;CACpB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACE,cAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD,cAAc;EACd,OAAO;EACR,CAAC;CAEF,MAAM,WAAW,aACd,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAO,GAAG,gBAAgB;AAE5C,aAAW,GAAG,OAAO,QAAQ;AAC7B,iBAAe,GAAG;IAEpB;EAAC;EAAc;EAAY;EAAY,CACxC;CAED,MAAM,YAAY,aACf,OAAwC;AACvC,MAAI,eAAe,gBAAgB,GAAG,QAAQ,QAC5C,UAAS,SAAS,OAAO;IAE7B,CAAC,aAAa,aAAa,CAC5B;CAED,MAAMA,eAAoC,aACvC,UAAQ,EAAE,MAAM;EACf,GAAG;EACH,SAAS;EACT,4CAAyB,QAAQ;EACjC,GAAG;EACH,GAAGC;EACJ,GACD;EAAC;EAAS;EAAM;EAAI;EAAU,CAC/B;CAED,MAAMC,gBAA4B,aAC/B,UAAQ,EAAE,MAAM;EACf,4CAAyB,QAAQ;EACjC,GAAG;EACH,GAAGD;EACJ,GACD,CAAC,SAAS,UAAU,CACrB;CAED,MAAME,gBAA4B,aAC/B,UAAQ,EAAE,MAAM;EACf,4CAAyB,QAAQ;EACjC,GAAG;EACH,GAAGF;EACJ,GACD,CAAC,SAAS,UAAU,CACrB;AAmDD,QAAO;EACL;EACA,eAnDyC,aACxC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAO,yBAAyB;GAChC;GACA;GACA;GACA;GACA,MAAM;GACN,UAAU,cAAc,IAAI;GAC5B;GACA,GAAGA;GACH,KAAK,UAAU,UAAUA,QAAM,KAAK,IAAI;GACxC,sCAAmB,WAAW,QAAQA,QAAM,OAAO;GACnD,wCAAqBA,QAAM,UAAU,SAAS;GAC9C,uCAAoB,WAAW,SAASA,QAAM,QAAQ;GACtD,yCAAsBA,QAAM,WAAW,UAAU;GAClD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAcC,eAZwC,aACvC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,4CAAyB,QAAQ;GACjC,GAAGA;GACJ,GACD,CAAC,WAAW,QAAQ,CACrB;EAMC;EACA;EACA;EACD"}
+{"version":3,"file":"use-switch.js","names":["getRootProps: PropGetter<\"label\">","props","getTrackProps: PropGetter","getThumbProps: PropGetter"],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, mergeRefs, visuallyHiddenAttributes } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number | string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the switch will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the switch will be checked when the Enter key is pressed.\n   *\n   * @default true\n   */\n  checkOnEnter?: boolean\n  /**\n   * If `true`, the switch will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The tab-index property of the underlying input element.\n   */\n  tabIndex?: number\n  /**\n   * The value to be used in the switch input.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the switch 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 switch is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number | string = string>(\n  props: UseSwitchProps<Y> = {},\n) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      ref,\n      name,\n      checked: checkedProp,\n      checkOnEnter = true,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return ev.preventDefault()\n\n      setChecked(ev.target.checked)\n      onChangeProp?.(ev)\n    },\n    [onChangeProp, setChecked, interactive],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (interactive && checkOnEnter && ev.key === \"Enter\")\n        inputRef.current?.click()\n    },\n    [interactive, checkOnEnter],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) =>\n      mergeProps(\n        dataProps,\n        { htmlFor: id, \"data-checked\": dataAttr(checked) },\n        rest,\n        props,\n      )(),\n    [checked, rest, id, dataProps],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const mergedProps = mergeProps(\n        ariaProps,\n        dataProps,\n        {\n          id,\n          type: \"checkbox\",\n          name,\n          style: visuallyHiddenAttributes.style,\n          checked,\n          disabled,\n          readOnly,\n          required,\n          role: \"switch\",\n          tabIndex: interactive ? 0 : -1,\n          value,\n        },\n        { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n        props,\n        { onChange, onKeyDown },\n      )({ mergeRef: false })\n\n      return {\n        ...mergedProps,\n        ref: mergeRefs(inputRef, props.ref, ref),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      id,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      interactive,\n      value,\n      ref,\n      eventProps,\n      onChange,\n      onKeyDown,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;;;;;AAqEA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,OAAO,OAAO;CACpB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACE,cAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD,cAAc;EACd,OAAO;EACR,CAAC;CAEF,MAAM,WAAW,aACd,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAO,GAAG,gBAAgB;AAE5C,aAAW,GAAG,OAAO,QAAQ;AAC7B,iBAAe,GAAG;IAEpB;EAAC;EAAc;EAAY;EAAY,CACxC;CAED,MAAM,YAAY,aACf,OAAwC;AACvC,MAAI,eAAe,gBAAgB,GAAG,QAAQ,QAC5C,UAAS,SAAS,OAAO;IAE7B,CAAC,aAAa,aAAa,CAC5B;CAED,MAAMA,eAAoC,aACvC,UAAQ,EAAE,KACT,WACE,WACA;EAAE,SAAS;EAAI,4CAAyB,QAAQ;EAAE,EAClD,MACAC,QACD,EAAE,EACL;EAAC;EAAS;EAAM;EAAI;EAAU,CAC/B;CAED,MAAMC,gBAA4B,aAC/B,UAAQ,EAAE,KACT,WAAW,WAAW,EAAE,4CAAyB,QAAQ,EAAE,EAAED,QAAM,EAAE,EACvE,CAAC,SAAS,UAAU,CACrB;CAED,MAAME,gBAA4B,aAC/B,UAAQ,EAAE,KACT,WAAW,WAAW,EAAE,4CAAyB,QAAQ,EAAE,EAAEF,QAAM,EAAE,EACvE,CAAC,SAAS,UAAU,CACrB;AAsDD,QAAO;EACL;EACA,eAtDyC,aACxC,UAAQ,EAAE,KAAK;AAsBd,UAAO;IACL,GAtBkB,WAClB,WACA,WACA;KACE;KACA,MAAM;KACN;KACA,OAAO,yBAAyB;KAChC;KACA;KACA;KACA;KACA,MAAM;KACN,UAAU,cAAc,IAAI;KAC5B;KACD,EACD;KAAE,QAAQ,WAAW;KAAQ,SAAS,WAAW;KAAS,EAC1DA,SACA;KAAE;KAAU;KAAW,CACxB,CAAC,EAAE,UAAU,OAAO,CAAC;IAIpB,KAAK,UAAU,UAAUA,QAAM,KAAK,IAAI;IACzC;KAEH;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAWC,eATwC,aACvC,UAAQ,EAAE,KACT,WAAW,WAAW,EAAE,4CAAyB,QAAQ,EAAE,EAAEA,QAAM,EAAE,EACvE,CAAC,WAAW,QAAQ,CACrB;EAMC;EACA;EACA;EACD"}

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

@@ -7,7 +7,7 @@ import { CollapseProps } from "../collapse/collapse.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react1033 from "react";
+import * as react1236 from "react";
 
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -31,7 +31,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react1033.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react1236.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
 /**
  * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
  *

package/dist/types/components/accordion/use-accordion.d.ts

@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { Descendant } from "../../hooks/use-descendants/index.js";
 import "../../index.js";
-import * as react1021 from "react";
+import * as react1224 from "react";
 
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react1021.Context<{
+declare const AccordionDescendantsContext: react1224.Context<{
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
     destroy: () => void;
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react1021.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react1021.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1224.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react1021.Context<{
       prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
       register: (props?: {
         disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-      } | undefined) => react1021.RefCallback<HTMLButtonElement>;
+      } | undefined) => react1224.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react1021.RefCallback<HTMLButtonElement>;
+    register: react1224.RefCallback<HTMLButtonElement>;
   }, useAccordionDescendants: () => {
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react1021.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react1021.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1224.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
   };
 interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
-declare const AccordionContext: react1021.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react1224.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react1021.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react1224.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
 interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
   /**
    * The initial index(es) of the accordion item to expand.
@@ -137,7 +137,7 @@ declare const useAccordion: ({
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react1021.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1224.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -145,8 +145,8 @@ declare const useAccordion: ({
   focusedIndex: number;
   index: number | number[];
   multiple: boolean | undefined;
-  setFocusedIndex: react1021.Dispatch<react1021.SetStateAction<number>>;
-  setIndex: react1021.Dispatch<react1021.SetStateAction<number | number[]>>;
+  setFocusedIndex: react1224.Dispatch<react1224.SetStateAction<number>>;
+  setIndex: react1224.Dispatch<react1224.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/action-bar/action-bar.d.ts

@@ -6,7 +6,7 @@ import { PortalProps } from "../portal/portal.js";
 import { UsePopupAnimationProps } from "../popover/popover.js";
 import { UseActionBarProps } from "./use-action-bar.js";
 import "../../index.js";
-import * as react1009 from "react";
+import * as react1223 from "react";
 import { PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/action-bar/action-bar.d.ts
@@ -28,7 +28,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
    */
   onCloseComplete?: () => void;
 }
-declare const ActionBarPropsContext: react1009.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react1223.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
 /**
  * `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
  *

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

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
 import { AiryStyle } from "./airy.style.js";
 import "../../index.js";
-import * as react1020 from "react";
+import * as react1221 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/airy/airy.d.ts
@@ -56,7 +56,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const AiryPropsContext: react1020.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react1221.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
 /**
  * `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
  *

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

@@ -6,7 +6,7 @@ import { IconProps } from "../icon/icon.js";
 import { LoadingProps } from "../loading/loading.js";
 import { StatusScheme } from "../status/status.js";
 import "../../index.js";
-import * as react1019 from "react";
+import * as react1222 from "react";
 
 //#region src/components/alert/alert.d.ts
 interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -17,7 +17,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
    */
   status?: StatusScheme;
 }
-declare const AlertPropsContext: react1019.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react1222.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
 /**
  * `Alert` is a component that conveys information to the user.
  *

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

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.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<"loading" | "title" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"loading" | "title" | "icon" | "root" | "description">>, CSSModifierObject<CSSSlotObject<"loading" | "title" | "icon" | "root" | "description">>, {
   island: {
     description: {
       color: "fg.muted";

package/dist/types/components/alpha-slider/alpha-slider.d.ts

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import { AlphaSliderStyle } from "./alpha-slider.style.js";
 import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
 import "../../index.js";
-import * as react1018 from "react";
+import * as react1220 from "react";
 
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -37,7 +37,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react1018.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react1220.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
 /**
  * `AlphaSlider` is a component used to allow the user to select color transparency.
  *

package/dist/types/components/aspect-ratio/aspect-ratio.d.ts

@@ -2,7 +2,7 @@ import { StyleValue } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react1010 from "react";
+import * as react1219 from "react";
 
 //#region src/components/aspect-ratio/aspect-ratio.d.ts
 interface AspectRatioProps extends HTMLStyledProps {
@@ -13,7 +13,7 @@ interface AspectRatioProps extends HTMLStyledProps {
    */
   ratio?: StyleValue<number>;
 }
-declare const AspectRatioPropsContext: react1010.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react1219.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
 /**
  * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
  *

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

@@ -10,7 +10,7 @@ import { InputElementProps } from "../input/input-element.js";
 import { InputGroupRootProps } from "../input/input-group.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react1011 from "react";
+import * as react1210 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -66,7 +66,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react1011.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react1210.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
 /**
  * `Autocomplete` is a component used to display suggestions in response to user text input.
  *

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

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

package/dist/types/components/autocomplete/use-autocomplete.d.ts

@@ -6,7 +6,7 @@ import { FieldProps } from "../field/field.js";
 import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
 import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
 import "../../index.js";
-import * as react1012 from "react";
+import * as react1204 from "react";
 import { ChangeEvent, ReactNode } from "react";
 
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -26,7 +26,7 @@ interface AutocompleteFilter {
 }
 type AutocompleteMatcher = typeof index_d_exports.match;
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react1012.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react1204.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
 interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
   /**
    * If `true`, the autocomplete will allow custom value.
@@ -154,7 +154,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
     lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react1012.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react1204.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -164,8 +164,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react1012.Dispatch<react1012.SetStateAction<string>>;
-  setValue: react1012.Dispatch<react1012.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react1204.Dispatch<react1204.SetStateAction<string>>;
+  setValue: react1204.Dispatch<react1204.SetStateAction<Multiple extends true ? string[] : string>>;
   value: Multiple extends true ? string[] : string;
   valueMap: {
     [key: string]: ComboboxItemWithValue;

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

@@ -6,9 +6,9 @@ import "../../core/index.js";
 import { AvatarStyle } from "./avatar.style.js";
 import { UseAvatarProps } from "./use-avatar.js";
 import "../../index.js";
-import * as react1004 from "react";
+import * as react1199 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils5 from "@yamada-ui/utils";
+import * as _yamada_ui_utils19 from "@yamada-ui/utils";
 
 //#region src/components/avatar/avatar.d.ts
 interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarProps {
@@ -25,7 +25,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
    */
   imageProps?: AvatarImageProps;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils5.Dict = _yamada_ui_utils5.Dict<any>>(el: H | react1004.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils19.Dict = _yamada_ui_utils19.Dict<any>>(el: H | react1199.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
     shape: {
       circle: {
         root: {
@@ -148,7 +148,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react1004.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react1004.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils5.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react1199.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react1199.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils19.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
     shape: {
       circle: {
         root: {
@@ -271,7 +271,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils5.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils19.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
     shape: {
       circle: {
         root: {

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

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import "../../index.js";
 
 //#region src/components/avatar/avatar.style.d.ts
-declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
   /**
    * The shape of the component
    *