@yamada-ui/react 1.7.7 → 2.0.0-dev-20250626070331

package/dist/cjs/components/icon/lucide-icon.cjs

@@ -0,0 +1,22 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_components_icon_icon = require('./icon.cjs');
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const lucide_react = require_rolldown_runtime.__toESM(require("lucide-react"));
+
+//#region src/components/icon/lucide-icon.tsx
+/**
+* `LucideIcon` is a component for using [Lucide lab](https://github.com/lucide-icons/lucide-lab) icons.
+*
+* @see https://yamada-ui.com/components/icon
+*/
+const LucideIcon = require_components_icon_icon.withContext((props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_icon_icon.Icon, {
+	as: lucide_react.Icon,
+	...props
+}))();
+
+//#endregion
+exports.LucideIcon = LucideIcon;
+//# sourceMappingURL=lucide-icon.cjs.map

package/dist/cjs/components/icon/lucide-icon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lucide-icon.cjs","names":["Icon","OriginalIcon"],"sources":["../../../../src/components/icon/lucide-icon.tsx"],"sourcesContent":["\"use client\"\n\nimport type { IconNode } from \"lucide-react\"\nimport type { IconProps } from \"./icon\"\nimport { Icon as OriginalIcon } from \"lucide-react\"\nimport { Icon, withContext } from \"./icon\"\n\nexport interface LucideIconProps extends IconProps {\n  /**\n   * The icon of the [Lucide lab](https://github.com/lucide-icons/lucide-lab).\n   */\n  iconNode?: IconNode\n}\n\n/**\n * `LucideIcon` is a component for using [Lucide lab](https://github.com/lucide-icons/lucide-lab) icons.\n *\n * @see https://yamada-ui.com/components/icon\n */\nexport const LucideIcon = withContext<\"svg\", LucideIconProps>((props) => (\n  <Icon as={OriginalIcon} {...props} />\n))()\n"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAa,aAAa,yCAAoC,CAAC,0BAC7D,2BAACA;CAAK,IAAIC;CAAc,GAAI;EAAS,CACrC,EAAE"}

package/dist/cjs/components/image/image.cjs

@@ -0,0 +1,24 @@
+"use client";
+
+
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_components_image_image_style = require('./image.style.cjs');
+
+//#region src/components/image/image.tsx
+const { PropsContext: ImagePropsContext, usePropsContext: useImagePropsContext, withContext } = require_core_components_create_component.createComponent("image", require_components_image_image_style.imageStyle);
+/**
+* `Image` is a component that displays images with fallback support.
+*
+* @see https://yamada-ui.com/components/image
+*/
+const Image = withContext("img")(void 0, ({ fit,...rest }) => ({
+	objectFit: fit,
+	...rest
+}));
+
+//#endregion
+exports.Image = Image;
+exports.ImagePropsContext = ImagePropsContext;
+exports.useImagePropsContext = useImagePropsContext;
+exports.withContext = withContext;
+//# sourceMappingURL=image.cjs.map

package/dist/cjs/components/image/image.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.cjs","names":["imageStyle","Image: FC<ImageProps>"],"sources":["../../../../src/components/image/image.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC } from \"react\"\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ImageStyle } from \"./image.style\"\nimport { createComponent } from \"../../core\"\nimport { imageStyle } from \"./image.style\"\n\nexport interface ImageProps\n  extends HTMLStyledProps<\"img\">,\n    ThemeProps<ImageStyle> {\n  /**\n   * The CSS `object-fit` property.\n   */\n  fit?: CSSProps[\"objectFit\"]\n}\n\nexport const {\n  PropsContext: ImagePropsContext,\n  usePropsContext: useImagePropsContext,\n  withContext,\n} = createComponent<ImageProps, ImageStyle>(\"image\", imageStyle)\n\n/**\n * `Image` is a component that displays images with fallback support.\n *\n * @see https://yamada-ui.com/components/image\n */\nexport const Image: FC<ImageProps> = withContext(\"img\")(\n  undefined,\n  ({ fit, ...rest }) => ({ objectFit: fit, ...rest }),\n)\n"],"mappings":";;;;;;;AAiBA,MAAa,EACX,cAAc,mBACd,iBAAiB,sBACjB,aACD,GAAG,yDAAwC,SAASA,gDAAW;;;;;;AAOhE,MAAaC,QAAwB,YAAY,MAAM,SAErD,CAAC,EAAE,IAAK,GAAG,MAAM,MAAM;CAAE,WAAW;CAAK,GAAG;AAAM,GACnD"}

package/dist/cjs/components/image/image.style.cjs

@@ -0,0 +1,8 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/image/image.style.ts
+const imageStyle = require_core_system_config.defineComponentStyle({});
+
+//#endregion
+exports.imageStyle = imageStyle;
+//# sourceMappingURL=image.style.cjs.map

package/dist/cjs/components/image/image.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.style.cjs","names":[],"sources":["../../../../src/components/image/image.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const imageStyle = defineComponentStyle({})\n\nexport type ImageStyle = typeof imageStyle\n"],"mappings":";;;AAEA,MAAa,aAAa,gDAAqB,CAAE,EAAC"}

package/dist/cjs/components/image/index.cjs

@@ -0,0 +1,10 @@
+const require_components_image_image_style = require('./image.style.cjs');
+const require_components_image_image = require('./image.cjs');
+
+exports.Image = require_components_image_image.Image;
+exports.ImagePropsContext = require_components_image_image.ImagePropsContext;
+exports.Img = require_components_image_image.Image;
+exports.ImgPropsContext = require_components_image_image.ImagePropsContext;
+exports.imageStyle = require_components_image_image_style.imageStyle;
+exports.useImagePropsContext = require_components_image_image.useImagePropsContext;
+exports.useImgPropsContext = require_components_image_image.useImagePropsContext;

package/dist/cjs/components/indicator/index.cjs

