@ark-ui/solid 0.10.1 → 0.11.0

package/CHANGELOG.md

@@ -6,6 +6,17 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [0.11.0] - 2023-09-08
+
+### Added
+
+- Added `Presence` component
+- To improve performance and reduce initial load times, we've introduced two new properties to the `AccordionContent`, `ComboboxContent`, `DialogBackdrop`, `DialogContent`, `HoverCardContent`, `MenuContent`, `PopoverContent`, `SelectContent`, and `TooltipContent` components. The `lazyMount` property allows for on-demand rendering of content, while the `unmountOnExit` property enables the removal of the component from the DOM once it's no longer required, ensuring better resource management and cleaner code.
+
+### Fixed
+
+- Resolved an issue where the `ark` factory was not exported correctly.
+
 ## [0.10.1] - 2023-09-02
 
 ### Fixed
@@ -150,7 +161,7 @@ description: All notable changes to this project will be documented in this file
 - Add `Toast`
 - Add `Tooltip`
 
-[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/solid@0.10.1...HEAD
+[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/solid@0.11.0...HEAD
 [0.1.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.1.0
 [0.2.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.2.0
 [0.3.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.3.0
@@ -163,5 +174,6 @@ description: All notable changes to this project will be documented in this file
 [0.8.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.8.1
 [0.9.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.9.0
 [0.10.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.10.0
-
 [0.10.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.10.1
+
+[0.11.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.11.0

package/accordion/accordion-content.cjs

@@ -5,14 +5,25 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
+const index = 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 AccordionContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = accordionContext.useAccordionContext();
-  const itemParams = accordionItemContext.useAccordionItemContext();
-  const contentProps = solid.mergeProps(() => api().getContentProps(itemParams), props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const accordionItem = accordionItemContext.useAccordionItemContext();
+  const contentProps = solid.mergeProps(() => api().getContentProps(accordionItem), localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return accordionItem.isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, contentProps);
+    }
+  }));
 };
 
 exports.AccordionContent = AccordionContent;

package/accordion/accordion-content.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
-export type AccordionContentProps = HTMLArkProps<'div'>;
+import { type PresenceProps } from '../presence';
+export type AccordionContentProps = HTMLArkProps<'div'> & PresenceProps;
 export declare const AccordionContent: (props: AccordionContentProps) => JSX.Element;

package/accordion/accordion-content.mjs

@@ -1,14 +1,25 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const AccordionContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useAccordionContext();
-  const itemParams = useAccordionItemContext();
-  const contentProps = mergeProps(() => api().getContentProps(itemParams), props);
-  return createComponent(ark.div, contentProps);
+  const accordionItem = useAccordionItemContext();
+  const contentProps = mergeProps(() => api().getContentProps(accordionItem), localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return accordionItem.isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, contentProps);
+    }
+  }));
 };
 
 export { AccordionContent };

package/combobox/combobox-content.cjs

@@ -5,12 +5,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
+const index = require('../presence/index.cjs');
 const comboboxContext = require('./combobox-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const ComboboxContent = props => {
-  const combobox = comboboxContext.useComboboxContext();
-  const contentProps = solid.mergeProps(() => combobox().contentProps, props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+  const api = comboboxContext.useComboboxContext();
+  const contentProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, contentProps);
+    }
+  }));
 };
 
 exports.ComboboxContent = ComboboxContent;

package/combobox/combobox-content.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
-export type ComboboxContentProps = HTMLArkProps<'div'>;
+import { type PresenceProps } from '../presence';
+export type ComboboxContentProps = HTMLArkProps<'div'> & PresenceProps;
 export declare const ComboboxContent: (props: ComboboxContentProps) => JSX.Element;

package/combobox/combobox-content.mjs

@@ -1,12 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useComboboxContext } from './combobox-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const ComboboxContent = props => {
-  const combobox = useComboboxContext();
-  const contentProps = mergeProps(() => combobox().contentProps, props);
-  return createComponent(ark.div, contentProps);
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useComboboxContext();
+  const contentProps = mergeProps(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, contentProps);
+    }
+  }));
 };
 
 export { ComboboxContent };

package/dialog/dialog-backdrop.cjs

@@ -5,12 +5,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
+const index = require('../presence/index.cjs');
 const dialogContext = require('./dialog-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const DialogBackdrop = props => {
-  const dialog = dialogContext.useDialogContext();
-  const backdropProps = solid.mergeProps(() => dialog().backdropProps, props);
-  return web.createComponent(factory.ark.div, backdropProps);
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+  const api = dialogContext.useDialogContext();
+  const mergedProps = solid.mergeProps(() => api().backdropProps, localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  }));
 };
 
 exports.DialogBackdrop = DialogBackdrop;

package/dialog/dialog-backdrop.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
-export type DialogBackdropProps = HTMLArkProps<'div'>;
+import { type PresenceProps } from '../presence';
+export type DialogBackdropProps = HTMLArkProps<'div'> & PresenceProps;
 export declare const DialogBackdrop: (props: DialogBackdropProps) => JSX.Element;

package/dialog/dialog-backdrop.mjs

@@ -1,12 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useDialogContext } from './dialog-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const DialogBackdrop = props => {
-  const dialog = useDialogContext();
-  const backdropProps = mergeProps(() => dialog().backdropProps, props);
-  return createComponent(ark.div, backdropProps);
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useDialogContext();
+  const mergedProps = mergeProps(() => api().backdropProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
 };
 
 export { DialogBackdrop };

package/dialog/dialog-content.cjs

@@ -5,12 +5,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
+const index = require('../presence/index.cjs');
 const dialogContext = require('./dialog-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const DialogContent = props => {
-  const dialog = dialogContext.useDialogContext();
-  const contentProps = solid.mergeProps(() => dialog().contentProps, props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+  const api = dialogContext.useDialogContext();
+  const mergedProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  }));
 };
 
 exports.DialogContent = DialogContent;

package/dialog/dialog-content.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
-export type DialogContentProps = HTMLArkProps<'div'>;
+import { type PresenceProps } from '../presence';
+export type DialogContentProps = HTMLArkProps<'div'> & PresenceProps;
 export declare const DialogContent: (props: DialogContentProps) => JSX.Element;

package/dialog/dialog-content.mjs

@@ -1,12 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useDialogContext } from './dialog-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const DialogContent = props => {
-  const dialog = useDialogContext();
-  const contentProps = mergeProps(() => dialog().contentProps, props);
-  return createComponent(ark.div, contentProps);
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useDialogContext();
+  const mergedProps = mergeProps(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
 };
 
 export { DialogContent };

package/factory.cjs

@@ -47,4 +47,3 @@ function jsxFactory() {
 const ark = jsxFactory();
 
 exports.ark = ark;
-exports.jsxFactory = jsxFactory;

package/factory.d.ts

@@ -9,6 +9,5 @@ type JsxElements = {
 type AsChildForwardRefComponent<E extends ElementType> = Component<AsChildComponentProps<E>>;
 type AsChildComponentProps<E extends ElementType> = ComponentProps<E> & AsChildProps;
 export type HTMLArkProps<T extends ElementType> = AsChildComponentProps<T>;
-export declare function jsxFactory(): JsxElements;
 export declare const ark: JsxElements;
 export {};

package/factory.mjs

@@ -42,4 +42,4 @@ function jsxFactory() {
 }
 const ark = jsxFactory();
 
-export { ark, jsxFactory };
+export { ark };

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

@@ -5,12 +5,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
+const index = require('../presence/index.cjs');
 const hoverCardContext = require('./hover-card-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const HoverCardContent = props => {
-  const hoverCard = hoverCardContext.useHoverCardContext();
-  const contentProps = solid.mergeProps(() => hoverCard().contentProps, props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+  const api = hoverCardContext.useHoverCardContext();
+  const mergedProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  }));
 };
 
 exports.HoverCardContent = HoverCardContent;

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

@@ -1,4 +1,5 @@
 import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
-export type HoverCardContentProps = HTMLArkProps<'div'>;
+import { type PresenceProps } from '../presence';
+export type HoverCardContentProps = HTMLArkProps<'div'> & PresenceProps;
 export declare const HoverCardContent: (props: HoverCardContentProps) => JSX.Element;

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

@@ -1,12 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useHoverCardContext } from './hover-card-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const HoverCardContent = props => {
-  const hoverCard = useHoverCardContext();
-  const contentProps = mergeProps(() => hoverCard().contentProps, props);
-  return createComponent(ark.div, contentProps);
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useHoverCardContext();
+  const mergedProps = mergeProps(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
 };
 
 export { HoverCardContent };

package/index.cjs

@@ -13,25 +13,27 @@ const index$6 = require('./date-picker/index.cjs');
 const index$7 = require('./dialog/index.cjs');
 const index$8 = require('./editable/index.cjs');
 const index$9 = require('./environment/index.cjs');
+const factory = require('./factory.cjs');
 const index$a = require('./hover-card/index.cjs');
 const index$b = require('./menu/index.cjs');
 const index$c = require('./number-input/index.cjs');
 const index$d = require('./pagination/index.cjs');
 const index$e = require('./pin-input/index.cjs');
 const index$f = require('./popover/index.cjs');
