@ark-ui/react 5.37.1 → 5.38.0

package/dist/components/switch/switch.cjs

@@ -17,6 +17,13 @@ var switch_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Thumb: () => require_switch_thumb.SwitchThumb
 });
 //#endregion
+exports.Context = require_switch_context.SwitchContext;
+exports.Control = require_switch_control.SwitchControl;
+exports.HiddenInput = require_switch_hidden_input.SwitchHiddenInput;
+exports.Label = require_switch_label.SwitchLabel;
+exports.Root = require_switch_root.SwitchRoot;
+exports.RootProvider = require_switch_root_provider.SwitchRootProvider;
+exports.Thumb = require_switch_thumb.SwitchThumb;
 Object.defineProperty(exports, "switch_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/switch/switch.js

@@ -17,4 +17,4 @@ var switch_exports = /* @__PURE__ */ __exportAll({
 	Thumb: () => SwitchThumb
 });
 //#endregion
-export { switch_exports };
+export { SwitchContext as Context, SwitchControl as Control, SwitchHiddenInput as HiddenInput, SwitchLabel as Label, SwitchRoot as Root, SwitchRootProvider as RootProvider, SwitchThumb as Thumb, switch_exports };

package/dist/components/tabs/tab-content.cjs

@@ -3,6 +3,7 @@ const require_create_split_props = require("../../utils/create-split-props.cjs")
 const require_render_strategy = require("../../utils/render-strategy.cjs");
 const require_compose_refs = require("../../utils/compose-refs.cjs");
 const require_factory = require("../factory.cjs");
+const require_presence_gate = require("../presence/presence-gate.cjs");
 const require_use_presence = require("../presence/use-presence.cjs");
 const require_use_presence_context = require("../presence/use-presence-context.cjs");
 const require_use_tabs_context = require("./use-tabs-context.cjs");
@@ -20,11 +21,15 @@ var TabContent = (0, react.forwardRef)((props, ref) => {
 		immediate: true
 	});
 	const mergedProps = (0, _zag_js_react.mergeProps)(tabs.getContentProps(contentProps), presence.getPresenceProps(), localProps);
+	const composedRefs = require_compose_refs.useComposedRefs(presence.ref, ref);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_presence_context.PresenceProvider, {
 		value: presence,
-		children: presence.unmounted ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
-			...mergedProps,
-			ref: require_compose_refs.composeRefs(presence.ref, ref)
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_presence_gate.PresenceGate, {
+			presence,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
+				...mergedProps,
+				ref: composedRefs
+			})
 		})
 	});
 });

package/dist/components/tabs/tab-content.js

@@ -1,8 +1,9 @@
 "use client";
 import { createSplitProps } from "../../utils/create-split-props.js";
 import { useRenderStrategyPropsContext } from "../../utils/render-strategy.js";
-import { composeRefs } from "../../utils/compose-refs.js";
+import { useComposedRefs } from "../../utils/compose-refs.js";
 import { ark } from "../factory.js";
+import { PresenceGate } from "../presence/presence-gate.js";
 import { usePresence } from "../presence/use-presence.js";
 import { PresenceProvider } from "../presence/use-presence-context.js";
 import { useTabsContext } from "./use-tabs-context.js";
@@ -20,11 +21,15 @@ var TabContent = forwardRef((props, ref) => {
 		immediate: true
 	});
 	const mergedProps = mergeProps(tabs.getContentProps(contentProps), presence.getPresenceProps(), localProps);
+	const composedRefs = useComposedRefs(presence.ref, ref);
 	return /* @__PURE__ */ jsx(PresenceProvider, {
 		value: presence,
-		children: presence.unmounted ? null : /* @__PURE__ */ jsx(ark.div, {
-			...mergedProps,
-			ref: composeRefs(presence.ref, ref)
+		children: /* @__PURE__ */ jsx(PresenceGate, {
+			presence,
+			children: /* @__PURE__ */ jsx(ark.div, {
+				...mergedProps,
+				ref: composedRefs
+			})
 		})
 	});
 });