@@ -0,0 +1,7 @@
+const require_components_indicator_indicator_style = require('./indicator.style.cjs');
+const require_components_indicator_indicator = require('./indicator.cjs');
+
+exports.Indicator = require_components_indicator_indicator.Indicator;
+exports.IndicatorPropsContext = require_components_indicator_indicator.IndicatorPropsContext;
+exports.indicatorStyle = require_components_indicator_indicator_style.indicatorStyle;
+exports.useIndicatorPropsContext = require_components_indicator_indicator.useIndicatorPropsContext;

package/dist/cjs/components/indicator/indicator.cjs

@@ -0,0 +1,70 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_core_system_factory = require('../../core/system/factory.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_components_float_float = require('../float/float.cjs');
+const require_components_indicator_indicator_style = require('./indicator.style.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/components/indicator/indicator.tsx
+const { PropsContext: IndicatorPropsContext, usePropsContext: useIndicatorPropsContext, withContext, withProvider } = require_core_components_create_component.createSlotComponent("indicator", require_components_indicator_indicator_style.indicatorStyle);
+/**
+* `Indicator` is a component that displays at the corner of elements such as avatars.
+*
+* @see https://yamada-ui.com/components/indicator
+*/
+const Indicator = withProvider(({ children, disabled, label, offset, overflowCount = 99, placement, showZero = true, floatProps, labelProps,...rest }) => {
+	const numeric = (0, require_utils_index.utils_exports.isNumber)(label);
+	disabled ??= numeric && !showZero && label <= 0;
+	const computedLabel = (0, react.useMemo)(() => {
+		if (numeric && label > overflowCount) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [overflowCount, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_core_system_factory.styled.span, { children: "+" })] });
+		else return label;
+	}, [
+		numeric,
+		label,
+		overflowCount
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_core_system_factory.styled.div, {
+		...rest,
+		children: [children, !disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IndicatorFloat, {
+			offset,
+			placement,
+			...floatProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IndicatorLabel, {
+				"data-numeric": (0, require_utils_index.utils_exports.dataAttr)(numeric),
+				...labelProps,
+				children: computedLabel
+			})
+		}) : null]
+	});
+}, "root")(({ ping,...rest }) => {
+	if ((0, require_utils_index.utils_exports.isObject)(ping)) {
+		const { color, duration, iterationCount, scale, timingFunction } = ping;
+		return {
+			...rest,
+			"--animation-scale": scale,
+			"--duration": duration ? `durations.${duration}` : void 0,
+			"--iteration-count": iterationCount,
+			"--ping-color": color ? `colors.${color}` : void 0,
+			"--timing-function": timingFunction ? `easings.${timingFunction}` : void 0,
+			ping: true
+		};
+	} else return {
+		...rest,
+		ping
+	};
+});
+const IndicatorFloat = withContext(require_components_float_float.Float, "float")();
+const IndicatorLabel = withContext("span", "label")();
+
+//#endregion
+exports.Indicator = Indicator;
+exports.IndicatorPropsContext = IndicatorPropsContext;
+exports.useIndicatorPropsContext = useIndicatorPropsContext;
+exports.withContext = withContext;
+exports.withProvider = withProvider;
+//# sourceMappingURL=indicator.cjs.map

