docs: update playground

website/components/machines/accordion.tsx

@@ -20,18 +20,11 @@ const items = [
   },
 ]
 
-type AccordionProps = {
-  controls: {
-    collapsible: boolean
-    multiple: boolean
-  }
-}
-
-export function Accordion(props: AccordionProps) {
+export function Accordion(props: Omit<accordion.Props, "id">) {
   const service = useMachine(accordion.machine, {
     id: useId(),
     defaultValue: ["Aircraft"],
-    ...props.controls,
+    ...props,
   })
 
   const api = accordion.connect(service, normalizeProps)

website/components/machines/angle-slider.tsx

@@ -2,10 +2,10 @@ import * as angleSlider from "@zag-js/angle-slider"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 
-export function AngleSlider(props: any) {
+export function AngleSlider(props: Omit<angleSlider.Props, "id">) {
   const service = useMachine(angleSlider.machine, {
     id: useId(),
-    ...props.controls,
+    ...props,
   })
 
   const api = angleSlider.connect(service, normalizeProps)

website/components/machines/avatar.tsx

@@ -2,12 +2,14 @@ import * as avatar from "@zag-js/avatar"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 
-export function Avatar(props: { controls: { src: string; name: string } }) {
-  const { src, name } = props.controls
+export function Avatar(
+  props: Omit<avatar.Props, "id"> & { src: string; name: string },
+) {
+  const { src, name } = props
 
   const service = useMachine(avatar.machine, {
     id: useId(),
-    ...props.controls,
+    ...props,
   })
 
   const api = avatar.connect(service, normalizeProps)

website/components/machines/carousel.tsx

@@ -11,11 +11,11 @@ const items = [
   "https://tinyurl.com/yp4rfum7",
 ]
 
-export function Carousel(props: any) {
+export function Carousel(props: Omit<carousel.Props, "id" | "slideCount">) {
   const service = useMachine(carousel.machine, {
     id: useId(),
     slideCount: items.length,
-    ...props.controls,
+    ...props,
   })
 
   const api = carousel.connect(service, normalizeProps)

website/components/machines/checkbox.tsx

@@ -2,26 +2,21 @@ import * as checkbox from "@zag-js/checkbox"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId, useState } from "react"
 
-type CheckboxProps = {
-  controls: {
-    disabled: boolean
-    indeterminate: boolean
-  }
-}
-
-export function Checkbox(props: CheckboxProps) {
-  const { disabled, indeterminate } = props.controls
+export function Checkbox(
+  props: Omit<checkbox.Props, "id"> & { indeterminate: boolean },
+) {
+  const { indeterminate } = props
   const [checked, setChecked] = useState<boolean | "indeterminate">(
     indeterminate ? "indeterminate" : false,
   )
 
   const service = useMachine(checkbox.machine, {
     id: useId(),
-    disabled,
     checked: indeterminate ? "indeterminate" : checked,
     onCheckedChange(details) {
       setChecked(details.checked)
     },
+    ...props,
   })
 
   const api = checkbox.connect(service, normalizeProps)

website/components/machines/clipboard.tsx

@@ -3,17 +3,10 @@ import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 import { HiCheck, HiOutlineClipboard } from "react-icons/hi"
 
-type Props = {
-  controls: {
-    value: string
-    timeout: number
-  }
-}
-
-export function Clipboard(props: Props) {
+export function Clipboard(props: Omit<clipboard.Props, "id">) {
   const service = useMachine(clipboard.machine, {
     id: useId(),
-    ...props.controls,
+    ...props,
   })
 
   const api = clipboard.connect(service, normalizeProps)

website/components/machines/collapsible.tsx

@@ -2,17 +2,10 @@ import * as collapsible from "@zag-js/collapsible"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 
-type CollapsibleProps = {
-  controls: {
-    disabled: boolean
-    dir: "ltr" | "rtl"
-  }
-}
-
-export function Collapsible(props: CollapsibleProps) {
+export function Collapsible(props: Omit<collapsible.Props, "id">) {
   const service = useMachine(collapsible.machine, {
     id: useId(),
-    ...props.controls,
+    ...props,
   })
 
   const api = collapsible.connect(service, normalizeProps)

website/components/machines/color-picker.tsx

@@ -2,15 +2,6 @@ import * as colorPicker from "@zag-js/color-picker"
 import { Portal, normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 
-type Props = {
-  controls: {
-    disabled: boolean
-    readOnly: boolean
-    closeOnSelect: boolean
-    format: "rgba" | "hsla" | "hsba"
-  }
-}
-
 const presets = ["#f47373", "#697689", "#38a169", "#3182ce"]
 
 const Show = (props: { when: boolean; children: React.ReactNode }) => {
@@ -32,12 +23,11 @@ const EyeDropIcon = () => (
   </svg>
 )
 
-export function ColorPicker(props: Props) {
+export function ColorPicker(props: Omit<colorPicker.Props, "id">) {
   const service = useMachine(colorPicker.machine, {
     id: useId(),
     defaultValue: colorPicker.parse("#38a169").toFormat("hsla"),
-    ...props.controls,
-    format: "hsla",
+    ...props,
   })
 
   const api = colorPicker.connect(service, normalizeProps)

website/components/machines/combobox.tsx

@@ -3,15 +3,6 @@ import { Portal, mergeProps, normalizeProps, useMachine } from "@zag-js/react"
 import { useId, useMemo, useState } from "react"
 import { createFilter } from "@zag-js/i18n-utils"
 
-interface ComboboxProps {
-  controls: {
-    disabled: boolean
-    readOnly: boolean
-    blurOnSelect: boolean
-    loop: boolean
-  }
-}
-
 const comboboxData = [
   { label: "Zambia", code: "ZA" },
   { label: "Benin", code: "BN" },
@@ -58,7 +49,7 @@ const CaretIcon = () => (
   </svg>
 )
 
-export function Combobox(props: ComboboxProps) {
+export function Combobox(props: Omit<combobox.Props, "id">) {
   const [options, setOptions] = useState(comboboxData)
 
   const filter = createFilter({ sensitivity: "base" })
@@ -83,7 +74,7 @@ export function Combobox(props: ComboboxProps) {
       setOptions(filtered.length > 0 ? filtered : comboboxData)
     },
     placeholder: "Type or select country",
-    ...props.controls,
+    ...props,
   })
 
   const api = combobox.connect(service, normalizeProps)

website/components/machines/context-menu.tsx

@@ -9,14 +9,10 @@ const data = [
   { label: "Duplicate", value: "duplicate" },
 ]
 
-type ContextMenuProps = {
-  controls: {}
-}
-
-export function ContextMenu(props: ContextMenuProps) {
+export function ContextMenu(props: Omit<menu.Props, "id">) {
   const service = useMachine(menu.machine, {
     id: useId(),
-    ...props.controls,
+    ...props,
   })
 
   const api = menu.connect(service, normalizeProps)

website/components/machines/date-picker.tsx

@@ -3,12 +3,12 @@ import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 import { BiCalendar, BiChevronLeft, BiChevronRight } from "react-icons/bi"
 
-export function DatePicker(props: any) {
+export function DatePicker(props: Omit<datePicker.Props, "id">) {
   const service = useMachine(datePicker.machine, {
     id: useId(),
     locale: "en-US",
     selectionMode: "single",
-    ...props.controls,
+    ...props,
   })
 
   const api = datePicker.connect(service, normalizeProps)

website/components/machines/dialog.tsx

@@ -3,10 +3,10 @@ import { normalizeProps, useMachine, Portal } from "@zag-js/react"
 import { HiX } from "react-icons/hi"
 import { useId } from "react"
 
-export function Dialog(props: { controls: any }) {
+export function Dialog(props: Omit<dialog.Props, "id">) {
   const service = useMachine(dialog.machine, {
     id: useId(),
-    ...props.controls,
+    ...props,
   })
 
   const api = dialog.connect(service, normalizeProps)

website/components/machines/editable.tsx

@@ -2,10 +2,10 @@ import * as editable from "@zag-js/editable"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 
-export function Editable(props: any) {
+export function Editable(props: Omit<editable.Props, "id">) {
   const service = useMachine(editable.machine, {
     id: useId(),
-    ...props.controls,
+    ...props,
   })
 
   const api = editable.connect(service, normalizeProps)

website/components/machines/file-upload.tsx

@@ -3,10 +3,10 @@ import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 import { HiX } from "react-icons/hi"
 
-export function FileUpload(props: { controls: any }) {
+export function FileUpload(props: Omit<fileUpload.Props, "id">) {
   const service = useMachine(fileUpload.machine, {
     id: useId(),
-    ...props.controls,
+    ...props,
   })
 
   const api = fileUpload.connect(service, normalizeProps)

website/components/machines/hover-card.tsx

@@ -2,17 +2,10 @@ import * as hoverCard from "@zag-js/hover-card"
 import { normalizeProps, useMachine, Portal } from "@zag-js/react"
 import { useId } from "react"
 
-type HoverCardProps = {
-  controls: {
-    openDelay: number
-    closeDelay: number
-  }
-}
-
-export function HoverCard(props: HoverCardProps) {
+export function HoverCard(props: Omit<hoverCard.Props, "id">) {
   const service = useMachine(hoverCard.machine, {
     id: useId(),
-    ...props.controls,
+    ...props,
   })
 
   const api = hoverCard.connect(service, normalizeProps)

website/components/machines/listbox.tsx

@@ -17,7 +17,7 @@ interface Item {
   favorite?: boolean
 }
 
-export function Listbox(props: ListboxProps) {
+export function Listbox(props: Omit<listbox.Props<Item>, "id" | "collection">) {
   const collection = listbox.collection({
     items: people,
     itemToValue: (item) => item.username,
@@ -27,9 +27,9 @@ export function Listbox(props: ListboxProps) {
   })
 
   const service = useMachine(listbox.machine as listbox.Machine<Item>, {
-    collection,
     id: useId(),
-    ...props.controls,
+    collection,
+    ...props,
   })
 
   const api = listbox.connect(service, normalizeProps)

website/components/machines/menu.tsx

@@ -9,14 +9,10 @@ const data = [
   { label: "Duplicate", value: "duplicate" },
 ]
 
-type MenuProps = {
-  controls: {}
-}
-
-export function Menu(props: MenuProps) {
+export function Menu(props: Omit<menu.Props, "id">) {
   const service = useMachine(menu.machine, {
     id: useId(),
-    ...props.controls,
+    ...props,
   })
 
   const api = menu.connect(service, normalizeProps)

website/components/machines/nested-menu.tsx

@@ -15,11 +15,12 @@ const shareMenuData = [
   { label: "WhatsApp", value: "whatsapp" },
 ]
 
-export function NestedMenu() {
+export function NestedMenu(props: Omit<menu.Props, "id">) {
   // Level 1 - File Menu
   const fileMenuService = useMachine(menu.machine, {
     id: "1",
     "aria-label": "File",
+    ...props,
   })
 
   const fileMenu = menu.connect(fileMenuService, normalizeProps)

website/components/machines/number-input.tsx

@@ -3,10 +3,10 @@ import { normalizeProps, useMachine } from "@zag-js/react"
 import { BiChevronDown, BiChevronUp } from "react-icons/bi"
 import { useId } from "react"
 
-export function NumberInput(props: any) {
+export function NumberInput(props: Omit<numberInput.Props, "id">) {
   const service = useMachine(numberInput.machine, {
     id: useId(),
-    ...props.controls,
+    ...props,
   })
 
   const api = numberInput.connect(service, normalizeProps)

website/components/machines/pagination.tsx

@@ -2,18 +2,11 @@ import * as pagination from "@zag-js/pagination"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 
-type PaginationProps = {
-  controls: {
-    pageSize: number
-    siblingCount: number
-  }
-}
-
-export function Pagination(props: PaginationProps) {
+export function Pagination(props: Omit<pagination.Props, "id">) {
   const service = useMachine(pagination.machine, {
     id: useId(),
     count: 1000,
-    ...props.controls,
+    ...props,
   })
 
   const api = pagination.connect(service, normalizeProps)

website/components/machines/pin-input.tsx

@@ -2,10 +2,10 @@ import * as pinInput from "@zag-js/pin-input"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { useId } from "react"
 
-export function PinInput(props: any) {
+export function PinInput(props: Omit<pinInput.Props, "id">) {
   const service = useMachine(pinInput.machine, {
     id: useId(),
-    ...props.controls,
+    ...props,
   })
 
   const api = pinInput.connect(service, normalizeProps)