@ark-ui/react 5.37.2 → 5.38.0

package/dist/components/accordion/accordion.cjs

@@ -19,6 +19,14 @@ var accordion_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	RootProvider: () => require_accordion_root_provider.AccordionRootProvider
 });
 //#endregion
+exports.Context = require_accordion_context.AccordionContext;
+exports.Item = require_accordion_item.AccordionItem;
+exports.ItemContent = require_accordion_item_content.AccordionItemContent;
+exports.ItemContext = require_accordion_item_context.AccordionItemContext;
+exports.ItemIndicator = require_accordion_item_indicator.AccordionItemIndicator;
+exports.ItemTrigger = require_accordion_item_trigger.AccordionItemTrigger;
+exports.Root = require_accordion_root.AccordionRoot;
+exports.RootProvider = require_accordion_root_provider.AccordionRootProvider;
 Object.defineProperty(exports, "accordion_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/accordion/accordion.js

@@ -19,4 +19,4 @@ var accordion_exports = /* @__PURE__ */ __exportAll({
 	RootProvider: () => AccordionRootProvider
 });
 //#endregion
-export { accordion_exports };
+export { AccordionContext as Context, AccordionItem as Item, AccordionItemContent as ItemContent, AccordionItemContext as ItemContext, AccordionItemIndicator as ItemIndicator, AccordionItemTrigger as ItemTrigger, AccordionRoot as Root, AccordionRootProvider as RootProvider, accordion_exports };

package/dist/components/angle-slider/angle-slider.cjs

@@ -23,6 +23,16 @@ var angle_slider_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	ValueText: () => require_angle_slider_value_text.AngleSliderValueText
 });
 //#endregion
+exports.Context = require_angle_slider_context.AngleSliderContext;
+exports.Control = require_angle_slider_control.AngleSliderControl;
+exports.HiddenInput = require_angle_slider_hidden_input.AngleSliderHiddenInput;
+exports.Label = require_angle_slider_label.AngleSliderLabel;
+exports.Marker = require_angle_slider_marker.AngleSliderMarker;
+exports.MarkerGroup = require_angle_slider_marker_group.AngleSliderMarkerGroup;
+exports.Root = require_angle_slider_root.AngleSliderRoot;
+exports.RootProvider = require_angle_slider_root_provider.AngleSliderRootProvider;
+exports.Thumb = require_angle_slider_thumb.AngleSliderThumb;
+exports.ValueText = require_angle_slider_value_text.AngleSliderValueText;
 Object.defineProperty(exports, "angle_slider_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/angle-slider/angle-slider.js

@@ -23,4 +23,4 @@ var angle_slider_exports = /* @__PURE__ */ __exportAll({
 	ValueText: () => AngleSliderValueText
 });
 //#endregion
-export { angle_slider_exports };
+export { AngleSliderContext as Context, AngleSliderControl as Control, AngleSliderHiddenInput as HiddenInput, AngleSliderLabel as Label, AngleSliderMarker as Marker, AngleSliderMarkerGroup as MarkerGroup, AngleSliderRoot as Root, AngleSliderRootProvider as RootProvider, AngleSliderThumb as Thumb, AngleSliderValueText as ValueText, angle_slider_exports };

package/dist/components/avatar/avatar.cjs

@@ -13,6 +13,11 @@ var avatar_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	RootProvider: () => require_avatar_root_provider.AvatarRootProvider
 });
 //#endregion
+exports.Context = require_avatar_context.AvatarContext;
+exports.Fallback = require_avatar_fallback.AvatarFallback;
+exports.Image = require_avatar_image.AvatarImage;
+exports.Root = require_avatar_root.AvatarRoot;
+exports.RootProvider = require_avatar_root_provider.AvatarRootProvider;
 Object.defineProperty(exports, "avatar_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/avatar/avatar.js

@@ -13,4 +13,4 @@ var avatar_exports = /* @__PURE__ */ __exportAll({
 	RootProvider: () => AvatarRootProvider
 });
 //#endregion
-export { avatar_exports };
+export { AvatarContext as Context, AvatarFallback as Fallback, AvatarImage as Image, AvatarRoot as Root, AvatarRootProvider as RootProvider, avatar_exports };

package/dist/components/carousel/carousel.cjs

@@ -29,6 +29,19 @@ var carousel_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	RootProvider: () => require_carousel_root_provider.CarouselRootProvider
 });
 //#endregion
