@yamada-ui/react 2.2.1-dev-20260428120502 → 2.2.1-dev-20260428141643

package/dist/cjs/components/native-select/use-native-select.cjs

@@ -1,8 +1,9 @@
 "use client";
 
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.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_use_field_props = require('../field/use-field-props.cjs');
 require('../field/index.cjs');
 let react = require("react");
@@ -53,21 +54,21 @@ const useNativeSelect = (props = {}) => {
 		...props$1
 	}), [dataProps]);
 	return {
-		getFieldProps: (0, react.useCallback)(({ ref, ...props$1 } = {}) => ({
+		getFieldProps: (0, react.useCallback)(({ ref, ...props$1 } = {}) => require_props.mergeProps({
 			disabled,
 			readOnly,
 			tabIndex: interactive ? void 0 : -1,
 			...ariaProps,
 			...dataProps,
 			"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(!interactive),
-			"aria-label": placeholder,
-			...rest,
-			...props$1,
-			ref: require_ref.mergeRefs(ref, rest.ref),
-			children: props$1.children ?? computedChildren,
-			onBlur: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onBlur, props$1.onBlur),
-			onFocus: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onFocus, props$1.onFocus)
-		}), [
+			"aria-label": placeholder
+		}, {
+			onBlur: eventProps.onBlur,
+			onFocus: eventProps.onFocus
+		}, rest, props$1, {
+			ref,
+			children: props$1.children ?? computedChildren
+		})(), [
 			interactive,
 			ariaProps,
 			computedChildren,

package/dist/cjs/components/native-select/use-native-select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-native-select.cjs","names":["useFieldProps","computedChildren: ReactNode","rest","items","index","label","computedChildren","getRootProps: PropGetter","props","mergeRefs"],"sources":["../../../../src/components/native-select/use-native-select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { cloneElement, useCallback, useMemo } from \"react\"\nimport { ariaAttr, handlerAll, mergeRefs } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface NativeSelectSharedItem extends Omit<\n  HTMLProps<\"option\">,\n  \"children\" | \"label\" | \"value\"\n> {\n  label: string\n}\n\ninterface NativeSelectItemWithValue extends NativeSelectSharedItem {\n  value?: HTMLProps<\"option\">[\"value\"]\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectSharedItem {\n  items: NativeSelectItemWithValue[]\n}\n\nexport type NativeSelectItem =\n  | NativeSelectItemWithItems\n  | NativeSelectItemWithValue\n\nexport interface UseNativeSelectProps extends HTMLProps<\"select\">, FieldProps {\n  /**\n   * If `true`, include placeholder in options.\n   *\n   * @default true\n   */\n  includePlaceholder?: boolean\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default []\n   */\n  items?: NativeSelectItem[]\n  /**\n   * The placeholder for select.\n   */\n  placeholder?: string\n}\n\nexport const useNativeSelect = (props: UseNativeSelectProps = {}) => {\n  const {\n    props: {\n      children,\n      disabled,\n      includePlaceholder = true,\n      items = [],\n      placeholder,\n      readOnly,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n\n  const computedChildren = useMemo(() => {\n    let computedChildren: ReactNode = null\n\n    if (children) {\n      computedChildren = children\n    } else if (items.length) {\n      computedChildren = items.map((item, index) => {\n        if (\"items\" in item) {\n          const { items, label, ...rest } = item\n\n          return cloneElement(<optgroup />, {\n            key: index,\n            children: items.map(({ label, ...rest }, index) =>\n              cloneElement(<option />, {\n                key: index,\n                children: label,\n                ...rest,\n              }),\n            ),\n            label,\n            ...rest,\n          })\n        } else {\n          const { label, ...rest } = item\n\n          return cloneElement(<option />, {\n            key: index,\n            children: label,\n            ...rest,\n          })\n        }\n      })\n    }\n\n    return (\n      <>\n        {placeholder ? (\n          <option hidden={!includePlaceholder} value=\"\">\n            {placeholder}\n          </option>\n        ) : null}\n\n        {computedChildren}\n      </>\n    )\n  }, [children, items, placeholder, includePlaceholder])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({ ...dataProps, ...props }),\n    [dataProps],\n  )\n\n  const getFieldProps: PropGetter<\"select\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      disabled,\n      readOnly,\n      tabIndex: interactive ? undefined : -1,\n      ...ariaProps,\n      ...dataProps,\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": placeholder,\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, rest.ref),\n      children: props.children ?? computedChildren,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus),\n    }),\n    [\n      interactive,\n      ariaProps,\n      computedChildren,\n      dataProps,\n      eventProps,\n      rest,\n      placeholder,\n      disabled,\n      readOnly,\n    ],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props) => ({ ...dataProps, ...props }),\n    [dataProps],\n  )\n\n  return { getFieldProps, getIconProps, getRootProps }\n}\n\nexport type UseNativeSelectReturn = ReturnType<typeof useNativeSelect>\n"],"mappings":";;;;;;;;;;;AA+CA,MAAa,mBAAmB,QAA8B,EAAE,KAAK;CACnE,MAAM,EACJ,OAAO,EACL,UACA,UACA,qBAAqB,MACrB,QAAQ,EAAE,EACV,aACA,UACA,GAAG,QAEL,WACA,WACA,eACEA,sCAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAElC,MAAM,4CAAiC;EACrC,IAAIC,qBAA8B;AAElC,MAAI,SACF,sBAAmB;WACV,MAAM,OACf,sBAAmB,MAAM,KAAK,MAAM,UAAU;AAC5C,OAAI,WAAW,MAAM;IACnB,MAAM,EAAE,gBAAO,OAAO,GAAGC,WAAS;AAElC,mCAAoB,2CAAC,eAAW,EAAE;KAChC,KAAK;KACL,UAAUC,QAAM,KAAK,EAAE,gBAAO,GAAGD,UAAQ,oCAC1B,2CAAC,aAAS,EAAE;MACvB,KAAKE;MACL,UAAUC;MACV,GAAGH;MACJ,CAAC,CACH;KACD;KACA,GAAGA;KACJ,CAAC;UACG;IACL,MAAM,EAAE,OAAO,GAAGA,WAAS;AAE3B,mCAAoB,2CAAC,aAAS,EAAE;KAC9B,KAAK;KACL,UAAU;KACV,GAAGA;KACJ,CAAC;;IAEJ;AAGJ,SACE,qFACG,cACC,2CAAC;GAAO,QAAQ,CAAC;GAAoB,OAAM;aACxC;IACM,GACP,MAEHI,sBACA;IAEJ;EAAC;EAAU;EAAO;EAAa;EAAmB,CAAC;CAEtD,MAAMC,uCACH,aAAW;EAAE,GAAG;EAAW,GAAGC;EAAO,GACtC,CAAC,UAAU,CACZ;AAoCD,QAAO;EAAE,uCAjCN,EAAE,KAAK,GAAGA,YAAU,EAAE,MAAM;GAC3B;GACA;GACA,UAAU,cAAc,SAAY;GACpC,GAAG;GACH,GAAG;GACH,iEAA0B,CAAC,YAAY;GACvC,cAAc;GACd,GAAG;GACH,GAAGA;GACH,KAAKC,sBAAU,KAAK,KAAK,IAAI;GAC7B,UAAUD,QAAM,YAAY;GAC5B,0DAAmB,WAAW,QAAQA,QAAM,OAAO;GACnD,2DAAoB,WAAW,SAASA,QAAM,QAAQ;GACvD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAOuB,sCAJrB,aAAW;GAAE,GAAG;GAAW,GAAGA;GAAO,GACtC,CAAC,UAAU,CACZ;EAEqC;EAAc"}
+{"version":3,"file":"use-native-select.cjs","names":["useFieldProps","computedChildren: ReactNode","rest","items","index","label","computedChildren","getRootProps: PropGetter","props","mergeProps"],"sources":["../../../../src/components/native-select/use-native-select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { cloneElement, useCallback, useMemo } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { ariaAttr } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface NativeSelectSharedItem extends Omit<\n  HTMLProps<\"option\">,\n  \"children\" | \"label\" | \"value\"\n> {\n  label: string\n}\n\ninterface NativeSelectItemWithValue extends NativeSelectSharedItem {\n  value?: HTMLProps<\"option\">[\"value\"]\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectSharedItem {\n  items: NativeSelectItemWithValue[]\n}\n\nexport type NativeSelectItem =\n  | NativeSelectItemWithItems\n  | NativeSelectItemWithValue\n\nexport interface UseNativeSelectProps extends HTMLProps<\"select\">, FieldProps {\n  /**\n   * If `true`, include placeholder in options.\n   *\n   * @default true\n   */\n  includePlaceholder?: boolean\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default []\n   */\n  items?: NativeSelectItem[]\n  /**\n   * The placeholder for select.\n   */\n  placeholder?: string\n}\n\nexport const useNativeSelect = (props: UseNativeSelectProps = {}) => {\n  const {\n    props: {\n      children,\n      disabled,\n      includePlaceholder = true,\n      items = [],\n      placeholder,\n      readOnly,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n\n  const computedChildren = useMemo(() => {\n    let computedChildren: ReactNode = null\n\n    if (children) {\n      computedChildren = children\n    } else if (items.length) {\n      computedChildren = items.map((item, index) => {\n        if (\"items\" in item) {\n          const { items, label, ...rest } = item\n\n          return cloneElement(<optgroup />, {\n            key: index,\n            children: items.map(({ label, ...rest }, index) =>\n              cloneElement(<option />, {\n                key: index,\n                children: label,\n                ...rest,\n              }),\n            ),\n            label,\n            ...rest,\n          })\n        } else {\n          const { label, ...rest } = item\n\n          return cloneElement(<option />, {\n            key: index,\n            children: label,\n            ...rest,\n          })\n        }\n      })\n    }\n\n    return (\n      <>\n        {placeholder ? (\n          <option hidden={!includePlaceholder} value=\"\">\n            {placeholder}\n          </option>\n        ) : null}\n\n        {computedChildren}\n      </>\n    )\n  }, [children, items, placeholder, includePlaceholder])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({ ...dataProps, ...props }),\n    [dataProps],\n  )\n\n  const getFieldProps: PropGetter<\"select\"> = useCallback(\n    ({ ref, ...props } = {}) =>\n      mergeProps(\n        {\n          disabled,\n          readOnly,\n          tabIndex: interactive ? undefined : -1,\n          ...ariaProps,\n          ...dataProps,\n          \"aria-disabled\": ariaAttr(!interactive),\n          \"aria-label\": placeholder,\n        },\n        {\n          onBlur: eventProps.onBlur,\n          onFocus: eventProps.onFocus,\n        },\n        rest,\n        props,\n        {\n          ref,\n          children: props.children ?? computedChildren,\n        },\n      )(),\n    [\n      interactive,\n      ariaProps,\n      computedChildren,\n      dataProps,\n      eventProps,\n      rest,\n      placeholder,\n      disabled,\n      readOnly,\n    ],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props) => ({ ...dataProps, ...props }),\n    [dataProps],\n  )\n\n  return { getFieldProps, getIconProps, getRootProps }\n}\n\nexport type UseNativeSelectReturn = ReturnType<typeof useNativeSelect>\n"],"mappings":";;;;;;;;;;;;AAgDA,MAAa,mBAAmB,QAA8B,EAAE,KAAK;CACnE,MAAM,EACJ,OAAO,EACL,UACA,UACA,qBAAqB,MACrB,QAAQ,EAAE,EACV,aACA,UACA,GAAG,QAEL,WACA,WACA,eACEA,sCAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAElC,MAAM,4CAAiC;EACrC,IAAIC,qBAA8B;AAElC,MAAI,SACF,sBAAmB;WACV,MAAM,OACf,sBAAmB,MAAM,KAAK,MAAM,UAAU;AAC5C,OAAI,WAAW,MAAM;IACnB,MAAM,EAAE,gBAAO,OAAO,GAAGC,WAAS;AAElC,mCAAoB,2CAAC,eAAW,EAAE;KAChC,KAAK;KACL,UAAUC,QAAM,KAAK,EAAE,gBAAO,GAAGD,UAAQ,oCAC1B,2CAAC,aAAS,EAAE;MACvB,KAAKE;MACL,UAAUC;MACV,GAAGH;MACJ,CAAC,CACH;KACD;KACA,GAAGA;KACJ,CAAC;UACG;IACL,MAAM,EAAE,OAAO,GAAGA,WAAS;AAE3B,mCAAoB,2CAAC,aAAS,EAAE;KAC9B,KAAK;KACL,UAAU;KACV,GAAGA;KACJ,CAAC;;IAEJ;AAGJ,SACE,qFACG,cACC,2CAAC;GAAO,QAAQ,CAAC;GAAoB,OAAM;aACxC;IACM,GACP,MAEHI,sBACA;IAEJ;EAAC;EAAU;EAAO;EAAa;EAAmB,CAAC;CAEtD,MAAMC,uCACH,aAAW;EAAE,GAAG;EAAW,GAAGC;EAAO,GACtC,CAAC,UAAU,CACZ;AA2CD,QAAO;EAAE,uCAxCN,EAAE,KAAK,GAAGA,YAAU,EAAE,KACrBC,yBACE;GACE;GACA;GACA,UAAU,cAAc,SAAY;GACpC,GAAG;GACH,GAAG;GACH,iEAA0B,CAAC,YAAY;GACvC,cAAc;GACf,EACD;GACE,QAAQ,WAAW;GACnB,SAAS,WAAW;GACrB,EACD,MACAD,SACA;GACE;GACA,UAAUA,QAAM,YAAY;GAC7B,CACF,EAAE,EACL;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAOuB,sCAJrB,aAAW;GAAE,GAAG;GAAW,GAAGA;GAAO,GACtC,CAAC,UAAU,CACZ;EAEqC;EAAc"}

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