package/dist/cjs/components/indicator/indicator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"indicator.cjs","names":["indicatorStyle","styled","Float"],"sources":["../../../../src/components/indicator/indicator.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FloatProps } from \"../float\"\nimport type { IndicatorStyle } from \"./indicator.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { dataAttr, isNumber, isObject } from \"../../utils\"\nimport { Float } from \"../float\"\nimport { indicatorStyle } from \"./indicator.style\"\n\ninterface PingOptions {\n  /**\n   * It is used for the color of the ping animation.\n   */\n  color?: CSSProps[\"backgroundColor\"]\n  /**\n   * It is used for the duration of the ping animation.\n   */\n  duration?: CSSProps[\"animationDuration\"]\n  /**\n   * It is used for the count of the ping animation.\n   */\n  iterationCount?: CSSProps[\"animationIterationCount\"]\n  /**\n   * It is used for the scale of the ping animation.\n   */\n  scale?: CSSProps[\"scale\"]\n  /**\n   * It is used for the timing function of the ping animation.\n   */\n  timingFunction?: CSSProps[\"animationTimingFunction\"]\n}\n\nexport interface IndicatorProps\n  extends Omit<HTMLStyledProps, \"offset\">,\n    Omit<ThemeProps<IndicatorStyle>, \"ping\">,\n    Pick<FloatProps, \"offset\" | \"placement\"> {\n  /**\n   * If `true`, the indicator will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The indicator label to use.\n   */\n  label?: ReactNode\n  /**\n   * If `label` is of type number, the maximum number displayed.\n   *\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * If `true`, make an element scale and fade like a radar ping or ripple of water.\n   *\n   * @default false\n   */\n  ping?: boolean | PingOptions\n  /**\n   * If `true`, display 0.\n   *\n   * @default true\n   */\n  showZero?: boolean\n  /**\n   * Props for the float element.\n   */\n  floatProps?: IndicatorFloatProps\n  /**\n   * Props for the label element.\n   */\n  labelProps?: IndicatorLabelProps\n}\n\nexport const {\n  PropsContext: IndicatorPropsContext,\n  usePropsContext: useIndicatorPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<IndicatorProps, IndicatorStyle>(\n  \"indicator\",\n  indicatorStyle,\n)\n\n/**\n * `Indicator` is a component that displays at the corner of elements such as avatars.\n *\n * @see https://yamada-ui.com/components/indicator\n */\nexport const Indicator = withProvider(\n  ({\n    children,\n    disabled,\n    label,\n    offset,\n    overflowCount = 99,\n    placement,\n    showZero = true,\n    floatProps,\n    labelProps,\n    ...rest\n  }) => {\n    const numeric = isNumber(label)\n\n    disabled ??= numeric && !showZero && (label as number) <= 0\n\n    const computedLabel = useMemo(() => {\n      if (numeric && label > overflowCount) {\n        return (\n          <>\n            {overflowCount}\n            <styled.span>+</styled.span>\n          </>\n        )\n      } else {\n        return label\n      }\n    }, [numeric, label, overflowCount])\n\n    return (\n      <styled.div {...rest}>\n        {children}\n\n        {!disabled ? (\n          <IndicatorFloat offset={offset} placement={placement} {...floatProps}>\n            <IndicatorLabel data-numeric={dataAttr(numeric)} {...labelProps}>\n              {computedLabel}\n            </IndicatorLabel>\n          </IndicatorFloat>\n        ) : null}\n      </styled.div>\n    )\n  },\n  \"root\",\n)(({ ping, ...rest }) => {\n  if (isObject(ping)) {\n    const { color, duration, iterationCount, scale, timingFunction } = ping\n\n    return {\n      ...rest,\n      \"--animation-scale\": scale,\n      \"--duration\": duration ? `durations.${duration}` : undefined,\n      \"--iteration-count\": iterationCount,\n      \"--ping-color\": color ? `colors.${color}` : undefined,\n      \"--timing-function\": timingFunction\n        ? `easings.${timingFunction}`\n        : undefined,\n      ping: true,\n    }\n  } else {\n    return { ...rest, ping }\n  }\n})\n\ninterface IndicatorFloatProps extends FloatProps {}\n\nconst IndicatorFloat = withContext<\"div\", IndicatorFloatProps>(Float, \"float\")()\n\ninterface IndicatorLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst IndicatorLabel = withContext<\"span\", IndicatorLabelProps>(\n  \"span\",\n  \"label\",\n)()\n"],"mappings":";;;;;;;;;;;;;AA6EA,MAAa,EACX,cAAc,uBACd,iBAAiB,0BACjB,aACA,cACD,GAAG,6DACF,aACAA,4DACD;;;;;;AAOD,MAAa,YAAY,aACvB,CAAC,EACC,UACA,UACA,OACA,QACA,gBAAgB,IAChB,WACA,WAAW,MACX,YACA,WACA,GAAG,MACJ,KAAK;CACJ,MAAM,UAAU,gDAAS,MAAM;AAE/B,cAAa,YAAY,YAAa,SAAoB;CAE1D,MAAM,gBAAgB,mBAAQ,MAAM;AAClC,MAAI,WAAW,QAAQ,cACrB,wBACE,qEACG,+BACD,2BAACC,mCAAO,kBAAK,MAAe,IAC3B;MAGL,QAAO;CAEV,GAAE;EAAC;EAAS;EAAO;CAAc,EAAC;AAEnC,wBACE,4BAACA,mCAAO;EAAI,GAAI;aACb,WAEC,2BACA,2BAAC;GAAuB;GAAmB;GAAW,GAAI;6BACxD,2BAAC;IAAe,gBAAc,gDAAS,QAAQ;IAAE,GAAI;cAClD;KACc;IACF,GACf;GACO;AAEhB,GACD,OACD,CAAC,CAAC,EAAE,KAAM,GAAG,MAAM,KAAK;AACvB,KAAI,gDAAS,KAAK,EAAE;EAClB,MAAM,EAAE,OAAO,UAAU,gBAAgB,OAAO,gBAAgB,GAAG;AAEnE,SAAO;GACL,GAAG;GACH,qBAAqB;GACrB,cAAc,YAAY,YAAY;GACtC,qBAAqB;GACrB,gBAAgB,SAAS,SAAS;GAClC,qBAAqB,kBAChB,UAAU;GAEf,MAAM;EACP;CACF,MACC,QAAO;EAAE,GAAG;EAAM;CAAM;AAE3B,EAAC;AAIF,MAAM,iBAAiB,YAAwCC,sCAAO,QAAQ,EAAE;AAIhF,MAAM,iBAAiB,YACrB,QACA,QACD,EAAE"}

package/dist/cjs/components/indicator/indicator.style.cjs

@@ -0,0 +1,84 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/indicator/indicator.style.ts
+const indicatorStyle = require_core_system_config.defineComponentSlotStyle({
+	base: {
+		float: { zIndex: "yamcha" },
+		label: {
+			alignItems: "center",
+			display: "inline-flex",
+			rounded: "full",
+			verticalAlign: "middle",
+			whiteSpace: "nowrap",
+			_numeric: { fontWeight: "medium" }
+		},
+		root: { position: "relative" }
+	},
+	props: {
+		inline: {
+			false: { root: { display: "block" } },
+			true: { root: { display: "inline-block" } }
+		},
+		ping: { true: {
+			label: { _before: {
+				animationDuration: "{duration, 1.4s}",
+				animationFillMode: "forwards",
+				animationIterationCount: "{iteration-count, infinite}",
+				animationName: "ping",
+				animationTimingFunction: "{timing-function, cubic-bezier(0, 0, 0.2, 1)}",
+				bg: "{ping-color}",
+				boxSize: "100%",
+				inset: "0",
+				opacity: .7,
+				position: "absolute",
+				rounded: "full",
+				zIndex: -1
+			} },
+			root: { "--animation-scale": "1.8" }
+		} },
+		withBorder: { true: { label: {
+			borderColor: ["white", "black"],
+			borderWidth: "0.2em"
+		} } }
+	},
+	variants: {
+		solid: { label: {
+			layerStyle: "solid",
+			"--ping-color": "colorScheme.outline"
+		} },
+		subtle: { label: {
+			layerStyle: "subtle",
+			"--ping-color": "colorScheme.outline"
+		} },
+		surface: { label: {
+			layerStyle: "surface",
+			"--ping-color": "colorScheme.outline"
+		} }
+	},
+	sizes: {
+		sm: { label: {
+			fontSize: "xs",
+			minBoxSize: "3",
+			px: "1.5"
+		} },
+		md: { label: {
+			fontSize: "sm",
+			minBoxSize: "4",
+			px: "2"
+		} },
+		lg: { label: {
+			fontSize: "md",
+			minBoxSize: "5",
+			px: "2.5"
+		} }
+	},
+	defaultProps: {
+		size: "sm",
+		variant: "solid",
+		ping: false
+	}
+});
+
+//#endregion
+exports.indicatorStyle = indicatorStyle;
+//# sourceMappingURL=indicator.style.cjs.map