package/dist/components/tabs/tabs.cjs

@@ -17,6 +17,13 @@ var tabs_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Trigger: () => require_tab_trigger.TabTrigger
 });
 //#endregion
+exports.Content = require_tab_content.TabContent;
+exports.Context = require_tabs_context.TabsContext;
+exports.Indicator = require_tab_indicator.TabIndicator;
+exports.List = require_tab_list.TabList;
+exports.Root = require_tabs_root.TabsRoot;
+exports.RootProvider = require_tabs_root_provider.TabsRootProvider;
+exports.Trigger = require_tab_trigger.TabTrigger;
 Object.defineProperty(exports, "tabs_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/tabs/tabs.js

@@ -17,4 +17,4 @@ var tabs_exports = /* @__PURE__ */ __exportAll({
 	Trigger: () => TabTrigger
 });
 //#endregion
-export { tabs_exports };
+export { TabContent as Content, TabsContext as Context, TabIndicator as Indicator, TabList as List, TabsRoot as Root, TabsRootProvider as RootProvider, TabTrigger as Trigger, tabs_exports };

package/dist/components/tags-input/tags-input.cjs

@@ -31,6 +31,20 @@ var tags_input_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	RootProvider: () => require_tags_input_root_provider.TagsInputRootProvider
 });
 //#endregion
+exports.ClearTrigger = require_tags_input_clear_trigger.TagsInputClearTrigger;
+exports.Context = require_tags_input_context.TagsInputContext;
+exports.Control = require_tags_input_control.TagsInputControl;
+exports.HiddenInput = require_tags_input_hidden_input.TagsInputHiddenInput;
+exports.Input = require_tags_input_input.TagsInputInput;
+exports.Item = require_tags_input_item.TagsInputItem;
+exports.ItemContext = require_tags_input_item_context.TagsInputItemContext;
+exports.ItemDeleteTrigger = require_tags_input_item_delete_trigger.TagsInputItemDeleteTrigger;
+exports.ItemInput = require_tags_input_item_input.TagsInputItemInput;
+exports.ItemPreview = require_tags_input_item_preview.TagsInputItemPreview;
+exports.ItemText = require_tags_input_item_text.TagsInputItemText;
+exports.Label = require_tags_input_label.TagsInputLabel;
+exports.Root = require_tags_input_root.TagsInputRoot;
+exports.RootProvider = require_tags_input_root_provider.TagsInputRootProvider;
 Object.defineProperty(exports, "tags_input_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/tags-input/tags-input.js

@@ -31,4 +31,4 @@ var tags_input_exports = /* @__PURE__ */ __exportAll({
 	RootProvider: () => TagsInputRootProvider
 });
 //#endregion
-export { tags_input_exports };
+export { TagsInputClearTrigger as ClearTrigger, TagsInputContext as Context, TagsInputControl as Control, TagsInputHiddenInput as HiddenInput, TagsInputInput as Input, TagsInputItem as Item, TagsInputItemContext as ItemContext, TagsInputItemDeleteTrigger as ItemDeleteTrigger, TagsInputItemInput as ItemInput, TagsInputItemPreview as ItemPreview, TagsInputItemText as ItemText, TagsInputLabel as Label, TagsInputRoot as Root, TagsInputRootProvider as RootProvider, tags_input_exports };

package/dist/components/timer/timer.cjs

@@ -19,6 +19,14 @@ var timer_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Separator: () => require_timer_separator.TimerSeparator
 });
 //#endregion
