ui-ingredients 0.0.40 → 0.0.42

package/dist/menu/root.svelte

@@ -1,11 +1,14 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Snippet} from 'svelte';
   import {
     type CreateMenuProps,
     type CreateMenuReturn,
   } from './create-menu.svelte.js';
 
-  export interface MenuRootProps extends CreateMenuProps {
+  export interface MenuRootProps
+    extends CreateMenuProps,
+      PresenceStrategyProps {
     children?: Snippet<[CreateMenuReturn]>;
   }
 </script>
@@ -13,16 +16,49 @@
 <script lang="ts">
   import {setPresenceContext} from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
   import {setMenuContext} from './context.svelte.js';
   import {createMenu} from './create-menu.svelte.js';
 
   let {children, ...props}: MenuRootProps = $props();
 
-  let menu = createMenu(props);
+  let [menuProps, presenceStrategyProps] = $derived(
+    createSplitProps<CreateMenuProps>([
+      'anchorPoint',
+      'aria-label',
+      'closeOnSelect',
+      'composite',
+      'defaultOpen',
+      'highlightedValue',
+      'id',
+      'ids',
+      'loopFocus',
+      'onEscapeKeyDown',
+      'onFocusOutside',
+      'onHighlightChange',
+      'onInteractOutside',
+      'onOpenChange',
+      'onPointerDownOutside',
+      'onSelect',
+      'open',
+      'positioning',
+      'typeahead',
+    ])(props),
+  );
+
+  let menu = createMenu(reflect(() => menuProps));
+
   let presence = createPresence({
     get present() {
       return menu.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
   setMenuContext(menu);

package/dist/popover/content.svelte

@@ -1,7 +1,9 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
-  export interface PopoverContentProps extends HtmlIngredientProps<'div'> {}
+  export interface PopoverContentProps
+    extends HtmlIngredientProps<'div', never, Action> {}
 </script>
 
 <script lang="ts">
@@ -19,10 +21,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div use:presence.ref {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/popover/positioner.svelte

@@ -23,10 +23,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <div {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/popover/root.svelte

@@ -1,11 +1,14 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Snippet} from 'svelte';
   import type {
     CreatePopoverProps,
     CreatePopoverReturn,
   } from './create-popover.svelte.js';
 
-  export interface PopoverProps extends CreatePopoverProps {
+  export interface PopoverProps
+    extends CreatePopoverProps,
+      PresenceStrategyProps {
     children?: Snippet<[CreatePopoverReturn]>;
   }
 </script>
@@ -13,16 +16,46 @@
 <script lang="ts">
   import {setPresenceContext} from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
   import {setPopoverContext} from './context.svelte.js';
   import {createPopover} from './create-popover.svelte.js';
 
   let {children, ...props}: PopoverProps = $props();
 
-  let popover = createPopover(props);
+  let [popoverProps, presenceStrategyProps] = $derived(
+    createSplitProps<CreatePopoverProps>([
+      'autoFocus',
+      'closeOnEscape',
+      'closeOnInteractOutside',
+      'defaultOpen',
+      'id',
+      'ids',
+      'initialFocusEl',
+      'modal',
+      'onEscapeKeyDown',
+      'onFocusOutside',
+      'onInteractOutside',
+      'onOpenChange',
+      'onPointerDownOutside',
+      'open',
+      'persistentElements',
+      'portalled',
+      'positioning',
+    ])(props),
+  );
+
+  let popover = createPopover(reflect(() => popoverProps));
   let presence = createPresence({
     get present() {
       return popover.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
   setPopoverContext(popover);

package/dist/portal/root.svelte

@@ -5,6 +5,7 @@
     container?: HTMLElement;
     disabled?: boolean;
     children: Snippet;
+    [x: `data-${string}`]: string | number | boolean | null | undefined;
   }
 </script>
 
@@ -12,7 +13,7 @@
   import {getEnvironmentContext} from '../environment-provider/index.js';
   import {portal} from '@zag-js/svelte';
 
-  let {container, disabled, children}: PortalProps = $props();
+  let {container, disabled, children, ...props}: PortalProps = $props();
 
   let environment = getEnvironmentContext();
 </script>
@@ -23,6 +24,9 @@
     container,
     getRootNode: environment?.getRootNode,
   }}
+  data-scope="portal"
+  data-part="root"
+  {...props}
 >
   {@render children?.()}
 </div>

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

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

package/dist/presence/context.svelte.js

@@ -1,2 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getPresenceContext, setPresenceContext] = createContext('Presence');
+export const [getPresenceStrategyPropsContext, setPresenceStrategyPropsContext,] = createContext('PresenceStrategyProps');

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

@@ -1,10 +1,17 @@
 import type { HTMLAttributes } from 'svelte/elements';
-export interface CreatePresenceProps {
-    present?: boolean;
+export interface PresenceStrategyProps {
+    /** @default false */
+    lazyMount?: boolean;
+    /** @default true */
+    keepMounted?: boolean;
+}
+export interface CreatePresenceProps extends PresenceStrategyProps {
+    present: boolean;
 }
 export interface CreatePresenceReturn extends ReturnType<typeof createPresence> {
 }
 export declare function createPresence(props: CreatePresenceProps): {
     ref: (node: HTMLElement) => void;
     getPresenceProps: () => HTMLAttributes<HTMLElement>;
+    readonly mounted: boolean;
 };

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

@@ -1,10 +1,12 @@
 import * as presence from '@zag-js/presence';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
-import { tick } from 'svelte';
 export function createPresence(props) {
+    const present = $derived(props.present);
+    const lazyMount = $derived(props.lazyMount ?? false);
+    const keepMounted = $derived(props.keepMounted ?? true);
     const context = $derived({
         get present() {
-            return props.present;
+            return present;
         },
     });
     const [state, send] = useMachine(presence.machine(context), { context });
@@ -15,13 +17,31 @@ export function createPresence(props) {
             'data-state': context.present ? 'open' : 'closed',
         };
     }
+    let wasPresent = $state(false);
+    $effect(() => {
+        if (!api.present)
+            return;
+        if (wasPresent)
+            return;
+        wasPresent = true;
+    });
+    const unmounted = $derived.by(() => {
+        if (api.present)
+            return false;
+        if (!wasPresent && lazyMount)
+            return true;
+        if (wasPresent && !keepMounted)
+            return true;
+        return false;
+    });
     function ref(node) {
-        tick().then(() => {
-            api.setNode(node);
-        });
+        api.setNode(node);
     }
     return {
         ref,
         getPresenceProps,
+        get mounted() {
+            return !unmounted;
+        },
     };
 }

package/dist/presence/root.svelte

@@ -1,18 +1,22 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {CreatePresenceProps} from './create-presence.svelte.js';
 
   export interface PresenceProps
-    extends Assign<HtmlProps<'div'>, CreatePresenceProps> {}
+    extends Assign<
+      HtmlIngredientProps<'div', never, Action>,
+      CreatePresenceProps
+    > {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
+  import type {Action} from 'svelte/action';
   import {createPresence} from './create-presence.svelte.js';
 
-  let {children, ...props}: PresenceProps = $props();
+  let {asChild, children, ...props}: PresenceProps = $props();
 
   let [presenceProps, otherProps] = $derived(
     createSplitProps<CreatePresenceProps>(['present'])(props),
@@ -25,6 +29,12 @@
   );
 </script>
 
-<div use:presence.ref {...mergedProps}>
-  {@render children?.()}
-</div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

package/dist/select/content.svelte

@@ -1,7 +1,9 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
-  export interface SelectContentProps extends HtmlIngredientProps<'div'> {}
+  export interface SelectContentProps
+    extends HtmlIngredientProps<'div', never, Action> {}
 </script>
 
 <script lang="ts">
@@ -19,10 +21,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div use:presence.ref {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/select/positioner.svelte

@@ -19,10 +19,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <div {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/select/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 {
     CreateSelectProps,
@@ -7,9 +8,10 @@
 
   export interface SelectProps<T>
     extends Assign<
-      HtmlIngredientProps<'div', CreateSelectReturn>,
-      CreateSelectProps<T>
-    > {}
+        HtmlIngredientProps<'div', CreateSelectReturn>,
+        CreateSelectProps<T>
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts" generics="T">
@@ -57,13 +59,26 @@
   );
 
   let select = createSelect(reflect(() => selectProps));
+
+  let [presenceStrategyProps, elementProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      otherProps,
+    ),
+  );
+
   let presence = createPresence({
     get present() {
       return select.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
-  let mergedProps = $derived(mergeProps(otherProps, select.getRootProps()));
+  let mergedProps = $derived(mergeProps(elementProps, select.getRootProps()));
 
   setSelectContext(select);
   setPresenceContext(presence);

package/dist/time-picker/content.svelte

@@ -1,24 +1,34 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface TimePickerContentProps extends HtmlIngredientProps<'div'> {}
+  export interface TimePickerContentProps
+    extends HtmlIngredientProps<'div', never, Action> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/context.svelte.js';
+  import type {Action} from 'svelte/action';
   import {getTimePickerContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TimePickerContentProps = $props();
 
   let timePicker = getTimePickerContext();
+  let presence = getPresenceContext();
 
-  let mergedProps = $derived(mergeProps(props, timePicker.getContentProps()));
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      timePicker.getContentProps(),
+      presence.getPresenceProps(),
+    ),
+  );
 </script>
 
 {#if asChild}
-  {@render asChild(mergedProps)}
+  {@render asChild(presence.ref, mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div use:presence.ref {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/time-picker/positioner.svelte

@@ -7,14 +7,20 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/context.svelte.js';
   import {getTimePickerContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TimePickerPositionerProps = $props();
 
   let timePicker = getTimePickerContext();
+  let presence = getPresenceContext();
 
   let mergedProps = $derived(
-    mergeProps(props, timePicker.getPositionerProps()),
+    mergeProps(
+      props,
+      timePicker.getPositionerProps(),
+      presence.getPresenceProps(),
+    ),
   );
 </script>
 

package/dist/time-picker/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 {
     CreateTimePickerProps,
@@ -7,13 +8,16 @@
 
   export interface TimePickerProps
     extends Assign<
-      HtmlIngredientProps<'div', CreateTimePickerReturn>,
-      CreateTimePickerProps
-    > {}
+        HtmlIngredientProps<'div', CreateTimePickerReturn>,
+        CreateTimePickerProps
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {setPresenceContext} from '../presence/context.svelte.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {setTimePickerContext} from './context.svelte.js';
@@ -47,9 +51,30 @@
 
   let timePicker = createTimePicker(reflect(() => timePickerProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, timePicker.getRootProps()));
+  let [presenceStrategyProps, elementProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      otherProps,
+    ),
+  );
+
+  let presence = createPresence({
+    get present() {
+      return timePicker.open;
+    },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
+  });
+
+  let mergedProps = $derived(
+    mergeProps(elementProps, timePicker.getRootProps()),
+  );
 
   setTimePickerContext(timePicker);
+  setPresenceContext(presence);
 </script>
 
 {#if asChild}

package/dist/tooltip/content.svelte

@@ -1,7 +1,9 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
-  export interface TooltipContentProps extends HtmlIngredientProps<'div'> {}
+  export interface TooltipContentProps
+    extends HtmlIngredientProps<'div', never, Action> {}
 </script>
 
 <script lang="ts">
@@ -19,10 +21,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div use:presence.ref {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/tooltip/positioner.svelte

@@ -23,10 +23,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <div {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/tooltip/root.svelte

@@ -1,11 +1,14 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Snippet} from 'svelte';
   import type {
     CreateTooltipProps,
     CreateTooltipReturn,
   } from './create-tooltip.svelte.js';
 
-  export interface TooltipProps extends CreateTooltipProps {
+  export interface TooltipProps
+    extends CreateTooltipProps,
+      PresenceStrategyProps {
     children?: Snippet<[CreateTooltipReturn]>;
   }
 </script>
@@ -13,16 +16,31 @@
 <script lang="ts">
   import {setPresenceContext} from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
   import {setTooltipContext} from './context.svelte.js';
   import {createTooltip} from './create-tooltip.svelte.js';
 
   let {children, ...props}: TooltipProps = $props();
 
-  let tooltip = createTooltip(props);
+  let [presenceStrategyProps, tooltipProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let tooltip = createTooltip(reflect(() => tooltipProps));
+
   let presence = createPresence({
     get present() {
       return tooltip.open;
     },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
   });
 
   setTooltipContext(tooltip);

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { Action } from 'svelte/action';
 import type { SvelteHTMLElements } from 'svelte/elements';
 import type { TransitionConfig } from 'svelte/transition';
 export type GenericObject = Record<string, any>;
@@ -13,10 +14,14 @@ export interface TransitionProps {
     out?: TransitionFunction;
     transition?: TransitionFunction;
 }
-export type AsChild<Context = never> = [Context] extends [never] ? Snippet<[attrs: GenericObject]> : Snippet<[attrs: GenericObject, context: Context]>;
+export type AsChildWithRef<Ref extends Action, Context = never> = [
+    Context
+] extends [never] ? Snippet<[ref: Ref, attrs: GenericObject]> : Snippet<[ref: Ref, attrs: GenericObject, context: Context]>;
+export type AsChildWithoutRef<Context = never> = [Context] extends [never] ? Snippet<[attrs: GenericObject]> : Snippet<[attrs: GenericObject, context: Context]>;
+export type AsChild<Ref extends Action, Context = never> = [Ref] extends [never] ? AsChildWithoutRef<Context> : AsChildWithRef<Ref, Context>;
 export type Children<T = never> = [T] extends [never] ? Snippet : Snippet<[context: T]>;
 export type PropsWithoutChildren<T> = Omit<T, 'children'>;
-export type HtmlIngredientProps<T extends IntrinsicElements, Context = never> = TransitionProps & PropsWithoutChildren<HtmlProps<T>> & {
-    asChild?: AsChild<Context>;
+export type HtmlIngredientProps<Element extends IntrinsicElements, Context = never, Ref extends Action = never> = TransitionProps & PropsWithoutChildren<HtmlProps<Element>> & {
     children?: Children<Context>;
+    asChild?: AsChild<Ref, Context>;
 };