@ark-ui/react 5.38.1 → 5.39.0

package/dist/components/floating-panel/floating-panel-root.cjs

@@ -46,10 +46,12 @@ var FloatingPanelRoot = (props) => {
 		"translations"
 	]);
 	const floatingPanel = require_use_floating_panel.useFloatingPanel(useFloatingPanelProps);
+	const usePresenceProps = (0, _zag_js_react.mergeProps)({ present: floatingPanel.open }, presenceProps);
+	const presence = require_use_presence.usePresence(usePresenceProps);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_floating_panel_context.FloatingPanelProvider, {
 		value: floatingPanel,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_presence_context.PresenceProvider, {
-			value: require_use_presence.usePresence((0, _zag_js_react.mergeProps)({ present: floatingPanel.open }, presenceProps)),
+			value: presence,
 			children: localProps.children
 		})
 	});

package/dist/components/floating-panel/floating-panel-root.js

@@ -46,10 +46,12 @@ var FloatingPanelRoot = (props) => {
 		"translations"
 	]);
 	const floatingPanel = useFloatingPanel(useFloatingPanelProps);
+	const usePresenceProps = mergeProps({ present: floatingPanel.open }, presenceProps);
+	const presence = usePresence(usePresenceProps);
 	return /* @__PURE__ */ jsx(FloatingPanelProvider, {
 		value: floatingPanel,
 		children: /* @__PURE__ */ jsx(PresenceProvider, {
-			value: usePresence(mergeProps({ present: floatingPanel.open }, presenceProps)),
+			value: presence,
 			children: localProps.children
 		})
 	});

package/dist/components/floating-panel/floating-panel-stage-trigger.cjs