+exports.ActionTrigger = require_timer_action_trigger.TimerActionTrigger;
+exports.Area = require_timer_area.TimerArea;
+exports.Context = require_timer_context.TimerContext;
+exports.Control = require_timer_control.TimerControl;
+exports.Item = require_timer_item.TimerItem;
+exports.Root = require_timer_root.TimerRoot;
+exports.RootProvider = require_timer_root_provider.TimerRootProvider;
+exports.Separator = require_timer_separator.TimerSeparator;
 Object.defineProperty(exports, "timer_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/timer/timer.js

@@ -19,4 +19,4 @@ var timer_exports = /* @__PURE__ */ __exportAll({
 	Separator: () => TimerSeparator
 });
 //#endregion
-export { timer_exports };
+export { TimerActionTrigger as ActionTrigger, TimerArea as Area, TimerContext as Context, TimerControl as Control, TimerItem as Item, TimerRoot as Root, TimerRootProvider as RootProvider, TimerSeparator as Separator, timer_exports };

package/dist/components/toast/create-toaster.d.cts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import * as toast from '@zag-js/toast';
+export interface CreateToasterProps extends toast.StoreProps {
+}
+export type CreateToasterReturn<T = ReactNode> = toast.Store<T>;
+export declare const createToaster: <T = ReactNode>(props: CreateToasterProps) => CreateToasterReturn<T>;

package/dist/components/toast/create-toaster.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import * as toast from '@zag-js/toast';
+export interface CreateToasterProps extends toast.StoreProps {
+}
+export type CreateToasterReturn<T = ReactNode> = toast.Store<T>;
+export declare const createToaster: <T = ReactNode>(props: CreateToasterProps) => CreateToasterReturn<T>;

package/dist/components/toast/toast.cjs

@@ -15,6 +15,12 @@ var toast_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Title: () => require_toast_title.ToastTitle
 });
 //#endregion
+exports.ActionTrigger = require_toast_action_trigger.ToastActionTrigger;
+exports.CloseTrigger = require_toast_close_trigger.ToastCloseTrigger;
+exports.Context = require_toast_context.ToastContext;
+exports.Description = require_toast_description.ToastDescription;
+exports.Root = require_toast_root.ToastRoot;
+exports.Title = require_toast_title.ToastTitle;
 Object.defineProperty(exports, "toast_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/toast/toast.js

@@ -15,4 +15,4 @@ var toast_exports = /* @__PURE__ */ __exportAll({
 	Title: () => ToastTitle
 });
 //#endregion
-export { toast_exports };
+export { ToastActionTrigger as ActionTrigger, ToastCloseTrigger as CloseTrigger, ToastContext as Context, ToastDescription as Description, ToastRoot as Root, ToastTitle as Title, toast_exports };

package/dist/{src/components → components}/toast/toaster.d.cts

@@ -5,7 +5,7 @@ import { CreateToasterReturn } from './create-toaster.js';
 import * as toast from '@zag-js/toast';
 export type ToastOptions = toast.Options<ReactNode>;
 export interface ToasterBaseProps extends PolymorphicProps, Omit<toast.GroupProps, 'store' | 'id'> {
-    toaster: CreateToasterReturn;
+    toaster: CreateToasterReturn<any>;
     children: (toast: ToastOptions) => ReactNode;
 }
 export interface ToasterProps extends Assign<HTMLProps<'div'>, ToasterBaseProps> {

package/dist/{src/components → components}/toast/toaster.d.ts

@@ -5,7 +5,7 @@ import { CreateToasterReturn } from './create-toaster.js';
 import * as toast from '@zag-js/toast';
 export type ToastOptions = toast.Options<ReactNode>;
 export interface ToasterBaseProps extends PolymorphicProps, Omit<toast.GroupProps, 'store' | 'id'> {
-    toaster: CreateToasterReturn;
+    toaster: CreateToasterReturn<any>;
     children: (toast: ToastOptions) => ReactNode;
 }
 export interface ToasterProps extends Assign<HTMLProps<'div'>, ToasterBaseProps> {

package/dist/components/toggle/toggle.cjs

@@ -11,6 +11,10 @@ var toggle_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	toggleAnatomy: () => require_toggle_anatomy.toggleAnatomy
 });
 //#endregion
+exports.Context = require_toggle_context.ToggleContext;
+exports.Indicator = require_toggle_indicator.ToggleIndicator;
+exports.Root = require_toggle_root.ToggleRoot;
+exports.toggleAnatomy = require_toggle_anatomy.toggleAnatomy;
 Object.defineProperty(exports, "toggle_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/toggle/toggle.js

@@ -11,4 +11,4 @@ var toggle_exports = /* @__PURE__ */ __exportAll({
 	toggleAnatomy: () => toggleAnatomy
 });
 //#endregion
-export { toggle_exports };
+export { ToggleContext as Context, ToggleIndicator as Indicator, ToggleRoot as Root, toggleAnatomy, toggle_exports };

package/dist/components/toggle-group/toggle-group.cjs

@@ -11,6 +11,10 @@ var toggle_group_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	RootProvider: () => require_toggle_group_root_provider.ToggleGroupRootProvider
 });
 //#endregion
