@ark-ui/react 2.1.1 → 2.2.1

package/collapsible/index.mjs

@@ -0,0 +1,6 @@
+export { CollapsibleContent } from './collapsible-content.mjs';
+export { useCollapsibleContext } from './collapsible-context.mjs';
+export { CollapsibleRoot } from './collapsible-root.mjs';
+export { CollapsibleTrigger } from './collapsible-trigger.mjs';
+import * as collapsible from './collapsible.mjs';
+export { collapsible as Collapsible };

package/collapsible/split-collapsible-props.cjs

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createSplitProps = require('../create-split-props.cjs');
+
+const splitCollapsibleProps = (props) => createSplitProps.createSplitProps()(props, [
+  "defaultOpen",
+  "dir",
+  "disabled",
+  "getRootNode",
+  "id",
+  "ids",
+  "lazyMount",
+  "onExitComplete",
+  "onOpenChange",
+  "open",
+  "unmountOnExit"
+]);
+
+exports.splitCollapsibleProps = splitCollapsibleProps;

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

@@ -0,0 +1,2 @@
+import type { UseCollapsibleProps } from './use-collapsible';
+export declare const splitCollapsibleProps: <T extends UseCollapsibleProps>(props: T) => [UseCollapsibleProps, Omit<T, "id" | "dir" | "disabled" | "open" | "getRootNode" | "ids" | "lazyMount" | "unmountOnExit" | "onExitComplete" | "onOpenChange" | "defaultOpen">];

package/collapsible/split-collapsible-props.mjs

@@ -0,0 +1,18 @@
+'use client';
+import { createSplitProps } from '../create-split-props.mjs';
+
+const splitCollapsibleProps = (props) => createSplitProps()(props, [
+  "defaultOpen",
+  "dir",
+  "disabled",
+  "getRootNode",
+  "id",
+  "ids",
+  "lazyMount",
+  "onExitComplete",
+  "onOpenChange",
+  "open",
+  "unmountOnExit"
+]);
+
+export { splitCollapsibleProps };

package/collapsible/use-collapsible.cjs

