@ark-ui/solid 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -8,6 +8,7 @@
     "carousel",
     "checkbox",
     "clipboard",
+    "collapsible",
     "color picker",
     "combobox",
     "date picker",
@@ -84,78 +85,78 @@
     "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/combobox": "0.36.2",
-    "@zag-js/date-picker": "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/select": "0.36.2",
-    "@zag-js/slider": "0.36.2",
-    "@zag-js/solid": "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/combobox": "0.38.0",
+    "@zag-js/date-picker": "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/select": "0.38.0",
+    "@zag-js/slider": "0.38.0",
+    "@zag-js/solid": "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",
     "@solidjs/testing-library": "0.8.6",
-    "@storybook/addon-essentials": "7.6.14",
-    "@storybook/addon-interactions": "7.6.14",
-    "@storybook/addon-links": "7.6.14",
-    "@storybook/blocks": "7.6.14",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/addon-interactions": "7.6.17",
+    "@storybook/addon-links": "7.6.17",
+    "@storybook/blocks": "7.6.17",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.6",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.21.0",
-    "@typescript-eslint/parser": "6.21.0",
-    "@vitest/coverage-v8": "1.2.2",
-    "eslint": "8.56.0",
+    "@typescript-eslint/eslint-plugin": "7.0.2",
+    "@typescript-eslint/parser": "7.0.2",
+    "@vitest/coverage-v8": "1.3.1",
+    "eslint": "8.57.0",
     "eslint-plugin-jest-dom": "5.1.0",
     "eslint-plugin-testing-library": "6.2.0",
     "globby": "14.0.1",
     "jsdom": "24.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "release-it": "17.0.3",
+    "release-it": "17.1.1",
     "resize-observer-polyfill": "1.5.1",
-    "rollup": "4.10.0",
+    "rollup": "4.12.0",
     "rollup-preset-solid": "2.0.1",
-    "solid-js": "1.8.14",
-    "storybook": "7.6.14",
+    "solid-js": "1.8.15",
+    "storybook": "7.6.17",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
     "typescript": "5.3.3",
