ui-ingredients 0.0.41 → 0.0.43

package/dist/switch/root.svelte

@@ -1,54 +1,54 @@
-<script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {
-    CreateSwitchProps,
-    CreateSwitchReturn,
-  } from './create-switch.svelte.js';
-
-  export interface SwitchProps
-    extends Assign<
-      HtmlIngredientProps<'label', CreateSwitchReturn>,
-      CreateSwitchProps
-    > {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
-  import {setSwitchContext} from './context.svelte.js';
-  import {createSwitch} from './create-switch.svelte.js';
-
-  let {asChild, children, ...props}: SwitchProps = $props();
-
-  let [switchProps, otherProps] = $derived(
-    createSplitProps<CreateSwitchProps>([
-      'id',
-      'ids',
-      'form',
-      'name',
-      'label',
-      'value',
-      'checked',
-      'invalid',
-      'disabled',
-      'readOnly',
-      'required',
-      'onCheckedChange',
-    ])(props),
-  );
-
-  let switch$ = createSwitch(reflect(() => switchProps));
-
-  let mergedProps = $derived(mergeProps(otherProps, switch$.getRootProps()));
-
-  setSwitchContext(switch$);
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps, switch$)}
-{:else}
-  <label {...mergedProps}>
-    {@render children?.(switch$)}
-  </label>
-{/if}
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {
+    CreateSwitchProps,
+    CreateSwitchReturn,
+  } from './create-switch.svelte.js';
+
+  export interface SwitchProps
+    extends Assign<
+      HtmlIngredientProps<'label', CreateSwitchReturn>,
+      CreateSwitchProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {setSwitchContext} from './context.svelte.js';
+  import {createSwitch} from './create-switch.svelte.js';
+
+  let {asChild, children, ...props}: SwitchProps = $props();
+
+  let [switchProps, otherProps] = $derived(
+    createSplitProps<CreateSwitchProps>([
+      'id',
+      'ids',
+      'form',
+      'name',
+      'label',
+      'value',
+      'checked',
+      'invalid',
+      'disabled',
+      'readOnly',
+      'required',
+      'onCheckedChange',
+    ])(props),
+  );
+
+  let switch$ = createSwitch(reflect(() => switchProps));
+
+  let mergedProps = $derived(mergeProps(otherProps, switch$.getRootProps()));
+
+  setSwitchContext(switch$);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, switch$)}
+{:else}
+  <label {...mergedProps}>
+    {@render children?.(switch$)}
+  </label>
+{/if}

