docs: svelte $props.id (#2327)

* feat(svelte): $props.id

* fix(docs): svelte link

Author: Hugos68

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>