ui-ingredients 0.19.0 → 0.21.0

package/dist/angle-slider/create-angle-slider.svelte.js

@@ -13,6 +13,8 @@ export function createAngleSlider(props) {
         getRootNode: environment?.getRootNode,
         ...props,
     }));
+    // @ts-expect-error "Incompatible version of @zag-js/svelte"
     const [state, send] = useMachine(angleSlider.machine(context), { context });
+    // @ts-expect-error "Incompatible version of @zag-js/svelte"
     return reflect(() => angleSlider.connect(state, send, normalizeProps));
 }

package/dist/environment-provider/environment-provider.svelte

@@ -1,41 +1,41 @@
-<script lang="ts" module>
-  import type {Snippet} from 'svelte';
-
-  export interface EnvironmentProviderProps {
-    rootNode?:
-      | ShadowRoot
-      | Document
-      | Node
-      | (() => ShadowRoot | Document | Node);
-    children: Snippet;
-  }
-</script>
-
-<script lang="ts">
-  import {getDocument, getWindow} from '@zag-js/dom-query';
-  import {setEnvironmentContext} from './enviroment-provider-context.svelte.js';
-
-  let {rootNode, children}: EnvironmentProviderProps = $props();
-
-  let elem: HTMLSpanElement | null = $state(null);
-
-  function getRootNode() {
-    if (rootNode) {
-      return typeof rootNode === 'function' ? rootNode() : rootNode;
-    } else {
-      return elem?.ownerDocument ?? document;
-    }
-  }
-
-  setEnvironmentContext({
-    getRootNode,
-    getDocument: () => getDocument(getRootNode()),
-    getWindow: () => getWindow(getRootNode()),
-  });
-</script>
-
-{@render children()}
-
-{#if !rootNode}
-  <span bind:this={elem} hidden></span>
-{/if}
+<script lang="ts" module>
+  import type {Snippet} from 'svelte';
+
+  export interface EnvironmentProviderProps {
+    rootNode?:
+      | ShadowRoot
+      | Document
+      | Node
+      | (() => ShadowRoot | Document | Node);
+    children: Snippet;
+  }
+</script>
+
+<script lang="ts">
+  import {getDocument, getWindow} from '@zag-js/dom-query';
+  import {setEnvironmentContext} from './enviroment-provider-context.svelte.js';
+
+  let {rootNode, children}: EnvironmentProviderProps = $props();
+
+  let elem: HTMLSpanElement | null = $state(null);
+
+  function getRootNode() {
+    if (rootNode) {
+      return typeof rootNode === 'function' ? rootNode() : rootNode;
+    } else {
+      return elem?.ownerDocument ?? document;
+    }
+  }
+
+  setEnvironmentContext({
+    getRootNode,
+    getDocument: () => getDocument(getRootNode()),
+    getWindow: () => getWindow(getRootNode()),
+  });
+</script>
+
+{@render children()}
+
+{#if !rootNode}
+  <span bind:this={elem} hidden></span>
+{/if}

package/dist/locale-provider/local-provider.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {Snippet} from 'svelte';
-
-  export interface LocaleProviderProps {
-    locale: string;
-    children: Snippet;
-  }
-</script>
-
-<script lang="ts">
-  import {isRTL} from '@zag-js/i18n-utils';
-  import {setLocaleContext} from './local-provider-context.svelte.js';
-
-  let {children, ...props}: LocaleProviderProps = $props();
-
-  setLocaleContext({
-    get locale() {
-      return props.locale;
-    },
-    get dir() {
-      return isRTL(props.locale) ? 'rtl' : 'ltr';
-    },
-  });
-</script>
-
-{@render children()}
+<script lang="ts" module>
+  import type {Snippet} from 'svelte';
+
+  export interface LocaleProviderProps {
+    locale: string;
+    children: Snippet;
+  }
+</script>
+
+<script lang="ts">
+  import {isRTL} from '@zag-js/i18n-utils';
+  import {setLocaleContext} from './local-provider-context.svelte.js';
+
+  let {children, ...props}: LocaleProviderProps = $props();
+
+  setLocaleContext({
+    get locale() {
+      return props.locale;
+    },
+    get dir() {
+      return isRTL(props.locale) ? 'rtl' : 'ltr';
+    },
+  });
+</script>
+
+{@render children()}

package/dist/steps/steps-completed-content.svelte

@@ -1,12 +1,16 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
 
   export interface StepsCompletedContentProps
-    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 {getStepsContext} from './steps-context.svelte.js';
 
   let {
@@ -17,21 +21,31 @@
   }: StepsCompletedContentProps = $props();
 
   let steps = getStepsContext();
+  let index = $derived(steps.count);
+
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: steps.value === index,
+    })),
+  );
 
   let mergedProps = $derived(
     mergeProps(
-      steps.getContentProps({
-        index: steps.count,
-      }),
+      steps.getContentProps({index}),
+      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 use:presence.setReference bind:this={ref} {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

package/dist/steps/steps-completed-content.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HtmlIngredientProps } from '../types.js';
-export interface StepsCompletedContentProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+import type { Action } from 'svelte/action';
+export interface StepsCompletedContentProps 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/steps/steps-content.svelte

@@ -1,13 +1,20 @@
 <script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemProps} from '@zag-js/steps';
+  import type {Action} from 'svelte/action';
 
   export interface StepsContentProps
-    extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ItemProps> {}
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement, never, Action>,
+      ItemProps
+    > {}
 </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 {getStepsContext} from './steps-context.svelte.js';
 
   let {
@@ -20,13 +27,29 @@
 
   let steps = getStepsContext();
 
-  let mergedProps = $derived(mergeProps(steps.getContentProps({index}), props));
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: steps.value === index,
+    })),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(
+      steps.getContentProps({index}),
+      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 use:presence.setReference bind:this={ref} {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

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

@@ -1,6 +1,7 @@
 import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { ItemProps } from '@zag-js/steps';
-export interface StepsContentProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ItemProps> {
+import type { Action } from 'svelte/action';
+export interface StepsContentProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, never, Action>, ItemProps> {
 }
 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/steps/steps-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 {
     CreateStepsProps,
@@ -7,13 +8,15 @@
 
   export interface StepsProps
     extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement, CreateStepsReturn>,
-      CreateStepsProps
-    > {}
+        HtmlIngredientProps<'div', HTMLDivElement, CreateStepsReturn>,
+        CreateStepsProps
+      >,
+      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 {createSteps} from './create-steps.svelte.js';
@@ -26,6 +29,12 @@
     ...props
   }: StepsProps = $props();
 
+  let [presenceStrategyProps, rest] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
   let [createStepsProps, localProps] = $derived(
     createSplitProps<CreateStepsProps>([
       'id',
@@ -36,7 +45,7 @@
       'orientation',
       'onStepChange',
       'onStepComplete',
-    ])(props),
+    ])(rest),
   );
 
   let steps = createSteps(reflect(() => createStepsProps));
@@ -44,6 +53,7 @@
   let mergedProps = $derived(mergeProps(steps.getRootProps(), localProps));
 
   setStepsContext(steps);
+  setPresenceStrategyPropsContext(() => presenceStrategyProps);
 </script>
 
 {#if asChild}

package/dist/steps/steps-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 { CreateStepsProps, CreateStepsReturn } from './create-steps.svelte.js';
-export interface StepsProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateStepsReturn>, CreateStepsProps> {
+export interface StepsProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateStepsReturn>, CreateStepsProps>, 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/dist/toast/toaster.svelte

@@ -1,60 +1,60 @@
-<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', HTMLDivElement, CreateToastReturn> {
-    toaster: CreateToasterReturn;
-  }
-</script>
-
-<script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/enviroment-provider-context.svelte.js';
-  import {getLocaleContext} from '../locale-provider/local-provider-context.svelte.js';
-  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 type {HTMLAttributes} from 'svelte/elements';
-  import ToastActor from './toast-actor.svelte';
-
-  let {
-    ref = $bindable(null),
-    toaster,
-    children: children_,
-    ...props
-  }: ToasterProps = $props();
-
-  const locale = getLocaleContext();
-  const environment = getEnvironmentContext();
-
-  let [snapshot, send] = useMachine(toaster.machine, {
-    context: {
-      dir: locale?.dir,
-      getRootNode: environment?.getRootNode,
-    },
-  });
-
-  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<HTMLAttributes<HTMLDivElement>>(
-      api.getGroupProps({placement}),
-      props,
-    ),
-  );
-</script>
-
-<Portal>
-  <div bind:this={ref} {...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', HTMLDivElement, CreateToastReturn> {
+    toaster: CreateToasterReturn;
+  }
+</script>
+
+<script lang="ts">
+  import {getEnvironmentContext} from '../environment-provider/enviroment-provider-context.svelte.js';
+  import {getLocaleContext} from '../locale-provider/local-provider-context.svelte.js';
+  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 type {HTMLAttributes} from 'svelte/elements';
+  import ToastActor from './toast-actor.svelte';
+
+  let {
+    ref = $bindable(null),
+    toaster,
+    children: children_,
+    ...props
+  }: ToasterProps = $props();
+
+  const locale = getLocaleContext();
+  const environment = getEnvironmentContext();
+
+  let [snapshot, send] = useMachine(toaster.machine, {
+    context: {
+      dir: locale?.dir,
+      getRootNode: environment?.getRootNode,
+    },
+  });
+
+  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<HTMLAttributes<HTMLDivElement>>(
+      api.getGroupProps({placement}),
+      props,
+    ),
+  );
+</script>
+
+<Portal>
+  <div bind:this={ref} {...mergedProps}>
+    {#each toasts as toast (toast.id)}
+      <ToastActor actor={toast}>
+        {#snippet children(ctx)}
+          {@render children_?.(ctx)}
+        {/snippet}
+      </ToastActor>
+    {/each}
+  </div>
+</Portal>

package/package.json

@@ -2,8 +2,8 @@
   "name": "ui-ingredients",
   "type": "module",
   "license": "MIT",
-  "version": "0.19.0",
-  "packageManager": "pnpm@9.14.4",
+  "version": "0.21.0",
+  "packageManager": "pnpm@9.15.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -307,62 +307,62 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@zag-js/accordion": "^0.78.2",
-    "@zag-js/anatomy": "^0.78.2",
+    "@zag-js/accordion": "^0.77.1",
+    "@zag-js/anatomy": "^0.77.1",
     "@zag-js/angle-slider": "^0.78.2",
-    "@zag-js/auto-resize": "^0.78.2",
-    "@zag-js/avatar": "^0.78.2",
-    "@zag-js/carousel": "^0.78.2",
-    "@zag-js/checkbox": "^0.78.2",
-    "@zag-js/clipboard": "^0.78.2",
-    "@zag-js/collapsible": "^0.78.2",
-    "@zag-js/color-picker": "^0.78.2",
-    "@zag-js/combobox": "^0.78.2",
-    "@zag-js/core": "^0.78.2",
-    "@zag-js/date-picker": "^0.78.2",
-    "@zag-js/dialog": "^0.78.2",
-    "@zag-js/dom-query": "^0.78.2",
-    "@zag-js/editable": "^0.78.2",
-    "@zag-js/file-upload": "^0.78.2",
-    "@zag-js/floating-panel": "^0.78.2",
-    "@zag-js/highlight-word": "^0.78.2",
-    "@zag-js/hover-card": "^0.78.2",
-    "@zag-js/i18n-utils": "^0.78.2",
-    "@zag-js/menu": "^0.78.2",
-    "@zag-js/number-input": "^0.78.2",
-    "@zag-js/pagination": "^0.78.2",
-    "@zag-js/pin-input": "^0.78.2",
-    "@zag-js/popover": "^0.78.2",
-    "@zag-js/presence": "^0.78.2",
-    "@zag-js/progress": "^0.78.2",
-    "@zag-js/qr-code": "^0.78.2",
-    "@zag-js/radio-group": "^0.78.2",
-    "@zag-js/rating-group": "^0.78.2",
-    "@zag-js/select": "^0.78.2",
-    "@zag-js/signature-pad": "^0.78.2",
-    "@zag-js/slider": "^0.78.2",
-    "@zag-js/splitter": "^0.78.2",
-    "@zag-js/steps": "^0.78.2",
-    "@zag-js/svelte": "^0.78.2",
-    "@zag-js/switch": "^0.78.2",
-    "@zag-js/tabs": "^0.78.2",
-    "@zag-js/tags-input": "^0.78.2",
-    "@zag-js/time-picker": "^0.78.2",
-    "@zag-js/timer": "^0.78.2",
-    "@zag-js/toast": "^0.78.2",
-    "@zag-js/toggle-group": "^0.78.2",
-    "@zag-js/tooltip": "^0.78.2",
-    "@zag-js/tour": "^0.78.2",
-    "@zag-js/tree-view": "^0.78.2",
-    "@zag-js/utils": "^0.78.2"
+    "@zag-js/auto-resize": "^0.77.1",
+    "@zag-js/avatar": "^0.77.1",
+    "@zag-js/carousel": "^0.77.1",
+    "@zag-js/checkbox": "^0.77.1",
+    "@zag-js/clipboard": "^0.77.1",
+    "@zag-js/collapsible": "^0.77.1",
+    "@zag-js/color-picker": "^0.77.1",
+    "@zag-js/combobox": "^0.77.1",
+    "@zag-js/core": "^0.77.1",
+    "@zag-js/date-picker": "^0.77.1",
+    "@zag-js/dialog": "^0.77.1",
+    "@zag-js/dom-query": "^0.77.1",
+    "@zag-js/editable": "^0.77.1",
+    "@zag-js/file-upload": "^0.77.1",
+    "@zag-js/floating-panel": "^0.77.1",
+    "@zag-js/highlight-word": "^0.77.1",
+    "@zag-js/hover-card": "^0.77.1",
+    "@zag-js/i18n-utils": "^0.77.1",
+    "@zag-js/menu": "^0.77.1",
+    "@zag-js/number-input": "^0.77.1",
+    "@zag-js/pagination": "^0.77.1",
+    "@zag-js/pin-input": "^0.77.1",
+    "@zag-js/popover": "^0.77.1",
+    "@zag-js/presence": "^0.77.1",
+    "@zag-js/progress": "^0.77.1",
+    "@zag-js/qr-code": "^0.77.1",
+    "@zag-js/radio-group": "^0.77.1",
+    "@zag-js/rating-group": "^0.77.1",
+    "@zag-js/select": "^0.77.1",
+    "@zag-js/signature-pad": "^0.77.1",
+    "@zag-js/slider": "^0.77.1",
+    "@zag-js/splitter": "^0.77.1",
+    "@zag-js/steps": "^0.77.1",
+    "@zag-js/svelte": "^0.77.1",
+    "@zag-js/switch": "^0.77.1",
+    "@zag-js/tabs": "^0.77.1",
+    "@zag-js/tags-input": "^0.77.1",
+    "@zag-js/time-picker": "^0.77.1",
+    "@zag-js/timer": "^0.77.1",
+    "@zag-js/toast": "^0.77.1",
+    "@zag-js/toggle-group": "^0.77.1",
+    "@zag-js/tooltip": "^0.77.1",
+    "@zag-js/tour": "^0.77.1",
+    "@zag-js/tree-view": "^0.77.1",
+    "@zag-js/utils": "^0.77.1"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.3.0",
-    "@sveltejs/adapter-vercel": "^5.5.0",
-    "@sveltejs/kit": "^2.9.0",
+    "@sveltejs/adapter-vercel": "^5.5.1",
+    "@sveltejs/kit": "^2.9.1",
     "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "^5.0.1",
     "@testing-library/jest-dom": "^6.6.3",
@@ -377,7 +377,7 @@
     "publint": "^0.2.12",
     "release-it": "^17.10.0",
     "resize-observer-polyfill": "^1.5.1",
-    "svelte": "^5.7.1",
+    "svelte": "^5.10.0",
     "svelte-check": "^4.1.1",
     "tailwind-merge": "^2.5.5",
     "tailwind-variants": "^0.3.0",