+exports.AutoplayIndicator = require_carousel_autoplay_indicator.CarouselAutoplayIndicator;
+exports.AutoplayTrigger = require_carousel_autoplay_trigger.CarouselAutoplayTrigger;
+exports.Context = require_carousel_context.CarouselContext;
+exports.Control = require_carousel_control.CarouselControl;
+exports.Indicator = require_carousel_indicator.CarouselIndicator;
+exports.IndicatorGroup = require_carousel_indicator_group.CarouselIndicatorGroup;
+exports.Item = require_carousel_item.CarouselItem;
+exports.ItemGroup = require_carousel_item_group.CarouselItemGroup;
+exports.NextTrigger = require_carousel_next_trigger.CarouselNextTrigger;
+exports.PrevTrigger = require_carousel_prev_trigger.CarouselPrevTrigger;
+exports.ProgressText = require_carousel_progress_text.CarouselProgressText;
+exports.Root = require_carousel_root.CarouselRoot;
+exports.RootProvider = require_carousel_root_provider.CarouselRootProvider;
 Object.defineProperty(exports, "carousel_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/carousel/carousel.js

@@ -29,4 +29,4 @@ var carousel_exports = /* @__PURE__ */ __exportAll({
 	RootProvider: () => CarouselRootProvider
 });
 //#endregion
-export { carousel_exports };
+export { CarouselAutoplayIndicator as AutoplayIndicator, CarouselAutoplayTrigger as AutoplayTrigger, CarouselContext as Context, CarouselControl as Control, CarouselIndicator as Indicator, CarouselIndicatorGroup as IndicatorGroup, CarouselItem as Item, CarouselItemGroup as ItemGroup, CarouselNextTrigger as NextTrigger, CarouselPrevTrigger as PrevTrigger, CarouselProgressText as ProgressText, CarouselRoot as Root, CarouselRootProvider as RootProvider, carousel_exports };

package/dist/components/checkbox/checkbox.cjs

@@ -21,6 +21,15 @@ var checkbox_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	RootProvider: () => require_checkbox_root_provider.CheckboxRootProvider
 });
 //#endregion
+exports.Context = require_checkbox_context.CheckboxContext;
+exports.Control = require_checkbox_control.CheckboxControl;
+exports.Group = require_checkbox_group.CheckboxGroup;
+exports.GroupProvider = require_checkbox_group_provider.CheckboxGroupProvider;
+exports.HiddenInput = require_checkbox_hidden_input.CheckboxHiddenInput;
+exports.Indicator = require_checkbox_indicator.CheckboxIndicator;
+exports.Label = require_checkbox_label.CheckboxLabel;
+exports.Root = require_checkbox_root.CheckboxRoot;
+exports.RootProvider = require_checkbox_root_provider.CheckboxRootProvider;
 Object.defineProperty(exports, "checkbox_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/checkbox/checkbox.js

@@ -21,4 +21,4 @@ var checkbox_exports = /* @__PURE__ */ __exportAll({
 	RootProvider: () => CheckboxRootProvider
 });
 //#endregion
-export { checkbox_exports };
+export { CheckboxContext as Context, CheckboxControl as Control, CheckboxGroup as Group, CheckboxGroupProvider as GroupProvider, CheckboxHiddenInput as HiddenInput, CheckboxIndicator as Indicator, CheckboxLabel as Label, CheckboxRoot as Root, CheckboxRootProvider as RootProvider, checkbox_exports };

package/dist/components/clipboard/clipboard.cjs

@@ -21,6 +21,15 @@ var clipboard_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	ValueText: () => require_clipboard_value_text.ClipboardValueText
 });
 //#endregion