+exports.Context = require_toggle_group_context.ToggleGroupContext;
+exports.Item = require_toggle_group_item.ToggleGroupItem;
+exports.Root = require_toggle_group_root.ToggleGroupRoot;
+exports.RootProvider = require_toggle_group_root_provider.ToggleGroupRootProvider;
 Object.defineProperty(exports, "toggle_group_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/toggle-group/toggle-group.js

@@ -11,4 +11,4 @@ var toggle_group_exports = /* @__PURE__ */ __exportAll({
 	RootProvider: () => ToggleGroupRootProvider
 });
 //#endregion
-export { toggle_group_exports };
+export { ToggleGroupContext as Context, ToggleGroupItem as Item, ToggleGroupRoot as Root, ToggleGroupRootProvider as RootProvider, toggle_group_exports };

package/dist/components/tooltip/tooltip-content.cjs

@@ -1,6 +1,7 @@
 "use client";
 const require_compose_refs = require("../../utils/compose-refs.cjs");
 const require_factory = require("../factory.cjs");
+const require_presence_gate = require("../presence/presence-gate.cjs");
 const require_use_presence_context = require("../presence/use-presence-context.cjs");
 const require_use_tooltip_context = require("./use-tooltip-context.cjs");
 let react = require("react");
@@ -11,10 +12,13 @@ var TooltipContent = (0, react.forwardRef)((props, ref) => {
 	const tooltip = require_use_tooltip_context.useTooltipContext();
 	const presence = require_use_presence_context.usePresenceContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(tooltip.getContentProps(), presence.getPresenceProps(), props);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
-		...mergedProps,
-		ref: require_compose_refs.composeRefs(presence.ref, ref)
+	const composedRefs = require_compose_refs.useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_presence_gate.PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
 	});
 });
 TooltipContent.displayName = "TooltipContent";

package/dist/components/tooltip/tooltip-content.js

@@ -1,6 +1,7 @@
 "use client";
-import { composeRefs } from "../../utils/compose-refs.js";
+import { useComposedRefs } from "../../utils/compose-refs.js";
 import { ark } from "../factory.js";
+import { PresenceGate } from "../presence/presence-gate.js";
 import { usePresenceContext } from "../presence/use-presence-context.js";
 import { useTooltipContext } from "./use-tooltip-context.js";
 import { forwardRef } from "react";
@@ -11,10 +12,13 @@ var TooltipContent = forwardRef((props, ref) => {
 	const tooltip = useTooltipContext();
 	const presence = usePresenceContext();
 	const mergedProps = mergeProps(tooltip.getContentProps(), presence.getPresenceProps(), props);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ jsx(ark.div, {
-		...mergedProps,
-		ref: composeRefs(presence.ref, ref)
+	const composedRefs = useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ jsx(PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ jsx(ark.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
 	});
 });
 TooltipContent.displayName = "TooltipContent";

package/dist/components/tooltip/tooltip.cjs

@@ -19,6 +19,14 @@ var tooltip_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Trigger: () => require_tooltip_trigger.TooltipTrigger
 });
 //#endregion