@@ -2,7 +2,9 @@
 
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_ref = require('../../utils/ref.cjs');
-const require_utils_index = require('../../utils/index.cjs');
+require('../../utils/index.cjs');
+const require_props = require('../../core/components/props.cjs');
+require('../../core/index.cjs');
 const require_use_autosize = require('./use-autosize.cjs');
 let react = require("react");
 
@@ -15,17 +17,15 @@ const useTextarea = ({ autosize, maxRows, minRows, resizeRef, ...rest } = {}) =>
 	});
 	require_ref.assignRef(resizeRef, onResizeTextarea);
 	return {
-		getTextareaProps: (0, react.useCallback)(({ style, ...props } = {}) => ({
-			...rest,
-			...props,
-			ref: require_ref.mergeRefs(props.ref, rest.ref, ref),
-			style: {
-				resize: autosize ? "none" : void 0,
-				...rest.style,
-				...style
-			},
-			onChange: (0, require_utils_index.utils_exports.handlerAll)(props.onChange, rest.onChange, autosize ? onResizeTextarea : require_utils_index.utils_exports.noop)
-		}), [
+		getTextareaProps: (0, react.useCallback)((props = {}) => {
+			return require_props.mergeProps(rest, props, {
+				ref: require_ref.mergeRefs(ref),
+				...autosize ? {
+					style: { resize: "none" },
+					onChange: onResizeTextarea
+				} : {}
+			})();
+		}, [
 			autosize,
 			onResizeTextarea,
 			rest,

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

@@ -1 +1 @@
-{"version":3,"file":"use-textarea.cjs","names":["useAutosize","mergeRefs"],"sources":["../../../../src/components/textarea/use-textarea.ts"],"sourcesContent":["\"use client\"\n\nimport type { ForwardedRef } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseAutosizeProps } from \"./use-autosize\"\nimport { useCallback } from \"react\"\nimport { assignRef, handlerAll, mergeRefs, noop } from \"../../utils\"\nimport { useAutosize } from \"./use-autosize\"\n\nexport interface UseTextareaProps\n  extends HTMLProps<\"textarea\">, Omit<UseAutosizeProps, \"disabled\" | \"ref\"> {\n  /**\n   * If `true`, the Textarea height auto-adjusts to text height.\n   */\n  autosize?: boolean\n  /**\n   * Ref to a resize function.\n   */\n  resizeRef?: ForwardedRef<() => void>\n}\n\nexport const useTextarea = ({\n  autosize,\n  maxRows,\n  minRows,\n  resizeRef,\n  ...rest\n}: UseTextareaProps = {}) => {\n  const { ref, onResizeTextarea } = useAutosize({\n    disabled: !autosize,\n    maxRows,\n    minRows,\n  })\n\n  assignRef(resizeRef, onResizeTextarea)\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    ({ style, ...props } = {}) => ({\n      ...rest,\n      ...props,\n      ref: mergeRefs(props.ref, rest.ref, ref),\n      style: { resize: autosize ? \"none\" : undefined, ...rest.style, ...style },\n      onChange: handlerAll(\n        props.onChange,\n        rest.onChange,\n        autosize ? onResizeTextarea : noop,\n      ),\n    }),\n    [autosize, onResizeTextarea, rest, ref],\n  )\n\n  return {\n    getTextareaProps,\n    onResizeTextarea,\n  }\n}\n\nexport type UseTextareaReturn = ReturnType<typeof useTextarea>\n"],"mappings":";;;;;;;;;AAqBA,MAAa,eAAe,EAC1B,UACA,SACA,SACA,WACA,GAAG,SACiB,EAAE,KAAK;CAC3B,MAAM,EAAE,KAAK,qBAAqBA,iCAAY;EAC5C,UAAU,CAAC;EACX;EACA;EACD,CAAC;AAEF,uBAAU,WAAW,iBAAiB;AAiBtC,QAAO;EACL,0CAfC,EAAE,OAAO,GAAG,UAAU,EAAE,MAAM;GAC7B,GAAG;GACH,GAAG;GACH,KAAKC,sBAAU,MAAM,KAAK,KAAK,KAAK,IAAI;GACxC,OAAO;IAAE,QAAQ,WAAW,SAAS;IAAW,GAAG,KAAK;IAAO,GAAG;IAAO;GACzE,4DACE,MAAM,UACN,KAAK,UACL,WAAW,qDAAmB,KAC/B;GACF,GACD;GAAC;GAAU;GAAkB;GAAM;GAAI,CACxC;EAIC;EACD"}
+{"version":3,"file":"use-textarea.cjs","names":["useAutosize","mergeProps","mergeRefs"],"sources":["../../../../src/components/textarea/use-textarea.ts"],"sourcesContent":["\"use client\"\n\nimport type { ForwardedRef } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseAutosizeProps } from \"./use-autosize\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { assignRef, mergeRefs } from \"../../utils\"\nimport { useAutosize } from \"./use-autosize\"\n\nexport interface UseTextareaProps\n  extends HTMLProps<\"textarea\">, Omit<UseAutosizeProps, \"disabled\" | \"ref\"> {\n  /**\n   * If `true`, the Textarea height auto-adjusts to text height.\n   */\n  autosize?: boolean\n  /**\n   * Ref to a resize function.\n   */\n  resizeRef?: ForwardedRef<() => void>\n}\n\nexport const useTextarea = ({\n  autosize,\n  maxRows,\n  minRows,\n  resizeRef,\n  ...rest\n}: UseTextareaProps = {}) => {\n  const { ref, onResizeTextarea } = useAutosize({\n    disabled: !autosize,\n    maxRows,\n    minRows,\n  })\n\n  assignRef(resizeRef, onResizeTextarea)\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    (props = {}) => {\n      const textareaProps = mergeProps(rest, props, {\n        ref: mergeRefs(ref),\n        ...(autosize\n          ? {\n              style: { resize: \"none\" as const },\n              onChange: onResizeTextarea,\n            }\n          : {}),\n      })()\n\n      return textareaProps\n    },\n    [autosize, onResizeTextarea, rest, ref],\n  )\n\n  return {\n    getTextareaProps,\n    onResizeTextarea,\n  }\n}\n\nexport type UseTextareaReturn = ReturnType<typeof useTextarea>\n"],"mappings":";;;;;;;;;;;AAsBA,MAAa,eAAe,EAC1B,UACA,SACA,SACA,WACA,GAAG,SACiB,EAAE,KAAK;CAC3B,MAAM,EAAE,KAAK,qBAAqBA,iCAAY;EAC5C,UAAU,CAAC;EACX;EACA;EACD,CAAC;AAEF,uBAAU,WAAW,iBAAiB;AAmBtC,QAAO;EACL,0CAjBC,QAAQ,EAAE,KAAK;AAWd,UAVsBC,yBAAW,MAAM,OAAO;IAC5C,KAAKC,sBAAU,IAAI;IACnB,GAAI,WACA;KACE,OAAO,EAAE,QAAQ,QAAiB;KAClC,UAAU;KACX,GACD,EAAE;IACP,CAAC,EAAE;KAIN;GAAC;GAAU;GAAkB;GAAM;GAAI,CACxC;EAIC;EACD"}

package/dist/esm/components/native-select/use-native-select.js

@@ -1,7 +1,8 @@
 "use client";
 
-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 { useFieldProps } from "../field/use-field-props.js";
 import "../field/index.js";
 import { cloneElement, useCallback, useMemo } from "react";
@@ -52,21 +53,21 @@ const useNativeSelect = (props = {}) => {
 		...props$1
 	}), [dataProps]);
 	return {
-		getFieldProps: useCallback(({ ref, ...props$1 } = {}) => ({
+		getFieldProps: useCallback(({ ref, ...props$1 } = {}) => mergeProps({
 			disabled,
 			readOnly,
 			tabIndex: interactive ? void 0 : -1,
 			...ariaProps,
 			...dataProps,
 			"aria-disabled": (0, utils_exports.ariaAttr)(!interactive),
-			"aria-label": placeholder,
-			...rest,
-			...props$1,
-			ref: mergeRefs(ref, rest.ref),
-			children: props$1.children ?? computedChildren,
-			onBlur: (0, utils_exports.handlerAll)(eventProps.onBlur, props$1.onBlur),
-			onFocus: (0, utils_exports.handlerAll)(eventProps.onFocus, props$1.onFocus)
-		}), [
+			"aria-label": placeholder
+		}, {
+			onBlur: eventProps.onBlur,
+			onFocus: eventProps.onFocus
+		}, rest, props$1, {
+			ref,
+			children: props$1.children ?? computedChildren
+		})(), [
 			interactive,
 			ariaProps,
 			computedChildren,

package/dist/esm/components/native-select/use-native-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-native-select.js","names":["computedChildren: ReactNode","rest","items","index","label","computedChildren","getRootProps: PropGetter","props"],"sources":["../../../../src/components/native-select/use-native-select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { cloneElement, useCallback, useMemo } from \"react\"\nimport { ariaAttr, handlerAll, mergeRefs } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface NativeSelectSharedItem extends Omit<\n  HTMLProps<\"option\">,\n  \"children\" | \"label\" | \"value\"\n> {\n  label: string\n}\n\ninterface NativeSelectItemWithValue extends NativeSelectSharedItem {\n  value?: HTMLProps<\"option\">[\"value\"]\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectSharedItem {\n  items: NativeSelectItemWithValue[]\n}\n\nexport type NativeSelectItem =\n  | NativeSelectItemWithItems\n  | NativeSelectItemWithValue\n\nexport interface UseNativeSelectProps extends HTMLProps<\"select\">, FieldProps {\n  /**\n   * If `true`, include placeholder in options.\n   *\n   * @default true\n   */\n  includePlaceholder?: boolean\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default []\n   */\n  items?: NativeSelectItem[]\n  /**\n   * The placeholder for select.\n   */\n  placeholder?: string\n}\n\nexport const useNativeSelect = (props: UseNativeSelectProps = {}) => {\n  const {\n    props: {\n      children,\n      disabled,\n      includePlaceholder = true,\n      items = [],\n      placeholder,\n      readOnly,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n\n  const computedChildren = useMemo(() => {\n    let computedChildren: ReactNode = null\n\n    if (children) {\n      computedChildren = children\n    } else if (items.length) {\n      computedChildren = items.map((item, index) => {\n        if (\"items\" in item) {\n          const { items, label, ...rest } = item\n\n          return cloneElement(<optgroup />, {\n            key: index,\n            children: items.map(({ label, ...rest }, index) =>\n              cloneElement(<option />, {\n                key: index,\n                children: label,\n                ...rest,\n              }),\n            ),\n            label,\n            ...rest,\n          })\n        } else {\n          const { label, ...rest } = item\n\n          return cloneElement(<option />, {\n            key: index,\n            children: label,\n            ...rest,\n          })\n        }\n      })\n    }\n\n    return (\n      <>\n        {placeholder ? (\n          <option hidden={!includePlaceholder} value=\"\">\n            {placeholder}\n          </option>\n        ) : null}\n\n        {computedChildren}\n      </>\n    )\n  }, [children, items, placeholder, includePlaceholder])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({ ...dataProps, ...props }),\n    [dataProps],\n  )\n\n  const getFieldProps: PropGetter<\"select\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      disabled,\n      readOnly,\n      tabIndex: interactive ? undefined : -1,\n      ...ariaProps,\n      ...dataProps,\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": placeholder,\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, rest.ref),\n      children: props.children ?? computedChildren,\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus),\n    }),\n    [\n      interactive,\n      ariaProps,\n      computedChildren,\n      dataProps,\n      eventProps,\n      rest,\n      placeholder,\n      disabled,\n      readOnly,\n    ],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props) => ({ ...dataProps, ...props }),\n    [dataProps],\n  )\n\n  return { getFieldProps, getIconProps, getRootProps }\n}\n\nexport type UseNativeSelectReturn = ReturnType<typeof useNativeSelect>\n"],"mappings":";;;;;;;;;;AA+CA,MAAa,mBAAmB,QAA8B,EAAE,KAAK;CACnE,MAAM,EACJ,OAAO,EACL,UACA,UACA,qBAAqB,MACrB,QAAQ,EAAE,EACV,aACA,UACA,GAAG,QAEL,WACA,WACA,eACE,cAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAElC,MAAM,mBAAmB,cAAc;EACrC,IAAIA,qBAA8B;AAElC,MAAI,SACF,sBAAmB;WACV,MAAM,OACf,sBAAmB,MAAM,KAAK,MAAM,UAAU;AAC5C,OAAI,WAAW,MAAM;IACnB,MAAM,EAAE,gBAAO,OAAO,GAAGC,WAAS;AAElC,WAAO,aAAa,oBAAC,eAAW,EAAE;KAChC,KAAK;KACL,UAAUC,QAAM,KAAK,EAAE,gBAAO,GAAGD,UAAQ,YACvC,aAAa,oBAAC,aAAS,EAAE;MACvB,KAAKE;MACL,UAAUC;MACV,GAAGH;MACJ,CAAC,CACH;KACD;KACA,GAAGA;KACJ,CAAC;UACG;IACL,MAAM,EAAE,OAAO,GAAGA,WAAS;AAE3B,WAAO,aAAa,oBAAC,aAAS,EAAE;KAC9B,KAAK;KACL,UAAU;KACV,GAAGA;KACJ,CAAC;;IAEJ;AAGJ,SACE,8CACG,cACC,oBAAC;GAAO,QAAQ,CAAC;GAAoB,OAAM;aACxC;IACM,GACP,MAEHI,sBACA;IAEJ;EAAC;EAAU;EAAO;EAAa;EAAmB,CAAC;CAEtD,MAAMC,eAA2B,aAC9B,aAAW;EAAE,GAAG;EAAW,GAAGC;EAAO,GACtC,CAAC,UAAU,CACZ;AAoCD,QAAO;EAAE,eAlCmC,aACzC,EAAE,KAAK,GAAGA,YAAU,EAAE,MAAM;GAC3B;GACA;GACA,UAAU,cAAc,SAAY;GACpC,GAAG;GACH,GAAG;GACH,6CAA0B,CAAC,YAAY;GACvC,cAAc;GACd,GAAG;GACH,GAAGA;GACH,KAAK,UAAU,KAAK,KAAK,IAAI;GAC7B,UAAUA,QAAM,YAAY;GAC5B,sCAAmB,WAAW,QAAQA,QAAM,OAAO;GACnD,uCAAoB,WAAW,SAASA,QAAM,QAAQ;GACvD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAOuB,cALS,aAC9B,aAAW;GAAE,GAAG;GAAW,GAAGA;GAAO,GACtC,CAAC,UAAU,CACZ;EAEqC;EAAc"}
+{"version":3,"file":"use-native-select.js","names":["computedChildren: ReactNode","rest","items","index","label","computedChildren","getRootProps: PropGetter","props"],"sources":["../../../../src/components/native-select/use-native-select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { cloneElement, useCallback, useMemo } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { ariaAttr } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface NativeSelectSharedItem extends Omit<\n  HTMLProps<\"option\">,\n  \"children\" | \"label\" | \"value\"\n> {\n  label: string\n}\n\ninterface NativeSelectItemWithValue extends NativeSelectSharedItem {\n  value?: HTMLProps<\"option\">[\"value\"]\n}\n\ninterface NativeSelectItemWithItems extends NativeSelectSharedItem {\n  items: NativeSelectItemWithValue[]\n}\n\nexport type NativeSelectItem =\n  | NativeSelectItemWithItems\n  | NativeSelectItemWithValue\n\nexport interface UseNativeSelectProps extends HTMLProps<\"select\">, FieldProps {\n  /**\n   * If `true`, include placeholder in options.\n   *\n   * @default true\n   */\n  includePlaceholder?: boolean\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default []\n   */\n  items?: NativeSelectItem[]\n  /**\n   * The placeholder for select.\n   */\n  placeholder?: string\n}\n\nexport const useNativeSelect = (props: UseNativeSelectProps = {}) => {\n  const {\n    props: {\n      children,\n      disabled,\n      includePlaceholder = true,\n      items = [],\n      placeholder,\n      readOnly,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n\n  const computedChildren = useMemo(() => {\n    let computedChildren: ReactNode = null\n\n    if (children) {\n      computedChildren = children\n    } else if (items.length) {\n      computedChildren = items.map((item, index) => {\n        if (\"items\" in item) {\n          const { items, label, ...rest } = item\n\n          return cloneElement(<optgroup />, {\n            key: index,\n            children: items.map(({ label, ...rest }, index) =>\n              cloneElement(<option />, {\n                key: index,\n                children: label,\n                ...rest,\n              }),\n            ),\n            label,\n            ...rest,\n          })\n        } else {\n          const { label, ...rest } = item\n\n          return cloneElement(<option />, {\n            key: index,\n            children: label,\n            ...rest,\n          })\n        }\n      })\n    }\n\n    return (\n      <>\n        {placeholder ? (\n          <option hidden={!includePlaceholder} value=\"\">\n            {placeholder}\n          </option>\n        ) : null}\n\n        {computedChildren}\n      </>\n    )\n  }, [children, items, placeholder, includePlaceholder])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({ ...dataProps, ...props }),\n    [dataProps],\n  )\n\n  const getFieldProps: PropGetter<\"select\"> = useCallback(\n    ({ ref, ...props } = {}) =>\n      mergeProps(\n        {\n          disabled,\n          readOnly,\n          tabIndex: interactive ? undefined : -1,\n          ...ariaProps,\n          ...dataProps,\n          \"aria-disabled\": ariaAttr(!interactive),\n          \"aria-label\": placeholder,\n        },\n        {\n          onBlur: eventProps.onBlur,\n          onFocus: eventProps.onFocus,\n        },\n        rest,\n        props,\n        {\n          ref,\n          children: props.children ?? computedChildren,\n        },\n      )(),\n    [\n      interactive,\n      ariaProps,\n      computedChildren,\n      dataProps,\n      eventProps,\n      rest,\n      placeholder,\n      disabled,\n      readOnly,\n    ],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props) => ({ ...dataProps, ...props }),\n    [dataProps],\n  )\n\n  return { getFieldProps, getIconProps, getRootProps }\n}\n\nexport type UseNativeSelectReturn = ReturnType<typeof useNativeSelect>\n"],"mappings":";;;;;;;;;;;AAgDA,MAAa,mBAAmB,QAA8B,EAAE,KAAK;CACnE,MAAM,EACJ,OAAO,EACL,UACA,UACA,qBAAqB,MACrB,QAAQ,EAAE,EACV,aACA,UACA,GAAG,QAEL,WACA,WACA,eACE,cAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAElC,MAAM,mBAAmB,cAAc;EACrC,IAAIA,qBAA8B;AAElC,MAAI,SACF,sBAAmB;WACV,MAAM,OACf,sBAAmB,MAAM,KAAK,MAAM,UAAU;AAC5C,OAAI,WAAW,MAAM;IACnB,MAAM,EAAE,gBAAO,OAAO,GAAGC,WAAS;AAElC,WAAO,aAAa,oBAAC,eAAW,EAAE;KAChC,KAAK;KACL,UAAUC,QAAM,KAAK,EAAE,gBAAO,GAAGD,UAAQ,YACvC,aAAa,oBAAC,aAAS,EAAE;MACvB,KAAKE;MACL,UAAUC;MACV,GAAGH;MACJ,CAAC,CACH;KACD;KACA,GAAGA;KACJ,CAAC;UACG;IACL,MAAM,EAAE,OAAO,GAAGA,WAAS;AAE3B,WAAO,aAAa,oBAAC,aAAS,EAAE;KAC9B,KAAK;KACL,UAAU;KACV,GAAGA;KACJ,CAAC;;IAEJ;AAGJ,SACE,8CACG,cACC,oBAAC;GAAO,QAAQ,CAAC;GAAoB,OAAM;aACxC;IACM,GACP,MAEHI,sBACA;IAEJ;EAAC;EAAU;EAAO;EAAa;EAAmB,CAAC;CAEtD,MAAMC,eAA2B,aAC9B,aAAW;EAAE,GAAG;EAAW,GAAGC;EAAO,GACtC,CAAC,UAAU,CACZ;AA2CD,QAAO;EAAE,eAzCmC,aACzC,EAAE,KAAK,GAAGA,YAAU,EAAE,KACrB,WACE;GACE;GACA;GACA,UAAU,cAAc,SAAY;GACpC,GAAG;GACH,GAAG;GACH,6CAA0B,CAAC,YAAY;GACvC,cAAc;GACf,EACD;GACE,QAAQ,WAAW;GACnB,SAAS,WAAW;GACrB,EACD,MACAA,SACA;GACE;GACA,UAAUA,QAAM,YAAY;GAC7B,CACF,EAAE,EACL;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAOuB,cALS,aAC9B,aAAW;GAAE,GAAG;GAAW,GAAGA;GAAO,GACtC,CAAC,UAAU,CACZ;EAEqC;EAAc"}

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

@@ -1,7 +1,9 @@
 "use client";
 
 import { assignRef, mergeRefs } from "../../utils/ref.js";
-import { utils_exports } from "../../utils/index.js";
+import "../../utils/index.js";
+import { mergeProps } from "../../core/components/props.js";
+import "../../core/index.js";
 import { useAutosize } from "./use-autosize.js";
 import { useCallback } from "react";
 
@@ -14,17 +16,15 @@ const useTextarea = ({ autosize, maxRows, minRows, resizeRef, ...rest } = {}) =>
 	});
 	assignRef(resizeRef, onResizeTextarea);
 	return {
-		getTextareaProps: useCallback(({ style, ...props } = {}) => ({
-			...rest,
-			...props,
-			ref: mergeRefs(props.ref, rest.ref, ref),
-			style: {
-				resize: autosize ? "none" : void 0,
-				...rest.style,
-				...style
-			},
-			onChange: (0, utils_exports.handlerAll)(props.onChange, rest.onChange, autosize ? onResizeTextarea : utils_exports.noop)
-		}), [
+		getTextareaProps: useCallback((props = {}) => {
+			return mergeProps(rest, props, {
+				ref: mergeRefs(ref),
+				...autosize ? {
+					style: { resize: "none" },
+					onChange: onResizeTextarea
+				} : {}
+			})();
+		}, [
 			autosize,
 			onResizeTextarea,
 			rest,

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

@@ -1 +1 @@
-{"version":3,"file":"use-textarea.js","names":["noop"],"sources":["../../../../src/components/textarea/use-textarea.ts"],"sourcesContent":["\"use client\"\n\nimport type { ForwardedRef } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseAutosizeProps } from \"./use-autosize\"\nimport { useCallback } from \"react\"\nimport { assignRef, handlerAll, mergeRefs, noop } from \"../../utils\"\nimport { useAutosize } from \"./use-autosize\"\n\nexport interface UseTextareaProps\n  extends HTMLProps<\"textarea\">, Omit<UseAutosizeProps, \"disabled\" | \"ref\"> {\n  /**\n   * If `true`, the Textarea height auto-adjusts to text height.\n   */\n  autosize?: boolean\n  /**\n   * Ref to a resize function.\n   */\n  resizeRef?: ForwardedRef<() => void>\n}\n\nexport const useTextarea = ({\n  autosize,\n  maxRows,\n  minRows,\n  resizeRef,\n  ...rest\n}: UseTextareaProps = {}) => {\n  const { ref, onResizeTextarea } = useAutosize({\n    disabled: !autosize,\n    maxRows,\n    minRows,\n  })\n\n  assignRef(resizeRef, onResizeTextarea)\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    ({ style, ...props } = {}) => ({\n      ...rest,\n      ...props,\n      ref: mergeRefs(props.ref, rest.ref, ref),\n      style: { resize: autosize ? \"none\" : undefined, ...rest.style, ...style },\n      onChange: handlerAll(\n        props.onChange,\n        rest.onChange,\n        autosize ? onResizeTextarea : noop,\n      ),\n    }),\n    [autosize, onResizeTextarea, rest, ref],\n  )\n\n  return {\n    getTextareaProps,\n    onResizeTextarea,\n  }\n}\n\nexport type UseTextareaReturn = ReturnType<typeof useTextarea>\n"],"mappings":";;;;;;;;AAqBA,MAAa,eAAe,EAC1B,UACA,SACA,SACA,WACA,GAAG,SACiB,EAAE,KAAK;CAC3B,MAAM,EAAE,KAAK,qBAAqB,YAAY;EAC5C,UAAU,CAAC;EACX;EACA;EACD,CAAC;AAEF,WAAU,WAAW,iBAAiB;AAiBtC,QAAO;EACL,kBAhB+C,aAC9C,EAAE,OAAO,GAAG,UAAU,EAAE,MAAM;GAC7B,GAAG;GACH,GAAG;GACH,KAAK,UAAU,MAAM,KAAK,KAAK,KAAK,IAAI;GACxC,OAAO;IAAE,QAAQ,WAAW,SAAS;IAAW,GAAG,KAAK;IAAO,GAAG;IAAO;GACzE,wCACE,MAAM,UACN,KAAK,UACL,WAAW,mBAAmBA,mBAC/B;GACF,GACD;GAAC;GAAU;GAAkB;GAAM;GAAI,CACxC;EAIC;EACD"}
+{"version":3,"file":"use-textarea.js","names":[],"sources":["../../../../src/components/textarea/use-textarea.ts"],"sourcesContent":["\"use client\"\n\nimport type { ForwardedRef } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseAutosizeProps } from \"./use-autosize\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { assignRef, mergeRefs } from \"../../utils\"\nimport { useAutosize } from \"./use-autosize\"\n\nexport interface UseTextareaProps\n  extends HTMLProps<\"textarea\">, Omit<UseAutosizeProps, \"disabled\" | \"ref\"> {\n  /**\n   * If `true`, the Textarea height auto-adjusts to text height.\n   */\n  autosize?: boolean\n  /**\n   * Ref to a resize function.\n   */\n  resizeRef?: ForwardedRef<() => void>\n}\n\nexport const useTextarea = ({\n  autosize,\n  maxRows,\n  minRows,\n  resizeRef,\n  ...rest\n}: UseTextareaProps = {}) => {\n  const { ref, onResizeTextarea } = useAutosize({\n    disabled: !autosize,\n    maxRows,\n    minRows,\n  })\n\n  assignRef(resizeRef, onResizeTextarea)\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    (props = {}) => {\n      const textareaProps = mergeProps(rest, props, {\n        ref: mergeRefs(ref),\n        ...(autosize\n          ? {\n              style: { resize: \"none\" as const },\n              onChange: onResizeTextarea,\n            }\n          : {}),\n      })()\n\n      return textareaProps\n    },\n    [autosize, onResizeTextarea, rest, ref],\n  )\n\n  return {\n    getTextareaProps,\n    onResizeTextarea,\n  }\n}\n\nexport type UseTextareaReturn = ReturnType<typeof useTextarea>\n"],"mappings":";;;;;;;;;;AAsBA,MAAa,eAAe,EAC1B,UACA,SACA,SACA,WACA,GAAG,SACiB,EAAE,KAAK;CAC3B,MAAM,EAAE,KAAK,qBAAqB,YAAY;EAC5C,UAAU,CAAC;EACX;EACA;EACD,CAAC;AAEF,WAAU,WAAW,iBAAiB;AAmBtC,QAAO;EACL,kBAlB+C,aAC9C,QAAQ,EAAE,KAAK;AAWd,UAVsB,WAAW,MAAM,OAAO;IAC5C,KAAK,UAAU,IAAI;IACnB,GAAI,WACA;KACE,OAAO,EAAE,QAAQ,QAAiB;KAClC,UAAU;KACX,GACD,EAAE;IACP,CAAC,EAAE;KAIN;GAAC;GAAU;GAAkB;GAAM;GAAI,CACxC;EAIC;EACD"}

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

@@ -3,11 +3,13 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { WithTransitionProps } from "../motion/index.types.js";
+import "../motion/index.js";
 import { CollapseProps } from "../collapse/collapse.js";
+import "../collapse/index.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react1168 from "react";
+import * as react1002 from "react";
 
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -31,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react1168.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react1002.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 react1156 from "react";
+import * as react1003 from "react";
 
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react1156.Context<{
+declare const AccordionDescendantsContext: react1003.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: react1156.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) => react1156.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1003.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: react1156.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) => react1156.RefCallback<HTMLButtonElement>;
+      } | undefined) => react1003.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react1156.RefCallback<HTMLButtonElement>;
+    register: react1003.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: react1156.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) => react1156.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1003.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: react1156.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react1003.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react1156.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react1003.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) => react1156.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1003.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: react1156.Dispatch<react1156.SetStateAction<number>>;
-  setIndex: react1156.Dispatch<react1156.SetStateAction<number | number[]>>;
+  setFocusedIndex: react1003.Dispatch<react1003.SetStateAction<number>>;
+  setIndex: react1003.Dispatch<react1003.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

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