+exports.Context = require_clipboard_context.ClipboardContext;
+exports.Control = require_clipboard_control.ClipboardControl;
+exports.Indicator = require_clipboard_indicator.ClipboardIndicator;
+exports.Input = require_clipboard_input.ClipboardInput;
+exports.Label = require_clipboard_label.ClipboardLabel;
+exports.Root = require_clipboard_root.ClipboardRoot;
+exports.RootProvider = require_clipboard_root_provider.ClipboardRootProvider;
+exports.Trigger = require_clipboard_trigger.ClipboardTrigger;
+exports.ValueText = require_clipboard_value_text.ClipboardValueText;
 Object.defineProperty(exports, "clipboard_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/clipboard/clipboard.js

@@ -21,4 +21,4 @@ var clipboard_exports = /* @__PURE__ */ __exportAll({
 	ValueText: () => ClipboardValueText
 });
 //#endregion
-export { clipboard_exports };
+export { ClipboardContext as Context, ClipboardControl as Control, ClipboardIndicator as Indicator, ClipboardInput as Input, ClipboardLabel as Label, ClipboardRoot as Root, ClipboardRootProvider as RootProvider, ClipboardTrigger as Trigger, ClipboardValueText as ValueText, clipboard_exports };

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

@@ -1,5 +1,6 @@
 "use client";
 const require_factory = require("../factory.cjs");
+const require_collapsible_gate = require("./collapsible-gate.cjs");
 const require_use_collapsible_context = require("./use-collapsible-context.cjs");
 let react = require("react");
 let _zag_js_react = require("@zag-js/react");
@@ -7,11 +8,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/collapsible/collapsible-content.tsx
 var CollapsibleContent = (0, react.forwardRef)((props, ref) => {
 	const collapsible = require_use_collapsible_context.useCollapsibleContext();
-	if (collapsible.isUnmounted) return null;
-	const mergedProps = (0, _zag_js_react.mergeProps)(collapsible.getContentProps(), props);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
-		...mergedProps,
-		ref
+	const mergedProps = (0, _zag_js_react.mergeProps)(collapsible.getContentProps(), collapsible.hideMode === "activity" ? { hidden: false } : {}, props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_collapsible_gate.CollapsibleGate, {
+		collapsible,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.ark.div, {
+			...mergedProps,
+			ref
+		})
 	});
 });
 CollapsibleContent.displayName = "CollapsibleContent";

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

@@ -1,5 +1,6 @@
 "use client";
 import { ark } from "../factory.js";
+import { CollapsibleGate } from "./collapsible-gate.js";
 import { useCollapsibleContext } from "./use-collapsible-context.js";
 import { forwardRef } from "react";
 import { mergeProps } from "@zag-js/react";
