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

package/CHANGELOG.md

@@ -6,6 +6,24 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [1.0.0] - 2023-11-09
+
+We are happy to announce the release of `@ark-ui/react@1.0.0`. This release includes a number of breaking changes, new features, and bug fixes. Since our last release over two months ago, we will only highlight some key changes. Please refer to the documentation for each component to learn more.
+
+### Highlights
+
+- Revised the `Presence` component: `lazyMount` and `unmountOnExit` have been added at the root level. For some disclosure components like `Tabs` and `Accordion`, this constitutes a breaking change.
+- Breaking changes have been implemented in `Accordion`, `ColorPicker`, `DatePicker`, `Dialog`, `RadioGroup`, `SegmentGroup`, `TagsInput`, `Toast`, and `ToggleGroup` to achieve a consistent and more intuitive API.
+- Resolved various bugs and addressed accessibility issues across all components.
+
+### Stability and Support
+
+With the release of version 1.0.0, we are moving towards a more stable version of `@ark-ui/react`. Future updates will strive to avoid breaking changes, ensuring a smoother experience for our users. If you encounter any issues while upgrading, please do not hesitate to open an issue on our [GitHub repository](https://github.com/chakra-ui/ark/issues). Your feedback is invaluable in helping us improve.
+
+## [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,29 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
+const react = require('react');
+const factory = require('../factory.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerView = react.forwardRef((props, ref) => {
+  const api = colorPickerContext.useColorPickerContext();
+  if (api.format !== props.format) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    factory.ark.div,
+    {
+      ref,
+      "data-format": props.format,
+      ...anatomy.colorPickerAnatomy.build().view.attrs,
+      ...props
+    }
+  );
+});
+ColorPickerView.displayName = "ColorPickerView";
+
+exports.ColorPickerView = ColorPickerView;

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

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { ColorFormat } from '@zag-js/color-picker';
+import { type HTMLArkProps } from '../factory';
+export interface ColorPickerViewProps extends HTMLArkProps<'div'> {
+    format: ColorFormat;
+}
+export declare const ColorPickerView: ForwardRefExoticComponent<ColorPickerViewProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { colorPickerAnatomy } from '@ark-ui/anatomy';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerView = forwardRef((props, ref) => {
+  const api = useColorPickerContext();
+  if (api.format !== props.format) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    ark.div,
+    {
+      ref,
+      "data-format": props.format,
+      ...colorPickerAnatomy.build().view.attrs,
+      ...props
+    }
+  );
+});
+ColorPickerView.displayName = "ColorPickerView";
+
+export { ColorPickerView };