+exports.Arrow = require_tooltip_arrow.TooltipArrow;
+exports.ArrowTip = require_tooltip_arrow_tip.TooltipArrowTip;
+exports.Content = require_tooltip_content.TooltipContent;
+exports.Context = require_tooltip_context.TooltipContext;
+exports.Positioner = require_tooltip_positioner.TooltipPositioner;
+exports.Root = require_tooltip_root.TooltipRoot;
+exports.RootProvider = require_tooltip_root_provider.TooltipRootProvider;
+exports.Trigger = require_tooltip_trigger.TooltipTrigger;
 Object.defineProperty(exports, "tooltip_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/tooltip/tooltip.js

@@ -19,4 +19,4 @@ var tooltip_exports = /* @__PURE__ */ __exportAll({
 	Trigger: () => TooltipTrigger
 });
 //#endregion
-export { tooltip_exports };
+export { TooltipArrow as Arrow, TooltipArrowTip as ArrowTip, TooltipContent as Content, TooltipContext as Context, TooltipPositioner as Positioner, TooltipRoot as Root, TooltipRootProvider as RootProvider, TooltipTrigger as Trigger, tooltip_exports };

package/dist/components/tour/tour-backdrop.cjs

@@ -2,6 +2,7 @@
 const require_render_strategy = require("../../utils/render-strategy.cjs");
 const require_compose_refs = require("../../utils/compose-refs.cjs");
 const require_factory = require("../factory.cjs");
+const require_presence_gate = require("../presence/presence-gate.cjs");
 const require_use_presence = require("../presence/use-presence.cjs");
 const require_use_tour_context = require("./use-tour-context.cjs");
 let react = require("react");
@@ -15,11 +16,14 @@ var TourBackdrop = (0, react.forwardRef)((props, ref) => {
 		present: tour.open
 	});
 	const mergedProps = (0, _zag_js_react.mergeProps)(tour.getBackdropProps(), presence.getPresenceProps(), props);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
-		...mergedProps,
-		ref: require_compose_refs.composeRefs(presence.ref, ref),
-		hidden: !tour.step?.backdrop
+	const composedRefs = require_compose_refs.useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_presence_gate.PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
+			...mergedProps,
+			ref: composedRefs,
+			hidden: !tour.step?.backdrop
+		})
 	});
 });
 TourBackdrop.displayName = "TourBackdrop";

package/dist/components/tour/tour-backdrop.js

@@ -1,7 +1,8 @@
 "use client";
 import { useRenderStrategyPropsContext } from "../../utils/render-strategy.js";
-import { composeRefs } from "../../utils/compose-refs.js";
+import { useComposedRefs } from "../../utils/compose-refs.js";
 import { ark } from "../factory.js";
+import { PresenceGate } from "../presence/presence-gate.js";
 import { usePresence } from "../presence/use-presence.js";
 import { useTourContext } from "./use-tour-context.js";
 import { forwardRef } from "react";
@@ -15,11 +16,14 @@ var TourBackdrop = forwardRef((props, ref) => {
 		present: tour.open
 	});
 	const mergedProps = mergeProps(tour.getBackdropProps(), presence.getPresenceProps(), props);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ jsx(ark.div, {
-		...mergedProps,
-		ref: composeRefs(presence.ref, ref),
-		hidden: !tour.step?.backdrop
+	const composedRefs = useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ jsx(PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ jsx(ark.div, {
+			...mergedProps,
+			ref: composedRefs,
+			hidden: !tour.step?.backdrop
+		})
 	});
 });
 TourBackdrop.displayName = "TourBackdrop";

package/dist/components/tour/tour-content.cjs

@@ -1,6 +1,7 @@
 "use client";
 const require_compose_refs = require("../../utils/compose-refs.cjs");
 const require_factory = require("../factory.cjs");