-    "vite": "5.1.1",
-    "vite-plugin-solid": "2.9.1",
-    "vitest": "1.2.2"
+    "vite": "5.1.4",
+    "vite-plugin-solid": "2.10.1",
+    "vitest": "1.3.1"
   },
   "peerDependencies": {
     "solid-js": ">=1.6.0"

package/source/accordion/accordion-item.jsx

@@ -1,15 +1,16 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
-import { PresenceProvider, usePresence, usePresencePropsContext } from '../presence';
+import { PresenceProvider, usePresence } from '../presence';
+import { useRenderStrategyContext } from '../render-strategy';
 import { runIfFn } from '../run-if-fn';
 import { useAccordionContext } from './accordion-context';
 import { AccordionItemProvider } from './accordion-item-context';
 export const AccordionItem = (props) => {
     const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled']);
     const api = useAccordionContext();
-    const presenceProps = usePresencePropsContext();
-    const presenceApi = usePresence(mergeProps(presenceProps, () => ({ present: api().getItemState(itemProps).isOpen })));
+    const renderStrategyProps = useRenderStrategyContext();
+    const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({ present: api().getItemState(itemProps).isOpen })));
     const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
     const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
     return (<AccordionItemProvider value={itemProps}>

package/source/accordion/accordion-root.jsx

@@ -1,11 +1,11 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
-import { PresencePropsProvider, splitPresenceProps } from '../presence';
+import { RenderStrategyProvider, splitRenderStrategyProps } from '../render-strategy';
 import { AccordionProvider } from './accordion-context';
 import { useAccordion } from './use-accordion';
 export const AccordionRoot = (props) => {
-    const [presenceProps, accordionProps] = splitPresenceProps(props);
+    const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
     const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [
         'collapsible',
         'dir',
@@ -22,8 +22,8 @@ export const AccordionRoot = (props) => {
     const api = useAccordion(useAccordionProps);
     const mergedProps = mergeProps(() => api().rootProps, localProps);
     return (<AccordionProvider value={api}>
-      <PresencePropsProvider value={presenceProps}>
+      <RenderStrategyProvider value={renderStrategyProps}>
         <ark.div {...mergedProps}/>
-      </PresencePropsProvider>
+      </RenderStrategyProvider>
     </AccordionProvider>);
 };

package/source/collapsible/collapsible-content.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { useCollapsibleContext } from './collapsible-context';
+export const CollapsibleContent = (props) => {
+    const api = useCollapsibleContext();
+    const mergedProps = mergeProps(() => api().contentProps, props);
+    return (<Show when={!api().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/source/collapsible/collapsible-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [CollapsibleProvider, useCollapsibleContext] = createContext({
+    hookName: 'useCollapsibleContext',
+    providerName: '<CollapsibleProvider />',
+});

package/source/collapsible/collapsible-root.jsx

@@ -0,0 +1,24 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { CollapsibleProvider } from './collapsible-context';
+import { useCollapsible } from './use-collapsible';
+export const CollapsibleRoot = (props) => {
+    const [params, localProps] = createSplitProps()(props, [
+        'dir',
+        'disabled',
+        'getRootNode',
+        'id',
+        'ids',
+        'lazyMount',
+        'onExitComplete',
+        'onOpenChange',
+        'open',
+        'unmountOnExit',
+    ]);
+    const api = useCollapsible(params);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<CollapsibleProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </CollapsibleProvider>);
+};

package/source/collapsible/collapsible-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useCollapsibleContext } from './collapsible-context';
+export const CollapsibleTrigger = (props) => {
+    const api = useCollapsibleContext();
+    const mergedProps = () => mergeProps(api().triggerProps, props);
+    return <ark.button {...mergedProps}>{props.children}</ark.button>;
+};

package/source/collapsible/collapsible.jsx

@@ -0,0 +1,4 @@
+import { CollapsibleContent as Content } from './collapsible-content';
+import { CollapsibleRoot as Root } from './collapsible-root';
+import { CollapsibleTrigger as Trigger } from './collapsible-trigger';
+export { Content, Root, Trigger };

package/source/collapsible/index.js

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

package/source/collapsible/use-collapsible.js

@@ -0,0 +1,23 @@
+import * as collapsible from '@zag-js/collapsible';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createEffect, createMemo, createSignal, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+import { splitRenderStrategyProps } from '../render-strategy';
+export const useCollapsible = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, collapsibleProps);
+    const [state, send] = useMachine(collapsible.machine(context), { context });
+    const [wasVisible, setWasVisible] = createSignal(false);
+    createEffect(() => {
+        const isPresent = api().isVisible;
+        if (isPresent)
+            setWasVisible(true);
+    });
+    const api = createMemo(() => collapsible.connect(state, send, normalizeProps));
+    return createMemo(() => ({
+        ...api(),
+        isUnmounted: (!api().isVisible && !wasVisible() && renderStrategyProps.lazyMount) ||
+            (renderStrategyProps.unmountOnExit && !api().isVisible && wasVisible()),
+    }));
+};

package/source/color-picker/use-color-picker.js

@@ -9,7 +9,6 @@ export const useColorPicker = (props) => {
         id: createUniqueId(),
         getRootNode,
         value: local.value ? colorPicker.parse(local.value) : undefined,
-        'open.controlled': props.open !== undefined,
     }), rest);
     const [state, send] = useMachine(colorPicker.machine(context), { context });
     return createMemo(() => colorPicker.connect(state, send, normalizeProps));

package/source/date-picker/use-date-picker.js

