@ark-ui/react 1.0.0-beta.1 → 1.0.0-beta.3

package/CHANGELOG.md

@@ -1,11 +1,31 @@
 ---
 id: changelog
 name: Changelog
-description: All notable changes to this project will be documented in this file. The format is based on Keep a Changelog and this project adheres to and this project adheres to Semantic Versioning.
+description: All notable changes to this project will be documented in this file.
 ---
 
 ## [Unreleased]
 
+## [1.0.0-beta.3] - 2023-10-26
+
+### Added
+
+- Added support to lazy mount the `DatePicker` and `ColorPicker` components using the `Presence` component
+
+### Changed
+
+- Improved accessibility of all disclosure components when lazy mounting is enabled.
+
+## [1.0.0-beta.2] - 2023-10-25
+
+### Added
+
+- Added `ValueText` to the `ColorPicker` component
+
+### Fixed
+
+- Added missing data attributes to `DatePickerView` component
+
 ## [1.0.0-beta.1] - 2023-10-20
 
 ### Added

package/accordion/accordion-item-content.cjs

@@ -15,8 +15,17 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const AccordionItemContent = react.forwardRef(
   function AccordionItemContent2(props, ref) {
     const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
-    const api = accordionItemContext.useAccordionItemContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(AccordionInnerContent, { ref, ...localProps }) });
+    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(

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

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from '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'>> {
+export interface AccordionItemContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const AccordionItemContent: ForwardRefExoticComponent<AccordionItemContentProps & RefAttributes<HTMLDivElement>>;

package/accordion/accordion-item-content.mjs

@@ -11,8 +11,17 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const AccordionItemContent = forwardRef(
   function AccordionItemContent2(props, ref) {
     const [presenceProps, localProps] = splitPresenceProps(props);
-    const api = useAccordionItemContext();
-    return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(AccordionInnerContent, { ref, ...localProps }) });
+    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(

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

@@ -7,15 +7,24 @@ 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');
 const colorPickerContext = require('./color-picker-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.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 }) });
+  }
+);
+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 });
   }
 );
-ColorPickerContent.displayName = "ColorPickerContent";
 
 exports.ColorPickerContent = ColorPickerContent;

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

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

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

@@ -3,15 +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 } from '../presence/index.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.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 }) });
+  }
+);
+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 });
   }
 );
-ColorPickerContent.displayName = "ColorPickerContent";
 
 export { ColorPickerContent };

package/color-picker/color-picker-transparency-grid.d.ts

@@ -5,7 +5,7 @@ import type { Assign } from '../types';
 interface TransparancyGridProps {
     size: string;
 }
-export interface ColorPickerTransparencyGridPrps extends Assign<HTMLArkProps<'div'>, TransparancyGridProps> {
+export interface ColorPickerTransparencyGridProps extends Assign<HTMLArkProps<'div'>, TransparancyGridProps> {
 }
-export declare const ColorPickerTransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridPrps & RefAttributes<HTMLDivElement>>;
+export declare const ColorPickerTransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridProps & RefAttributes<HTMLDivElement>>;
 export {};

package/color-picker/color-picker-value-text.cjs

@@ -0,0 +1,20 @@
+'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 ColorPickerValueText = react.forwardRef(
+  (props, ref) => {
+    const api = colorPickerContext.useColorPickerContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...anatomy.colorPickerAnatomy.build().valueText.attrs, ...props, ref, children: props.children || api.valueAsString });
+  }
+);
+ColorPickerValueText.displayName = "ColorPickerValueText";
+
+exports.ColorPickerValueText = ColorPickerValueText;

package/color-picker/color-picker-value-text.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface ColorPickerValueTextProps extends HTMLArkProps<'span'> {
+}
+export declare const ColorPickerValueText: ForwardRefExoticComponent<ColorPickerValueTextProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-value-text.mjs

@@ -0,0 +1,16 @@
+'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 ColorPickerValueText = forwardRef(
+  (props, ref) => {
+    const api = useColorPickerContext();
+    return /* @__PURE__ */ jsx(ark.span, { ...colorPickerAnatomy.build().valueText.attrs, ...props, ref, children: props.children || api.valueAsString });
+  }
+);
+ColorPickerValueText.displayName = "ColorPickerValueText";
+
+export { ColorPickerValueText };

package/color-picker/index.cjs