+const require_presence_gate = require("../presence/presence-gate.cjs");
 const require_use_presence_context = require("../presence/use-presence-context.cjs");
 const require_use_tour_context = require("./use-tour-context.cjs");
 let react = require("react");
@@ -11,10 +12,13 @@ var TourContent = (0, react.forwardRef)((props, ref) => {
 	const tour = require_use_tour_context.useTourContext();
 	const presence = require_use_presence_context.usePresenceContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(tour.getContentProps(), presence.getPresenceProps(), props);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
-		...mergedProps,
-		ref: require_compose_refs.composeRefs(presence.ref, ref)
+	const composedRefs = require_compose_refs.useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_presence_gate.PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
 	});
 });
 TourContent.displayName = "TourContent";

package/dist/components/tour/tour-content.js

@@ -1,6 +1,7 @@
 "use client";
-import { composeRefs } from "../../utils/compose-refs.js";
+import { useComposedRefs } from "../../utils/compose-refs.js";
 import { ark } from "../factory.js";
+import { PresenceGate } from "../presence/presence-gate.js";
 import { usePresenceContext } from "../presence/use-presence-context.js";
 import { useTourContext } from "./use-tour-context.js";
 import { forwardRef } from "react";
@@ -11,10 +12,13 @@ var TourContent = forwardRef((props, ref) => {
 	const tour = useTourContext();
 	const presence = usePresenceContext();
 	const mergedProps = mergeProps(tour.getContentProps(), presence.getPresenceProps(), props);
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ jsx(ark.div, {
-		...mergedProps,
-		ref: composeRefs(presence.ref, ref)
+	const composedRefs = useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ jsx(PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ jsx(ark.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
 	});
 });
 TourContent.displayName = "TourContent";

package/dist/components/tour/tour-spotlight.cjs

@@ -2,6 +2,7 @@
 const require_render_strategy = require("../../utils/render-strategy.cjs");
 const require_compose_refs = require("../../utils/compose-refs.cjs");
 const require_factory = require("../factory.cjs");
+const require_presence_gate = require("../presence/presence-gate.cjs");
 const require_use_presence = require("../presence/use-presence.cjs");
 const require_use_tour_context = require("./use-tour-context.cjs");
 let react = require("react");
@@ -16,11 +17,14 @@ var TourSpotlight = (0, react.forwardRef)((props, ref) => {
 	});
 	const mergedProps = (0, _zag_js_react.mergeProps)(tour.getSpotlightProps(), presence.getPresenceProps(), props);
 	const hidden = !tour.open || !tour.step?.target?.();
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
-		...mergedProps,
-		ref: require_compose_refs.composeRefs(presence.ref, ref),
-		hidden
+	const composedRefs = require_compose_refs.useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_presence_gate.PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
+			...mergedProps,
+			ref: composedRefs,
+			hidden
+		})
 	});
 });
 TourSpotlight.displayName = "TourSpotlight";

package/dist/components/tour/tour-spotlight.js

@@ -1,7 +1,8 @@
 "use client";
 import { useRenderStrategyPropsContext } from "../../utils/render-strategy.js";
-import { composeRefs } from "../../utils/compose-refs.js";
+import { useComposedRefs } from "../../utils/compose-refs.js";
 import { ark } from "../factory.js";
+import { PresenceGate } from "../presence/presence-gate.js";
 import { usePresence } from "../presence/use-presence.js";
 import { useTourContext } from "./use-tour-context.js";
 import { forwardRef } from "react";
@@ -16,11 +17,14 @@ var TourSpotlight = forwardRef((props, ref) => {
 	});
 	const mergedProps = mergeProps(tour.getSpotlightProps(), presence.getPresenceProps(), props);
 	const hidden = !tour.open || !tour.step?.target?.();