@@ -9,7 +9,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 var splitStageTriggerProps = require_create_split_props.createSplitProps();
 var FloatingPanelStageTrigger = (0, react.forwardRef)((props, ref) => {
 	const [stage, localProps] = splitStageTriggerProps(props, ["stage"]);
-	const mergedProps = (0, _zag_js_react.mergeProps)(require_use_floating_panel_context.useFloatingPanelContext().getStageTriggerProps(stage), localProps);
+	const floatingPanel = require_use_floating_panel_context.useFloatingPanelContext();
+	const mergedProps = (0, _zag_js_react.mergeProps)(floatingPanel.getStageTriggerProps(stage), localProps);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.button, {
 		...mergedProps,
 		ref

package/dist/components/floating-panel/floating-panel-stage-trigger.js

@@ -9,7 +9,8 @@ import { jsx } from "react/jsx-runtime";
 var splitStageTriggerProps = createSplitProps();
 var FloatingPanelStageTrigger = forwardRef((props, ref) => {
 	const [stage, localProps] = splitStageTriggerProps(props, ["stage"]);
-	const mergedProps = mergeProps(useFloatingPanelContext().getStageTriggerProps(stage), localProps);
+	const floatingPanel = useFloatingPanelContext();
+	const mergedProps = mergeProps(floatingPanel.getStageTriggerProps(stage), localProps);
 	return /* @__PURE__ */ jsx(ark.button, {
 		...mergedProps,
 		ref

package/dist/components/floating-panel/floating-panel-title.cjs

@@ -6,7 +6,8 @@ let _zag_js_react = require("@zag-js/react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/floating-panel/floating-panel-title.tsx
 var FloatingPanelTitle = (0, react.forwardRef)((props, ref) => {
-	const mergedProps = (0, _zag_js_react.mergeProps)(require_use_floating_panel_context.useFloatingPanelContext().getTitleProps(), props);
+	const floatingPanel = require_use_floating_panel_context.useFloatingPanelContext();
+	const mergedProps = (0, _zag_js_react.mergeProps)(floatingPanel.getTitleProps(), props);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.h2, {
 		...mergedProps,
 		ref

package/dist/components/floating-panel/floating-panel-title.js

@@ -6,7 +6,8 @@ import { mergeProps } from "@zag-js/react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/floating-panel/floating-panel-title.tsx
 var FloatingPanelTitle = forwardRef((props, ref) => {
-	const mergedProps = mergeProps(useFloatingPanelContext().getTitleProps(), props);
+	const floatingPanel = useFloatingPanelContext();
+	const mergedProps = mergeProps(floatingPanel.getTitleProps(), props);
 	return /* @__PURE__ */ jsx(ark.h2, {
 		...mergedProps,
 		ref

package/dist/components/format/format-byte.cjs

@@ -6,10 +6,11 @@ let _zag_js_i18n_utils = require("@zag-js/i18n-utils");
 //#region src/components/format/format-byte.tsx
 var FormatByte = (props) => {
 	const { locale } = require_use_locale_context.useLocaleContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: (0, react.useMemo)(() => {
+	const text = (0, react.useMemo)(() => {
 		const { value, ...intlOptions } = props;
 		return (0, _zag_js_i18n_utils.formatBytes)(value, locale, intlOptions);
-	}, [props, locale]) });
+	}, [props, locale]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: text });
 };
 FormatByte.displayName = "FormatByte";
 //#endregion

package/dist/components/format/format-byte.js

@@ -6,10 +6,11 @@ import { formatBytes } from "@zag-js/i18n-utils";
 //#region src/components/format/format-byte.tsx
 var FormatByte = (props) => {
 	const { locale } = useLocaleContext();
-	return /* @__PURE__ */ jsx(Fragment$1, { children: useMemo(() => {
+	const text = useMemo(() => {
 		const { value, ...intlOptions } = props;
 		return formatBytes(value, locale, intlOptions);
-	}, [props, locale]) });
+	}, [props, locale]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: text });
 };
 FormatByte.displayName = "FormatByte";
 //#endregion

package/dist/components/format/format-number.cjs

@@ -6,10 +6,11 @@ let _zag_js_i18n_utils = require("@zag-js/i18n-utils");
 //#region src/components/format/format-number.tsx
 var FormatNumber = (props) => {
 	const { locale } = require_use_locale_context.useLocaleContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: (0, react.useMemo)(() => {
+	const text = (0, react.useMemo)(() => {
 		const { value, ...intlOptions } = props;
 		return (0, _zag_js_i18n_utils.formatNumber)(value, locale, intlOptions);
-	}, [props, locale]) });
+	}, [props, locale]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: text });
 };
 FormatNumber.displayName = "FormatNumber";
 //#endregion

package/dist/components/format/format-number.js

@@ -6,10 +6,11 @@ import { formatNumber } from "@zag-js/i18n-utils";
 //#region src/components/format/format-number.tsx
 var FormatNumber = (props) => {
 	const { locale } = useLocaleContext();
-	return /* @__PURE__ */ jsx(Fragment$1, { children: useMemo(() => {
+	const text = useMemo(() => {
 		const { value, ...intlOptions } = props;
 		return formatNumber(value, locale, intlOptions);
-	}, [props, locale]) });
+	}, [props, locale]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: text });
 };
 FormatNumber.displayName = "FormatNumber";
 //#endregion

package/dist/components/format/format-relative-time.cjs

@@ -6,10 +6,11 @@ let _zag_js_i18n_utils = require("@zag-js/i18n-utils");
 //#region src/components/format/format-relative-time.tsx
 var FormatRelativeTime = (props) => {
 	const { locale } = require_use_locale_context.useLocaleContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: (0, react.useMemo)(() => {
+	const text = (0, react.useMemo)(() => {
 		const { value, ...intlOptions } = props;
 		return (0, _zag_js_i18n_utils.formatRelativeTime)(value, locale, intlOptions);
-	}, [props, locale]) });
+	}, [props, locale]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: text });
 };
 FormatRelativeTime.displayName = "FormatRelativeTime";
 //#endregion

package/dist/components/format/format-relative-time.js

@@ -6,10 +6,11 @@ import { formatRelativeTime } from "@zag-js/i18n-utils";
 //#region src/components/format/format-relative-time.tsx
 var FormatRelativeTime = (props) => {
 	const { locale } = useLocaleContext();
-	return /* @__PURE__ */ jsx(Fragment$1, { children: useMemo(() => {
+	const text = useMemo(() => {
 		const { value, ...intlOptions } = props;
 		return formatRelativeTime(value, locale, intlOptions);
-	}, [props, locale]) });
+	}, [props, locale]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: text });
 };
 FormatRelativeTime.displayName = "FormatRelativeTime";
 //#endregion

package/dist/components/format/format-time.cjs

@@ -6,10 +6,11 @@ let _zag_js_i18n_utils = require("@zag-js/i18n-utils");
 //#region src/components/format/format-time.tsx
 var FormatTime = (props) => {
 	const { locale } = require_use_locale_context.useLocaleContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: (0, react.useMemo)(() => {
+	const text = (0, react.useMemo)(() => {
 		const { value, ...intlOptions } = props;
 		return (0, _zag_js_i18n_utils.formatTime)(value, locale, intlOptions);
-	}, [props, locale]) });
+	}, [props, locale]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: text });
 };
 FormatTime.displayName = "FormatTime";
 //#endregion

