docs: svelte $props.id

website/data/overview/composition.mdx

@@ -51,16 +51,79 @@ element part needs to have a unique id.
 Each time you initiate the machine with the `useMachine` hook, you'll need to
 ensure that you provide a unique id.
 
-You can rely on framework-specific utilities to generate unique ids. React
-provides `useId()` hook and Solid.js provides a `createId()` function for this
-purpose.
-
-```js
-/// ...                                          👇 must be unique
-const service = useMachine(toggle.machine, { id: useId() })
-/// ...
+In most cases, you can rely on the framework providing unique a unique id for each component.
+
+### React
+
+```jsx
+import * as accordion from "@zag-js/accordion"
+import { useMachine, normalizeProps } from "@zag-js/framework"
+import { useId } from "react"
+
+function Component() {
+  const service = useMachine(accordion.machine, { id: useId() })
+  const api = machine.connect(service, normalizeProps)
+
+  // ...
+}
+```
+
+See [useId](https://react.dev/reference/react/useId).
+
+### Solid
+
+```jsx
+import * as accordion from "@zag-js/accordion"
+import { useMachine, normalizeProps } from "@zag-js/solid"
+import { createUniqueId } from "solid-js"
+
+function Component() {
+  const service = useMachine(accordion.machine, { id: createUniqueId() })
+  const api = machine.connect(service, normalizeProps)
+
+  // ...
+}
 ```
 
+See [createUniqueId](https://docs.solidjs.com/reference/component-apis/create-unique-id).
+
+### Vue
+
+```html
+<script setup>
+import * as accordion from "@zag-js/accordion"
+import { useMachine, normalizeProps } from "@zag-js/vue"
+import { useId } from "vue"
+
+const service = useMachine(accordion.machine, { id: useId() })
+const api = machine.connect(service, normalizeProps)
+</script>
+
+<template>
+  <!-- ... -->
+</template>
+```
+
+See [useId](https://vuejs.org/api/composition-api-helpers#useid).
+
+### Svelte
+
+```html
+<script>
+  import * as accordion from "@zag-js/accordion"
+  import { useMachine, normalizeProps } from "@zag-js/svelte"
+
+  const id = $props.id()
+  const service = useMachine(accordion.machine, { id })
+  const api = machine.connect(service, normalizeProps)
+</script>
+
+
+<!-- ... -->
+```
+
+See [$props.id](https://svelte.dev/docs/svelte/$props#$props.id()).
+
 Internally, Zag maps the unique id provided to each component parts needed for
 the widget to work.
 
@@ -72,7 +135,7 @@ To achieve this, you will need to pass custom `ids` to the machine's context.
 This will ensure that calling `document.getElementById(...)` within the tooltip
 and/or popover will return the same element.
 
-```tsx {7,12}
+```tsx {6,10}
 import * as tooltip from "@zag-js/tooltip"
 import * as popover from "@zag-js/popover"
 
@@ -84,10 +147,9 @@ function Example() {
   const popoverService = useMachine(popover.machine, {
     ids: { trigger: "id-1" },
   })
+
+  // ...
 }
-
-// render UI
-return null
 ```
 
 In the example above, you will notice that the popover and tooltip trigger share
@@ -107,7 +169,7 @@ To provide the correct reference to root node or document, you can pass
 > In shadow DOM, the root node can be derived from calling
 > `element.getRootNode()` method on any element.
 
-```jsx {12,15,42}
+```jsx {12,16,42}
 import * as accordion from "@zag-js/accordion"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import Frame, { useFrame } from "react-frame-component"

website/data/snippets/svelte/accordion/usage.mdx

@@ -8,8 +8,9 @@
     { title: "Automobiles", content: "Sample accordion content" },
     { title: "Aircraft", content: "Sample accordion content" },
   ]