-	if (presence.unmounted) return null;
-	return /* @__PURE__ */ jsx(ark.div, {
-		...mergedProps,
-		ref: composeRefs(presence.ref, ref),
-		hidden
+	const composedRefs = useComposedRefs(presence.ref, ref);
+	return /* @__PURE__ */ jsx(PresenceGate, {
+		presence,
+		children: /* @__PURE__ */ jsx(ark.div, {
+			...mergedProps,
+			ref: composedRefs,
+			hidden
+		})
 	});
 });
 TourSpotlight.displayName = "TourSpotlight";

package/dist/{src/components → components}/tour/tour.anatomy.d.cts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const tourAnatomy: AnatomyInstance<"control" | "progressText" | "positioner" | "content" | "title" | "actionTrigger" | "closeTrigger" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
+export declare const tourAnatomy: AnatomyInstance<"control" | "progressText" | "positioner" | "content" | "actionTrigger" | "closeTrigger" | "title" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;

package/dist/{src/components → components}/tour/tour.anatomy.d.ts

@@ -1,2 +1,2 @@
 import { AnatomyInstance } from '@zag-js/anatomy';
-export declare const tourAnatomy: AnatomyInstance<"control" | "progressText" | "positioner" | "content" | "title" | "actionTrigger" | "closeTrigger" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
+export declare const tourAnatomy: AnatomyInstance<"control" | "progressText" | "positioner" | "content" | "actionTrigger" | "closeTrigger" | "title" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;

package/dist/components/tour/tour.cjs

@@ -33,6 +33,21 @@ var tour_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Title: () => require_tour_title.TourTitle
 });
 //#endregion
+exports.ActionTrigger = require_tour_action_trigger.TourActionTrigger;
+exports.Actions = require_tour_actions.TourActions;
+exports.Arrow = require_tour_arrow.TourArrow;
+exports.ArrowTip = require_tour_arrow_tip.TourArrowTip;
+exports.Backdrop = require_tour_backdrop.TourBackdrop;
+exports.CloseTrigger = require_tour_close_trigger.TourCloseTrigger;
+exports.Content = require_tour_content.TourContent;
+exports.Context = require_tour_context.TourContext;
+exports.Control = require_tour_control.TourControl;
+exports.Description = require_tour_description.TourDescription;
+exports.Positioner = require_tour_positioner.TourPositioner;
+exports.ProgressText = require_tour_progress_text.TourProgressText;
+exports.Root = require_tour_root.TourRoot;
+exports.Spotlight = require_tour_spotlight.TourSpotlight;
+exports.Title = require_tour_title.TourTitle;
 Object.defineProperty(exports, "tour_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/tour/tour.js

@@ -33,4 +33,4 @@ var tour_exports = /* @__PURE__ */ __exportAll({
 	Title: () => TourTitle
 });
 //#endregion
-export { tour_exports };
+export { TourActionTrigger as ActionTrigger, TourActions as Actions, TourArrow as Arrow, TourArrowTip as ArrowTip, TourBackdrop as Backdrop, TourCloseTrigger as CloseTrigger, TourContent as Content, TourContext as Context, TourControl as Control, TourDescription as Description, TourPositioner as Positioner, TourProgressText as ProgressText, TourRoot as Root, TourSpotlight as Spotlight, TourTitle as Title, tour_exports };

package/dist/components/tree-view/tree-view.cjs

@@ -43,6 +43,26 @@ var tree_view_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Tree: () => require_tree_view_tree.TreeViewTree
 });
 //#endregion
+exports.Branch = require_tree_view_branch.TreeViewBranch;
+exports.BranchContent = require_tree_view_branch_content.TreeViewBranchContent;
+exports.BranchControl = require_tree_view_branch_control.TreeViewBranchControl;
+exports.BranchIndentGuide = require_tree_view_branch_indent_guide.TreeViewBranchIndentGuide;
+exports.BranchIndicator = require_tree_view_branch_indicator.TreeViewBranchIndicator;
+exports.BranchText = require_tree_view_branch_text.TreeViewBranchText;
+exports.BranchTrigger = require_tree_view_branch_trigger.TreeViewBranchTrigger;
+exports.Context = require_tree_view_context.TreeViewContext;
+exports.Item = require_tree_view_item.TreeViewItem;
+exports.ItemIndicator = require_tree_view_item_indicator.TreeViewItemIndicator;
+exports.ItemText = require_tree_view_item_text.TreeViewItemText;
+exports.Label = require_tree_view_label.TreeViewLabel;
+exports.NodeCheckbox = require_tree_view_node_checkbox.TreeViewNodeCheckbox;
+exports.NodeCheckboxIndicator = require_tree_view_node_checkbox_indicator.TreeViewNodeCheckboxIndicator;
+exports.NodeContext = require_tree_view_node_context.TreeViewNodeContext;
+exports.NodeProvider = require_tree_view_node_provider.TreeViewNodeProvider;
+exports.NodeRenameInput = require_tree_view_node_rename_input.TreeViewNodeRenameInput;
+exports.Root = require_tree_view_root.TreeViewRoot;
+exports.RootProvider = require_tree_view_root_provider.TreeViewRootProvider;
+exports.Tree = require_tree_view_tree.TreeViewTree;
 Object.defineProperty(exports, "tree_view_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/tree-view/tree-view.js

@@ -43,4 +43,4 @@ var tree_view_exports = /* @__PURE__ */ __exportAll({
 	Tree: () => TreeViewTree
 });
 //#endregion
-export { tree_view_exports };
+export { TreeViewBranch as Branch, TreeViewBranchContent as BranchContent, TreeViewBranchControl as BranchControl, TreeViewBranchIndentGuide as BranchIndentGuide, TreeViewBranchIndicator as BranchIndicator, TreeViewBranchText as BranchText, TreeViewBranchTrigger as BranchTrigger, TreeViewContext as Context, TreeViewItem as Item, TreeViewItemIndicator as ItemIndicator, TreeViewItemText as ItemText, TreeViewLabel as Label, TreeViewNodeCheckbox as NodeCheckbox, TreeViewNodeCheckboxIndicator as NodeCheckboxIndicator, TreeViewNodeContext as NodeContext, TreeViewNodeProvider as NodeProvider, TreeViewNodeRenameInput as NodeRenameInput, TreeViewRoot as Root, TreeViewRootProvider as RootProvider, TreeViewTree as Tree, tree_view_exports };

package/dist/utils/compose-refs.cjs

@@ -1,3 +1,4 @@
+let react = require("react");
 //#region src/utils/compose-refs.ts
 function composeRefs(...refs) {
 	return (node) => {
@@ -11,5 +12,9 @@ function composeRefs(...refs) {
 		};
 	};
 }
+function useComposedRefs(...refs) {
+	return (0, react.useCallback)(composeRefs(...refs), refs);
+}
 //#endregion
 exports.composeRefs = composeRefs;
+exports.useComposedRefs = useComposedRefs;

package/dist/utils/compose-refs.d.cts

@@ -0,0 +1,5 @@
+import { Ref, RefCallback } from 'react';
+type PossibleRef<T> = Ref<T | null> | undefined;
+export declare function composeRefs<T>(...refs: PossibleRef<T>[]): RefCallback<T>;
+export declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): RefCallback<T>;
+export {};

package/dist/utils/compose-refs.d.ts

@@ -0,0 +1,5 @@
+import { Ref, RefCallback } from 'react';
+type PossibleRef<T> = Ref<T | null> | undefined;
+export declare function composeRefs<T>(...refs: PossibleRef<T>[]): RefCallback<T>;
+export declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): RefCallback<T>;
+export {};

package/dist/utils/compose-refs.js

@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 //#region src/utils/compose-refs.ts
 function composeRefs(...refs) {
 	return (node) => {
@@ -11,5 +12,8 @@ function composeRefs(...refs) {
 		};
 	};
 }
+function useComposedRefs(...refs) {
+	return useCallback(composeRefs(...refs), refs);
+}
 //#endregion
-export { composeRefs };
+export { composeRefs, useComposedRefs };