@yamada-ui/react 2.2.1-dev-20260428092839 → 2.2.1-dev-20260428094054

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

@@ -6,6 +6,8 @@ const require_context = require('../../utils/context.cjs');
 const require_effect = require('../../utils/effect.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 motion_react = require("motion/react");
 
@@ -72,16 +74,14 @@ const useReorder = ({ ref, children, item, items = [], orientation = "vertical",
 		children: cloneChildren,
 		orientation,
 		values,
-		getRootProps: (0, react.useCallback)((props = {}) => ({
+		getRootProps: (0, react.useCallback)((props = {}) => require_props.mergeProps({
 			axis,
-			values,
-			...rest,
-			...props,
-			ref: require_ref.mergeRefs(props.ref, ref),
-			onMouseUp: (0, require_utils_index.utils_exports.handlerAll)(props.onMouseUp, rest.onMouseUp, onCompleteReorder),
-			onReorder: (0, require_utils_index.utils_exports.handlerAll)(props.onReorder, rest.onReorder, onReorder),
-			onTouchEnd: (0, require_utils_index.utils_exports.handlerAll)(props.onTouchEnd, rest.onTouchEnd, onCompleteReorder)
-		}), [
+			values
+		}, rest, props, { ref }, {
+			onMouseUp: onCompleteReorder,
+			onReorder,
+			onTouchEnd: onCompleteReorder
+		})(), [
 			rest,
 			ref,
 			onCompleteReorder,
@@ -119,14 +119,13 @@ const useReorderItem = ({ ref, label, value, ...rest }) => {
 		getItemProps: (0, react.useCallback)((props = {}) => {
 			const children = props.children ?? rest.children ?? label;
 			return {
-				"data-has-trigger": (0, require_utils_index.utils_exports.dataAttr)(hasTrigger),
-				"data-selected": (0, require_utils_index.utils_exports.dataAttr)(drag),
-				dragControls,
-				dragListener: !hasTrigger,
-				value: value ?? getAlternativeValue({ children }),
-				...props,
-				...rest,
-				ref: require_ref.mergeRefs(props.ref, ref),
+				...require_props.mergeProps({
+					"data-has-trigger": (0, require_utils_index.utils_exports.dataAttr)(hasTrigger),
+					"data-selected": (0, require_utils_index.utils_exports.dataAttr)(drag),
+					dragControls,
+					dragListener: !hasTrigger,
+					value: value ?? getAlternativeValue({ children })
+				}, props, rest, { ref })(),
 				style: {
 					x,
 					y,

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

@@ -1 +1 @@
-{"version":3,"file":"use-reorder.cjs","names":["createContext","useValidChildren","values","mergeRefs","x","y"],"sources":["../../../../src/components/reorder/use-reorder.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLMotionProps, Reorder } from \"motion/react\"\nimport type { PropsWithChildren, ReactElement, ReactNode } from \"react\"\nimport type { Orientation, PropGetter } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport { useDragControls, useMotionValue } from \"motion/react\"\nimport {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isObject,\n  mergeRefs,\n  useUpdateEffect,\n  useValidChildren,\n} from \"../../utils\"\n\nconst getAlternativeValue = ({ children, label }: Dict = {}) =>\n  serializeValue(children ?? label)\n\nconst serializeValue = (value: any) =>\n  isObject(value) || isArray(value) ? JSON.stringify(value) : value\n\ntype ReorderGroupProps<Y = string> = Merge<\n  HTMLMotionProps<\"ul\">,\n  Pick<Parameters<typeof Reorder.Group<Y>>[0], \"axis\" | \"onReorder\" | \"values\">\n>\ntype ReorderItemProps<Y = string> = Merge<\n  HTMLMotionProps<\"li\">,\n  Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], \"layout\" | \"value\">>\n>\n\ninterface ReorderContext extends Pick<UseReorderProps, \"orientation\"> {}\n\nconst [ReorderContext, useReorderContext] = createContext<ReorderContext>({\n  name: \"ReorderContext\",\n})\n\nexport { ReorderContext, useReorderContext }\n\ninterface ReorderItemContext {\n  getTriggerProps: PropGetter\n}\n\nconst [ReorderItemContext, useReorderItemContext] =\n  createContext<ReorderItemContext>({\n    name: \"ReorderItemContext\",\n  })\n\nexport { ReorderItemContext, useReorderItemContext }\n\nexport interface UseReorderProps<Y = string>\n  extends\n    Partial<Omit<ReorderGroupProps<Y>, \"children\" | \"onChange\" | \"values\">>,\n    PropsWithChildren {\n  /**\n   * The component to be used for the item.\n   */\n  item?: ReactElement<any>\n  /**\n   * If provided, generate reorder items based on items.\n   *\n   */\n  items?: UseReorderItemProps<Y>[]\n  /**\n   * The orientation of the reorder.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * The callback invoked when reorder items are moved.\n   */\n  onChange?: (values: Y[]) => void\n  /**\n   * The callback invoked when the movement of reorder items is completed.\n   */\n  onCompleteChange?: (values: Y[]) => void\n}\n\nexport const useReorder = <Y = string>({\n  ref,\n  children,\n  item,\n  items = [],\n  orientation = \"vertical\",\n  onChange,\n  onCompleteChange,\n  ...rest\n}: UseReorderProps<Y> = {}) => {\n  const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n  const validChildren = useValidChildren(children)\n  const hasChildren = !!validChildren.length\n  const defaultValues = useMemo(() => {\n    const values = hasChildren\n      ? validChildren.map(\n          ({ props }) => props.value ?? getAlternativeValue(props),\n        )\n      : items.map((props) => props.value ?? getAlternativeValue(props))\n\n    const duplicatedValues = values.filter(\n      (value, index, self) =>\n        self.indexOf(value) === index && index !== self.lastIndexOf(value),\n    )\n\n    if (duplicatedValues.length)\n      console.warn(\n        `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n          `', '`,\n        )}' `,\n      )\n\n    return Array.from(new Set(values))\n  }, [hasChildren, validChildren, items])\n  const childMap = useMemo(() => {\n    return Object.fromEntries(\n      validChildren.map((child) => [\n        serializeValue(child.props.value) ??\n          serializeValue(getAlternativeValue(child.props)),\n        child,\n      ]),\n    )\n  }, [validChildren])\n  const itemMap = useMemo(() => {\n    return Object.fromEntries(\n      items.map((props) => [\n        serializeValue(props.value) ??\n          serializeValue(getAlternativeValue(props)),\n        props,\n      ]),\n    )\n  }, [items])\n  const prevDefaultValues = useRef<Y[]>(defaultValues)\n  const [values, setValues] = useState<Y[]>(defaultValues)\n  const prevValues = useRef<Y[]>(defaultValues)\n  const cloneChildren = useMemo(\n    () =>\n      values.map((value) => {\n        if (hasChildren) {\n          return childMap[serializeValue(value)]\n        } else {\n          const props = itemMap[serializeValue(value)]\n\n          return props && item\n            ? cloneElement(item, { key: serializeValue(props.value), ...props })\n            : null\n        }\n      }),\n    [values, hasChildren, childMap, itemMap, item],\n  )\n\n  const onReorder = useCallback(\n    (newValues: Y[]) => {\n      setValues(newValues)\n\n      onChange?.(newValues)\n    },\n    [onChange],\n  )\n\n  const onCompleteReorder = useCallback(() => {\n    const equal = JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n    if (equal) return\n\n    prevValues.current = values\n\n    onCompleteChange?.(values)\n  }, [onCompleteChange, values])\n\n  useUpdateEffect(() => {\n    const equal =\n      JSON.stringify(defaultValues) ===\n      JSON.stringify(prevDefaultValues.current)\n\n    if (equal) return\n\n    prevValues.current = defaultValues\n    prevDefaultValues.current = defaultValues\n\n    setValues(defaultValues)\n  }, [defaultValues])\n\n  const getRootProps: PropGetter<\n    Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n    undefined,\n    ReorderGroupProps<Y>\n  > = useCallback(\n    (props = {}) => ({\n      axis,\n      values,\n      ...rest,\n      ...props,\n      ref: mergeRefs(props.ref, ref),\n      onMouseUp: handlerAll(props.onMouseUp, rest.onMouseUp, onCompleteReorder),\n      onReorder: handlerAll(props.onReorder, rest.onReorder, onReorder),\n      onTouchEnd: handlerAll(\n        props.onTouchEnd,\n        rest.onTouchEnd,\n        onCompleteReorder,\n      ),\n    }),\n    [rest, ref, onCompleteReorder, onReorder, axis, values],\n  )\n\n  return { children: cloneChildren, orientation, values, getRootProps }\n}\n\nexport type UseReorderReturn<Y = string> = ReturnType<typeof useReorder<Y>>\n\nexport interface UseReorderItemProps<Y = string> extends ReorderItemProps<Y> {\n  /**\n   * The label of the reorder item.\n   */\n  label?: ReactNode\n  /**\n   * The value of the reorder item.\n   */\n  value?: Y\n}\n\nexport const useReorderItem = <Y = string>({\n  ref,\n  label,\n  value,\n  ...rest\n}: UseReorderItemProps<Y>) => {\n  const { orientation } = useReorderContext()\n  const dragControls = useDragControls()\n  const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n  const [drag, setDrag] = useState<boolean>(false)\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n\n  const register = useCallback(\n    (node: HTMLElement | null) => setHasTrigger(!!node),\n    [],\n  )\n\n  useEffect(() => {\n    const unsubscribeX = x.on(\"change\", (x) => {\n      if (orientation === \"horizontal\") setDrag(x !== 0)\n    })\n    const unsubscribeY = y.on(\"change\", (y) => {\n      if (orientation === \"vertical\") setDrag(y !== 0)\n    })\n\n    return () => {\n      unsubscribeX()\n      unsubscribeY()\n    }\n  }, [orientation, x, y])\n\n  const getItemProps: PropGetter<\n    Omit<HTMLMotionProps<\"li\">, \"layout\" | \"value\"> &\n      Pick<ReorderItemProps<Y>, \"layout\">,\n    undefined,\n    ReorderItemProps<Y>\n  > = useCallback(\n    (props = {}) => {\n      const children = props.children ?? rest.children ?? label\n\n      return {\n        \"data-has-trigger\": dataAttr(hasTrigger),\n        \"data-selected\": dataAttr(drag),\n        dragControls,\n        dragListener: !hasTrigger,\n        value: value ?? getAlternativeValue({ children }),\n        ...props,\n        ...rest,\n        ref: mergeRefs(props.ref, ref),\n        style: { x, y, ...props.style, ...rest.style },\n        children,\n      }\n    },\n    [ref, rest, dragControls, hasTrigger, value, x, y, drag, label],\n  )\n\n  const getTriggerProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      ref: mergeRefs(register, props.ref),\n      \"data-selected\": dataAttr(drag),\n      onPointerDown: handlerAll(props.onPointerDown, (ev) =>\n        dragControls.start(ev),\n      ),\n    }),\n    [drag, dragControls, register],\n  )\n\n  return { getItemProps, getTriggerProps }\n}\n\nexport type UseReorderItemReturn<Y = string> = ReturnType<\n  typeof useReorderItem<Y>\n>\n"],"mappings":"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"}
+{"version":3,"file":"use-reorder.cjs","names":["createContext","useValidChildren","values","mergeProps","x","y","mergeRefs"],"sources":["../../../../src/components/reorder/use-reorder.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLMotionProps, Reorder } from \"motion/react\"\nimport type { PropsWithChildren, ReactElement, ReactNode } from \"react\"\nimport type { Orientation, PropGetter } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport { useDragControls, useMotionValue } from \"motion/react\"\nimport {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { mergeProps } from \"../../core\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isObject,\n  mergeRefs,\n  useUpdateEffect,\n  useValidChildren,\n} from \"../../utils\"\n\nconst getAlternativeValue = ({ children, label }: Dict = {}) =>\n  serializeValue(children ?? label)\n\nconst serializeValue = (value: any) =>\n  isObject(value) || isArray(value) ? JSON.stringify(value) : value\n\ntype ReorderGroupProps<Y = string> = Merge<\n  HTMLMotionProps<\"ul\">,\n  Pick<Parameters<typeof Reorder.Group<Y>>[0], \"axis\" | \"onReorder\" | \"values\">\n>\ntype ReorderItemProps<Y = string> = Merge<\n  HTMLMotionProps<\"li\">,\n  Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], \"layout\" | \"value\">>\n>\n\ninterface ReorderContext extends Pick<UseReorderProps, \"orientation\"> {}\n\nconst [ReorderContext, useReorderContext] = createContext<ReorderContext>({\n  name: \"ReorderContext\",\n})\n\nexport { ReorderContext, useReorderContext }\n\ninterface ReorderItemContext {\n  getTriggerProps: PropGetter\n}\n\nconst [ReorderItemContext, useReorderItemContext] =\n  createContext<ReorderItemContext>({\n    name: \"ReorderItemContext\",\n  })\n\nexport { ReorderItemContext, useReorderItemContext }\n\nexport interface UseReorderProps<Y = string>\n  extends\n    Partial<Omit<ReorderGroupProps<Y>, \"children\" | \"onChange\" | \"values\">>,\n    PropsWithChildren {\n  /**\n   * The component to be used for the item.\n   */\n  item?: ReactElement<any>\n  /**\n   * If provided, generate reorder items based on items.\n   *\n   */\n  items?: UseReorderItemProps<Y>[]\n  /**\n   * The orientation of the reorder.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * The callback invoked when reorder items are moved.\n   */\n  onChange?: (values: Y[]) => void\n  /**\n   * The callback invoked when the movement of reorder items is completed.\n   */\n  onCompleteChange?: (values: Y[]) => void\n}\n\nexport const useReorder = <Y = string>({\n  ref,\n  children,\n  item,\n  items = [],\n  orientation = \"vertical\",\n  onChange,\n  onCompleteChange,\n  ...rest\n}: UseReorderProps<Y> = {}) => {\n  const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n  const validChildren = useValidChildren(children)\n  const hasChildren = !!validChildren.length\n  const defaultValues = useMemo(() => {\n    const values = hasChildren\n      ? validChildren.map(\n          ({ props }) => props.value ?? getAlternativeValue(props),\n        )\n      : items.map((props) => props.value ?? getAlternativeValue(props))\n\n    const duplicatedValues = values.filter(\n      (value, index, self) =>\n        self.indexOf(value) === index && index !== self.lastIndexOf(value),\n    )\n\n    if (duplicatedValues.length)\n      console.warn(\n        `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n          `', '`,\n        )}' `,\n      )\n\n    return Array.from(new Set(values))\n  }, [hasChildren, validChildren, items])\n  const childMap = useMemo(() => {\n    return Object.fromEntries(\n      validChildren.map((child) => [\n        serializeValue(child.props.value) ??\n          serializeValue(getAlternativeValue(child.props)),\n        child,\n      ]),\n    )\n  }, [validChildren])\n  const itemMap = useMemo(() => {\n    return Object.fromEntries(\n      items.map((props) => [\n        serializeValue(props.value) ??\n          serializeValue(getAlternativeValue(props)),\n        props,\n      ]),\n    )\n  }, [items])\n  const prevDefaultValues = useRef<Y[]>(defaultValues)\n  const [values, setValues] = useState<Y[]>(defaultValues)\n  const prevValues = useRef<Y[]>(defaultValues)\n  const cloneChildren = useMemo(\n    () =>\n      values.map((value) => {\n        if (hasChildren) {\n          return childMap[serializeValue(value)]\n        } else {\n          const props = itemMap[serializeValue(value)]\n\n          return props && item\n            ? cloneElement(item, { key: serializeValue(props.value), ...props })\n            : null\n        }\n      }),\n    [values, hasChildren, childMap, itemMap, item],\n  )\n\n  const onReorder = useCallback(\n    (newValues: Y[]) => {\n      setValues(newValues)\n\n      onChange?.(newValues)\n    },\n    [onChange],\n  )\n\n  const onCompleteReorder = useCallback(() => {\n    const equal = JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n    if (equal) return\n\n    prevValues.current = values\n\n    onCompleteChange?.(values)\n  }, [onCompleteChange, values])\n\n  useUpdateEffect(() => {\n    const equal =\n      JSON.stringify(defaultValues) ===\n      JSON.stringify(prevDefaultValues.current)\n\n    if (equal) return\n\n    prevValues.current = defaultValues\n    prevDefaultValues.current = defaultValues\n\n    setValues(defaultValues)\n  }, [defaultValues])\n\n  const getRootProps: PropGetter<\n    Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n    undefined,\n    ReorderGroupProps<Y>\n  > = useCallback(\n    (props = {}) =>\n      mergeProps(\n        { axis, values },\n        rest,\n        props,\n        { ref },\n        {\n          onMouseUp: onCompleteReorder,\n          onReorder,\n          onTouchEnd: onCompleteReorder,\n        },\n      )(),\n    [rest, ref, onCompleteReorder, onReorder, axis, values],\n  )\n\n  return { children: cloneChildren, orientation, values, getRootProps }\n}\n\nexport type UseReorderReturn<Y = string> = ReturnType<typeof useReorder<Y>>\n\nexport interface UseReorderItemProps<Y = string> extends ReorderItemProps<Y> {\n  /**\n   * The label of the reorder item.\n   */\n  label?: ReactNode\n  /**\n   * The value of the reorder item.\n   */\n  value?: Y\n}\n\nexport const useReorderItem = <Y = string>({\n  ref,\n  label,\n  value,\n  ...rest\n}: UseReorderItemProps<Y>) => {\n  const { orientation } = useReorderContext()\n  const dragControls = useDragControls()\n  const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n  const [drag, setDrag] = useState<boolean>(false)\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n\n  const register = useCallback(\n    (node: HTMLElement | null) => setHasTrigger(!!node),\n    [],\n  )\n\n  useEffect(() => {\n    const unsubscribeX = x.on(\"change\", (x) => {\n      if (orientation === \"horizontal\") setDrag(x !== 0)\n    })\n    const unsubscribeY = y.on(\"change\", (y) => {\n      if (orientation === \"vertical\") setDrag(y !== 0)\n    })\n\n    return () => {\n      unsubscribeX()\n      unsubscribeY()\n    }\n  }, [orientation, x, y])\n\n  const getItemProps: PropGetter<\n    Omit<HTMLMotionProps<\"li\">, \"layout\" | \"value\"> &\n      Pick<ReorderItemProps<Y>, \"layout\">,\n    undefined,\n    ReorderItemProps<Y>\n  > = useCallback(\n    (props = {}) => {\n      const children = props.children ?? rest.children ?? label\n\n      const merged = mergeProps(\n        {\n          \"data-has-trigger\": dataAttr(hasTrigger),\n          \"data-selected\": dataAttr(drag),\n          dragControls,\n          dragListener: !hasTrigger,\n          value: value ?? getAlternativeValue({ children }),\n        },\n        props,\n        rest,\n        { ref },\n      )()\n\n      return {\n        ...merged,\n        style: { x, y, ...props.style, ...rest.style },\n        children,\n      }\n    },\n    [ref, rest, dragControls, hasTrigger, value, x, y, drag, label],\n  )\n\n  const getTriggerProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      ref: mergeRefs(register, props.ref),\n      \"data-selected\": dataAttr(drag),\n      onPointerDown: handlerAll(props.onPointerDown, (ev) =>\n        dragControls.start(ev),\n      ),\n    }),\n    [drag, dragControls, register],\n  )\n\n  return { getItemProps, getTriggerProps }\n}\n\nexport type UseReorderItemReturn<Y = string> = ReturnType<\n  typeof useReorderItem<Y>\n>\n"],"mappings":"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"}

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

@@ -5,6 +5,8 @@ import { createContext as createContext$1 } from "../../utils/context.js";
 import { useUpdateEffect } from "../../utils/effect.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 { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDragControls, useMotionValue } from "motion/react";
 
@@ -71,16 +73,14 @@ const useReorder = ({ ref, children, item, items = [], orientation = "vertical",
 		children: cloneChildren,
 		orientation,
 		values,
-		getRootProps: useCallback((props = {}) => ({
+		getRootProps: useCallback((props = {}) => mergeProps({
 			axis,
-			values,
-			...rest,
-			...props,
-			ref: mergeRefs(props.ref, ref),
-			onMouseUp: (0, utils_exports.handlerAll)(props.onMouseUp, rest.onMouseUp, onCompleteReorder),
-			onReorder: (0, utils_exports.handlerAll)(props.onReorder, rest.onReorder, onReorder),
-			onTouchEnd: (0, utils_exports.handlerAll)(props.onTouchEnd, rest.onTouchEnd, onCompleteReorder)
-		}), [
+			values
+		}, rest, props, { ref }, {
+			onMouseUp: onCompleteReorder,
+			onReorder,
+			onTouchEnd: onCompleteReorder
+		})(), [
 			rest,
 			ref,
 			onCompleteReorder,
@@ -118,14 +118,13 @@ const useReorderItem = ({ ref, label, value, ...rest }) => {
 		getItemProps: useCallback((props = {}) => {
 			const children = props.children ?? rest.children ?? label;
 			return {
-				"data-has-trigger": (0, utils_exports.dataAttr)(hasTrigger),
-				"data-selected": (0, utils_exports.dataAttr)(drag),
-				dragControls,
-				dragListener: !hasTrigger,
-				value: value ?? getAlternativeValue({ children }),
-				...props,
-				...rest,
-				ref: mergeRefs(props.ref, ref),
+				...mergeProps({
+					"data-has-trigger": (0, utils_exports.dataAttr)(hasTrigger),
+					"data-selected": (0, utils_exports.dataAttr)(drag),
+					dragControls,
+					dragListener: !hasTrigger,
+					value: value ?? getAlternativeValue({ children })
+				}, props, rest, { ref })(),
 				style: {
 					x,
 					y,

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

@@ -1 +1 @@
-{"version":3,"file":"use-reorder.js","names":["createContext","values","x","y"],"sources":["../../../../src/components/reorder/use-reorder.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLMotionProps, Reorder } from \"motion/react\"\nimport type { PropsWithChildren, ReactElement, ReactNode } from \"react\"\nimport type { Orientation, PropGetter } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport { useDragControls, useMotionValue } from \"motion/react\"\nimport {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isObject,\n  mergeRefs,\n  useUpdateEffect,\n  useValidChildren,\n} from \"../../utils\"\n\nconst getAlternativeValue = ({ children, label }: Dict = {}) =>\n  serializeValue(children ?? label)\n\nconst serializeValue = (value: any) =>\n  isObject(value) || isArray(value) ? JSON.stringify(value) : value\n\ntype ReorderGroupProps<Y = string> = Merge<\n  HTMLMotionProps<\"ul\">,\n  Pick<Parameters<typeof Reorder.Group<Y>>[0], \"axis\" | \"onReorder\" | \"values\">\n>\ntype ReorderItemProps<Y = string> = Merge<\n  HTMLMotionProps<\"li\">,\n  Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], \"layout\" | \"value\">>\n>\n\ninterface ReorderContext extends Pick<UseReorderProps, \"orientation\"> {}\n\nconst [ReorderContext, useReorderContext] = createContext<ReorderContext>({\n  name: \"ReorderContext\",\n})\n\nexport { ReorderContext, useReorderContext }\n\ninterface ReorderItemContext {\n  getTriggerProps: PropGetter\n}\n\nconst [ReorderItemContext, useReorderItemContext] =\n  createContext<ReorderItemContext>({\n    name: \"ReorderItemContext\",\n  })\n\nexport { ReorderItemContext, useReorderItemContext }\n\nexport interface UseReorderProps<Y = string>\n  extends\n    Partial<Omit<ReorderGroupProps<Y>, \"children\" | \"onChange\" | \"values\">>,\n    PropsWithChildren {\n  /**\n   * The component to be used for the item.\n   */\n  item?: ReactElement<any>\n  /**\n   * If provided, generate reorder items based on items.\n   *\n   */\n  items?: UseReorderItemProps<Y>[]\n  /**\n   * The orientation of the reorder.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * The callback invoked when reorder items are moved.\n   */\n  onChange?: (values: Y[]) => void\n  /**\n   * The callback invoked when the movement of reorder items is completed.\n   */\n  onCompleteChange?: (values: Y[]) => void\n}\n\nexport const useReorder = <Y = string>({\n  ref,\n  children,\n  item,\n  items = [],\n  orientation = \"vertical\",\n  onChange,\n  onCompleteChange,\n  ...rest\n}: UseReorderProps<Y> = {}) => {\n  const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n  const validChildren = useValidChildren(children)\n  const hasChildren = !!validChildren.length\n  const defaultValues = useMemo(() => {\n    const values = hasChildren\n      ? validChildren.map(\n          ({ props }) => props.value ?? getAlternativeValue(props),\n        )\n      : items.map((props) => props.value ?? getAlternativeValue(props))\n\n    const duplicatedValues = values.filter(\n      (value, index, self) =>\n        self.indexOf(value) === index && index !== self.lastIndexOf(value),\n    )\n\n    if (duplicatedValues.length)\n      console.warn(\n        `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n          `', '`,\n        )}' `,\n      )\n\n    return Array.from(new Set(values))\n  }, [hasChildren, validChildren, items])\n  const childMap = useMemo(() => {\n    return Object.fromEntries(\n      validChildren.map((child) => [\n        serializeValue(child.props.value) ??\n          serializeValue(getAlternativeValue(child.props)),\n        child,\n      ]),\n    )\n  }, [validChildren])\n  const itemMap = useMemo(() => {\n    return Object.fromEntries(\n      items.map((props) => [\n        serializeValue(props.value) ??\n          serializeValue(getAlternativeValue(props)),\n        props,\n      ]),\n    )\n  }, [items])\n  const prevDefaultValues = useRef<Y[]>(defaultValues)\n  const [values, setValues] = useState<Y[]>(defaultValues)\n  const prevValues = useRef<Y[]>(defaultValues)\n  const cloneChildren = useMemo(\n    () =>\n      values.map((value) => {\n        if (hasChildren) {\n          return childMap[serializeValue(value)]\n        } else {\n          const props = itemMap[serializeValue(value)]\n\n          return props && item\n            ? cloneElement(item, { key: serializeValue(props.value), ...props })\n            : null\n        }\n      }),\n    [values, hasChildren, childMap, itemMap, item],\n  )\n\n  const onReorder = useCallback(\n    (newValues: Y[]) => {\n      setValues(newValues)\n\n      onChange?.(newValues)\n    },\n    [onChange],\n  )\n\n  const onCompleteReorder = useCallback(() => {\n    const equal = JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n    if (equal) return\n\n    prevValues.current = values\n\n    onCompleteChange?.(values)\n  }, [onCompleteChange, values])\n\n  useUpdateEffect(() => {\n    const equal =\n      JSON.stringify(defaultValues) ===\n      JSON.stringify(prevDefaultValues.current)\n\n    if (equal) return\n\n    prevValues.current = defaultValues\n    prevDefaultValues.current = defaultValues\n\n    setValues(defaultValues)\n  }, [defaultValues])\n\n  const getRootProps: PropGetter<\n    Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n    undefined,\n    ReorderGroupProps<Y>\n  > = useCallback(\n    (props = {}) => ({\n      axis,\n      values,\n      ...rest,\n      ...props,\n      ref: mergeRefs(props.ref, ref),\n      onMouseUp: handlerAll(props.onMouseUp, rest.onMouseUp, onCompleteReorder),\n      onReorder: handlerAll(props.onReorder, rest.onReorder, onReorder),\n      onTouchEnd: handlerAll(\n        props.onTouchEnd,\n        rest.onTouchEnd,\n        onCompleteReorder,\n      ),\n    }),\n    [rest, ref, onCompleteReorder, onReorder, axis, values],\n  )\n\n  return { children: cloneChildren, orientation, values, getRootProps }\n}\n\nexport type UseReorderReturn<Y = string> = ReturnType<typeof useReorder<Y>>\n\nexport interface UseReorderItemProps<Y = string> extends ReorderItemProps<Y> {\n  /**\n   * The label of the reorder item.\n   */\n  label?: ReactNode\n  /**\n   * The value of the reorder item.\n   */\n  value?: Y\n}\n\nexport const useReorderItem = <Y = string>({\n  ref,\n  label,\n  value,\n  ...rest\n}: UseReorderItemProps<Y>) => {\n  const { orientation } = useReorderContext()\n  const dragControls = useDragControls()\n  const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n  const [drag, setDrag] = useState<boolean>(false)\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n\n  const register = useCallback(\n    (node: HTMLElement | null) => setHasTrigger(!!node),\n    [],\n  )\n\n  useEffect(() => {\n    const unsubscribeX = x.on(\"change\", (x) => {\n      if (orientation === \"horizontal\") setDrag(x !== 0)\n    })\n    const unsubscribeY = y.on(\"change\", (y) => {\n      if (orientation === \"vertical\") setDrag(y !== 0)\n    })\n\n    return () => {\n      unsubscribeX()\n      unsubscribeY()\n    }\n  }, [orientation, x, y])\n\n  const getItemProps: PropGetter<\n    Omit<HTMLMotionProps<\"li\">, \"layout\" | \"value\"> &\n      Pick<ReorderItemProps<Y>, \"layout\">,\n    undefined,\n    ReorderItemProps<Y>\n  > = useCallback(\n    (props = {}) => {\n      const children = props.children ?? rest.children ?? label\n\n      return {\n        \"data-has-trigger\": dataAttr(hasTrigger),\n        \"data-selected\": dataAttr(drag),\n        dragControls,\n        dragListener: !hasTrigger,\n        value: value ?? getAlternativeValue({ children }),\n        ...props,\n        ...rest,\n        ref: mergeRefs(props.ref, ref),\n        style: { x, y, ...props.style, ...rest.style },\n        children,\n      }\n    },\n    [ref, rest, dragControls, hasTrigger, value, x, y, drag, label],\n  )\n\n  const getTriggerProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      ref: mergeRefs(register, props.ref),\n      \"data-selected\": dataAttr(drag),\n      onPointerDown: handlerAll(props.onPointerDown, (ev) =>\n        dragControls.start(ev),\n      ),\n    }),\n    [drag, dragControls, register],\n  )\n\n  return { getItemProps, getTriggerProps }\n}\n\nexport type UseReorderItemReturn<Y = string> = ReturnType<\n  typeof useReorderItem<Y>\n>\n"],"mappings":"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"}
+{"version":3,"file":"use-reorder.js","names":["createContext","values","x","y"],"sources":["../../../../src/components/reorder/use-reorder.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLMotionProps, Reorder } from \"motion/react\"\nimport type { PropsWithChildren, ReactElement, ReactNode } from \"react\"\nimport type { Orientation, PropGetter } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport { useDragControls, useMotionValue } from \"motion/react\"\nimport {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { mergeProps } from \"../../core\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isObject,\n  mergeRefs,\n  useUpdateEffect,\n  useValidChildren,\n} from \"../../utils\"\n\nconst getAlternativeValue = ({ children, label }: Dict = {}) =>\n  serializeValue(children ?? label)\n\nconst serializeValue = (value: any) =>\n  isObject(value) || isArray(value) ? JSON.stringify(value) : value\n\ntype ReorderGroupProps<Y = string> = Merge<\n  HTMLMotionProps<\"ul\">,\n  Pick<Parameters<typeof Reorder.Group<Y>>[0], \"axis\" | \"onReorder\" | \"values\">\n>\ntype ReorderItemProps<Y = string> = Merge<\n  HTMLMotionProps<\"li\">,\n  Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], \"layout\" | \"value\">>\n>\n\ninterface ReorderContext extends Pick<UseReorderProps, \"orientation\"> {}\n\nconst [ReorderContext, useReorderContext] = createContext<ReorderContext>({\n  name: \"ReorderContext\",\n})\n\nexport { ReorderContext, useReorderContext }\n\ninterface ReorderItemContext {\n  getTriggerProps: PropGetter\n}\n\nconst [ReorderItemContext, useReorderItemContext] =\n  createContext<ReorderItemContext>({\n    name: \"ReorderItemContext\",\n  })\n\nexport { ReorderItemContext, useReorderItemContext }\n\nexport interface UseReorderProps<Y = string>\n  extends\n    Partial<Omit<ReorderGroupProps<Y>, \"children\" | \"onChange\" | \"values\">>,\n    PropsWithChildren {\n  /**\n   * The component to be used for the item.\n   */\n  item?: ReactElement<any>\n  /**\n   * If provided, generate reorder items based on items.\n   *\n   */\n  items?: UseReorderItemProps<Y>[]\n  /**\n   * The orientation of the reorder.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * The callback invoked when reorder items are moved.\n   */\n  onChange?: (values: Y[]) => void\n  /**\n   * The callback invoked when the movement of reorder items is completed.\n   */\n  onCompleteChange?: (values: Y[]) => void\n}\n\nexport const useReorder = <Y = string>({\n  ref,\n  children,\n  item,\n  items = [],\n  orientation = \"vertical\",\n  onChange,\n  onCompleteChange,\n  ...rest\n}: UseReorderProps<Y> = {}) => {\n  const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n  const validChildren = useValidChildren(children)\n  const hasChildren = !!validChildren.length\n  const defaultValues = useMemo(() => {\n    const values = hasChildren\n      ? validChildren.map(\n          ({ props }) => props.value ?? getAlternativeValue(props),\n        )\n      : items.map((props) => props.value ?? getAlternativeValue(props))\n\n    const duplicatedValues = values.filter(\n      (value, index, self) =>\n        self.indexOf(value) === index && index !== self.lastIndexOf(value),\n    )\n\n    if (duplicatedValues.length)\n      console.warn(\n        `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n          `', '`,\n        )}' `,\n      )\n\n    return Array.from(new Set(values))\n  }, [hasChildren, validChildren, items])\n  const childMap = useMemo(() => {\n    return Object.fromEntries(\n      validChildren.map((child) => [\n        serializeValue(child.props.value) ??\n          serializeValue(getAlternativeValue(child.props)),\n        child,\n      ]),\n    )\n  }, [validChildren])\n  const itemMap = useMemo(() => {\n    return Object.fromEntries(\n      items.map((props) => [\n        serializeValue(props.value) ??\n          serializeValue(getAlternativeValue(props)),\n        props,\n      ]),\n    )\n  }, [items])\n  const prevDefaultValues = useRef<Y[]>(defaultValues)\n  const [values, setValues] = useState<Y[]>(defaultValues)\n  const prevValues = useRef<Y[]>(defaultValues)\n  const cloneChildren = useMemo(\n    () =>\n      values.map((value) => {\n        if (hasChildren) {\n          return childMap[serializeValue(value)]\n        } else {\n          const props = itemMap[serializeValue(value)]\n\n          return props && item\n            ? cloneElement(item, { key: serializeValue(props.value), ...props })\n            : null\n        }\n      }),\n    [values, hasChildren, childMap, itemMap, item],\n  )\n\n  const onReorder = useCallback(\n    (newValues: Y[]) => {\n      setValues(newValues)\n\n      onChange?.(newValues)\n    },\n    [onChange],\n  )\n\n  const onCompleteReorder = useCallback(() => {\n    const equal = JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n    if (equal) return\n\n    prevValues.current = values\n\n    onCompleteChange?.(values)\n  }, [onCompleteChange, values])\n\n  useUpdateEffect(() => {\n    const equal =\n      JSON.stringify(defaultValues) ===\n      JSON.stringify(prevDefaultValues.current)\n\n    if (equal) return\n\n    prevValues.current = defaultValues\n    prevDefaultValues.current = defaultValues\n\n    setValues(defaultValues)\n  }, [defaultValues])\n\n  const getRootProps: PropGetter<\n    Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n    undefined,\n    ReorderGroupProps<Y>\n  > = useCallback(\n    (props = {}) =>\n      mergeProps(\n        { axis, values },\n        rest,\n        props,\n        { ref },\n        {\n          onMouseUp: onCompleteReorder,\n          onReorder,\n          onTouchEnd: onCompleteReorder,\n        },\n      )(),\n    [rest, ref, onCompleteReorder, onReorder, axis, values],\n  )\n\n  return { children: cloneChildren, orientation, values, getRootProps }\n}\n\nexport type UseReorderReturn<Y = string> = ReturnType<typeof useReorder<Y>>\n\nexport interface UseReorderItemProps<Y = string> extends ReorderItemProps<Y> {\n  /**\n   * The label of the reorder item.\n   */\n  label?: ReactNode\n  /**\n   * The value of the reorder item.\n   */\n  value?: Y\n}\n\nexport const useReorderItem = <Y = string>({\n  ref,\n  label,\n  value,\n  ...rest\n}: UseReorderItemProps<Y>) => {\n  const { orientation } = useReorderContext()\n  const dragControls = useDragControls()\n  const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n  const [drag, setDrag] = useState<boolean>(false)\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n\n  const register = useCallback(\n    (node: HTMLElement | null) => setHasTrigger(!!node),\n    [],\n  )\n\n  useEffect(() => {\n    const unsubscribeX = x.on(\"change\", (x) => {\n      if (orientation === \"horizontal\") setDrag(x !== 0)\n    })\n    const unsubscribeY = y.on(\"change\", (y) => {\n      if (orientation === \"vertical\") setDrag(y !== 0)\n    })\n\n    return () => {\n      unsubscribeX()\n      unsubscribeY()\n    }\n  }, [orientation, x, y])\n\n  const getItemProps: PropGetter<\n    Omit<HTMLMotionProps<\"li\">, \"layout\" | \"value\"> &\n      Pick<ReorderItemProps<Y>, \"layout\">,\n    undefined,\n    ReorderItemProps<Y>\n  > = useCallback(\n    (props = {}) => {\n      const children = props.children ?? rest.children ?? label\n\n      const merged = mergeProps(\n        {\n          \"data-has-trigger\": dataAttr(hasTrigger),\n          \"data-selected\": dataAttr(drag),\n          dragControls,\n          dragListener: !hasTrigger,\n          value: value ?? getAlternativeValue({ children }),\n        },\n        props,\n        rest,\n        { ref },\n      )()\n\n      return {\n        ...merged,\n        style: { x, y, ...props.style, ...rest.style },\n        children,\n      }\n    },\n    [ref, rest, dragControls, hasTrigger, value, x, y, drag, label],\n  )\n\n  const getTriggerProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      ref: mergeRefs(register, props.ref),\n      \"data-selected\": dataAttr(drag),\n      onPointerDown: handlerAll(props.onPointerDown, (ev) =>\n        dragControls.start(ev),\n      ),\n    }),\n    [drag, dragControls, register],\n  )\n\n  return { getItemProps, getTriggerProps }\n}\n\nexport type UseReorderItemReturn<Y = string> = ReturnType<\n  typeof useReorderItem<Y>\n>\n"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import { AlphaSliderStyle } from "./alpha-slider.style.js";
 import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
 import "../../index.js";
-import * as react147 from "react";
+import * as react268 from "react";
 
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -37,7 +37,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react147.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react268.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 react1220 from "react";
+import * as react267 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: react1220.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react267.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
 /**
  * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
  *

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

@@ -10,7 +10,7 @@ import { InputElementProps } from "../input/input-element.js";
 import { InputGroupRootProps } from "../input/input-group.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react1213 from "react";
+import * as react246 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -66,7 +66,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react1213.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react246.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/use-autocomplete.d.ts

@@ -6,7 +6,7 @@ import { FieldProps } from "../field/field.js";
 import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
 import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
 import "../../index.js";
-import * as react1214 from "react";
+import * as react256 from "react";
 import { ChangeEvent, ReactNode } from "react";
 
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -26,7 +26,7 @@ interface AutocompleteFilter {
 }
 type AutocompleteMatcher = typeof index_d_exports.match;
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react1214.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react256.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
 interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
   /**
    * If `true`, the autocomplete will allow custom value.
@@ -154,7 +154,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
     lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react1214.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react256.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -164,8 +164,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react1214.Dispatch<react1214.SetStateAction<string>>;
-  setValue: react1214.Dispatch<react1214.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react256.Dispatch<react256.SetStateAction<string>>;
+  setValue: react256.Dispatch<react256.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 react129 from "react";
+import * as react262 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils2 from "@yamada-ui/utils";
+import * as _yamada_ui_utils3 from "@yamada-ui/utils";
 
 //#region src/components/avatar/avatar.d.ts
 interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarProps {
@@ -25,7 +25,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
    */
   imageProps?: AvatarImageProps;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils2.Dict = _yamada_ui_utils2.Dict<any>>(el: H | react129.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils3.Dict = _yamada_ui_utils3.Dict<any>>(el: H | react262.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -148,7 +148,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react129.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react129.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils2.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" ? react262.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react262.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils3.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -271,7 +271,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils2.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils3.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {

package/dist/types/components/avatar/use-avatar-group.d.ts

@@ -1,6 +1,6 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react127 from "react";
+import * as react265 from "react";
 
 //#region src/components/avatar/use-avatar-group.d.ts
 interface UseAvatarGroupProps extends HTMLProps {
@@ -19,7 +19,7 @@ declare const useAvatarGroup: ({
   reverse,
   ...rest
 }?: UseAvatarGroupProps) => {
-  children: react127.ReactElement<any, string | react127.JSXElementConstructor<any>>[];
+  children: react265.ReactElement<any, string | react265.JSXElementConstructor<any>>[];
   excess: number;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

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

@@ -3,11 +3,11 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { BadgeStyle } from "./badge.style.js";
 import "../../index.js";
-import * as react145 from "react";
+import * as react1157 from "react";
 
 //#region src/components/badge/badge.d.ts
 interface BadgeProps extends HTMLStyledProps<"span">, ThemeProps<BadgeStyle> {}
-declare const BadgePropsContext: react145.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
+declare const BadgePropsContext: react1157.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
 /**
  * `Badge` is a component that emphasizes the status of an item to make it immediately recognizable.
  *

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

@@ -2,7 +2,7 @@ import { CSSProps } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react146 from "react";
+import * as react1158 from "react";
 
 //#region src/components/bleed/bleed.d.ts
 interface BleedProps extends HTMLStyledProps {
@@ -31,7 +31,7 @@ interface BleedProps extends HTMLStyledProps {
    */
   inlineStart?: "full" | CSSProps["marginInlineStart"];
 }
-declare const BleedPropsContext: react146.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
+declare const BleedPropsContext: react1158.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
 /**
  * `Bleed` is a component used to break an element from the boundaries of its container.
  *

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

@@ -3,7 +3,7 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { BlockquoteStyle } from "./blockquote.style.js";
 import "../../index.js";
-import * as react126 from "react";
+import * as react1156 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/blockquote/blockquote.d.ts
@@ -29,7 +29,7 @@ interface BlockquoteRootProps extends Omit<HTMLStyledProps<"figure">, "cite">, T
    */
   contentProps?: HTMLStyledProps<"blockquote">;
 }
-declare const BlockquotePropsContext: react126.Context<Partial<BlockquoteRootProps> | undefined>, useBlockquotePropsContext: () => Partial<BlockquoteRootProps> | undefined;
+declare const BlockquotePropsContext: react1156.Context<Partial<BlockquoteRootProps> | undefined>, useBlockquotePropsContext: () => Partial<BlockquoteRootProps> | undefined;
 /**
  * `Blockquote` is a component that represents a blockquote. By default, it renders a `blockquote` element.
  *