[pull] main from chakra-ui:main

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

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as accordion from "@zag-js/accordion"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"

website/data/snippets/react/angle-slider/tick-marks.mdx

@@ -1,4 +1,4 @@
-```jsx {7-11}
+```tsx {7-11}
 //...
 
 <div {...api.getRootProps()}>

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

@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as angleSlider from "@zag-js/angle-slider"
 import { normalizeProps, useMachine } from "@zag-js/react"
+import { useId } from "react"
 
 export function AngleSlider() {
-  const service = useMachine(angleSlider.machine, { id: "1" })
+  const service = useMachine(angleSlider.machine, { id: useId() })
 
   const api = angleSlider.connect(service, normalizeProps)
 

website/data/snippets/react/avatar/component.api.mdx

@@ -1,6 +1,7 @@
 ```tsx
 import * as avatar from "@zag-js/avatar"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export interface AvatarProps extends Omit<avatar.Context, "id"> {
   /**

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

@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as avatar from "@zag-js/avatar"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 function Avatar() {
-  const service = useMachine(avatar.machine, { id: "1" })
+  const service = useMachine(avatar.machine, { id: useId() })
 
   const api = avatar.connect(service, normalizeProps)
 

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

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as carousel from "@zag-js/carousel"
 import { normalizeProps, useMachine } from "@zag-js/react"
 

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

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as checkbox from "@zag-js/checkbox"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"

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

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as colorPicker from "@zag-js/color-picker"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"

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

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as combobox from "@zag-js/combobox"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useState, useId } from "react"

website/data/snippets/react/date-input/usage.mdx

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as dateInput from "@zag-js/date-input"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"

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

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as datepicker from "@zag-js/date-picker"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
 import { useId } from "react"

website/data/snippets/react/dialog/initial-focus.mdx

@@ -1,4 +1,4 @@
-```jsx {3,6,13}
+```tsx {3,6,13}
 export function Dialog() {
   // initial focused element ref
   const inputRef = useRef(null)

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

@@ -1,9 +1,10 @@
 ```tsx
 import * as dialog from "@zag-js/dialog"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
+import { useId } from "react"
 
 export function Dialog() {
-  const service = useMachine(dialog.machine, { id: "1" })
+  const service = useMachine(dialog.machine, { id: useId() })
 
   const api = dialog.connect(service, normalizeProps)
 

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

@@ -1,11 +1,12 @@
-```jsx
+```tsx
 import * as editable from "@zag-js/editable"
-import { useMachine } from "@zag-js/react"
+import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export default function Editable() {
-  const service = useMachine(editable.machine, { id: "1" })
+  const service = useMachine(editable.machine, { id: useId() })
 
-  const api = editable.connect(service)
+  const api = editable.connect(service, normalizeProps)
 
   return (
     <div {...api.getRootProps()}>

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

@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as editable from "@zag-js/editable"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export default function Editable() {
-  const service = useMachine(editable.machine, { id: "1" })
+  const service = useMachine(editable.machine, { id: useId() })
 
   const api = editable.connect(service, normalizeProps)
 

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

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as fileUpload from "@zag-js/file-upload"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"

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

@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as hoverCard from "@zag-js/hover-card"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
+import { useId } from "react"
 
 function HoverCard() {
-  const service = useMachine(hoverCard.machine, { id: "1" })
+  const service = useMachine(hoverCard.machine, { id: useId() })
 
   const api = hoverCard.connect(service, normalizeProps)
 

website/data/snippets/react/image-cropper/usage.mdx

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as imageCropper from "@zag-js/image-cropper"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"

website/data/snippets/react/listbox/grid-usage.mdx

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as listbox from "@zag-js/listbox"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"

website/data/snippets/react/listbox/usage.mdx

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as listbox from "@zag-js/listbox"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"

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

@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as menu from "@zag-js/menu"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export function ContextMenu() {
-  const service = useMachine(menu.machine, { id: "1" })
+  const service = useMachine(menu.machine, { id: useId() })
   const api = menu.connect(service, normalizeProps)
 
   return (

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

@@ -1,20 +1,20 @@
 ```tsx
 import * as menu from "@zag-js/menu"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
-import { useEffect } from "react"
+import { useEffect, useId } from "react"
 
 export function NestedMenu() {
   // Level 1 - File Menu
   const fileMenuService = useMachine(menu.machine, {
-    id: "1",
+    id: useId(),
     "aria-label": "File",
   })
 
   const fileMenu = menu.connect(fileMenuService, normalizeProps)
 
   // Level 2 - Share Menu
   const shareMenuService = useMachine(menu.machine, {
-    id: "2",
+    id: useId(),
     "aria-label": "Share",
   })
 

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

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as menu from "@zag-js/menu"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useState } from "react"

website/data/snippets/react/menu/usage.mdx

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as menu from "@zag-js/menu"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"

website/data/snippets/react/navigation-menu/controlled.mdx

@@ -1,4 +1,4 @@
-```jsx {1,4-8}
+```tsx {1,4-8}
 import { useState } from "react"
 
 export function NavigationMenu() {

website/data/snippets/react/navigation-menu/usage.mdx

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as navigationMenu from "@zag-js/navigation-menu"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"

website/data/snippets/react/navigation-menu/viewport-usage.mdx

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as navigationMenu from "@zag-js/navigation-menu"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"

website/data/snippets/react/navigation-menu/with-indicator.mdx

@@ -1,4 +1,4 @@
-```jsx {3-5}
+```tsx {3-5}
 <nav {...api.getRootProps()}>
   <div {...api.getListProps()}>
     {/* ... items ... */}

website/data/snippets/react/number-input/scrubber.mdx

@@ -1,9 +1,10 @@
-```jsx {13}
+```tsx {13}
 import * as numberInput from "@zag-js/number-input"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export function NumberInput() {
-  const service = useMachine(numberInput.machine, { id: "1" })
+  const service = useMachine(numberInput.machine, { id: useId() })
 
   const api = numberInput.connect(service, normalizeProps)
 

website/data/snippets/react/number-input/usage.mdx

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as numberInput from "@zag-js/number-input"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"

website/data/snippets/react/pagination/usage.mdx

@@ -1,11 +1,12 @@
-```jsx
+```tsx
 import * as pagination from "@zag-js/pagination"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 import { data } from "./data"
 
 function Pagination() {
   const service = useMachine(pagination.machine, {
-    id: "1",
+    id: useId(),
     count: data.length,
   })
 

website/data/snippets/react/password-input/usage.mdx

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as passwordInput from "@zag-js/password-input"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { EyeIcon, EyeOffIcon } from "lucide-react"

website/data/snippets/react/pin-input/usage.mdx

@@ -1,9 +1,10 @@
-```jsx
+```tsx
 import * as pinInput from "@zag-js/pin-input"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export function PinInput() {
-  const service = useMachine(pinInput.machine, { id: "1" })
+  const service = useMachine(pinInput.machine, { id: useId() })
 
   const api = pinInput.connect(service, normalizeProps)
 

website/data/snippets/react/popover/initial-focus.mdx

@@ -1,4 +1,4 @@
-```jsx {3,7,14}
+```tsx {3,7,14}
 export function Popover() {
   // initial focused element ref
   const inputRef = useRef(null)

website/data/snippets/react/popover/render-in-portal.mdx

@@ -1,10 +1,10 @@
-```jsx
+```tsx
 import * as popover from "@zag-js/popover"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"
-import * as React from "react"
+import { useId } from "react"
 
 export function Popover() {
-  const service = useMachine(popover.machine, { id: "1" })
+  const service = useMachine(popover.machine, { id: useId() })
 
   const api = popover.connect(service, normalizeProps)
 

website/data/snippets/react/popover/usage.mdx

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import { useId } from "react"
 import * as popover from "@zag-js/popover"
 import { useMachine, normalizeProps, Portal } from "@zag-js/react"

website/data/snippets/react/progress/circular.mdx

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as progress from "@zag-js/progress"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"

website/data/snippets/react/progress/usage.mdx

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as progress from "@zag-js/progress"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"

website/data/snippets/react/qr-code/usage.mdx

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as qrCode from "@zag-js/qr-code"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"

website/data/snippets/react/radio-group/usage.mdx

@@ -1,6 +1,7 @@
-```jsx
+```tsx
 import * as radio from "@zag-js/radio-group"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 const items = [
   { id: "apple", label: "Apples" },
@@ -10,7 +11,7 @@ const items = [
 ]
 
 function Radio() {
-  const service = useMachine(radio.machine, { id: "1" })
+  const service = useMachine(radio.machine, { id: useId() })
 
   const api = radio.connect(service, normalizeProps)
 

website/data/snippets/react/range-slider/usage.mdx

@@ -1,10 +1,11 @@
-```jsx
+```tsx
 import * as slider from "@zag-js/slider"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export function RangeSlider() {
   const service = useMachine(slider.machine, {
-    id: "1",
+    id: useId(),
     name: "quantity",
     defaultValue: [10, 60],
   })

website/data/snippets/react/rating-group/usage.mdx

@@ -1,10 +1,11 @@
-```jsx
+```tsx
 import * as rating from "@zag-js/rating-group"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 import { HalfStar, Star } from "./icons"
 
 function Rating() {
-  const service = useMachine(rating.machine, { id: "1" })
+  const service = useMachine(rating.machine, { id: useId() })
 
   const api = rating.connect(service, normalizeProps)
 

website/data/snippets/react/scroll-area/usage.mdx

@@ -1,4 +1,4 @@
-```jsx
+```tsx
 import * as scrollArea from "@zag-js/scroll-area"
 import { useMachine, normalizeProps } from "@zag-js/react"
 import { useId } from "react"