ui-ingredients 0.0.66 → 0.0.68

package/dist/menu/menu-indicator.svelte

@@ -18,7 +18,7 @@
 
   let menu = getMenuContext();
 
-  let mergedProps = $derived(mergeProps(menu.getIndicatorProps(), props));
+  let mergedProps = $derived(mergeProps(menu!.getIndicatorProps(), props));
 </script>
 
 {#if asChild}

package/dist/menu/menu-item-group-label.svelte

@@ -25,7 +25,7 @@
 
   let mergedProps = $derived(
     mergeProps(
-      menu.getItemGroupLabelProps({
+      menu!.getItemGroupLabelProps({
         htmlFor: itemGroupProps.id,
       }),
       props,

package/dist/menu/menu-item-group.svelte

@@ -30,7 +30,7 @@
   });
 
   let mergedProps = $derived(
-    mergeProps(menu.getItemGroupProps(itemGroupProps), props),
+    mergeProps(menu!.getItemGroupProps(itemGroupProps), props),
   );
 
   setMenuItemGroupPropsContext(() => itemGroupProps);

package/dist/menu/menu-item.svelte

@@ -32,9 +32,9 @@
     ])(props),
   );
 
-  let itemState = $derived(menu.getItemState(itemProps));
+  let itemState = $derived(menu!.getItemState(itemProps));
   let mergedProps = $derived(
-    mergeProps(menu.getItemProps(itemProps), localProps),
+    mergeProps(menu!.getItemProps(itemProps), localProps),
   );
 </script>
 

package/dist/menu/menu-option-item-indicator.svelte

@@ -24,7 +24,7 @@
   let itemProps = getMenuOptionItemPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(menu.getItemIndicatorProps(itemProps), props),
+    mergeProps(menu!.getItemIndicatorProps(itemProps), props),
   );
 </script>
 

package/dist/menu/menu-option-item-text.svelte

@@ -24,7 +24,7 @@
   let itemProps = getMenuOptionItemPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(menu.getItemTextProps(itemProps), props),
+    mergeProps(menu!.getItemTextProps(itemProps), props),
   );
 </script>
 

package/dist/menu/menu-option-item.svelte

@@ -38,10 +38,10 @@
     ])(props),
   );
 
-  let itemState = $derived(menu.getOptionItemState(itemProps));
+  let itemState = $derived(menu!.getOptionItemState(itemProps));
 
   let mergedProps = $derived(
-    mergeProps(menu.getOptionItemProps(itemProps), localProps),
+    mergeProps(menu!.getOptionItemProps(itemProps), localProps),
   );
 
   setMenuOptionItemPropsContext(() => itemProps);

package/dist/menu/menu-positioner.svelte

@@ -21,7 +21,7 @@
   let presence = getPresenceContext();
 
   let mergedProps = $derived(
-    mergeProps(menu.getPositionerProps(), presence.getPresenceProps(), props),
+    mergeProps(menu!.getPositionerProps(), presence.getPresenceProps(), props),
   );
 </script>
 

package/dist/menu/menu-separator.svelte

@@ -18,7 +18,7 @@
 
   let menu = getMenuContext();
 