-const index$g = require('./pressable/index.cjs');
-const index$h = require('./radio-group/index.cjs');
-const index$i = require('./range-slider/index.cjs');
-const index$j = require('./rating-group/index.cjs');
-const index$k = require('./segment-group/index.cjs');
-const index$l = require('./select/index.cjs');
-const index$m = require('./slider/index.cjs');
-const index$n = require('./splitter/index.cjs');
-const index$o = require('./switch/index.cjs');
-const index$p = require('./tabs/index.cjs');
-const index$q = require('./tags-input/index.cjs');
-const index$r = require('./toast/index.cjs');
-const index$s = require('./tooltip/index.cjs');
+const index$g = require('./presence/index.cjs');
+const index$h = require('./pressable/index.cjs');
+const index$i = require('./radio-group/index.cjs');
+const index$j = require('./range-slider/index.cjs');
+const index$k = require('./rating-group/index.cjs');
+const index$l = require('./segment-group/index.cjs');
+const index$m = require('./select/index.cjs');
+const index$n = require('./slider/index.cjs');
+const index$o = require('./splitter/index.cjs');
+const index$p = require('./switch/index.cjs');
+const index$q = require('./tabs/index.cjs');
+const index$r = require('./tags-input/index.cjs');
+const index$s = require('./toast/index.cjs');
+const index$t = require('./tooltip/index.cjs');
 const accordionContent = require('./accordion/accordion-content.cjs');
 const accordionItem = require('./accordion/accordion-item.cjs');
 const accordionTrigger = require('./accordion/accordion-trigger.cjs');
@@ -183,6 +185,7 @@ const popoverTitle = require('./popover/popover-title.cjs');
 const popoverTrigger = require('./popover/popover-trigger.cjs');
 const popover = require('@zag-js/popover');
 const popoverContext = require('./popover/popover-context.cjs');
+const splitPresenceProps = require('./presence/split-presence-props.cjs');
 const usePressable = require('./pressable/use-pressable.cjs');
 const radio = require('./radio-group/radio.cjs');
 const radioControl = require('./radio-group/radio-control.cjs');
@@ -291,25 +294,27 @@ exports.DatePicker = index$6.DatePicker;
 exports.Dialog = index$7.Dialog;
 exports.Editable = index$8.Editable;
 exports.Environment = index$9.Environment;
+exports.ark = factory.ark;
 exports.HoverCard = index$a.HoverCard;
 exports.Menu = index$b.Menu;
 exports.NumberInput = index$c.NumberInput;
 exports.Pagination = index$d.Pagination;
 exports.PinInput = index$e.PinInput;
 exports.Popover = index$f.Popover;
-exports.Pressable = index$g.Pressable;
-exports.RadioGroup = index$h.RadioGroup;
-exports.RangeSlider = index$i.RangeSlider;
-exports.RatingGroup = index$j.RatingGroup;
-exports.SegmentGroup = index$k.SegmentGroup;
-exports.Select = index$l.Select;
-exports.Slider = index$m.Slider;
-exports.Splitter = index$n.Splitter;
-exports.Switch = index$o.Switch;
-exports.Tabs = index$p.Tabs;
-exports.TagsInput = index$q.TagsInput;
-exports.Toast = index$r.Toast;
-exports.Tooltip = index$s.Tooltip;
+exports.Presence = index$g.Presence;
+exports.Pressable = index$h.Pressable;
+exports.RadioGroup = index$i.RadioGroup;
+exports.RangeSlider = index$j.RangeSlider;
+exports.RatingGroup = index$k.RatingGroup;
+exports.SegmentGroup = index$l.SegmentGroup;
+exports.Select = index$m.Select;
+exports.Slider = index$n.Slider;
+exports.Splitter = index$o.Splitter;
+exports.Switch = index$p.Switch;
+exports.Tabs = index$q.Tabs;
+exports.TagsInput = index$r.TagsInput;
+exports.Toast = index$s.Toast;
+exports.Tooltip = index$t.Tooltip;
 exports.AccordionContent = accordionContent.AccordionContent;
 exports.AccordionItem = accordionItem.AccordionItem;
 exports.AccordionTrigger = accordionTrigger.AccordionTrigger;
@@ -494,6 +499,7 @@ Object.defineProperty(exports, 'popoverAnatomy', {
 	get: () => popover.anatomy
 });
 exports.usePopoverContext = popoverContext.usePopoverContext;
+exports.splitPresenceProps = splitPresenceProps.splitPresenceProps;
 exports.usePressable = usePressable.usePressable;
 exports.Radio = radio.Radio;
 exports.RadioControl = radioControl.RadioControl;

package/index.d.ts