-
-  const service = useMachine(accordion.machine, ({ id: "1" }))
+
+  const id = $props.id()
+  const service = useMachine(accordion.machine, ({ id }))
   const api = $derived(accordion.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/angle-slider/usage.mdx

@@ -3,8 +3,8 @@
   import * as angleSlider from "@zag-js/angle-slider"
   import { normalizeProps, useMachine } from "@zag-js/svelte"
 
-  const service = useMachine(angleSlider.machine, ({ id: "1" }))
-
+  const id = $props.id()
+  const service = useMachine(angleSlider.machine, ({ id }))
   const api = $derived(angleSlider.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/avatar/usage.mdx

@@ -3,7 +3,8 @@
   import * as avatar from "@zag-js/avatar"
   import { useMachine, normalizeProps } from "@zag-js/svelte"
 
-  const service = useMachine(avatar.machine, ({ id: "1" }))
+  const id = $props.id()
+  const service = useMachine(avatar.machine, ({ id }))
   const api = $derived(avatar.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/carousel/usage.mdx

@@ -9,10 +9,10 @@
   "https://tinyurl.com/59jxz9uu",
  ]
 
+  const id = $props.id()
   const service = useMachine(
-    carousel.machine, ({ id: "1", slideCount: items.length }),
+    carousel.machine, ({ id: id, slideCount: items.length }),
   )
-
   const api = $derived(carousel.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/checkbox/usage.mdx

@@ -3,7 +3,8 @@
   import * as checkbox from "@zag-js/checkbox"
   import { normalizeProps, useMachine } from "@zag-js/svelte"
 
-  const service = useMachine(checkbox.machine, ({ id: "1" }))
+  const id = $props.id()
+  const service = useMachine(checkbox.machine, ({ id }))
   const api = $derived(checkbox.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/clipboard/usage.mdx

@@ -5,9 +5,10 @@
   import { ClipboardCheck, ClipboardCopyIcon } from "lucide-svelte"
   import { useId } from "react"
 
+  const id = $props.id()
   const service = useMachine(
     clipboard.machine, ({
-      id: "1",
+      id: id,
       value: "https://github/com/chakra-ui/zag",
     }),
   )

website/data/snippets/svelte/collapsible/usage.mdx

@@ -3,8 +3,8 @@
   import * as collapsible from "@zag-js/collapsible"
   import { normalizeProps, useMachine } from "@zag-js/svelte"
 
-  const service = useMachine(collapsible.machine, ({ id: "1" }))
-
+  const id = $props.id()
+  const service = useMachine(collapsible.machine, ({ id }))
   const api = $derived(collapsible.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/color-picker/usage.mdx

@@ -3,8 +3,8 @@
   import * as colorPicker from "@zag-js/color-picker"
   import { normalizeProps, useMachine } from "@zag-js/svelte"
 
-  const service = useMachine(colorPicker.machine, ({ id: "1" }))
-
+  const id = $props.id()
+  const service = useMachine(colorPicker.machine, ({ id }))
   const api = $derived(colorPicker.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/color-picker/with-channel-inputs.mdx

@@ -3,11 +3,11 @@
   import * as colorPicker from "@zag-js/color-picker"
   import { normalizeProps, useMachine } from "@zag-js/svelte"
 
+  const id = $props.id()
   const service = useMachine(colorPicker.machine, {
-    id: "1",
+    id,
     defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
   })
-
   const api = $derived(colorPicker.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/color-picker/with-eye-dropper.mdx

@@ -3,11 +3,11 @@
   import * as colorPicker from "@zag-js/color-picker"
   import { normalizeProps, useMachine } from "@zag-js/svelte"
 
+  const id = $props.id()
   const service = useMachine(colorPicker.machine, {
-    id: "1",
+    id,
     defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
   })
-
   const api = $derived(colorPicker.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/color-picker/with-preview.mdx

@@ -3,11 +3,11 @@
   import * as colorPicker from "@zag-js/color-picker"
   import { normalizeProps, useMachine } from "@zag-js/svelte"
 
+  const id = $props.id()
   const service = useMachine(colorPicker.machine, {
-    id: "1",
+    id,
     defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
   })
-
   const api = $derived(colorPicker.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/color-picker/with-swatches.mdx

@@ -3,13 +3,13 @@
   import * as colorPicker from "@zag-js/color-picker"
   import { normalizeProps, useMachine } from "@zag-js/svelte"
 
+  const id = $props.id()
   const service = useMachine(colorPicker.machine, {
-    id: "1",
+    id,
     defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
   })
-
   const api = $derived(colorPicker.connect(service, normalizeProps))
-
+  
   const presets = ["#ff0000", "#00ff00", "#0000ff"]
 </script>
 

website/data/snippets/svelte/combobox/usage.mdx

@@ -17,8 +17,9 @@
     itemToString: (item) => item.label,
   })
 
+  const id = $props.id()
   const service = useMachine(combobox.machine, {
-    id: "1",
+    id,
     collection,
     onOpenChange() {
       options = comboboxData
@@ -33,7 +34,6 @@
       options = newOptions
     },
   })
-
   const api = $derived(combobox.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/date-picker/usage.mdx

@@ -3,7 +3,8 @@
   import * as datepicker from "@zag-js/date-picker"
   import { portal, useMachine, normalizeProps } from "@zag-js/svelte"
 
-  const service = useMachine(datepicker.machine, ({ id: "1" }))
+  const id = $props.id()
+  const service = useMachine(datepicker.machine, ({ id }))
   const api = $derived(datepicker.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/dialog/usage.mdx

@@ -3,7 +3,8 @@
   import * as dialog from "@zag-js/dialog"
   import { portal, normalizeProps, useMachine } from "@zag-js/svelte"
 
-  const service = useMachine(dialog.machine, ({ id: "1" }))
+  const id = $props.id()
+  const service = useMachine(dialog.machine, ({ id }))
   const api = $derived(dialog.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/editable/custom-controls.mdx

@@ -2,8 +2,9 @@
 <script lang="ts">
   import * as editable from "@zag-js/editable"
   import { useMachine, normalizeProps } from "@zag-js/svelte"
-  const service = useMachine(editable.machine, ({ id: "1" }))
 
+  const id = $props.id()
+  const service = useMachine(editable.machine, ({ id }))
   const api = $derived(editable.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/editable/usage.mdx

@@ -2,8 +2,9 @@
 <script lang="ts">
   import * as editable from "@zag-js/editable"
   import { useMachine, normalizeProps } from "@zag-js/svelte"
-  const service = useMachine(editable.machine, ({ id: "1" }))
 
+  const id = $props.id()
+  const service = useMachine(editable.machine, ({ id }))
   const api = $derived(editable.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/file-upload/usage.mdx

@@ -3,8 +3,8 @@
   import * as fileUpload from "@zag-js/file-upload"
   import { normalizeProps, useMachine } from "@zag-js/svelte"
 
-  const service = useMachine(fileUpload.machine, ({ id: "1" }))
-
+  const id = $props.id()
+  const service = useMachine(fileUpload.machine, ({ id }))
   const api = $derived(fileUpload.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/hover-card/usage.mdx

@@ -3,8 +3,8 @@
   import * as hoverCard from "@zag-js/hover-card"
   import { portal, useMachine, normalizeProps } from "@zag-js/svelte"
 
-  const service = useMachine(hoverCard.machine, ({ id: "1" }))
-
+  const id = $props.id()
+  const service = useMachine(hoverCard.machine, ({ id }))
   const api = $derived(hoverCard.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/menu/context-menu.mdx

@@ -3,11 +3,8 @@
   import * as menu from "@zag-js/menu"
   import { normalizeProps, useMachine } from "@zag-js/svelte"
 
-  const service = useMachine(menu.machine, {
-      id: "1",
-    }
-  )
-
+  const id = $props.id()
+  const service = useMachine(menu.machine, { id })
   const api = $derived(menu.connect(service, normalizeProps))
 </script>
 

website/data/snippets/svelte/menu/nested-menu.mdx

@@ -4,13 +4,15 @@
   import { portal, normalizeProps, useMachine } from "@zag-js/svelte"
   import { onMount } from "svelte"
 
+  const id = $props.id()
+
   // Level 1 - File Menu
-  const fileService = useMachine(menu.machine, ({ id: "1", "aria-label": "File" }))
+  const fileService = useMachine(menu.machine, ({ id: `${id}-1`, "aria-label": "File" }))
 
   const fileMenu = $derived(menu.connect(fileService, normalizeProps))
 
   // Level 2 - Share Menu
-  const shareService = useMachine(menu.machine, ({ id: "2", "aria-label": "Share" }))
+  const shareService = useMachine(menu.machine, ({ id: `${id}-2`, "aria-label": "Share" }))
 
   const shareMenu = $derived(menu.connect(shareService, normalizeProps))
 

website/data/snippets/svelte/menu/option-items.mdx

@@ -19,10 +19,8 @@
   let order = $state("")
   let type = $state<string[]>([])
 
-  const service = useMachine(menu.machine, {
-    id: "1",
-  })
-
+  const id = $props.id()
+  const service = useMachine(menu.machine, { id })
   const api = $derived(menu.connect(service, normalizeProps))
 
   const radios = $derived(