-  let mergedProps = $derived(mergeProps(menu.getSeparatorProps(), props));
+  let mergedProps = $derived(mergeProps(menu!.getSeparatorProps(), props));
 </script>
 
 {#if asChild}

package/dist/menu/menu-trigger.svelte

@@ -18,7 +18,7 @@
 
   let menu = getMenuContext();
 
-  let mergedProps = $derived(mergeProps(menu.getTriggerProps(), props));
+  let mergedProps = $derived(mergeProps(menu!.getTriggerProps(), props));
 </script>
 
 {#if asChild}

package/dist/merge-props.js

@@ -1,9 +1,9 @@
 import { mergeProps as fn } from '@zag-js/svelte';
-import { isObject } from './is-object.js';
+import { isPojo } from './is-pojo.js';
 export function mergeProps(...args) {
     const r = fn(...args);
     const i = 'style';
-    if (r[i] && isObject(r[i])) {
+    if (r[i] && isPojo(r[i])) {
         let s = '';
         for (const k in r[i]) {
             const v = r[i][k];

package/dist/number-input/number-input-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateNumberInputReturn } from './create-number-input.svelte.js';
-export declare const getNumberInputContext: () => CreateNumberInputReturn, setNumberInputContext: (context: CreateNumberInputReturn | (() => CreateNumberInputReturn)) => CreateNumberInputReturn;
+export declare const getNumberInputContext: () => CreateNumberInputReturn, setNumberInputContext: (context: CreateNumberInputReturn | (() => CreateNumberInputReturn)) => void;

package/dist/pagination/pagination-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreatePaginationReturn } from './create-pagination.svelte.js';
-export declare const getPaginationContext: () => CreatePaginationReturn, setPaginationContext: (context: CreatePaginationReturn | (() => CreatePaginationReturn)) => CreatePaginationReturn;
+export declare const getPaginationContext: () => CreatePaginationReturn, setPaginationContext: (context: CreatePaginationReturn | (() => CreatePaginationReturn)) => void;

package/dist/pin-input/pin-input-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreatePinInputReturn } from './create-pin-input.svelte.js';
-export declare const getPinInputContext: () => CreatePinInputReturn, setPinInputContext: (context: CreatePinInputReturn | (() => CreatePinInputReturn)) => CreatePinInputReturn;
+export declare const getPinInputContext: () => CreatePinInputReturn, setPinInputContext: (context: CreatePinInputReturn | (() => CreatePinInputReturn)) => void;

package/dist/popover/popover-content.svelte

@@ -28,9 +28,9 @@
 
 {#if presence.mounted}
   {#if asChild}
-    {@render asChild(presence.ref, mergedProps)}
+    {@render asChild(presence.setReference, mergedProps)}
   {:else}
-    <div bind:this={ref} use:presence.ref {...mergedProps}>
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/popover/popover-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreatePopoverReturn } from './create-popover.svelte.js';
-export declare const getPopoverContext: () => CreatePopoverReturn, setPopoverContext: (context: CreatePopoverReturn | (() => CreatePopoverReturn)) => CreatePopoverReturn;
+export declare const getPopoverContext: () => CreatePopoverReturn, setPopoverContext: (context: CreatePopoverReturn | (() => CreatePopoverReturn)) => void;

package/dist/presence/create-presence.svelte.d.ts

@@ -10,7 +10,7 @@ export interface CreatePresenceProps extends PresenceStrategyProps {
     present: boolean;
 }
 export interface CreatePresenceReturn {
-    ref: Action;
+    setReference: Action;
     getPresenceProps(): HTMLAttributes<HTMLElement>;
     mounted: boolean;
 }

package/dist/presence/create-presence.svelte.js

@@ -34,11 +34,11 @@ export function createPresence(props) {
             return true;
         return false;
     });
-    const ref = (node) => {
+    const setReference = (node) => {
         api.setNode(node);
     };
     return {
-        ref,
+        setReference,
         getPresenceProps,
         get mounted() {
             return !unmounted;

package/dist/presence/presence-context.svelte.d.ts

@@ -1,3 +1,3 @@
 import type { CreatePresenceReturn, PresenceStrategyProps } from './create-presence.svelte.js';
-export declare const getPresenceContext: () => CreatePresenceReturn, setPresenceContext: (context: CreatePresenceReturn | (() => CreatePresenceReturn)) => CreatePresenceReturn;
-export declare const getPresenceStrategyPropsContext: () => PresenceStrategyProps, setPresenceStrategyPropsContext: (context: PresenceStrategyProps | (() => PresenceStrategyProps)) => PresenceStrategyProps;
+export declare const getPresenceContext: () => CreatePresenceReturn, setPresenceContext: (context: CreatePresenceReturn | (() => CreatePresenceReturn)) => void;
+export declare const getPresenceStrategyPropsContext: () => PresenceStrategyProps, setPresenceStrategyPropsContext: (context: PresenceStrategyProps | (() => PresenceStrategyProps)) => void;

package/dist/presence/presence.svelte

@@ -35,9 +35,9 @@
 
 {#if presence.mounted}
   {#if asChild}
-    {@render asChild(presence.ref, mergedProps)}
+    {@render asChild(presence.setReference, mergedProps)}
   {:else}
-    <div use:presence.ref {...mergedProps}>
+    <div use:presence.setReference {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/progress/progress-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateProgressReturn } from './create-progress.svelte.js';
-export declare const getProgressContext: () => CreateProgressReturn, setProgressContext: (context: CreateProgressReturn | (() => CreateProgressReturn)) => CreateProgressReturn;
+export declare const getProgressContext: () => CreateProgressReturn, setProgressContext: (context: CreateProgressReturn | (() => CreateProgressReturn)) => void;

package/dist/qr-code/qr-code-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateQrCodeReturn } from './create-qr-code.svelte.js';
-export declare const getQrCodeContext: () => CreateQrCodeReturn, setQrCodeContext: (context: CreateQrCodeReturn | (() => CreateQrCodeReturn)) => CreateQrCodeReturn;
+export declare const getQrCodeContext: () => CreateQrCodeReturn, setQrCodeContext: (context: CreateQrCodeReturn | (() => CreateQrCodeReturn)) => void;

package/dist/radio-group/radio-group-context.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/radio-group';
 import type { CreateRadioGroupReturn } from './create-radio-group.svelte.js';
-export declare const getRadioGroupContext: () => CreateRadioGroupReturn, setRadioGroupContext: (context: CreateRadioGroupReturn | (() => CreateRadioGroupReturn)) => CreateRadioGroupReturn;
-export declare const getRadioGroupItemPropsContext: () => ItemProps, setRadioGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;
+export declare const getRadioGroupContext: () => CreateRadioGroupReturn, setRadioGroupContext: (context: CreateRadioGroupReturn | (() => CreateRadioGroupReturn)) => void;
+export declare const getRadioGroupItemPropsContext: () => ItemProps, setRadioGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;

package/dist/rating-group/rating-group-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateRatingGroupReturn } from './create-rating-group.svelte.js';
-export declare const getRatingGroupContext: () => CreateRatingGroupReturn, setRatingGroupContext: (context: CreateRatingGroupReturn | (() => CreateRatingGroupReturn)) => CreateRatingGroupReturn;
+export declare const getRatingGroupContext: () => CreateRatingGroupReturn, setRatingGroupContext: (context: CreateRatingGroupReturn | (() => CreateRatingGroupReturn)) => void;

package/dist/segment-group/segment-group-context.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/radio-group';
 import type { CreateSegmentGroupReturn } from './create-segment-group.svelte.js';
-export declare const getSegmentGroupContext: () => CreateSegmentGroupReturn, setSegmentGroupContext: (context: CreateSegmentGroupReturn | (() => CreateSegmentGroupReturn)) => CreateSegmentGroupReturn;
-export declare const getSegmentGroupItemPropsContext: () => ItemProps, setSegmentGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;
+export declare const getSegmentGroupContext: () => CreateSegmentGroupReturn, setSegmentGroupContext: (context: CreateSegmentGroupReturn | (() => CreateSegmentGroupReturn)) => void;
+export declare const getSegmentGroupItemPropsContext: () => ItemProps, setSegmentGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;

package/dist/select/select-content.svelte

@@ -28,9 +28,9 @@
 
 {#if presence.mounted}
   {#if asChild}
-    {@render asChild(presence.ref, mergedProps)}
+    {@render asChild(presence.setReference, mergedProps)}
   {:else}
-    <div bind:this={ref} use:presence.ref {...mergedProps}>
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/select/select-context.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { ItemGroupProps, ItemProps } from '@zag-js/select';
 import type { CreateSelectReturn } from './create-select.svelte.js';
-export declare const getSelectContext: () => CreateSelectReturn, setSelectContext: (context: CreateSelectReturn | (() => CreateSelectReturn)) => CreateSelectReturn;
-export declare const getSelectItemPropsContext: () => ItemProps<any>, setSelectItemPropsContext: (context: ItemProps<any> | (() => ItemProps<any>)) => ItemProps<any>;
-export declare const getSelectItemGroupPropsContext: () => ItemGroupProps, setSelectItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => ItemGroupProps;
+export declare const getSelectContext: () => CreateSelectReturn, setSelectContext: (context: CreateSelectReturn | (() => CreateSelectReturn)) => void;
+export declare const getSelectItemPropsContext: () => ItemProps<any>, setSelectItemPropsContext: (context: ItemProps<any> | (() => ItemProps<any>)) => void;
+export declare const getSelectItemGroupPropsContext: () => ItemGroupProps, setSelectItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => void;

package/dist/signature-pad/signature-pad-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateSignaturePadReturn } from './create-signature-pad.svelte.js';
-export declare const getSignaturePadContext: () => CreateSignaturePadReturn, setSignaturePadContext: (context: CreateSignaturePadReturn | (() => CreateSignaturePadReturn)) => CreateSignaturePadReturn;
+export declare const getSignaturePadContext: () => CreateSignaturePadReturn, setSignaturePadContext: (context: CreateSignaturePadReturn | (() => CreateSignaturePadReturn)) => void;

package/dist/slider/slider-context.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ThumbProps } from '@zag-js/slider';
 import type { CreateSliderReturn } from './create-slider.svelte.js';
-export declare const getSliderContext: () => CreateSliderReturn, setSliderContext: (context: CreateSliderReturn | (() => CreateSliderReturn)) => CreateSliderReturn;
-export declare const getSliderThumbPropsContext: () => ThumbProps, setSliderThumbPropsContext: (context: ThumbProps | (() => ThumbProps)) => ThumbProps;
+export declare const getSliderContext: () => CreateSliderReturn, setSliderContext: (context: CreateSliderReturn | (() => CreateSliderReturn)) => void;
+export declare const getSliderThumbPropsContext: () => ThumbProps, setSliderThumbPropsContext: (context: ThumbProps | (() => ThumbProps)) => void;

package/dist/splitter/splitter-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateSplitterReturn } from './create-splitter.svelte.js';
-export declare const getSplitterContext: () => CreateSplitterReturn, setSplitterContext: (context: CreateSplitterReturn | (() => CreateSplitterReturn)) => CreateSplitterReturn;
+export declare const getSplitterContext: () => CreateSplitterReturn, setSplitterContext: (context: CreateSplitterReturn | (() => CreateSplitterReturn)) => void;

package/dist/steps/steps-context.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/steps';
 import type { CreateStepsReturn } from './create-steps.svelte.js';
-export declare const getStepsContext: () => CreateStepsReturn, setStepsContext: (context: CreateStepsReturn | (() => CreateStepsReturn)) => CreateStepsReturn;
-export declare const getStepsItemPropsContext: () => ItemProps, setStepsItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;
+export declare const getStepsContext: () => CreateStepsReturn, setStepsContext: (context: CreateStepsReturn | (() => CreateStepsReturn)) => void;
+export declare const getStepsItemPropsContext: () => ItemProps, setStepsItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;

package/dist/switch/switch-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateSwitchReturn } from './create-switch.svelte.js';
-export declare const getSwitchContext: () => CreateSwitchReturn, setSwitchContext: (context: CreateSwitchReturn | (() => CreateSwitchReturn)) => CreateSwitchReturn;
+export declare const getSwitchContext: () => CreateSwitchReturn, setSwitchContext: (context: CreateSwitchReturn | (() => CreateSwitchReturn)) => void;

package/dist/tabs/tabs-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateTabsReturn } from './create-tabs.svelte.js';
-export declare const getTabsContext: () => CreateTabsReturn, setTabsContext: (context: CreateTabsReturn | (() => CreateTabsReturn)) => CreateTabsReturn;
+export declare const getTabsContext: () => CreateTabsReturn, setTabsContext: (context: CreateTabsReturn | (() => CreateTabsReturn)) => void;

package/dist/tags-input/tags-input-context.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/tags-input';
 import type { CreateTagsInputReturn } from './create-tags-input.svelte.js';
-export declare const getTagsInputContext: () => CreateTagsInputReturn, setTagsInputContext: (context: CreateTagsInputReturn | (() => CreateTagsInputReturn)) => CreateTagsInputReturn;
-export declare const getTagsInputItemPropsContext: () => ItemProps, setTagsInputItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;
+export declare const getTagsInputContext: () => CreateTagsInputReturn, setTagsInputContext: (context: CreateTagsInputReturn | (() => CreateTagsInputReturn)) => void;
+export declare const getTagsInputItemPropsContext: () => ItemProps, setTagsInputItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;

package/dist/time-picker/time-picker-content.svelte

@@ -31,9 +31,9 @@
 </script>
 
 {#if asChild}
-  {@render asChild(presence.ref, mergedProps)}
+  {@render asChild(presence.setReference, mergedProps)}
 {:else}
-  <div bind:this={ref} use:presence.ref {...mergedProps}>
+  <div bind:this={ref} use:presence.setReference {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/time-picker/time-picker-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateTimePickerReturn } from './create-time-picker.svelte.js';
-export declare const getTimePickerContext: () => CreateTimePickerReturn, setTimePickerContext: (context: CreateTimePickerReturn | (() => CreateTimePickerReturn)) => CreateTimePickerReturn;
+export declare const getTimePickerContext: () => CreateTimePickerReturn, setTimePickerContext: (context: CreateTimePickerReturn | (() => CreateTimePickerReturn)) => void;

package/dist/timer/timer-context.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/timer';
 import type { CreateTimerReturn } from './create-timer.svelte.js';
-export declare const getTimerContext: () => CreateTimerReturn, setTimerContext: (context: CreateTimerReturn | (() => CreateTimerReturn)) => CreateTimerReturn;
-export declare const getTimerItemPropsContext: () => ItemProps, setTimerItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;
+export declare const getTimerContext: () => CreateTimerReturn, setTimerContext: (context: CreateTimerReturn | (() => CreateTimerReturn)) => void;
+export declare const getTimerItemPropsContext: () => ItemProps, setTimerItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;

package/dist/toast/toast-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateToastReturn } from './create-toast.svelte.js';
-export declare const getToastContext: () => CreateToastReturn, setToastContext: (context: CreateToastReturn | (() => CreateToastReturn)) => CreateToastReturn;
+export declare const getToastContext: () => CreateToastReturn, setToastContext: (context: CreateToastReturn | (() => CreateToastReturn)) => void;

package/dist/toggle-group/toggle-group-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateToggleGroupReturn } from './create-toggle-group.svelte.js';
-export declare const getToggleGroupContext: () => CreateToggleGroupReturn, setToggleGroupContext: (context: CreateToggleGroupReturn | (() => CreateToggleGroupReturn)) => CreateToggleGroupReturn;
+export declare const getToggleGroupContext: () => CreateToggleGroupReturn, setToggleGroupContext: (context: CreateToggleGroupReturn | (() => CreateToggleGroupReturn)) => void;

package/dist/tooltip/tooltip-content.svelte

@@ -28,9 +28,9 @@
 
 {#if presence.mounted}
   {#if asChild}
-    {@render asChild(presence.ref, mergedProps)}
+    {@render asChild(presence.setReference, mergedProps)}
   {:else}
-    <div bind:this={ref} use:presence.ref {...mergedProps}>
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/tooltip/tooltip-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateTooltipReturn } from './create-tooltip.svelte.js';
-export declare const getTooltipContext: () => CreateTooltipReturn, setTooltipContext: (context: CreateTooltipReturn | (() => CreateTooltipReturn)) => CreateTooltipReturn;
+export declare const getTooltipContext: () => CreateTooltipReturn, setTooltipContext: (context: CreateTooltipReturn | (() => CreateTooltipReturn)) => void;

package/dist/tour/tour-content.svelte

@@ -29,7 +29,7 @@
   {#if asChild}
     {@render asChild(mergedProps)}
   {:else}
-    <div bind:this={ref} use:presence.ref {...mergedProps}>
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/tour/tour-context.svelte.d.ts

@@ -1,2 +1,2 @@
 import { type CreateTourReturn } from './create-tour.svelte.js';
-export declare const getTourContext: () => CreateTourReturn, setTourContext: (context: CreateTourReturn | (() => CreateTourReturn)) => CreateTourReturn;
+export declare const getTourContext: () => CreateTourReturn, setTourContext: (context: CreateTourReturn | (() => CreateTourReturn)) => void;

package/dist/tour/tour-overlay.svelte

@@ -37,7 +37,7 @@
   {#if asChild}
     {@render asChild(mergedProps)}
   {:else}
-    <div bind:this={ref} use:presence.ref {...mergedProps}>
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/tree-view/tree-view-branch-content.svelte

@@ -1,12 +1,16 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
   export interface TreeViewBranchContentProps
-    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
   import {
     getTreeViewBranchPropsContext,
     getTreeViewContext,
@@ -22,16 +26,31 @@
   let treeView = getTreeViewContext();
 
   let branchProps = getTreeViewBranchPropsContext();
+  let branchState = $derived(treeView.getBranchState(branchProps));
+
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      present: branchState.expanded,
+      ...presenceStrategyProps,
+    })),
+  );
 
   let mergedProps = $derived(
-    mergeProps(treeView.getBranchContentProps(branchProps), props),
+    mergeProps(
+      treeView.getBranchContentProps(branchProps),
+      presence.getPresenceProps(),
+      props,
+    ),
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.setReference, mergedProps)}
+  {:else}
+    <div bind:this={ref} {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/tree-view/tree-view-branch-content.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface TreeViewBranchContentProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+import type { Action } from 'svelte/action';
+export interface TreeViewBranchContentProps extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/tree-view/tree-view-context.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { BranchProps, ItemProps } from '@zag-js/tree-view';
 import type { CreateTreeViewReturn } from './create-tree-view.svelte.js';
-export declare const getTreeViewContext: () => CreateTreeViewReturn, setTreeViewContext: (context: CreateTreeViewReturn | (() => CreateTreeViewReturn)) => CreateTreeViewReturn;
-export declare const getTreeViewItemPropsContext: () => ItemProps, setTreeViewItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;
-export declare const getTreeViewBranchPropsContext: () => BranchProps, setTreeViewBranchPropsContext: (context: BranchProps | (() => BranchProps)) => BranchProps;
+export declare const getTreeViewContext: () => CreateTreeViewReturn, setTreeViewContext: (context: CreateTreeViewReturn | (() => CreateTreeViewReturn)) => void;
+export declare const getTreeViewItemPropsContext: () => ItemProps, setTreeViewItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getTreeViewBranchPropsContext: () => BranchProps, setTreeViewBranchPropsContext: (context: BranchProps | (() => BranchProps)) => void;

package/dist/tree-view/tree-view-root.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateTreeViewProps,
@@ -7,13 +8,15 @@
 
   export interface TreeViewProps
     extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>,
-      CreateTreeViewProps
-    > {}
+        HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>,
+        CreateTreeViewProps
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {createTreeView} from './create-tree-view.svelte.js';
@@ -26,6 +29,12 @@
     ...props
   }: TreeViewProps = $props();
 
+  let [presenceStrategyProps, rest] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
   let [createTreeViewProps, localProps] = $derived(
     createSplitProps<CreateTreeViewProps>([
       'id',
@@ -39,14 +48,14 @@
       'onFocusChange',
       'onExpandedChange',
       'onSelectionChange',
-    ])(props),
+    ])(rest),
   );
 
   let treeView = createTreeView(reflect(() => createTreeViewProps));
-
   let mergedProps = $derived(mergeProps(treeView.getRootProps(), localProps));
 
   setTreeViewContext(treeView);
+  setPresenceStrategyPropsContext(() => presenceStrategyProps);
 </script>
 
 {#if asChild}

package/dist/tree-view/tree-view-root.svelte.d.ts

@@ -1,6 +1,7 @@
+import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
 import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { CreateTreeViewProps, CreateTreeViewReturn } from './create-tree-view.svelte.js';
-export interface TreeViewProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>, CreateTreeViewProps> {
+export interface TreeViewProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>, CreateTreeViewProps>, PresenceStrategyProps {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/is-object.d.ts

@@ -1,2 +0,0 @@
-import type { GenericObject } from './types.js';
-export declare function isObject<T extends GenericObject>(value: unknown): value is T;