package/dist/cjs/components/indicator/indicator.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"indicator.style.cjs","names":[],"sources":["../../../../src/components/indicator/indicator.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const indicatorStyle = defineComponentSlotStyle({\n  base: {\n    float: {\n      zIndex: \"yamcha\",\n    },\n    label: {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      rounded: \"full\",\n      verticalAlign: \"middle\",\n      whiteSpace: \"nowrap\",\n      _numeric: {\n        fontWeight: \"medium\",\n      },\n    },\n    root: {\n      position: \"relative\",\n    },\n  },\n\n  props: {\n    /**\n     * If `true`, set the indicator as an inline element.\n     *\n     * @default false\n     * */\n    inline: {\n      false: {\n        root: {\n          display: \"block\",\n        },\n      },\n      true: {\n        root: {\n          display: \"inline-block\",\n        },\n      },\n    },\n    /**\n     * If `true`, make an element scale and fade like a radar ping or ripple of water.\n     *\n     * @default false\n     */\n    ping: {\n      true: {\n        label: {\n          _before: {\n            animationDuration: \"{duration, 1.4s}\",\n            animationFillMode: \"forwards\",\n            animationIterationCount: \"{iteration-count, infinite}\",\n            animationName: \"ping\",\n            animationTimingFunction:\n              \"{timing-function, cubic-bezier(0, 0, 0.2, 1)}\",\n            bg: \"{ping-color}\",\n            boxSize: \"100%\",\n            inset: \"0\",\n            opacity: 0.7,\n            position: \"absolute\",\n            rounded: \"full\",\n            zIndex: -1,\n          },\n        },\n        root: {\n          \"--animation-scale\": \"1.8\",\n        },\n      },\n    },\n    /**\n     * If `true`, display the border of the indicator.\n     *\n     * @default false\n     */\n    withBorder: {\n      true: {\n        label: {\n          borderColor: [\"white\", \"black\"],\n          borderWidth: \"0.2em\",\n        },\n      },\n    },\n  },\n\n  variants: {\n    solid: {\n      label: {\n        layerStyle: \"solid\",\n        \"--ping-color\": \"colorScheme.outline\",\n      },\n    },\n    subtle: {\n      label: {\n        layerStyle: \"subtle\",\n        \"--ping-color\": \"colorScheme.outline\",\n      },\n    },\n    surface: {\n      label: {\n        layerStyle: \"surface\",\n        \"--ping-color\": \"colorScheme.outline\",\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      label: {\n        fontSize: \"xs\",\n        minBoxSize: \"3\",\n        px: \"1.5\",\n      },\n    },\n    md: {\n      label: {\n        fontSize: \"sm\",\n        minBoxSize: \"4\",\n        px: \"2\",\n      },\n    },\n    lg: {\n      label: {\n        fontSize: \"md\",\n        minBoxSize: \"5\",\n        px: \"2.5\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"sm\",\n    variant: \"solid\",\n    ping: false,\n  },\n})\n\nexport type IndicatorStyle = typeof indicatorStyle\n"],"mappings":";;;AAEA,MAAa,iBAAiB,oDAAyB;CACrD,MAAM;EACJ,OAAO,EACL,QAAQ,SACT;EACD,OAAO;GACL,YAAY;GACZ,SAAS;GACT,SAAS;GACT,eAAe;GACf,YAAY;GACZ,UAAU,EACR,YAAY,SACb;EACF;EACD,MAAM,EACJ,UAAU,WACX;CACF;CAED,OAAO;EAML,QAAQ;GACN,OAAO,EACL,MAAM,EACJ,SAAS,QACV,EACF;GACD,MAAM,EACJ,MAAM,EACJ,SAAS,eACV,EACF;EACF;EAMD,MAAM,EACJ,MAAM;GACJ,OAAO,EACL,SAAS;IACP,mBAAmB;IACnB,mBAAmB;IACnB,yBAAyB;IACzB,eAAe;IACf,yBACE;IACF,IAAI;IACJ,SAAS;IACT,OAAO;IACP,SAAS;IACT,UAAU;IACV,SAAS;IACT,QAAQ;GACT,EACF;GACD,MAAM,EACJ,qBAAqB,MACtB;EACF,EACF;EAMD,YAAY,EACV,MAAM,EACJ,OAAO;GACL,aAAa,CAAC,SAAS,OAAQ;GAC/B,aAAa;EACd,EACF,EACF;CACF;CAED,UAAU;EACR,OAAO,EACL,OAAO;GACL,YAAY;GACZ,gBAAgB;EACjB,EACF;EACD,QAAQ,EACN,OAAO;GACL,YAAY;GACZ,gBAAgB;EACjB,EACF;EACD,SAAS,EACP,OAAO;GACL,YAAY;GACZ,gBAAgB;EACjB,EACF;CACF;CAED,OAAO;EACL,IAAI,EACF,OAAO;GACL,UAAU;GACV,YAAY;GACZ,IAAI;EACL,EACF;EACD,IAAI,EACF,OAAO;GACL,UAAU;GACV,YAAY;GACZ,IAAI;EACL,EACF;EACD,IAAI,EACF,OAAO;GACL,UAAU;GACV,YAAY;GACZ,IAAI;EACL,EACF;CACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,MAAM;CACP;AACF,EAAC"}

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