@@ -4,9 +4,10 @@ import "../../core/index.js";
 import { ActionBarStyle } from "./action-bar.style.js";
 import { PortalProps } from "../portal/portal.js";
 import { UsePopupAnimationProps } from "../popover/popover.js";
+import "../popover/index.js";
 import { UseActionBarProps } from "./use-action-bar.js";
 import "../../index.js";
-import * as react1154 from "react";
+import * as react1211 from "react";
 import { PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/action-bar/action-bar.d.ts
@@ -28,7 +29,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
    */
   onCloseComplete?: () => void;
 }
-declare const ActionBarPropsContext: react1154.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react1211.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

@@ -2,9 +2,10 @@ import { KeyframeIdent, ThemeProps } from "../../core/system/index.types.js";
 import { Component } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
+import "../motion/index.js";
 import { AiryStyle } from "./airy.style.js";
 import "../../index.js";
-import * as react1155 from "react";
+import * as react1209 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/airy/airy.d.ts
@@ -56,7 +57,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const AiryPropsContext: react1155.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react1209.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

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

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

@@ -3,8 +3,9 @@ import { Component } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { AlphaSliderStyle } from "./alpha-slider.style.js";
 import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
+import "../hue-slider/index.js";
 import "../../index.js";
-import * as react1145 from "react";
+import * as react1236 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 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react1145.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react1236.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 react1144 from "react";
+import * as react60 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: react1144.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react60.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