@@ -9,12 +9,14 @@ export * from './date-picker';
 export * from './dialog';
 export * from './editable';
 export * from './environment';
+export * from './factory';
 export * from './hover-card';
 export * from './menu';
 export * from './number-input';
 export * from './pagination';
 export * from './pin-input';
 export * from './popover';
+export * from './presence';
 export * from './pressable';
 export * from './radio-group';
 export * from './range-slider';

package/index.mjs

@@ -9,12 +9,14 @@ export { DatePicker } from './date-picker/index.mjs';
 export { Dialog } from './dialog/index.mjs';
 export { Editable } from './editable/index.mjs';
 export { Environment } from './environment/index.mjs';
+export { ark } from './factory.mjs';
 export { HoverCard } from './hover-card/index.mjs';
 export { Menu } from './menu/index.mjs';
 export { NumberInput } from './number-input/index.mjs';
 export { Pagination } from './pagination/index.mjs';
 export { PinInput } from './pin-input/index.mjs';
 export { Popover } from './popover/index.mjs';
+export { Presence } from './presence/index.mjs';
 export { Pressable } from './pressable/index.mjs';
 export { RadioGroup } from './radio-group/index.mjs';
 export { RangeSlider } from './range-slider/index.mjs';
@@ -179,6 +181,7 @@ export { PopoverTitle } from './popover/popover-title.mjs';
 export { PopoverTrigger } from './popover/popover-trigger.mjs';
 export { anatomy as popoverAnatomy } from '@zag-js/popover';
 export { usePopoverContext } from './popover/popover-context.mjs';
+export { splitPresenceProps } from './presence/split-presence-props.mjs';
 export { usePressable } from './pressable/use-pressable.mjs';
 export { Radio } from './radio-group/radio.mjs';
 export { RadioControl } from './radio-group/radio-control.mjs';

package/menu/menu-content.cjs

@@ -5,12 +5,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
+const index = require('../presence/index.cjs');
 const menuContext = require('./menu-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const MenuContent = props => {
-  const menu = menuContext.useMenuContext();
-  const contentProps = solid.mergeProps(() => menu?.().contentProps, props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+  const api = menuContext.useMenuContext();
+  const mergedProps = solid.mergeProps(() => api?.().contentProps, localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api?.().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  }));
 };
 
 exports.MenuContent = MenuContent;

package/menu/menu-content.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
-export type MenuContentProps = HTMLArkProps<'div'>;
+import { type PresenceProps } from '../presence';
+export type MenuContentProps = HTMLArkProps<'div'> & PresenceProps;
 export declare const MenuContent: (props: MenuContentProps) => JSX.Element;

package/menu/menu-content.mjs

@@ -1,12 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useMenuContext } from './menu-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const MenuContent = props => {
-  const menu = useMenuContext();
-  const contentProps = mergeProps(() => menu?.().contentProps, props);
-  return createComponent(ark.div, contentProps);
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useMenuContext();
+  const mergedProps = mergeProps(() => api?.().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api?.().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
 };
 
 export { MenuContent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -19,6 +19,7 @@
     "pagination",
     "pin input",
     "popover",
+    "presence",
     "pressable",
     "radio group",
     "range slider",
@@ -75,6 +76,7 @@
     "@zag-js/pagination": "0.17.0",
     "@zag-js/pin-input": "0.17.0",
     "@zag-js/popover": "0.17.0",
+    "@zag-js/presence": "0.17.0",
     "@zag-js/pressable": "0.17.0",
     "@zag-js/radio-group": "0.17.0",
     "@zag-js/range-slider": "0.17.0",
@@ -99,12 +101,12 @@
     "@storybook/blocks": "7.4.0",
     "@storybook/testing-library": "0.2.0",
     "@testing-library/dom": "9.3.1",
-    "@testing-library/jest-dom": "6.1.2",
+    "@testing-library/jest-dom": "6.1.3",
     "@testing-library/user-event": "14.4.3",
     "@types/jsdom": "21.1.2",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.5.0",
-    "@typescript-eslint/parser": "6.5.0",
+    "@typescript-eslint/eslint-plugin": "6.6.0",
+    "@typescript-eslint/parser": "6.6.0",
     "@vitest/coverage-v8": "0.34.3",
     "eslint": "8.48.0",
     "globby": "13.2.2",
@@ -217,6 +219,11 @@
       "import": "./popover/index.mjs",
       "require": "./popover/index.cjs"
     },
+    "./presence": {
+      "types": "./presence/index.d.ts",
+      "import": "./presence/index.mjs",
+      "require": "./presence/index.cjs"
+    },
     "./pressable": {
       "types": "./pressable/index.d.ts",
       "import": "./pressable/index.mjs",