@@ -0,0 +1,55 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const collapsible = require('@zag-js/collapsible');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
+const useEvent = require('../use-event.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const collapsible__namespace = /*#__PURE__*/_interopNamespaceDefault(collapsible);
+
+const useCollapsible = (props = {}) => {
+  const { lazyMount, unmountOnExit } = props;
+  const wasVisible = react.useRef(false);
+  const initialContext = {
+    id: react.useId(),
+    getRootNode: environmentContext.useEnvironmentContext(),
+    ...props,
+    open: props.defaultOpen ?? props.open,
+    "open.controlled": props.open !== void 0
+  };
+  const context = {
+    ...initialContext,
+    open: props.open,
+    onOpenChange: useEvent.useEvent(props.onOpenChange, { sync: true })
+  };
+  const [state, send] = react$1.useMachine(collapsible__namespace.machine(initialContext), { context });
+  const api = collapsible__namespace.connect(state, send, react$1.normalizeProps);
+  if (api.isVisible) {
+    wasVisible.current = true;
+  }
+  const isUnmounted = !api.isVisible && !wasVisible.current && lazyMount || unmountOnExit && !api.isVisible && wasVisible.current;
+  return { ...api, isUnmounted };
+};
+
+exports.useCollapsible = useCollapsible;

package/collapsible/use-collapsible.d.ts

@@ -0,0 +1,17 @@
+import * as collapsible from '@zag-js/collapsible';
+import { type PropTypes } from '@zag-js/react';
+import type { RenderStrategyProps } from '../render-strategy';
+import { type Optional } from '../types';
+export interface UseCollapsibleProps extends Optional<Omit<collapsible.Context, 'open.controlled'>, 'id'>, RenderStrategyProps {
+    /**
+     * The initial open state of the collpasible.
+     */
+    defaultOpen?: collapsible.Context['open'];
+}
+export interface UseCollapsibleReturn extends collapsible.Api<PropTypes> {
+    /**
+     * Whether the content is unmounted
+     */
+    isUnmounted?: boolean;
+}
+export declare const useCollapsible: (props?: UseCollapsibleProps) => UseCollapsibleReturn;

package/collapsible/use-collapsible.mjs

@@ -0,0 +1,32 @@
+'use client';
+import * as collapsible from '@zag-js/collapsible';
+import { useMachine, normalizeProps } from '@zag-js/react';
+import { useRef, useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
+import { useEvent } from '../use-event.mjs';
+
+const useCollapsible = (props = {}) => {
+  const { lazyMount, unmountOnExit } = props;
+  const wasVisible = useRef(false);
+  const initialContext = {
+    id: useId(),
+    getRootNode: useEnvironmentContext(),
+    ...props,
+    open: props.defaultOpen ?? props.open,
+    "open.controlled": props.open !== void 0
+  };
+  const context = {
+    ...initialContext,
+    open: props.open,
+    onOpenChange: useEvent(props.onOpenChange, { sync: true })
+  };
+  const [state, send] = useMachine(collapsible.machine(initialContext), { context });
+  const api = collapsible.connect(state, send, normalizeProps);
+  if (api.isVisible) {
+    wasVisible.current = true;
+  }
+  const isUnmounted = !api.isVisible && !wasVisible.current && lazyMount || unmountOnExit && !api.isVisible && wasVisible.current;
+  return { ...api, isUnmounted };
+};
+
+export { useCollapsible };

package/dialog/dialog-backdrop.cjs

@@ -7,14 +7,14 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const presencePropsContext = require('../presence/presence-props-context.cjs');
 const usePresence = require('../presence/use-presence.cjs');
+const renderStrategy = require('../render-strategy.cjs');
 const dialogContext = require('./dialog-context.cjs');
 
 const DialogBackdrop = react.forwardRef((props, ref) => {
   const api = dialogContext.useDialogContext();
-  const presenceProps = presencePropsContext.usePresencePropsContext();
-  const presenceApi = usePresence.usePresence(react$1.mergeProps({ present: api.isOpen }, presenceProps));
+  const renderStrategyProps = renderStrategy.useRenderStrategyContext();
+  const presenceApi = usePresence.usePresence({ ...renderStrategyProps, present: api.isOpen });
   const mergedProps = react$1.mergeProps(api.backdropProps, presenceApi.getPresenceProps(ref), props);
   if (presenceApi.isUnmounted) {
     return null;

package/dialog/dialog-backdrop.mjs

@@ -3,14 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { usePresencePropsContext } from '../presence/presence-props-context.mjs';
 import { usePresence } from '../presence/use-presence.mjs';
+import { useRenderStrategyContext } from '../render-strategy.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 
 const DialogBackdrop = forwardRef((props, ref) => {
   const api = useDialogContext();
-  const presenceProps = usePresencePropsContext();
-  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
+  const renderStrategyProps = useRenderStrategyContext();
+  const presenceApi = usePresence({ ...renderStrategyProps, present: api.isOpen });
   const mergedProps = mergeProps(api.backdropProps, presenceApi.getPresenceProps(ref), props);
   if (presenceApi.isUnmounted) {
     return null;

package/dialog/dialog-root.cjs

@@ -7,19 +7,20 @@ const jsxRuntime = require('react/jsx-runtime');
 const react = require('@zag-js/react');
 require('react');
 const presenceContext = require('../presence/presence-context.cjs');
-const presencePropsContext = require('../presence/presence-props-context.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const usePresence = require('../presence/use-presence.cjs');
+const renderStrategy = require('../render-strategy.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const dialogContext = require('./dialog-context.cjs');
 const useDialog = require('./use-dialog.cjs');
 
 const DialogRoot = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
+  const [renderStrategyProps] = renderStrategy.splitRenderStrategyProps(presenceProps);
   const api = useDialog.useDialog(localProps);
   const presenceApi = usePresence.usePresence(react.mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(dialogContext.DialogProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presencePropsContext.PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(dialogContext.DialogProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(renderStrategy.RenderStrategyProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) }) });
 };
 
 exports.DialogRoot = DialogRoot;

package/dialog/dialog-root.mjs

@@ -3,19 +3,20 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import 'react';
 import { PresenceProvider } from '../presence/presence-context.mjs';
-import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 import { usePresence } from '../presence/use-presence.mjs';
+import { splitRenderStrategyProps, RenderStrategyProvider } from '../render-strategy.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { DialogProvider } from './dialog-context.mjs';
 import { useDialog } from './use-dialog.mjs';
 
 const DialogRoot = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
+  const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
   const api = useDialog(localProps);
   const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(DialogProvider, { value: api, children: /* @__PURE__ */ jsx(PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) }) });
+  return /* @__PURE__ */ jsx(DialogProvider, { value: api, children: /* @__PURE__ */ jsx(RenderStrategyProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) }) });
 };
 
 export { DialogRoot };

package/factory.cjs

@@ -2,22 +2,26 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const react$1 = require('@zag-js/react');
+const core = require('@zag-js/core');
 const react = require('react');
 const composeRefs = require('./compose-refs.cjs');
 
 const withAsChild = (Component) => {
-  const Comp = react.forwardRef((props, ref) => {
-    const { asChild, children, ...restProps } = props;
-    if (!asChild) {
-      return react.createElement(Component, { ...restProps, ref }, children);
-    }
-    const onlyChild = react.Children.only(children);
-    return react.isValidElement(onlyChild) ? react.cloneElement(onlyChild, {
-      ...react$1.mergeProps(restProps, onlyChild.props),
-      ref: ref ? composeRefs.composeRefs(ref, onlyChild.ref) : onlyChild.ref
-    }) : null;
-  });
+  const Comp = react.memo(
+    react.forwardRef((props, ref) => {
+      const { asChild, children, ...restProps } = props;
+      if (!asChild) {
+        return react.createElement(Component, { ...restProps, ref }, children);
+      }
+      const onlyChild = react.Children.only(children);
+      return react.isValidElement(onlyChild) ? react.cloneElement(onlyChild, {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ...core.mergeProps(restProps, onlyChild.props),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref: ref ? composeRefs.composeRefs(ref, onlyChild.ref) : onlyChild.ref
+      }) : null;
+    })
+  );
   Comp.displayName = Component.displayName || Component.name;
   return Comp;
 };

package/factory.mjs

@@ -1,19 +1,23 @@
-import { mergeProps } from '@zag-js/react';
-import { forwardRef, createElement, Children, isValidElement, cloneElement } from 'react';
+import { mergeProps } from '@zag-js/core';
+import { memo, forwardRef, createElement, Children, isValidElement, cloneElement } from 'react';
 import { composeRefs } from './compose-refs.mjs';
 
 const withAsChild = (Component) => {
-  const Comp = forwardRef((props, ref) => {
-    const { asChild, children, ...restProps } = props;
-    if (!asChild) {
-      return createElement(Component, { ...restProps, ref }, children);
-    }
-    const onlyChild = Children.only(children);
-    return isValidElement(onlyChild) ? cloneElement(onlyChild, {
-      ...mergeProps(restProps, onlyChild.props),
-      ref: ref ? composeRefs(ref, onlyChild.ref) : onlyChild.ref
-    }) : null;
-  });
+  const Comp = memo(
+    forwardRef((props, ref) => {
+      const { asChild, children, ...restProps } = props;
+      if (!asChild) {
+        return createElement(Component, { ...restProps, ref }, children);
+      }
+      const onlyChild = Children.only(children);
+      return isValidElement(onlyChild) ? cloneElement(onlyChild, {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ...mergeProps(restProps, onlyChild.props),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref: ref ? composeRefs(ref, onlyChild.ref) : onlyChild.ref
+      }) : null;
+    })
+  );
   Comp.displayName = Component.displayName || Component.name;
   return Comp;
 };

package/index.cjs

@@ -41,6 +41,11 @@ const clipboardLabel = require('./clipboard/clipboard-label.cjs');
 const clipboardRoot = require('./clipboard/clipboard-root.cjs');
 const clipboardTrigger = require('./clipboard/clipboard-trigger.cjs');
 const clipboard = require('./clipboard/clipboard.cjs');
+const collapsibleContent = require('./collapsible/collapsible-content.cjs');
+const collapsibleContext = require('./collapsible/collapsible-context.cjs');
+const collapsibleRoot = require('./collapsible/collapsible-root.cjs');
+const collapsibleTrigger = require('./collapsible/collapsible-trigger.cjs');
+const collapsible = require('./collapsible/collapsible.cjs');
 const colorPickerArea = require('./color-picker/color-picker-area.cjs');
 const colorPickerAreaBackground = require('./color-picker/color-picker-area-background.cjs');
 const colorPickerAreaContext = require('./color-picker/color-picker-area-context.cjs');
@@ -212,7 +217,6 @@ const popover = require('./popover/popover.cjs');
 const portal = require('./portal.cjs');
 const presence = require('./presence/presence.cjs');
 const presenceContext = require('./presence/presence-context.cjs');
-const presencePropsContext = require('./presence/presence-props-context.cjs');
 const splitPresenceProps = require('./presence/split-presence-props.cjs');
 const usePresence = require('./presence/use-presence.cjs');
 const progressCircle = require('./progress/progress-circle.cjs');
@@ -384,6 +388,11 @@ exports.ClipboardLabel = clipboardLabel.ClipboardLabel;
 exports.ClipboardRoot = clipboardRoot.ClipboardRoot;
 exports.ClipboardTrigger = clipboardTrigger.ClipboardTrigger;
 exports.Clipboard = clipboard;
+exports.CollapsibleContent = collapsibleContent.CollapsibleContent;
+exports.useCollapsibleContext = collapsibleContext.useCollapsibleContext;
+exports.CollapsibleRoot = collapsibleRoot.CollapsibleRoot;
+exports.CollapsibleTrigger = collapsibleTrigger.CollapsibleTrigger;
+exports.Collapsible = collapsible;
 exports.ColorPickerArea = colorPickerArea.ColorPickerArea;
 exports.ColorPickerAreaBackground = colorPickerAreaBackground.ColorPickerAreaBackground;
 exports.useColorPickerAreaContext = colorPickerAreaContext.useColorPickerAreaContext;
@@ -557,8 +566,6 @@ exports.Portal = portal.Portal;
 exports.Presence = presence.Presence;
 exports.PresenceProvider = presenceContext.PresenceProvider;
 exports.usePresenceContext = presenceContext.usePresenceContext;
-exports.PresencePropsProvider = presencePropsContext.PresencePropsProvider;
-exports.usePresencePropsContext = presencePropsContext.usePresencePropsContext;
 exports.splitPresenceProps = splitPresenceProps.splitPresenceProps;
 exports.usePresence = usePresence.usePresence;
 exports.ProgressCircle = progressCircle.ProgressCircle;

package/index.d.ts

@@ -3,6 +3,7 @@ export * from './avatar';
 export * from './carousel';
 export * from './checkbox';
 export * from './clipboard';
+export * from './collapsible';
 export * from './color-picker';
 export * from './combobox';
 export * from './date-picker';

package/index.mjs

@@ -42,6 +42,12 @@ export { ClipboardRoot } from './clipboard/clipboard-root.mjs';
 export { ClipboardTrigger } from './clipboard/clipboard-trigger.mjs';
 import * as clipboard from './clipboard/clipboard.mjs';
 export { clipboard as Clipboard };
+export { CollapsibleContent } from './collapsible/collapsible-content.mjs';
+export { useCollapsibleContext } from './collapsible/collapsible-context.mjs';
+export { CollapsibleRoot } from './collapsible/collapsible-root.mjs';
+export { CollapsibleTrigger } from './collapsible/collapsible-trigger.mjs';
+import * as collapsible from './collapsible/collapsible.mjs';
+export { collapsible as Collapsible };
 export { ColorPickerArea } from './color-picker/color-picker-area.mjs';
 export { ColorPickerAreaBackground } from './color-picker/color-picker-area-background.mjs';
 export { useColorPickerAreaContext } from './color-picker/color-picker-area-context.mjs';
@@ -225,7 +231,6 @@ export { popover as Popover };
 export { Portal } from './portal.mjs';
 export { Presence } from './presence/presence.mjs';
 export { PresenceProvider, usePresenceContext } from './presence/presence-context.mjs';
-export { PresencePropsProvider, usePresencePropsContext } from './presence/presence-props-context.mjs';
 export { splitPresenceProps } from './presence/split-presence-props.mjs';
 export { usePresence } from './presence/use-presence.mjs';
 export { ProgressCircle } from './progress/progress-circle.mjs';

package/menu/menu-item-group.d.ts

@@ -1,8 +1,8 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import type { GroupProps } from '@zag-js/menu';
+import type { ItemGroupProps } from '@zag-js/menu';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-export interface MenuItemGroupProps extends Assign<HTMLArkProps<'div'>, GroupProps> {
+export interface MenuItemGroupProps extends Assign<HTMLArkProps<'div'>, ItemGroupProps> {
 }
 export declare const MenuItemGroup: ForwardRefExoticComponent<MenuItemGroupProps & RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -8,6 +8,7 @@
     "carousel",
     "checkbox",
     "clipboard",
+    "collapsible",
     "color picker",
     "combobox",
     "date picker",
@@ -64,65 +65,66 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "2.2.0",
-    "@zag-js/accordion": "0.36.2",
-    "@zag-js/avatar": "0.36.2",
-    "@zag-js/carousel": "0.36.2",
-    "@zag-js/checkbox": "0.36.2",
-    "@zag-js/clipboard": "0.36.2",
-    "@zag-js/collapsible": "0.36.2",
-    "@zag-js/color-picker": "0.36.2",
-    "@zag-js/color-utils": "0.36.2",
-    "@zag-js/combobox": "0.36.2",
-    "@zag-js/date-picker": "0.36.2",
-    "@zag-js/date-utils": "0.36.2",
-    "@zag-js/dialog": "0.36.2",
-    "@zag-js/editable": "0.36.2",
-    "@zag-js/file-upload": "0.36.2",
-    "@zag-js/hover-card": "0.36.2",
-    "@zag-js/i18n-utils": "0.36.2",
-    "@zag-js/menu": "0.36.2",
-    "@zag-js/number-input": "0.36.2",
-    "@zag-js/pagination": "0.36.2",
-    "@zag-js/pin-input": "0.36.2",
-    "@zag-js/popover": "0.36.2",
-    "@zag-js/presence": "0.36.2",
-    "@zag-js/progress": "0.36.2",
-    "@zag-js/radio-group": "0.36.2",
-    "@zag-js/rating-group": "0.36.2",
-    "@zag-js/react": "0.36.2",
-    "@zag-js/select": "0.36.2",
-    "@zag-js/slider": "0.36.2",
-    "@zag-js/splitter": "0.36.2",
-    "@zag-js/switch": "0.36.2",
-    "@zag-js/tabs": "0.36.2",
-    "@zag-js/tags-input": "0.36.2",
-    "@zag-js/toast": "0.36.2",
-    "@zag-js/toggle-group": "0.36.2",
-    "@zag-js/tooltip": "0.36.2",
-    "@zag-js/tree-view": "0.36.2",
-    "@zag-js/types": "0.36.2"
+    "@ark-ui/anatomy": "2.3.1",
+    "@zag-js/accordion": "0.38.0",
+    "@zag-js/avatar": "0.38.0",
+    "@zag-js/carousel": "0.38.0",
+    "@zag-js/checkbox": "0.38.0",
+    "@zag-js/clipboard": "0.38.0",
+    "@zag-js/collapsible": "0.38.0",
+    "@zag-js/color-picker": "0.38.0",
+    "@zag-js/color-utils": "0.38.0",
+    "@zag-js/combobox": "0.38.0",
+    "@zag-js/core": "0.38.0",
+    "@zag-js/date-picker": "0.38.0",
+    "@zag-js/date-utils": "0.38.0",
+    "@zag-js/dialog": "0.38.0",
+    "@zag-js/editable": "0.38.0",
+    "@zag-js/file-upload": "0.38.0",
+    "@zag-js/hover-card": "0.38.0",
+    "@zag-js/i18n-utils": "0.38.0",
+    "@zag-js/menu": "0.38.0",
+    "@zag-js/number-input": "0.38.0",
+    "@zag-js/pagination": "0.38.0",
+    "@zag-js/pin-input": "0.38.0",
+    "@zag-js/popover": "0.38.0",
+    "@zag-js/presence": "0.38.0",
+    "@zag-js/progress": "0.38.0",
+    "@zag-js/radio-group": "0.38.0",
+    "@zag-js/rating-group": "0.38.0",
+    "@zag-js/react": "0.38.0",
+    "@zag-js/select": "0.38.0",
+    "@zag-js/slider": "0.38.0",
+    "@zag-js/splitter": "0.38.0",
+    "@zag-js/switch": "0.38.0",
+    "@zag-js/tabs": "0.38.0",
+    "@zag-js/tags-input": "0.38.0",
+    "@zag-js/toast": "0.38.0",
+    "@zag-js/toggle-group": "0.38.0",
+    "@zag-js/tooltip": "0.38.0",
+    "@zag-js/tree-view": "0.38.0",
+    "@zag-js/types": "0.38.0"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "5.0.0",
-    "@storybook/addon-a11y": "7.6.14",
-    "@storybook/addon-essentials": "7.6.14",
-    "@storybook/addons": "7.6.14",
-    "@storybook/react": "7.6.14",
-    "@storybook/react-vite": "7.6.14",
+    "@storybook/addon-a11y": "7.6.17",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/addons": "7.6.17",
+    "@storybook/react": "7.6.17",
+    "@storybook/react-vite": "7.6.17",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.6",
-    "@types/react": "18.2.55",
+    "@types/react": "18.2.58",
     "@types/react-dom": "18.2.19",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.21.0",
-    "@typescript-eslint/parser": "6.21.0",
+    "@typescript-eslint/eslint-plugin": "7.0.2",
+    "@typescript-eslint/parser": "7.0.2",
     "@vitejs/plugin-react": "4.2.1",
-    "@vitest/coverage-v8": "1.2.2",
-    "eslint": "8.56.0",
+    "@vitest/coverage-v8": "1.3.1",
+    "eslint": "8.57.0",
     "eslint-plugin-jest-dom": "5.1.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
@@ -133,13 +135,13 @@
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
     "react-hook-form": "7.50.1",
-    "release-it": "17.0.3",
+    "release-it": "17.1.1",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.6.14",
+    "storybook": "7.6.17",
     "typescript": "5.3.3",
-    "vite": "5.1.1",
-    "vite-plugin-dts": "3.7.2",
-    "vitest": "1.2.2"
+    "vite": "5.1.4",
+    "vite-plugin-dts": "3.7.3",
+    "vitest": "1.3.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -182,6 +184,11 @@
       "import": "./clipboard/index.mjs",
       "require": "./clipboard/index.cjs"
     },
+    "./collapsible": {
+      "types": "./collapsible/index.d.ts",
+      "import": "./collapsible/index.mjs",
+      "require": "./collapsible/index.cjs"
+    },
     "./color-picker": {
       "types": "./color-picker/index.d.ts",
       "import": "./color-picker/index.mjs",

package/presence/index.cjs

@@ -4,7 +4,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const presence = require('./presence.cjs');
 const presenceContext = require('./presence-context.cjs');
-const presencePropsContext = require('./presence-props-context.cjs');
 const splitPresenceProps = require('./split-presence-props.cjs');
 const usePresence = require('./use-presence.cjs');
 
@@ -13,7 +12,5 @@ const usePresence = require('./use-presence.cjs');
 exports.Presence = presence.Presence;
 exports.PresenceProvider = presenceContext.PresenceProvider;
 exports.usePresenceContext = presenceContext.usePresenceContext;
-exports.PresencePropsProvider = presencePropsContext.PresencePropsProvider;
-exports.usePresencePropsContext = presencePropsContext.usePresencePropsContext;
 exports.splitPresenceProps = splitPresenceProps.splitPresenceProps;
 exports.usePresence = usePresence.usePresence;

package/presence/index.d.ts

@@ -1,7 +1,6 @@
 import { Presence, type PresenceProps } from './presence';
 import { PresenceProvider, usePresenceContext, type PresenceContext } from './presence-context';
-import { PresencePropsProvider, usePresencePropsContext, type PresencePropsContext } from './presence-props-context';
 import { splitPresenceProps } from './split-presence-props';
 import { usePresence, type UsePresenceProps, type UsePresenceReturn } from './use-presence';
-export { Presence, PresencePropsProvider, PresenceProvider, splitPresenceProps, usePresence, usePresenceContext, usePresencePropsContext, };
-export type { PresenceContext, PresenceProps, PresencePropsContext, UsePresenceProps, UsePresenceReturn, };
+export { Presence, PresenceProvider, splitPresenceProps, usePresence, usePresenceContext };
+export type { PresenceContext, PresenceProps, UsePresenceProps, UsePresenceReturn };

package/presence/index.mjs

@@ -1,5 +1,4 @@
 export { Presence } from './presence.mjs';
 export { PresenceProvider, usePresenceContext } from './presence-context.mjs';
-export { PresencePropsProvider, usePresencePropsContext } from './presence-props-context.mjs';
 export { splitPresenceProps } from './split-presence-props.mjs';
 export { usePresence } from './use-presence.mjs';

package/presence/split-presence-props.cjs

@@ -5,13 +5,11 @@ 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"
-  ]);
-}
+const splitPresenceProps = (props) => createSplitProps.createSplitProps()(props, [
+  "lazyMount",
+  "onExitComplete",
+  "present",
+  "unmountOnExit"
+]);
 
 exports.splitPresenceProps = splitPresenceProps;