@@ -7,11 +8,13 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/collapsible/collapsible-content.tsx
 var CollapsibleContent = forwardRef((props, ref) => {
 	const collapsible = useCollapsibleContext();
-	if (collapsible.isUnmounted) return null;
-	const mergedProps = mergeProps(collapsible.getContentProps(), props);
-	return /* @__PURE__ */ jsx(ark.div, {
-		...mergedProps,
-		ref
+	const mergedProps = mergeProps(collapsible.getContentProps(), collapsible.hideMode === "activity" ? { hidden: false } : {}, props);
+	return /* @__PURE__ */ jsx(CollapsibleGate, {
+		collapsible,
+		children: /* @__PURE__ */ jsx(ark.div, {
+			...mergedProps,
+			ref
+		})
 	});
 });
 CollapsibleContent.displayName = "CollapsibleContent";

package/dist/components/collapsible/collapsible-gate.cjs

@@ -0,0 +1,15 @@
+"use client";
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/collapsible/collapsible-gate.tsx
+var CollapsibleGate = (props) => {
+	const { collapsible, children } = props;
+	if (collapsible.isUnmounted) return null;
+	if (collapsible.hideMode === "activity") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Activity, {
+		mode: collapsible.visible ? "visible" : "hidden",
+		children
+	});
+	return children;
+};
+//#endregion
+exports.CollapsibleGate = CollapsibleGate;

package/dist/components/collapsible/collapsible-gate.d.cts

@@ -0,0 +1,7 @@
+import { ReactNode, ReactPortal, ReactElement, JSXElementConstructor } from 'react';
+import { UseCollapsibleReturn } from './use-collapsible.js';
+export interface CollapsibleGateProps {
+    collapsible: Pick<UseCollapsibleReturn, 'isUnmounted' | 'visible' | 'hideMode'>;
+    children?: ReactNode | undefined;
+}
+export declare const CollapsibleGate: (props: CollapsibleGateProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

package/dist/components/collapsible/collapsible-gate.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode, ReactPortal, ReactElement, JSXElementConstructor } from 'react';
+import { UseCollapsibleReturn } from './use-collapsible.js';
+export interface CollapsibleGateProps {
+    collapsible: Pick<UseCollapsibleReturn, 'isUnmounted' | 'visible' | 'hideMode'>;
+    children?: ReactNode | undefined;
+}
+export declare const CollapsibleGate: (props: CollapsibleGateProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

package/dist/components/collapsible/collapsible-gate.js

@@ -0,0 +1,15 @@
+"use client";
+import { Activity } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/collapsible/collapsible-gate.tsx
+var CollapsibleGate = (props) => {
+	const { collapsible, children } = props;
+	if (collapsible.isUnmounted) return null;
+	if (collapsible.hideMode === "activity") return /* @__PURE__ */ jsx(Activity, {
+		mode: collapsible.visible ? "visible" : "hidden",
+		children
+	});
+	return children;
+};
+//#endregion
+export { CollapsibleGate };

package/dist/components/collapsible/collapsible.cjs

@@ -15,6 +15,12 @@ var collapsible_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Trigger: () => require_collapsible_trigger.CollapsibleTrigger
 });
 //#endregion
+exports.Content = require_collapsible_content.CollapsibleContent;
+exports.Context = require_collapsible_context.CollapsibleContext;
+exports.Indicator = require_collapsible_indicator.CollapsibleIndicator;
+exports.Root = require_collapsible_root.CollapsibleRoot;
+exports.RootProvider = require_collapsible_root_provider.CollapsibleRootProvider;
+exports.Trigger = require_collapsible_trigger.CollapsibleTrigger;
 Object.defineProperty(exports, "collapsible_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/collapsible/collapsible.js

@@ -15,4 +15,4 @@ var collapsible_exports = /* @__PURE__ */ __exportAll({
 	Trigger: () => CollapsibleTrigger
 });
 //#endregion
-export { collapsible_exports };
+export { CollapsibleContent as Content, CollapsibleContext as Context, CollapsibleIndicator as Indicator, CollapsibleRoot as Root, CollapsibleRootProvider as RootProvider, CollapsibleTrigger as Trigger, collapsible_exports };

package/dist/components/collapsible/split-collapsible-props.cjs

@@ -6,6 +6,7 @@ var splitCollapsibleProps = (props) => require_create_split_props.createSplitPro
 	"collapsedWidth",
 	"defaultOpen",
 	"disabled",
+	"hideMode",
 	"id",
 	"ids",
 	"lazyMount",

package/dist/components/collapsible/split-collapsible-props.d.cts

@@ -1,2 +1,2 @@
 import { UseCollapsibleProps } from './use-collapsible.js';
-export declare const splitCollapsibleProps: <T extends UseCollapsibleProps>(props: T) => [UseCollapsibleProps, Omit<T, "open" | "ids" | "disabled" | "id" | "lazyMount" | "unmountOnExit" | "defaultOpen" | "onOpenChange" | "onExitComplete" | "collapsedHeight" | "collapsedWidth">];
+export declare const splitCollapsibleProps: <T extends UseCollapsibleProps>(props: T) => [UseCollapsibleProps, Omit<T, "open" | "ids" | "disabled" | "id" | "lazyMount" | "unmountOnExit" | "hideMode" | "defaultOpen" | "onOpenChange" | "onExitComplete" | "collapsedHeight" | "collapsedWidth">];

package/dist/components/collapsible/split-collapsible-props.d.ts

@@ -1,2 +1,2 @@
 import { UseCollapsibleProps } from './use-collapsible.js';
-export declare const splitCollapsibleProps: <T extends UseCollapsibleProps>(props: T) => [UseCollapsibleProps, Omit<T, "open" | "ids" | "disabled" | "id" | "lazyMount" | "unmountOnExit" | "defaultOpen" | "onOpenChange" | "onExitComplete" | "collapsedHeight" | "collapsedWidth">];
+export declare const splitCollapsibleProps: <T extends UseCollapsibleProps>(props: T) => [UseCollapsibleProps, Omit<T, "open" | "ids" | "disabled" | "id" | "lazyMount" | "unmountOnExit" | "hideMode" | "defaultOpen" | "onOpenChange" | "onExitComplete" | "collapsedHeight" | "collapsedWidth">];

package/dist/components/collapsible/split-collapsible-props.js

@@ -6,6 +6,7 @@ var splitCollapsibleProps = (props) => createSplitProps()(props, [
 	"collapsedWidth",
 	"defaultOpen",
 	"disabled",
+	"hideMode",
 	"id",
 	"ids",
 	"lazyMount",

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

@@ -7,8 +7,9 @@ _zag_js_collapsible = require_runtime.__toESM(_zag_js_collapsible, 1);
 let react = require("react");
 let _zag_js_react = require("@zag-js/react");
 //#region src/components/collapsible/use-collapsible.ts
+var supportsActivity = typeof react.Activity !== "undefined";
 var useCollapsible = (props = {}) => {
-	const { lazyMount, unmountOnExit, ...collapsibleProps } = props;
+	const { lazyMount, unmountOnExit, hideMode = "display-none", ...collapsibleProps } = props;
 	const id = (0, react.useId)();
 	const wasVisible = (0, react.useRef)(false);
 	const { dir } = require_use_locale_context.useLocaleContext();
@@ -23,9 +24,11 @@ var useCollapsible = (props = {}) => {
 	const api = _zag_js_collapsible.connect(service, _zag_js_react.normalizeProps);
 	if (api.visible) wasVisible.current = true;
 	const isUnmounted = !api.visible && !wasVisible.current && lazyMount || unmountOnExit && !api.visible && wasVisible.current;
+	const resolvedHideMode = hideMode === "activity" && supportsActivity ? "activity" : "display-none";
 	return {
 		...api,
-		isUnmounted
+		isUnmounted,
+		hideMode: resolvedHideMode
 	};
 };
 //#endregion

package/dist/components/collapsible/use-collapsible.d.cts

@@ -1,6 +1,6 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types.js';
-import { RenderStrategyProps } from '../../utils/render-strategy.js';
+import { HideMode, RenderStrategyProps } from '../../utils/render-strategy.js';
 import * as collapsible from '@zag-js/collapsible';
 export interface UseCollapsibleProps extends Optional<Omit<collapsible.Props, 'dir' | 'getRootNode'>, 'id'>, RenderStrategyProps {
 }
@@ -9,5 +9,9 @@ export interface UseCollapsibleReturn extends collapsible.Api<PropTypes> {
      * Whether the content is unmounted
      */
     isUnmounted?: boolean | undefined;
+    /**
+     * Resolved hide strategy for mounted content.
+     */
+    hideMode: HideMode;
 }
 export declare const useCollapsible: (props?: UseCollapsibleProps) => UseCollapsibleReturn;

package/dist/components/collapsible/use-collapsible.d.ts

@@ -1,6 +1,6 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types.js';
-import { RenderStrategyProps } from '../../utils/render-strategy.js';
+import { HideMode, RenderStrategyProps } from '../../utils/render-strategy.js';
 import * as collapsible from '@zag-js/collapsible';
 export interface UseCollapsibleProps extends Optional<Omit<collapsible.Props, 'dir' | 'getRootNode'>, 'id'>, RenderStrategyProps {
 }
@@ -9,5 +9,9 @@ export interface UseCollapsibleReturn extends collapsible.Api<PropTypes> {
      * Whether the content is unmounted
      */
     isUnmounted?: boolean | undefined;
+    /**
+     * Resolved hide strategy for mounted content.
+     */
+    hideMode: HideMode;
 }
 export declare const useCollapsible: (props?: UseCollapsibleProps) => UseCollapsibleReturn;

package/dist/components/collapsible/use-collapsible.js

@@ -2,11 +2,12 @@
 import { useEnvironmentContext } from "../../providers/environment/use-environment-context.js";
 import { useLocaleContext } from "../../providers/locale/use-locale-context.js";
 import * as collapsible from "@zag-js/collapsible";
-import { useId, useRef } from "react";
+import { Activity, useId, useRef } from "react";
 import { normalizeProps, useMachine } from "@zag-js/react";
 //#region src/components/collapsible/use-collapsible.ts
+var supportsActivity = typeof Activity !== "undefined";
 var useCollapsible = (props = {}) => {
-	const { lazyMount, unmountOnExit, ...collapsibleProps } = props;
+	const { lazyMount, unmountOnExit, hideMode = "display-none", ...collapsibleProps } = props;
 	const id = useId();
 	const wasVisible = useRef(false);
 	const { dir } = useLocaleContext();
@@ -21,9 +22,11 @@ var useCollapsible = (props = {}) => {
 	const api = collapsible.connect(service, normalizeProps);
 	if (api.visible) wasVisible.current = true;
 	const isUnmounted = !api.visible && !wasVisible.current && lazyMount || unmountOnExit && !api.visible && wasVisible.current;
+	const resolvedHideMode = hideMode === "activity" && supportsActivity ? "activity" : "display-none";
 	return {
 		...api,
-		isUnmounted
+		isUnmounted,
+		hideMode: resolvedHideMode
 	};
 };
 //#endregion

package/dist/components/color-picker/color-picker-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_color_picker_context = require("./use-color-picker-context.cjs");
 let react = require("react");
@@ -11,10 +12,13 @@ var ColorPickerContent = (0, react.forwardRef)((props, ref) => {
 	const colorPicker = require_use_color_picker_context.useColorPickerContext();
 	const presence = require_use_presence_context.usePresenceContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(colorPicker.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
+		})
 	});
 });
 ColorPickerContent.displayName = "ColorPickerContent";

package/dist/components/color-picker/color-picker-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 { useColorPickerContext } from "./use-color-picker-context.js";
 import { forwardRef } from "react";
@@ -11,10 +12,13 @@ var ColorPickerContent = forwardRef((props, ref) => {
 	const colorPicker = useColorPickerContext();
 	const presence = usePresenceContext();
 	const mergedProps = mergeProps(colorPicker.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
+		})
 	});
 });
 ColorPickerContent.displayName = "ColorPickerContent";

package/dist/components/color-picker/color-picker.cjs

@@ -61,6 +61,35 @@ var color_picker_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	View: () => require_color_picker_view.ColorPickerView
 });
 //#endregion
+exports.Area = require_color_picker_area.ColorPickerArea;
+exports.AreaBackground = require_color_picker_area_background.ColorPickerAreaBackground;
+exports.AreaThumb = require_color_picker_area_thumb.ColorPickerAreaThumb;
+exports.ChannelInput = require_color_picker_channel_input.ColorPickerChannelInput;
+exports.ChannelSlider = require_color_picker_channel_slider.ColorPickerChannelSlider;
+exports.ChannelSliderLabel = require_color_picker_channel_slider_label.ColorPickerChannelSliderLabel;
+exports.ChannelSliderThumb = require_color_picker_channel_slider_thumb.ColorPickerChannelSliderThumb;
+exports.ChannelSliderTrack = require_color_picker_channel_slider_track.ColorPickerChannelSliderTrack;
+exports.ChannelSliderValueText = require_color_picker_channel_slider_value_text.ColorPickerChannelSliderValueText;
+exports.Content = require_color_picker_content.ColorPickerContent;
+exports.Context = require_color_picker_context.ColorPickerContext;
+exports.Control = require_color_picker_control.ColorPickerControl;
+exports.EyeDropperTrigger = require_color_picker_eye_dropper_trigger.ColorPickerEyeDropperTrigger;
+exports.FormatSelect = require_color_picker_format_select.ColorPickerFormatSelect;
+exports.FormatTrigger = require_color_picker_format_trigger.ColorPickerFormatTrigger;
+exports.HiddenInput = require_color_picker_hidden_input.ColorPickerHiddenInput;
+exports.Label = require_color_picker_label.ColorPickerLabel;
+exports.Positioner = require_color_picker_positioner.ColorPickerPositioner;
+exports.Root = require_color_picker_root.ColorPickerRoot;
+exports.RootProvider = require_color_picker_root_provider.ColorPickerRootProvider;
+exports.Swatch = require_color_picker_swatch.ColorPickerSwatch;
+exports.SwatchGroup = require_color_picker_swatch_group.ColorPickerSwatchGroup;
+exports.SwatchIndicator = require_color_picker_swatch_indicator.ColorPickerSwatchIndicator;
+exports.SwatchTrigger = require_color_picker_swatch_trigger.ColorPickerSwatchTrigger;
+exports.TransparencyGrid = require_color_picker_transparency_grid.ColorPickerTransparencyGrid;
+exports.Trigger = require_color_picker_trigger.ColorPickerTrigger;
+exports.ValueSwatch = require_color_picker_value_swatch.ColorPickerValueSwatch;
+exports.ValueText = require_color_picker_value_text.ColorPickerValueText;
+exports.View = require_color_picker_view.ColorPickerView;
 Object.defineProperty(exports, "color_picker_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/color-picker/color-picker.js

@@ -61,4 +61,4 @@ var color_picker_exports = /* @__PURE__ */ __exportAll({
 	View: () => ColorPickerView
 });
 //#endregion
-export { color_picker_exports };
+export { ColorPickerArea as Area, ColorPickerAreaBackground as AreaBackground, ColorPickerAreaThumb as AreaThumb, ColorPickerChannelInput as ChannelInput, ColorPickerChannelSlider as ChannelSlider, ColorPickerChannelSliderLabel as ChannelSliderLabel, ColorPickerChannelSliderThumb as ChannelSliderThumb, ColorPickerChannelSliderTrack as ChannelSliderTrack, ColorPickerChannelSliderValueText as ChannelSliderValueText, ColorPickerContent as Content, ColorPickerContext as Context, ColorPickerControl as Control, ColorPickerEyeDropperTrigger as EyeDropperTrigger, ColorPickerFormatSelect as FormatSelect, ColorPickerFormatTrigger as FormatTrigger, ColorPickerHiddenInput as HiddenInput, ColorPickerLabel as Label, ColorPickerPositioner as Positioner, ColorPickerRoot as Root, ColorPickerRootProvider as RootProvider, ColorPickerSwatch as Swatch, ColorPickerSwatchGroup as SwatchGroup, ColorPickerSwatchIndicator as SwatchIndicator, ColorPickerSwatchTrigger as SwatchTrigger, ColorPickerTransparencyGrid as TransparencyGrid, ColorPickerTrigger as Trigger, ColorPickerValueSwatch as ValueSwatch, ColorPickerValueText as ValueText, ColorPickerView as View, color_picker_exports };

package/dist/components/combobox/combobox-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_combobox_context = require("./use-combobox-context.cjs");
 let react = require("react");
@@ -11,10 +12,13 @@ var ComboboxContent = (0, react.forwardRef)((props, ref) => {
 	const combobox = require_use_combobox_context.useComboboxContext();
 	const presence = require_use_presence_context.usePresenceContext();
 	const mergedProps = (0, _zag_js_react.mergeProps)(combobox.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
+		})
 	});
 });
 ComboboxContent.displayName = "ComboboxContent";