package/dist/switch/thumb.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface SwitchThumbProps extends HtmlIngredientProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getSwitchContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: SwitchThumbProps = $props();
-
-  let switch$ = getSwitchContext();
-
-  let mergedProps = $derived(mergeProps(props, switch$.getThumbProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <div {...mergedProps}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SwitchThumbProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getSwitchContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: SwitchThumbProps = $props();
+
+  let switch$ = getSwitchContext();
+
+  let mergedProps = $derived(mergeProps(props, switch$.getThumbProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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/toast/actor.svelte

@@ -1,19 +1,19 @@
-<script lang="ts">
-  import * as toast$ from '@zag-js/toast';
-  import type {Snippet} from 'svelte';
-  import {setToastContext} from './context.svelte.js';
-  import {createToast, type CreateToastReturn} from './create-toast.svelte.js';
-
-  interface Props {
-    actor: toast$.Service;
-    children$: Snippet<[toast: CreateToastReturn]>;
-  }
-
-  let {actor, children$}: Props = $props();
-
-  let toast = createToast(actor);
-
-  setToastContext(toast);
-</script>
-
-{@render children$(toast)}
+<script lang="ts">
+  import * as toast$ from '@zag-js/toast';
+  import type {Snippet} from 'svelte';
+  import {setToastContext} from './context.svelte.js';
+  import {createToast, type CreateToastReturn} from './create-toast.svelte.js';
+
+  interface Props {
+    actor: toast$.Service;
+    children$: Snippet<[toast: CreateToastReturn]>;
+  }
+
+  let {actor, children$}: Props = $props();
+
+  let toast = createToast(actor);
+
+  setToastContext(toast);
+</script>
+
+{@render children$(toast)}

package/dist/toast/toaster.svelte

@@ -1,39 +1,39 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-  import type {CreateToastReturn} from './create-toast.svelte.js';
-  import type {CreateToasterReturn} from './create-toaster.svelte.js';
-
-  export interface ToasterProps
-    extends HtmlIngredientProps<'div', CreateToastReturn> {
-    toaster: CreateToasterReturn;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {Portal} from '../portal/index.js';
-  import {normalizeProps, useMachine} from '@zag-js/svelte';
-  import * as toast from '@zag-js/toast';
-  import ToastActor from './actor.svelte';
-
-  let {toaster, children, ...props}: ToasterProps = $props();
-
-  let [snapshot, send] = useMachine(toaster.machine);
-
-  let placement = $derived(snapshot.context.placement);
-  let api = $derived(toast.group.connect(snapshot, send, normalizeProps));
-  let toasts = $derived(api.getToastsByPlacement(placement));
-  let mergedProps = $derived(mergeProps(props, api.getGroupProps({placement})));
-</script>
-
-<Portal>
-  <div {...mergedProps}>
-    {#each toasts as toast (toast.id)}
-      <ToastActor actor={toast}>
-        {#snippet children$(ctx)}
-          {@render children?.(ctx)}
-        {/snippet}
-      </ToastActor>
-    {/each}
-  </div>
-</Portal>
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+  import type {CreateToastReturn} from './create-toast.svelte.js';
+  import type {CreateToasterReturn} from './create-toaster.svelte.js';
+
+  export interface ToasterProps
+    extends HtmlIngredientProps<'div', CreateToastReturn> {
+    toaster: CreateToasterReturn;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {Portal} from '../portal/index.js';
+  import {normalizeProps, useMachine} from '@zag-js/svelte';
+  import * as toast from '@zag-js/toast';
+  import ToastActor from './actor.svelte';
+
+  let {toaster, children, ...props}: ToasterProps = $props();
+
+  let [snapshot, send] = useMachine(toaster.machine);
+
+  let placement = $derived(snapshot.context.placement);
+  let api = $derived(toast.group.connect(snapshot, send, normalizeProps));
+  let toasts = $derived(api.getToastsByPlacement(placement));
+  let mergedProps = $derived(mergeProps(props, api.getGroupProps({placement})));
+</script>
+
+<Portal>
+  <div {...mergedProps}>
+    {#each toasts as toast (toast.id)}
+      <ToastActor actor={toast}>
+        {#snippet children$(ctx)}
+          {@render children?.(ctx)}
+        {/snippet}
+      </ToastActor>
+    {/each}
+  </div>
+</Portal>

package/dist/tooltip/content.svelte

@@ -21,10 +21,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(presence.ref, 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/tour/create-tour.svelte.d.ts

@@ -0,0 +1,7 @@
+import * as tour from '@zag-js/tour';
+export interface CreateTourProps extends Omit<tour.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
+}
+export interface CreateTourReturn extends tour.Api<any> {
+}
+export declare function createTour(props: CreateTourProps): CreateTourReturn;

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

@@ -0,0 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import * as tour from '@zag-js/tour';
+import { uid } from 'uid';
+export function createTour(props) {
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
+    const id = uid();
+    const context = $derived(reflect(() => ({
+        id: props.id ?? id,
+        dir: locale?.dir,
+        getRootNode: environment?.getRootNode,
+    })));
+    const [state, send] = useMachine(tour.machine(context), { context });
+    const api = $derived(reflect(() => tour.connect(state, send, normalizeProps)));
+    return api;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -85,50 +85,50 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@zag-js/accordion": "0.66.1",
-    "@zag-js/anatomy": "0.66.1",
-    "@zag-js/avatar": "0.66.1",
-    "@zag-js/carousel": "0.66.1",
-    "@zag-js/checkbox": "0.66.1",
-    "@zag-js/clipboard": "0.66.1",
-    "@zag-js/collapsible": "0.66.1",
-    "@zag-js/color-picker": "0.66.1",
-    "@zag-js/combobox": "0.66.1",
-    "@zag-js/date-picker": "0.66.1",
-    "@zag-js/dialog": "0.66.1",
-    "@zag-js/dom-query": "0.66.1",
-    "@zag-js/editable": "0.66.1",
-    "@zag-js/file-upload": "0.66.1",
-    "@zag-js/floating-panel": "0.66.1",
-    "@zag-js/hover-card": "0.66.1",
-    "@zag-js/i18n-utils": "0.66.1",
-    "@zag-js/menu": "0.66.1",
-    "@zag-js/number-input": "0.66.1",
-    "@zag-js/pagination": "0.66.1",
-    "@zag-js/pin-input": "0.66.1",
-    "@zag-js/popover": "0.66.1",
-    "@zag-js/presence": "0.66.1",
-    "@zag-js/progress": "0.66.1",
-    "@zag-js/qr-code": "0.66.1",
-    "@zag-js/radio-group": "0.66.1",
-    "@zag-js/rating-group": "0.66.1",
-    "@zag-js/select": "0.66.1",
-    "@zag-js/signature-pad": "0.66.1",
-    "@zag-js/slider": "0.66.1",
-    "@zag-js/splitter": "0.66.1",
-    "@zag-js/steps": "0.66.1",
-    "@zag-js/svelte": "0.66.1",
-    "@zag-js/switch": "0.66.1",
-    "@zag-js/tabs": "0.66.1",
-    "@zag-js/tags-input": "0.66.1",
-    "@zag-js/time-picker": "0.66.1",
-    "@zag-js/timer": "0.66.1",
-    "@zag-js/toast": "0.66.1",
-    "@zag-js/toggle-group": "0.66.1",
-    "@zag-js/tooltip": "0.66.1",
-    "@zag-js/tour": "0.66.1",
-    "@zag-js/tree-view": "0.66.1",
-    "@zag-js/utils": "0.66.1",
+    "@zag-js/accordion": "0.67.0",
+    "@zag-js/anatomy": "0.67.0",
+    "@zag-js/avatar": "0.67.0",
+    "@zag-js/carousel": "0.67.0",
+    "@zag-js/checkbox": "0.67.0",
+    "@zag-js/clipboard": "0.67.0",
+    "@zag-js/collapsible": "0.67.0",
+    "@zag-js/color-picker": "0.67.0",
+    "@zag-js/combobox": "0.67.0",
+    "@zag-js/date-picker": "0.67.0",
+    "@zag-js/dialog": "0.67.0",
+    "@zag-js/dom-query": "0.67.0",
+    "@zag-js/editable": "0.67.0",
+    "@zag-js/file-upload": "0.67.0",
+    "@zag-js/floating-panel": "0.67.0",
+    "@zag-js/hover-card": "0.67.0",
+    "@zag-js/i18n-utils": "0.67.0",
+    "@zag-js/menu": "0.67.0",
+    "@zag-js/number-input": "0.67.0",
+    "@zag-js/pagination": "0.67.0",
+    "@zag-js/pin-input": "0.67.0",
+    "@zag-js/popover": "0.67.0",
+    "@zag-js/presence": "0.67.0",
+    "@zag-js/progress": "0.67.0",
+    "@zag-js/qr-code": "0.67.0",
+    "@zag-js/radio-group": "0.67.0",
+    "@zag-js/rating-group": "0.67.0",
+    "@zag-js/select": "0.67.0",
+    "@zag-js/signature-pad": "0.67.0",
+    "@zag-js/slider": "0.67.0",
+    "@zag-js/splitter": "0.67.0",
+    "@zag-js/steps": "0.67.0",
+    "@zag-js/svelte": "0.67.0",
+    "@zag-js/switch": "0.67.0",
+    "@zag-js/tabs": "0.67.0",
+    "@zag-js/tags-input": "0.67.0",
+    "@zag-js/time-picker": "0.67.0",
+    "@zag-js/timer": "0.67.0",
+    "@zag-js/toast": "0.67.0",
+    "@zag-js/toggle-group": "0.67.0",
+    "@zag-js/tooltip": "0.67.0",
+    "@zag-js/tour": "0.67.0",
+    "@zag-js/tree-view": "0.67.0",
+    "@zag-js/utils": "0.67.0",
     "uid": "2.0.2"
   },
   "peerDependencies": {
@@ -150,7 +150,7 @@
     "tailwind-merge": "2.5.2",
     "tailwind-variants": "0.2.1",
     "tailwindcss": "3.4.10",
-    "typescript": "5.5.4",
+    "typescript": "5.6.2",
     "vite": "5.4.3",
     "vitest": "2.0.5",
     "vitest-axe": "0.1.0"