@@ -0,0 +1,9 @@
+const require_components_infinite_scroll_area_infinite_scroll_area_style = require('./infinite-scroll-area.style.cjs');
+const require_components_infinite_scroll_area_use_infinite_scroll = require('./use-infinite-scroll.cjs');
+const require_components_infinite_scroll_area_infinite_scroll_area = require('./infinite-scroll-area.cjs');
+
+exports.InfiniteScrollArea = require_components_infinite_scroll_area_infinite_scroll_area.InfiniteScrollArea;
+exports.InfiniteScrollAreaPropsContext = require_components_infinite_scroll_area_infinite_scroll_area.InfiniteScrollAreaPropsContext;
+exports.infiniteScrollAreaStyle = require_components_infinite_scroll_area_infinite_scroll_area_style.infiniteScrollAreaStyle;
+exports.useInfiniteScroll = require_components_infinite_scroll_area_use_infinite_scroll.useInfiniteScroll;
+exports.useInfiniteScrollAreaPropsContext = require_components_infinite_scroll_area_infinite_scroll_area.useInfiniteScrollAreaPropsContext;

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

@@ -0,0 +1,68 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_ref = require('../../utils/ref.cjs');
+const require_core_system_factory = require('../../core/system/factory.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
+const require_components_infinite_scroll_area_infinite_scroll_area_style = require('./infinite-scroll-area.style.cjs');
+const require_components_infinite_scroll_area_use_infinite_scroll = require('./use-infinite-scroll.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/components/infinite-scroll-area/infinite-scroll-area.tsx
+const { PropsContext: InfiniteScrollAreaPropsContext, usePropsContext: useInfiniteScrollAreaPropsContext, withContext, withProvider } = require_core_components_create_component.createSlotComponent("infinite-scroll-area", require_components_infinite_scroll_area_infinite_scroll_area_style.infiniteScrollAreaStyle);
+/**
+* `InfiniteScrollArea` is for providing infinite scroll functionality.
+* This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.
+*
+* @see https://yamada-ui.com/components/infinite-scroll-area
+*/
+const InfiniteScrollArea = withProvider(({ ref, children, disabled, finish: finishProp, indexRef, initialLoad, loading, orientation: orientationProp, resetRef, reverse, rootMargin, rootRef: rootRefProp, startIndex, threshold, triggerProps, onLoad,...rest }) => {
+	const rootRef = (0, react.useRef)(null);
+	const orientation = require_hooks_use_value_index.useValue(orientationProp);
+	const { ref: triggerRef, finish } = require_components_infinite_scroll_area_use_infinite_scroll.useInfiniteScroll({
+		disabled,
+		indexRef,
+		initialLoad,
+		orientation,
+		resetRef,
+		reverse,
+		rootMargin,
+		rootRef: rootRefProp ?? rootRef,
+		startIndex,
+		threshold,
+		onLoad
+	});
+	const hasFinish = !!finishProp;
+	const showTrigger = !disabled && (hasFinish || !finish);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_core_system_factory.styled.div, {
+		ref: require_utils_ref.mergeRefs(rootRef, ref),
+		"aria-busy": "false",
+		role: "feed",
+		...rest,
+		children: [
+			reverse && showTrigger ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InfiniteScrollTrigger, {
+				ref: triggerRef,
+				...triggerProps,
+				children: finish ? finishProp : loading
+			}) : null,
+			children,
+			!reverse && showTrigger ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InfiniteScrollTrigger, {
+				ref: triggerRef,
+				...triggerProps,
+				children: finish ? finishProp : loading
+			}) : null
+		]
+	});
+}, "root", { transferProps: ["orientation"] })();
+const InfiniteScrollTrigger = withContext("div", "trigger")();
+
+//#endregion
+exports.InfiniteScrollArea = InfiniteScrollArea;
+exports.InfiniteScrollAreaPropsContext = InfiniteScrollAreaPropsContext;
+exports.useInfiniteScrollAreaPropsContext = useInfiniteScrollAreaPropsContext;
+exports.withContext = withContext;
+exports.withProvider = withProvider;
+//# sourceMappingURL=infinite-scroll-area.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"infinite-scroll-area.cjs","names":["infiniteScrollAreaStyle","styled"],"sources":["../../../../src/components/infinite-scroll-area/infinite-scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type {\n  HTMLStyledProps,\n  Orientation,\n  StyleValue,\n  ThemeProps,\n} 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 { mergeRefs } from \"../../utils\"\nimport { infiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport { useInfiniteScroll } from \"./use-infinite-scroll\"\n\nexport interface InfiniteScrollAreaProps\n  extends 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   * The orientation of the infinite scroll.\n   *\n   * @default 'vertical'\n   */\n  orientation?: StyleValue<Orientation>\n  /**\n   * Props for infinite scroll area trigger component.\n   */\n  triggerProps?: HTMLStyledProps\n}\n\nexport const {\n  PropsContext: InfiniteScrollAreaPropsContext,\n  usePropsContext: useInfiniteScrollAreaPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<InfiniteScrollAreaProps, InfiniteScrollAreaStyle>(\n  \"infinite-scroll-area\",\n  infiniteScrollAreaStyle,\n)\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/components/infinite-scroll-area\n */\nexport const InfiniteScrollArea = withProvider(\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: 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":";;;;;;;;;;;;;;AA0CA,MAAa,EACX,cAAc,gCACd,iBAAiB,mCACjB,aACA,cACD,GAAG,6DACF,wBACAA,2FACD;;;;;;;AAQD,MAAa,qBAAqB,aAChC,CAAC,EACC,KACA,UACA,UACA,QAAQ,YACR,UACA,aACA,SACA,aAAa,iBACb,UACA,SACA,YACA,SAAS,aACT,YACA,WACA,cACA,OACA,GAAG,MACJ,KAAK;CACJ,MAAM,UAAU,kBAAuB,KAAK;CAC5C,MAAM,cAAc,uCAAS,gBAAgB;CAC7C,MAAM,EAAE,KAAK,YAAY,QAAQ,GAAG,8EAAkB;EACpD;EACA;EACA;EACA;EACA;EACA;EACA;EACA,SAAS,eAAe;EACxB;EACA;EACA;CACD,EAAC;CACF,MAAM,cAAc;CACpB,MAAM,eAAe,aAAa,cAAc;AAEhD,wBACE,4BAACC,mCAAO;EACN,KAAK,4BAAU,SAAS,IAAI;EAC5B,aAAU;EACV,MAAK;EACL,GAAI;;GAEH,WAAW,8BACV,2BAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;GAEH;IAEC,WAAW,8BACX,2BAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;;GACO;AAEhB,GACD,QACA,EAAE,eAAe,CAAC,aAAc,EAAE,EACnC,EAAE;AAIH,MAAM,wBAAwB,YAC5B,OACA,UACD,EAAE"}

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