@@ -24,6 +24,7 @@ const colorPickerSwatchGroup = require('./color-picker-swatch-group.cjs');
 const colorPickerSwatchTrigger = require('./color-picker-swatch-trigger.cjs');
 const colorPickerTransparencyGrid = require('./color-picker-transparency-grid.cjs');
 const colorPickerTrigger = require('./color-picker-trigger.cjs');
+const colorPickerValueText = require('./color-picker-value-text.cjs');
 
 const ColorPicker = Object.assign(colorPicker.ColorPicker, {
   Root: colorPicker.ColorPicker,
@@ -43,7 +44,8 @@ const ColorPicker = Object.assign(colorPicker.ColorPicker, {
   SwatchGroup: colorPickerSwatchGroup.ColorPickerSwatchGroup,
   SwatchTrigger: colorPickerSwatchTrigger.ColorPickerSwatchTrigger,
   TransparencyGrid: colorPickerTransparencyGrid.ColorPickerTransparencyGrid,
-  Trigger: colorPickerTrigger.ColorPickerTrigger
+  Trigger: colorPickerTrigger.ColorPickerTrigger,
+  ValueText: colorPickerValueText.ColorPickerValueText
 });
 
 exports.ColorPickerArea = colorPickerArea.ColorPickerArea;
@@ -66,4 +68,5 @@ exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
 exports.ColorPickerSwatchTrigger = colorPickerSwatchTrigger.ColorPickerSwatchTrigger;
 exports.ColorPickerTransparencyGrid = colorPickerTransparencyGrid.ColorPickerTransparencyGrid;
 exports.ColorPickerTrigger = colorPickerTrigger.ColorPickerTrigger;
+exports.ColorPickerValueText = colorPickerValueText.ColorPickerValueText;
 exports.ColorPicker = ColorPicker;

package/color-picker/index.d.ts

@@ -19,8 +19,9 @@ import { ColorPickerPositioner, type ColorPickerPositionerProps } from './color-
 import { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
 import { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps } from './color-picker-swatch-group';
 import { ColorPickerSwatchTrigger, type ColorPickerSwatchTriggerProps } from './color-picker-swatch-trigger';
-import { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridPrps } from './color-picker-transparency-grid';
+import { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridProps } from './color-picker-transparency-grid';
 import { ColorPickerTrigger, type ColorPickerTriggerProps } from './color-picker-trigger';
+import { ColorPickerValueText, type ColorPickerValueTextProps } from './color-picker-value-text';
 declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;
     Area: ForwardRefExoticComponent<ColorPickerAreaProps & RefAttributes<HTMLDivElement>>;
@@ -38,8 +39,9 @@ declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttri
     Swatch: ForwardRefExoticComponent<ColorPickerSwatchProps & RefAttributes<HTMLDivElement>>;
     SwatchGroup: ForwardRefExoticComponent<ColorPickerSwatchGroupProps & RefAttributes<HTMLDivElement>>;
     SwatchTrigger: ForwardRefExoticComponent<ColorPickerSwatchTriggerProps & RefAttributes<HTMLButtonElement>>;
-    TransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridPrps & RefAttributes<HTMLDivElement>>;
+    TransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridProps & RefAttributes<HTMLDivElement>>;
     Trigger: ForwardRefExoticComponent<ColorPickerTriggerProps & RefAttributes<HTMLButtonElement>>;
+    ValueText: ForwardRefExoticComponent<ColorPickerValueTextProps & RefAttributes<HTMLDivElement>>;
 };
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
-export type { ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridPrps, ColorPickerTriggerProps, };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
+export type { ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueTextProps, };

package/color-picker/index.mjs

@@ -20,6 +20,7 @@ import { ColorPickerSwatchGroup } from './color-picker-swatch-group.mjs';
 import { ColorPickerSwatchTrigger } from './color-picker-swatch-trigger.mjs';
 import { ColorPickerTransparencyGrid } from './color-picker-transparency-grid.mjs';
 import { ColorPickerTrigger } from './color-picker-trigger.mjs';
+import { ColorPickerValueText } from './color-picker-value-text.mjs';
 
 const ColorPicker = Object.assign(ColorPicker$1, {
   Root: ColorPicker$1,
@@ -39,7 +40,8 @@ const ColorPicker = Object.assign(ColorPicker$1, {
   SwatchGroup: ColorPickerSwatchGroup,
   SwatchTrigger: ColorPickerSwatchTrigger,
   TransparencyGrid: ColorPickerTransparencyGrid,
-  Trigger: ColorPickerTrigger
+  Trigger: ColorPickerTrigger,
+  ValueText: ColorPickerValueText
 });
 
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText };

package/combobox/combobox-content.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const ComboboxContent = react.forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = comboboxContext.useComboboxContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxInnerContent, { ref, ...localProps }) });
 });
 ComboboxContent.displayName = "ComboboxContent";
 const ComboboxInnerContent = react.forwardRef(

package/combobox/combobox-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface ComboboxContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface ComboboxContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const ComboboxContent: ForwardRefExoticComponent<ComboboxContentProps & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-content.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const ComboboxContent = forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useComboboxContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(ComboboxInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(ComboboxInnerContent, { ref, ...localProps }) });
 });
 ComboboxContent.displayName = "ComboboxContent";
 const ComboboxInnerContent = forwardRef(

package/date-picker/date-picker-content.cjs

@@ -7,15 +7,24 @@ 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');
 const datePickerContext = require('./date-picker-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const DatePickerContent = react.forwardRef(
   (props, ref) => {
+    const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+    const api = datePickerContext.useDatePickerContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerInnerContent, { ref, ...localProps }) });
+  }
+);
+DatePickerContent.displayName = "DatePickerContent";
+const DatePickerInnerContent = react.forwardRef(
+  function DatePickerInnerContent2(props, ref) {
     const api = datePickerContext.useDatePickerContext();
     const mergedProps = react$1.mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
-DatePickerContent.displayName = "DatePickerContent";
 
 exports.DatePickerContent = DatePickerContent;

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

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

package/date-picker/date-picker-content.mjs

@@ -3,15 +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 } from '../presence/index.mjs';
 import { useDatePickerContext } from './date-picker-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const DatePickerContent = forwardRef(
   (props, ref) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
+    const api = useDatePickerContext();
+    return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(DatePickerInnerContent, { ref, ...localProps }) });
+  }
+);
+DatePickerContent.displayName = "DatePickerContent";
+const DatePickerInnerContent = forwardRef(
+  function DatePickerInnerContent2(props, ref) {
     const api = useDatePickerContext();
     const mergedProps = mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
-DatePickerContent.displayName = "DatePickerContent";
 
 export { DatePickerContent };

package/date-picker/date-picker-view.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
@@ -17,7 +18,16 @@ const DatePickerView = react.forwardRef((props, ref) => {
   ]);
   const api = datePickerContext.useDatePickerContext();
   const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(datePickerViewContext.DatePickerViewProvider, { value: viewProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...localProps, ref, hidden: api.view !== viewProps.view, children: view }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(datePickerViewContext.DatePickerViewProvider, { value: viewProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    factory.ark.div,
+    {
+      hidden: api.view !== viewProps.view,
+      ...anatomy.datePickerAnatomy.build().view.attrs,
+      ...localProps,
+      ref,
+      children: view
+    }
+  ) });
 });
 DatePickerView.displayName = "DatePickerView";
 

