@ark-ui/react 1.0.0-beta.4 → 1.0.0-beta.5

package/CHANGELOG.md

@@ -6,6 +6,10 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [1.0.0-beta.5] - 2023-11-09
+
+- Integrate latest `@zag-js` packages
+
 ## [1.0.0-beta.4] - 2023-10-31
 
 ### Fixed

package/accordion/accordion-context.d.ts

@@ -1,6 +1,7 @@
 import { Provider } from 'react';
 /// <reference types="react" />
+import type { UsePresenceProps } from '../presence';
 import { type UseAccordionReturn } from './use-accordion';
-export interface AccordionContext extends UseAccordionReturn {
+export interface AccordionContext extends UseAccordionReturn, UsePresenceProps {
 }
 export declare const AccordionProvider: Provider<AccordionContext>, useAccordionContext: () => AccordionContext;

package/accordion/accordion-item-content.cjs

@@ -7,34 +7,27 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const index = require('../presence/index.cjs');
+require('../presence/index.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const AccordionItemContent = react.forwardRef(
-  function AccordionItemContent2(props, ref) {
-    const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
-    const api = accordionContext.useAccordionContext();
-    const item = accordionItemContext.useAccordionItemContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      index.Presence,
-      {
-        present: item.isOpen,
-        ...presenceProps,
-        fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.getItemContentProps(item) }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(AccordionInnerContent, { ref, ...localProps })
-      }
-    );
-  }
-);
-const AccordionInnerContent = react.forwardRef(
-  function AccordionInnerContent2(props, ref) {
+  (props, ref) => {
     const api = accordionContext.useAccordionContext();
     const accordionItem = accordionItemContext.useAccordionItemContext();
-    const mergedProps = react$1.mergeProps(api.getItemContentProps(accordionItem), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+    const presenceApi = presenceContext.usePresenceContext();
+    const mergedProps = react$1.mergeProps(
+      api.getItemContentProps(accordionItem),
+      presenceApi.getPresenceProps(ref),
+      props
+    );
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
   }
 );
+AccordionItemContent.displayName = "AccordionItemContent";
 
 exports.AccordionItemContent = AccordionItemContent;

package/accordion/accordion-item-content.d.ts

@@ -1,8 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import { type PresenceProps } from '../presence';
-import type { Assign } from '../types';
-export interface AccordionItemContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
+export interface AccordionItemContentProps extends HTMLArkProps<'div'> {
 }
 export declare const AccordionItemContent: ForwardRefExoticComponent<AccordionItemContentProps & RefAttributes<HTMLDivElement>>;

package/accordion/accordion-item-content.mjs

@@ -3,34 +3,27 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { Presence } from '../presence/index.mjs';
+import '../presence/index.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const AccordionItemContent = forwardRef(
-  function AccordionItemContent2(props, ref) {
-    const [presenceProps, localProps] = splitPresenceProps(props);
-    const api = useAccordionContext();
-    const item = useAccordionItemContext();
-    return /* @__PURE__ */ jsx(
-      Presence,
-      {
-        present: item.isOpen,
-        ...presenceProps,
-        fallback: /* @__PURE__ */ jsx("div", { ...api.getItemContentProps(item) }),
-        children: /* @__PURE__ */ jsx(AccordionInnerContent, { ref, ...localProps })
-      }
-    );
-  }
-);
-const AccordionInnerContent = forwardRef(
-  function AccordionInnerContent2(props, ref) {
+  (props, ref) => {
     const api = useAccordionContext();
     const accordionItem = useAccordionItemContext();
-    const mergedProps = mergeProps(api.getItemContentProps(accordionItem), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(
+      api.getItemContentProps(accordionItem),
+      presenceApi.getPresenceProps(ref),
+      props
+    );
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
   }
 );
+AccordionItemContent.displayName = "AccordionItemContent";
 
 export { AccordionItemContent };

package/accordion/accordion-item-context.d.ts

@@ -1,6 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
-import type { ItemProps, ItemState } from '@zag-js/accordion';
-export interface AccordionItemContext extends ItemProps, ItemState {
+import type { ItemProps } from '@zag-js/accordion';
+export interface AccordionItemContext extends ItemProps {
 }
 export declare const AccordionItemProvider: Provider<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;

package/accordion/accordion-item-trigger.cjs

@@ -7,14 +7,24 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const AccordionItemTrigger = react.forwardRef(
   (props, ref) => {
     const api = accordionContext.useAccordionContext();
     const accordionItem = accordionItemContext.useAccordionItemContext();
-    const mergedProps = react$1.mergeProps(api.getItemTriggerProps(accordionItem), props);
+    const presenceApi = presenceContext.usePresenceContext();
+    const triggerProps = api.getItemTriggerProps(accordionItem);
+    const mergedProps = react$1.mergeProps(
+      {
+        ...triggerProps,
+        "aria-controls": presenceApi.isUnmounted ? void 0 : triggerProps["aria-controls"]
+      },
+      props
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

package/accordion/accordion-item-trigger.mjs

@@ -3,14 +3,24 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const AccordionItemTrigger = forwardRef(
   (props, ref) => {
     const api = useAccordionContext();
     const accordionItem = useAccordionItemContext();
-    const mergedProps = mergeProps(api.getItemTriggerProps(accordionItem), props);
+    const presenceApi = usePresenceContext();
+    const triggerProps = api.getItemTriggerProps(accordionItem);
+    const mergedProps = mergeProps(
+      {
+        ...triggerProps,
+        "aria-controls": presenceApi.isUnmounted ? void 0 : triggerProps["aria-controls"]
+      },
+      props
+    );
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

package/accordion/accordion-item.cjs

@@ -8,9 +8,13 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
+const presencePropsContext = require('../presence/presence-props-context.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const AccordionItem = react.forwardRef((props, ref) => {
   const [itemProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
@@ -21,7 +25,9 @@ const AccordionItem = react.forwardRef((props, ref) => {
   const itemState = api.getItemState(itemProps);
   const mergedProps = react$1.mergeProps(api.getItemProps(itemProps), localProps);
   const view = runIfFn.runIfFn(children, itemState);
-  return /* @__PURE__ */ jsxRuntime.jsx(accordionItemContext.AccordionItemProvider, { value: { ...itemProps, ...itemState }, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+  const presenceProps = presencePropsContext.usePresencePropsContext();
+  const presenceApi = usePresence.usePresence({ ...presenceProps, present: itemState.isOpen });
+  return /* @__PURE__ */ jsxRuntime.jsx(accordionItemContext.AccordionItemProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) }) });
 });
 AccordionItem.displayName = "AccordionItem";
 

package/accordion/accordion-item.d.ts

@@ -1,10 +1,9 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { ItemProps, ItemState } from '@zag-js/accordion';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export interface AccordionItemProps extends ItemProps, Assign<HTMLArkProps<'div'>, {
-    children?: React.ReactNode | ((props: ItemState) => React.ReactNode);
-}> {
+export interface AccordionItemProps extends Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((state: ItemState) => ReactNode);
+}>, ItemProps {
 }
 export declare const AccordionItem: ForwardRefExoticComponent<AccordionItemProps & RefAttributes<HTMLDivElement>>;

package/accordion/accordion-item.mjs

@@ -4,9 +4,13 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { AccordionItemProvider } from './accordion-item-context.mjs';
+import { usePresencePropsContext } from '../presence/presence-props-context.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const AccordionItem = forwardRef((props, ref) => {
   const [itemProps, { children, ...localProps }] = createSplitProps()(props, [
@@ -17,7 +21,9 @@ const AccordionItem = forwardRef((props, ref) => {
   const itemState = api.getItemState(itemProps);
   const mergedProps = mergeProps(api.getItemProps(itemProps), localProps);
   const view = runIfFn(children, itemState);
-  return /* @__PURE__ */ jsx(AccordionItemProvider, { value: { ...itemProps, ...itemState }, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+  const presenceProps = usePresencePropsContext();
+  const presenceApi = usePresence({ ...presenceProps, present: itemState.isOpen });
+  return /* @__PURE__ */ jsx(AccordionItemProvider, { value: itemProps, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });
 });
 AccordionItem.displayName = "AccordionItem";
 

package/accordion/accordion.cjs

@@ -8,11 +8,15 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const useAccordion = require('./use-accordion.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const presencePropsContext = require('../presence/presence-props-context.cjs');
 
 const Accordion = react.forwardRef((props, ref) => {
-  const [useAccordionProps, divProps] = createSplitProps.createSplitProps()(props, [
+  const [presenceProps, accordionProps] = splitPresenceProps.splitPresenceProps(props);
+  const [useAccordionProps, localProps] = createSplitProps.createSplitProps()(accordionProps, [
     "collapsible",
     "defaultValue",
     "dir",
@@ -27,8 +31,8 @@ const Accordion = react.forwardRef((props, ref) => {
     "value"
   ]);
   const api = useAccordion.useAccordion(useAccordionProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(accordionContext.AccordionProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(accordionContext.AccordionProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presencePropsContext.PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });
 Accordion.displayName = "Accordion";
 

package/accordion/accordion.d.ts

@@ -1,8 +1,9 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
 import type { Assign } from '../types';
 import { type UseAccordionProps } from './use-accordion';
-export interface AccordionProps extends Assign<HTMLArkProps<'div'>, UseAccordionProps> {
+export interface AccordionProps extends Assign<HTMLArkProps<'div'>, UseAccordionProps>, UsePresenceProps {
 }
 export declare const Accordion: ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>;

package/accordion/accordion.mjs

@@ -4,11 +4,15 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { AccordionProvider } from './accordion-context.mjs';
 import { useAccordion } from './use-accordion.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
 
 const Accordion = forwardRef((props, ref) => {
-  const [useAccordionProps, divProps] = createSplitProps()(props, [
+  const [presenceProps, accordionProps] = splitPresenceProps(props);
+  const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [
     "collapsible",
     "defaultValue",
     "dir",
@@ -23,8 +27,8 @@ const Accordion = forwardRef((props, ref) => {
     "value"
   ]);
   const api = useAccordion(useAccordionProps);
-  const mergedProps = mergeProps(api.rootProps, divProps);
-  return /* @__PURE__ */ jsx(AccordionProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsx(AccordionProvider, { value: api, children: /* @__PURE__ */ jsx(PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 Accordion.displayName = "Accordion";
 

package/carousel/carousel.d.ts

@@ -1,10 +1,9 @@
 import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-import { type CarouselContext } from './carousel-context';
-import { type UseCarouselProps } from './use-carousel';
-export interface CarouselProps extends Assign<HTMLArkProps<'div'> & {
-    children?: ReactNode | ((pages: CarouselContext) => ReactNode);
-}, UseCarouselProps> {
+import { type UseCarouselProps, type UseCarouselReturn } from './use-carousel';
+export interface CarouselProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseCarouselReturn) => ReactNode);
+}>, UseCarouselProps> {
 }
 export declare const Carousel: ForwardRefExoticComponent<CarouselProps & RefAttributes<HTMLDivElement>>;

package/checkbox/checkbox.cjs

@@ -13,7 +13,7 @@ const checkboxContext = require('./checkbox-context.cjs');
 const useCheckbox = require('./use-checkbox.cjs');
 
 const Checkbox = react.forwardRef((props, ref) => {
-  const [useCheckboxProps, { children, ...labelProps }] = createSplitProps.createSplitProps()(
+  const [useCheckboxProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
     props,
     [
       "checked",
@@ -32,7 +32,7 @@ const Checkbox = react.forwardRef((props, ref) => {
     ]
   );
   const api = useCheckbox.useCheckbox(useCheckboxProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, labelProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(checkboxContext.CheckboxProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
 });

package/checkbox/checkbox.d.ts

@@ -1,10 +1,9 @@
 import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-import { type CheckboxContext } from './checkbox-context';
-import { type UseCheckboxProps } from './use-checkbox';
-export interface CheckboxProps extends Assign<HTMLArkProps<'label'>, Assign<UseCheckboxProps, {
-    children?: ReactNode | ((pages: CheckboxContext) => ReactNode);
-}>> {
+import { type UseCheckboxProps, type UseCheckboxReturn } from './use-checkbox';
+export interface CheckboxProps extends Assign<Assign<HTMLArkProps<'label'>, {
+    children?: ReactNode | ((api: UseCheckboxReturn) => ReactNode);
+}>, UseCheckboxProps> {
 }
 export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLLabelElement>>;

package/checkbox/checkbox.mjs

@@ -9,7 +9,7 @@ import { CheckboxProvider } from './checkbox-context.mjs';
 import { useCheckbox } from './use-checkbox.mjs';
 
 const Checkbox = forwardRef((props, ref) => {
-  const [useCheckboxProps, { children, ...labelProps }] = createSplitProps()(
+  const [useCheckboxProps, { children, ...localProps }] = createSplitProps()(
     props,
     [
       "checked",
@@ -28,7 +28,7 @@ const Checkbox = forwardRef((props, ref) => {
     ]
   );
   const api = useCheckbox(useCheckboxProps);
-  const mergedProps = mergeProps(api.rootProps, labelProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(CheckboxProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
 });

package/color-picker/color-picker-content.cjs

@@ -7,24 +7,21 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const index = require('../presence/index.cjs');
+require('../presence/index.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const ColorPickerContent = react.forwardRef(
   (props, ref) => {
-    const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
     const api = colorPickerContext.useColorPickerContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(ColorPickerInnerContent, { ref, ...localProps }) });
+    const presenceApi = presenceContext.usePresenceContext();
+    const mergedProps = react$1.mergeProps(api.contentProps, presenceApi.getPresenceProps(ref), props);
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
   }
 );
 ColorPickerContent.displayName = "ColorPickerContent";
-const ColorPickerInnerContent = react.forwardRef(
-  function ColorPickerInnerContent2(props, ref) {
-    const api = colorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(api.contentProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
 
 exports.ColorPickerContent = ColorPickerContent;

package/color-picker/color-picker-content.d.ts

@@ -1,8 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import { type PresenceProps } from '../presence';
-import type { Assign } from '../types';
-export interface ColorPickerContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
+export interface ColorPickerContentProps extends HTMLArkProps<'div'> {
 }
 export declare const ColorPickerContent: ForwardRefExoticComponent<ColorPickerContentProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-content.mjs

@@ -3,24 +3,21 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { Presence } from '../presence/index.mjs';
+import '../presence/index.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const ColorPickerContent = forwardRef(
   (props, ref) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useColorPickerContext();
-    return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(ColorPickerInnerContent, { ref, ...localProps }) });
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(api.contentProps, presenceApi.getPresenceProps(ref), props);
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
   }
 );
 ColorPickerContent.displayName = "ColorPickerContent";
-const ColorPickerInnerContent = forwardRef(
-  function ColorPickerInnerContent2(props, ref) {
-    const api = useColorPickerContext();
-    const mergedProps = mergeProps(api.contentProps, props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
 
 export { ColorPickerContent };

package/color-picker/color-picker-positioner.cjs

@@ -7,12 +7,18 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const ColorPickerPositioner = react.forwardRef(
   (props, ref) => {
     const api = colorPickerContext.useColorPickerContext();
     const mergedProps = react$1.mergeProps(api.positionerProps, props);
+    const presenceApi = presenceContext.usePresenceContext();
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/color-picker/color-picker-positioner.mjs

@@ -3,12 +3,18 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const ColorPickerPositioner = forwardRef(
   (props, ref) => {
     const api = useColorPickerContext();
     const mergedProps = mergeProps(api.positionerProps, props);
+    const presenceApi = usePresenceContext();
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/color-picker/color-picker-view.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+require('react');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerView = (props) => {
+  const api = colorPickerContext.useColorPickerContext();
+  return api.format === props.format ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children }) : null;
+};
+
+exports.ColorPickerView = ColorPickerView;

package/color-picker/color-picker-view.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react/jsx-runtime';
+import type { ColorFormat } from '@zag-js/color-picker';
+import { type PropsWithChildren } from 'react';
+export interface ColorPickerViewProps extends PropsWithChildren {
+    format: ColorFormat;
+}
+export declare const ColorPickerView: (props: ColorPickerViewProps) => JSX.Element | null;

package/color-picker/color-picker-view.mjs

@@ -0,0 +1,11 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import 'react';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerView = (props) => {
+  const api = useColorPickerContext();
+  return api.format === props.format ? /* @__PURE__ */ jsx(Fragment, { children: props.children }) : null;
+};
+
+export { ColorPickerView };