chore: add more examples

examples/nuxt-ts/pages/collapsible.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import * as collapsible from "@zag-js/collapsible"
+import { collapsibleControls, collapsibleData } from "@zag-js/shared"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+
+const controls = useControls(collapsibleControls)
+
+const [state, send] = useMachine(collapsible.machine({ id: "1" }), {
+  context: controls.context,
+})
+
+const api = computed(() => collapsible.connect(state.value, send, normalizeProps))
+</script>
+
+<template>
+  <main class="collapsible">
+    <div v-bind="api.rootProps">
+      <div>
+        <span>{{ collapsibleData.headline }}</span>
+        <button v-if="api.isOpen" v-bind="api.triggerProps">Collapse</button>
+        <button v-if="!api.isOpen" v-bind="api.triggerProps">Expand</button>
+      </div>
+
+      <div>
+        <span>{{ collapsibleData.visibleItem }}</span>
+      </div>
+
+      <div v-bind="api.contentProps">
+        <div v-for="item in data" :key="item.id">
+          <div>{{ item }}</div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <Toolbar>
+    <StateVisualizer :state="state" />
+    <template #controls>
+      <Controls :config="controls.config" :state="controls.context" />
+    </template>
+  </Toolbar>
+</template>

examples/solid-ts/src/pages/collapsible.tsx

@@ -1,7 +1,7 @@
 import * as collapsible from "@zag-js/collapsible"
-import { normalizeProps, useMachine, mergeProps } from "@zag-js/solid"
-import { createMemo, createUniqueId } from "solid-js"
 import { collapsibleControls, collapsibleData } from "@zag-js/shared"
+import { normalizeProps, useMachine } from "@zag-js/solid"
+import { Index, createMemo, createUniqueId } from "solid-js"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
@@ -18,7 +18,20 @@ export default function Page() {
   return (
     <>
       <main class="collapsible">
-        <div {...api().rootProps}></div>
+        <div {...api().rootProps}>
+          <div>
+            <span>{collapsibleData.headline}</span>
+            <button {...api().triggerProps}>{api().isOpen ? "Collapse" : "Expand"}</button>
+          </div>
+
+          <div>
+            <span>{collapsibleData.visibleItem}</span>
+          </div>
+
+          <div {...api().contentProps}>
+            <Index each={collapsibleData.items}>{(item) => <div>{item()}</div>}</Index>
+          </div>
+        </div>
       </main>
 
       <Toolbar controls={controls.ui}>

examples/vue-ts/src/pages/collapsible.tsx

@@ -1,7 +1,7 @@
 import * as collapsible from "@zag-js/collapsible"
-import { normalizeProps, useMachine, mergeProps } from "@zag-js/vue"
-import { computed, defineComponent, h, Fragment } from "vue"
 import { collapsibleControls, collapsibleData } from "@zag-js/shared"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+import { computed, defineComponent } from "vue"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
@@ -23,7 +23,24 @@ export default defineComponent({
       return (
         <>
           <main class="collapsible">
-            <div {...api.rootProps}></div>
+            <div {...api.rootProps}>
+              <div>
+                <span>{collapsibleData.headline}</span>
+                <button {...api.triggerProps}>{api.isOpen ? "Collapse" : "Expand"}</button>
+              </div>
+
+              <div>
+                <span>{collapsibleData.visibleItem}</span>
+              </div>
+
+              <div {...api.contentProps}>
+                {collapsibleData.items.map((item) => (
+                  <div key={item}>
+                    <span>{item}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
           </main>
 
           <Toolbar controls={controls.ui}>

website/data/snippets/vue-sfc/collapsible/usage.mdx

@@ -13,9 +13,8 @@ const api = computed(() => collapsible.connect(state.value, send, normalizeProps
 
 <template>
   <div ref="ref" v-bind="api.rootProps">
-    <button v-bind="api.triggerProps">
-      {{ state.value === "open" ? "Collapse" : "Expand" }}
-    </button>
+    <button v-if="api.isOpen" v-bind="api.triggerProps">Collapse</button>
+    <button v-if="!api.isOpen" v-bind="api.triggerProps">Expand</button>
     <div v-bind="api.contentProps">
       <div
         v-for="item in data"