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

package/dist/cjs/components/infinite-scroll-area/infinite-scroll-area.cjs

@@ -40,6 +40,7 @@ const InfiniteScrollArea = withProvider(({ ref, children, disabled, finish: fini
 		ref: require_ref.mergeRefs(rootRef, ref),
 		"aria-busy": "false",
 		role: "feed",
+		tabIndex: 0,
 		...rest,
 		children: [
 			reverse && showTrigger ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InfiniteScrollTrigger, {

package/dist/cjs/components/infinite-scroll-area/infinite-scroll-area.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"infinite-scroll-area.cjs","names":["createSlotComponent","infiniteScrollAreaStyle","useInfiniteScroll","useValue","styled","mergeRefs"],"sources":["../../../../src/components/infinite-scroll-area/infinite-scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { InfiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport type { UseInfiniteScrollProps } from \"./use-infinite-scroll\"\nimport { useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { isNull, mergeRefs } from \"../../utils\"\nimport { infiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport { useInfiniteScroll } from \"./use-infinite-scroll\"\n\nexport interface InfiniteScrollAreaProps\n  extends\n    Omit<HTMLStyledProps, keyof UseInfiniteScrollProps>,\n    Omit<UseInfiniteScrollProps, \"orientation\">,\n    ThemeProps<InfiniteScrollAreaStyle> {\n  /**\n   * The infinite scroll area finish to use.\n   */\n  finish?: ReactNode\n  /**\n   * The infinite scroll area loading to use.\n   */\n  loading?: ReactNode\n  /**\n   * Props for infinite scroll area trigger component.\n   */\n  triggerProps?: HTMLStyledProps\n}\n\nconst {\n  PropsContext: InfiniteScrollAreaPropsContext,\n  usePropsContext: useInfiniteScrollAreaPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<InfiniteScrollAreaProps, InfiniteScrollAreaStyle>(\n  \"infinite-scroll-area\",\n  infiniteScrollAreaStyle,\n)\n\nexport { InfiniteScrollAreaPropsContext, useInfiniteScrollAreaPropsContext }\n\n/**\n * `InfiniteScrollArea` is for providing infinite scroll functionality.\n * This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.\n *\n * @see https://yamada-ui.com/docs/components/infinite-scroll-area\n */\nexport const InfiniteScrollArea = withProvider<\n  \"div\",\n  InfiniteScrollAreaProps,\n  \"orientation\"\n>(\n  ({\n    ref,\n    children,\n    disabled,\n    finish: finishProp,\n    indexRef,\n    initialLoad,\n    loading,\n    orientation: orientationProp,\n    resetRef,\n    reverse,\n    rootMargin,\n    rootRef: rootRefProp,\n    startIndex,\n    threshold,\n    triggerProps,\n    onLoad,\n    ...rest\n  }) => {\n    const rootRef = useRef<HTMLDivElement>(null)\n    const orientation = useValue(orientationProp)\n    const { ref: triggerRef, finish } = useInfiniteScroll({\n      disabled,\n      indexRef,\n      initialLoad,\n      orientation,\n      resetRef,\n      reverse,\n      rootMargin,\n      rootRef: isNull(rootRefProp) ? null : (rootRefProp ?? rootRef),\n      startIndex,\n      threshold,\n      onLoad,\n    })\n    const hasFinish = !!finishProp\n    const showTrigger = !disabled && (hasFinish || !finish)\n\n    return (\n      <styled.div\n        ref={mergeRefs(rootRef, ref)}\n        aria-busy=\"false\"\n        role=\"feed\"\n        {...rest}\n      >\n        {reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n\n        {children}\n\n        {!reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\ninterface InfiniteScrollTriggerProps extends HTMLStyledProps {}\n\nconst InfiniteScrollTrigger = withContext<\"div\", InfiniteScrollTriggerProps>(\n  \"div\",\n  \"trigger\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;AAgCA,MAAM,EACJ,cAAc,gCACd,iBAAiB,mCACjB,aACA,iBACEA,6CACF,wBACAC,2DACD;;;;;;;AAUD,MAAa,qBAAqB,cAK/B,EACC,KACA,UACA,UACA,QAAQ,YACR,UACA,aACA,SACA,aAAa,iBACb,UACA,SACA,YACA,SAAS,aACT,YACA,WACA,cACA,QACA,GAAG,WACC;CACJ,MAAM,4BAAiC,KAAK;CAE5C,MAAM,EAAE,KAAK,YAAY,WAAWC,8CAAkB;EACpD;EACA;EACA;EACA,aALkBC,uCAAS,gBAAgB;EAM3C;EACA;EACA;EACA,uDAAgB,YAAY,GAAG,OAAQ,eAAe;EACtD;EACA;EACA;EACD,CAAC;CAEF,MAAM,cAAc,CAAC,aADH,CAAC,CAAC,cAC2B,CAAC;AAEhD,QACE,4CAACC,uBAAO;EACN,KAAKC,sBAAU,SAAS,IAAI;EAC5B,aAAU;EACV,MAAK;EACL,GAAI;;GAEH,WAAW,cACV,2CAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;GAEH;GAEA,CAAC,WAAW,cACX,2CAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;;GACO;GAGjB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAIH,MAAM,wBAAwB,YAC5B,OACA,UACD,EAAE"}
+{"version":3,"file":"infinite-scroll-area.cjs","names":["createSlotComponent","infiniteScrollAreaStyle","useInfiniteScroll","useValue","styled","mergeRefs"],"sources":["../../../../src/components/infinite-scroll-area/infinite-scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { InfiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport type { UseInfiniteScrollProps } from \"./use-infinite-scroll\"\nimport { useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { isNull, mergeRefs } from \"../../utils\"\nimport { infiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport { useInfiniteScroll } from \"./use-infinite-scroll\"\n\nexport interface InfiniteScrollAreaProps\n  extends\n    Omit<HTMLStyledProps, keyof UseInfiniteScrollProps>,\n    Omit<UseInfiniteScrollProps, \"orientation\">,\n    ThemeProps<InfiniteScrollAreaStyle> {\n  /**\n   * The infinite scroll area finish to use.\n   */\n  finish?: ReactNode\n  /**\n   * The infinite scroll area loading to use.\n   */\n  loading?: ReactNode\n  /**\n   * Props for infinite scroll area trigger component.\n   */\n  triggerProps?: HTMLStyledProps\n}\n\nconst {\n  PropsContext: InfiniteScrollAreaPropsContext,\n  usePropsContext: useInfiniteScrollAreaPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<InfiniteScrollAreaProps, InfiniteScrollAreaStyle>(\n  \"infinite-scroll-area\",\n  infiniteScrollAreaStyle,\n)\n\nexport { InfiniteScrollAreaPropsContext, useInfiniteScrollAreaPropsContext }\n\n/**\n * `InfiniteScrollArea` is for providing infinite scroll functionality.\n * This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.\n *\n * @see https://yamada-ui.com/docs/components/infinite-scroll-area\n */\nexport const InfiniteScrollArea = withProvider<\n  \"div\",\n  InfiniteScrollAreaProps,\n  \"orientation\"\n>(\n  ({\n    ref,\n    children,\n    disabled,\n    finish: finishProp,\n    indexRef,\n    initialLoad,\n    loading,\n    orientation: orientationProp,\n    resetRef,\n    reverse,\n    rootMargin,\n    rootRef: rootRefProp,\n    startIndex,\n    threshold,\n    triggerProps,\n    onLoad,\n    ...rest\n  }) => {\n    const rootRef = useRef<HTMLDivElement>(null)\n    const orientation = useValue(orientationProp)\n    const { ref: triggerRef, finish } = useInfiniteScroll({\n      disabled,\n      indexRef,\n      initialLoad,\n      orientation,\n      resetRef,\n      reverse,\n      rootMargin,\n      rootRef: isNull(rootRefProp) ? null : (rootRefProp ?? rootRef),\n      startIndex,\n      threshold,\n      onLoad,\n    })\n    const hasFinish = !!finishProp\n    const showTrigger = !disabled && (hasFinish || !finish)\n\n    return (\n      <styled.div\n        ref={mergeRefs(rootRef, ref)}\n        aria-busy=\"false\"\n        role=\"feed\"\n        tabIndex={0}\n        {...rest}\n      >\n        {reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n\n        {children}\n\n        {!reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\ninterface InfiniteScrollTriggerProps extends HTMLStyledProps {}\n\nconst InfiniteScrollTrigger = withContext<\"div\", InfiniteScrollTriggerProps>(\n  \"div\",\n  \"trigger\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;AAgCA,MAAM,EACJ,cAAc,gCACd,iBAAiB,mCACjB,aACA,iBACEA,6CACF,wBACAC,2DACD;;;;;;;AAUD,MAAa,qBAAqB,cAK/B,EACC,KACA,UACA,UACA,QAAQ,YACR,UACA,aACA,SACA,aAAa,iBACb,UACA,SACA,YACA,SAAS,aACT,YACA,WACA,cACA,QACA,GAAG,WACC;CACJ,MAAM,4BAAiC,KAAK;CAE5C,MAAM,EAAE,KAAK,YAAY,WAAWC,8CAAkB;EACpD;EACA;EACA;EACA,aALkBC,uCAAS,gBAAgB;EAM3C;EACA;EACA;EACA,uDAAgB,YAAY,GAAG,OAAQ,eAAe;EACtD;EACA;EACA;EACD,CAAC;CAEF,MAAM,cAAc,CAAC,aADH,CAAC,CAAC,cAC2B,CAAC;AAEhD,QACE,4CAACC,uBAAO;EACN,KAAKC,sBAAU,SAAS,IAAI;EAC5B,aAAU;EACV,MAAK;EACL,UAAU;EACV,GAAI;;GAEH,WAAW,cACV,2CAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;GAEH;GAEA,CAAC,WAAW,cACX,2CAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;;GACO;GAGjB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAIH,MAAM,wBAAwB,YAC5B,OACA,UACD,EAAE"}

package/dist/cjs/components/scroll-area/use-scroll-area.cjs

@@ -2,12 +2,13 @@
 
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.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");
 
 //#region src/components/scroll-area/use-scroll-area.ts
-const useScrollArea = ({ id, ref, type = "hover", scrollHideDelay = 1e3, onScrollPositionChange, ...rest } = {}) => {
+const useScrollArea = ({ id, type = "hover", scrollHideDelay = 1e3, onScrollPositionChange, ...rest } = {}) => {
 	const [isHovered, setIsHovered] = (0, react.useState)(false);
 	const [isScrolling, setIsScrolling] = (0, react.useState)(false);
 	const isAlways = type === "always";
@@ -65,48 +66,36 @@ const useScrollArea = ({ id, ref, type = "hover", scrollHideDelay = 1e3, onScrol
 			if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
 		};
 	}, []);
-	const safariProps = (0, react.useMemo)(() => ({
-		key,
-		ref: require_ref.mergeRefs(ref, scrollAreaRef),
-		"data-key": key
-	}), [
-		key,
-		ref,
-		scrollAreaRef
-	]);
 	return {
 		isAlways,
 		isHidden,
 		isHovered,
 		isNever,
 		isScrolling,
-		getRootProps: (0, react.useCallback)(({ style, ...props } = {}) => ({
-			ref,
-			style: {
-				overflow: "auto",
-				...style
-			},
-			...rest,
-			...isSafari ? safariProps : {},
-			...props,
+		getRootProps: (0, react.useCallback)((props = {}) => require_props.mergeProps({
+			style: { overflow: "auto" },
 			"data-hidden": (0, require_utils_index.utils_exports.dataAttr)(isHidden),
 			"data-hover": (0, require_utils_index.utils_exports.dataAttr)(isHovered),
 			"data-never": (0, require_utils_index.utils_exports.dataAttr)(isNever),
 			"data-scroll": (0, require_utils_index.utils_exports.dataAttr)(isScrolling),
-			tabIndex: 0,
-			onMouseEnter: (0, require_utils_index.utils_exports.handlerAll)(props.onMouseEnter, rest.onMouseEnter, onMouseEnter),
-			onMouseLeave: (0, require_utils_index.utils_exports.handlerAll)(props.onMouseLeave, rest.onMouseLeave, onMouseLeave),
-			onPointerEnter: (0, require_utils_index.utils_exports.handlerAll)(props.onPointerEnter, rest.onPointerEnter, onMouseEnter),
-			onPointerLeave: (0, require_utils_index.utils_exports.handlerAll)(props.onPointerLeave, rest.onPointerLeave, onMouseLeave),
-			onScroll: (0, require_utils_index.utils_exports.handlerAll)(props.onScroll, rest.onScroll, onScroll)
-		}), [
+			tabIndex: 0
+		}, isSafari ? {
+			key,
+			ref: scrollAreaRef,
+			"data-key": key
+		} : {}, rest, props, {
+			onMouseEnter,
+			onMouseLeave,
+			onPointerEnter: onMouseEnter,
+			onPointerLeave: onMouseLeave,
+			onScroll
+		})(), [
 			isNever,
-			ref,
 			isHidden,
 			isHovered,
 			isScrolling,
 			isSafari,
-			safariProps,
+			key,
 			rest,
 			onMouseEnter,
 			onMouseLeave,

package/dist/cjs/components/scroll-area/use-scroll-area.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-area.cjs","names":["mergeRefs"],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\"\nimport {\n  dataAttr,\n  handlerAll,\n  isMac,\n  mergeRefs,\n  useSafeLayoutEffect,\n  vendor,\n} from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n  /**\n   * Delay in milliseconds before scrollbars are hidden.\n   *\n   * @default 1000\n   */\n  scrollHideDelay?: number\n  /**\n   * Scrollbar visibility type.\n   *\n   * @default 'hover'\n   */\n  type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n  /**\n   * Callback function for when the scroll position changes.\n   */\n  onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n  id,\n  ref,\n  type = \"hover\",\n  scrollHideDelay = 1000,\n  onScrollPositionChange,\n  ...rest\n}: UseScrollAreaProps = {}) => {\n  const [isHovered, setIsHovered] = useState<boolean>(false)\n  const [isScrolling, setIsScrolling] = useState<boolean>(false)\n  const isAlways = type === \"always\"\n  const isNever = type === \"never\"\n  const isHidden = !isAlways && !isHovered && !isScrolling\n  const isSafari = isMac() && vendor(/apple/i)\n  const uuid = useId()\n  const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n  const hoverTimeout = useRef<any>(undefined)\n  const scrollTimeout = useRef<any>(undefined)\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const scrollPosition = useRef({ x: 0, y: 0 })\n\n  useSafeLayoutEffect(() => {\n    if (!scrollAreaRef.current || !isSafari) return\n\n    scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n    scrollAreaRef.current.scrollTop = scrollPosition.current.y\n  })\n\n  const onMouseEnter = useCallback(() => {\n    if (type !== \"hover\") return\n\n    clearTimeout(hoverTimeout.current)\n\n    setIsHovered(true)\n  }, [type])\n\n  const onMouseLeave = useCallback(() => {\n    if (type !== \"hover\") return\n\n    hoverTimeout.current = setTimeout(\n      () => setIsHovered(false),\n      scrollHideDelay,\n    )\n  }, [scrollHideDelay, type])\n\n  const onScroll = useCallback(\n    (ev: UIEvent<HTMLDivElement>) => {\n      const el = ev.target as HTMLDivElement\n\n      const { scrollLeft: x, scrollTop: y } = el\n      const { x: prevX, y: prevY } = scrollPosition.current\n      const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n      onScrollPositionChange?.({ x, y })\n      scrollPosition.current = { x, y }\n\n      if (type !== \"scroll\" || isEqual) return\n\n      if (!isScrolling) setIsScrolling(true)\n\n      clearTimeout(scrollTimeout.current)\n\n      scrollTimeout.current = setTimeout(\n        () => setIsScrolling(false),\n        scrollHideDelay,\n      )\n    },\n    [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n  )\n\n  useEffect(() => {\n    return () => {\n      if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n      if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n    }\n  }, [])\n\n  const safariProps = useMemo(\n    () => ({\n      key,\n      ref: mergeRefs(ref, scrollAreaRef),\n      \"data-key\": key,\n    }),\n    [key, ref, scrollAreaRef],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    ({ style, ...props } = {}) => ({\n      ref,\n      style: { overflow: \"auto\", ...style },\n      ...rest,\n      ...(isSafari ? safariProps : {}),\n      ...props,\n      \"data-hidden\": dataAttr(isHidden),\n      \"data-hover\": dataAttr(isHovered),\n      \"data-never\": dataAttr(isNever),\n      \"data-scroll\": dataAttr(isScrolling),\n      tabIndex: 0,\n      onMouseEnter: handlerAll(\n        props.onMouseEnter,\n        rest.onMouseEnter,\n        onMouseEnter,\n      ),\n      onMouseLeave: handlerAll(\n        props.onMouseLeave,\n        rest.onMouseLeave,\n        onMouseLeave,\n      ),\n      onPointerEnter: handlerAll(\n        props.onPointerEnter,\n        rest.onPointerEnter,\n        onMouseEnter,\n      ),\n      onPointerLeave: handlerAll(\n        props.onPointerLeave,\n        rest.onPointerLeave,\n        onMouseLeave,\n      ),\n      onScroll: handlerAll(props.onScroll, rest.onScroll, onScroll),\n    }),\n    [\n      isNever,\n      ref,\n      isHidden,\n      isHovered,\n      isScrolling,\n      isSafari,\n      safariProps,\n      rest,\n      onMouseEnter,\n      onMouseLeave,\n      onScroll,\n    ],\n  )\n\n  return {\n    isAlways,\n    isHidden,\n    isHovered,\n    isNever,\n    isScrolling,\n    getRootProps,\n  }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":";;;;;;;;;AAiCA,MAAa,iBAAiB,EAC5B,IACA,KACA,OAAO,SACP,kBAAkB,KAClB,wBACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,CAAC,WAAW,oCAAkC,MAAM;CAC1D,MAAM,CAAC,aAAa,sCAAoC,MAAM;CAC9D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,yDAAkB,kDAAW,SAAS;CAC5C,MAAM,yBAAc;CACpB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,iCAA2B,OAAU;CAC3C,MAAM,kCAA4B,OAAU;CAC5C,MAAM,kCAAuC,KAAK;CAClD,MAAM,mCAAwB;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAE7C,0CAA0B;AACxB,MAAI,CAAC,cAAc,WAAW,CAAC,SAAU;AAEzC,gBAAc,QAAQ,aAAa,eAAe,QAAQ;AAC1D,gBAAc,QAAQ,YAAY,eAAe,QAAQ;GACzD;CAEF,MAAM,4CAAiC;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,aAAa,QAAQ;AAElC,eAAa,KAAK;IACjB,CAAC,KAAK,CAAC;CAEV,MAAM,4CAAiC;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,UAAU,iBACf,aAAa,MAAM,EACzB,gBACD;IACA,CAAC,iBAAiB,KAAK,CAAC;CAE3B,MAAM,mCACH,OAAgC;EAG/B,MAAM,EAAE,YAAY,GAAG,WAAW,MAFvB,GAAG;EAGd,MAAM,EAAE,GAAG,OAAO,GAAG,UAAU,eAAe;EAC9C,MAAM,UAAU,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI;AAEnE,2BAAyB;GAAE;GAAG;GAAG,CAAC;AAClC,iBAAe,UAAU;GAAE;GAAG;GAAG;AAEjC,MAAI,SAAS,YAAY,QAAS;AAElC,MAAI,CAAC,YAAa,gBAAe,KAAK;AAEtC,eAAa,cAAc,QAAQ;AAEnC,gBAAc,UAAU,iBAChB,eAAe,MAAM,EAC3B,gBACD;IAEH;EAAC;EAAa;EAAwB;EAAiB;EAAK,CAC7D;AAED,4BAAgB;AACd,eAAa;AACX,OAAI,aAAa,QAAS,cAAa,aAAa,QAAQ;AAC5D,OAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;;IAE/D,EAAE,CAAC;CAEN,MAAM,wCACG;EACL;EACA,KAAKA,sBAAU,KAAK,cAAc;EAClC,YAAY;EACb,GACD;EAAC;EAAK;EAAK;EAAc,CAC1B;AAmDD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA,sCAtDC,EAAE,OAAO,GAAG,UAAU,EAAE,MAAM;GAC7B;GACA,OAAO;IAAE,UAAU;IAAQ,GAAG;IAAO;GACrC,GAAG;GACH,GAAI,WAAW,cAAc,EAAE;GAC/B,GAAG;GACH,+DAAwB,SAAS;GACjC,8DAAuB,UAAU;GACjC,8DAAuB,QAAQ;GAC/B,+DAAwB,YAAY;GACpC,UAAU;GACV,gEACE,MAAM,cACN,KAAK,cACL,aACD;GACD,gEACE,MAAM,cACN,KAAK,cACL,aACD;GACD,kEACE,MAAM,gBACN,KAAK,gBACL,aACD;GACD,kEACE,MAAM,gBACN,KAAK,gBACL,aACD;GACD,4DAAqB,MAAM,UAAU,KAAK,UAAU,SAAS;GAC9D,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EASA"}
+{"version":3,"file":"use-scroll-area.cjs","names":["mergeProps"],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { dataAttr, isMac, useSafeLayoutEffect, vendor } from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n  /**\n   * Delay in milliseconds before scrollbars are hidden.\n   *\n   * @default 1000\n   */\n  scrollHideDelay?: number\n  /**\n   * Scrollbar visibility type.\n   *\n   * @default 'hover'\n   */\n  type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n  /**\n   * Callback function for when the scroll position changes.\n   */\n  onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n  id,\n  type = \"hover\",\n  scrollHideDelay = 1000,\n  onScrollPositionChange,\n  ...rest\n}: UseScrollAreaProps = {}) => {\n  const [isHovered, setIsHovered] = useState<boolean>(false)\n  const [isScrolling, setIsScrolling] = useState<boolean>(false)\n  const isAlways = type === \"always\"\n  const isNever = type === \"never\"\n  const isHidden = !isAlways && !isHovered && !isScrolling\n  const isSafari = isMac() && vendor(/apple/i)\n  const uuid = useId()\n  const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n  const hoverTimeout = useRef<any>(undefined)\n  const scrollTimeout = useRef<any>(undefined)\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const scrollPosition = useRef({ x: 0, y: 0 })\n\n  useSafeLayoutEffect(() => {\n    if (!scrollAreaRef.current || !isSafari) return\n\n    scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n    scrollAreaRef.current.scrollTop = scrollPosition.current.y\n  })\n\n  const onMouseEnter = useCallback(() => {\n    if (type !== \"hover\") return\n\n    clearTimeout(hoverTimeout.current)\n\n    setIsHovered(true)\n  }, [type])\n\n  const onMouseLeave = useCallback(() => {\n    if (type !== \"hover\") return\n\n    hoverTimeout.current = setTimeout(\n      () => setIsHovered(false),\n      scrollHideDelay,\n    )\n  }, [scrollHideDelay, type])\n\n  const onScroll = useCallback(\n    (ev: UIEvent<HTMLDivElement>) => {\n      const el = ev.target as HTMLDivElement\n\n      const { scrollLeft: x, scrollTop: y } = el\n      const { x: prevX, y: prevY } = scrollPosition.current\n      const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n      onScrollPositionChange?.({ x, y })\n      scrollPosition.current = { x, y }\n\n      if (type !== \"scroll\" || isEqual) return\n\n      if (!isScrolling) setIsScrolling(true)\n\n      clearTimeout(scrollTimeout.current)\n\n      scrollTimeout.current = setTimeout(\n        () => setIsScrolling(false),\n        scrollHideDelay,\n      )\n    },\n    [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n  )\n\n  useEffect(() => {\n    return () => {\n      if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n      if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n    }\n  }, [])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        {\n          style: { overflow: \"auto\" },\n          \"data-hidden\": dataAttr(isHidden),\n          \"data-hover\": dataAttr(isHovered),\n          \"data-never\": dataAttr(isNever),\n          \"data-scroll\": dataAttr(isScrolling),\n          tabIndex: 0,\n        },\n        isSafari ? { key, ref: scrollAreaRef, \"data-key\": key } : {},\n        rest,\n        props,\n        {\n          onMouseEnter,\n          onMouseLeave,\n          onPointerEnter: onMouseEnter,\n          onPointerLeave: onMouseLeave,\n          onScroll,\n        },\n      )(),\n    [\n      isNever,\n      isHidden,\n      isHovered,\n      isScrolling,\n      isSafari,\n      key,\n      rest,\n      onMouseEnter,\n      onMouseLeave,\n      onScroll,\n    ],\n  )\n\n  return {\n    isAlways,\n    isHidden,\n    isHovered,\n    isNever,\n    isScrolling,\n    getRootProps,\n  }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":";;;;;;;;;;AA2BA,MAAa,iBAAiB,EAC5B,IACA,OAAO,SACP,kBAAkB,KAClB,wBACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,CAAC,WAAW,oCAAkC,MAAM;CAC1D,MAAM,CAAC,aAAa,sCAAoC,MAAM;CAC9D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,yDAAkB,kDAAW,SAAS;CAC5C,MAAM,yBAAc;CACpB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,iCAA2B,OAAU;CAC3C,MAAM,kCAA4B,OAAU;CAC5C,MAAM,kCAAuC,KAAK;CAClD,MAAM,mCAAwB;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAE7C,0CAA0B;AACxB,MAAI,CAAC,cAAc,WAAW,CAAC,SAAU;AAEzC,gBAAc,QAAQ,aAAa,eAAe,QAAQ;AAC1D,gBAAc,QAAQ,YAAY,eAAe,QAAQ;GACzD;CAEF,MAAM,4CAAiC;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,aAAa,QAAQ;AAElC,eAAa,KAAK;IACjB,CAAC,KAAK,CAAC;CAEV,MAAM,4CAAiC;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,UAAU,iBACf,aAAa,MAAM,EACzB,gBACD;IACA,CAAC,iBAAiB,KAAK,CAAC;CAE3B,MAAM,mCACH,OAAgC;EAG/B,MAAM,EAAE,YAAY,GAAG,WAAW,MAFvB,GAAG;EAGd,MAAM,EAAE,GAAG,OAAO,GAAG,UAAU,eAAe;EAC9C,MAAM,UAAU,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI;AAEnE,2BAAyB;GAAE;GAAG;GAAG,CAAC;AAClC,iBAAe,UAAU;GAAE;GAAG;GAAG;AAEjC,MAAI,SAAS,YAAY,QAAS;AAElC,MAAI,CAAC,YAAa,gBAAe,KAAK;AAEtC,eAAa,cAAc,QAAQ;AAEnC,gBAAc,UAAU,iBAChB,eAAe,MAAM,EAC3B,gBACD;IAEH;EAAC;EAAa;EAAwB;EAAiB;EAAK,CAC7D;AAED,4BAAgB;AACd,eAAa;AACX,OAAI,aAAa,QAAS,cAAa,aAAa,QAAQ;AAC5D,OAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;;IAE/D,EAAE,CAAC;AAsCN,QAAO;EACL;EACA;EACA;EACA;EACA;EACA,sCAzCC,QAAQ,EAAE,KACTA,yBACE;GACE,OAAO,EAAE,UAAU,QAAQ;GAC3B,+DAAwB,SAAS;GACjC,8DAAuB,UAAU;GACjC,8DAAuB,QAAQ;GAC/B,+DAAwB,YAAY;GACpC,UAAU;GACX,EACD,WAAW;GAAE;GAAK,KAAK;GAAe,YAAY;GAAK,GAAG,EAAE,EAC5D,MACA,OACA;GACE;GACA;GACA,gBAAgB;GAChB,gBAAgB;GAChB;GACD,CACF,EAAE,EACL;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EASA"}

package/dist/esm/components/infinite-scroll-area/infinite-scroll-area.js

@@ -39,6 +39,7 @@ const InfiniteScrollArea = withProvider(({ ref, children, disabled, finish: fini
 		ref: mergeRefs(rootRef, ref),
 		"aria-busy": "false",
 		role: "feed",
+		tabIndex: 0,
 		...rest,
 		children: [
 			reverse && showTrigger ? /* @__PURE__ */ jsx(InfiniteScrollTrigger, {

package/dist/esm/components/infinite-scroll-area/infinite-scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"infinite-scroll-area.js","names":[],"sources":["../../../../src/components/infinite-scroll-area/infinite-scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { InfiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport type { UseInfiniteScrollProps } from \"./use-infinite-scroll\"\nimport { useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { isNull, mergeRefs } from \"../../utils\"\nimport { infiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport { useInfiniteScroll } from \"./use-infinite-scroll\"\n\nexport interface InfiniteScrollAreaProps\n  extends\n    Omit<HTMLStyledProps, keyof UseInfiniteScrollProps>,\n    Omit<UseInfiniteScrollProps, \"orientation\">,\n    ThemeProps<InfiniteScrollAreaStyle> {\n  /**\n   * The infinite scroll area finish to use.\n   */\n  finish?: ReactNode\n  /**\n   * The infinite scroll area loading to use.\n   */\n  loading?: ReactNode\n  /**\n   * Props for infinite scroll area trigger component.\n   */\n  triggerProps?: HTMLStyledProps\n}\n\nconst {\n  PropsContext: InfiniteScrollAreaPropsContext,\n  usePropsContext: useInfiniteScrollAreaPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<InfiniteScrollAreaProps, InfiniteScrollAreaStyle>(\n  \"infinite-scroll-area\",\n  infiniteScrollAreaStyle,\n)\n\nexport { InfiniteScrollAreaPropsContext, useInfiniteScrollAreaPropsContext }\n\n/**\n * `InfiniteScrollArea` is for providing infinite scroll functionality.\n * This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.\n *\n * @see https://yamada-ui.com/docs/components/infinite-scroll-area\n */\nexport const InfiniteScrollArea = withProvider<\n  \"div\",\n  InfiniteScrollAreaProps,\n  \"orientation\"\n>(\n  ({\n    ref,\n    children,\n    disabled,\n    finish: finishProp,\n    indexRef,\n    initialLoad,\n    loading,\n    orientation: orientationProp,\n    resetRef,\n    reverse,\n    rootMargin,\n    rootRef: rootRefProp,\n    startIndex,\n    threshold,\n    triggerProps,\n    onLoad,\n    ...rest\n  }) => {\n    const rootRef = useRef<HTMLDivElement>(null)\n    const orientation = useValue(orientationProp)\n    const { ref: triggerRef, finish } = useInfiniteScroll({\n      disabled,\n      indexRef,\n      initialLoad,\n      orientation,\n      resetRef,\n      reverse,\n      rootMargin,\n      rootRef: isNull(rootRefProp) ? null : (rootRefProp ?? rootRef),\n      startIndex,\n      threshold,\n      onLoad,\n    })\n    const hasFinish = !!finishProp\n    const showTrigger = !disabled && (hasFinish || !finish)\n\n    return (\n      <styled.div\n        ref={mergeRefs(rootRef, ref)}\n        aria-busy=\"false\"\n        role=\"feed\"\n        {...rest}\n      >\n        {reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n\n        {children}\n\n        {!reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\ninterface InfiniteScrollTriggerProps extends HTMLStyledProps {}\n\nconst InfiniteScrollTrigger = withContext<\"div\", InfiniteScrollTriggerProps>(\n  \"div\",\n  \"trigger\",\n)()\n"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAM,EACJ,cAAc,gCACd,iBAAiB,mCACjB,aACA,iBACE,oBACF,wBACA,wBACD;;;;;;;AAUD,MAAa,qBAAqB,cAK/B,EACC,KACA,UACA,UACA,QAAQ,YACR,UACA,aACA,SACA,aAAa,iBACb,UACA,SACA,YACA,SAAS,aACT,YACA,WACA,cACA,QACA,GAAG,WACC;CACJ,MAAM,UAAU,OAAuB,KAAK;CAE5C,MAAM,EAAE,KAAK,YAAY,WAAW,kBAAkB;EACpD;EACA;EACA;EACA,aALkB,SAAS,gBAAgB;EAM3C;EACA;EACA;EACA,mCAAgB,YAAY,GAAG,OAAQ,eAAe;EACtD;EACA;EACA;EACD,CAAC;CAEF,MAAM,cAAc,CAAC,aADH,CAAC,CAAC,cAC2B,CAAC;AAEhD,QACE,qBAAC,OAAO;EACN,KAAK,UAAU,SAAS,IAAI;EAC5B,aAAU;EACV,MAAK;EACL,GAAI;;GAEH,WAAW,cACV,oBAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;GAEH;GAEA,CAAC,WAAW,cACX,oBAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;;GACO;GAGjB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAIH,MAAM,wBAAwB,YAC5B,OACA,UACD,EAAE"}
+{"version":3,"file":"infinite-scroll-area.js","names":[],"sources":["../../../../src/components/infinite-scroll-area/infinite-scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { InfiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport type { UseInfiniteScrollProps } from \"./use-infinite-scroll\"\nimport { useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { isNull, mergeRefs } from \"../../utils\"\nimport { infiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport { useInfiniteScroll } from \"./use-infinite-scroll\"\n\nexport interface InfiniteScrollAreaProps\n  extends\n    Omit<HTMLStyledProps, keyof UseInfiniteScrollProps>,\n    Omit<UseInfiniteScrollProps, \"orientation\">,\n    ThemeProps<InfiniteScrollAreaStyle> {\n  /**\n   * The infinite scroll area finish to use.\n   */\n  finish?: ReactNode\n  /**\n   * The infinite scroll area loading to use.\n   */\n  loading?: ReactNode\n  /**\n   * Props for infinite scroll area trigger component.\n   */\n  triggerProps?: HTMLStyledProps\n}\n\nconst {\n  PropsContext: InfiniteScrollAreaPropsContext,\n  usePropsContext: useInfiniteScrollAreaPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<InfiniteScrollAreaProps, InfiniteScrollAreaStyle>(\n  \"infinite-scroll-area\",\n  infiniteScrollAreaStyle,\n)\n\nexport { InfiniteScrollAreaPropsContext, useInfiniteScrollAreaPropsContext }\n\n/**\n * `InfiniteScrollArea` is for providing infinite scroll functionality.\n * This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.\n *\n * @see https://yamada-ui.com/docs/components/infinite-scroll-area\n */\nexport const InfiniteScrollArea = withProvider<\n  \"div\",\n  InfiniteScrollAreaProps,\n  \"orientation\"\n>(\n  ({\n    ref,\n    children,\n    disabled,\n    finish: finishProp,\n    indexRef,\n    initialLoad,\n    loading,\n    orientation: orientationProp,\n    resetRef,\n    reverse,\n    rootMargin,\n    rootRef: rootRefProp,\n    startIndex,\n    threshold,\n    triggerProps,\n    onLoad,\n    ...rest\n  }) => {\n    const rootRef = useRef<HTMLDivElement>(null)\n    const orientation = useValue(orientationProp)\n    const { ref: triggerRef, finish } = useInfiniteScroll({\n      disabled,\n      indexRef,\n      initialLoad,\n      orientation,\n      resetRef,\n      reverse,\n      rootMargin,\n      rootRef: isNull(rootRefProp) ? null : (rootRefProp ?? rootRef),\n      startIndex,\n      threshold,\n      onLoad,\n    })\n    const hasFinish = !!finishProp\n    const showTrigger = !disabled && (hasFinish || !finish)\n\n    return (\n      <styled.div\n        ref={mergeRefs(rootRef, ref)}\n        aria-busy=\"false\"\n        role=\"feed\"\n        tabIndex={0}\n        {...rest}\n      >\n        {reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n\n        {children}\n\n        {!reverse && showTrigger ? (\n          <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n            {finish ? finishProp : loading}\n          </InfiniteScrollTrigger>\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\ninterface InfiniteScrollTriggerProps extends HTMLStyledProps {}\n\nconst InfiniteScrollTrigger = withContext<\"div\", InfiniteScrollTriggerProps>(\n  \"div\",\n  \"trigger\",\n)()\n"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAM,EACJ,cAAc,gCACd,iBAAiB,mCACjB,aACA,iBACE,oBACF,wBACA,wBACD;;;;;;;AAUD,MAAa,qBAAqB,cAK/B,EACC,KACA,UACA,UACA,QAAQ,YACR,UACA,aACA,SACA,aAAa,iBACb,UACA,SACA,YACA,SAAS,aACT,YACA,WACA,cACA,QACA,GAAG,WACC;CACJ,MAAM,UAAU,OAAuB,KAAK;CAE5C,MAAM,EAAE,KAAK,YAAY,WAAW,kBAAkB;EACpD;EACA;EACA;EACA,aALkB,SAAS,gBAAgB;EAM3C;EACA;EACA;EACA,mCAAgB,YAAY,GAAG,OAAQ,eAAe;EACtD;EACA;EACA;EACD,CAAC;CAEF,MAAM,cAAc,CAAC,aADH,CAAC,CAAC,cAC2B,CAAC;AAEhD,QACE,qBAAC,OAAO;EACN,KAAK,UAAU,SAAS,IAAI;EAC5B,aAAU;EACV,MAAK;EACL,UAAU;EACV,GAAI;;GAEH,WAAW,cACV,oBAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;GAEH;GAEA,CAAC,WAAW,cACX,oBAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;;GACO;GAGjB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAIH,MAAM,wBAAwB,YAC5B,OACA,UACD,EAAE"}

package/dist/esm/components/scroll-area/use-scroll-area.js

@@ -1,12 +1,13 @@
 "use client";
 
 import { useSafeLayoutEffect } from "../../utils/effect.js";
-import { mergeRefs } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { mergeProps } from "../../core/components/props.js";
+import "../../core/index.js";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 
 //#region src/components/scroll-area/use-scroll-area.ts
-const useScrollArea = ({ id, ref, type = "hover", scrollHideDelay = 1e3, onScrollPositionChange, ...rest } = {}) => {
+const useScrollArea = ({ id, type = "hover", scrollHideDelay = 1e3, onScrollPositionChange, ...rest } = {}) => {
 	const [isHovered, setIsHovered] = useState(false);
 	const [isScrolling, setIsScrolling] = useState(false);
 	const isAlways = type === "always";
@@ -64,48 +65,36 @@ const useScrollArea = ({ id, ref, type = "hover", scrollHideDelay = 1e3, onScrol
 			if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
 		};
 	}, []);
-	const safariProps = useMemo(() => ({
-		key,
-		ref: mergeRefs(ref, scrollAreaRef),
-		"data-key": key
-	}), [
-		key,
-		ref,
-		scrollAreaRef
-	]);
 	return {
 		isAlways,
 		isHidden,
 		isHovered,
 		isNever,
 		isScrolling,
-		getRootProps: useCallback(({ style, ...props } = {}) => ({
-			ref,
-			style: {
-				overflow: "auto",
-				...style
-			},
-			...rest,
-			...isSafari ? safariProps : {},
-			...props,
+		getRootProps: useCallback((props = {}) => mergeProps({
+			style: { overflow: "auto" },
 			"data-hidden": (0, utils_exports.dataAttr)(isHidden),
 			"data-hover": (0, utils_exports.dataAttr)(isHovered),
 			"data-never": (0, utils_exports.dataAttr)(isNever),
 			"data-scroll": (0, utils_exports.dataAttr)(isScrolling),
-			tabIndex: 0,
-			onMouseEnter: (0, utils_exports.handlerAll)(props.onMouseEnter, rest.onMouseEnter, onMouseEnter),
-			onMouseLeave: (0, utils_exports.handlerAll)(props.onMouseLeave, rest.onMouseLeave, onMouseLeave),
-			onPointerEnter: (0, utils_exports.handlerAll)(props.onPointerEnter, rest.onPointerEnter, onMouseEnter),
-			onPointerLeave: (0, utils_exports.handlerAll)(props.onPointerLeave, rest.onPointerLeave, onMouseLeave),
-			onScroll: (0, utils_exports.handlerAll)(props.onScroll, rest.onScroll, onScroll)
-		}), [
+			tabIndex: 0
+		}, isSafari ? {
+			key,
+			ref: scrollAreaRef,
+			"data-key": key
+		} : {}, rest, props, {
+			onMouseEnter,
+			onMouseLeave,
+			onPointerEnter: onMouseEnter,
+			onPointerLeave: onMouseLeave,
+			onScroll
+		})(), [
 			isNever,
-			ref,
 			isHidden,
 			isHovered,
 			isScrolling,
 			isSafari,
-			safariProps,
+			key,
 			rest,
 			onMouseEnter,
 			onMouseLeave,

package/dist/esm/components/scroll-area/use-scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-area.js","names":[],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\"\nimport {\n  dataAttr,\n  handlerAll,\n  isMac,\n  mergeRefs,\n  useSafeLayoutEffect,\n  vendor,\n} from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n  /**\n   * Delay in milliseconds before scrollbars are hidden.\n   *\n   * @default 1000\n   */\n  scrollHideDelay?: number\n  /**\n   * Scrollbar visibility type.\n   *\n   * @default 'hover'\n   */\n  type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n  /**\n   * Callback function for when the scroll position changes.\n   */\n  onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n  id,\n  ref,\n  type = \"hover\",\n  scrollHideDelay = 1000,\n  onScrollPositionChange,\n  ...rest\n}: UseScrollAreaProps = {}) => {\n  const [isHovered, setIsHovered] = useState<boolean>(false)\n  const [isScrolling, setIsScrolling] = useState<boolean>(false)\n  const isAlways = type === \"always\"\n  const isNever = type === \"never\"\n  const isHidden = !isAlways && !isHovered && !isScrolling\n  const isSafari = isMac() && vendor(/apple/i)\n  const uuid = useId()\n  const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n  const hoverTimeout = useRef<any>(undefined)\n  const scrollTimeout = useRef<any>(undefined)\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const scrollPosition = useRef({ x: 0, y: 0 })\n\n  useSafeLayoutEffect(() => {\n    if (!scrollAreaRef.current || !isSafari) return\n\n    scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n    scrollAreaRef.current.scrollTop = scrollPosition.current.y\n  })\n\n  const onMouseEnter = useCallback(() => {\n    if (type !== \"hover\") return\n\n    clearTimeout(hoverTimeout.current)\n\n    setIsHovered(true)\n  }, [type])\n\n  const onMouseLeave = useCallback(() => {\n    if (type !== \"hover\") return\n\n    hoverTimeout.current = setTimeout(\n      () => setIsHovered(false),\n      scrollHideDelay,\n    )\n  }, [scrollHideDelay, type])\n\n  const onScroll = useCallback(\n    (ev: UIEvent<HTMLDivElement>) => {\n      const el = ev.target as HTMLDivElement\n\n      const { scrollLeft: x, scrollTop: y } = el\n      const { x: prevX, y: prevY } = scrollPosition.current\n      const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n      onScrollPositionChange?.({ x, y })\n      scrollPosition.current = { x, y }\n\n      if (type !== \"scroll\" || isEqual) return\n\n      if (!isScrolling) setIsScrolling(true)\n\n      clearTimeout(scrollTimeout.current)\n\n      scrollTimeout.current = setTimeout(\n        () => setIsScrolling(false),\n        scrollHideDelay,\n      )\n    },\n    [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n  )\n\n  useEffect(() => {\n    return () => {\n      if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n      if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n    }\n  }, [])\n\n  const safariProps = useMemo(\n    () => ({\n      key,\n      ref: mergeRefs(ref, scrollAreaRef),\n      \"data-key\": key,\n    }),\n    [key, ref, scrollAreaRef],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    ({ style, ...props } = {}) => ({\n      ref,\n      style: { overflow: \"auto\", ...style },\n      ...rest,\n      ...(isSafari ? safariProps : {}),\n      ...props,\n      \"data-hidden\": dataAttr(isHidden),\n      \"data-hover\": dataAttr(isHovered),\n      \"data-never\": dataAttr(isNever),\n      \"data-scroll\": dataAttr(isScrolling),\n      tabIndex: 0,\n      onMouseEnter: handlerAll(\n        props.onMouseEnter,\n        rest.onMouseEnter,\n        onMouseEnter,\n      ),\n      onMouseLeave: handlerAll(\n        props.onMouseLeave,\n        rest.onMouseLeave,\n        onMouseLeave,\n      ),\n      onPointerEnter: handlerAll(\n        props.onPointerEnter,\n        rest.onPointerEnter,\n        onMouseEnter,\n      ),\n      onPointerLeave: handlerAll(\n        props.onPointerLeave,\n        rest.onPointerLeave,\n        onMouseLeave,\n      ),\n      onScroll: handlerAll(props.onScroll, rest.onScroll, onScroll),\n    }),\n    [\n      isNever,\n      ref,\n      isHidden,\n      isHovered,\n      isScrolling,\n      isSafari,\n      safariProps,\n      rest,\n      onMouseEnter,\n      onMouseLeave,\n      onScroll,\n    ],\n  )\n\n  return {\n    isAlways,\n    isHidden,\n    isHovered,\n    isNever,\n    isScrolling,\n    getRootProps,\n  }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":";;;;;;;;AAiCA,MAAa,iBAAiB,EAC5B,IACA,KACA,OAAO,SACP,kBAAkB,KAClB,wBACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,CAAC,WAAW,gBAAgB,SAAkB,MAAM;CAC1D,MAAM,CAAC,aAAa,kBAAkB,SAAkB,MAAM;CAC9D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,qCAAkB,8BAAW,SAAS;CAC5C,MAAM,OAAO,OAAO;CACpB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,eAAe,OAAY,OAAU;CAC3C,MAAM,gBAAgB,OAAY,OAAU;CAC5C,MAAM,gBAAgB,OAAuB,KAAK;CAClD,MAAM,iBAAiB,OAAO;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAE7C,2BAA0B;AACxB,MAAI,CAAC,cAAc,WAAW,CAAC,SAAU;AAEzC,gBAAc,QAAQ,aAAa,eAAe,QAAQ;AAC1D,gBAAc,QAAQ,YAAY,eAAe,QAAQ;GACzD;CAEF,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,aAAa,QAAQ;AAElC,eAAa,KAAK;IACjB,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,UAAU,iBACf,aAAa,MAAM,EACzB,gBACD;IACA,CAAC,iBAAiB,KAAK,CAAC;CAE3B,MAAM,WAAW,aACd,OAAgC;EAG/B,MAAM,EAAE,YAAY,GAAG,WAAW,MAFvB,GAAG;EAGd,MAAM,EAAE,GAAG,OAAO,GAAG,UAAU,eAAe;EAC9C,MAAM,UAAU,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI;AAEnE,2BAAyB;GAAE;GAAG;GAAG,CAAC;AAClC,iBAAe,UAAU;GAAE;GAAG;GAAG;AAEjC,MAAI,SAAS,YAAY,QAAS;AAElC,MAAI,CAAC,YAAa,gBAAe,KAAK;AAEtC,eAAa,cAAc,QAAQ;AAEnC,gBAAc,UAAU,iBAChB,eAAe,MAAM,EAC3B,gBACD;IAEH;EAAC;EAAa;EAAwB;EAAiB;EAAK,CAC7D;AAED,iBAAgB;AACd,eAAa;AACX,OAAI,aAAa,QAAS,cAAa,aAAa,QAAQ;AAC5D,OAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;;IAE/D,EAAE,CAAC;CAEN,MAAM,cAAc,eACX;EACL;EACA,KAAK,UAAU,KAAK,cAAc;EAClC,YAAY;EACb,GACD;EAAC;EAAK;EAAK;EAAc,CAC1B;AAmDD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA,cAvD+B,aAC9B,EAAE,OAAO,GAAG,UAAU,EAAE,MAAM;GAC7B;GACA,OAAO;IAAE,UAAU;IAAQ,GAAG;IAAO;GACrC,GAAG;GACH,GAAI,WAAW,cAAc,EAAE;GAC/B,GAAG;GACH,2CAAwB,SAAS;GACjC,0CAAuB,UAAU;GACjC,0CAAuB,QAAQ;GAC/B,2CAAwB,YAAY;GACpC,UAAU;GACV,4CACE,MAAM,cACN,KAAK,cACL,aACD;GACD,4CACE,MAAM,cACN,KAAK,cACL,aACD;GACD,8CACE,MAAM,gBACN,KAAK,gBACL,aACD;GACD,8CACE,MAAM,gBACN,KAAK,gBACL,aACD;GACD,wCAAqB,MAAM,UAAU,KAAK,UAAU,SAAS;GAC9D,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EASA"}
+{"version":3,"file":"use-scroll-area.js","names":[],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { dataAttr, isMac, useSafeLayoutEffect, vendor } from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n  /**\n   * Delay in milliseconds before scrollbars are hidden.\n   *\n   * @default 1000\n   */\n  scrollHideDelay?: number\n  /**\n   * Scrollbar visibility type.\n   *\n   * @default 'hover'\n   */\n  type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n  /**\n   * Callback function for when the scroll position changes.\n   */\n  onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n  id,\n  type = \"hover\",\n  scrollHideDelay = 1000,\n  onScrollPositionChange,\n  ...rest\n}: UseScrollAreaProps = {}) => {\n  const [isHovered, setIsHovered] = useState<boolean>(false)\n  const [isScrolling, setIsScrolling] = useState<boolean>(false)\n  const isAlways = type === \"always\"\n  const isNever = type === \"never\"\n  const isHidden = !isAlways && !isHovered && !isScrolling\n  const isSafari = isMac() && vendor(/apple/i)\n  const uuid = useId()\n  const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n  const hoverTimeout = useRef<any>(undefined)\n  const scrollTimeout = useRef<any>(undefined)\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const scrollPosition = useRef({ x: 0, y: 0 })\n\n  useSafeLayoutEffect(() => {\n    if (!scrollAreaRef.current || !isSafari) return\n\n    scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n    scrollAreaRef.current.scrollTop = scrollPosition.current.y\n  })\n\n  const onMouseEnter = useCallback(() => {\n    if (type !== \"hover\") return\n\n    clearTimeout(hoverTimeout.current)\n\n    setIsHovered(true)\n  }, [type])\n\n  const onMouseLeave = useCallback(() => {\n    if (type !== \"hover\") return\n\n    hoverTimeout.current = setTimeout(\n      () => setIsHovered(false),\n      scrollHideDelay,\n    )\n  }, [scrollHideDelay, type])\n\n  const onScroll = useCallback(\n    (ev: UIEvent<HTMLDivElement>) => {\n      const el = ev.target as HTMLDivElement\n\n      const { scrollLeft: x, scrollTop: y } = el\n      const { x: prevX, y: prevY } = scrollPosition.current\n      const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n      onScrollPositionChange?.({ x, y })\n      scrollPosition.current = { x, y }\n\n      if (type !== \"scroll\" || isEqual) return\n\n      if (!isScrolling) setIsScrolling(true)\n\n      clearTimeout(scrollTimeout.current)\n\n      scrollTimeout.current = setTimeout(\n        () => setIsScrolling(false),\n        scrollHideDelay,\n      )\n    },\n    [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n  )\n\n  useEffect(() => {\n    return () => {\n      if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n      if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n    }\n  }, [])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        {\n          style: { overflow: \"auto\" },\n          \"data-hidden\": dataAttr(isHidden),\n          \"data-hover\": dataAttr(isHovered),\n          \"data-never\": dataAttr(isNever),\n          \"data-scroll\": dataAttr(isScrolling),\n          tabIndex: 0,\n        },\n        isSafari ? { key, ref: scrollAreaRef, \"data-key\": key } : {},\n        rest,\n        props,\n        {\n          onMouseEnter,\n          onMouseLeave,\n          onPointerEnter: onMouseEnter,\n          onPointerLeave: onMouseLeave,\n          onScroll,\n        },\n      )(),\n    [\n      isNever,\n      isHidden,\n      isHovered,\n      isScrolling,\n      isSafari,\n      key,\n      rest,\n      onMouseEnter,\n      onMouseLeave,\n      onScroll,\n    ],\n  )\n\n  return {\n    isAlways,\n    isHidden,\n    isHovered,\n    isNever,\n    isScrolling,\n    getRootProps,\n  }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":";;;;;;;;;AA2BA,MAAa,iBAAiB,EAC5B,IACA,OAAO,SACP,kBAAkB,KAClB,wBACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,CAAC,WAAW,gBAAgB,SAAkB,MAAM;CAC1D,MAAM,CAAC,aAAa,kBAAkB,SAAkB,MAAM;CAC9D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,qCAAkB,8BAAW,SAAS;CAC5C,MAAM,OAAO,OAAO;CACpB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,eAAe,OAAY,OAAU;CAC3C,MAAM,gBAAgB,OAAY,OAAU;CAC5C,MAAM,gBAAgB,OAAuB,KAAK;CAClD,MAAM,iBAAiB,OAAO;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAE7C,2BAA0B;AACxB,MAAI,CAAC,cAAc,WAAW,CAAC,SAAU;AAEzC,gBAAc,QAAQ,aAAa,eAAe,QAAQ;AAC1D,gBAAc,QAAQ,YAAY,eAAe,QAAQ;GACzD;CAEF,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,aAAa,QAAQ;AAElC,eAAa,KAAK;IACjB,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,UAAU,iBACf,aAAa,MAAM,EACzB,gBACD;IACA,CAAC,iBAAiB,KAAK,CAAC;CAE3B,MAAM,WAAW,aACd,OAAgC;EAG/B,MAAM,EAAE,YAAY,GAAG,WAAW,MAFvB,GAAG;EAGd,MAAM,EAAE,GAAG,OAAO,GAAG,UAAU,eAAe;EAC9C,MAAM,UAAU,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI;AAEnE,2BAAyB;GAAE;GAAG;GAAG,CAAC;AAClC,iBAAe,UAAU;GAAE;GAAG;GAAG;AAEjC,MAAI,SAAS,YAAY,QAAS;AAElC,MAAI,CAAC,YAAa,gBAAe,KAAK;AAEtC,eAAa,cAAc,QAAQ;AAEnC,gBAAc,UAAU,iBAChB,eAAe,MAAM,EAC3B,gBACD;IAEH;EAAC;EAAa;EAAwB;EAAiB;EAAK,CAC7D;AAED,iBAAgB;AACd,eAAa;AACX,OAAI,aAAa,QAAS,cAAa,aAAa,QAAQ;AAC5D,OAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;;IAE/D,EAAE,CAAC;AAsCN,QAAO;EACL;EACA;EACA;EACA;EACA;EACA,cA1C+B,aAC9B,QAAQ,EAAE,KACT,WACE;GACE,OAAO,EAAE,UAAU,QAAQ;GAC3B,2CAAwB,SAAS;GACjC,0CAAuB,UAAU;GACjC,0CAAuB,QAAQ;GAC/B,2CAAwB,YAAY;GACpC,UAAU;GACX,EACD,WAAW;GAAE;GAAK,KAAK;GAAe,YAAY;GAAK,GAAG,EAAE,EAC5D,MACA,OACA;GACE;GACA;GACA,gBAAgB;GAChB,gBAAgB;GAChB;GACD,CACF,EAAE,EACL;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EASA"}

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

@@ -9,7 +9,7 @@ import "../collapse/index.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react1226 from "react";
+import * as react207 from "react";
 
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -33,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react1226.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react207.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/accordion.style.d.ts

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

package/dist/types/components/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 react1214 from "react";
+import * as react194 from "react";
 
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react1214.Context<{
+declare const AccordionDescendantsContext: react194.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: react1214.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) => react1214.RefCallback<HTMLButtonElement>;
+    } | undefined) => react194.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: react1214.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) => react1214.RefCallback<HTMLButtonElement>;
+      } | undefined) => react194.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react1214.RefCallback<HTMLButtonElement>;
+    register: react194.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: react1214.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) => react1214.RefCallback<HTMLButtonElement>;
+    } | undefined) => react194.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: react1214.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react194.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react1214.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react194.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) => react1214.RefCallback<HTMLButtonElement>;
+    } | undefined) => react194.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: react1214.Dispatch<react1214.SetStateAction<number>>;
-  setIndex: react1214.Dispatch<react1214.SetStateAction<number | number[]>>;
+  setFocusedIndex: react194.Dispatch<react194.SetStateAction<number>>;
+  setIndex: react194.Dispatch<react194.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

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

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

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

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

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

@@ -5,7 +5,7 @@ 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 react1206 from "react";
+import * as react43 from "react";
 
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -38,7 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react1206.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react43.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 react1205 from "react";
+import * as react52 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: react1205.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react52.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

@@ -12,7 +12,7 @@ import { InputGroupRootProps } from "../input/input-group.js";
 import "../input/index.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react1204 from "react";
+import * as react53 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -68,7 +68,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react1204.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react53.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" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "valueText" | "empty">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "empty" | "indicator" | "field" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "empty" | "indicator" | "field" | "valueText">>, {
   xs: {
     empty: {
       gap: "1.5";

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

@@ -8,7 +8,7 @@ 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 react1198 from "react";
+import * as react54 from "react";
 import { ChangeEvent, ReactNode } from "react";
 
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -28,7 +28,7 @@ interface AutocompleteFilter {
 }
 type AutocompleteMatcher = typeof index_d_exports.match;
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react1198.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react54.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.
@@ -156,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) => react1198.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react54.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>[];
@@ -166,8 +166,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react1198.Dispatch<react1198.SetStateAction<string>>;
-  setValue: react1198.Dispatch<react1198.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react54.Dispatch<react54.SetStateAction<string>>;
+  setValue: react54.Dispatch<react54.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 react1195 from "react";
+import * as react181 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils15 from "@yamada-ui/utils";
+import * as _yamada_ui_utils8 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_utils15.Dict = _yamada_ui_utils15.Dict<any>>(el: H | react1195.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils8.Dict = _yamada_ui_utils8.Dict<any>>(el: H | react181.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" ? react1195.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react1195.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils15.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react181.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react181.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils8.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_utils15.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils8.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {