ui-ingredients 0.21.1 → 0.22.1

package/dist/toast/toast-root.svelte

@@ -1,33 +1,32 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-  import type {CreateToastReturn} from './create-toast.svelte.js';
-
-  export interface ToastProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, CreateToastReturn> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getToastContext} from './toast-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: ToastProps = $props();
-
-  let toast = getToastContext();
-
-  let mergedProps = $derived(mergeProps(toast.getRootProps(), props));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps, toast)}
-{:else}
-  <div bind:this={ref} {...mergedProps}>
-    <div {...toast.getGhostBeforeProps()}></div>
-    {@render children?.(toast)}
-    <div {...toast.getGhostAfterProps()}></div>
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+  import type {CreateToastReturn} from './create-toast.svelte.js';
+
+  export interface ToastProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, CreateToastReturn> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getToastContext} from './toast-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ToastProps = $props();
+
+  let toast = getToastContext();
+  let mergedProps = $derived(mergeProps(toast.getRootProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, toast)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    <div {...toast.getGhostBeforeProps()}></div>
+    {@render children?.(toast)}
+    <div {...toast.getGhostAfterProps()}></div>
+  </div>
+{/if}

package/dist/toast/toast-title.svelte

@@ -1,34 +1,33 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface ToastTitleProps
-    extends HtmlIngredientProps<'h2', HTMLHeadingElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getToastContext} from './toast-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: ToastTitleProps = $props();
-
-  let context = getToastContext();
-
-  let mergedProps = $derived(mergeProps(context.getTitleProps(), props));
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <h2 bind:this={ref} {...mergedProps}>
-    {#if children}
-      {@render children?.()}
-    {:else}
-      {context.title}
-    {/if}
-  </h2>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ToastTitleProps
+    extends HtmlIngredientProps<'h2', HTMLHeadingElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getToastContext} from './toast-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ToastTitleProps = $props();
+
+  let toast = getToastContext();
+  let mergedProps = $derived(mergeProps(toast.getTitleProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <h2 bind:this={ref} {...mergedProps}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {toast.title}
+    {/if}
+  </h2>
+{/if}

package/dist/toast/toaster.svelte

@@ -16,9 +16,10 @@
   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 {normalizeProps, portal, useMachine} from '@zag-js/svelte';
-  import * as toast from '@zag-js/toast';
+  import {getPortalProviderPropsContext} from '../portal/portal-context.svelte.js';
   import type {HTMLAttributes} from 'svelte/elements';
+  import {normalizeProps, portal, useMachine} from 'zagjs-legacy-svelte';
+  import * as toast from 'zagjs-legacy-toast';
   import ToastActor from './toast-actor.svelte';
 
   let {
@@ -30,6 +31,7 @@
 
   let locale = getLocaleContext();
   let environment = getEnvironmentContext();
+  let portalProviderProps = getPortalProviderPropsContext();
 
   let [state, send] = useMachine(toaster.machine, {
     context: {
@@ -51,7 +53,14 @@
   );
 </script>
 
-<div bind:this={ref} use:portal {...mergedProps}>
+<div
+  bind:this={ref}
+  use:portal={{
+    container: portalProviderProps?.container ?? undefined,
+    getRootNode: environment?.getRootNode,
+  }}
+  {...mergedProps}
+>
   {#each toasts as toast (toast.id)}
     <ToastActor actor={toast} {children} />
   {/each}

package/dist/toggle/toggle-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createToggle} from './create-toggle.svelte.js';
   import {setToggleContext} from './toggle-context.svelte.js';
 

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

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {getToggleGroupContext} from './toggle-group-context.svelte.js';
 
   let {

package/dist/toggle-group/toggle-group-root.svelte

@@ -13,9 +13,9 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createToggleGroup} from './create-toggle-group.svelte.js';
   import {setToggleGroupContext} from './toggle-group-context.svelte.js';
 

package/dist/tooltip/tooltip-root.svelte

@@ -14,10 +14,10 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {setPresenceContext} from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createTooltip} from './create-tooltip.svelte.js';
   import {setTooltipContext} from './tooltip-context.svelte.js';
 

package/dist/tour/tour-root.svelte

@@ -12,13 +12,13 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
   import {
     setPresenceContext,
     setPresenceStrategyPropsContext,
   } from '../presence/presence-context.svelte.js';
   import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
   import {createTour} from './create-tour.svelte.js';
   import {setTourContext} from './tour-context.svelte.js';
 

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

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getTreeViewContext,
     setTreeViewNodePropsContext,

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

@@ -7,8 +7,8 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
   import {
     getTreeViewContext,
     setTreeViewNodePropsContext,

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

@@ -15,10 +15,10 @@
 </script>
 
 <script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
   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';
   import {setTreeViewContext} from './tree-view-context.svelte.js';
 

package/package.json

@@ -2,8 +2,8 @@
   "name": "ui-ingredients",
   "type": "module",
   "license": "MIT",
-  "version": "0.21.1",
-  "packageManager": "pnpm@9.15.0",
+  "version": "0.22.1",
+  "packageManager": "pnpm@9.15.1",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -218,7 +218,8 @@
     "./anatomy": {
       "types": "./dist/anatomy.d.ts",
       "import": "./dist/anatomy.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
@@ -307,83 +308,84 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@zag-js/accordion": "^0.77.1",
-    "@zag-js/anatomy": "^0.77.1",
-    "@zag-js/angle-slider": "^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"
+    "@zag-js/accordion": "^0.78.3",
+    "@zag-js/anatomy": "^0.78.3",
+    "@zag-js/angle-slider": "^0.78.3",
+    "@zag-js/auto-resize": "^0.78.3",
+    "@zag-js/avatar": "^0.78.3",
+    "@zag-js/carousel": "^0.78.3",
+    "@zag-js/checkbox": "^0.78.3",
+    "@zag-js/clipboard": "^0.78.3",
+    "@zag-js/collapsible": "^0.78.3",
+    "@zag-js/color-picker": "^0.78.3",
+    "@zag-js/combobox": "^0.78.3",
+    "@zag-js/core": "^0.78.3",
+    "@zag-js/date-picker": "^0.78.3",
+    "@zag-js/dialog": "^0.78.3",
+    "@zag-js/dom-query": "^0.78.3",
+    "@zag-js/editable": "^0.78.3",
+    "@zag-js/file-upload": "^0.78.3",
+    "@zag-js/floating-panel": "^0.78.3",
+    "@zag-js/highlight-word": "^0.78.3",
+    "@zag-js/hover-card": "^0.78.3",
+    "@zag-js/i18n-utils": "^0.78.3",
+    "@zag-js/menu": "^0.78.3",
+    "@zag-js/number-input": "^0.78.3",
+    "@zag-js/pagination": "^0.78.3",
+    "@zag-js/pin-input": "^0.78.3",
+    "@zag-js/popover": "^0.78.3",
+    "@zag-js/presence": "^0.78.3",
+    "@zag-js/progress": "^0.78.3",
+    "@zag-js/qr-code": "^0.78.3",
+    "@zag-js/radio-group": "^0.78.3",
+    "@zag-js/rating-group": "^0.78.3",
+    "@zag-js/select": "^0.78.3",
+    "@zag-js/signature-pad": "^0.78.3",
+    "@zag-js/slider": "^0.78.3",
+    "@zag-js/splitter": "^0.78.3",
+    "@zag-js/steps": "^0.78.3",
+    "@zag-js/svelte": "^0.78.3",
+    "@zag-js/switch": "^0.78.3",
+    "@zag-js/tabs": "^0.78.3",
+    "@zag-js/tags-input": "^0.78.3",
+    "@zag-js/time-picker": "^0.78.3",
+    "@zag-js/timer": "^0.78.3",
+    "@zag-js/toast": "^0.78.3",
+    "@zag-js/toggle-group": "^0.78.3",
+    "@zag-js/tooltip": "^0.78.3",
+    "@zag-js/tour": "^0.78.3",
+    "@zag-js/tree-view": "^0.78.3",
+    "zagjs-legacy-svelte": "npm:@zag-js/svelte@0.77.1",
+    "zagjs-legacy-toast": "npm:@zag-js/toast@0.77.1"
   },
   "peerDependencies": {
-    "svelte": ">=5.0.0"
+    "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.3.0",
     "@sveltejs/adapter-vercel": "^5.5.2",
-    "@sveltejs/kit": "^2.12.1",
+    "@sveltejs/kit": "^2.13.0",
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^5.0.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.6",
     "@testing-library/user-event": "^14.5.2",
     "@types/jsdom": "^21.1.7",
     "@untitled-theme/icons-svelte": "^0.12.0",
     "autoprefixer": "^10.4.20",
-    "globals": "^15.13.0",
+    "globals": "^15.14.0",
     "jsdom": "^25.0.1",
     "postcss": "^8.4.49",
     "publint": "^0.2.12",
     "release-it": "^17.10.0",
     "resize-observer-polyfill": "^1.5.1",
-    "svelte": "^5.14.1",
+    "svelte": "^5.15.0",
     "svelte-check": "^4.1.1",
     "tailwind-merge": "^2.5.5",
     "tailwind-variants": "^0.3.0",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2",
-    "vite": "^6.0.3",
+    "vite": "^6.0.5",
     "vitest": "^2.1.8",
     "vitest-axe": "^1.0.0-pre.3",
     "vitest-canvas-mock": "^0.3.3"