@ark-ui/react 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "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.0",
+    "@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",
@@ -152,176 +154,6 @@
     "./"
   ],
   "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./index.mjs",
-      "require": "./index.cjs"
-    },
-    "./accordion": {
-      "types": "./accordion/index.d.ts",
-      "import": "./accordion/index.mjs",
-      "require": "./accordion/index.cjs"
-    },
-    "./avatar": {
-      "types": "./avatar/index.d.ts",
-      "import": "./avatar/index.mjs",
-      "require": "./avatar/index.cjs"
-    },
-    "./carousel": {
-      "types": "./carousel/index.d.ts",
-      "import": "./carousel/index.mjs",
-      "require": "./carousel/index.cjs"
-    },
-    "./checkbox": {
-      "types": "./checkbox/index.d.ts",
-      "import": "./checkbox/index.mjs",
-      "require": "./checkbox/index.cjs"
-    },
-    "./color-picker": {
-      "types": "./color-picker/index.d.ts",
-      "import": "./color-picker/index.mjs",
-      "require": "./color-picker/index.cjs"
-    },
-    "./combobox": {
-      "types": "./combobox/index.d.ts",
-      "import": "./combobox/index.mjs",
-      "require": "./combobox/index.cjs"
-    },
-    "./date-picker": {
-      "types": "./date-picker/index.d.ts",
-      "import": "./date-picker/index.mjs",
-      "require": "./date-picker/index.cjs"
-    },
-    "./dialog": {
-      "types": "./dialog/index.d.ts",
-      "import": "./dialog/index.mjs",
-      "require": "./dialog/index.cjs"
-    },
-    "./editable": {
-      "types": "./editable/index.d.ts",
-      "import": "./editable/index.mjs",
-      "require": "./editable/index.cjs"
-    },
-    "./environment": {
-      "types": "./environment/index.d.ts",
-      "import": "./environment/index.mjs",
-      "require": "./environment/index.cjs"
-    },
-    "./file-upload": {
-      "types": "./file-upload/index.d.ts",
-      "import": "./file-upload/index.mjs",
-      "require": "./file-upload/index.cjs"
-    },
-    "./hover-card": {
-      "types": "./hover-card/index.d.ts",
-      "import": "./hover-card/index.mjs",
-      "require": "./hover-card/index.cjs"
-    },
-    "./locale": {
-      "types": "./locale/index.d.ts",
-      "import": "./locale/index.mjs",
-      "require": "./locale/index.cjs"
-    },
-    "./menu": {
-      "types": "./menu/index.d.ts",
-      "import": "./menu/index.mjs",
-      "require": "./menu/index.cjs"
-    },
-    "./number-input": {
-      "types": "./number-input/index.d.ts",
-      "import": "./number-input/index.mjs",
-      "require": "./number-input/index.cjs"
-    },
-    "./pagination": {
-      "types": "./pagination/index.d.ts",
-      "import": "./pagination/index.mjs",
-      "require": "./pagination/index.cjs"
-    },
-    "./pin-input": {
-      "types": "./pin-input/index.d.ts",
-      "import": "./pin-input/index.mjs",
-      "require": "./pin-input/index.cjs"
-    },
-    "./popover": {
-      "types": "./popover/index.d.ts",
-      "import": "./popover/index.mjs",
-      "require": "./popover/index.cjs"
-    },
-    "./presence": {
-      "types": "./presence/index.d.ts",
-      "import": "./presence/index.mjs",
-      "require": "./presence/index.cjs"
-    },
-    "./progress": {
-      "types": "./progress/index.d.ts",
-      "import": "./progress/index.mjs",
-      "require": "./progress/index.cjs"
-    },
-    "./radio-group": {
-      "types": "./radio-group/index.d.ts",
-      "import": "./radio-group/index.mjs",
-      "require": "./radio-group/index.cjs"
-    },
-    "./rating-group": {
-      "types": "./rating-group/index.d.ts",
-      "import": "./rating-group/index.mjs",
-      "require": "./rating-group/index.cjs"
-    },
-    "./segment-group": {
-      "types": "./segment-group/index.d.ts",
-      "import": "./segment-group/index.mjs",
-      "require": "./segment-group/index.cjs"
-    },
-    "./select": {
-      "types": "./select/index.d.ts",
-      "import": "./select/index.mjs",
-      "require": "./select/index.cjs"
-    },
-    "./slider": {
-      "types": "./slider/index.d.ts",
-      "import": "./slider/index.mjs",
-      "require": "./slider/index.cjs"
-    },
-    "./splitter": {
-      "types": "./splitter/index.d.ts",
-      "import": "./splitter/index.mjs",
-      "require": "./splitter/index.cjs"
-    },
-    "./switch": {
-      "types": "./switch/index.d.ts",
-      "import": "./switch/index.mjs",
-      "require": "./switch/index.cjs"
-    },
-    "./tabs": {
-      "types": "./tabs/index.d.ts",
-      "import": "./tabs/index.mjs",
-      "require": "./tabs/index.cjs"
-    },
-    "./tags-input": {
-      "types": "./tags-input/index.d.ts",
-      "import": "./tags-input/index.mjs",
-      "require": "./tags-input/index.cjs"
-    },
-    "./toast": {
-      "types": "./toast/index.d.ts",
-      "import": "./toast/index.mjs",
-      "require": "./toast/index.cjs"
-    },
-    "./toggle-group": {
-      "types": "./toggle-group/index.d.ts",
-      "import": "./toggle-group/index.mjs",
-      "require": "./toggle-group/index.cjs"
-    },
-    "./tooltip": {
-      "types": "./tooltip/index.d.ts",
-      "import": "./tooltip/index.mjs",
-      "require": "./tooltip/index.cjs"
-    },
-    "./tree-view": {
-      "types": "./tree-view/index.d.ts",
-      "import": "./tree-view/index.mjs",
-      "require": "./tree-view/index.cjs"
-    },
     "./factory": {
       "types": "./factory.d.ts",
       "import": "./factory.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;

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

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

package/presence/split-presence-props.mjs

@@ -1,13 +1,11 @@
 'use client';
 import { createSplitProps } from '../create-split-props.mjs';
 
-function splitPresenceProps(props) {
-  return createSplitProps()(props, [
-    "lazyMount",
-    "onExitComplete",
-    "present",
-    "unmountOnExit"
-  ]);
-}
+const splitPresenceProps = (props) => createSplitProps()(props, [
+  "lazyMount",
+  "onExitComplete",
+  "present",
+  "unmountOnExit"
+]);
 
 export { splitPresenceProps };

package/presence/use-presence.d.ts

@@ -1,17 +1,8 @@
 import * as presence from '@zag-js/presence';
 import { type ForwardedRef } from 'react';
+import type { RenderStrategyProps } from '../render-strategy';
 import type { Optional } from '../types';
-export interface UsePresenceProps extends Optional<presence.Context, 'present'> {
-    /**
-     * Whether to enable lazy mounting
-     * @default false
-     */
-    lazyMount?: boolean;
-    /**
-     * Whether to unmount on exit.
-     * @default false
-     */
-    unmountOnExit?: boolean;
+export interface UsePresenceProps extends Optional<presence.Context, 'present'>, RenderStrategyProps {
 }
 export type UsePresenceReturn = ReturnType<typeof usePresence>;
 export declare const usePresence: (props: UsePresenceProps) => {

package/render-strategy.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('./create-context.cjs');
+const createSplitProps = require('./create-split-props.cjs');
+
+const [RenderStrategyProvider, useRenderStrategyContext] = createContext.createContext({
+  name: "RenderStrategyContext",
+  hookName: "useRenderStrategyContext",
+  providerName: "<RenderStrategyProvider />"
+});
+const splitRenderStrategyProps = (props) => createSplitProps.createSplitProps()(props, ["lazyMount", "unmountOnExit"]);
+
+exports.RenderStrategyProvider = RenderStrategyProvider;
+exports.splitRenderStrategyProps = splitRenderStrategyProps;
+exports.useRenderStrategyContext = useRenderStrategyContext;

package/render-strategy.d.ts

@@ -0,0 +1,16 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+export interface RenderStrategyProps {
+    /**
+     * Whether to enable lazy mounting
+     * @default false
+     */
+    lazyMount?: boolean;
+    /**
+     * Whether to unmount on exit.
+     * @default false
+     */
+    unmountOnExit?: boolean;
+}
+export declare const RenderStrategyProvider: Provider<RenderStrategyProps>, useRenderStrategyContext: () => RenderStrategyProps;
+export declare const splitRenderStrategyProps: <T extends RenderStrategyProps>(props: T) => [RenderStrategyProps, Omit<T, "lazyMount" | "unmountOnExit">];

package/render-strategy.mjs

@@ -0,0 +1,12 @@
+'use client';
+import { createContext } from './create-context.mjs';
+import { createSplitProps } from './create-split-props.mjs';
+
+const [RenderStrategyProvider, useRenderStrategyContext] = createContext({
+  name: "RenderStrategyContext",
+  hookName: "useRenderStrategyContext",
+  providerName: "<RenderStrategyProvider />"
+});
+const splitRenderStrategyProps = (props) => createSplitProps()(props, ["lazyMount", "unmountOnExit"]);
+
+export { RenderStrategyProvider, splitRenderStrategyProps, useRenderStrategyContext };

package/splitter/splitter-root.cjs

@@ -23,7 +23,6 @@ const SplitterRoot = react.forwardRef((props, ref) => {
       "ids",
       "onSizeChange",
       "onSizeChangeEnd",
-      "onSizeChangeStart",
       "orientation",
       "size"
     ]

package/splitter/splitter-root.mjs

@@ -19,7 +19,6 @@ const SplitterRoot = forwardRef((props, ref) => {
       "ids",
       "onSizeChange",
       "onSizeChangeEnd",
-      "onSizeChangeStart",
       "orientation",
       "size"
     ]

package/splitter/use-splitter.cjs

@@ -39,8 +39,7 @@ const useSplitter = (props) => {
     ...initialContext,
     size: props.size,
     onSizeChange: useEvent.useEvent(props.onSizeChange, { sync: true }),
-    onSizeChangeEnd: useEvent.useEvent(props.onSizeChangeEnd),
-    onSizeChangeStart: useEvent.useEvent(props.onSizeChangeStart)
+    onSizeChangeEnd: useEvent.useEvent(props.onSizeChangeEnd)
   };
   const [state, send] = react$1.useMachine(splitter__namespace.machine(initialContext), { context });
   return splitter__namespace.connect(state, send, react$1.normalizeProps);

package/splitter/use-splitter.mjs

@@ -16,8 +16,7 @@ const useSplitter = (props) => {
     ...initialContext,
     size: props.size,
     onSizeChange: useEvent(props.onSizeChange, { sync: true }),
-    onSizeChangeEnd: useEvent(props.onSizeChangeEnd),
-    onSizeChangeStart: useEvent(props.onSizeChangeStart)
+    onSizeChangeEnd: useEvent(props.onSizeChangeEnd)
   };
   const [state, send] = useMachine(splitter.machine(initialContext), { context });
   return splitter.connect(state, send, normalizeProps);

package/tabs/tab-content.cjs

@@ -10,15 +10,15 @@ const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
-const presencePropsContext = require('../presence/presence-props-context.cjs');
 const usePresence = require('../presence/use-presence.cjs');
+const renderStrategy = require('../render-strategy.cjs');
 const tabsContext = require('./tabs-context.cjs');
 
 const TabContent = react.forwardRef((props, ref) => {
   const [contentProps, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
   const api = tabsContext.useTabsContext();
-  const presenceProps = presencePropsContext.usePresencePropsContext();
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.value === props.value });
+  const renderStrategyProps = renderStrategy.useRenderStrategyContext();
+  const presenceApi = usePresence.usePresence({ ...renderStrategyProps, present: api.value === props.value });
   const mergedProps = react$1.mergeProps(
     api.getContentProps(contentProps),
     presenceApi.getPresenceProps(ref),

package/tabs/tab-content.mjs

@@ -6,15 +6,15 @@ import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { PresenceProvider } from '../presence/presence-context.mjs';
-import { usePresencePropsContext } from '../presence/presence-props-context.mjs';
 import { usePresence } from '../presence/use-presence.mjs';
+import { useRenderStrategyContext } from '../render-strategy.mjs';
 import { useTabsContext } from './tabs-context.mjs';
 
 const TabContent = forwardRef((props, ref) => {
   const [contentProps, localProps] = createSplitProps()(props, ["value"]);
   const api = useTabsContext();
-  const presenceProps = usePresencePropsContext();
-  const presenceApi = usePresence({ ...presenceProps, present: api.value === props.value });
+  const renderStrategyProps = useRenderStrategyContext();
+  const presenceApi = usePresence({ ...renderStrategyProps, present: api.value === props.value });
   const mergedProps = mergeProps(
     api.getContentProps(contentProps),
     presenceApi.getPresenceProps(ref),

package/tabs/tabs-root.cjs

@@ -8,13 +8,12 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const presencePropsContext = require('../presence/presence-props-context.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const renderStrategy = require('../render-strategy.cjs');
 const tabsContext = require('./tabs-context.cjs');
 const useTabs = require('./use-tabs.cjs');
 
 const TabsRoot = react.forwardRef((props, ref) => {
-  const [presenceProps, tabsProps] = splitPresenceProps.splitPresenceProps(props);
+  const [renderStrategyProps, tabsProps] = renderStrategy.splitRenderStrategyProps(props);
   const [useTabsProps, localprops] = createSplitProps.createSplitProps()(tabsProps, [
     "activationMode",
     "defaultValue",
@@ -31,7 +30,7 @@ const TabsRoot = react.forwardRef((props, ref) => {
   ]);
   const api = useTabs.useTabs(useTabsProps);
   const mergedProps = react$1.mergeProps(api.rootProps, localprops);
-  return /* @__PURE__ */ jsxRuntime.jsx(tabsContext.TabsProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presencePropsContext.PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(tabsContext.TabsProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(renderStrategy.RenderStrategyProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });
 TabsRoot.displayName = "TabsRoot";
 

package/tabs/tabs-root.d.ts

@@ -1,9 +1,9 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import { type UsePresenceProps } from '../presence';
+import { type RenderStrategyProps } from '../render-strategy';
 import { type Assign } from '../types';
 import { type UseTabsProps } from './use-tabs';
-export interface TabsRootProps extends Assign<HTMLArkProps<'div'>, UseTabsProps>, UsePresenceProps {
+export interface TabsRootProps extends Assign<HTMLArkProps<'div'>, UseTabsProps>, RenderStrategyProps {
 }
 export declare const TabsRoot: ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>>;

package/tabs/tabs-root.mjs

@@ -4,13 +4,12 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { splitRenderStrategyProps, RenderStrategyProvider } from '../render-strategy.mjs';
 import { TabsProvider } from './tabs-context.mjs';
 import { useTabs } from './use-tabs.mjs';
 
 const TabsRoot = forwardRef((props, ref) => {
-  const [presenceProps, tabsProps] = splitPresenceProps(props);
+  const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
   const [useTabsProps, localprops] = createSplitProps()(tabsProps, [
     "activationMode",
     "defaultValue",
@@ -27,7 +26,7 @@ const TabsRoot = forwardRef((props, ref) => {
   ]);
   const api = useTabs(useTabsProps);
   const mergedProps = mergeProps(api.rootProps, localprops);
-  return /* @__PURE__ */ jsx(TabsProvider, { value: api, children: /* @__PURE__ */ jsx(PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+  return /* @__PURE__ */ jsx(TabsProvider, { value: api, children: /* @__PURE__ */ jsx(RenderStrategyProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 TabsRoot.displayName = "TabsRoot";
 

package/toast/create-toaster.d.ts

@@ -1,12 +1,13 @@
 import { type PropTypes } from '@zag-js/react';
 import * as toast from '@zag-js/toast';
 import { type JSX } from 'react';
+import { type HTMLArkProps } from '../factory';
 import type { Optional } from '../types';
 type GroupContext = Partial<toast.GroupMachineContext>;
 export interface CreateToasterProps extends Omit<Optional<GroupContext, 'id'>, 'render'> {
     placement: toast.Placement;
     render: (api: toast.Api<PropTypes>) => JSX.Element;
 }
-export type CreateToasterReturn = [React.ElementType, toast.GroupApi<PropTypes>];
+export type CreateToasterReturn = [React.FC<HTMLArkProps<'ol'>>, toast.GroupApi<PropTypes>];
 export declare const createToaster: (props: CreateToasterProps) => CreateToasterReturn;
 export {};