@@ -0,0 +1,34 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/infinite-scroll-area/infinite-scroll-area.style.ts
+const infiniteScrollAreaStyle = require_core_system_config.defineComponentSlotStyle({
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "row",
+			w: "full"
+		},
+		trigger: {
+			alignItems: "center",
+			display: "flex",
+			flex: 1,
+			justifyContent: "center",
+			w: "full"
+		}
+	},
+	props: { orientation: {
+		horizontal: { root: {
+			flexDirection: "row",
+			gap: "md"
+		} },
+		vertical: { root: {
+			flexDirection: "column",
+			gap: "lg"
+		} }
+	} },
+	defaultProps: { orientation: "vertical" }
+});
+
+//#endregion
+exports.infiniteScrollAreaStyle = infiniteScrollAreaStyle;
+//# sourceMappingURL=infinite-scroll-area.style.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"infinite-scroll-area.style.cjs","names":[],"sources":["../../../../src/components/infinite-scroll-area/infinite-scroll-area.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const infiniteScrollAreaStyle = defineComponentSlotStyle({\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"row\",\n      w: \"full\",\n    },\n    trigger: {\n      alignItems: \"center\",\n      display: \"flex\",\n      flex: 1,\n      justifyContent: \"center\",\n      w: \"full\",\n    },\n  },\n\n  props: {\n    /**\n     * If `true`, the button is full rounded. Else, it'll be slightly round.\n     *\n     * @default 'vertical'\n     */\n    orientation: {\n      horizontal: {\n        root: { flexDirection: \"row\", gap: \"md\" },\n      },\n      vertical: {\n        root: { flexDirection: \"column\", gap: \"lg\" },\n      },\n    },\n  },\n\n  defaultProps: {\n    orientation: \"vertical\",\n  },\n})\n\nexport type InfiniteScrollAreaStyle = typeof infiniteScrollAreaStyle\n"],"mappings":";;;AAEA,MAAa,0BAA0B,oDAAyB;CAC9D,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;EACJ;EACD,SAAS;GACP,YAAY;GACZ,SAAS;GACT,MAAM;GACN,gBAAgB;GAChB,GAAG;EACJ;CACF;CAED,OAAO,EAML,aAAa;EACX,YAAY,EACV,MAAM;GAAE,eAAe;GAAO,KAAK;EAAM,EAC1C;EACD,UAAU,EACR,MAAM;GAAE,eAAe;GAAU,KAAK;EAAM,EAC7C;CACF,EACF;CAED,cAAc,EACZ,aAAa,WACd;AACF,EAAC"}

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

@@ -0,0 +1,198 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_effect = require('../../utils/effect.cjs');
+const require_utils_ref = require('../../utils/ref.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+
+//#region src/components/infinite-scroll-area/use-infinite-scroll.ts
+const isScrollable = (el, vertical) => {
+	const style = getComputedStyle(el);
+	if ([
+		"auto",
+		"overlay",
+		"scroll"
+	].includes(style.overflow)) return true;
+	if (vertical) return [
+		"auto",
+		"overlay",
+		"scroll"
+	].includes(style.overflowY);
+	else return [
+		"auto",
+		"overlay",
+		"scroll"
+	].includes(style.overflowX);
+};
+const onScroll = ({ behavior, position, reverse, root, vertical }) => {
+	let options;
+	const el = (0, require_utils_index.utils_exports.isHTMLElement)(root) && isScrollable(root, vertical) ? root : document.body;
+	if (vertical) options = {
+		behavior,
+		top: position ?? (reverse ? el.scrollHeight : 0)
+	};
+	else options = {
+		behavior,
+		left: position ?? (reverse ? el.scrollWidth : 0)
+	};
+	if (el === document.body) window.scrollTo(options);
+	else el.scrollTo(options);
+};
+const getScrollPosition = (root, vertical) => {
+	const el = (0, require_utils_index.utils_exports.isHTMLElement)(root) && isScrollable(root, vertical) ? root : document.body;
+	if (vertical) return el.scrollHeight - el.scrollTop;
+	else return el.scrollWidth - el.scrollLeft;
+};
+/**
+* `useInfiniteScroll` is a custom hook for providing infinite scroll functionality.
+*
+* @see https://yamada-ui.com/hooks/use-infinite-scroll
+*/
+const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp, initialLoad = false, orientation = "vertical", resetRef, reverse = false, rootMargin, rootRef, startIndex = initialLoad ? 0 : 1, threshold, onLoad: onLoadProp } = {}) => {
+	const ref = (0, react.useRef)(null);
+	const indexRef = (0, react.useRef)(startIndex);
+	const processingRef = (0, react.useRef)(false);
+	const observerRef = (0, react.useRef)(void 0);
+	const mountedRef = (0, react.useRef)(false);
+	const prevScrollPosition = (0, react.useRef)(0);
+	const [finish, setFinish] = (0, react.useState)(false);
+	const onLoad = require_utils_ref.useCallbackRef(onLoadProp);
+	const vertical = orientation === "vertical";
+	const options = (0, react.useMemo)(() => {
+		const root = rootRef?.current;
+		return {
+			root,
+			rootMargin,
+			threshold
+		};
+	}, [
+		rootMargin,
+		rootRef,
+		threshold
+	]);
+	const onReset = (0, react.useCallback)((index = 1, runScroll = true) => {
+		indexRef.current = index;
+		setFinish(false);
+		if (runScroll) {
+			const root = rootRef?.current;
+			onScroll({
+				behavior,
+				reverse,
+				root,
+				vertical
+			});
+		}
+		if (disabled) return;
+		setTimeout(() => {
+			const observer = observerRef.current;
+			const el = ref.current;
+			if (el) observer?.observe(el);
+		});
+	}, [
+		disabled,
+		reverse,
+		rootRef,
+		vertical,
+		behavior
+	]);
+	const onFinish = (0, react.useCallback)(() => {
+		const observer = observerRef.current;
+		const el = ref.current;
+		if (el) observer?.unobserve(el);
+		setFinish(true);
+	}, []);
+	const createObserver = (0, react.useCallback)(() => {
+		const observer = new IntersectionObserver(async ([entry]) => {
+			if (!entry?.isIntersecting || processingRef.current) return;
+			const props = {
+				entry,
+				finish: onFinish,
+				index: indexRef.current
+			};
+			processingRef.current = true;
+			const root = rootRef?.current;
+			if (root) root.ariaBusy = "true";
+			if (reverse) prevScrollPosition.current = getScrollPosition(root, vertical);
+			await onLoad(props);
+			if (reverse) {
+				const position = prevScrollPosition.current;
+				onScroll({
+					position,
+					root,
+					vertical
+				});
+			}
+			indexRef.current += 1;
+			processingRef.current = false;
+			if (root) root.ariaBusy = "false";
+		}, options);
+		return observer;
+	}, [
+		onFinish,
+		onLoad,
+		options,
+		rootRef,
+		reverse,
+		vertical
+	]);
+	(0, react.useEffect)(() => {
+		const setupObserver = async () => {
+			const el = ref.current;
+			const mounted = mountedRef.current;
+			const index = indexRef.current;
+			const root = rootRef?.current;
+			if (initialLoad && !mounted) {
+				processingRef.current = true;
+				if (root) root.ariaBusy = "true";
+				await onLoad({
+					finish: onFinish,
+					index
+				});
+				indexRef.current += 1;
+				processingRef.current = false;
+				if (root) root.ariaBusy = "false";
+			}
+			if (disabled) return;
+			observerRef.current = createObserver();
+			const observer = observerRef.current;
+			if (reverse && !mounted) {
+				const root$1 = rootRef?.current;
+				onScroll({
+					reverse,
+					root: root$1,
+					vertical
+				});
+				mountedRef.current = true;
+			}
+			setTimeout(() => {
+				if (el) observer.observe(el);
+			});
+			return () => {
+				if (el) observer.unobserve(el);
+			};
+		};
+		setupObserver();
+	}, [
+		createObserver,
+		initialLoad,
+		disabled,
+		reverse,
+		vertical,
+		onFinish,
+		onLoad,
+		rootRef
+	]);
+	require_utils_effect.useUnmountEffect(() => mountedRef.current = false);
+	require_utils_ref.assignRef(resetRef, onReset);
+	require_utils_ref.assignRef(indexRefProp, (index) => indexRef.current = index);
+	return {
+		ref,
+		finish
+	};
+};
+
+//#endregion
+exports.useInfiniteScroll = useInfiniteScroll;
+//# sourceMappingURL=use-infinite-scroll.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-infinite-scroll.cjs","names":["el: HTMLElement","vertical: boolean","options: ScrollToOptions","root: HTMLElement | null | undefined","options: IntersectionObserverInit","root"],"sources":["../../../../src/components/infinite-scroll-area/use-infinite-scroll.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { Orientation } from \"../../core\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport {\n  assignRef,\n  isHTMLElement,\n  useCallbackRef,\n  useUnmountEffect,\n} from \"../../utils\"\n\nconst isScrollable = (el: HTMLElement, vertical: boolean) => {\n  const style = getComputedStyle(el)\n\n  if ([\"auto\", \"overlay\", \"scroll\"].includes(style.overflow)) return true\n\n  if (vertical) {\n    return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowY)\n  } else {\n    return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowX)\n  }\n}\n\nconst onScroll = ({\n  behavior,\n  position,\n  reverse,\n  root,\n  vertical,\n}: {\n  root: HTMLElement | null | undefined\n  vertical: boolean\n  behavior?: ScrollBehavior\n  position?: number\n  reverse?: boolean\n}) => {\n  let options: ScrollToOptions\n  const el =\n    isHTMLElement(root) && isScrollable(root, vertical) ? root : document.body\n\n  if (vertical) {\n    options = { behavior, top: position ?? (reverse ? el.scrollHeight : 0) }\n  } else {\n    options = { behavior, left: position ?? (reverse ? el.scrollWidth : 0) }\n  }\n\n  if (el === document.body) {\n    window.scrollTo(options)\n  } else {\n    el.scrollTo(options)\n  }\n}\n\nconst getScrollPosition = (\n  root: HTMLElement | null | undefined,\n  vertical: boolean,\n) => {\n  const el =\n    isHTMLElement(root) && isScrollable(root, vertical) ? root : document.body\n\n  if (vertical) {\n    return el.scrollHeight - el.scrollTop\n  } else {\n    return el.scrollWidth - el.scrollLeft\n  }\n}\n\nexport interface UseInfiniteScrollProps\n  extends Omit<IntersectionObserverInit, \"root\"> {\n  /**\n   * Determines whether scrolling is instant or animates smoothly.\n   */\n  behavior?: ScrollBehavior\n  /**\n   * If `true`, the infinite scroll is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Ref to a reset index function.\n   */\n  indexRef?: RefObject<(index: number) => void>\n  /**\n   * If `true`, invoke `onLoad` function for the first time.\n   *\n   * @default false\n   */\n  initialLoad?: boolean\n  /**\n   * The orientation of the infinite scroll.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * Ref to a reset function.\n   */\n  resetRef?: RefObject<(index?: number, runScroll?: boolean) => void>\n  /**\n   *  If `true`, reverse direction.\n   *\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * Margin around the root. Can have values similar to the CSS margin property,\n   * e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n   */\n  rootMargin?: string\n  /**\n   * The element that is used as the viewport for checking visibility of the target.\n   * Defaults to the browser viewport if not specified or if `null`.\n   */\n  rootRef?: RefObject<HTMLElement | null>\n  /**\n   * If set the `onLoad` function will start from the given index.\n   * If `initialLoad` is `true`, index starts from `0`.\n   *\n   * @default 1\n   */\n  startIndex?: number\n  /**\n   * Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.\n   */\n  threshold?: number | number[]\n  /**\n   * The callback invoked when trigger is intersect.\n   */\n  onLoad?: ({\n    entry,\n    finish,\n    index,\n  }: {\n    finish: () => void\n    index: number\n    entry?: IntersectionObserverEntry\n  }) => Promise<void> | void\n}\n\n/**\n * `useInfiniteScroll` is a custom hook for providing infinite scroll functionality.\n *\n * @see https://yamada-ui.com/hooks/use-infinite-scroll\n */\nexport const useInfiniteScroll = <T extends HTMLElement = HTMLDivElement>({\n  behavior,\n  disabled = false,\n  indexRef: indexRefProp,\n  initialLoad = false,\n  orientation = \"vertical\",\n  resetRef,\n  reverse = false,\n  rootMargin,\n  rootRef,\n  startIndex = initialLoad ? 0 : 1,\n  threshold,\n  onLoad: onLoadProp,\n}: UseInfiniteScrollProps = {}) => {\n  const ref = useRef<T>(null)\n  const indexRef = useRef<number>(startIndex)\n  const processingRef = useRef<boolean>(false)\n  const observerRef = useRef<IntersectionObserver | undefined>(undefined)\n  const mountedRef = useRef<boolean>(false)\n  const prevScrollPosition = useRef<number>(0)\n  const [finish, setFinish] = useState<boolean>(false)\n  const onLoad = useCallbackRef(onLoadProp)\n  const vertical = orientation === \"vertical\"\n  const options: IntersectionObserverInit = useMemo(() => {\n    const root = rootRef?.current\n\n    return { root, rootMargin, threshold }\n  }, [rootMargin, rootRef, threshold])\n\n  const onReset = useCallback(\n    (index = 1, runScroll = true) => {\n      indexRef.current = index\n\n      setFinish(false)\n\n      if (runScroll) {\n        const root = rootRef?.current\n\n        onScroll({ behavior, reverse, root, vertical })\n      }\n\n      if (disabled) return\n\n      setTimeout(() => {\n        const observer = observerRef.current\n        const el = ref.current\n\n        if (el) observer?.observe(el)\n      })\n    },\n    [disabled, reverse, rootRef, vertical, behavior],\n  )\n\n  const onFinish = useCallback(() => {\n    const observer = observerRef.current\n    const el = ref.current\n\n    if (el) observer?.unobserve(el)\n\n    setFinish(true)\n  }, [])\n\n  const createObserver = useCallback(() => {\n    const observer = new IntersectionObserver(async ([entry]) => {\n      if (!entry?.isIntersecting || processingRef.current) return\n\n      const props = { entry, finish: onFinish, index: indexRef.current }\n\n      processingRef.current = true\n\n      const root = rootRef?.current\n\n      if (root) root.ariaBusy = \"true\"\n\n      if (reverse) {\n        prevScrollPosition.current = getScrollPosition(root, vertical)\n      }\n\n      await onLoad(props)\n\n      if (reverse) {\n        const position = prevScrollPosition.current\n\n        onScroll({ position, root, vertical })\n      }\n\n      indexRef.current += 1\n      processingRef.current = false\n      if (root) root.ariaBusy = \"false\"\n    }, options)\n\n    return observer\n  }, [onFinish, onLoad, options, rootRef, reverse, vertical])\n\n  useEffect(() => {\n    const setupObserver = async () => {\n      const el = ref.current\n      const mounted = mountedRef.current\n      const index = indexRef.current\n      const root = rootRef?.current\n\n      if (initialLoad && !mounted) {\n        processingRef.current = true\n        if (root) root.ariaBusy = \"true\"\n\n        await onLoad({ finish: onFinish, index })\n\n        indexRef.current += 1\n        processingRef.current = false\n        if (root) root.ariaBusy = \"false\"\n      }\n\n      if (disabled) return\n\n      observerRef.current = createObserver()\n\n      const observer = observerRef.current\n\n      if (reverse && !mounted) {\n        const root = rootRef?.current\n\n        onScroll({ reverse, root, vertical })\n\n        mountedRef.current = true\n      }\n\n      setTimeout(() => {\n        if (el) observer.observe(el)\n      })\n\n      return () => {\n        if (el) observer.unobserve(el)\n      }\n    }\n\n    setupObserver()\n  }, [\n    createObserver,\n    initialLoad,\n    disabled,\n    reverse,\n    vertical,\n    onFinish,\n    onLoad,\n    rootRef,\n  ])\n\n  useUnmountEffect(() => (mountedRef.current = false))\n\n  assignRef(resetRef, onReset)\n  assignRef(indexRefProp, (index) => (indexRef.current = index))\n\n  return { ref, finish }\n}\n"],"mappings":"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"}