@@ -10,7 +10,6 @@ export const useDatePicker = (props) => {
         getRootNode,
         focusedValue: local.focusedValue ? datePicker.parse(local.focusedValue) : undefined,
         value: local.value ? datePicker.parse(local.value) : undefined,
-        'open.controlled': props.open !== undefined,
     }), rest);
     const [state, send] = useMachine(datePicker.machine(context), { context });
     return createMemo(() => datePicker.connect(state, send, normalizeProps));

package/source/dialog/dialog-backdrop.jsx

@@ -1,12 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
 import { Show } from 'solid-js';
 import { ark } from '../factory';
-import { usePresence, usePresencePropsContext } from '../presence';
+import { usePresence } from '../presence';
+import { useRenderStrategyContext } from '../render-strategy';
 import { useDialogContext } from './dialog-context';
 export const DialogBackdrop = (props) => {
     const api = useDialogContext();
-    const presenceProps = usePresencePropsContext();
-    const presenceApi = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    const renderStrategyProps = useRenderStrategyContext();
+    const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({ present: api().isOpen })));
     const mergedProps = mergeProps(() => api().backdropProps, () => presenceApi().presenceProps, props);
     return (<Show when={!presenceApi().isUnmounted}>
       <ark.div {...mergedProps}/>

package/source/dialog/dialog-root.jsx

@@ -1,11 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
-import { PresencePropsProvider, PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { RenderStrategyProvider, splitRenderStrategyProps } from '../render-strategy';
 import { runIfFn } from '../run-if-fn';
 import { DialogProvider } from './dialog-context';
 import { useDialog } from './use-dialog';
 export const DialogRoot = (props) => {
     const [presenceProps, dialogProps] = splitPresenceProps(props);
+    const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
     const [useDialogProps, localProps] = createSplitProps()(dialogProps, [
         'aria-label',
         'closeOnEscapeKeyDown',
@@ -32,8 +34,8 @@ export const DialogRoot = (props) => {
     const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
     const getChildren = () => runIfFn(localProps.children, api);
     return (<DialogProvider value={api}>
-      <PresencePropsProvider value={presenceProps}>
+      <RenderStrategyProvider value={renderStrategyProps}>
         <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
-      </PresencePropsProvider>
+      </RenderStrategyProvider>
     </DialogProvider>);
 };

package/source/dialog/use-dialog.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const useDialog = (props) => {
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode, 'open.controlled': props.open !== undefined }, props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
     const [state, send] = useMachine(dialog.machine(context), { context });
     return createMemo(() => dialog.connect(state, send, normalizeProps));
 };

package/source/hover-card/use-hover-card.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const useHoverCard = (props) => {
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode, 'open.controlled': props.open !== undefined }, props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
     const [state, send] = useMachine(hoverCard.machine(context), { context });
     return createMemo(() => hoverCard.connect(state, send, normalizeProps));
 };

package/source/index.jsx

@@ -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/source/menu/use-menu.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const useMenu = (props) => {
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode, 'open.controlled': props.open !== undefined }, props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
     const [state, send, machine] = useMachine(menu.machine(context), { context });
     return createMemo(() => ({
         api: () => menu.connect(state, send, normalizeProps),

package/source/popover/use-popover.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const usePopover = (props) => {
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode, 'open.controlled': props.open !== undefined }, props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
     const [state, send] = useMachine(popover.machine(context), { context });
     return createMemo(() => popover.connect(state, send, normalizeProps));
 };

package/source/presence/index.js

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

package/source/presence/split-presence-props.js

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

package/source/presence/use-presence.js

@@ -1,11 +1,12 @@
 import * as presence from '@zag-js/presence';
 import { normalizeProps, useMachine } from '@zag-js/solid';
-import { createEffect, createMemo, createSignal, splitProps } from 'solid-js';
+import { createEffect, createMemo, createSignal } from 'solid-js';
+import { splitRenderStrategyProps } from '../render-strategy';
 export const usePresence = (props) => {
-    const [localProps, machineProps] = splitProps(props, ['lazyMount', 'unmountOnExit']);
+    const [renderStrategyProps, context] = splitRenderStrategyProps(props);
     const [wasEverPresent, setWasEverPresent] = createSignal(false);
-    const [state, send] = useMachine(presence.machine(machineProps), {
-        context: machineProps,
+    const [state, send] = useMachine(presence.machine(context), {
+        context,
     });
     const api = createMemo(() => presence.connect(state, send, normalizeProps));
     createEffect(() => {
@@ -14,13 +15,13 @@ export const usePresence = (props) => {
             setWasEverPresent(true);
     });
     return createMemo(() => ({
-        isUnmounted: (!api().isPresent && !wasEverPresent() && localProps.lazyMount) ||
-            (localProps.unmountOnExit && !api().isPresent && wasEverPresent()),
+        isUnmounted: (!api().isPresent && !wasEverPresent() && renderStrategyProps.lazyMount) ||
+            (renderStrategyProps.unmountOnExit && !api().isPresent && wasEverPresent()),
         isPresent: api().isPresent,
         presenceProps: {
             ref: api().setNode,
             hidden: !api().isPresent,
-            'data-state': machineProps.present ? 'open' : 'closed',
+            'data-state': context.present ? 'open' : 'closed',
         },
     }));
 };

package/source/render-strategy.js

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

package/source/select/use-select.js

@@ -16,7 +16,6 @@ export const useSelect = (props) => {
         id: createUniqueId(),
         getRootNode,
         collection: collection(),
-        'open.controlled': props.open !== undefined,
     }, rest);
     const [state, send] = useMachine(select.machine(context()), {
         context,

package/source/splitter/splitter-root.jsx

@@ -12,7 +12,6 @@ export const SplitterRoot = (props) => {
         'ids',
         'onSizeChange',
         'onSizeChangeEnd',
-        'onSizeChangeStart',
         'orientation',
         'size',
     ]);

package/source/tabs/tab-content.jsx

@@ -2,13 +2,14 @@ import { mergeProps } from '@zag-js/solid';
 import { Show } from 'solid-js';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
-import { PresenceProvider, usePresence, usePresencePropsContext } from '../presence';
+import { PresenceProvider, usePresence } from '../presence';
+import { useRenderStrategyContext } from '../render-strategy';
 import { useTabsContext } from './tabs-context';
 export const TabContent = (props) => {
     const [contentProps, localProps] = createSplitProps()(props, ['value']);
     const api = useTabsContext();
-    const presenceProps = usePresencePropsContext();
-    const presenceApi = usePresence(mergeProps(presenceProps, () => ({ present: api().value === contentProps.value })));
+    const renderStrategyProps = useRenderStrategyContext();
+    const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({ present: api().value === contentProps.value })));
     const mergedProps = mergeProps(() => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps);
     return (<PresenceProvider value={presenceApi}>
       <Show when={!presenceApi().isUnmounted}>

package/source/tabs/tabs-root.jsx

@@ -1,11 +1,11 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
-import { PresencePropsProvider, splitPresenceProps } from '../presence';
+import { RenderStrategyProvider, splitRenderStrategyProps, } from '../render-strategy';
 import { TabsProvider } from './tabs-context';
 import { useTabs } from './use-tabs';
 export const TabsRoot = (props) => {
-    const [presenceProps, tabsProps] = splitPresenceProps(props);
+    const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
     const [tabsParams, restProps] = createSplitProps()(tabsProps, [
         'activationMode',
         'dir',
@@ -22,8 +22,8 @@ export const TabsRoot = (props) => {
     const api = useTabs(tabsParams);
     const mergedProps = mergeProps(() => api().rootProps, restProps);
     return (<TabsProvider value={api}>
-      <PresencePropsProvider value={presenceProps}>
+      <RenderStrategyProvider value={renderStrategyProps}>
         <ark.div {...mergedProps}/>
-      </PresencePropsProvider>
+      </RenderStrategyProvider>
     </TabsProvider>);
 };

package/source/tooltip/use-tooltip.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const useTooltip = (props) => {
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode, 'open.controlled': props.open !== undefined }, props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
     const [state, send] = useMachine(tooltip.machine(context), { context });
     return createMemo(() => tooltip.connect(state, send, normalizeProps));
 };

package/source/tree-view/tree-view-branch-indicator.jsx

@@ -1,4 +1,3 @@
-import { treeViewAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useTreeViewBranchContext } from './tree-view-branch-context';
@@ -6,8 +5,6 @@ import { useTreeViewContext } from './tree-view-context';
 export const TreeViewBranchIndicator = (props) => {
     const api = useTreeViewContext();
     const branchProps = useTreeViewBranchContext();
-    const mergedProps = mergeProps(() => api().getBranchProps(branchProps), 
-    // TODO use api.getBranchIndicatorProps() when available
-    treeViewAnatomy.build().branchIndicator.attrs, props);
+    const mergedProps = mergeProps(() => api().getBranchIndicatorProps(branchProps), props);
     return <ark.div {...mergedProps}/>;
 };

package/types/collapsible/collapsible-content.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface CollapsibleContentProps extends HTMLArkProps<'div'> {
+}
+export declare const CollapsibleContent: ArkComponent<'div'>;

package/types/collapsible/collapsible-context.d.ts

@@ -0,0 +1,4 @@
+import { type UseCollapsibleReturn } from './use-collapsible';
+export interface CollapsibleContext extends UseCollapsibleReturn {
+}
+export declare const CollapsibleProvider: import("solid-js").ContextProviderComponent<CollapsibleContext>, useCollapsibleContext: () => CollapsibleContext;

package/types/collapsible/collapsible-root.d.ts

@@ -0,0 +1,6 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseCollapsibleProps } from './use-collapsible';
+export interface CollapsibleRootProps extends Assign<HTMLArkProps<'div'>, UseCollapsibleProps> {
+}
+export declare const CollapsibleRoot: ArkComponent<'div', UseCollapsibleProps>;

package/types/collapsible/collapsible-trigger.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface CollapsibleTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const CollapsibleTrigger: ArkComponent<'button'>;

package/types/collapsible/collapsible.d.ts

@@ -0,0 +1,4 @@
+import { CollapsibleContent as Content } from './collapsible-content';
+import { CollapsibleRoot as Root } from './collapsible-root';
+import { CollapsibleTrigger as Trigger } from './collapsible-trigger';
+export { Content, Root, Trigger };

package/types/collapsible/index.d.ts

@@ -0,0 +1,8 @@
+import type { OpenChangeDetails as CollapsibleOpenChangeDetails } from '@zag-js/collapsible';
+import { CollapsibleContent, type CollapsibleContentProps } from './collapsible-content';
+import { useCollapsibleContext, type CollapsibleContext } from './collapsible-context';
+import { CollapsibleRoot, type CollapsibleRootProps } from './collapsible-root';
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from './collapsible-trigger';
+export * as Collapsible from './collapsible';
+export { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, useCollapsibleContext };
+export type { CollapsibleContentProps, CollapsibleContext, CollapsibleOpenChangeDetails, CollapsibleRootProps, CollapsibleTriggerProps, };

package/types/collapsible/use-collapsible.d.ts

@@ -0,0 +1,15 @@
+import * as collapsible from '@zag-js/collapsible';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
+import { type RenderStrategyProps } from '../render-strategy';
+import { type Optional } from '../types';
+export interface UseCollapsibleProps extends Optional<Omit<collapsible.Context, 'open.controlled'>, 'id'>, RenderStrategyProps {
+}
+export interface UseCollapsibleReturn extends Accessor<collapsible.Api<PropTypes> & {
+    /**
+     * Whether the content is unmounted
+     */
+    isUnmounted?: boolean;
+}> {
+}
+export declare const useCollapsible: (props: UseCollapsibleProps) => UseCollapsibleReturn;