package/dist/components/format/format-time.js

@@ -6,10 +6,11 @@ import { formatTime } from "@zag-js/i18n-utils";
 //#region src/components/format/format-time.tsx
 var FormatTime = (props) => {
 	const { locale } = useLocaleContext();
-	return /* @__PURE__ */ jsx(Fragment$1, { children: useMemo(() => {
+	const text = useMemo(() => {
 		const { value, ...intlOptions } = props;
 		return formatTime(value, locale, intlOptions);
-	}, [props, locale]) });
+	}, [props, locale]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: text });
 };
 FormatTime.displayName = "FormatTime";
 //#endregion

package/dist/components/highlight/highlight.cjs

@@ -13,7 +13,8 @@ var Highlight = (props) => {
 		"matchAll",
 		"exactMatch"
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: require_use_highlight.useHighlight(highlightProps).map(({ text, match }, i) => match ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mark", {
+	const chunks = require_use_highlight.useHighlight(highlightProps);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: chunks.map(({ text, match }, i) => match ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mark", {
 		...localProps,
 		children: text
 	}, i) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: text }, i)) });

package/dist/components/highlight/highlight.js

@@ -13,7 +13,8 @@ var Highlight = (props) => {
 		"matchAll",
 		"exactMatch"
 	]);
-	return /* @__PURE__ */ jsx(Fragment, { children: useHighlight(highlightProps).map(({ text, match }, i) => match ? /* @__PURE__ */ jsx("mark", {
+	const chunks = useHighlight(highlightProps);
+	return /* @__PURE__ */ jsx(Fragment, { children: chunks.map(({ text, match }, i) => match ? /* @__PURE__ */ jsx("mark", {
 		...localProps,
 		children: text
 	}, i) : /* @__PURE__ */ jsx(Fragment, { children: text }, i)) });

package/dist/components/hover-card/hover-card-arrow-tip.cjs

@@ -6,7 +6,8 @@ let _zag_js_react = require("@zag-js/react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/hover-card/hover-card-arrow-tip.tsx
 var HoverCardArrowTip = (0, react.forwardRef)((props, ref) => {
-	const mergedProps = (0, _zag_js_react.mergeProps)(require_use_hover_card_context.useHoverCardContext().getArrowTipProps(), props);
+	const hoverCard = require_use_hover_card_context.useHoverCardContext();
+	const mergedProps = (0, _zag_js_react.mergeProps)(hoverCard.getArrowTipProps(), props);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
 		...mergedProps,
 		ref

package/dist/components/hover-card/hover-card-arrow-tip.js

@@ -6,7 +6,8 @@ import { mergeProps } from "@zag-js/react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/hover-card/hover-card-arrow-tip.tsx
 var HoverCardArrowTip = forwardRef((props, ref) => {
-	const mergedProps = mergeProps(useHoverCardContext().getArrowTipProps(), props);
+	const hoverCard = useHoverCardContext();
+	const mergedProps = mergeProps(hoverCard.getArrowTipProps(), props);
 	return /* @__PURE__ */ jsx(ark.div, {
 		...mergedProps,
 		ref

package/dist/components/hover-card/hover-card-arrow.cjs

@@ -6,7 +6,8 @@ let _zag_js_react = require("@zag-js/react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/hover-card/hover-card-arrow.tsx
 var HoverCardArrow = (0, react.forwardRef)((props, ref) => {
-	const mergedProps = (0, _zag_js_react.mergeProps)(require_use_hover_card_context.useHoverCardContext().getArrowProps(), props);
+	const hoverCard = require_use_hover_card_context.useHoverCardContext();
+	const mergedProps = (0, _zag_js_react.mergeProps)(hoverCard.getArrowProps(), props);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
 		...mergedProps,
 		ref

package/dist/components/hover-card/hover-card-arrow.js

@@ -6,7 +6,8 @@ import { mergeProps } from "@zag-js/react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/hover-card/hover-card-arrow.tsx
 var HoverCardArrow = forwardRef((props, ref) => {
-	const mergedProps = mergeProps(useHoverCardContext().getArrowProps(), props);
+	const hoverCard = useHoverCardContext();
+	const mergedProps = mergeProps(hoverCard.getArrowProps(), props);
 	return /* @__PURE__ */ jsx(ark.div, {
 		...mergedProps,
 		ref

package/dist/components/hover-card/hover-card-positioner.cjs

@@ -7,7 +7,8 @@ let _zag_js_react = require("@zag-js/react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/hover-card/hover-card-positioner.tsx
 var HoverCardPositioner = (0, react.forwardRef)((props, ref) => {
-	const mergedProps = (0, _zag_js_react.mergeProps)(require_use_hover_card_context.useHoverCardContext().getPositionerProps(), props);
+	const hoverCard = require_use_hover_card_context.useHoverCardContext();
+	const mergedProps = (0, _zag_js_react.mergeProps)(hoverCard.getPositionerProps(), props);
 	if (require_use_presence_context.usePresenceContext().unmounted) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
 		...mergedProps,

package/dist/components/hover-card/hover-card-positioner.js

@@ -7,7 +7,8 @@ import { mergeProps } from "@zag-js/react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/hover-card/hover-card-positioner.tsx
 var HoverCardPositioner = forwardRef((props, ref) => {
-	const mergedProps = mergeProps(useHoverCardContext().getPositionerProps(), props);
+	const hoverCard = useHoverCardContext();
+	const mergedProps = mergeProps(hoverCard.getPositionerProps(), props);
 	if (usePresenceContext().unmounted) return null;
 	return /* @__PURE__ */ jsx(ark.div, {
 		...mergedProps,

package/dist/components/hover-card/hover-card-root-provider.cjs

@@ -8,10 +8,11 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/hover-card/hover-card-root-provider.tsx
 var HoverCardRootProvider = (props) => {
 	const [presenceProps, { value: hoverCard, children }] = require_split_presence_props.splitPresenceProps(props);
+	const presence = require_use_presence.usePresence((0, _zag_js_react.mergeProps)({ present: hoverCard.open }, presenceProps));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_hover_card_context.HoverCardProvider, {
 		value: hoverCard,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_presence_context.PresenceProvider, {
-			value: require_use_presence.usePresence((0, _zag_js_react.mergeProps)({ present: hoverCard.open }, presenceProps)),
+			value: presence,
 			children
 		})
 	});

package/dist/components/hover-card/hover-card-root-provider.js

@@ -8,10 +8,11 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/hover-card/hover-card-root-provider.tsx
 var HoverCardRootProvider = (props) => {
 	const [presenceProps, { value: hoverCard, children }] = splitPresenceProps(props);
+	const presence = usePresence(mergeProps({ present: hoverCard.open }, presenceProps));
 	return /* @__PURE__ */ jsx(HoverCardProvider, {
 		value: hoverCard,
 		children: /* @__PURE__ */ jsx(PresenceProvider, {
-			value: usePresence(mergeProps({ present: hoverCard.open }, presenceProps)),
+			value: presence,
 			children
 		})
 	});

package/dist/components/hover-card/hover-card-root.cjs

@@ -10,10 +10,11 @@ let react_jsx_runtime = require("react/jsx-runtime");
 var HoverCardRoot = (props) => {
 	const [presenceProps, { children, ...localProps }] = require_split_presence_props.splitPresenceProps(props);
 	const hoverCard = require_use_hover_card.useHoverCard(localProps);
+	const presence = require_use_presence.usePresence((0, _zag_js_react.mergeProps)({ present: hoverCard.open }, presenceProps));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_hover_card_context.HoverCardProvider, {
 		value: hoverCard,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_presence_context.PresenceProvider, {
-			value: require_use_presence.usePresence((0, _zag_js_react.mergeProps)({ present: hoverCard.open }, presenceProps)),
+			value: presence,
 			children
 		})
 	});

package/dist/components/hover-card/hover-card-root.js

@@ -10,10 +10,11 @@ import { jsx } from "react/jsx-runtime";
 var HoverCardRoot = (props) => {
 	const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
 	const hoverCard = useHoverCard(localProps);
+	const presence = usePresence(mergeProps({ present: hoverCard.open }, presenceProps));
 	return /* @__PURE__ */ jsx(HoverCardProvider, {
 		value: hoverCard,
 		children: /* @__PURE__ */ jsx(PresenceProvider, {
-			value: usePresence(mergeProps({ present: hoverCard.open }, presenceProps)),
+			value: presence,
 			children
 		})
 	});

package/dist/components/hover-card/hover-card-trigger.cjs

@@ -9,7 +9,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 var splitTriggerProps = require_create_split_props.createSplitProps();
 var HoverCardTrigger = (0, react.forwardRef)((props, ref) => {
 	const [triggerProps, localProps] = splitTriggerProps(props, ["value"]);
-	const mergedProps = (0, _zag_js_react.mergeProps)(require_use_hover_card_context.useHoverCardContext().getTriggerProps(triggerProps), localProps);
+	const hoverCard = require_use_hover_card_context.useHoverCardContext();
+	const mergedProps = (0, _zag_js_react.mergeProps)(hoverCard.getTriggerProps(triggerProps), localProps);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.button, {
 		...mergedProps,
 		ref

package/dist/components/hover-card/hover-card-trigger.js

@@ -9,7 +9,8 @@ import { jsx } from "react/jsx-runtime";
 var splitTriggerProps = createSplitProps();
 var HoverCardTrigger = forwardRef((props, ref) => {
 	const [triggerProps, localProps] = splitTriggerProps(props, ["value"]);
-	const mergedProps = mergeProps(useHoverCardContext().getTriggerProps(triggerProps), localProps);
+	const hoverCard = useHoverCardContext();
+	const mergedProps = mergeProps(hoverCard.getTriggerProps(triggerProps), localProps);
 	return /* @__PURE__ */ jsx(ark.button, {
 		...mergedProps,
 		ref

package/dist/components/image-cropper/image-cropper-grid.cjs

@@ -7,7 +7,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/image-cropper/image-cropper-grid.tsx
 var ImageCropperGrid = (0, react.forwardRef)((props, ref) => {
 	const { axis, ...localProps } = props;
-	const mergedProps = (0, _zag_js_react.mergeProps)(require_use_image_cropper_context.useImageCropperContext().getGridProps({ axis }), localProps);
+	const imageCropper = require_use_image_cropper_context.useImageCropperContext();
+	const mergedProps = (0, _zag_js_react.mergeProps)(imageCropper.getGridProps({ axis }), localProps);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
 		...mergedProps,
 		ref

package/dist/components/image-cropper/image-cropper-grid.js

@@ -7,7 +7,8 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/image-cropper/image-cropper-grid.tsx
 var ImageCropperGrid = forwardRef((props, ref) => {
 	const { axis, ...localProps } = props;
-	const mergedProps = mergeProps(useImageCropperContext().getGridProps({ axis }), localProps);
+	const imageCropper = useImageCropperContext();
+	const mergedProps = mergeProps(imageCropper.getGridProps({ axis }), localProps);
 	return /* @__PURE__ */ jsx(ark.div, {
 		...mergedProps,
 		ref

package/dist/components/image-cropper/image-cropper-handle.cjs

@@ -7,7 +7,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/image-cropper/image-cropper-handle.tsx
 var ImageCropperHandle = (0, react.forwardRef)((props, ref) => {
 	const { position, ...localProps } = props;
-	const mergedProps = (0, _zag_js_react.mergeProps)(require_use_image_cropper_context.useImageCropperContext().getHandleProps({ position }), localProps);
+	const imageCropper = require_use_image_cropper_context.useImageCropperContext();
+	const mergedProps = (0, _zag_js_react.mergeProps)(imageCropper.getHandleProps({ position }), localProps);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
 		...mergedProps,
 		ref

package/dist/components/image-cropper/image-cropper-handle.js

@@ -7,7 +7,8 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/image-cropper/image-cropper-handle.tsx
 var ImageCropperHandle = forwardRef((props, ref) => {
 	const { position, ...localProps } = props;
-	const mergedProps = mergeProps(useImageCropperContext().getHandleProps({ position }), localProps);
+	const imageCropper = useImageCropperContext();
+	const mergedProps = mergeProps(imageCropper.getHandleProps({ position }), localProps);
 	return /* @__PURE__ */ jsx(ark.div, {
 		...mergedProps,
 		ref

package/dist/components/image-cropper/image-cropper-image.cjs

@@ -6,7 +6,8 @@ let _zag_js_react = require("@zag-js/react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/image-cropper/image-cropper-image.tsx
 var ImageCropperImage = (0, react.forwardRef)((props, ref) => {
-	const mergedProps = (0, _zag_js_react.mergeProps)(require_use_image_cropper_context.useImageCropperContext().getImageProps(), props);
+	const imageCropper = require_use_image_cropper_context.useImageCropperContext();
+	const mergedProps = (0, _zag_js_react.mergeProps)(imageCropper.getImageProps(), props);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.img, {
 		...mergedProps,
 		ref

package/dist/components/image-cropper/image-cropper-image.js

@@ -6,7 +6,8 @@ import { mergeProps } from "@zag-js/react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/image-cropper/image-cropper-image.tsx
 var ImageCropperImage = forwardRef((props, ref) => {
-	const mergedProps = mergeProps(useImageCropperContext().getImageProps(), props);
+	const imageCropper = useImageCropperContext();
+	const mergedProps = mergeProps(imageCropper.getImageProps(), props);
 	return /* @__PURE__ */ jsx(ark.img, {
 		...mergedProps,
 		ref

package/dist/components/image-cropper/image-cropper-selection.cjs

@@ -6,7 +6,8 @@ let _zag_js_react = require("@zag-js/react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/image-cropper/image-cropper-selection.tsx
 var ImageCropperSelection = (0, react.forwardRef)((props, ref) => {
-	const mergedProps = (0, _zag_js_react.mergeProps)(require_use_image_cropper_context.useImageCropperContext().getSelectionProps(), props);
+	const imageCropper = require_use_image_cropper_context.useImageCropperContext();
+	const mergedProps = (0, _zag_js_react.mergeProps)(imageCropper.getSelectionProps(), props);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
 		...mergedProps,
 		ref

package/dist/components/image-cropper/image-cropper-selection.js

@@ -6,7 +6,8 @@ import { mergeProps } from "@zag-js/react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/image-cropper/image-cropper-selection.tsx
 var ImageCropperSelection = forwardRef((props, ref) => {
-	const mergedProps = mergeProps(useImageCropperContext().getSelectionProps(), props);
+	const imageCropper = useImageCropperContext();
+	const mergedProps = mergeProps(imageCropper.getSelectionProps(), props);
 	return /* @__PURE__ */ jsx(ark.div, {
 		...mergedProps,
 		ref

package/dist/components/image-cropper/image-cropper-viewport.cjs

@@ -6,7 +6,8 @@ let _zag_js_react = require("@zag-js/react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/image-cropper/image-cropper-viewport.tsx
 var ImageCropperViewport = (0, react.forwardRef)((props, ref) => {
-	const mergedProps = (0, _zag_js_react.mergeProps)(require_use_image_cropper_context.useImageCropperContext().getViewportProps(), props);
+	const imageCropper = require_use_image_cropper_context.useImageCropperContext();
+	const mergedProps = (0, _zag_js_react.mergeProps)(imageCropper.getViewportProps(), props);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
 		...mergedProps,
 		ref

package/dist/components/image-cropper/image-cropper-viewport.js

@@ -6,7 +6,8 @@ import { mergeProps } from "@zag-js/react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/image-cropper/image-cropper-viewport.tsx
 var ImageCropperViewport = forwardRef((props, ref) => {
-	const mergedProps = mergeProps(useImageCropperContext().getViewportProps(), props);
+	const imageCropper = useImageCropperContext();
+	const mergedProps = mergeProps(imageCropper.getViewportProps(), props);
 	return /* @__PURE__ */ jsx(ark.div, {
 		...mergedProps,
 		ref

package/dist/components/index.cjs

@@ -720,6 +720,19 @@ const require_toast_root = require("./toast/toast-root.cjs");
 const require_toast_title = require("./toast/toast-title.cjs");
 const require_toaster = require("./toast/toaster.cjs");
 const require_toast = require("./toast/toast.cjs");
+const require_toc_content = require("./toc/toc-content.cjs");
+const require_use_toc_context = require("./toc/use-toc-context.cjs");
+const require_toc_context = require("./toc/toc-context.cjs");
+const require_toc_indicator = require("./toc/toc-indicator.cjs");
+const require_toc_item = require("./toc/toc-item.cjs");
+const require_toc_link = require("./toc/toc-link.cjs");
+const require_toc_list = require("./toc/toc-list.cjs");
+const require_toc_nav = require("./toc/toc-nav.cjs");
+const require_use_toc = require("./toc/use-toc.cjs");
+const require_toc_root = require("./toc/toc-root.cjs");
+const require_toc_root_provider = require("./toc/toc-root-provider.cjs");
+const require_toc_title = require("./toc/toc-title.cjs");
+const require_toc = require("./toc/toc.cjs");
 const require_use_toggle_context = require("./toggle/use-toggle-context.cjs");
 const require_toggle_context = require("./toggle/toggle-context.cjs");
 const require_toggle_indicator = require("./toggle/toggle-indicator.cjs");
@@ -801,6 +814,7 @@ let _zag_js_tabs = require("@zag-js/tabs");
 let _zag_js_tags_input = require("@zag-js/tags-input");
 let _zag_js_timer = require("@zag-js/timer");
 let _zag_js_toast = require("@zag-js/toast");
+let _zag_js_toc = require("@zag-js/toc");
 let _zag_js_toggle_group = require("@zag-js/toggle-group");
 let _zag_js_tooltip = require("@zag-js/tooltip");
 let _zag_js_tree_view = require("@zag-js/tree-view");
@@ -1615,6 +1629,22 @@ exports.ToastDescription = require_toast_description.ToastDescription;
 exports.ToastRoot = require_toast_root.ToastRoot;
 exports.ToastTitle = require_toast_title.ToastTitle;
 exports.Toaster = require_toaster.Toaster;
+Object.defineProperty(exports, "Toc", {
+	enumerable: true,
+	get: function() {
+		return require_toc.toc_exports;
+	}
+});
+exports.TocContent = require_toc_content.TocContent;
+exports.TocContext = require_toc_context.TocContext;
+exports.TocIndicator = require_toc_indicator.TocIndicator;
+exports.TocItem = require_toc_item.TocItem;
+exports.TocLink = require_toc_link.TocLink;
+exports.TocList = require_toc_list.TocList;
+exports.TocNav = require_toc_nav.TocNav;
+exports.TocRoot = require_toc_root.TocRoot;
+exports.TocRootProvider = require_toc_root_provider.TocRootProvider;
+exports.TocTitle = require_toc_title.TocTitle;
 Object.defineProperty(exports, "Toggle", {
 	enumerable: true,
 	get: function() {
@@ -1947,6 +1977,12 @@ Object.defineProperty(exports, "toastAnatomy", {
 		return _zag_js_toast.anatomy;
 	}
 });
+Object.defineProperty(exports, "tocAnatomy", {
+	enumerable: true,
+	get: function() {
+		return _zag_js_toc.anatomy;
+	}
+});
 exports.toggleAnatomy = require_toggle_anatomy.toggleAnatomy;
 Object.defineProperty(exports, "toggleGroupAnatomy", {
 	enumerable: true,
@@ -2077,6 +2113,8 @@ exports.useTagsInputItemContext = require_use_tags_input_item_context.useTagsInp
 exports.useTimer = require_use_timer.useTimer;
 exports.useTimerContext = require_use_timer_context.useTimerContext;
 exports.useToastContext = require_use_toast_context.useToastContext;
+exports.useToc = require_use_toc.useToc;
+exports.useTocContext = require_use_toc_context.useTocContext;
 exports.useToggle = require_use_toggle.useToggle;
 exports.useToggleContext = require_use_toggle_context.useToggleContext;
 exports.useToggleGroup = require_use_toggle_group.useToggleGroup;

package/dist/components/index.d.cts

@@ -54,6 +54,7 @@ export * from './tabs/index.js';
 export * from './tags-input/index.js';
 export * from './timer/index.js';
 export * from './toast/index.js';
+export * from './toc/index.js';
 export * from './toggle/index.js';
 export * from './toggle-group/index.js';
 export * from './tooltip/index.js';

package/dist/components/index.d.ts

@@ -54,6 +54,7 @@ export * from './tabs/index.js';
 export * from './tags-input/index.js';
 export * from './timer/index.js';
 export * from './toast/index.js';
+export * from './toc/index.js';
 export * from './toggle/index.js';
 export * from './toggle-group/index.js';
 export * from './tooltip/index.js';