chore: update deps

examples/next-ts/package.json

@@ -82,9 +82,9 @@
     "@zag-js/utils": "workspace:*",
     "@zag-js/visually-hidden": "workspace:*",
     "form-serialize": "0.7.2",
-    "lucide-react": "0.368.0",
+    "lucide-react": "0.372.0",
     "match-sorter": "6.3.4",
-    "next": "14.2.1",
+    "next": "14.2.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-spinners": "0.13.8",
@@ -93,7 +93,7 @@
   "devDependencies": {
     "@types/form-serialize": "0.7.4",
     "@types/node": "20.12.7",
-    "@types/react": "18.2.78",
+    "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-react-hooks": "4.6.0",

examples/nuxt-ts/package.json

@@ -82,9 +82,9 @@
     "epic-spinners": "2.0.0",
     "form-serialize": "0.7.2",
     "match-sorter": "6.3.4",
-    "lucide-vue-next": "0.368.0",
-    "vue": "3.4.21",
-    "vue-router": "4.3.0"
+    "lucide-vue-next": "0.372.0",
+    "vue": "3.4.23",
+    "vue-router": "4.3.2"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",

examples/preact-ts/package.json

@@ -79,7 +79,7 @@
     "@zag-js/utils": "workspace:*",
     "@zag-js/visually-hidden": "workspace:*",
     "match-sorter": "6.3.4",
-    "lucide-preact": "0.368.0",
+    "lucide-preact": "0.372.0",
     "preact": "10.20.2",
     "preact-iso": "2.6.2",
     "preact-render-to-string": "6.4.2"
@@ -89,6 +89,6 @@
     "eslint": "8.57.0",
     "eslint-config-preact": "1.3.0",
     "typescript": "5.4.5",
-    "vite": "5.2.8"
+    "vite": "5.2.10"
   }
 }

examples/solid-ts/package.json

@@ -13,7 +13,7 @@
   "license": "MIT",
   "devDependencies": {
     "@types/form-serialize": "0.7.4",
-    "vite": "5.2.8",
+    "vite": "5.2.10",
     "vite-plugin-solid": "2.10.2"
   },
   "dependencies": {
@@ -90,7 +90,7 @@
     "@zag-js/visually-hidden": "workspace:*",
     "form-serialize": "0.7.2",
     "match-sorter": "6.3.4",
-    "lucide-solid": "0.368.0",
+    "lucide-solid": "0.372.0",
     "solid-js": "1.8.16"
   }
 }

examples/svelte-ts/package.json

@@ -82,18 +82,18 @@
     "@zag-js/visually-hidden": "workspace:*",
     "form-serialize": "0.7.2",
     "match-sorter": "6.3.4",
-    "lucide-svelte": "0.368.0",
+    "lucide-svelte": "0.372.0",
     "svelte-routing": "2.12.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "3.1.0",
     "@tsconfig/svelte": "5.0.4",
     "@types/form-serialize": "0.7.4",
-    "svelte": "5.0.0-next.83",
+    "svelte": "5.0.0-next.110",
     "svelte-check": "3.6.9",
     "tslib": "2.6.2",
     "typescript": "5.4.5",
-    "vite": "5.2.8",
+    "vite": "5.2.10",
     "vite-tsconfig-paths": "4.3.2"
   }
 }

examples/svelte-ts/src/lib/components/iframe.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { portal } from "@zag-js/svelte"
-  import { onMount } from "svelte"
+  import { onMount, type Snippet } from "svelte"
 
   let frameRef: HTMLIFrameElement | null = null
   let mountNode = $state<HTMLElement | undefined>()
+  let { children }: { children: Snippet } = $props()
 
   onMount(() => {
     if (!frameRef) return
@@ -14,7 +15,7 @@
 <iframe title="iframe" bind:this={frameRef}>
   {#if mountNode}
     <span use:portal={{ container: mountNode }}>
-      <slot />
+      {@render children()}
     </span>
   {/if}
 </iframe>

examples/svelte-ts/src/lib/components/state-visualizer.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { stringifyState } from "@zag-js/shared"
-  import { unstate } from "svelte"
 
   interface StateVisualizerProps {
     state: Record<string, any>
@@ -15,7 +14,7 @@
   <pre>
     <details open>
         <summary>{label || "Visualizer"}</summary>
-        <div>{@html stringifyState(unstate(currentState), omit)}</div>
+        <div>{@html stringifyState($state.snapshot(currentState), omit)}</div>
     </details>
   </pre>
 </div>

examples/svelte-ts/src/lib/components/toast-item.svelte

@@ -28,7 +28,7 @@
 </script>
 
 <pre {...api.rootProps}>
-    <div {...progressbarProps} />
+    <div {...progressbarProps}></div>
     <p {...api.titleProps}>{api.title}</p>
     <p {...api.descriptionProps}>{api.description}</p>
     <button {...api.closeTriggerProps}>Close</button>

examples/svelte-ts/src/lib/components/toolbar.svelte

@@ -2,13 +2,15 @@
   import type { UseControlsReturn } from "$lib/use-controls.svelte"
   import { dataAttr } from "@zag-js/dom-query"
   import Controls from "./controls.svelte"
+  import type { Snippet } from "svelte"
 
   interface Props {
     controls?: UseControlsReturn | null
     viz?: boolean
+    children: Snippet
   }
 
-  const { controls, viz }: Props = $props()
+  const { controls, viz, children }: Props = $props()
 
   let active = $state(viz ? 1 : !controls ? 1 : 0)
 </script>
@@ -26,6 +28,6 @@
     </div>
   {/if}
   <div data-content data-active={dataAttr(active === 1)}>
-    <slot />
+    {@render children()}
   </div>
 </div>

examples/vue-ts/package.json

@@ -83,10 +83,10 @@
     "epic-spinners": "2.0.0",
     "form-serialize": "0.7.2",
     "match-sorter": "6.3.4",
-    "lucide-vue-next": "0.368.0",
-    "vite": "5.2.8",
-    "vue": "3.4.21",
-    "vue-router": "4.3.0"
+    "lucide-vue-next": "0.372.0",
+    "vite": "5.2.10",
+    "vue": "3.4.23",
+    "vue-router": "4.3.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "1.10.2",

package.json

@@ -72,7 +72,7 @@
     "@internationalized/date": "3.5.2",
     "@octokit/rest": "20.1.0",
     "@playwright/test": "1.43.1",
-    "@swc/core": "1.4.14",
+    "@swc/core": "1.4.16",
     "@types/babel__generator": "7.6.8",
     "@types/babel__traverse": "7.20.5",
     "@types/node": "20.12.7",
@@ -99,7 +99,7 @@
     "tsup": "8.0.2",
     "tsx": "4.7.2",
     "typescript": "5.4.5",
-    "vite": "5.2.8",
+    "vite": "5.2.10",
     "vite-plugin-dts": "3.8.3",
     "vitest": "1.5.0"
   },

packages/anatomy-icons/package.json

@@ -37,7 +37,7 @@
   "clean-package": "../../clean-package.config.json",
   "main": "src/index.ts",
   "devDependencies": {
-    "@types/react": "18.2.78",
+    "@types/react": "18.2.79",
     "clean-package": "2.2.0",
     "react": "18.2.0"
   },

packages/frameworks/react/package.json

@@ -32,7 +32,7 @@
     "proxy-compare": "2.6.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.78",
+    "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",
     "@zag-js/utils": "workspace:*",
     "react": "18.2.0",

packages/frameworks/svelte/package.json

@@ -33,7 +33,7 @@
   "devDependencies": {
     "@sveltejs/package": "2.3.1",
     "clean-package": "2.2.0",
-    "svelte": "5.0.0-next.96"
+    "svelte": "5.0.0-next.110"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"

packages/frameworks/svelte/src/use-service.svelte.ts

@@ -1,5 +1,4 @@
 import type { MachineSrc, StateMachine as S } from "@zag-js/core"
-import { unstate } from "svelte"
 
 export function useService<
   TContext extends Record<string, any>,
@@ -9,14 +8,15 @@ export function useService<
   const { actions, context, state: hydratedState } = options ?? {}
 
   const service = typeof machine === "function" ? machine() : machine
+  service.setContext($state.snapshot(context))
+  service._created()
 
   $effect(() => {
-    service.setOptions({ actions: unstate(actions) })
+    service.setOptions({ actions: $state.snapshot(actions) })
   })
 
   $effect(() => {
-    service.setContext(unstate(context))
-    service._created()
+    service.setContext($state.snapshot(context))
   })
 
   $effect(() => {

packages/frameworks/vue/package.json

@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@zag-js/utils": "workspace:*",
-    "vue": "3.4.21",
+    "vue": "3.4.23",
     "clean-package": "2.2.0"
   },
   "peerDependencies": {