@yamada-ui/react 2.2.1-dev-20260429025711 → 2.2.1-dev-20260429031055

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

@@ -4,6 +4,8 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_context = require('../../utils/context.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');
 let react = require("react");
 let react_resizable_panels = require("react-resizable-panels");
 
@@ -15,22 +17,24 @@ const useResizable = ({ controlRef, disabled, orientation = "horizontal", ...res
 		disabled,
 		groupRef,
 		orientation,
-		getRootProps: (0, react.useCallback)((props = {}) => ({
-			disabled,
-			orientation,
-			...rest,
-			...props,
-			style: {
-				height: void 0,
-				width: void 0,
-				...rest.style,
-				...props.style
-			},
-			elementRef: require_ref.mergeRefs(props.elementRef, rest.ref),
-			groupRef: require_ref.mergeRefs(props.groupRef, groupRef, controlRef),
-			onLayoutChange: (0, require_utils_index.utils_exports.fnAll)(props.onLayoutChange, rest.onLayoutChange),
-			onLayoutChanged: (0, require_utils_index.utils_exports.fnAll)(props.onLayoutChanged, rest.onLayoutChanged)
-		}), [
+		getRootProps: (0, react.useCallback)((props = {}) => {
+			return {
+				...require_props.mergeProps({
+					disabled,
+					orientation
+				}, rest, props)(),
+				style: {
+					height: void 0,
+					width: void 0,
+					...rest.style,
+					...props.style
+				},
+				elementRef: require_ref.mergeRefs(props.elementRef, rest.ref),
+				groupRef: require_ref.mergeRefs(props.groupRef, groupRef, controlRef),
+				onLayoutChange: (0, require_utils_index.utils_exports.fnAll)(props.onLayoutChange, rest.onLayoutChange),
+				onLayoutChanged: (0, require_utils_index.utils_exports.fnAll)(props.onLayoutChanged, rest.onLayoutChanged)
+			};
+		}, [
 			disabled,
 			orientation,
 			groupRef,
@@ -43,13 +47,14 @@ const useResizableItem = ({ controlRef, ...rest }) => {
 	const panelRef = (0, react_resizable_panels.usePanelRef)();
 	return {
 		panelRef,
-		getItemProps: (0, react.useCallback)((props = {}) => ({
-			...rest,
-			...props,
-			elementRef: require_ref.mergeRefs(props.elementRef, rest.ref),
-			panelRef: require_ref.mergeRefs(props.panelRef, panelRef, controlRef),
-			onResize: (0, require_utils_index.utils_exports.fnAll)(props.onResize, rest.onResize)
-		}), [
+		getItemProps: (0, react.useCallback)((props = {}) => {
+			return {
+				...require_props.mergeProps(rest, props)(),
+				elementRef: require_ref.mergeRefs(props.elementRef, rest.ref),
+				panelRef: require_ref.mergeRefs(props.panelRef, panelRef, controlRef),
+				onResize: (0, require_utils_index.utils_exports.fnAll)(props.onResize, rest.onResize)
+			};
+		}, [
 			panelRef,
 			controlRef,
 			rest
@@ -67,17 +72,18 @@ const useResizableTrigger = ({ disabled, ...rest }) => {
 		const nextLayout = Object.fromEntries(Object.keys(layout).map((key) => [key, size]));
 		groupRef.current?.setLayout(nextLayout);
 	}, [groupRef]);
-	const getTriggerProps = (0, react.useCallback)((props = {}) => ({
-		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(trulyDisabled),
-		"aria-orientation": orientation,
-		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(trulyDisabled),
-		disabled: trulyDisabled,
-		tabIndex: trulyDisabled ? -1 : 0,
-		...rest,
-		...props,
-		elementRef: require_ref.mergeRefs(props.elementRef, rest.ref),
-		onDoubleClick: (0, require_utils_index.utils_exports.handlerAll)(props.onDoubleClick, rest.onDoubleClick, onDoubleClick)
-	}), [
+	const getTriggerProps = (0, react.useCallback)((props = {}) => {
+		return {
+			...require_props.mergeProps({
+				"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(trulyDisabled),
+				"aria-orientation": orientation,
+				"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(trulyDisabled),
+				disabled: trulyDisabled,
+				tabIndex: trulyDisabled ? -1 : 0
+			}, props, rest, { onDoubleClick })(),
+			elementRef: require_ref.mergeRefs(props.elementRef, rest.ref)
+		};
+	}, [
 		orientation,
 		trulyDisabled,
 		rest,

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

@@ -1 +1 @@
-{"version":3,"file":"use-resizable.cjs","names":["createContext","mergeRefs","getTriggerProps: PropGetter<SeparatorProps>"],"sources":["../../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type {\n  GroupImperativeHandle,\n  GroupProps,\n  LayoutStorage,\n  PanelImperativeHandle,\n  PanelProps,\n  SeparatorProps,\n} from \"react-resizable-panels\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback } from \"react\"\nimport {\n  useGroupRef,\n  usePanelRef,\n  useDefaultLayout as useResizableLayout,\n} from \"react-resizable-panels\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  fnAll,\n  handlerAll,\n  mergeRefs,\n} from \"../../utils\"\n\ninterface ResizableContext extends Omit<UseResizableReturn, \"getRootProps\"> {}\n\nconst [ResizableContext, useResizableContext] = createContext<ResizableContext>(\n  {\n    name: \"ResizableContext\",\n  },\n)\n\nexport { ResizableContext, useResizableContext, useResizableLayout }\n\nexport interface ResizableStorage extends LayoutStorage {}\nexport interface ResizableRootControl extends GroupImperativeHandle {}\nexport interface ResizableItemControl extends PanelImperativeHandle {}\n\nexport interface UseResizableProps\n  extends\n    HTMLProps,\n    Omit<GroupProps, \"color\" | \"content\" | \"elementRef\" | \"groupRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableRootControl>\n}\n\nexport const useResizable = ({\n  controlRef,\n  disabled,\n  orientation = \"horizontal\",\n  ...rest\n}: UseResizableProps = {}) => {\n  const groupRef = useGroupRef()\n\n  const getRootProps: PropGetter<GroupProps> = useCallback(\n    (props = {}) => ({\n      disabled,\n      orientation,\n      ...rest,\n      ...props,\n      style: {\n        height: undefined,\n        width: undefined,\n        ...rest.style,\n        ...props.style,\n      },\n      elementRef: mergeRefs(props.elementRef, rest.ref),\n      groupRef: mergeRefs(props.groupRef, groupRef, controlRef),\n      onLayoutChange: fnAll(props.onLayoutChange, rest.onLayoutChange),\n      onLayoutChanged: fnAll(props.onLayoutChanged, rest.onLayoutChanged),\n    }),\n    [disabled, orientation, groupRef, controlRef, rest],\n  )\n\n  return {\n    disabled,\n    groupRef,\n    orientation,\n    getRootProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\nexport interface UseResizableItemProps\n  extends\n    HTMLProps,\n    Omit<PanelProps, \"color\" | \"content\" | \"elementRef\" | \"panelRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableItemControl>\n}\n\nexport const useResizableItem = ({\n  controlRef,\n  ...rest\n}: UseResizableItemProps) => {\n  const panelRef = usePanelRef()\n\n  const getItemProps: PropGetter<PanelProps> = useCallback(\n    (props = {}) => ({\n      ...rest,\n      ...props,\n      elementRef: mergeRefs(props.elementRef, rest.ref),\n      panelRef: mergeRefs(props.panelRef, panelRef, controlRef),\n      onResize: fnAll(props.onResize, rest.onResize),\n    }),\n    [panelRef, controlRef, rest],\n  )\n\n  return {\n    panelRef,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\nexport interface UseResizableTriggerProps\n  extends HTMLProps, Omit<SeparatorProps, \"color\" | \"content\" | \"elementRef\"> {}\n\nexport const useResizableTrigger = ({\n  disabled,\n  ...rest\n}: UseResizableTriggerProps) => {\n  const {\n    disabled: groupDisabled,\n    groupRef,\n    orientation,\n  } = useResizableContext()\n  const trulyDisabled = disabled || groupDisabled\n\n  const onDoubleClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const layout = groupRef.current?.getLayout()\n\n      if (!layout) return\n\n      const count = Object.keys(layout).length\n      const size = 100 / count\n      const nextLayout = Object.fromEntries(\n        Object.keys(layout).map((key) => [key, size]),\n      )\n\n      groupRef.current?.setLayout(nextLayout)\n    },\n    [groupRef],\n  )\n\n  const getTriggerProps: PropGetter<SeparatorProps> = useCallback(\n    (props = {}) => ({\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"aria-orientation\": orientation,\n      \"data-disabled\": dataAttr(trulyDisabled),\n      disabled: trulyDisabled,\n      tabIndex: trulyDisabled ? -1 : 0,\n      ...rest,\n      ...props,\n      elementRef: mergeRefs(props.elementRef, rest.ref),\n      onDoubleClick: handlerAll(\n        props.onDoubleClick,\n        rest.onDoubleClick,\n        onDoubleClick,\n      ),\n    }),\n    [orientation, trulyDisabled, rest, onDoubleClick],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-icon\": \"\",\n      ...props,\n    }),\n    [],\n  )\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":";;;;;;;;;;AA6BA,MAAM,CAAC,kBAAkB,uBAAuBA,8BAC9C,EACE,MAAM,oBACP,CACF;AAkBD,MAAa,gBAAgB,EAC3B,YACA,UACA,cAAc,cACd,GAAG,SACkB,EAAE,KAAK;CAC5B,MAAM,oDAAwB;AAsB9B,QAAO;EACL;EACA;EACA;EACA,sCAvBC,QAAQ,EAAE,MAAM;GACf;GACA;GACA,GAAG;GACH,GAAG;GACH,OAAO;IACL,QAAQ;IACR,OAAO;IACP,GAAG,KAAK;IACR,GAAG,MAAM;IACV;GACD,YAAYC,sBAAU,MAAM,YAAY,KAAK,IAAI;GACjD,UAAUA,sBAAU,MAAM,UAAU,UAAU,WAAW;GACzD,6DAAsB,MAAM,gBAAgB,KAAK,eAAe;GAChE,8DAAuB,MAAM,iBAAiB,KAAK,gBAAgB;GACpE,GACD;GAAC;GAAU;GAAa;GAAU;GAAY;GAAK,CACpD;EAOA;;AAeH,MAAa,oBAAoB,EAC/B,YACA,GAAG,WACwB;CAC3B,MAAM,oDAAwB;AAa9B,QAAO;EACL;EACA,sCAZC,QAAQ,EAAE,MAAM;GACf,GAAG;GACH,GAAG;GACH,YAAYA,sBAAU,MAAM,YAAY,KAAK,IAAI;GACjD,UAAUA,sBAAU,MAAM,UAAU,UAAU,WAAW;GACzD,uDAAgB,MAAM,UAAU,KAAK,SAAS;GAC/C,GACD;GAAC;GAAU;GAAY;GAAK,CAC7B;EAKA;;AAQH,MAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EACJ,UAAU,eACV,UACA,gBACE,qBAAqB;CACzB,MAAM,gBAAgB,YAAY;CAElC,MAAM,wCACH,OAAmC;AAClC,KAAG,gBAAgB;EAEnB,MAAM,SAAS,SAAS,SAAS,WAAW;AAE5C,MAAI,CAAC,OAAQ;EAGb,MAAM,OAAO,MADC,OAAO,KAAK,OAAO,CAAC;EAElC,MAAM,aAAa,OAAO,YACxB,OAAO,KAAK,OAAO,CAAC,KAAK,QAAQ,CAAC,KAAK,KAAK,CAAC,CAC9C;AAED,WAAS,SAAS,UAAU,WAAW;IAEzC,CAAC,SAAS,CACX;CAED,MAAMC,0CACH,QAAQ,EAAE,MAAM;EACf,iEAA0B,cAAc;EACxC,oBAAoB;EACpB,iEAA0B,cAAc;EACxC,UAAU;EACV,UAAU,gBAAgB,KAAK;EAC/B,GAAG;EACH,GAAG;EACH,YAAYD,sBAAU,MAAM,YAAY,KAAK,IAAI;EACjD,iEACE,MAAM,eACN,KAAK,eACL,cACD;EACF,GACD;EAAC;EAAa;EAAe;EAAM;EAAc,CAClD;AAUD,QAAO;EACL,sCARC,QAAQ,EAAE,MAAM;GACf,aAAa;GACb,GAAG;GACJ,GACD,EAAE,CACH;EAIC;EACD"}
+{"version":3,"file":"use-resizable.cjs","names":["createContext","mergeProps","mergeRefs","getTriggerProps: PropGetter<SeparatorProps>"],"sources":["../../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type {\n  GroupImperativeHandle,\n  GroupProps,\n  LayoutStorage,\n  PanelImperativeHandle,\n  PanelProps,\n  SeparatorProps,\n} from \"react-resizable-panels\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback } from \"react\"\nimport {\n  useGroupRef,\n  usePanelRef,\n  useDefaultLayout as useResizableLayout,\n} from \"react-resizable-panels\"\nimport { mergeProps } from \"../../core\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  fnAll,\n  mergeRefs,\n} from \"../../utils\"\n\ninterface ResizableContext extends Omit<UseResizableReturn, \"getRootProps\"> {}\n\nconst [ResizableContext, useResizableContext] = createContext<ResizableContext>(\n  {\n    name: \"ResizableContext\",\n  },\n)\n\nexport { ResizableContext, useResizableContext, useResizableLayout }\n\nexport interface ResizableStorage extends LayoutStorage {}\nexport interface ResizableRootControl extends GroupImperativeHandle {}\nexport interface ResizableItemControl extends PanelImperativeHandle {}\n\nexport interface UseResizableProps\n  extends\n    HTMLProps,\n    Omit<GroupProps, \"color\" | \"content\" | \"elementRef\" | \"groupRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableRootControl>\n}\n\nexport const useResizable = ({\n  controlRef,\n  disabled,\n  orientation = \"horizontal\",\n  ...rest\n}: UseResizableProps = {}) => {\n  const groupRef = useGroupRef()\n\n  const getRootProps: PropGetter<GroupProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps({ disabled, orientation }, rest, props)()\n\n      return {\n        ...merged,\n        style: {\n          height: undefined,\n          width: undefined,\n          ...rest.style,\n          ...props.style,\n        },\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n        groupRef: mergeRefs(props.groupRef, groupRef, controlRef),\n        onLayoutChange: fnAll(props.onLayoutChange, rest.onLayoutChange),\n        onLayoutChanged: fnAll(props.onLayoutChanged, rest.onLayoutChanged),\n      }\n    },\n    [disabled, orientation, groupRef, controlRef, rest],\n  )\n\n  return {\n    disabled,\n    groupRef,\n    orientation,\n    getRootProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\nexport interface UseResizableItemProps\n  extends\n    HTMLProps,\n    Omit<PanelProps, \"color\" | \"content\" | \"elementRef\" | \"panelRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableItemControl>\n}\n\nexport const useResizableItem = ({\n  controlRef,\n  ...rest\n}: UseResizableItemProps) => {\n  const panelRef = usePanelRef()\n\n  const getItemProps: PropGetter<PanelProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(rest, props)()\n\n      return {\n        ...merged,\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n        panelRef: mergeRefs(props.panelRef, panelRef, controlRef),\n        onResize: fnAll(props.onResize, rest.onResize),\n      }\n    },\n    [panelRef, controlRef, rest],\n  )\n\n  return {\n    panelRef,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\nexport interface UseResizableTriggerProps\n  extends HTMLProps, Omit<SeparatorProps, \"color\" | \"content\" | \"elementRef\"> {}\n\nexport const useResizableTrigger = ({\n  disabled,\n  ...rest\n}: UseResizableTriggerProps) => {\n  const {\n    disabled: groupDisabled,\n    groupRef,\n    orientation,\n  } = useResizableContext()\n  const trulyDisabled = disabled || groupDisabled\n\n  const onDoubleClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const layout = groupRef.current?.getLayout()\n\n      if (!layout) return\n\n      const count = Object.keys(layout).length\n      const size = 100 / count\n      const nextLayout = Object.fromEntries(\n        Object.keys(layout).map((key) => [key, size]),\n      )\n\n      groupRef.current?.setLayout(nextLayout)\n    },\n    [groupRef],\n  )\n\n  const getTriggerProps: PropGetter<SeparatorProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(\n        {\n          \"aria-disabled\": ariaAttr(trulyDisabled),\n          \"aria-orientation\": orientation,\n          \"data-disabled\": dataAttr(trulyDisabled),\n          disabled: trulyDisabled,\n          tabIndex: trulyDisabled ? -1 : 0,\n        },\n        props,\n        rest,\n        { onDoubleClick },\n      )()\n\n      return {\n        ...merged,\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n      }\n    },\n    [orientation, trulyDisabled, rest, onDoubleClick],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-icon\": \"\",\n      ...props,\n    }),\n    [],\n  )\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,CAAC,kBAAkB,uBAAuBA,8BAC9C,EACE,MAAM,oBACP,CACF;AAkBD,MAAa,gBAAgB,EAC3B,YACA,UACA,cAAc,cACd,GAAG,SACkB,EAAE,KAAK;CAC5B,MAAM,oDAAwB;AAuB9B,QAAO;EACL;EACA;EACA;EACA,sCAxBC,QAAQ,EAAE,KAAK;AAGd,UAAO;IACL,GAHaC,yBAAW;KAAE;KAAU;KAAa,EAAE,MAAM,MAAM,EAAE;IAIjE,OAAO;KACL,QAAQ;KACR,OAAO;KACP,GAAG,KAAK;KACR,GAAG,MAAM;KACV;IACD,YAAYC,sBAAU,MAAM,YAAY,KAAK,IAAI;IACjD,UAAUA,sBAAU,MAAM,UAAU,UAAU,WAAW;IACzD,6DAAsB,MAAM,gBAAgB,KAAK,eAAe;IAChE,8DAAuB,MAAM,iBAAiB,KAAK,gBAAgB;IACpE;KAEH;GAAC;GAAU;GAAa;GAAU;GAAY;GAAK,CACpD;EAOA;;AAeH,MAAa,oBAAoB,EAC/B,YACA,GAAG,WACwB;CAC3B,MAAM,oDAAwB;AAgB9B,QAAO;EACL;EACA,sCAfC,QAAQ,EAAE,KAAK;AAGd,UAAO;IACL,GAHaD,yBAAW,MAAM,MAAM,EAAE;IAItC,YAAYC,sBAAU,MAAM,YAAY,KAAK,IAAI;IACjD,UAAUA,sBAAU,MAAM,UAAU,UAAU,WAAW;IACzD,uDAAgB,MAAM,UAAU,KAAK,SAAS;IAC/C;KAEH;GAAC;GAAU;GAAY;GAAK,CAC7B;EAKA;;AAQH,MAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EACJ,UAAU,eACV,UACA,gBACE,qBAAqB;CACzB,MAAM,gBAAgB,YAAY;CAElC,MAAM,wCACH,OAAmC;AAClC,KAAG,gBAAgB;EAEnB,MAAM,SAAS,SAAS,SAAS,WAAW;AAE5C,MAAI,CAAC,OAAQ;EAGb,MAAM,OAAO,MADC,OAAO,KAAK,OAAO,CAAC;EAElC,MAAM,aAAa,OAAO,YACxB,OAAO,KAAK,OAAO,CAAC,KAAK,QAAQ,CAAC,KAAK,KAAK,CAAC,CAC9C;AAED,WAAS,SAAS,UAAU,WAAW;IAEzC,CAAC,SAAS,CACX;CAED,MAAMC,0CACH,QAAQ,EAAE,KAAK;AAcd,SAAO;GACL,GAdaF,yBACb;IACE,iEAA0B,cAAc;IACxC,oBAAoB;IACpB,iEAA0B,cAAc;IACxC,UAAU;IACV,UAAU,gBAAgB,KAAK;IAChC,EACD,OACA,MACA,EAAE,eAAe,CAClB,EAAE;GAID,YAAYC,sBAAU,MAAM,YAAY,KAAK,IAAI;GAClD;IAEH;EAAC;EAAa;EAAe;EAAM;EAAc,CAClD;AAUD,QAAO;EACL,sCARC,QAAQ,EAAE,MAAM;GACf,aAAa;GACb,GAAG;GACJ,GACD,EAAE,CACH;EAIC;EACD"}

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

@@ -3,6 +3,8 @@
 import { createContext as createContext$1 } from "../../utils/context.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 { useCallback } from "react";
 import { useDefaultLayout as useResizableLayout, useGroupRef, usePanelRef } from "react-resizable-panels";
 
@@ -14,22 +16,24 @@ const useResizable = ({ controlRef, disabled, orientation = "horizontal", ...res
 		disabled,
 		groupRef,
 		orientation,
-		getRootProps: useCallback((props = {}) => ({
-			disabled,
-			orientation,
-			...rest,
-			...props,
-			style: {
-				height: void 0,
-				width: void 0,
-				...rest.style,
-				...props.style
-			},
-			elementRef: mergeRefs(props.elementRef, rest.ref),
-			groupRef: mergeRefs(props.groupRef, groupRef, controlRef),
-			onLayoutChange: (0, utils_exports.fnAll)(props.onLayoutChange, rest.onLayoutChange),
-			onLayoutChanged: (0, utils_exports.fnAll)(props.onLayoutChanged, rest.onLayoutChanged)
-		}), [
+		getRootProps: useCallback((props = {}) => {
+			return {
+				...mergeProps({
+					disabled,
+					orientation
+				}, rest, props)(),
+				style: {
+					height: void 0,
+					width: void 0,
+					...rest.style,
+					...props.style
+				},
+				elementRef: mergeRefs(props.elementRef, rest.ref),
+				groupRef: mergeRefs(props.groupRef, groupRef, controlRef),
+				onLayoutChange: (0, utils_exports.fnAll)(props.onLayoutChange, rest.onLayoutChange),
+				onLayoutChanged: (0, utils_exports.fnAll)(props.onLayoutChanged, rest.onLayoutChanged)
+			};
+		}, [
 			disabled,
 			orientation,
 			groupRef,
@@ -42,13 +46,14 @@ const useResizableItem = ({ controlRef, ...rest }) => {
 	const panelRef = usePanelRef();
 	return {
 		panelRef,
-		getItemProps: useCallback((props = {}) => ({
-			...rest,
-			...props,
-			elementRef: mergeRefs(props.elementRef, rest.ref),
-			panelRef: mergeRefs(props.panelRef, panelRef, controlRef),
-			onResize: (0, utils_exports.fnAll)(props.onResize, rest.onResize)
-		}), [
+		getItemProps: useCallback((props = {}) => {
+			return {
+				...mergeProps(rest, props)(),
+				elementRef: mergeRefs(props.elementRef, rest.ref),
+				panelRef: mergeRefs(props.panelRef, panelRef, controlRef),
+				onResize: (0, utils_exports.fnAll)(props.onResize, rest.onResize)
+			};
+		}, [
 			panelRef,
 			controlRef,
 			rest
@@ -66,17 +71,18 @@ const useResizableTrigger = ({ disabled, ...rest }) => {
 		const nextLayout = Object.fromEntries(Object.keys(layout).map((key) => [key, size]));
 		groupRef.current?.setLayout(nextLayout);
 	}, [groupRef]);
-	const getTriggerProps = useCallback((props = {}) => ({
-		"aria-disabled": (0, utils_exports.ariaAttr)(trulyDisabled),
-		"aria-orientation": orientation,
-		"data-disabled": (0, utils_exports.dataAttr)(trulyDisabled),
-		disabled: trulyDisabled,
-		tabIndex: trulyDisabled ? -1 : 0,
-		...rest,
-		...props,
-		elementRef: mergeRefs(props.elementRef, rest.ref),
-		onDoubleClick: (0, utils_exports.handlerAll)(props.onDoubleClick, rest.onDoubleClick, onDoubleClick)
-	}), [
+	const getTriggerProps = useCallback((props = {}) => {
+		return {
+			...mergeProps({
+				"aria-disabled": (0, utils_exports.ariaAttr)(trulyDisabled),
+				"aria-orientation": orientation,
+				"data-disabled": (0, utils_exports.dataAttr)(trulyDisabled),
+				disabled: trulyDisabled,
+				tabIndex: trulyDisabled ? -1 : 0
+			}, props, rest, { onDoubleClick })(),
+			elementRef: mergeRefs(props.elementRef, rest.ref)
+		};
+	}, [
 		orientation,
 		trulyDisabled,
 		rest,

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

@@ -1 +1 @@
-{"version":3,"file":"use-resizable.js","names":["createContext","getTriggerProps: PropGetter<SeparatorProps>"],"sources":["../../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type {\n  GroupImperativeHandle,\n  GroupProps,\n  LayoutStorage,\n  PanelImperativeHandle,\n  PanelProps,\n  SeparatorProps,\n} from \"react-resizable-panels\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback } from \"react\"\nimport {\n  useGroupRef,\n  usePanelRef,\n  useDefaultLayout as useResizableLayout,\n} from \"react-resizable-panels\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  fnAll,\n  handlerAll,\n  mergeRefs,\n} from \"../../utils\"\n\ninterface ResizableContext extends Omit<UseResizableReturn, \"getRootProps\"> {}\n\nconst [ResizableContext, useResizableContext] = createContext<ResizableContext>(\n  {\n    name: \"ResizableContext\",\n  },\n)\n\nexport { ResizableContext, useResizableContext, useResizableLayout }\n\nexport interface ResizableStorage extends LayoutStorage {}\nexport interface ResizableRootControl extends GroupImperativeHandle {}\nexport interface ResizableItemControl extends PanelImperativeHandle {}\n\nexport interface UseResizableProps\n  extends\n    HTMLProps,\n    Omit<GroupProps, \"color\" | \"content\" | \"elementRef\" | \"groupRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableRootControl>\n}\n\nexport const useResizable = ({\n  controlRef,\n  disabled,\n  orientation = \"horizontal\",\n  ...rest\n}: UseResizableProps = {}) => {\n  const groupRef = useGroupRef()\n\n  const getRootProps: PropGetter<GroupProps> = useCallback(\n    (props = {}) => ({\n      disabled,\n      orientation,\n      ...rest,\n      ...props,\n      style: {\n        height: undefined,\n        width: undefined,\n        ...rest.style,\n        ...props.style,\n      },\n      elementRef: mergeRefs(props.elementRef, rest.ref),\n      groupRef: mergeRefs(props.groupRef, groupRef, controlRef),\n      onLayoutChange: fnAll(props.onLayoutChange, rest.onLayoutChange),\n      onLayoutChanged: fnAll(props.onLayoutChanged, rest.onLayoutChanged),\n    }),\n    [disabled, orientation, groupRef, controlRef, rest],\n  )\n\n  return {\n    disabled,\n    groupRef,\n    orientation,\n    getRootProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\nexport interface UseResizableItemProps\n  extends\n    HTMLProps,\n    Omit<PanelProps, \"color\" | \"content\" | \"elementRef\" | \"panelRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableItemControl>\n}\n\nexport const useResizableItem = ({\n  controlRef,\n  ...rest\n}: UseResizableItemProps) => {\n  const panelRef = usePanelRef()\n\n  const getItemProps: PropGetter<PanelProps> = useCallback(\n    (props = {}) => ({\n      ...rest,\n      ...props,\n      elementRef: mergeRefs(props.elementRef, rest.ref),\n      panelRef: mergeRefs(props.panelRef, panelRef, controlRef),\n      onResize: fnAll(props.onResize, rest.onResize),\n    }),\n    [panelRef, controlRef, rest],\n  )\n\n  return {\n    panelRef,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\nexport interface UseResizableTriggerProps\n  extends HTMLProps, Omit<SeparatorProps, \"color\" | \"content\" | \"elementRef\"> {}\n\nexport const useResizableTrigger = ({\n  disabled,\n  ...rest\n}: UseResizableTriggerProps) => {\n  const {\n    disabled: groupDisabled,\n    groupRef,\n    orientation,\n  } = useResizableContext()\n  const trulyDisabled = disabled || groupDisabled\n\n  const onDoubleClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const layout = groupRef.current?.getLayout()\n\n      if (!layout) return\n\n      const count = Object.keys(layout).length\n      const size = 100 / count\n      const nextLayout = Object.fromEntries(\n        Object.keys(layout).map((key) => [key, size]),\n      )\n\n      groupRef.current?.setLayout(nextLayout)\n    },\n    [groupRef],\n  )\n\n  const getTriggerProps: PropGetter<SeparatorProps> = useCallback(\n    (props = {}) => ({\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"aria-orientation\": orientation,\n      \"data-disabled\": dataAttr(trulyDisabled),\n      disabled: trulyDisabled,\n      tabIndex: trulyDisabled ? -1 : 0,\n      ...rest,\n      ...props,\n      elementRef: mergeRefs(props.elementRef, rest.ref),\n      onDoubleClick: handlerAll(\n        props.onDoubleClick,\n        rest.onDoubleClick,\n        onDoubleClick,\n      ),\n    }),\n    [orientation, trulyDisabled, rest, onDoubleClick],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-icon\": \"\",\n      ...props,\n    }),\n    [],\n  )\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":";;;;;;;;;AA6BA,MAAM,CAAC,kBAAkB,uBAAuBA,gBAC9C,EACE,MAAM,oBACP,CACF;AAkBD,MAAa,gBAAgB,EAC3B,YACA,UACA,cAAc,cACd,GAAG,SACkB,EAAE,KAAK;CAC5B,MAAM,WAAW,aAAa;AAsB9B,QAAO;EACL;EACA;EACA;EACA,cAxB2C,aAC1C,QAAQ,EAAE,MAAM;GACf;GACA;GACA,GAAG;GACH,GAAG;GACH,OAAO;IACL,QAAQ;IACR,OAAO;IACP,GAAG,KAAK;IACR,GAAG,MAAM;IACV;GACD,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;GACjD,UAAU,UAAU,MAAM,UAAU,UAAU,WAAW;GACzD,yCAAsB,MAAM,gBAAgB,KAAK,eAAe;GAChE,0CAAuB,MAAM,iBAAiB,KAAK,gBAAgB;GACpE,GACD;GAAC;GAAU;GAAa;GAAU;GAAY;GAAK,CACpD;EAOA;;AAeH,MAAa,oBAAoB,EAC/B,YACA,GAAG,WACwB;CAC3B,MAAM,WAAW,aAAa;AAa9B,QAAO;EACL;EACA,cAb2C,aAC1C,QAAQ,EAAE,MAAM;GACf,GAAG;GACH,GAAG;GACH,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;GACjD,UAAU,UAAU,MAAM,UAAU,UAAU,WAAW;GACzD,mCAAgB,MAAM,UAAU,KAAK,SAAS;GAC/C,GACD;GAAC;GAAU;GAAY;GAAK,CAC7B;EAKA;;AAQH,MAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EACJ,UAAU,eACV,UACA,gBACE,qBAAqB;CACzB,MAAM,gBAAgB,YAAY;CAElC,MAAM,gBAAgB,aACnB,OAAmC;AAClC,KAAG,gBAAgB;EAEnB,MAAM,SAAS,SAAS,SAAS,WAAW;AAE5C,MAAI,CAAC,OAAQ;EAGb,MAAM,OAAO,MADC,OAAO,KAAK,OAAO,CAAC;EAElC,MAAM,aAAa,OAAO,YACxB,OAAO,KAAK,OAAO,CAAC,KAAK,QAAQ,CAAC,KAAK,KAAK,CAAC,CAC9C;AAED,WAAS,SAAS,UAAU,WAAW;IAEzC,CAAC,SAAS,CACX;CAED,MAAMC,kBAA8C,aACjD,QAAQ,EAAE,MAAM;EACf,6CAA0B,cAAc;EACxC,oBAAoB;EACpB,6CAA0B,cAAc;EACxC,UAAU;EACV,UAAU,gBAAgB,KAAK;EAC/B,GAAG;EACH,GAAG;EACH,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;EACjD,6CACE,MAAM,eACN,KAAK,eACL,cACD;EACF,GACD;EAAC;EAAa;EAAe;EAAM;EAAc,CAClD;AAUD,QAAO;EACL,cAT+B,aAC9B,QAAQ,EAAE,MAAM;GACf,aAAa;GACb,GAAG;GACJ,GACD,EAAE,CACH;EAIC;EACD"}
+{"version":3,"file":"use-resizable.js","names":["createContext","getTriggerProps: PropGetter<SeparatorProps>"],"sources":["../../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type {\n  GroupImperativeHandle,\n  GroupProps,\n  LayoutStorage,\n  PanelImperativeHandle,\n  PanelProps,\n  SeparatorProps,\n} from \"react-resizable-panels\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback } from \"react\"\nimport {\n  useGroupRef,\n  usePanelRef,\n  useDefaultLayout as useResizableLayout,\n} from \"react-resizable-panels\"\nimport { mergeProps } from \"../../core\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  fnAll,\n  mergeRefs,\n} from \"../../utils\"\n\ninterface ResizableContext extends Omit<UseResizableReturn, \"getRootProps\"> {}\n\nconst [ResizableContext, useResizableContext] = createContext<ResizableContext>(\n  {\n    name: \"ResizableContext\",\n  },\n)\n\nexport { ResizableContext, useResizableContext, useResizableLayout }\n\nexport interface ResizableStorage extends LayoutStorage {}\nexport interface ResizableRootControl extends GroupImperativeHandle {}\nexport interface ResizableItemControl extends PanelImperativeHandle {}\n\nexport interface UseResizableProps\n  extends\n    HTMLProps,\n    Omit<GroupProps, \"color\" | \"content\" | \"elementRef\" | \"groupRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableRootControl>\n}\n\nexport const useResizable = ({\n  controlRef,\n  disabled,\n  orientation = \"horizontal\",\n  ...rest\n}: UseResizableProps = {}) => {\n  const groupRef = useGroupRef()\n\n  const getRootProps: PropGetter<GroupProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps({ disabled, orientation }, rest, props)()\n\n      return {\n        ...merged,\n        style: {\n          height: undefined,\n          width: undefined,\n          ...rest.style,\n          ...props.style,\n        },\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n        groupRef: mergeRefs(props.groupRef, groupRef, controlRef),\n        onLayoutChange: fnAll(props.onLayoutChange, rest.onLayoutChange),\n        onLayoutChanged: fnAll(props.onLayoutChanged, rest.onLayoutChanged),\n      }\n    },\n    [disabled, orientation, groupRef, controlRef, rest],\n  )\n\n  return {\n    disabled,\n    groupRef,\n    orientation,\n    getRootProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\nexport interface UseResizableItemProps\n  extends\n    HTMLProps,\n    Omit<PanelProps, \"color\" | \"content\" | \"elementRef\" | \"panelRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableItemControl>\n}\n\nexport const useResizableItem = ({\n  controlRef,\n  ...rest\n}: UseResizableItemProps) => {\n  const panelRef = usePanelRef()\n\n  const getItemProps: PropGetter<PanelProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(rest, props)()\n\n      return {\n        ...merged,\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n        panelRef: mergeRefs(props.panelRef, panelRef, controlRef),\n        onResize: fnAll(props.onResize, rest.onResize),\n      }\n    },\n    [panelRef, controlRef, rest],\n  )\n\n  return {\n    panelRef,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\nexport interface UseResizableTriggerProps\n  extends HTMLProps, Omit<SeparatorProps, \"color\" | \"content\" | \"elementRef\"> {}\n\nexport const useResizableTrigger = ({\n  disabled,\n  ...rest\n}: UseResizableTriggerProps) => {\n  const {\n    disabled: groupDisabled,\n    groupRef,\n    orientation,\n  } = useResizableContext()\n  const trulyDisabled = disabled || groupDisabled\n\n  const onDoubleClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const layout = groupRef.current?.getLayout()\n\n      if (!layout) return\n\n      const count = Object.keys(layout).length\n      const size = 100 / count\n      const nextLayout = Object.fromEntries(\n        Object.keys(layout).map((key) => [key, size]),\n      )\n\n      groupRef.current?.setLayout(nextLayout)\n    },\n    [groupRef],\n  )\n\n  const getTriggerProps: PropGetter<SeparatorProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(\n        {\n          \"aria-disabled\": ariaAttr(trulyDisabled),\n          \"aria-orientation\": orientation,\n          \"data-disabled\": dataAttr(trulyDisabled),\n          disabled: trulyDisabled,\n          tabIndex: trulyDisabled ? -1 : 0,\n        },\n        props,\n        rest,\n        { onDoubleClick },\n      )()\n\n      return {\n        ...merged,\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n      }\n    },\n    [orientation, trulyDisabled, rest, onDoubleClick],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-icon\": \"\",\n      ...props,\n    }),\n    [],\n  )\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":";;;;;;;;;;;AA6BA,MAAM,CAAC,kBAAkB,uBAAuBA,gBAC9C,EACE,MAAM,oBACP,CACF;AAkBD,MAAa,gBAAgB,EAC3B,YACA,UACA,cAAc,cACd,GAAG,SACkB,EAAE,KAAK;CAC5B,MAAM,WAAW,aAAa;AAuB9B,QAAO;EACL;EACA;EACA;EACA,cAzB2C,aAC1C,QAAQ,EAAE,KAAK;AAGd,UAAO;IACL,GAHa,WAAW;KAAE;KAAU;KAAa,EAAE,MAAM,MAAM,EAAE;IAIjE,OAAO;KACL,QAAQ;KACR,OAAO;KACP,GAAG,KAAK;KACR,GAAG,MAAM;KACV;IACD,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;IACjD,UAAU,UAAU,MAAM,UAAU,UAAU,WAAW;IACzD,yCAAsB,MAAM,gBAAgB,KAAK,eAAe;IAChE,0CAAuB,MAAM,iBAAiB,KAAK,gBAAgB;IACpE;KAEH;GAAC;GAAU;GAAa;GAAU;GAAY;GAAK,CACpD;EAOA;;AAeH,MAAa,oBAAoB,EAC/B,YACA,GAAG,WACwB;CAC3B,MAAM,WAAW,aAAa;AAgB9B,QAAO;EACL;EACA,cAhB2C,aAC1C,QAAQ,EAAE,KAAK;AAGd,UAAO;IACL,GAHa,WAAW,MAAM,MAAM,EAAE;IAItC,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;IACjD,UAAU,UAAU,MAAM,UAAU,UAAU,WAAW;IACzD,mCAAgB,MAAM,UAAU,KAAK,SAAS;IAC/C;KAEH;GAAC;GAAU;GAAY;GAAK,CAC7B;EAKA;;AAQH,MAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EACJ,UAAU,eACV,UACA,gBACE,qBAAqB;CACzB,MAAM,gBAAgB,YAAY;CAElC,MAAM,gBAAgB,aACnB,OAAmC;AAClC,KAAG,gBAAgB;EAEnB,MAAM,SAAS,SAAS,SAAS,WAAW;AAE5C,MAAI,CAAC,OAAQ;EAGb,MAAM,OAAO,MADC,OAAO,KAAK,OAAO,CAAC;EAElC,MAAM,aAAa,OAAO,YACxB,OAAO,KAAK,OAAO,CAAC,KAAK,QAAQ,CAAC,KAAK,KAAK,CAAC,CAC9C;AAED,WAAS,SAAS,UAAU,WAAW;IAEzC,CAAC,SAAS,CACX;CAED,MAAMC,kBAA8C,aACjD,QAAQ,EAAE,KAAK;AAcd,SAAO;GACL,GAda,WACb;IACE,6CAA0B,cAAc;IACxC,oBAAoB;IACpB,6CAA0B,cAAc;IACxC,UAAU;IACV,UAAU,gBAAgB,KAAK;IAChC,EACD,OACA,MACA,EAAE,eAAe,CAClB,EAAE;GAID,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;GAClD;IAEH;EAAC;EAAa;EAAe;EAAM;EAAc,CAClD;AAUD,QAAO;EACL,cAT+B,aAC9B,QAAQ,EAAE,MAAM;GACf,aAAa;GACb,GAAG;GACJ,GACD,EAAE,CACH;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 react164 from "react";
+import * as react1226 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: react164.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react1226.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 react152 from "react";
+import * as react1214 from "react";
 
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react152.Context<{
+declare const AccordionDescendantsContext: react1214.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: react152.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) => react152.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1214.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: react152.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) => react152.RefCallback<HTMLButtonElement>;
+      } | undefined) => react1214.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react152.RefCallback<HTMLButtonElement>;
+    register: react1214.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: react152.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) => react152.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1214.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: react152.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react1214.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react152.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react1214.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) => react152.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1214.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: react152.Dispatch<react152.SetStateAction<number>>;
-  setIndex: react152.Dispatch<react152.SetStateAction<number | number[]>>;
+  setFocusedIndex: react1214.Dispatch<react1214.SetStateAction<number>>;
+  setIndex: react1214.Dispatch<react1214.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 react165 from "react";
+import * as react1213 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: react165.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react1213.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 react120 from "react";
+import * as react1212 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: react120.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react1212.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 react151 from "react";
+import * as react1211 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: react151.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react1211.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" | "description" | "root", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "description" | "root">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "description" | "root">>, {
+declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, {
   island: {
     description: {
       color: "fg.muted";

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 react150 from "react";
+import * as react1206 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: react150.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react1206.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 react149 from "react";
+import * as react1205 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: react149.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react1205.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 react148 from "react";
+import * as react1204 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: react148.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react1204.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" | "indicator" | "root" | "field" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "empty" | "valueText">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "valueText" | "empty">>, {
   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 react142 from "react";
+import * as react1198 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: react142.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react1198.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) => react142.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react1198.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: react142.Dispatch<react142.SetStateAction<string>>;
-  setValue: react142.Dispatch<react142.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react1198.Dispatch<react1198.SetStateAction<string>>;
+  setValue: react1198.Dispatch<react1198.SetStateAction<Multiple extends true ? string[] : string>>;
   value: Multiple extends true ? string[] : string;
   valueMap: {
     [key: string]: ComboboxItemWithValue;