package/dist/components/combobox/combobox-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 { useComboboxContext } from "./use-combobox-context.js";
 import { forwardRef } from "react";
@@ -11,10 +12,13 @@ var ComboboxContent = forwardRef((props, ref) => {
 	const combobox = useComboboxContext();
 	const presence = usePresenceContext();
 	const mergedProps = mergeProps(combobox.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
+		})
 	});
 });
 ComboboxContent.displayName = "ComboboxContent";

package/dist/components/combobox/combobox.cjs

@@ -39,6 +39,24 @@ var combobox_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Trigger: () => require_combobox_trigger.ComboboxTrigger
 });
 //#endregion
+exports.ClearTrigger = require_combobox_clear_trigger.ComboboxClearTrigger;
+exports.Content = require_combobox_content.ComboboxContent;
+exports.Context = require_combobox_context.ComboboxContext;
+exports.Control = require_combobox_control.ComboboxControl;
+exports.Empty = require_combobox_empty.ComboboxEmpty;
+exports.Input = require_combobox_input.ComboboxInput;
+exports.Item = require_combobox_item.ComboboxItem;
+exports.ItemContext = require_combobox_item_context.ComboboxItemContext;
+exports.ItemGroup = require_combobox_item_group.ComboboxItemGroup;
+exports.ItemGroupLabel = require_combobox_item_group_label.ComboboxItemGroupLabel;
+exports.ItemIndicator = require_combobox_item_indicator.ComboboxItemIndicator;
+exports.ItemText = require_combobox_item_text.ComboboxItemText;
+exports.Label = require_combobox_label.ComboboxLabel;
+exports.List = require_combobox_list.ComboboxList;
+exports.Positioner = require_combobox_positioner.ComboboxPositioner;
+exports.Root = require_combobox_root.ComboboxRoot;
+exports.RootProvider = require_combobox_root_provider.ComboboxRootProvider;
+exports.Trigger = require_combobox_trigger.ComboboxTrigger;
 Object.defineProperty(exports, "combobox_exports", {
 	enumerable: true,
 	get: function() {

package/dist/components/combobox/combobox.js

@@ -39,4 +39,4 @@ var combobox_exports = /* @__PURE__ */ __exportAll({
 	Trigger: () => ComboboxTrigger
 });
 //#endregion
-export { combobox_exports };
+export { ComboboxClearTrigger as ClearTrigger, ComboboxContent as Content, ComboboxContext as Context, ComboboxControl as Control, ComboboxEmpty as Empty, ComboboxInput as Input, ComboboxItem as Item, ComboboxItemContext as ItemContext, ComboboxItemGroup as ItemGroup, ComboboxItemGroupLabel as ItemGroupLabel, ComboboxItemIndicator as ItemIndicator, ComboboxItemText as ItemText, ComboboxLabel as Label, ComboboxList as List, ComboboxPositioner as Positioner, ComboboxRoot as Root, ComboboxRootProvider as RootProvider, ComboboxTrigger as Trigger, combobox_exports };

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

@@ -21,6 +21,15 @@ var date_input_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	SegmentGroup: () => require_date_input_segment_group.DateInputSegmentGroup
 });
 //#endregion
+exports.Context = require_date_input_context.DateInputContext;
+exports.Control = require_date_input_control.DateInputControl;
+exports.HiddenInput = require_date_input_hidden_input.DateInputHiddenInput;
+exports.Label = require_date_input_label.DateInputLabel;
+exports.Root = require_date_input_root.DateInputRoot;
+exports.RootProvider = require_date_input_root_provider.DateInputRootProvider;
+exports.Segment = require_date_input_segment.DateInputSegment;
+exports.SegmentContext = require_date_input_segment_context.DateInputSegmentContext;
+exports.SegmentGroup = require_date_input_segment_group.DateInputSegmentGroup;
 Object.defineProperty(exports, "date_input_exports", {
 	enumerable: true,
 	get: function() {

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

@@ -21,4 +21,4 @@ var date_input_exports = /* @__PURE__ */ __exportAll({
 	SegmentGroup: () => DateInputSegmentGroup
 });
 //#endregion
-export { date_input_exports };
+export { DateInputContext as Context, DateInputControl as Control, DateInputHiddenInput as HiddenInput, DateInputLabel as Label, DateInputRoot as Root, DateInputRootProvider as RootProvider, DateInputSegment as Segment, DateInputSegmentContext as SegmentContext, DateInputSegmentGroup as SegmentGroup, date_input_exports };