package/date-picker/date-picker-view.mjs

@@ -1,5 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { datePickerAnatomy } from '@ark-ui/anatomy';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
@@ -13,7 +14,16 @@ const DatePickerView = forwardRef((props, ref) => {
   ]);
   const api = useDatePickerContext();
   const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(DatePickerViewProvider, { value: viewProps, children: /* @__PURE__ */ jsx(ark.div, { ...localProps, ref, hidden: api.view !== viewProps.view, children: view }) });
+  return /* @__PURE__ */ jsx(DatePickerViewProvider, { value: viewProps, children: /* @__PURE__ */ jsx(
+    ark.div,
+    {
+      hidden: api.view !== viewProps.view,
+      ...datePickerAnatomy.build().view.attrs,
+      ...localProps,
+      ref,
+      children: view
+    }
+  ) });
 });
 DatePickerView.displayName = "DatePickerView";
 

package/dialog/dialog-backdrop.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const DialogBackdrop = react.forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = dialogContext.useDialogContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(DialogInnerBackdrop, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.backdropProps }), children: /* @__PURE__ */ jsxRuntime.jsx(DialogInnerBackdrop, { ref, ...localProps }) });
 });
 DialogBackdrop.displayName = "DialogBackdrop";
 const DialogInnerBackdrop = react.forwardRef(

package/dialog/dialog-backdrop.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface DialogBackdropProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface DialogBackdropProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const DialogBackdrop: ForwardRefExoticComponent<DialogBackdropProps & RefAttributes<HTMLDivElement>>;

package/dialog/dialog-backdrop.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const DialogBackdrop = forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useDialogContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(DialogInnerBackdrop, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.backdropProps }), children: /* @__PURE__ */ jsx(DialogInnerBackdrop, { ref, ...localProps }) });
 });
 DialogBackdrop.displayName = "DialogBackdrop";
 const DialogInnerBackdrop = forwardRef(

package/dialog/dialog-content.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const DialogContent = react.forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = dialogContext.useDialogContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(DialogInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(DialogInnerContent, { ref, ...localProps }) });
 });
 DialogContent.displayName = "DialogContent";
 const DialogInnerContent = react.forwardRef(

package/dialog/dialog-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface DialogContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface DialogContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const DialogContent: ForwardRefExoticComponent<DialogContentProps & RefAttributes<HTMLDivElement>>;

package/dialog/dialog-content.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const DialogContent = forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useDialogContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(DialogInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(DialogInnerContent, { ref, ...localProps }) });
 });
 DialogContent.displayName = "DialogContent";
 const DialogInnerContent = forwardRef(

package/hover-card/hover-card-content.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const HoverCardContent = react.forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = hoverCardContext.useHoverCardContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(HoverCardInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(HoverCardInnerContent, { ref, ...localProps }) });
 });
 HoverCardContent.displayName = "HoverCardContent";
 const HoverCardInnerContent = react.forwardRef(

package/hover-card/hover-card-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface HoverCardContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface HoverCardContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const HoverCardContent: ForwardRefExoticComponent<HoverCardContentProps & RefAttributes<HTMLDivElement>>;

package/hover-card/hover-card-content.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const HoverCardContent = forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useHoverCardContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(HoverCardInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(HoverCardInnerContent, { ref, ...localProps }) });
 });
 HoverCardContent.displayName = "HoverCardContent";
 const HoverCardInnerContent = forwardRef(

package/index.cjs

@@ -72,6 +72,7 @@ const colorPickerSwatchGroup = require('./color-picker/color-picker-swatch-group
 const colorPickerSwatchTrigger = require('./color-picker/color-picker-swatch-trigger.cjs');
 const colorPickerTransparencyGrid = require('./color-picker/color-picker-transparency-grid.cjs');
 const colorPickerTrigger = require('./color-picker/color-picker-trigger.cjs');
+const colorPickerValueText = require('./color-picker/color-picker-value-text.cjs');
 const colorPickerAreaContext = require('./color-picker/color-picker-area-context.cjs');
 const colorPickerChannelSliderContext = require('./color-picker/color-picker-channel-slider-context.cjs');
 const colorPickerContext = require('./color-picker/color-picker-context.cjs');
@@ -329,6 +330,7 @@ exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
 exports.ColorPickerSwatchTrigger = colorPickerSwatchTrigger.ColorPickerSwatchTrigger;
 exports.ColorPickerTransparencyGrid = colorPickerTransparencyGrid.ColorPickerTransparencyGrid;
 exports.ColorPickerTrigger = colorPickerTrigger.ColorPickerTrigger;
+exports.ColorPickerValueText = colorPickerValueText.ColorPickerValueText;
 exports.useColorPickerAreaContext = colorPickerAreaContext.useColorPickerAreaContext;
 exports.useColorPickerChannelSliderContext = colorPickerChannelSliderContext.useColorPickerChannelSliderContext;
 exports.useColorPickerContext = colorPickerContext.useColorPickerContext;

package/index.mjs

@@ -68,6 +68,7 @@ export { ColorPickerSwatchGroup } from './color-picker/color-picker-swatch-group
 export { ColorPickerSwatchTrigger } from './color-picker/color-picker-swatch-trigger.mjs';
 export { ColorPickerTransparencyGrid } from './color-picker/color-picker-transparency-grid.mjs';
 export { ColorPickerTrigger } from './color-picker/color-picker-trigger.mjs';
+export { ColorPickerValueText } from './color-picker/color-picker-value-text.mjs';
 export { useColorPickerAreaContext } from './color-picker/color-picker-area-context.mjs';
 export { useColorPickerChannelSliderContext } from './color-picker/color-picker-channel-slider-context.mjs';
 export { useColorPickerContext } from './color-picker/color-picker-context.mjs';

package/menu/menu-content.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const MenuContent = react.forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = menuContext.useMenuContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api?.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(MenuInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api?.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(MenuInnerContent, { ref, ...localProps }) });
 });
 MenuContent.displayName = "MenuContent";
 const MenuInnerContent = react.forwardRef(

package/menu/menu-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface MenuContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface MenuContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const MenuContent: ForwardRefExoticComponent<MenuContentProps & RefAttributes<HTMLDivElement>>;

package/menu/menu-content.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const MenuContent = forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useMenuContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api?.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(MenuInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api?.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(MenuInnerContent, { ref, ...localProps }) });
 });
 MenuContent.displayName = "MenuContent";
 const MenuInnerContent = forwardRef(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -59,7 +59,7 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.0.0-beta.0",
+    "@ark-ui/anatomy": "1.0.0-beta.1",
     "@zag-js/accordion": "0.26.0",
     "@zag-js/anatomy": "0.26.0",
     "@zag-js/avatar": "0.26.0",
@@ -96,38 +96,38 @@
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
-    "@storybook/addon-a11y": "7.4.6",
-    "@storybook/addon-essentials": "7.4.6",
-    "@storybook/addons": "7.4.6",
-    "@storybook/react": "7.4.6",
-    "@storybook/react-vite": "7.4.6",
+    "@storybook/addon-a11y": "7.5.1",
+    "@storybook/addon-essentials": "7.5.1",
+    "@storybook/addons": "7.5.1",
+    "@storybook/react": "7.5.1",
+    "@storybook/react-vite": "7.5.1",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.5.1",
-    "@types/jsdom": "21.1.3",
-    "@types/react": "18.2.28",
-    "@types/react-dom": "18.2.13",
+    "@types/jsdom": "21.1.4",
+    "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.7.5",
-    "@typescript-eslint/parser": "6.7.5",
+    "@typescript-eslint/eslint-plugin": "6.9.0",
+    "@typescript-eslint/parser": "6.9.0",
     "@vitejs/plugin-react": "4.1.0",
     "@vitest/coverage-v8": "0.34.6",
-    "eslint": "8.51.0",
+    "eslint": "8.52.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "globby": "13.2.2",
     "jsdom": "22.1.0",
-    "lucide-react": "0.287.0",
+    "lucide-react": "0.289.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
     "release-it": "16.2.1",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.4.6",
+    "storybook": "7.5.1",
     "typescript": "5.2.2",
-    "vite": "4.4.11",
-    "vite-plugin-dts": "3.6.0",
+    "vite": "4.5.0",
+    "vite-plugin-dts": "3.6.1",
     "vitest": "0.34.6"
   },
   "peerDependencies": {

package/popover/popover-content.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const PopoverContent = react.forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = popoverContext.usePopoverContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(PopoverInnerContent, { ref, ...localProps }) });
 });
 PopoverContent.displayName = "PopoverContent";
 const PopoverInnerContent = react.forwardRef(

package/popover/popover-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface PopoverContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface PopoverContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const PopoverContent: ForwardRefExoticComponent<PopoverContentProps & RefAttributes<HTMLDivElement>>;

package/popover/popover-content.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const PopoverContent = forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = usePopoverContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(PopoverInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(PopoverInnerContent, { ref, ...localProps }) });
 });
 PopoverContent.displayName = "PopoverContent";
 const PopoverInnerContent = forwardRef(

package/presence/index.d.ts

@@ -2,8 +2,8 @@ import { ReactElement, JSXElementConstructor } from 'react';
 /// <reference types="react" />
 import { type PresenceProps } from './presence';
 import { splitPresenceProps } from './split-presence-props';
-declare const Presence: ((props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | null) & {
-    Root: (props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | null;
+declare const Presence: ((props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | undefined) & {
+    Root: (props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | undefined;
 };
 export { Presence, splitPresenceProps };
 export type { PresenceProps };

package/presence/presence.cjs

@@ -9,14 +9,14 @@ const createSplitProps = require('../create-split-props.cjs');
 const usePresence = require('./use-presence.cjs');
 
 const Presence = (props) => {
-  const [presenceProps, { children, lazyMount, unmountOnExit }] = createSplitProps.createSplitProps()(props, ["present", "onExitComplete"]);
+  const [presenceProps, { children, lazyMount, fallback, unmountOnExit }] = createSplitProps.createSplitProps()(props, ["present", "onExitComplete"]);
   const api = usePresence.usePresence(presenceProps);
   const wasEverPresent = react.useRef(false);
   if (api.isPresent) {
     wasEverPresent.current = true;
   }
   if (!api.isPresent && !wasEverPresent.current && lazyMount || unmountOnExit && !api.isPresent && wasEverPresent.current) {
-    return null;
+    return fallback;
   }
   const onlyChild = react.Children.only(children);
   return react.cloneElement(onlyChild, {

package/presence/presence.d.ts

@@ -15,5 +15,9 @@ export interface PresenceProps extends UsePresenceProps {
      * @default false
      */
     unmountOnExit?: boolean;
+    /**
+     * A fallback to render the component is not present.
+     */
+    fallback?: ReactElement;
 }
-export declare const Presence: (props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | null;
+export declare const Presence: (props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | undefined;

package/presence/presence.mjs

@@ -5,14 +5,14 @@ import { createSplitProps } from '../create-split-props.mjs';
 import { usePresence } from './use-presence.mjs';
 
 const Presence = (props) => {
-  const [presenceProps, { children, lazyMount, unmountOnExit }] = createSplitProps()(props, ["present", "onExitComplete"]);
+  const [presenceProps, { children, lazyMount, fallback, unmountOnExit }] = createSplitProps()(props, ["present", "onExitComplete"]);
   const api = usePresence(presenceProps);
   const wasEverPresent = useRef(false);
   if (api.isPresent) {
     wasEverPresent.current = true;
   }
   if (!api.isPresent && !wasEverPresent.current && lazyMount || unmountOnExit && !api.isPresent && wasEverPresent.current) {
-    return null;
+    return fallback;
   }
   const onlyChild = Children.only(children);
   return cloneElement(onlyChild, {

package/presence/split-presence-props.d.ts

@@ -1,2 +1,2 @@
 import type { PresenceProps } from './presence';
-export declare function splitPresenceProps<T>(props: T & Omit<PresenceProps, 'children'>): [Omit<PresenceProps, "children">, Omit<T & Omit<PresenceProps, "children">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">];
+export declare function splitPresenceProps<T>(props: T & Omit<PresenceProps, 'children'>): [Omit<PresenceProps, "children" | "fallback">, Omit<T & Omit<PresenceProps, "children">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">];

package/select/select-content.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const SelectContent = react.forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = selectContext.useSelectContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(SelectInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(SelectInnerContent, { ref, ...localProps }) });
 });
 SelectContent.displayName = "SelectContent";
 const SelectInnerContent = react.forwardRef(

package/select/select-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface SelectContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface SelectContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const SelectContent: ForwardRefExoticComponent<SelectContentProps & RefAttributes<HTMLDivElement>>;

package/select/select-content.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const SelectContent = forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useSelectContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(SelectInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(SelectInnerContent, { ref, ...localProps }) });
 });
 SelectContent.displayName = "SelectContent";
 const SelectInnerContent = forwardRef(

package/tabs/tab-content.d.ts

@@ -3,7 +3,7 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type ContentProps } from '@zag-js/tabs';
 import { type HTMLArkProps } from '../factory';
 import { type TabPresenceProps } from './tab-presence';
-export interface TabContentProps extends InnerTabContentProps, Omit<TabPresenceProps, 'children'> {
+export interface TabContentProps extends InnerTabContentProps, Omit<TabPresenceProps, 'children' | 'fallback'> {
 }
 export declare const TabContent: ForwardRefExoticComponent<TabContentProps & RefAttributes<HTMLDivElement>>;
 type InnerTabContentProps = HTMLArkProps<'div'> & ContentProps;

package/tooltip/tooltip-content.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const TooltipContent = react.forwardRef((props, ref) => {
   const [presenceProps, tooltipContentProps] = splitPresenceProps.splitPresenceProps(props);
   const api = tooltipContext.useTooltipContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipInnerContent, { ref, ...tooltipContentProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(TooltipInnerContent, { ref, ...tooltipContentProps }) });
 });
 TooltipContent.displayName = "TooltipContent";
 const TooltipInnerContent = react.forwardRef(

package/tooltip/tooltip-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface TooltipContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface TooltipContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const TooltipContent: ForwardRefExoticComponent<TooltipContentProps & RefAttributes<HTMLDivElement>>;

package/tooltip/tooltip-content.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const TooltipContent = forwardRef((props, ref) => {
   const [presenceProps, tooltipContentProps] = splitPresenceProps(props);
   const api = useTooltipContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(TooltipInnerContent, { ref, ...tooltipContentProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(TooltipInnerContent, { ref, ...tooltipContentProps }) });
 });
 TooltipContent.displayName = "TooltipContent";
 const TooltipInnerContent = forwardRef(