@@ -3,14 +3,16 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { PopoverContentProps, UsePopoverStyleProps, UsePopupAnimationProps } from "../popover/popover.js";
+import "../popover/index.js";
 import { AutocompleteStyle } from "./autocomplete.style.js";
 import { UseComboboxGroupProps } from "../../hooks/use-combobox/index.js";
 import { UseInputBorderProps } from "../input/use-input-border.js";
 import { InputElementProps } from "../input/input-element.js";
 import { InputGroupRootProps } from "../input/input-group.js";
+import "../input/index.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react1152 from "react";
+import * as react58 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -66,7 +68,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react1152.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react58.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" | "field" | "indicator" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "field" | "indicator" | "empty" | "valueText">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "field" | "empty" | "indicator" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "field" | "empty" | "indicator" | "valueText">>, {
   xs: {
     empty: {
       gap: "1.5";

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

@@ -2,11 +2,13 @@ import { index_d_exports } from "../../utils/index.js";
 import { HTMLProps, HTMLRefAttributes, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { UsePopoverProps } from "../popover/use-popover.js";
+import "../popover/index.js";
 import { FieldProps } from "../field/field.js";
+import "../field/index.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 react1146 from "react";
+import * as react52 from "react";
 import { ChangeEvent, ReactNode } from "react";
 
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -26,7 +28,7 @@ interface AutocompleteFilter {
 }
 type AutocompleteMatcher = typeof index_d_exports.match;
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react1146.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react52.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 +156,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) => react1146.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react52.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 +166,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react1146.Dispatch<react1146.SetStateAction<string>>;
-  setValue: react1146.Dispatch<react1146.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react52.Dispatch<react52.SetStateAction<string>>;
+  setValue: react52.Dispatch<react52.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 react1141 from "react";
+import * as react997 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils18 from "@yamada-ui/utils";
+import * as _yamada_ui_utils15 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 As | "fragment" = "div", R extends _yamada_ui_utils18.Dict = _yamada_ui_utils18.Dict<any>>(el: H | react1141.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const component: <H extends As | "fragment" = "div", R extends _yamada_ui_utils15.Dict = _yamada_ui_utils15.Dict<any>>(el: H | react997.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
     shape: {
       circle: {
         root: {
@@ -148,7 +148,7 @@ declare const component: <H extends As | "fragment" = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react1141.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react1141.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils18.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" ? react997.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react997.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils15.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 As | "fragment" = "div", R extends _yamada_u
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils18.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils15.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
    *