@ark-ui/solid 0.10.1 → 1.0.0-beta.0

package/pin-input/pin-input-control.mjs

@@ -1,23 +1,12 @@
-import { createComponent, mergeProps as mergeProps$1, spread, template } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
-import { splitProps } from 'solid-js';
 import { ark } from '../factory.mjs';
 import { usePinInputContext } from './pin-input-context.mjs';
 
-const _tmpl$ = /*#__PURE__*/template(`<input>`);
 const PinInputControl = props => {
   const api = usePinInputContext();
-  const [childrenProps, restProps] = splitProps(props, ['children']);
-  const controlProps = mergeProps(() => api().controlProps, restProps);
-  return [createComponent(ark.div, mergeProps$1(controlProps, {
-    get children() {
-      return childrenProps.children;
-    }
-  })), (() => {
-    const _el$ = _tmpl$();
-    spread(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  const mergedProps = mergeProps(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { PinInputControl };

package/pin-input/pin-input.cjs

@@ -9,14 +9,19 @@ const factory = require('../factory.cjs');
 const pinInputContext = require('./pin-input-context.cjs');
 const usePinInput = require('./use-pin-input.cjs');
 
+const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const PinInput = props => {
-  const [pinInputProps, htmlProps] = createSplitProps.createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onChange', 'onComplete', 'onInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
+  const [pinInputProps, localProps] = createSplitProps.createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
   const api = usePinInput.usePinInput(pinInputProps);
-  const rootProps = solid.mergeProps(() => api().rootProps, htmlProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(pinInputContext.PinInputProvider, {
     value: api,
     get children() {
-      return web.createComponent(factory.ark.div, rootProps);
+      return [web.createComponent(factory.ark.div, mergedProps), (() => {
+        const _el$ = _tmpl$();
+        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
     }
   });
 };

package/pin-input/pin-input.mjs

@@ -1,18 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { PinInputProvider } from './pin-input-context.mjs';
 import { usePinInput } from './use-pin-input.mjs';
 
+const _tmpl$ = /*#__PURE__*/template(`<input>`);
 const PinInput = props => {
-  const [pinInputProps, htmlProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onChange', 'onComplete', 'onInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
+  const [pinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
   const api = usePinInput(pinInputProps);
-  const rootProps = mergeProps(() => api().rootProps, htmlProps);
+  const mergedProps = mergeProps(() => api().rootProps, localProps);
   return createComponent(PinInputProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, rootProps);
+      return [createComponent(ark.div, mergedProps), (() => {
+        const _el$ = _tmpl$();
+        spread(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
     }
   });
 };

package/popover/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popover$1 = require('./popover.cjs');
+const popover = require('./popover.cjs');
 const popoverAnchor = require('./popover-anchor.cjs');
 const popoverArrow = require('./popover-arrow.cjs');
 const popoverArrowTip = require('./popover-arrow-tip.cjs');
@@ -10,19 +10,20 @@ const popoverCloseTrigger = require('./popover-close-trigger.cjs');
 const popoverContent = require('./popover-content.cjs');
 const popoverContext = require('./popover-context.cjs');
 const popoverDescription = require('./popover-description.cjs');
+const popoverIndicator = require('./popover-indicator.cjs');
 const popoverPositioner = require('./popover-positioner.cjs');
 const popoverTitle = require('./popover-title.cjs');
 const popoverTrigger = require('./popover-trigger.cjs');
-const popover = require('@zag-js/popover');
 
-const Popover = Object.assign(popover$1.Popover, {
-  Root: popover$1.Popover,
+const Popover = Object.assign(popover.Popover, {
+  Root: popover.Popover,
   Anchor: popoverAnchor.PopoverAnchor,
   Arrow: popoverArrow.PopoverArrow,
   ArrowTip: popoverArrowTip.PopoverArrowTip,
   CloseTrigger: popoverCloseTrigger.PopoverCloseTrigger,
   Content: popoverContent.PopoverContent,
   Description: popoverDescription.PopoverDescription,
+  Indicator: popoverIndicator.PopoverIndicator,
   Positioner: popoverPositioner.PopoverPositioner,
   Title: popoverTitle.PopoverTitle,
   Trigger: popoverTrigger.PopoverTrigger
@@ -35,11 +36,8 @@ exports.PopoverCloseTrigger = popoverCloseTrigger.PopoverCloseTrigger;
 exports.PopoverContent = popoverContent.PopoverContent;
 exports.usePopoverContext = popoverContext.usePopoverContext;
 exports.PopoverDescription = popoverDescription.PopoverDescription;
+exports.PopoverIndicator = popoverIndicator.PopoverIndicator;
 exports.PopoverPositioner = popoverPositioner.PopoverPositioner;
 exports.PopoverTitle = popoverTitle.PopoverTitle;
 exports.PopoverTrigger = popoverTrigger.PopoverTrigger;
-Object.defineProperty(exports, 'popoverAnatomy', {
-  enumerable: true,
-  get: () => popover.anatomy
-});
 exports.Popover = Popover;

package/popover/index.d.ts

@@ -5,12 +5,12 @@ import { PopoverArrow, type PopoverArrowProps } from './popover-arrow';
 import { PopoverArrowTip, type PopoverArrowTipProps } from './popover-arrow-tip';
 import { PopoverCloseTrigger, type PopoverCloseTriggerProps } from './popover-close-trigger';
 import { PopoverContent, type PopoverContentProps } from './popover-content';
-import { usePopoverContext } from './popover-context';
+import { usePopoverContext, type PopoverContext } from './popover-context';
 import { PopoverDescription, type PopoverDescriptionProps } from './popover-description';
+import { PopoverIndicator, type PopoverIndicatorProps } from './popover-indicator';
 import { PopoverPositioner, type PopoverPositionerProps } from './popover-positioner';
 import { PopoverTitle, type PopoverTitleProps } from './popover-title';
 import { PopoverTrigger, type PopoverTriggerProps } from './popover-trigger';
-import { popoverAnatomy } from './popover.anatomy';
 declare const Popover: ((props: PopoverProps) => JSX.Element) & {
     Root: (props: PopoverProps) => JSX.Element;
     Anchor: (props: PopoverAnchorProps) => JSX.Element;
@@ -19,9 +19,10 @@ declare const Popover: ((props: PopoverProps) => JSX.Element) & {
     CloseTrigger: (props: PopoverCloseTriggerProps) => JSX.Element;
     Content: (props: PopoverContentProps) => JSX.Element;
     Description: (props: PopoverDescriptionProps) => JSX.Element;
+    Indicator: (props: PopoverIndicatorProps) => JSX.Element;
     Positioner: (props: PopoverPositionerProps) => JSX.Element;
     Title: (props: PopoverTitleProps) => JSX.Element;
     Trigger: (props: PopoverTriggerProps) => JSX.Element;
 };
-export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverPositioner, PopoverTitle, PopoverTrigger, popoverAnatomy, usePopoverContext, };
-export type { PopoverAnchorProps, PopoverArrowProps, PopoverArrowTipProps, PopoverCloseTriggerProps, PopoverContentProps, PopoverDescriptionProps, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, usePopoverContext, };
+export type { PopoverAnchorProps, PopoverArrowProps, PopoverArrowTipProps, PopoverCloseTriggerProps, PopoverContentProps, PopoverContext, PopoverDescriptionProps, PopoverIndicatorProps, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, };

package/popover/index.mjs

@@ -6,10 +6,10 @@ import { PopoverCloseTrigger } from './popover-close-trigger.mjs';
 import { PopoverContent } from './popover-content.mjs';
 export { usePopoverContext } from './popover-context.mjs';
 import { PopoverDescription } from './popover-description.mjs';
+import { PopoverIndicator } from './popover-indicator.mjs';
 import { PopoverPositioner } from './popover-positioner.mjs';
 import { PopoverTitle } from './popover-title.mjs';
 import { PopoverTrigger } from './popover-trigger.mjs';
-export { anatomy as popoverAnatomy } from '@zag-js/popover';
 
 const Popover = Object.assign(Popover$1, {
   Root: Popover$1,
@@ -19,9 +19,10 @@ const Popover = Object.assign(Popover$1, {
   CloseTrigger: PopoverCloseTrigger,
   Content: PopoverContent,
   Description: PopoverDescription,
+  Indicator: PopoverIndicator,
   Positioner: PopoverPositioner,
   Title: PopoverTitle,
   Trigger: PopoverTrigger
 });
 
-export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverPositioner, PopoverTitle, PopoverTrigger };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger };

package/popover/popover-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 popoverContext = require('./popover-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const PopoverContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = popoverContext.usePopoverContext();
-  const contentProps = solid.mergeProps(() => api().contentProps, props);
-  return web.createComponent(factory.ark.div, contentProps);
+  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.PopoverContent = PopoverContent;

package/popover/popover-content.d.ts

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

package/popover/popover-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 { usePopoverContext } from './popover-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const PopoverContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = usePopoverContext();
-  const contentProps = mergeProps(() => api().contentProps, props);
-  return createComponent(ark.div, contentProps);
+  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 { PopoverContent };

package/popover/popover-indicator.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+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 popoverContext = require('./popover-context.cjs');
+
+const PopoverIndicator = props => {
+  const popover = popoverContext.usePopoverContext();
+  const mergedProps = solid.mergeProps(() => popover().indicatorProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.PopoverIndicator = PopoverIndicator;

package/popover/popover-indicator.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type PopoverIndicatorProps = HTMLArkProps<'div'>;
+export declare const PopoverIndicator: (props: PopoverIndicatorProps) => JSX.Element;

package/popover/popover-indicator.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { usePopoverContext } from './popover-context.mjs';
+
+const PopoverIndicator = props => {
+  const popover = usePopoverContext();
+  const mergedProps = mergeProps(() => popover().indicatorProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { PopoverIndicator };

package/popover/popover.cjs

@@ -8,7 +8,7 @@ const popoverContext = require('./popover-context.cjs');
 const usePopover = require('./use-popover.cjs');
 
 const Popover = props => {
-  const [usePopoverProps, restProps] = createSplitProps.createSplitProps()(props, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onClose', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpen', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
+  const [usePopoverProps, restProps] = createSplitProps.createSplitProps()(props, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'dir', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
   const api = usePopover.usePopover(usePopoverProps);
   return web.createComponent(popoverContext.PopoverProvider, {
     value: api,

package/popover/popover.mjs

@@ -4,7 +4,7 @@ import { PopoverProvider } from './popover-context.mjs';
 import { usePopover } from './use-popover.mjs';
 
 const Popover = props => {
-  const [usePopoverProps, restProps] = createSplitProps()(props, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onClose', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpen', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
+  const [usePopoverProps, restProps] = createSplitProps()(props, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'dir', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
   const api = usePopover(usePopoverProps);
   return createComponent(PopoverProvider, {
     value: api,

package/presence/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const presence = require('./presence.cjs');
+const splitPresenceProps = require('./split-presence-props.cjs');
+
+const Presence = Object.assign(presence.Presence, {
+  Root: presence.Presence
+});
+
+exports.splitPresenceProps = splitPresenceProps.splitPresenceProps;
+exports.Presence = Presence;

package/presence/index.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'solid-js';
+import { type PresenceProps } from './presence';
+import { splitPresenceProps } from './split-presence-props';
+declare const Presence: ((props: PresenceProps) => JSX.Element) & {
+    Root: (props: PresenceProps) => JSX.Element;
+};
+export { Presence, splitPresenceProps };
+export type { PresenceProps };

package/presence/index.mjs

@@ -0,0 +1,8 @@
+import { Presence as Presence$1 } from './presence.mjs';
+export { splitPresenceProps } from './split-presence-props.mjs';
+
+const Presence = Object.assign(Presence$1, {
+  Root: Presence$1
+});
+
+export { Presence };

package/presence/presence.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solidJs = require('solid-js');
+const createSplitProps = require('../create-split-props.cjs');
+const usePresence = require('./use-presence.cjs');
+
+const Presence = props => {
+  const [presenceProps, localProps] = createSplitProps.createSplitProps()(props, ['onExitComplete', 'present']);
+  const api = usePresence.usePresence(presenceProps);
+  const [wasEverPresent, setWasEverPresent] = solidJs.createSignal(false);
+  const getChildren = solidJs.children(() => props.children);
+  solidJs.createEffect(() => {
+    const isPresent = api().isPresent;
+    if (isPresent) setWasEverPresent(true);
+    const children = getChildren();
+    if (children instanceof HTMLElement) {
+      api().setNode(children);
+      web.spread(children, {
+        ['data-state']: presenceProps.present ? 'open' : 'closed',
+        hidden: !api().isPresent
+      });
+    }
+  });
+  return web.memo((() => {
+    const _c$ = web.memo(() => !!(!api().isPresent && !wasEverPresent() && localProps.lazyMount || localProps.unmountOnExit && !api().isPresent && wasEverPresent()));
+    return () => _c$() ? null : getChildren();
+  })());
+};
+
+exports.Presence = Presence;

package/presence/presence.d.ts

@@ -0,0 +1,17 @@
+import { JSX, type JSXElement } from 'solid-js';
+import { type UsePresenceProps } from './use-presence';
+export type PresenceProps = UsePresenceProps & {
+    /**
+     * Whether to enable lazy mounting. Defaults to `false`.
+     */
+    lazyMount?: boolean;
+    /**
+     * Whether to unmount on exit. Defaults to `false`.
+     */
+    unmountOnExit?: boolean;
+    /**
+     * The children to render.
+     */
+    children?: JSXElement;
+};
+export declare const Presence: (props: PresenceProps) => JSX.Element;

package/presence/presence.mjs

@@ -0,0 +1,29 @@
+import { spread, memo } from 'solid-js/web';
+import { createSignal, children, createEffect } from 'solid-js';
+import { createSplitProps } from '../create-split-props.mjs';
+import { usePresence } from './use-presence.mjs';
+
+const Presence = props => {
+  const [presenceProps, localProps] = createSplitProps()(props, ['onExitComplete', 'present']);
+  const api = usePresence(presenceProps);
+  const [wasEverPresent, setWasEverPresent] = createSignal(false);
+  const getChildren = children(() => props.children);
+  createEffect(() => {
+    const isPresent = api().isPresent;
+    if (isPresent) setWasEverPresent(true);
+    const children = getChildren();
+    if (children instanceof HTMLElement) {
+      api().setNode(children);
+      spread(children, {
+        ['data-state']: presenceProps.present ? 'open' : 'closed',
+        hidden: !api().isPresent
+      });
+    }
+  });
+  return memo((() => {
+    const _c$ = memo(() => !!(!api().isPresent && !wasEverPresent() && localProps.lazyMount || localProps.unmountOnExit && !api().isPresent && wasEverPresent()));
+    return () => _c$() ? null : getChildren();
+  })());
+};
+
+export { Presence };

package/presence/presence.stories.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+import { Presence } from './';
+type PresenceType = typeof Presence;
+declare const meta: Meta<PresenceType>;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const LazyMount: () => JSX.Element;
+export declare const UnmountOnExit: () => JSX.Element;
+export declare const LazyMountAndUnmountOnExit: () => JSX.Element;

package/presence/presence.test.d.ts

@@ -0,0 +1 @@
+export {};

package/presence/split-presence-props.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createSplitProps = require('../create-split-props.cjs');
+
+function splitPresenceProps(props) {
+  return createSplitProps.createSplitProps()(props, [
+    "lazyMount",
+    "onExitComplete",
+    "present",
+    "unmountOnExit"
+  ]);
+}
+
+exports.splitPresenceProps = splitPresenceProps;

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

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

package/presence/split-presence-props.mjs

@@ -0,0 +1,12 @@
+import { createSplitProps } from '../create-split-props.mjs';
+
+function splitPresenceProps(props) {
+  return createSplitProps()(props, [
+    "lazyMount",
+    "onExitComplete",
+    "present",
+    "unmountOnExit"
+  ]);
+}
+
+export { splitPresenceProps };

package/{toast/use-toast-item.cjs → presence/use-presence.cjs}

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const presence = require('@zag-js/presence');
 const solid = require('@zag-js/solid');
-const toast = require('@zag-js/toast');
 const solidJs = require('solid-js');
 
 function _interopNamespaceDefault(e) {
@@ -23,11 +23,13 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-const toast__namespace = /*#__PURE__*/_interopNamespaceDefault(toast);
+const presence__namespace = /*#__PURE__*/_interopNamespaceDefault(presence);
 
-const useToastItem = (props) => {
-  const [state, send] = solid.useActor(props.toast);
-  return solidJs.createMemo(() => toast__namespace.connect(state, send, solid.normalizeProps));
+const usePresence = (props) => {
+  const [state, send] = solid.useMachine(presence__namespace.machine(props), {
+    context: props
+  });
+  return solidJs.createMemo(() => presence__namespace.connect(state, send, solid.normalizeProps));
 };
 
-exports.useToastItem = useToastItem;
+exports.usePresence = usePresence;

package/presence/use-presence.d.ts

@@ -0,0 +1,5 @@
+import { Accessor } from 'solid-js';
+import * as presence from '@zag-js/presence';
+import type { Optional } from '../types';
+export type UsePresenceProps = Optional<presence.Context, 'present'>;
+export declare const usePresence: (props: UsePresenceProps) => Accessor<presence.Api>;

package/presence/use-presence.mjs

@@ -0,0 +1,12 @@
+import * as presence from '@zag-js/presence';
+import { useMachine, normalizeProps } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
+
+const usePresence = (props) => {
+  const [state, send] = useMachine(presence.machine(props), {
+    context: props
+  });
+  return createMemo(() => presence.connect(state, send, normalizeProps));
+};
+
+export { usePresence };

package/radio-group/index.cjs

@@ -2,31 +2,28 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const radio = require('./radio.cjs');
-const radioContext = require('./radio-context.cjs');
-const radioControl = require('./radio-control.cjs');
 const radioGroup = require('./radio-group.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
+const radioGroupIndicator = require('./radio-group-indicator.cjs');
+const radioGroupItem = require('./radio-group-item.cjs');
+const radioGroupItemContext = require('./radio-group-item-context.cjs');
+const radioGroupItemControl = require('./radio-group-item-control.cjs');
+const radioGroupItemText = require('./radio-group-item-text.cjs');
 const radioGroupLabel = require('./radio-group-label.cjs');
-const radioLabel = require('./radio-label.cjs');
-const radio$1 = require('@zag-js/radio-group');
 
 const RadioGroup = Object.assign(radioGroup.RadioGroup, {
   Root: radioGroup.RadioGroup,
-  Label: radioGroupLabel.RadioGroupLabel,
-  Radio: radio.Radio,
-  RadioLabel: radioLabel.RadioLabel,
-  RadioControl: radioControl.RadioControl
+  Indicator: radioGroupIndicator.RadioGroupIndicator,
+  Item: radioGroupItem.RadioGroupItem,
+  ItemControl: radioGroupItemControl.RadioGroupItemControl,
+  ItemText: radioGroupItemText.RadioGroupItemText,
+  Label: radioGroupLabel.RadioGroupLabel
 });
 
-exports.Radio = radio.Radio;
-exports.useRadioContext = radioContext.useRadioContext;
-exports.RadioControl = radioControl.RadioControl;
 exports.useRadioGroupContext = radioGroupContext.useRadioGroupContext;
+exports.RadioGroupItem = radioGroupItem.RadioGroupItem;
+exports.useRadioGroupItemContext = radioGroupItemContext.useRadioGroupItemContext;
+exports.RadioGroupItemControl = radioGroupItemControl.RadioGroupItemControl;
+exports.RadioGroupItemText = radioGroupItemText.RadioGroupItemText;
 exports.RadioGroupLabel = radioGroupLabel.RadioGroupLabel;
-exports.RadioLabel = radioLabel.RadioLabel;
-Object.defineProperty(exports, 'radioGroupAnatomy', {
-  enumerable: true,
-  get: () => radio$1.anatomy
-});
 exports.RadioGroup = RadioGroup;

package/radio-group/index.d.ts

@@ -1,18 +1,19 @@
 import { JSX } from 'solid-js';
-import { Radio, type RadioProps } from './radio';
-import { useRadioContext } from './radio-context';
-import { RadioControl, type RadioControlProps } from './radio-control';
 import { type RadioGroupProps } from './radio-group';
-import { useRadioGroupContext } from './radio-group-context';
+import { useRadioGroupContext, type RadioGroupContext } from './radio-group-context';
+import { type RadioGroupIndicatorProps } from './radio-group-indicator';
+import { RadioGroupItem, type RadioGroupItemProps } from './radio-group-item';
+import { useRadioGroupItemContext, type RadioGroupItemContext } from './radio-group-item-context';
+import { RadioGroupItemControl, type RadioGroupItemControlProps } from './radio-group-item-control';
+import { RadioGroupItemText, type RadioGroupItemTextProps } from './radio-group-item-text';
 import { RadioGroupLabel, type RadioGroupLabelProps } from './radio-group-label';
-import { radioGroupAnatomy } from './radio-group.anatomy';
-import { RadioLabel, type RadioLabelProps } from './radio-label';
 declare const RadioGroup: ((props: RadioGroupProps) => JSX.Element) & {
     Root: (props: RadioGroupProps) => JSX.Element;
+    Indicator: (props: RadioGroupIndicatorProps) => JSX.Element;
+    Item: (props: RadioGroupItemProps) => JSX.Element;
+    ItemControl: (props: RadioGroupItemControlProps) => JSX.Element;
+    ItemText: (props: RadioGroupItemTextProps) => JSX.Element;
     Label: (props: RadioGroupLabelProps) => JSX.Element;
-    Radio: (props: RadioProps) => JSX.Element;
-    RadioLabel: (props: RadioLabelProps) => JSX.Element;
-    RadioControl: (props: RadioControlProps) => JSX.Element;
 };
-export { Radio, RadioControl, RadioGroup, RadioGroupLabel, RadioLabel, radioGroupAnatomy, useRadioContext, useRadioGroupContext, };
-export type { RadioControlProps, RadioGroupLabelProps, RadioGroupProps, RadioLabelProps, RadioProps, };
+export { RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, useRadioGroupContext, useRadioGroupItemContext, };
+export type { RadioGroupContext, RadioGroupIndicatorProps, RadioGroupItemContext, RadioGroupItemControlProps, RadioGroupItemProps, RadioGroupItemTextProps, RadioGroupLabelProps, RadioGroupProps, };

package/radio-group/index.mjs

@@ -1,18 +1,19 @@
-import { Radio } from './radio.mjs';
-export { useRadioContext } from './radio-context.mjs';
-import { RadioControl } from './radio-control.mjs';
 import { RadioGroup as RadioGroup$1 } from './radio-group.mjs';
 export { useRadioGroupContext } from './radio-group-context.mjs';
+import { RadioGroupIndicator } from './radio-group-indicator.mjs';
+import { RadioGroupItem } from './radio-group-item.mjs';
+export { useRadioGroupItemContext } from './radio-group-item-context.mjs';
+import { RadioGroupItemControl } from './radio-group-item-control.mjs';
+import { RadioGroupItemText } from './radio-group-item-text.mjs';
 import { RadioGroupLabel } from './radio-group-label.mjs';
-import { RadioLabel } from './radio-label.mjs';
-export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
 
 const RadioGroup = Object.assign(RadioGroup$1, {
   Root: RadioGroup$1,
-  Label: RadioGroupLabel,
-  Radio,
-  RadioLabel,
-  RadioControl
+  Indicator: RadioGroupIndicator,
+  Item: RadioGroupItem,
+  ItemControl: RadioGroupItemControl,
+  ItemText: RadioGroupItemText,
+  Label: RadioGroupLabel
 });
 
-export { Radio, RadioControl, RadioGroup, RadioGroupLabel, RadioLabel };
+export { RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel };