diff --git a/examples/alpine-ts/.gitignore b/examples/alpine-ts/.gitignore
new file mode 100644
index 0000000000..d547d8a265
--- /dev/null
+++ b/examples/alpine-ts/.gitignore
@@ -0,0 +1,8 @@
+node_modules
+dist
+.data
+.nitro
+.cache
+.output
+.env
+.env.local
diff --git a/examples/alpine-ts/README.md b/examples/alpine-ts/README.md
new file mode 100644
index 0000000000..fddea78b59
--- /dev/null
+++ b/examples/alpine-ts/README.md
@@ -0,0 +1,19 @@
+# Nitro starter
+
+Create your full-stack apps and deploy it anywhere with this [Vite](https://vite.dev/) + [Nitro](https://v3.nitro.build/) starter.
+
+## Getting started
+
+```bash
+npm install
+npm run dev
+```
+
+## Deploying
+
+```bash
+npm run build
+npm run preview
+```
+
+Then checkout the [Nitro documentation](https://v3.nitro.build/deploy) to learn more about the different deployment presets.
diff --git a/examples/alpine-ts/lib/bindable.ts b/examples/alpine-ts/lib/bindable.ts
new file mode 100644
index 0000000000..9f5c30a34a
--- /dev/null
+++ b/examples/alpine-ts/lib/bindable.ts
@@ -0,0 +1,68 @@
+import type { Bindable, BindableParams } from "@zag-js/core"
+import { isFunction } from "@zag-js/utils"
+import Alpine from "alpinejs"
+
+export function bindable<T>(props: () => BindableParams<T>): Bindable<T> {
+  const initial = props().defaultValue ?? props().value
+  const eq = props().isEqual ?? Object.is
+
+  const v = Alpine.reactive({ value: initial })
+  const controlled = {
+    get value() {
+      return props().value !== undefined
+    },
+  }
+
+  const valueRef = {
+    get value() {
+      return controlled.value ? props().value : v.value
+    },
+  }
+
+  const setFn = (val: T | ((prev: T) => T)) => {
+    const prev = controlled.value ? props().value : v.value
+    const next = isFunction(val) ? val(prev as T) : val
+
+    if (props().debug) {
+      console.log(`[bindable > ${props().debug}] setValue`, { next, prev })
+    }
+
+    if (!controlled.value) v.value = next
+    if (!eq(next, prev)) {
+      props().onChange?.(next, prev)
+    }
+  }
+
+  function get(): T {
+    return (controlled.value ? props().value : v.value) as T
+  }
+
+  return {
+    initial,
+    ref: valueRef,
+    get,
+    set(val: T | ((prev: T) => T)) {
+      setFn(val)
+    },
+    invoke(nextValue: T, prevValue: T) {
+      props().onChange?.(nextValue, prevValue)
+    },
+    hash(value: T) {
+      return props().hash?.(value) ?? String(value)
+    },
+  }
+}
+
+bindable.cleanup = (fn: VoidFunction) => {
+  Alpine.onElRemoved(() => fn())
+}
+
+bindable.ref = <T>(defaultValue: T) => {
+  let value = defaultValue
+  return {
+    get: () => value,
+    set: (next: T) => {
+      value = next
+    },
+  }
+}
diff --git a/examples/alpine-ts/lib/index.ts b/examples/alpine-ts/lib/index.ts
new file mode 100644
index 0000000000..a03d003750
--- /dev/null
+++ b/examples/alpine-ts/lib/index.ts
@@ -0,0 +1 @@
+export { usePlugin } from "./plugin"
diff --git a/examples/alpine-ts/lib/machine.ts b/examples/alpine-ts/lib/machine.ts
new file mode 100644
index 0000000000..842a592769
--- /dev/null
+++ b/examples/alpine-ts/lib/machine.ts
@@ -0,0 +1,298 @@
+import type {
+  ActionsOrFn,
+  BindableContext,
+  ChooseFn,
+  ComputedFn,
+  EffectsOrFn,
+  GuardFn,
+  Machine,
+  MachineSchema,
+  Params,
+  Service,
+} from "@zag-js/core"
+import { createScope, INIT_STATE, MachineStatus } from "@zag-js/core"
+import { compact, ensure, isFunction, isString, toArray, warn } from "@zag-js/utils"
+import { bindable } from "./bindable"
+import { useRefs } from "./refs"
+import { track } from "./track"
+import Alpine from "alpinejs"
+
+export function useMachine<T extends MachineSchema>(
+  machine: Machine<T>,
+  evaluateProps: (callback: (props: Partial<T["props"]>) => void) => void,
+): Service<T> & { init: VoidFunction; destroy: VoidFunction } {
+  let initialProps = {} as T["props"]
+  evaluateProps((props) => {
+    initialProps = props
+  })
+  // TODO: cache and update scope
+  const { id, ids, getRootNode } = initialProps as any
+  const scope = createScope({ id, ids, getRootNode })
+
+  const debug = (...args: any[]) => {
+    if (machine.debug) console.log(...args)
+  }
+
+  const props = Alpine.reactive({
+    value: machine.props?.({ props: compact(initialProps), scope }) ?? initialProps,
+  })
+  Alpine.effect(() => {
+    let p = {}
+    evaluateProps((value) => (p = value))
+    props.value = machine.props?.({ props: compact(p), scope }) ?? (p as any)
+  })
+  const prop = useProp(props)
+
+  const context: any = machine.context?.({
+    prop,
+    bindable,
+    scope,
+    flush,
+    getContext() {
+      return ctx
+    },
+    getComputed() {
+      return computed
+    },
+    getRefs() {
+      return refs
+    },
+    getEvent() {
+      return getEvent()
+    },
+  })
+
+  const ctx: BindableContext<T> = {
+    get(key) {
+      return context[key]?.get()
+    },
+    set(key, value) {
+      context[key]?.set(value)
+    },
+    initial(key) {
+      return context[key]?.initial
+    },
+    hash(key) {
+      const current = context[key]?.get()
+      return context[key]?.hash(current)
+    },
+  }
+
+  let effects = new Map<string, VoidFunction>()
+  let transitionRef: any = null
+
+  let previousEventRef: { current: any } = { current: null }
+  let eventRef: { current: any } = { current: { type: "" } }
+
+  const getEvent = () => ({
+    ...eventRef.current,
+    current() {
+      return eventRef.current
+    },
+    previous() {
+      return previousEventRef.current
+    },
+  })
+
+  const getState = () => ({
+    ...state,
+    matches(...values: T["state"][]) {
+      const currentState = state.get()
+      return values.includes(currentState)
+    },
+    hasTag(tag: T["tag"]) {
+      const currentState = state.get()
+      return !!machine.states[currentState]?.tags?.includes(tag)
+    },
+  })
+
+  const refs = useRefs(machine.refs?.({ prop, context: ctx }) ?? {})
+
+  const getParams = (): Params<T> => ({
+    state: getState(),
+    context: ctx,
+    event: getEvent(),
+    prop,
+    send,
+    action,
+    guard,
+    track,
+    refs,
+    computed,
+    flush,
+    scope,
+    choose,
+  })
+
+  const action = (keys: ActionsOrFn<T> | undefined) => {
+    const strs = isFunction(keys) ? keys(getParams()) : keys
+    if (!strs) return
+    const fns = strs.map((s) => {
+      const fn = machine.implementations?.actions?.[s]
+      if (!fn) warn(`[zag-js] No implementation found for action "${JSON.stringify(s)}"`)
+      return fn
+    })
+    for (const fn of fns) {
+      fn?.(getParams())
+    }
+  }
+  const guard = (str: T["guard"] | GuardFn<T>) => {
+    if (isFunction(str)) return str(getParams())
+    return machine.implementations?.guards?.[str](getParams())
+  }
+
+  const effect = (keys: EffectsOrFn<T> | undefined) => {
+    const strs = isFunction(keys) ? keys(getParams()) : keys
+    if (!strs) return
+    const fns = strs.map((s) => {
+      const fn = machine.implementations?.effects?.[s]
+      if (!fn) warn(`[zag-js] No implementation found for effect "${JSON.stringify(s)}"`)
+      return fn
+    })
+    const cleanups: VoidFunction[] = []
+    for (const fn of fns) {
+      const cleanup = fn?.(getParams())
+      if (cleanup) cleanups.push(cleanup)
+    }
+    return () => cleanups.forEach((fn) => fn?.())
+  }
+
+  const choose: ChooseFn<T> = (transitions) => {
+    return toArray(transitions).find((t) => {
+      let result = !t.guard
+      if (isString(t.guard)) result = !!guard(t.guard)
+      else if (isFunction(t.guard)) result = t.guard(getParams())
+      return result
+    })
+  }
+
+  const computed: ComputedFn<T> = (key) => {
+    ensure(machine.computed, () => `[zag-js] No computed object found on machine`)
+    const fn = machine.computed[key]
+    return fn({
+      context: ctx,
+      event: getEvent(),
+      prop,
+      refs,
+      scope,
+      computed: computed as any,
+    })
+  }
+
+  const state = bindable(() => ({
+    defaultValue: machine.initialState({ prop }),
+    onChange(nextState, prevState) {
+      // compute effects: exit -> transition -> enter
+
+      queueMicrotask(() => {
+        // exit effects
+        if (prevState) {
+          const exitEffects = effects.get(prevState)
+          exitEffects?.()
+          effects.delete(prevState)
+        }
+
+        // exit actions
+        if (prevState) {
+          action(machine.states[prevState]?.exit)
+        }
+
+        // transition actions
+        action(transitionRef?.actions)
+
+        // enter effect
+        const cleanup = effect(machine.states[nextState]?.effects)
+        if (cleanup) effects.set(nextState as string, cleanup)
+
+        // root entry actions
+        if (prevState === INIT_STATE) {
+          action(machine.entry)
+          const cleanup = effect(machine.effects)
+          if (cleanup) effects.set(INIT_STATE, cleanup)
+        }
+
+        // enter actions
+        action(machine.states[nextState]?.entry)
+      })
+    },
+  }))
+
+  let status = MachineStatus.NotStarted
+
+  const init = () => {
+    const started = status === MachineStatus.Started
+    status = MachineStatus.Started
+    debug(started ? "rehydrating..." : "initializing...")
+    state.invoke(state.initial!, INIT_STATE)
+  }
+
+  const destroy = () => {
+    debug("unmounting...")
+    status = MachineStatus.Stopped
+
+    effects.forEach((fn) => fn?.())
+    effects = new Map()
+    transitionRef.current = null
+
+    action(machine.exit)
+  }
+
+  const send = (event: any) => {
+    if (status !== MachineStatus.Started) return
+
+    previousEventRef.current = eventRef.current
+    eventRef.current = event
+
+    let currentState = state.get()
+
+    // @ts-ignore
+    const transitions = machine.states[currentState].on?.[event.type] ?? machine.on?.[event.type]
+
+    const transition = choose(transitions)
+    if (!transition) return
+
+    // save current transition
+    transitionRef = transition
+    const target = transition.target ?? currentState
+
+    debug("transition", event.type, transition.target || currentState, `(${transition.actions})`)
+
+    const changed = target !== currentState
+    if (changed) {
+      // state change is high priority
+      state.set(target)
+    } else if (transition.reenter && !changed) {
+      // reenter will re-invoke the current state
+      state.invoke(currentState, currentState)
+    } else {
+      // call transition actions
+      action(transition.actions)
+    }
+  }
+
+  machine.watch?.(getParams())
+
+  return {
+    state: getState(),
+    send,
+    context: ctx,
+    prop,
+    scope,
+    refs,
+    computed,
+    event: getEvent(),
+    getStatus: () => status,
+    init,
+    destroy,
+  }
+}
+
+function useProp<T>(ref: { value: T }) {
+  return function get<K extends keyof T>(key: K): T[K] {
+    return ref.value[key]
+  }
+}
+
+function flush(fn: VoidFunction) {
+  queueMicrotask(() => fn())
+}
diff --git a/examples/alpine-ts/lib/normalize-props.ts b/examples/alpine-ts/lib/normalize-props.ts
new file mode 100644
index 0000000000..5c76b1adfe
--- /dev/null
+++ b/examples/alpine-ts/lib/normalize-props.ts
@@ -0,0 +1,29 @@
+import { createNormalizer } from "@zag-js/types"
+
+const propMap: Record<string, string> = {
+  htmlFor: "for",
+  className: "class",
+  onDoubleClick: "onDblclick",
+  onChange: "onInput",
+  onFocus: "onFocusin",
+  onBlur: "onFocusout",
+  defaultValue: "value",
+  defaultChecked: "checked",
+}
+
+export const normalizeProps = createNormalizer((props) => {
+  const normalized: Record<string, () => any> = {}
+  for (const key in props) {
+    const prop = key in propMap ? propMap[key] : key
+    const value = props[key]
+
+    if (prop === "children") {
+      normalized["x-html"] = () => value
+    } else if (prop.startsWith("on")) {
+      normalized["@" + prop.substring(2).toLowerCase()] = value
+    } else {
+      normalized[":" + prop.toLowerCase()] = () => value
+    }
+  }
+  return normalized
+})
diff --git a/examples/alpine-ts/lib/plugin.ts b/examples/alpine-ts/lib/plugin.ts
new file mode 100644
index 0000000000..08d0d96238
--- /dev/null
+++ b/examples/alpine-ts/lib/plugin.ts
@@ -0,0 +1,108 @@
+import type { Machine, MachineSchema, Service } from "@zag-js/core"
+import type { NormalizeProps, PropTypes } from "@zag-js/types"
+import type { Alpine } from "alpinejs"
+import { useMachine } from "./machine"
+import { normalizeProps } from "./normalize-props"
+
+export function usePlugin<T extends MachineSchema>(
+  name: string,
+  component: {
+    machine: Machine<T>
+    connect: (service: Service<T>, normalizeProps: NormalizeProps<PropTypes>) => any
+    collection?: (options: any) => any
+    gridCollection?: (options: any) => any
+  },
+) {
+  const _x_snake_case = "_x_" + name.replaceAll("-", "_")
+
+  return function (Alpine: Alpine) {
+    Alpine.directive(name, (el, { expression, value, modifiers }, { effect, evaluateLater }) => {
+      const _modifier = modifiers.at(0) ? "_" + modifiers.at(0) : ""
+      if (!value) {
+        const evaluateProps = evaluateLater(expression) as any
+        const service = useMachine(component.machine, evaluateProps)
+        Alpine.bind(el, {
+          "x-data"() {
+            return {
+              [_x_snake_case + _modifier + "_service"]: service, // dev only, for state visualization
+              [_x_snake_case + _modifier]: component.connect(service, normalizeProps),
+              init() {
+                queueMicrotask(() => {
+                  effect(() => {
+                    this[_x_snake_case + _modifier] = component.connect(service, normalizeProps)
+                  })
+                })
+                service.init()
+              },
+              destroy() {
+                service.destroy()
+              },
+            }
+          },
+        })
+      } else if (value === "collection") {
+        const evaluateCollection = evaluateLater(expression)
+        Alpine.bind(el, {
+          "x-data"() {
+            return {
+              get collection() {
+                let options: any = {}
+                evaluateCollection((value) => (options = value))
+                return component.collection?.(options)
+              },
+            }
+          },
+        })
+      } else if (value === "grid-collection") {
+        const evaluateCollection = evaluateLater(expression)
+        Alpine.bind(el, {
+          "x-data"() {
+            return {
+              get collection() {
+                let options: any = {}
+                evaluateCollection((value) => (options = value))
+                return component.gridCollection?.(options)
+              },
+            }
+          },
+        })
+      } else {
+        const getProps = `get${value
+          .split("-")
+          .map((v) => v.at(0)?.toUpperCase() + v.substring(1).toLowerCase())
+          .join("")}Props`
+        const evaluateProps = expression ? evaluateLater(expression) : null
+
+        let props = {}
+        evaluateProps && evaluateProps((value: any) => (props = value))
+        const ref = Alpine.reactive({ ...(Alpine.$data(el) as any)[_x_snake_case + _modifier][getProps](props) })
+
+        const binding: Record<string, () => any> = {}
+        for (const prop in ref) {
+          binding[prop] = (...args: any[]) => ref[prop]?.(...args)
+        }
+        Alpine.bind(el, binding)
+
+        effect(() => {
+          let props = {}
+          evaluateProps && evaluateProps((value: any) => (props = value))
+          const next = (Alpine.$data(el) as any)[_x_snake_case + _modifier][getProps](props)
+          for (const prop in next) {
+            if (prop.startsWith("@") || next[prop]() !== ref[prop]()) {
+              ref[prop] = next[prop]
+            }
+          }
+        })
+      }
+    }).before("bind")
+    Alpine.magic(
+      name
+        .split("-")
+        .map((str, i) => (i === 0 ? str : str.at(0)?.toUpperCase() + str.substring(1).toLowerCase()))
+        .join(""),
+      (el) => {
+        return (modifier?: string) => (Alpine.$data(el) as any)[_x_snake_case + (modifier ? "_" + modifier : "")]
+      },
+    )
+  }
+}
diff --git a/examples/alpine-ts/lib/refs.ts b/examples/alpine-ts/lib/refs.ts
new file mode 100644
index 0000000000..07ee8cc2fa
--- /dev/null
+++ b/examples/alpine-ts/lib/refs.ts
@@ -0,0 +1,11 @@
+export function useRefs<T>(refs: T) {
+  const ref = { current: refs }
+  return {
+    get<K extends keyof T>(key: K): T[K] {
+      return ref.current[key]
+    },
+    set<K extends keyof T>(key: K, value: T[K]) {
+      ref.current[key] = value
+    },
+  }
+}
diff --git a/examples/alpine-ts/lib/track.ts b/examples/alpine-ts/lib/track.ts
new file mode 100644
index 0000000000..c0e3253a70
--- /dev/null
+++ b/examples/alpine-ts/lib/track.ts
@@ -0,0 +1,21 @@
+import { isEqual } from "@zag-js/utils"
+import Alpine from "alpinejs"
+
+export const track = (deps: any[], effect: VoidFunction) => {
+  // @ts-ignore @types/alpinejs is outdated
+  Alpine.watch(
+    () => [...deps.map((d) => d())],
+    (current: any[], previous: any[]) => {
+      let changed = false
+      for (let i = 0; i < current.length; i++) {
+        if (!isEqual(previous[i], current[i])) {
+          changed = true
+          break
+        }
+      }
+      if (changed) {
+        effect()
+      }
+    },
+  )
+}
diff --git a/examples/alpine-ts/nitro.config.ts b/examples/alpine-ts/nitro.config.ts
new file mode 100644
index 0000000000..c3d0bb9980
--- /dev/null
+++ b/examples/alpine-ts/nitro.config.ts
@@ -0,0 +1,5 @@
+import { defineConfig } from "nitro"
+
+export default defineConfig({
+  serverDir: "./server",
+})
diff --git a/examples/alpine-ts/package.json b/examples/alpine-ts/package.json
new file mode 100644
index 0000000000..4355004d6b
--- /dev/null
+++ b/examples/alpine-ts/package.json
@@ -0,0 +1,68 @@
+{
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite dev",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/alpinejs": "^3.13.11",
+    "@types/form-serialize": "0.7.4",
+    "nitro": "latest",
+    "vite": "npm:rolldown-vite"
+  },
+  "dependencies": {
+    "@zag-js/accordion": "workspace:*",
+    "@zag-js/anatomy-icons": "workspace:*",
+    "@zag-js/angle-slider": "workspace:*",
+    "@zag-js/async-list": "workspace:*",
+    "@zag-js/auto-resize": "workspace:*",
+    "@zag-js/avatar": "workspace:*",
+    "@zag-js/bottom-sheet": "workspace:*",
+    "@zag-js/carousel": "workspace:*",
+    "@zag-js/checkbox": "workspace:*",
+    "@zag-js/clipboard": "workspace:*",
+    "@zag-js/color-picker": "workspace:*",
+    "@zag-js/combobox": "workspace:*",
+    "@zag-js/core": "workspace:*",
+    "@zag-js/dialog": "workspace:*",
+    "@zag-js/dom-query": "workspace:*",
+    "@zag-js/editable": "workspace:*",
+    "@zag-js/file-upload": "workspace:*",
+    "@zag-js/floating-panel": "workspace:*",
+    "@zag-js/hover-card": "workspace:*",
+    "@zag-js/listbox": "workspace:*",
+    "@zag-js/marquee": "workspace:*",
+    "@zag-js/menu": "workspace:*",
+    "@zag-js/number-input": "workspace:*",
+    "@zag-js/pagination": "workspace:*",
+    "@zag-js/password-input": "workspace:*",
+    "@zag-js/pin-input": "workspace:*",
+    "@zag-js/popper": "workspace:*",
+    "@zag-js/presence": "workspace:*",
+    "@zag-js/progress": "workspace:*",
+    "@zag-js/qr-code": "workspace:*",
+    "@zag-js/radio-group": "workspace:*",
+    "@zag-js/rating-group": "workspace:*",
+    "@zag-js/scroll-area": "workspace:*",
+    "@zag-js/select": "workspace:*",
+    "@zag-js/shared": "workspace:*",
+    "@zag-js/slider": "workspace:*",
+    "@zag-js/steps": "workspace:*",
+    "@zag-js/stringify-state": "workspace:*",
+    "@zag-js/switch": "workspace:*",
+    "@zag-js/tabs": "workspace:*",
+    "@zag-js/tags-input": "workspace:*",
+    "@zag-js/timer": "workspace:*",
+    "@zag-js/toggle": "workspace:*",
+    "@zag-js/toggle-group": "workspace:*",
+    "@zag-js/tooltip": "workspace:*",
+    "@zag-js/types": "workspace:*",
+    "@zag-js/utils": "workspace:*",
+    "alpinejs": "^3.15.2",
+    "form-serialize": "0.7.2",
+    "lucide-static": "^0.554.0",
+    "match-sorter": "8.1.0",
+    "mono-jsx": "0.8.0-beta.4"
+  }
+}
diff --git a/examples/alpine-ts/public/nitro.svg b/examples/alpine-ts/public/nitro.svg
new file mode 100644
index 0000000000..cdeec33d26
--- /dev/null
+++ b/examples/alpine-ts/public/nitro.svg
@@ -0,0 +1,43 @@
+
+<!-- nitro logo -->
+<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_115_108)">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M35.2166 7.02016C28.0478 -1.38317 15.4241 -2.38397 7.02077 4.78481C-1.38256 11.9536 -2.38336 24.5773 4.78542 32.9806C11.9542 41.3839 24.5779 42.3847 32.9812 35.216C41.3846 28.0472 42.3854 15.4235 35.2166 7.02016ZM25.2525 17.5175C26.0233 17.5175 26.5155 18.3527 26.1287 19.0194L26.0175 19.2111L18.4696 31.6294C18.3293 31.8602 18.0788 32.001 17.8088 32.001H17.0883C16.5946 32.001 16.2336 31.5349 16.3573 31.0569L18.4054 23.1384C18.5691 22.5053 18.0912 21.888 17.4373 21.888H14.2914C13.6375 21.888 13.1596 21.2708 13.3232 20.6377L16.4137 8.68289C16.5261 8.28056 16.8904 7.99734 17.3081 8.00208C17.3587 8.00266 17.4046 8.0035 17.4427 8.0047L20.6109 8.00465C21.217 8.00436 21.684 8.53896 21.6023 9.13949L21.5828 9.28246L20.3746 16.349C20.2702 16.9598 20.7406 17.5175 21.3603 17.5175H25.2525Z"
+      fill="url(#paint0_diamond_115_108)" />
+    <mask id="mask0_115_108" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"
+      width="40" height="41">
+      <circle cx="20" cy="20.001" r="20" fill="url(#paint1_diamond_115_108)" />
+    </mask>
+    <g mask="url(#mask0_115_108)">
+      <g filter="url(#filter0_f_115_108)">
+        <path
+          d="M1.11145 13.4267C0.0703174 16.4179 -0.245523 19.6136 0.189923 22.7507C0.62537 25.8879 1.79965 28.8768 3.61611 31.4713C5.43256 34.0659 7.83925 36.192 10.6381 37.6746C13.4369 39.1572 16.5478 39.9538 19.7147 39.999C22.8816 40.0442 26.0139 39.3366 28.8539 37.9345C31.6939 36.5324 34.1602 34.4758 36.05 31.9341C37.9397 29.3924 39.1988 26.4383 39.7236 23.3148C40.2483 20.1914 40.0238 16.9879 39.0684 13.9682L33.2532 15.808C33.9172 17.9068 34.0732 20.1333 33.7085 22.3042C33.3438 24.4751 32.4687 26.5283 31.1552 28.2949C29.8418 30.0615 28.1276 31.4908 26.1537 32.4653C24.1799 33.4399 22.0028 33.9316 19.8017 33.9002C17.6006 33.8688 15.4384 33.3151 13.4932 32.2847C11.5479 31.2543 9.87518 29.7766 8.61269 27.9733C7.35019 26.1699 6.53403 24.0926 6.23138 21.9122C5.92873 19.7317 6.14825 17.5106 6.87187 15.4316L1.11145 13.4267Z"
+          fill="white" />
+      </g>
+    </g>
+  </g>
+  <defs>
+    <filter id="filter0_f_115_108" x="-10" y="3.42667" width="60" height="46.5744"
+      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_115_108" />
+    </filter>
+    <radialGradient id="paint0_diamond_115_108" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(4.00069 20.0004) scale(39.0007 397.71)">
+      <stop stop-color="#31B2F3" />
+      <stop offset="0.473958" stop-color="#F27CEC" />
+      <stop offset="1" stop-color="#FD6641" />
+    </radialGradient>
+    <radialGradient id="paint1_diamond_115_108" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(4 20.0011) scale(39 397.703)">
+      <stop stop-color="#F27CEC" />
+      <stop offset="0.484375" stop-color="#31B2F3" />
+      <stop offset="1" stop-color="#7D7573" />
+    </radialGradient>
+    <clipPath id="clip0_115_108">
+      <rect width="146" height="40.001" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/examples/alpine-ts/public/robots.txt b/examples/alpine-ts/public/robots.txt
new file mode 100644
index 0000000000..eb0536286f
--- /dev/null
+++ b/examples/alpine-ts/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/examples/alpine-ts/scripts/accordion.ts b/examples/alpine-ts/scripts/accordion.ts
new file mode 100644
index 0000000000..cdf48aa4d9
--- /dev/null
+++ b/examples/alpine-ts/scripts/accordion.ts
@@ -0,0 +1,6 @@
+import * as accordion from "@zag-js/accordion"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("accordion", accordion))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/angle-slider.ts b/examples/alpine-ts/scripts/angle-slider.ts
new file mode 100644
index 0000000000..e357b14b92
--- /dev/null
+++ b/examples/alpine-ts/scripts/angle-slider.ts
@@ -0,0 +1,6 @@
+import * as angleSlider from "@zag-js/angle-slider"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("angle-slider", angleSlider))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/async-list.ts b/examples/alpine-ts/scripts/async-list.ts
new file mode 100644
index 0000000000..dd79e9f0fd
--- /dev/null
+++ b/examples/alpine-ts/scripts/async-list.ts
@@ -0,0 +1,6 @@
+import * as asyncList from "@zag-js/async-list"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("async-list", asyncList))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/autoresize.ts b/examples/alpine-ts/scripts/autoresize.ts
new file mode 100644
index 0000000000..c13dbe1150
--- /dev/null
+++ b/examples/alpine-ts/scripts/autoresize.ts
@@ -0,0 +1,5 @@
+import { autoresizeTextarea } from "@zag-js/auto-resize"
+import Alpine from "alpinejs"
+
+Alpine.magic("autoresizeTextarea", () => autoresizeTextarea)
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/avatar.ts b/examples/alpine-ts/scripts/avatar.ts
new file mode 100644
index 0000000000..7c02263222
--- /dev/null
+++ b/examples/alpine-ts/scripts/avatar.ts
@@ -0,0 +1,13 @@
+import * as avatar from "@zag-js/avatar"
+import { avatarData } from "@zag-js/shared"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+const images = avatarData.full
+
+Alpine.magic("broken", () => avatarData.broken)
+Alpine.magic("getRandomImage", () => {
+  return () => images[Math.floor(Math.random() * images.length)]
+})
+Alpine.plugin(usePlugin("avatar", avatar))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/carousel.ts b/examples/alpine-ts/scripts/carousel.ts
new file mode 100644
index 0000000000..00818fc293
--- /dev/null
+++ b/examples/alpine-ts/scripts/carousel.ts
@@ -0,0 +1,24 @@
+import * as carousel from "@zag-js/carousel"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+// Sample data with variable width content (content-driven sizing)
+const variableWidthData = [
+  { content: "Short", color: "#ff6b6b", type: "text" },
+  {
+    content: "This is a much longer slide with significantly more content that will naturally take up more space",
+    color: "#4ecdc4",
+    type: "text",
+  },
+  { content: "Hi", color: "#45b7d1", type: "text" },
+  { content: "Medium length slide content here", color: "#96ceb4", type: "text" },
+  { content: "⭐ Star Rating Widget ⭐⭐⭐⭐⭐", color: "#ffeaa7", type: "widget" },
+  { content: "X", color: "#dda0dd", type: "text" },
+  { content: "🔥 Popular Item with Badge 🔥", color: "#98d8c8", type: "badge" },
+  { content: "A", color: "#e74c3c", type: "text" },
+  { content: "📊 Analytics Dashboard Component 📈📉", color: "#9b59b6", type: "component" },
+]
+
+Alpine.magic("variableWidthData", () => variableWidthData)
+Alpine.plugin(usePlugin("carousel", carousel))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/checkbox.ts b/examples/alpine-ts/scripts/checkbox.ts
new file mode 100644
index 0000000000..e04ee6694e
--- /dev/null
+++ b/examples/alpine-ts/scripts/checkbox.ts
@@ -0,0 +1,8 @@
+import * as checkbox from "@zag-js/checkbox"
+import serialize from "form-serialize"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.magic("serialize", () => serialize)
+Alpine.plugin(usePlugin("checkbox", checkbox))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/clipboard.ts b/examples/alpine-ts/scripts/clipboard.ts
new file mode 100644
index 0000000000..2313d70543
--- /dev/null
+++ b/examples/alpine-ts/scripts/clipboard.ts
@@ -0,0 +1,9 @@
+import * as clipboard from "@zag-js/clipboard"
+import { ClipboardCheck, ClipboardCopy } from "lucide-static"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.magic("ClipboardCheck", () => ClipboardCheck)
+Alpine.magic("ClipboardCopy", () => ClipboardCopy)
+Alpine.plugin(usePlugin("clipboard", clipboard))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/color-picker.ts b/examples/alpine-ts/scripts/color-picker.ts
new file mode 100644
index 0000000000..1bea3ab091
--- /dev/null
+++ b/examples/alpine-ts/scripts/color-picker.ts
@@ -0,0 +1,9 @@
+import * as colorPicker from "@zag-js/color-picker"
+import serialize from "form-serialize"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.magic("serialize", () => serialize)
+Alpine.magic("parse", () => colorPicker.parse)
+Alpine.plugin(usePlugin("color-picker", colorPicker))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/combobox.ts b/examples/alpine-ts/scripts/combobox.ts
new file mode 100644
index 0000000000..9487d7bcd2
--- /dev/null
+++ b/examples/alpine-ts/scripts/combobox.ts
@@ -0,0 +1,10 @@
+import * as combobox from "@zag-js/combobox"
+import { comboboxData } from "@zag-js/shared"
+import { matchSorter } from "match-sorter"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.magic("matchSorter", () => matchSorter)
+Alpine.magic("comboboxData", () => comboboxData)
+Alpine.plugin(usePlugin("combobox", combobox))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/dialog.ts b/examples/alpine-ts/scripts/dialog.ts
new file mode 100644
index 0000000000..891b5f1b4c
--- /dev/null
+++ b/examples/alpine-ts/scripts/dialog.ts
@@ -0,0 +1,6 @@
+import * as dialog from "@zag-js/dialog"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("dialog", dialog))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/editable.ts b/examples/alpine-ts/scripts/editable.ts
new file mode 100644
index 0000000000..97cd95b5ca
--- /dev/null
+++ b/examples/alpine-ts/scripts/editable.ts
@@ -0,0 +1,6 @@
+import * as editable from "@zag-js/editable"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("editable", editable))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/file-upload.ts b/examples/alpine-ts/scripts/file-upload.ts
new file mode 100644
index 0000000000..2f993c3380
--- /dev/null
+++ b/examples/alpine-ts/scripts/file-upload.ts
@@ -0,0 +1,6 @@
+import * as fileUpload from "@zag-js/file-upload"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("file-upload", fileUpload))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/floating-panel.ts b/examples/alpine-ts/scripts/floating-panel.ts
new file mode 100644
index 0000000000..701657a2dd
--- /dev/null
+++ b/examples/alpine-ts/scripts/floating-panel.ts
@@ -0,0 +1,6 @@
+import * as floating from "@zag-js/floating-panel"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("floating", floating))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/hover-card.ts b/examples/alpine-ts/scripts/hover-card.ts
new file mode 100644
index 0000000000..565e833b2f
--- /dev/null
+++ b/examples/alpine-ts/scripts/hover-card.ts
@@ -0,0 +1,6 @@
+import * as hoverCard from "@zag-js/hover-card"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("hover-card", hoverCard))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/listbox.ts b/examples/alpine-ts/scripts/listbox.ts
new file mode 100644
index 0000000000..41043bacbb
--- /dev/null
+++ b/examples/alpine-ts/scripts/listbox.ts
@@ -0,0 +1,8 @@
+import * as listbox from "@zag-js/listbox"
+import { selectData } from "@zag-js/shared"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.magic("selectData", () => selectData)
+Alpine.plugin(usePlugin("listbox", listbox))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/marquee.ts b/examples/alpine-ts/scripts/marquee.ts
new file mode 100644
index 0000000000..55f0359bc5
--- /dev/null
+++ b/examples/alpine-ts/scripts/marquee.ts
@@ -0,0 +1,6 @@
+import * as marquee from "@zag-js/marquee"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("marquee", marquee))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/menu.ts b/examples/alpine-ts/scripts/menu.ts
new file mode 100644
index 0000000000..a9e9a8806f
--- /dev/null
+++ b/examples/alpine-ts/scripts/menu.ts
@@ -0,0 +1,45 @@
+import * as menu from "@zag-js/menu"
+import { menuData, menuOptionData } from "@zag-js/shared"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+const [level1, level2, level3] = menuData
+Alpine.magic("level1", () => level1)
+Alpine.magic("level2", () => level2)
+Alpine.magic("level3", () => level3)
+
+Alpine.data("radios", () => ({
+  get radios() {
+    return menuOptionData.order.map((item) => ({
+      type: "radio" as const,
+      name: "order",
+      value: item.value,
+      label: item.label,
+      // @ts-ignore
+      checked: this.$data.order === item.value,
+      onCheckedChange: (checked: boolean) => {
+        // @ts-ignore
+        this.$data.order = checked ? item.value : ""
+      },
+    }))
+  },
+}))
+Alpine.data("checkboxes", () => ({
+  get checkboxes() {
+    return menuOptionData.type.map((item) => ({
+      type: "checkbox" as const,
+      name: "type",
+      value: item.value,
+      label: item.label,
+      // @ts-ignore
+      checked: this.$data.type.includes(item.value),
+      onCheckedChange: (checked: boolean) => {
+        // @ts-ignore
+        this.$data.type = checked ? [...this.$data.type, item.value] : this.$data.type.filter((x) => x !== item.value)
+      },
+    }))
+  },
+}))
+
+Alpine.plugin(usePlugin("menu", menu))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/number-input.ts b/examples/alpine-ts/scripts/number-input.ts
new file mode 100644
index 0000000000..2341e4cf16
--- /dev/null
+++ b/examples/alpine-ts/scripts/number-input.ts
@@ -0,0 +1,6 @@
+import * as numberInput from "@zag-js/number-input"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("number-input", numberInput))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/pagination.ts b/examples/alpine-ts/scripts/pagination.ts
new file mode 100644
index 0000000000..25defe3d17
--- /dev/null
+++ b/examples/alpine-ts/scripts/pagination.ts
@@ -0,0 +1,8 @@
+import * as pagination from "@zag-js/pagination"
+import { paginationData } from "@zag-js/shared"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.magic("paginationData", () => paginationData)
+Alpine.plugin(usePlugin("pagination", pagination))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/password-input.ts b/examples/alpine-ts/scripts/password-input.ts
new file mode 100644
index 0000000000..1bdb1f27f3
--- /dev/null
+++ b/examples/alpine-ts/scripts/password-input.ts
@@ -0,0 +1,9 @@
+import * as passwordInput from "@zag-js/password-input"
+import { Eye, EyeOff } from "lucide-static"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.magic("EyeIcon", () => Eye)
+Alpine.magic("EyeOffIcon", () => EyeOff)
+Alpine.plugin(usePlugin("password-input", passwordInput))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/pin-input.ts b/examples/alpine-ts/scripts/pin-input.ts
new file mode 100644
index 0000000000..c910546487
--- /dev/null
+++ b/examples/alpine-ts/scripts/pin-input.ts
@@ -0,0 +1,8 @@
+import * as pinInput from "@zag-js/pin-input"
+import serialize from "form-serialize"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.magic("serialize", () => serialize)
+Alpine.plugin(usePlugin("pin-input", pinInput))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/popper.ts b/examples/alpine-ts/scripts/popper.ts
new file mode 100644
index 0000000000..eceea2a5fb
--- /dev/null
+++ b/examples/alpine-ts/scripts/popper.ts
@@ -0,0 +1,6 @@
+import { getPlacement, getPlacementStyles } from "@zag-js/popper"
+import Alpine from "alpinejs"
+
+Alpine.magic("getPlacement", () => getPlacement)
+Alpine.magic("getPlacementStyles", () => getPlacementStyles)
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/presence.ts b/examples/alpine-ts/scripts/presence.ts
new file mode 100644
index 0000000000..08857ac2c6
--- /dev/null
+++ b/examples/alpine-ts/scripts/presence.ts
@@ -0,0 +1,6 @@
+import * as presence from "@zag-js/presence"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("presence", presence))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/progress.ts b/examples/alpine-ts/scripts/progress.ts
new file mode 100644
index 0000000000..1a3d19ce95
--- /dev/null
+++ b/examples/alpine-ts/scripts/progress.ts
@@ -0,0 +1,6 @@
+import * as progress from "@zag-js/progress"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("progress", progress))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/qr-code.ts b/examples/alpine-ts/scripts/qr-code.ts
new file mode 100644
index 0000000000..fa05dc74cc
--- /dev/null
+++ b/examples/alpine-ts/scripts/qr-code.ts
@@ -0,0 +1,6 @@
+import * as qrCode from "@zag-js/qr-code"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("qr-code", qrCode))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/radio-group.ts b/examples/alpine-ts/scripts/radio-group.ts
new file mode 100644
index 0000000000..9ccbd44634
--- /dev/null
+++ b/examples/alpine-ts/scripts/radio-group.ts
@@ -0,0 +1,8 @@
+import * as radio from "@zag-js/radio-group"
+import serialize from "form-serialize"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.magic("serialize", () => serialize)
+Alpine.plugin(usePlugin("radio", radio))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/rating-group.ts b/examples/alpine-ts/scripts/rating-group.ts
new file mode 100644
index 0000000000..50fb41862f
--- /dev/null
+++ b/examples/alpine-ts/scripts/rating-group.ts
@@ -0,0 +1,6 @@
+import * as rating from "@zag-js/rating-group"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("rating", rating))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/scroll-area.ts b/examples/alpine-ts/scripts/scroll-area.ts
new file mode 100644
index 0000000000..80f9ed1577
--- /dev/null
+++ b/examples/alpine-ts/scripts/scroll-area.ts
@@ -0,0 +1,6 @@
+import * as scrollArea from "@zag-js/scroll-area"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("scroll-area", scrollArea))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/select.ts b/examples/alpine-ts/scripts/select.ts
new file mode 100644
index 0000000000..a8ee12ca41
--- /dev/null
+++ b/examples/alpine-ts/scripts/select.ts
@@ -0,0 +1,10 @@
+import * as select from "@zag-js/select"
+import { selectData } from "@zag-js/shared"
+import serialize from "form-serialize"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.magic("serialize", () => serialize)
+Alpine.magic("selectData", () => selectData)
+Alpine.plugin(usePlugin("select", select))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/slider.ts b/examples/alpine-ts/scripts/slider.ts
new file mode 100644
index 0000000000..fc79bc3a22
--- /dev/null
+++ b/examples/alpine-ts/scripts/slider.ts
@@ -0,0 +1,8 @@
+import * as slider from "@zag-js/slider"
+import serialize from "form-serialize"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.magic("serialize", () => serialize)
+Alpine.plugin(usePlugin("slider", slider))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/state-visualizer.ts b/examples/alpine-ts/scripts/state-visualizer.ts
new file mode 100644
index 0000000000..5b0322212d
--- /dev/null
+++ b/examples/alpine-ts/scripts/state-visualizer.ts
@@ -0,0 +1,17 @@
+import { highlightState } from "@zag-js/stringify-state"
+import Alpine from "alpinejs"
+
+Alpine.magic("highlightState", (el) => {
+  return ({ label, omit, context }: { label: string; omit?: string[]; context?: string[] }) => {
+    const { [`_x_${label.replaceAll("-", "_")}_service`]: service } = Alpine.$data(el) as any
+    return highlightState(
+      {
+        state: service.state.get(),
+        event: service.event.current(),
+        previouseEvent: service.event.previous(),
+        context: context ? Object.fromEntries(context.map((key) => [key, service.context.get(key)])) : undefined,
+      },
+      omit,
+    )
+  }
+})
diff --git a/examples/alpine-ts/scripts/steps.ts b/examples/alpine-ts/scripts/steps.ts
new file mode 100644
index 0000000000..8014e78221
--- /dev/null
+++ b/examples/alpine-ts/scripts/steps.ts
@@ -0,0 +1,6 @@
+import * as steps from "@zag-js/steps"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("steps", steps))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/style.ts b/examples/alpine-ts/scripts/style.ts
new file mode 100644
index 0000000000..3b860d0815
--- /dev/null
+++ b/examples/alpine-ts/scripts/style.ts
@@ -0,0 +1 @@
+import "@zag-js/shared/src/style.css"
diff --git a/examples/alpine-ts/scripts/switch.ts b/examples/alpine-ts/scripts/switch.ts
new file mode 100644
index 0000000000..c8b5a867c6
--- /dev/null
+++ b/examples/alpine-ts/scripts/switch.ts
@@ -0,0 +1,6 @@
+import * as zagSwitch from "@zag-js/switch"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("switch", zagSwitch))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/tabs.ts b/examples/alpine-ts/scripts/tabs.ts
new file mode 100644
index 0000000000..164d702cc4
--- /dev/null
+++ b/examples/alpine-ts/scripts/tabs.ts
@@ -0,0 +1,6 @@
+import * as tabs from "@zag-js/tabs"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("tabs", tabs))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/tags-input.ts b/examples/alpine-ts/scripts/tags-input.ts
new file mode 100644
index 0000000000..fd70074cd7
--- /dev/null
+++ b/examples/alpine-ts/scripts/tags-input.ts
@@ -0,0 +1,9 @@
+import * as tagsInput from "@zag-js/tags-input"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.magic("toDashCase", () => {
+  return (str: string) => str.replace(/\s+/g, "-").toLowerCase()
+})
+Alpine.plugin(usePlugin("tags-input", tagsInput))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/timer.ts b/examples/alpine-ts/scripts/timer.ts
new file mode 100644
index 0000000000..c5c37b3f62
--- /dev/null
+++ b/examples/alpine-ts/scripts/timer.ts
@@ -0,0 +1,7 @@
+import * as timer from "@zag-js/timer"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.magic("parse", () => timer.parse)
+Alpine.plugin(usePlugin("timer", timer))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/toggle-group.ts b/examples/alpine-ts/scripts/toggle-group.ts
new file mode 100644
index 0000000000..1c843b8734
--- /dev/null
+++ b/examples/alpine-ts/scripts/toggle-group.ts
@@ -0,0 +1,6 @@
+import * as toggle from "@zag-js/toggle-group"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("toggle", toggle))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/toggle.ts b/examples/alpine-ts/scripts/toggle.ts
new file mode 100644
index 0000000000..0290f847f6
--- /dev/null
+++ b/examples/alpine-ts/scripts/toggle.ts
@@ -0,0 +1,6 @@
+import * as toggle from "@zag-js/toggle"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("toggle", toggle))
+Alpine.start()
diff --git a/examples/alpine-ts/scripts/toolbar.ts b/examples/alpine-ts/scripts/toolbar.ts
new file mode 100644
index 0000000000..124f6a705b
--- /dev/null
+++ b/examples/alpine-ts/scripts/toolbar.ts
@@ -0,0 +1,6 @@
+import { dataAttr } from "@zag-js/dom-query"
+import Alpine from "alpinejs"
+
+Alpine.magic("dataAttr", () => {
+  return (guard: boolean | undefined) => dataAttr(guard)
+})
diff --git a/examples/alpine-ts/scripts/tooltip.ts b/examples/alpine-ts/scripts/tooltip.ts
new file mode 100644
index 0000000000..54ab6c0183
--- /dev/null
+++ b/examples/alpine-ts/scripts/tooltip.ts
@@ -0,0 +1,6 @@
+import * as tooltip from "@zag-js/tooltip"
+import Alpine from "alpinejs"
+import { usePlugin } from "~/lib"
+
+Alpine.plugin(usePlugin("tooltip", tooltip))
+Alpine.start()
diff --git a/examples/alpine-ts/server/components/controls.tsx b/examples/alpine-ts/server/components/controls.tsx
new file mode 100644
index 0000000000..09232d370c
--- /dev/null
+++ b/examples/alpine-ts/server/components/controls.tsx
@@ -0,0 +1,58 @@
+import { deepGet, type ControlRecord, type ControlValue } from "@zag-js/shared"
+
+interface ControlsProps<T extends ControlRecord> {
+  config: T
+  state: ControlValue<T>
+}
+
+export function Controls<T extends ControlRecord>({ config, state }: ControlsProps<T>) {
+  return (
+    <div class="controls-container">
+      {Object.keys(config).map((key) => {
+        const { type, label = key, options, placeholder, min, max } = (config[key] ?? {}) as any
+        const value = deepGet(state, key)
+        switch (type) {
+          case "boolean":
+            return (
+              <div class="checkbox">
+                <input data-testid={key} id={label} type="checkbox" checked={value} x-model={key} />
+                <label for={label}>{label}</label>
+              </div>
+            )
+          case "string":
+            return (
+              <div class="text">
+                <label style={{ marginRight: "10px" }}>{label}</label>
+                <input data-testid={key} type="text" placeholder={placeholder} value={value} x-model={key} />
+              </div>
+            )
+          case "select":
+            return (
+              <div class="text">
+                <label for={label} style={{ marginRight: "10px" }}>
+                  {label}
+                </label>
+                <select data-testid={key} id={label} value={value} x-model={key}>
+                  <option>-----</option>
+                  {options.map((option: string) => (
+                    <option value={option}>{option}</option>
+                  ))}
+                </select>
+              </div>
+            )
+          case "number":
+            return (
+              <div class="text">
+                <label for={label} style={{ marginRight: "10px" }}>
+                  {label}
+                </label>
+                <input data-testid={key} id={label} type="number" min={min} max={max} value={value} x-model={key} />
+              </div>
+            )
+          default:
+            return null
+        }
+      })}
+    </div>
+  )
+}
diff --git a/examples/alpine-ts/server/components/head.tsx b/examples/alpine-ts/server/components/head.tsx
new file mode 100644
index 0000000000..9bb7b20397
--- /dev/null
+++ b/examples/alpine-ts/server/components/head.tsx
@@ -0,0 +1,14 @@
+export function Head() {
+  return (
+    <head>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width,initial-scale=1" />
+      <link rel="icon" type="image/svg+xml" href="/nitro.svg" />
+      <script type="module" src="/scripts/toolbar.ts"></script>
+      <script type="module" src="/scripts/state-visualizer.ts"></script>
+      <script type="module" src="/scripts/style.ts"></script>
+      <title>Nitro + Vite</title>
+      <slot />
+    </head>
+  )
+}
diff --git a/examples/alpine-ts/server/components/nav.tsx b/examples/alpine-ts/server/components/nav.tsx
new file mode 100644
index 0000000000..9567109f0e
--- /dev/null
+++ b/examples/alpine-ts/server/components/nav.tsx
@@ -0,0 +1,20 @@
+import { dataAttr } from "@zag-js/dom-query"
+import { routesData } from "@zag-js/shared"
+
+export function Nav({ pathname }: { pathname: string }) {
+  return (
+    <aside class="nav">
+      <header>Zagjs</header>
+      {routesData
+        .sort((a, b) => a.label.localeCompare(b.label))
+        .map((route) => {
+          const active = pathname === route.path
+          return (
+            <a data-active={dataAttr(active)} href={route.path}>
+              {route.label}
+            </a>
+          )
+        })}
+    </aside>
+  )
+}
diff --git a/examples/alpine-ts/server/components/presence.tsx b/examples/alpine-ts/server/components/presence.tsx
new file mode 100644
index 0000000000..cbfb717d2f
--- /dev/null
+++ b/examples/alpine-ts/server/components/presence.tsx
@@ -0,0 +1,13 @@
+export function Presence(props: any) {
+  return (
+    <div
+      {...props}
+      data-scope="presence"
+      x-data="{present: !hidden}"
+      x-presence="{ present }"
+      x-bind:data-state="$presence.skip ? undefined : present ? 'open' : 'closed'"
+    >
+      <slot />
+    </div>
+  )
+}
diff --git a/examples/alpine-ts/server/components/state-visualizer.tsx b/examples/alpine-ts/server/components/state-visualizer.tsx
new file mode 100644
index 0000000000..612401a9b9
--- /dev/null
+++ b/examples/alpine-ts/server/components/state-visualizer.tsx
@@ -0,0 +1,18 @@
+interface StateVisualizerProps {
+  label: string
+  omit?: string[]
+  context?: string[]
+}
+
+export function StateVisualizer({ label, omit, context }: StateVisualizerProps) {
+  return (
+    <div class="viz">
+      <pre dir="ltr">
+        <details open>
+          <summary>{label} Visualizer</summary>
+          <div x-html={`$highlightState(${JSON.stringify({ label, omit, context })})`} />
+        </details>
+      </pre>
+    </div>
+  )
+}
diff --git a/examples/alpine-ts/server/components/toolbar.tsx b/examples/alpine-ts/server/components/toolbar.tsx
new file mode 100644
index 0000000000..259caa3874
--- /dev/null
+++ b/examples/alpine-ts/server/components/toolbar.tsx
@@ -0,0 +1,26 @@
+export function Toolbar({ viz = false, controls = true }: { viz?: boolean; controls?: boolean }) {
+  return (
+    <div class="toolbar" x-data={`{active: ${viz ? 1 : !controls ? 1 : 0}}`}>
+      <nav>
+        {controls && (
+          <button x-bind:data-active="$dataAttr(active === 0)" x-on:click="active = 0">
+            Controls
+          </button>
+        )}
+        <button x-bind:data-active="$dataAttr(active === 1)" x-on:click="active = 1">
+          Visualizer
+        </button>
+      </nav>
+      <div>
+        {controls && (
+          <div data-content x-bind:data-active="$dataAttr(active === 0)">
+            <slot name="controls" />
+          </div>
+        )}
+        <div data-content x-bind:data-active="$dataAttr(active === 1)">
+          <slot />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/alpine-ts/server/routes/accordion.tsx b/examples/alpine-ts/server/routes/accordion.tsx
new file mode 100644
index 0000000000..4b7019e93a
--- /dev/null
+++ b/examples/alpine-ts/server/routes/accordion.tsx
@@ -0,0 +1,55 @@
+import { defineHandler } from "nitro/h3"
+import { accordionControls, accordionData, getControlDefaults } from "@zag-js/shared"
+import { ArrowRight } from "lucide-static"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(accordionControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/accordion.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['accordion']"
+          x-accordion={`{id: $id('accordion'), ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="accordion">
+            <div x-accordion:root>
+              {accordionData.map((item) => (
+                <div x-accordion:item={`{value: '${item.id}'}`}>
+                  <h3>
+                    <button data-testid={`${item.id}:trigger`} x-accordion:item-trigger={`{value: '${item.id}'}`}>
+                      {item.label}
+                      <div x-accordion:item-indicator={`{value: '${item.id}'}`}>{html(ArrowRight)}</div>
+                    </button>
+                  </h3>
+                  <div data-testid={`${item.id}:content`} x-accordion:item-content={`{value: '${item.id}'}`}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua.
+                  </div>
+                </div>
+              ))}
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={accordionControls} state={state} slot="controls" />
+            <StateVisualizer label="accordion" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/angle-slider.tsx b/examples/alpine-ts/server/routes/angle-slider.tsx
new file mode 100644
index 0000000000..d4a15921ca
--- /dev/null
+++ b/examples/alpine-ts/server/routes/angle-slider.tsx
@@ -0,0 +1,52 @@
+import { defineHandler } from "nitro/h3"
+import { angleSliderControls, getControlDefaults } from "@zag-js/shared"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { Toolbar } from "../components/toolbar"
+import { Controls } from "../components/controls"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(angleSliderControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/angle-slider.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['angle-slider']"
+          x-angle-slider={`{id: $id('angle-slider'), ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="angle-slider">
+            <div x-angle-slider:root>
+              <label x-angle-slider:label>
+                Angle Slider: <div x-angle-slider:value-text x-text="$angleSlider().valueAsDegree"></div>
+              </label>
+              <div x-angle-slider:control>
+                <div x-angle-slider:thumb></div>
+                <div x-angle-slider:marker-group>
+                  {[0, 45, 90, 135, 180, 225, 270, 315].map((value) => (
+                    <div x-angle-slider:marker={`{value: ${value}}`}></div>
+                  ))}
+                </div>
+              </div>
+              <input x-angle-slider:hidden-input />
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={angleSliderControls} state={state} slot="controls" />
+            <StateVisualizer label="angle-slider" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/async-list.tsx b/examples/alpine-ts/server/routes/async-list.tsx
new file mode 100644
index 0000000000..2550ceecc1
--- /dev/null
+++ b/examples/alpine-ts/server/routes/async-list.tsx
@@ -0,0 +1,75 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/async-list.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data
+          x-async-list="{
+            autoReload: true,
+            async load({signal, cursor, filterText}) {
+              if (cursor) cursor = cursor.replace(/^http:\/\//i, 'https://')
+
+              await new Promise((resolve) => setTimeout(resolve, 1000))
+              let res = await fetch(cursor || `https://swapi.py4e.com/api/people/?search=${filterText}`, { signal })
+              let json = await res.json()
+
+              return {
+                items: json.results,
+                cursor: json.next,
+              }
+            },
+            sort({ items, descriptor }) {
+              return {
+                items:
+                  items.length > 0
+                    ? items.slice().sort((a, b) => {
+                        if (descriptor.column != null) {
+                          let cmp = a[descriptor.column] < b[descriptor.column] ? -1 : 1
+                          if (descriptor.direction === 'descending') {
+                            cmp *= -1
+                          }
+                          return cmp
+                        } else {
+                          return 1
+                        }
+                      })
+                    : [],
+              }
+            }
+          }"
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="async-list">
+            <span x-text="$asyncList().items.length"></span>
+            <input type="text" x-on:change="(e) => $asyncList().setFilterText(e.target.value)" />
+            <div>
+              <template x-if="$asyncList().loading">
+                <p>Loading...</p>
+              </template>
+              <button x-on:click="$asyncList().reload()">Reload</button>
+              <button x-on:click="$asyncList().loadMore()">Load More</button>
+              <button x-on:click="$asyncList().sort({column: 'name', direction: 'ascending'})">Sort by name</button>
+              <pre x-text="JSON.stringify($asyncList().items, null, 2)"></pre>
+            </div>
+          </main>
+
+          <Toolbar controls={false}>
+            <StateVisualizer label="async-list" context={["cursor", "filterText"]} omit={["items"]} />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/autoresize.tsx b/examples/alpine-ts/server/routes/autoresize.tsx
new file mode 100644
index 0000000000..c702e723b0
--- /dev/null
+++ b/examples/alpine-ts/server/routes/autoresize.tsx
@@ -0,0 +1,35 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/autoresize.ts"></script>
+      </Head>
+
+      <body>
+        <div class="page">
+          <Nav pathname={event.url.pathname} />
+
+          <main>
+            <textarea
+              x-data
+              x-ref="textarea"
+              x-init="() => $autoresizeTextarea($refs.textarea)"
+              rows={4}
+              style={{
+                width: "100%",
+                resize: "none",
+                padding: 20,
+                scrollPaddingBlock: 20,
+                maxHeight: 180,
+              }}
+            />
+          </main>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/avatar.tsx b/examples/alpine-ts/server/routes/avatar.tsx
new file mode 100644
index 0000000000..2fc2827a55
--- /dev/null
+++ b/examples/alpine-ts/server/routes/avatar.tsx
@@ -0,0 +1,45 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/avatar.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data="{src: $getRandomImage(), showImage: true}"
+          x-id="['avatar']"
+          x-avatar="{id: $id('avatar')}"
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="avatar">
+            <div x-avatar:root>
+              <span x-avatar:fallback>PA</span>
+              <template x-if="showImage">
+                <img alt="" referRerpolicy="no-referrer" x-bind:src="src" x-avatar:image />
+              </template>
+            </div>
+
+            <div class="controls">
+              <button x-on:click="src = $getRandomImage()">Change Image</button>
+              <button x-on:click="src = $broken">Broken Image</button>
+              <button x-on:click="showImage = !showImage">Toggle Image</button>
+            </div>
+          </main>
+
+          <Toolbar controls={false}>
+            <StateVisualizer label="avatar" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/bottom-sheet.tsx b/examples/alpine-ts/server/routes/bottom-sheet.tsx
new file mode 100644
index 0000000000..f3a2b8c70d
--- /dev/null
+++ b/examples/alpine-ts/server/routes/bottom-sheet.tsx
@@ -0,0 +1,56 @@
+import { defineHandler } from "nitro/h3"
+import { bottomSheetControls, getControlDefaults } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { Presence } from "../components/presence"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(bottomSheetControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/bottom-sheet.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['bottom-sheet']"
+          x-bottom-sheet={`{id: $id('bottom-sheet'), ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="bottom-sheet" x-data="{hidden: !$bottomSheet.open}">
+            <button x-bottom-sheet:trigger>Open</button>
+            <Presence x-bottom-sheet:backdrop x-on:animationstart="(e)=> console.log(e)" />
+            <Presence x-bottom-sheet:content x-on:animationstart="(e) => console.log(e)">
+              <div x-bottom-sheet:grabber>
+                <div x-bottom-sheet:grabber-indicator />
+              </div>
+              <div x-bottom-sheet:title>Bottom Sheet</div>
+              <div data-no-drag="true">No drag area</div>
+              <div class="scrollable">
+                {Array.from({ length: 100 }).map((_element, index) => (
+                  <div>Item {index}</div>
+                ))}
+              </div>
+            </Presence>
+          </main>
+
+          <Toolbar>
+            <Controls config={bottomSheetControls} state={state} slot="controls" />
+            <StateVisualizer
+              label="bottom-sheet"
+              context={["dragOffset", "activeSnapPoint", "resolvedActiveSnapPoint"]}
+            />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/carousel-auto-size.tsx b/examples/alpine-ts/server/routes/carousel-auto-size.tsx
new file mode 100644
index 0000000000..1be48cf1c0
--- /dev/null
+++ b/examples/alpine-ts/server/routes/carousel-auto-size.tsx
@@ -0,0 +1,179 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/carousel.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data
+          x-carousel={`{
+            id: $id('carousel'),
+            autoSize: true,
+            spacing: '16px',
+            slideCount: $variableWidthData.length,
+            allowMouseDrag: true,
+            snapType: 'mandatory',
+          }`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="carousel-auto-size">
+            <div x-carousel:root>
+              <h2>Auto Size Carousel</h2>
+              <p>Each slide has a different size based on its content.</p>
+
+              <div x-carousel:control>
+                <button x-carousel:autoplay-trigger x-text="$carousel().isPlaying ? 'Stop' : 'Play'"></button>
+                <div class="carousel-spacer" />
+                <button x-carousel:prev-trigger>← Prev</button>
+                <button x-carousel:next-trigger>Next →</button>
+              </div>
+
+              <div x-carousel:item-group>
+                <template x-for="(slide, index) in $variableWidthData" x-bind:key="index">
+                  <div
+                    x-carousel:item="{ index }"
+                    x-bind:style="{
+                      ...$carousel().getItemProps({index, snapAlign: 'center'}).style,
+                      minHeight: '120px',
+                      backgroundColor: slide.color,
+                      borderRadius: '8px',
+                      color: 'white',
+                      fontWeight: 'bold',
+                      textAlign: 'center',
+                      padding: '16px',
+                      boxSizing: 'border-box',
+                    }"
+                    x-text="slide.content"
+                  ></div>
+                </template>
+              </div>
+
+              <div x-carousel:indicator-group>
+                <template x-for="(_, index) in $variableWidthData" x-bind:key="index">
+                  <button
+                    x-carousel:indicator="{ index }"
+                    x-bind:style="{
+                      width: '12px',
+                      height: '12px',
+                      borderRadius: '50%',
+                      border: 'none',
+                      backgroundColor: index === $carousel().page ? '#333' : '#ccc',
+                      margin: '0 4px',
+                      cursor: 'pointer',
+                    }"
+                  />
+                </template>
+              </div>
+
+              <div x-caraousel:progress-text x-text="$carousel().getProgressText()"></div>
+            </div>
+
+            <div style={{ marginTop: "32px" }}>
+              <h3>Comparison: Fixed Width Carousel</h3>
+              <FixedWidthExample />
+            </div>
+          </main>
+
+          <Toolbar controls={false}>
+            <StateVisualizer label="carousel" omit={["translations"]} />
+          </Toolbar>
+        </div>
+      </body>
+
+      <style>{`
+        .carousel-auto-size {
+          padding: 32px;
+          max-width: 800px;
+          margin: 0 auto;
+        }
+
+        .carousel-spacer {
+          flex: 1;
+        }
+
+        h2 {
+          margin-bottom: 8px;
+        }
+
+        p {
+          margin-bottom: 24px;
+          color: #666;
+        }
+      `}</style>
+    </html>
+  )
+})
+
+function FixedWidthExample() {
+  return (
+    <div
+      x-id="['carousel']"
+      {...{
+        "x-carousel.fixed": `{
+          id: $id('carousel'),
+          autoSize: false,
+          spacing: '16px',
+          slidesPerPage: 2,
+          slideCount: $variableWidthData.length,
+          allowMouseDrag: true,
+        }`,
+        "x-carousel:root.fixed": true,
+      }}
+    >
+      <div {...{ "x-carousel:control.fixed": true }}>
+        <button {...{ "x-carousel:prev-trigger.fixed": true }}>← Prev</button>
+        <div class="carousel-spacer" />
+        <button {...{ "x-carousel:next-trigger.fixed": true }}>Next →</button>
+      </div>
+
+      <div {...{ "x-carousel:item-group.fixed": true }}>
+        <template x-for="(slide, index) in $variableWidthData" x-bind:key="index">
+          <div
+            {...{ "x-carousel:item.fixed": "{ index }" }}
+            x-bind:style="{
+              minHeight: '120px',
+              backgroundColor: slide.color,
+              borderRadius: '8px',
+              color: 'white',
+              fontWeight: 'bold',
+              textAlign: 'center',
+              padding: '16px',
+              boxSizing: 'border-box',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }"
+            x-text="slide.content"
+          ></div>
+        </template>
+      </div>
+
+      <div {...{ "x-carousel:indicator-group.fixed": true }}>
+        <template x-for="(_, index) in $carousel('fixed').pageSnapPoints" x-bind:key="index">
+          <button
+            {...{ "x-carousel:indicator.fixed": "{ index }" }}
+            x-bind:style="{
+              width: '12px',
+              height: '12px',
+              borderRadius: '50%',
+              border: 'none',
+              backgroundColor: index === $carousel('fixed').page ? '#333' : '#ccc',
+              margin: '0 4px',
+              cursor: 'pointer',
+            }"
+          />
+        </template>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/alpine-ts/server/routes/carousel-mutation.tsx b/examples/alpine-ts/server/routes/carousel-mutation.tsx
new file mode 100644
index 0000000000..665a5d0275
--- /dev/null
+++ b/examples/alpine-ts/server/routes/carousel-mutation.tsx
@@ -0,0 +1,82 @@
+import { defineHandler } from "nitro/deps/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/carousel.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data="{index: 0, images: [0, 1, 2, 3, 4]}"
+          x-carousel="{
+            id: $id('carousel'),
+            slideCount: images.length,
+            loop: true,
+            autoplay: {delay: 1000},
+            onPageChange: ({ page }) => {index=page},
+            page: index,
+          }"
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="carousel">
+            <div x-carousel:root>
+              <div x-carousel:control>
+                <button x-carousel:autoplay-trigger x-text="$carousel().isPlaying ? 'Stop' : 'Play'"></button>
+                <div class="carousel-spacer" />
+                <button x-carousel:prev-trigger>&laquo;</button>
+                <button x-carousel:next-trigger>&raquo;</button>
+              </div>
+
+              <div x-carousel:indicator-group>
+                <template x-for="(_, i) in $carousel.pageSnapPoints" x-bind:key="i">
+                  <button x-carousel:indicator="{index: i}" x-text="i"></button>
+                </template>
+              </div>
+
+              <div x-carousel:item-group>
+                <template x-for="(image, index) in images" x-bind:key="image">
+                  <div x-carousel:item="{ index }">
+                    <div
+                      style={{
+                        width: "188px",
+                        height: "188px",
+                        backgroundColor: "#f0f0f0",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                      }}
+                      x-text="'Slide ' + image"
+                    ></div>
+                  </div>
+                </template>
+              </div>
+            </div>
+
+            <p>
+              <button
+                x-on:click="() => {
+                  const max = Math.max(...images);
+                  images = [...images, max + 1];
+                }"
+              >
+                add slide
+              </button>
+            </p>
+          </main>
+
+          <Toolbar controls={false}>
+            <StateVisualizer label="carousel" omit={["translations"]} />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/carousel.tsx b/examples/alpine-ts/server/routes/carousel.tsx
new file mode 100644
index 0000000000..38d9b43256
--- /dev/null
+++ b/examples/alpine-ts/server/routes/carousel.tsx
@@ -0,0 +1,66 @@
+import { defineHandler } from "nitro/h3"
+import { carouselControls, carouselData, getControlDefaults } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(carouselControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/carousel.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-carousel={`{
+            id: $id('carousel'),
+            spacing: '20px',
+            slidesPerPage: 2,
+            slideCount: ${carouselData.length},
+            allowMouseDrag: true,
+            ${Object.keys(state)},
+          }`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="carousel">
+            <div x-carousel:root>
+              <button x-on:click="$carousel().scrollToIndex(4)">Scroll to 4</button>
+              <div x-carousel:control>
+                <button x-carousel:autoplay-trigger x-text="$carousel().isPlaying ? 'Stop' : 'Play'"></button>
+                <div class="carousel-spacer" />
+                <button x-carousel:prev-trigger>Prev</button>
+                <button x-carousel:next-trigger>Next</button>
+              </div>
+
+              <div x-carousel:item-group>
+                {carouselData.map((image, index) => (
+                  <div x-carousel:item={`{index: ${index}}`}>
+                    <img src={image} alt="" width="188px" />
+                  </div>
+                ))}
+              </div>
+              <div x-carousel:indicator-group>
+                <template x-for="(_, index) in $carousel().pageSnapPoints" x-bind:key="index">
+                  <button x-carousel:indicator="{ index }" />
+                </template>
+              </div>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={carouselControls} state={state} slot="controls" />
+            <StateVisualizer label="carousel" omit={["translations"]} />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/checkbox-controlled.tsx b/examples/alpine-ts/server/routes/checkbox-controlled.tsx
new file mode 100644
index 0000000000..17907dd2f0
--- /dev/null
+++ b/examples/alpine-ts/server/routes/checkbox-controlled.tsx
@@ -0,0 +1,48 @@
+import { defineHandler } from "nitro/deps/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/checkbox.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data="{checked: false}"
+          x-id="['checkbox']"
+          x-checkbox="{
+            id: $id('checkbox'),
+            name: 'checkbox',
+            checked,
+            onCheckedChange(details) {
+              checked = !!details.checked
+            },
+          }"
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="checkbox">
+            <label x-checkbox:root>
+              <div x-checkbox:control />
+              <span x-checkbox:label x-text="'Input ' + ($checkbox().checked ? 'Checked' : 'Unchecked')"></span>
+              <input x-checkbox:hidden-input data-testid="hidden-input" />
+              <div x-checkbox:indicator>Indicator</div>
+            </label>
+
+            <button type="button" x-bind:disabled="$checkbox().checked" x-on:click="$checkbox().setChecked(true)">
+              Check
+            </button>
+            <button type="button" x-bind:disabled="! $checkbox().checked" x-on:click="$checkbox().setChecked(false)">
+              Uncheck
+            </button>
+            <button type="reset">Reset Form</button>
+          </main>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/checkbox.tsx b/examples/alpine-ts/server/routes/checkbox.tsx
new file mode 100644
index 0000000000..d92efb0a0d
--- /dev/null
+++ b/examples/alpine-ts/server/routes/checkbox.tsx
@@ -0,0 +1,65 @@
+import { defineHandler } from "nitro/h3"
+import { checkboxControls, getControlDefaults } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(checkboxControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/checkbox.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['checkbox']"
+          x-checkbox={`{id: $id('checkbox'), name: 'checkbox', ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="checkbox">
+            <form
+              x-on:change="(e) => {
+                const result = $serialize(e.currentTarget, { hash: true })
+                console.log(result)
+              }"
+            >
+              <fieldset>
+                <label x-checkbox:root>
+                  <div x-checkbox:control />
+                  <span x-checkbox:label x-text="'Input ' + ($checkbox().checked ? 'Checked' : 'Unchecked')"></span>
+                  <input x-checkbox:hidden-input data-testid="hidden-input" />
+                  <div x-checkbox:indicator>Indicator</div>
+                </label>
+
+                <button type="button" x-bind:disabled="$checkbox().checked" x-on:click="$checkbox().setChecked(true)">
+                  Check
+                </button>
+                <button
+                  type="button"
+                  x-bind:disabled="! $checkbox().checked"
+                  x-on:click="$checkbox().setChecked(false)"
+                >
+                  Uncheck
+                </button>
+                <button type="reset">Reset Form</button>
+              </fieldset>
+            </form>
+          </main>
+
+          <Toolbar>
+            <Controls config={checkboxControls} state={state} slot="controls" />
+            <StateVisualizer label="checkbox" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/clipboard.tsx b/examples/alpine-ts/server/routes/clipboard.tsx
new file mode 100644
index 0000000000..dd7e45f249
--- /dev/null
+++ b/examples/alpine-ts/server/routes/clipboard.tsx
@@ -0,0 +1,47 @@
+import { defineHandler } from "nitro/h3"
+import { clipboardControls, getControlDefaults } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(clipboardControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/clipboard.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['clipboard']"
+          x-clipboard={`{id: $id('clipboard'), value: 'https://github.com/chakra-ui/zag', ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="clipboard">
+            <div x-clipboard:root>
+              <label x-clipboard:label>Copy this link</label>
+              <div x-clipboard:control>
+                <input x-clipboard:input />
+                <button x-clipboard:trigger x-html="$clipboard().copied ? $clipboardCheck : $clipboardCopy"></button>
+              </div>
+              <div x-clipboard:indicator="{copied: true}">Copied!</div>
+              <div x-clipboard:indicator="{copied: false}">Copy</div>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={clipboardControls} state={state} slot="controls" />
+            <StateVisualizer label="clipboard" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/color-picker.tsx b/examples/alpine-ts/server/routes/color-picker.tsx
new file mode 100644
index 0000000000..976b67bdc5
--- /dev/null
+++ b/examples/alpine-ts/server/routes/color-picker.tsx
@@ -0,0 +1,169 @@
+import { defineHandler } from "nitro/h3"
+import { colorPickerControls, getControlDefaults } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+const presets = ["#f47373", "#697689"]
+
+const EyeDropIcon = () => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 24 24"
+    height="1em"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="m4 15.76-1 4A1 1 0 0 0 3.75 21a1 1 0 0 0 .49 0l4-1a1 1 0 0 0 .47-.26L17 11.41l1.29 1.3 1.42-1.42-1.3-1.29L21 7.41a2 2 0 0 0 0-2.82L19.41 3a2 2 0 0 0-2.82 0L14 5.59l-1.3-1.3-1.42 1.42L12.58 7l-8.29 8.29a1 1 0 0 0-.29.47zm1.87.75L14 8.42 15.58 10l-8.09 8.1-2.12.53z"></path>
+  </svg>
+)
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(colorPickerControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/color-picker.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['color-picker']"
+          x-color-picker={`{
+            id: $id('color-picker'),
+            name: 'color',
+            format: 'hsla',
+            defaultValue: $parse('hsl(0, 100%, 50%)'),
+            ${Object.keys(state)},
+          }`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="color-picker">
+            <form
+              x-on:change="(e) => {
+                console.log('change:', $serialize(e.currentTarget, { hash: true }))
+              }"
+            >
+              <input x-color-picker:hidden-input />
+              <div x-color-picker:root>
+                <label x-color-picker:label>
+                  Select Color: <span data-testid="value-text" x-text="$colorPicker().valueAsString"></span>
+                </label>
+
+                <div x-color-picker:control>
+                  <button x-color-picker:trigger>
+                    <div x-color-picker:transparency-grid="{size: '10px'}" />
+                    <div x-color-picker:swatch="{value: $colorPicker().value}" />
+                  </button>
+                  <input x-color-picker:channel-input="{channel: 'hex'}" />
+                  <input x-color-picker:channel-input="{channel: 'alpha'}" />
+                </div>
+
+                <div x-color-picker:positioner>
+                  <div x-color-picker:content>
+                    <div class="content__inner">
+                      <div x-color-picker:area>
+                        <div x-color-picker:area-background />
+                        <div x-color-picker:area-thumb />
+                      </div>
+
+                      <div x-color-picker:channel-slider="{channel: 'hue'}">
+                        <div x-color-picker:channel-slider-track="{channel: 'hue'}" />
+                        <div x-color-picker:channel-slider-thumb="{channel: 'hue'}" />
+                      </div>
+
+                      <div x-color-picker:channel-slider="{channel: 'alpha'}">
+                        <div x-color-picker:transparency-grid="{size: '12px'}" />
+                        <div x-color-picker:channel-slider-track="{channel: 'alpha'}" />
+                        <div x-color-picker:channel-slider-thumb="{channel: 'alpha'}" />
+                      </div>
+
+                      <template x-if="$colorPicker().format.startsWith('hsl')">
+                        <div style={{ display: "flex", width: "100%" }}>
+                          <span>H</span>
+                          <input x-color-picker:channel-input="{channel: 'hue'}" />
+                          <span>S</span>
+                          <input x-color-picker:channel-input="{channel: 'saturation'}" />
+                          <span>L</span>
+                          <input x-color-picker:channel-input="{channel: 'lightness'}" />
+                          <span>A</span>
+                          <input x-color-picker:channel-input="{channel: 'alpha'}" />
+                        </div>
+                      </template>
+
+                      <template x-if="$colorPicker().format.startsWith('rgb')">
+                        <div style={{ display: "flex", width: "100%" }}>
+                          <span>R</span>
+                          <input x-color-picker:channel-input="{channel: 'red'}" />
+                          <span>G</span>
+                          <input x-color-picker:channel-input="{channel: 'green'}" />
+                          <span>B</span>
+                          <input x-color-picker:channel-input="{channel: 'blue'}" />
+                          <span>A</span>
+                          <input x-color-picker:channel-input="{channel: 'alpha'}" />
+                        </div>
+                      </template>
+
+                      <template x-if="$colorPicker().format.startsWith('hsb')">
+                        <div style={{ display: "flex", width: "100%" }}>
+                          <span>H</span>
+                          <input x-color-picker:channel-input="{channel: 'hue'}" />
+                          <span>S</span>
+                          <input x-color-picker:channel-input="{channel: 'saturation'}" />
+                          <span>B</span>
+                          <input x-color-picker:channel-input="{channel: 'brightness'}" />
+                          <span>A</span>
+                          <input x-color-picker:channel-input="{channel: 'alpha'}" />
+                        </div>
+                      </template>
+
+                      <div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
+                        <div style={{ position: "relative" }}>
+                          <div x-color-picker:transparency-grid="{size: '4px'}" />
+                          <div x-color-picker:swatch="{value: $colorPicker().value}" />
+                        </div>
+                        <p data-testid="value-text" x-text="$colorPicker().valueAsString"></p>
+                      </div>
+
+                      <input x-color-picker:channel-input="{channel: 'hex'}" />
+
+                      <div x-color-picker:swatch-group style={{ display: "flex", gap: "10px" }}>
+                        {presets.map((preset) => (
+                          <button x-color-picker:swatch-trigger={`{value: '${preset}'}`}>
+                            <div style={{ position: "relative" }}>
+                              <div x-color-picker:transparency-grid="{size: '4px'}" />
+                              <div x-color-picker:swatch={`{value: '${preset}'}`} />
+                            </div>
+                          </button>
+                        ))}
+                      </div>
+
+                      <button x-color-picker:eye-dropper-trigger>
+                        <EyeDropIcon />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <button type="submit">Submit</button>
+              <button type="reset">Reset</button>
+            </form>
+          </main>
+
+          <Toolbar viz>
+            <Controls config={colorPickerControls} state={state} slot="controls" />
+            <StateVisualizer label="color-picker" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/combobox-multiple.tsx b/examples/alpine-ts/server/routes/combobox-multiple.tsx
new file mode 100644
index 0000000000..355618d787
--- /dev/null
+++ b/examples/alpine-ts/server/routes/combobox-multiple.tsx
@@ -0,0 +1,97 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults } from "@zag-js/shared"
+import { X } from "lucide-static"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const config = {
+    removeSelected: {
+      type: "boolean" as const,
+      defaultValue: false,
+    },
+  }
+  const state = getControlDefaults(config)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/combobox.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data="{
+            options: $comboboxData,
+            selectedValue: [],
+            get items() {
+              return this.removeSelected
+                ? this.options.filter((item) => !this.selectedValue.includes(item.code))
+                : this.options
+            },
+            removeSelected: false,
+          }"
+          x-combobox:collection="{
+            items,
+            itemToValue: (item) => item.code,
+            itemToString: (item) => item.label,
+          }"
+          x-combobox="{
+            id: $id('combobox'),
+            collection,
+            onInputValueChange({ inputValue }) {
+              const filtered = $matchSorter($comboboxData, inputValue, {keys: ['label']})
+              options = filtered.length > 0 ? filtered : $comboboxData
+            },
+            multiple: true,
+            onValueChange({ value }) {
+              selectedValue = value
+            },
+          }"
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="combobox">
+            <div>
+              <b x-text="_x_combobox_service.state.get()"></b>
+              <b x-text="' / ' + ($combobox().highlightedValue || '-')"></b>
+              <pre data-testid="value-text" x-text="$combobox().valueAsString"></pre>
+              <div x-combobox:root>
+                <label x-combobox:label>Select country</label>
+                <div x-combobox:control>
+                  <input data-testid="input" x-combobox:input />
+                  <button data-testid="trigger" x-combobox:trigger x-on:click="options = $comboboxData">
+                    ▼
+                  </button>
+                  <button x-combobox:clear-trigger>{html(X)}</button>
+                </div>
+              </div>
+
+              <div x-combobox:positioner>
+                <template x-if="options.length > 0">
+                  <ul data-testid="combobox-content" x-combobox:content>
+                    <template x-for="item in options" x-bind:key="item.code">
+                      <li x-bind:data-testid="item.code" x-combobox:item="{ item }">
+                        <span x-combobox:item-indicator="{ item }">✅</span>
+                        <span x-text="item.label"></span>
+                      </li>
+                    </template>
+                  </ul>
+                </template>
+              </div>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={config} state={state} slot="controls" />
+            <StateVisualizer label="combobox" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/combobox.tsx b/examples/alpine-ts/server/routes/combobox.tsx
new file mode 100644
index 0000000000..eb47c205da
--- /dev/null
+++ b/examples/alpine-ts/server/routes/combobox.tsx
@@ -0,0 +1,83 @@
+import { defineHandler } from "nitro/h3"
+import { comboboxControls, getControlDefaults } from "@zag-js/shared"
+import { X } from "lucide-static"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(comboboxControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/combobox.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state).slice(0, -1) + ", options: $comboboxData}"}
+          x-combobox:collection="{
+            items: options,
+            itemToValue: (item) => item.code,
+            itemToString: (item) => item.label,
+          }"
+          x-combobox={`{
+            id: $id('combobox'),
+            collection,
+            onOpenChange() {
+              options = $comboboxData
+            },
+            onInputValueChange({ inputValue }) {
+              const filtered = $matchSorter($comboboxData, inputValue, {keys: ['label']})
+              options = filtered.length > 0 ? filtered : $comboboxData
+            },
+            ${Object.keys(state)},
+          }`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="combobox">
+            <div>
+              <button x-on:click="$comboboxData.setValue(['TG'])">Set to Togo</button>
+              <button data-testid="clear-value-button" x-on:click="$comboboxData.clearValue()">
+                Clear Value
+              </button>
+              <br />
+              <div x-combobox:root>
+                <label x-combobox:label>Select country</label>
+                <div x-combobox:control>
+                  <input data-testid="input" x-combobox:input />
+                  <button data-testid="trigger" x-combobox:trigger>
+                    ▼
+                  </button>
+                  <button x-combobox:clear-trigger>{html(X)}</button>
+                </div>
+              </div>
+              <div x-combobox:positioner>
+                <template x-if="options.length > 0">
+                  <ul data-testid="combobox-content" x-combobox:content>
+                    <template x-for="item in options" x-bind:key="item.code">
+                      <li x-bind:data-testid="item.code" x-combobox:item="{ item }">
+                        <span x-combobox:item-indicator="{ item }">✅</span>
+                        <span x-text="item.label"></span>
+                      </li>
+                    </template>
+                  </ul>
+                </template>
+              </div>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={comboboxControls} state={state} slot="controls" />
+            <StateVisualizer label="combobox" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/context-menu-nested.tsx b/examples/alpine-ts/server/routes/context-menu-nested.tsx
new file mode 100644
index 0000000000..87e7b44b06
--- /dev/null
+++ b/examples/alpine-ts/server/routes/context-menu-nested.tsx
@@ -0,0 +1,55 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/menu.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data
+          {...{ "x-menu.root": "{id: 'root'}", "x-menu.sub": "{id: 'sub'}" }}
+          x-init="$menu('root').setChild($data._x_menu_sub_service)
+            $menu('sub').setParent($data._x_menu_root_service)"
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main>
+            <div {...{ "x-menu:context-trigger.root": "" }}>
+              <div>Open context menu</div>
+            </div>
+
+            <template x-teleport="body">
+              <div {...{ "x-menu:positioner.root": "" }}>
+                <ul {...{ "x-menu:content.root": "" }}>
+                  <li {...{ "x-menu:item.root": "{value: 'edit'}" }}>Edit</li>
+                  <li {...{ "x-menu:item.root": "{value: 'delete'}" }}>Delete</li>
+                  <li {...{ "x-menu:item.root": "{value: 'export'}" }}>Export</li>
+                  <li x-bind="$menu('root').getTriggerItemProps($menu('sub'))">
+                    <div>Appearance ➡️</div>
+                  </li>
+                  <li {...{ "x-menu:item.root": "{value: 'duplicate'}" }}>Duplicate</li>
+                </ul>
+              </div>
+            </template>
+
+            <template x-teleport="body">
+              <div {...{ "x-menu:positioner.sub": "" }}>
+                <ul {...{ "x-menu:content.sub": "" }}>
+                  <li {...{ "x-menu:item.sub": "{value: 'full-screen'}" }}>Full screen</li>
+                  <li {...{ "x-menu:item.sub": "{value: 'zoom-in'}" }}>Zoom in</li>
+                  <li {...{ "x-menu:item.sub": "{value: 'zoom-out'}" }}>Zoom out</li>
+                </ul>
+              </div>
+            </template>
+          </main>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/context-menu.tsx b/examples/alpine-ts/server/routes/context-menu.tsx
new file mode 100644
index 0000000000..6c2b24ba58
--- /dev/null
+++ b/examples/alpine-ts/server/routes/context-menu.tsx
@@ -0,0 +1,39 @@
+import { defineHandler } from "nitro/deps/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/menu.ts"></script>
+      </Head>
+
+      <body>
+        <div class="page" x-data x-menu="{id: $id('menu'), onSelect: console.log}">
+          <Nav pathname={event.url.pathname} />
+
+          <main class="context-menu">
+            <div x-menu:context-trigger>Right Click here</div>
+            <template x-teleport="body">
+              <div x-menu:positioner>
+                <ul x-menu:content>
+                  <li x-menu:item="{value: 'edit'}">Edit</li>
+                  <li x-menu:item="{value: 'duplicate'}">Duplicate</li>
+                  <li x-menu:item="{value: 'delete'}">Delete</li>
+                  <li x-menu:item="{value: 'export'}">Export...</li>
+                </ul>
+              </div>
+            </template>
+          </main>
+
+          <Toolbar controls={false}>
+            <StateVisualizer label="menu" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/dialog-mutation.tsx b/examples/alpine-ts/server/routes/dialog-mutation.tsx
new file mode 100644
index 0000000000..8f711ddec8
--- /dev/null
+++ b/examples/alpine-ts/server/routes/dialog-mutation.tsx
@@ -0,0 +1,38 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/dialog.ts"></script>
+      </Head>
+
+      <body>
+        <div class="page" x-data="{nextContent: false}" x-id="['dialog']" x-dialog="{id: $id('dialog')}">
+          <Nav pathname={event.url.pathname} />
+
+          <main>
+            <button x-dialog:trigger> Click me</button>
+            <template x-teleport="body">
+              <div>
+                <div x-dialog:backdrop />
+                <div x-dialog:positioner>
+                  <div x-dialog:content>
+                    <template x-if="! nextContent">
+                      <button x-on:click="nextContent = true">Set next content</button>
+                    </template>
+                    <template x-if="nextContent">
+                      <button x-on:click="nextContent = false">Set previous content</button>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </main>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/dialog-nested.tsx b/examples/alpine-ts/server/routes/dialog-nested.tsx
new file mode 100644
index 0000000000..5c7d802d61
--- /dev/null
+++ b/examples/alpine-ts/server/routes/dialog-nested.tsx
@@ -0,0 +1,80 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/dialog.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data
+          {...{ "x-dialog.parent": "{id: $id('dialog-parent')}", "x-dialog.child": "{id: $id('dialog-child')}" }}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main>
+            <div>
+              <button {...{ "x-dialog:trigger.parent": "" }} data-testid="trigger-1">
+                Open Dialog
+              </button>
+
+              <div style={{ minHeight: "1200px" }} />
+
+              <template x-if="$dialog('parent').open">
+                <div>
+                  <div {...{ "x-dialog:backdrop.parent": "" }} />
+                  <div data-testid="positioner-1" {...{ "x-dialog:positioner.parent": "" }}>
+                    <div {...{ "x-dialog:content.parent": "" }}>
+                      <h2 {...{ "x-dialog:title.parent": "" }}>Edit profile</h2>
+                      <p {...{ "x-dialog:description.parent": "" }}>
+                        Make changes to your profile here. Click save when you are done.
+                      </p>
+                      <button {...{ "x-dialog:close-trigger.parent": "" }} data-testid="close-1">
+                        X
+                      </button>
+                      <input type="text" placeholder="Enter name..." data-testid="input-1" />
+                      <button data-testid="save-button-1">Save Changes</button>
+
+                      <button {...{ "x-dialog:trigger.child": "" }} data-testid="trigger-2">
+                        Open Nested
+                      </button>
+
+                      <template x-if="$dialog('child').open">
+                        <div>
+                          <div {...{ "x-dialog:backdrop.child": "" }} />
+                          <div data-testid="positioner-2" {...{ "x-dialog:positioner.child": "" }}>
+                            <div {...{ "x-dialog:content.child": "" }}>
+                              <h2 {...{ "x-dialog:title.child": "" }}>Nested</h2>
+                              <button {...{ "x-dialog:close-trigger.child": "" }} data-testid="close-2">
+                                X
+                              </button>
+                              <button x-on:click="$dialog('parent').setOpen(false)" data-testid="special-close">
+                                Close Dialog 1
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </template>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </main>
+
+          <Toolbar controls={false}>
+            <StateVisualizer label="dialog-parent" />
+            <StateVisualizer label="dialog-child" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/dialog.tsx b/examples/alpine-ts/server/routes/dialog.tsx
new file mode 100644
index 0000000000..21957de24b
--- /dev/null
+++ b/examples/alpine-ts/server/routes/dialog.tsx
@@ -0,0 +1,39 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/dialog.ts"></script>
+      </Head>
+
+      <body>
+        <div class="page" x-data x-id="['dialog']" x-dialog={`{id: $id('dialog')}`}>
+          <Nav pathname={event.url.pathname} />
+
+          <main>
+            <button x-dialog:trigger> Click me</button>
+            <template x-if="$dialog().open" x-teleport="body">
+              <div>
+                <div x-dialog:backdrop />
+                <div x-dialog:positioner>
+                  <div x-dialog:content>
+                    <h2 x-dialog:title>Edit profile</h2>
+                    <p x-dialog:description>Make changes to your profile here. Click save when you are done.</p>
+                    <div>
+                      <input placeholder="Enter name..." />
+                      <button>Save</button>
+                    </div>
+                    <button x-dialog:close-trigger>Close</button>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </main>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/editable.tsx b/examples/alpine-ts/server/routes/editable.tsx
new file mode 100644
index 0000000000..407282b37a
--- /dev/null
+++ b/examples/alpine-ts/server/routes/editable.tsx
@@ -0,0 +1,61 @@
+import { defineHandler } from "nitro/h3"
+import { editableControls, getControlDefaults } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(editableControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/editable.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['editable']"
+          x-editable={`{id: $id('editable'), defaultValue: 'Hello World', ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="editable">
+            <div x-editable:root>
+              <div x-editable:area>
+                <input data-testid="input" x-editable:input />
+                <span data-testid="preview" x-editable:preview />
+              </div>
+              <div x-editable:control>
+                <template x-if="! $editable().editing">
+                  <button data-testid="edit-button" x-editable:edit-trigger>
+                    Edit
+                  </button>
+                </template>
+                <template x-if="$editable().editing">
+                  <div>
+                    <button data-testid="save-button" x-editable:submit-trigger>
+                      Save
+                    </button>
+                    <button data-testid="cancel-button" x-editable:cancel-trigger>
+                      Cancel
+                    </button>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={editableControls} state={state} slot="controls" />
+            <StateVisualizer label="editable" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/file-upload-with-rejections.tsx b/examples/alpine-ts/server/routes/file-upload-with-rejections.tsx
new file mode 100644
index 0000000000..6cf1d7aba1
--- /dev/null
+++ b/examples/alpine-ts/server/routes/file-upload-with-rejections.tsx
@@ -0,0 +1,79 @@
+import { defineHandler } from "nitro/h3"
+import { fileUploadControls, getControlDefaults } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(fileUploadControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/file-upload.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-file-upload="{id: $id('file-upload'), maxFiles: 2, onFileReject() { alert('rejected') }}"
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="file-upload">
+            <div x-file-upload:root>
+              <div x-file-upload:dropzone>
+                <input data-testid="input" x-file-upload:hidden-input />
+                Drag your files here
+              </div>
+
+              <button x-file-upload:trigger>Choose Files...</button>
+
+              <ul x-file-upload:item-group>
+                <li>Accepted files</li>
+                <template x-for="file in $fileUpload().acceptedFiles" x-bind:key="file.name">
+                  <li class="file" x-file-upload:item="{ file }">
+                    <div>
+                      <b x-text="file.name"></b>
+                    </div>
+                    <div x-file-upload:item-size-text="{ file }" x-text="$fileUpload().getFileSize(file)"></div>
+                    <div x-text="file.type"></div>
+                    <button x-file-upload:item-delete-trigger="{ file }">X</button>
+                  </li>
+                </template>
+              </ul>
+
+              <ul x-file-upload:item-group="{type : 'rejected'}">
+                <li>Rejected files</li>
+                <template x-for="({file, errors}) in $fileUpload().rejectedFiles" x-bind:key="file.name">
+                  <li class="file" x-file-upload:item="{file, type: 'rejected'}">
+                    <div>
+                      <b x-text="file.name"></b>
+                      <template x-for="error in errors" x-bind:key="error">
+                        <span x-text="error"></span>
+                      </template>
+                    </div>
+                    <div
+                      x-file-upload:item-size-text="{file, type: 'rejected'}"
+                      x-text="$fileUpload().getFileSize(file)"
+                    ></div>
+                    <div x-text="file.type"></div>
+                    <button x-file-upload:item-delete-trigger="{file, type: 'rejected'}">X</button>
+                  </li>
+                </template>
+              </ul>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={fileUploadControls} state={state} slot="controls" />
+            <StateVisualizer label="file-upload" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/file-upload.tsx b/examples/alpine-ts/server/routes/file-upload.tsx
new file mode 100644
index 0000000000..6d851fa16e
--- /dev/null
+++ b/examples/alpine-ts/server/routes/file-upload.tsx
@@ -0,0 +1,58 @@
+import { defineHandler } from "nitro/h3"
+import { fileUploadControls, getControlDefaults } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(fileUploadControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/file-upload.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-file-upload={`{id: $id('file-upload'), ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="file-upload">
+            <div x-file-upload:root>
+              <div x-file-upload:dropzone>
+                <input data-testid="input" x-file-upload:hidden-input />
+                Drag your files here
+              </div>
+
+              <button x-file-upload:trigger>Choose Files...</button>
+
+              <ul x-file-upload:item-group>
+                <template x-for="file in $fileUpload().acceptedFiles" x-bind:key="file.name">
+                  <li class="file" x-file-upload:item="{ file }">
+                    <div>
+                      <b x-text="file.name"></b>
+                    </div>
+                    <div x-file-upload:item-size-text="{ file }" x-text="$fileUpload().getFileSize(file)"></div>
+                    <div x-text="file.type"></div>
+                    <button x-file-upload:item-delete-trigger="{ file }">X</button>
+                  </li>
+                </template>
+              </ul>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={fileUploadControls} state={state} slot="controls" />
+            <StateVisualizer label="file-upload" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/floating-panel.tsx b/examples/alpine-ts/server/routes/floating-panel.tsx
new file mode 100644
index 0000000000..1feb989458
--- /dev/null
+++ b/examples/alpine-ts/server/routes/floating-panel.tsx
@@ -0,0 +1,69 @@
+import { defineHandler } from "nitro/h3"
+import { floatingPanelControls, getControlDefaults } from "@zag-js/shared"
+import { ArrowDownLeft, Maximize2, Minus, X } from "lucide-static"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(floatingPanelControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/floating-panel.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['floating']"
+          x-floating={`{id: $id('floating'), ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="floating-panel">
+            <div>
+              <button x-floating:trigger>Toggle Panel</button>
+              <div x-floating:positioner>
+                <div x-floating:content>
+                  <div x-floating:drag-trigger>
+                    <div x-floating:header>
+                      <p x-floating:title>Floating Panel</p>
+                      <div x-floating:control>
+                        <button x-floating:stage-trigger="{stage: 'minimized'}">{html(Minus)}</button>
+                        <button x-floating:stage-trigger="{stage: 'maximized'}">{html(Maximize2)}</button>
+                        <button x-floating:stage-trigger="{stage: 'default'}">{html(ArrowDownLeft)}</button>
+                        <button x-floating:close-trigger>{html(X)}</button>
+                      </div>
+                    </div>
+                  </div>
+                  <div x-floating:body>
+                    <p>Some content</p>
+                  </div>
+
+                  <div x-floating:resize-trigger="{axis: 'n'}" />
+                  <div x-floating:resize-trigger="{axis: 'e'}" />
+                  <div x-floating:resize-trigger="{axis: 'w'}" />
+                  <div x-floating:resize-trigger="{axis: 's'}" />
+                  <div x-floating:resize-trigger="{axis: 'ne'}" />
+                  <div x-floating:resize-trigger="{axis: 'se'}" />
+                  <div x-floating:resize-trigger="{axis: 'sw'}" />
+                  <div x-floating:resize-trigger="{axis: 'nw'}" />
+                </div>
+              </div>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={floatingPanelControls} state={state} slot="controls" />
+            <StateVisualizer label="floating" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/hover-card.tsx b/examples/alpine-ts/server/routes/hover-card.tsx
new file mode 100644
index 0000000000..8e71ad0ca4
--- /dev/null
+++ b/examples/alpine-ts/server/routes/hover-card.tsx
@@ -0,0 +1,61 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, hoverCardControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Nav } from "../components/nav"
+import { Head } from "../components/head"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(hoverCardControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/hover-card.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['hover-card']"
+          x-hover-card={`{id: $id('hover-card'), ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="hover-card">
+            <div style={{ display: "flex", gap: "50px" }}>
+              <a href="https://twitter.com/zag_js" target="_blank" rel="noreferrer" x-hover-card:trigger>
+                Twitter
+              </a>
+
+              <template x-teleport="body">
+                <template x-if="$hoverCard().open">
+                  <div x-hover-card:positioner>
+                    <div x-hover-card:content>
+                      <div x-hover-card:arrow>
+                        <div x-hover-card:arrow />
+                      </div>
+                      Twitter Preview
+                      <a href="https://twitter.com/zag_js" target="_blank" rel="noreferrer">
+                        Twitter
+                      </a>
+                    </div>
+                  </div>
+                </template>
+              </template>
+
+              <div data-part="test-text">Test text</div>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={hoverCardControls} state={state} slot="controls" />
+            <StateVisualizer label="hover-card" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/index.tsx b/examples/alpine-ts/server/routes/index.tsx
new file mode 100644
index 0000000000..58959865ef
--- /dev/null
+++ b/examples/alpine-ts/server/routes/index.tsx
@@ -0,0 +1,29 @@
+import { defineHandler } from "nitro/h3"
+import { routesData } from "@zag-js/shared"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head />
+
+      <body>
+        <div class="page">
+          <Nav pathname={event.url.pathname} />
+
+          <div class="index-nav">
+            <h2>Zag.js + Alpine.js</h2>
+            <ul>
+              {routesData.map((route) => (
+                <li>
+                  <a href={route.path}>{route.label}</a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/listbox-grid.tsx b/examples/alpine-ts/server/routes/listbox-grid.tsx
new file mode 100644
index 0000000000..693c3b361c
--- /dev/null
+++ b/examples/alpine-ts/server/routes/listbox-grid.tsx
@@ -0,0 +1,49 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, listboxControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(listboxControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/listbox.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-listbox:grid-collection="{items: $selectData, columnCount: 3}"
+          x-listbox={`{collection, id: $id('listbox'), ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="listbox">
+            <div x-listbox:root>
+              <label x-listbox:label>Label</label>
+              <ul x-listbox:content>
+                <template x-for="item in collection.items" x-bind:key="item.value">
+                  <li x-listbox:item="{ item }">
+                    <span x-listbox:item-text="{ item }" x-text="item.label"></span>
+                    <span x-listbox:item-indicator="{ item }">✓</span>
+                  </li>
+                </template>
+              </ul>
+            </div>
+          </main>
+
+          <Toolbar viz>
+            <Controls config={listboxControls} state={state} slot="controls" />
+            <StateVisualizer label="listbox" context={["highlightedValue"]} />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/listbox.tsx b/examples/alpine-ts/server/routes/listbox.tsx
new file mode 100644
index 0000000000..d21e02122f
--- /dev/null
+++ b/examples/alpine-ts/server/routes/listbox.tsx
@@ -0,0 +1,49 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, listboxControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(listboxControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/listbox.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-listbox:collection="{items: $selectData}"
+          x-listbox={`{collection, id: $id('listbox'), ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="listbox">
+            <div x-listbox:root>
+              <label x-listbox:label>Label</label>
+              <ul x-listbox:content>
+                <template x-for="item in $selectData" x-bind:key="item.value">
+                  <li x-listbox:item="{ item }">
+                    <span x-listbox:item-text="{ item }" x-text="item.label"></span>
+                    <span x-listbox:item-indicator="{ item }">✓</span>
+                  </li>
+                </template>
+              </ul>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={listboxControls} state={state} slot="controls" />
+            <StateVisualizer label="listbox" context={["highlightedValue"]} />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/marquee.tsx b/examples/alpine-ts/server/routes/marquee.tsx
new file mode 100644
index 0000000000..d339431ecb
--- /dev/null
+++ b/examples/alpine-ts/server/routes/marquee.tsx
@@ -0,0 +1,62 @@
+import { defineHandler } from "nitro/deps/h3"
+import { getControlDefaults, marqueeControls, marqueeData } from "@zag-js/shared"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(marqueeControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/marquee.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-marquee={`{id: $id('marquee'), spacing: '2rem', ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="marquee">
+            <div x-marquee:root>
+              <div x-marquee:edge="{side: 'start'}" />
+
+              <div x-marquee:viewport>
+                <template x-for="(_, index) in Array.from({length: $marquee().contentCount})" x-bind:key="index">
+                  <div x-marquee:content>
+                    {marqueeData.map((item) => (
+                      <div x-marquee:item>
+                        <span class="marquee-logo">{item.logo}</span>
+                        <span class="marquee-name">{item.name}</span>
+                      </div>
+                    ))}
+                  </div>
+                </template>
+              </div>
+
+              <div x-marquee:edge="{side: 'end'}" />
+            </div>
+
+            <div class="controls">
+              <button x-on:click="$marquee().pause()">Pause</button>
+              <button x-on:click="$marquee().resume()">Resume</button>
+              <button x-on:click="$marquee().togglePause()">Toggle</button>
+              <span x-text="'Status: ' + ($marquee().paused ? 'Paused' : 'Playing')"></span>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={marqueeControls} state={state} slot="controls" />
+            <StateVisualizer label="marquee" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/menu-options.tsx b/examples/alpine-ts/server/routes/menu-options.tsx
new file mode 100644
index 0000000000..e604de1852
--- /dev/null
+++ b/examples/alpine-ts/server/routes/menu-options.tsx
@@ -0,0 +1,58 @@
+import { defineHandler } from "nitro/h3"
+import { menuControls, getControlDefaults } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(menuControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/menu.ts"></script>
+      </Head>
+
+      <body>
+        <div class="page" x-data="{order: '', type: []}" x-menu="{id: $id('menu')}">
+          <Nav pathname={event.url.pathname} />
+
+          <main>
+            <div>
+              <button data-testid="trigger" x-menu:trigger>
+                Actions <span x-menu:indicator>▾</span>
+              </button>
+
+              <template x-teleport="body">
+                <div x-menu:positioner>
+                  <div x-menu:content>
+                    <template x-data="radios" x-for="item in radios" x-bind:key="item.value">
+                      <div x-menu:option-item="item">
+                        <span x-menu:item-indicator="item">✅</span>
+                        <span x-menu:item-text="item" x-text="item.label"></span>
+                      </div>
+                    </template>
+                    <hr />
+                    <template x-data="checkboxes" x-for="item in checkboxes" x-bind:key="item.value">
+                      <div x-menu:option-item="item">
+                        <span x-menu:item-indicator="item">✅</span>
+                        <span x-menu:item-text="item" x-text="item.label"></span>
+                      </div>
+                    </template>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={menuControls} state={state} slot="controls" />
+            <StateVisualizer label="menu" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/menu-overflow.tsx b/examples/alpine-ts/server/routes/menu-overflow.tsx
new file mode 100644
index 0000000000..2b5d6a3316
--- /dev/null
+++ b/examples/alpine-ts/server/routes/menu-overflow.tsx
@@ -0,0 +1,41 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+
+const items = Array.from({ length: 40 }, (_, i) => ({
+  label: `Item ${i}`,
+  value: `item-${i}`,
+}))
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/menu.ts"></script>
+      </Head>
+
+      <body>
+        <div class="page" x-data x-menu="{id: $id('menu')}">
+          <Nav pathname={event.url.pathname} />
+
+          <main>
+            <div>
+              <button x-menu:trigger>
+                Actions <span x-menu:indicator>▾</span>
+              </button>
+              <template x-if="$menu().open">
+                <div x-menu:positioner>
+                  <ul x-menu:content style={{ maxHeight: "300px", overflowY: "auto" }}>
+                    {items.map((item) => (
+                      <li x-menu:item={`{value: '${item.value}'}`}>{item.label}</li>
+                    ))}
+                  </ul>
+                </div>
+              </template>
+            </div>
+          </main>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/menu.tsx b/examples/alpine-ts/server/routes/menu.tsx
new file mode 100644
index 0000000000..575c1b9a33
--- /dev/null
+++ b/examples/alpine-ts/server/routes/menu.tsx
@@ -0,0 +1,52 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, menuControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(menuControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/menu.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-menu={`{id: $id('menu'), onSelect: console.log, ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main>
+            <div>
+              <button x-menu:trigger>
+                Actions <span x-menu:indicator>▾</span>
+              </button>
+              <template x-if="$menu().open">
+                <div x-menu:positioner>
+                  <ul x-menu:content>
+                    <li x-menu:item="{value: 'edit'}">Edit</li>
+                    <li x-menu:item="{value: 'duplicate'}">Duplicate</li>
+                    <li x-menu:item="{value: 'delete'}">Delete</li>
+                    <li x-menu:item="{value: 'export'}">Export...</li>
+                  </ul>
+                </div>
+              </template>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={menuControls} state={state} slot="controls" />
+            <StateVisualizer label="menu" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/number-input.tsx b/examples/alpine-ts/server/routes/number-input.tsx
new file mode 100644
index 0000000000..e9fd6b3001
--- /dev/null
+++ b/examples/alpine-ts/server/routes/number-input.tsx
@@ -0,0 +1,53 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, numberInputControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(numberInputControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/number-input.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['number-input']"
+          x-number-input={`{id: $id('number-input'), ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main>
+            <div x-number-input:root>
+              <div data-testid="scrubber" x-number-input:scrubber />
+              <label data-testid="label" x-number-input:label>
+                Enter number:
+              </label>
+              <div x-number-input:control>
+                <button data-testid="dec-button" x-number-input:decrement-trigger>
+                  DEC
+                </button>
+                <input data-testid="input" x-number-input:input />
+                <button data-testid="inc-button" x-number-input:increment-trigger>
+                  INC
+                </button>
+              </div>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={numberInputControls} state={state} slot="controls" />
+            <StateVisualizer label="number-input" omit={["formatter", "parser"]} />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/pagination.tsx b/examples/alpine-ts/server/routes/pagination.tsx
new file mode 100644
index 0000000000..2becc89b5f
--- /dev/null
+++ b/examples/alpine-ts/server/routes/pagination.tsx
@@ -0,0 +1,101 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, paginationControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(paginationControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/pagination.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify({ ...state, details: {} })}
+          x-id="['pagination']"
+          x-pagination={`{
+            id: $id('pagination'),
+            count: $paginationData.length,
+            onPageChange(d) {
+              details = d
+            },
+            ${Object.keys(state)}
+          }`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="pagination">
+            <table>
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>FIRST NAME</th>
+                  <th>LAST NAME</th>
+                  <th>EMAIL</th>
+                  <th>PHONE</th>
+                </tr>
+              </thead>
+              <tbody>
+                <template x-for="item in $pagination().slice($paginationData)">
+                  <tr>
+                    <td x-text="item.id"></td>
+                    <td x-text="item.first_name"></td>
+                    <td x-text="item.last_name"></td>
+                    <td x-text="item.email"></td>
+                    <td x-text="item.phone"></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+            <template x-if="$pagination().totalPages > 1">
+              <nav x-pagination:root>
+                <ul>
+                  <li>
+                    <button x-pagination:prev-trigger>Previous</button>
+                  </li>
+                  <template
+                    x-for="(page, i) in $pagination().pages"
+                    x-bind:key="page.type === 'page' ? page.value : ('ellipsis-' + i)"
+                  >
+                    <li>
+                      <template x-if="page.type === 'page'">
+                        <button
+                          x-bind:data-testid="'item-' + page.value"
+                          x-pagination:item="page"
+                          x-text="page.value"
+                        ></button>
+                      </template>
+                      <template x-if="page.type !== 'page'">
+                        <span x-pagination:ellipsis="{index: i}">&#8230;</span>
+                      </template>
+                    </li>
+                  </template>
+                  <li>
+                    <button x-pagination:next-trigger>Next</button>
+                  </li>
+                </ul>
+              </nav>
+            </template>
+
+            <div class="output">
+              <p>"OpenChange Details"</p>
+              <pre data-testid="output" x-text="JSON.stringify(details, null, 2)"></pre>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={paginationControls} state={state} slot="controls" />
+            <StateVisualizer label="pagination" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/password-input.tsx b/examples/alpine-ts/server/routes/password-input.tsx
new file mode 100644
index 0000000000..504d3cc4cf
--- /dev/null
+++ b/examples/alpine-ts/server/routes/password-input.tsx
@@ -0,0 +1,47 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, passwordInputControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(passwordInputControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/password-input.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['password-input']"
+          x-password-input={`{id: $id('password-input'), ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="password-input">
+            <div x-password-input:root>
+              <label x-password-input:label>Password</label>
+              <div x-password-input:control>
+                <input x-password-input:input />
+                <button x-password-input:visibility-trigger>
+                  <span x-password-input:indicator x-html="$passwordInput().visible ? $EyeIcon : $EyeOffIcon"></span>
+                </button>
+              </div>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={passwordInputControls} state={state} slot="controls" />
+            <StateVisualizer label="password-input" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/pin-input.tsx b/examples/alpine-ts/server/routes/pin-input.tsx
new file mode 100644
index 0000000000..fe66535d8e
--- /dev/null
+++ b/examples/alpine-ts/server/routes/pin-input.tsx
@@ -0,0 +1,59 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, pinInputControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(pinInputControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/pin-input.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['pin-input']"
+          x-pin-input={`{name: 'test', id: $id('pin-input'), count: 3, ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="pin-input">
+            <form
+              x-on:submit="(e) => {
+                e.preventDefault()
+                const formData = $serialize(e.currentTarget, { hash: true })
+                console.log(formData)
+              }"
+            >
+              <div x-pin-input:root>
+                <label x-pin-input:label>Enter code:</label>
+                <div x-pin-input:control>
+                  <template x-for="index in $pinInput().items" x-bind:key="index">
+                    <input x-bind:data-testid="'input-' + (index + 1)" x-pin-input:input="{ index }" />
+                  </template>
+                </div>
+                <input x-pin-input:hidden-input />
+              </div>
+              <button data-testid="clear-button" x-on:click="$pinInput().clearValue">
+                Clear
+              </button>
+              <button x-on:click="$pinInput().focus">Focus</button>
+            </form>
+          </main>
+
+          <Toolbar>
+            <Controls config={pinInputControls} state={state} slot="controls" />
+            <StateVisualizer label="pin-input" context={["value", "focusedIndex"]} />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/popper.tsx b/examples/alpine-ts/server/routes/popper.tsx
new file mode 100644
index 0000000000..82d3979af7
--- /dev/null
+++ b/examples/alpine-ts/server/routes/popper.tsx
@@ -0,0 +1,34 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/popper.ts"></script>
+      </Head>
+
+      <body>
+        <div class="page">
+          <Nav pathname={event.url.pathname} />
+
+          <div
+            x-data="{positioned: {}}"
+            x-init="$getPlacement($refs.reference, $refs.floating, {
+              placement: 'right-start',
+              onComplete(data) {
+                positioned = data
+              },
+            })"
+          >
+            <button x-ref="reference">Hello StackBlitz!</button>
+            <div x-bind:style="$getPlacementStyles(positioned).floating" x-ref="floating">
+              Start editing to see some magic happen :)
+            </div>
+          </div>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/presence.tsx b/examples/alpine-ts/server/routes/presence.tsx
new file mode 100644
index 0000000000..babedc9941
--- /dev/null
+++ b/examples/alpine-ts/server/routes/presence.tsx
@@ -0,0 +1,33 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/presence.ts"></script>
+      </Head>
+
+      <body>
+        <div class="page" x-data="{present: false}" x-presence="{present}">
+          <Nav pathname={event.url.pathname} />
+
+          <main class="presence">
+            <button x-on:click="present = ! present">Toggle</button>
+            <template x-if="$presence().present">
+              <div
+                x-ref="presence"
+                x-init="$presence().setNode($refs.presence)"
+                data-scope="presence"
+                data-state="$presence().skip ? undefined : present ? 'open' : 'closed'"
+              >
+                Content
+              </div>
+            </template>
+          </main>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/progress.tsx b/examples/alpine-ts/server/routes/progress.tsx
new file mode 100644
index 0000000000..2bc55df8b6
--- /dev/null
+++ b/examples/alpine-ts/server/routes/progress.tsx
@@ -0,0 +1,58 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, progressControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(progressControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/progress.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['progress']"
+          x-progress={`{id: $id('progress'), ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="progress">
+            <div x-progress:root>
+              <div x-progress:label>Upload progress</div>
+
+              <svg x-progress:circle>
+                <circle x-progress:circle-track />
+                <circle x-progress:circle-range />
+              </svg>
+
+              <div x-progress:track>
+                <div x-progress:range />
+              </div>
+
+              <div x-progress:value-text x-text="$progress().valueAsString"></div>
+
+              <div>
+                <button x-on:click="$progress().setValue(($progress().value ?? 0) - 20)">Decrease</button>
+                <button x-on:click="$progress().setValue(($progress().value ?? 0) + 20)">Increase</button>
+                <button x-on:click="$progress().setValue(null)">Indeterminate</button>
+              </div>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={progressControls} state={state} slot="controls" />
+            <StateVisualizer label="progress" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/qr-code-form.tsx b/examples/alpine-ts/server/routes/qr-code-form.tsx
new file mode 100644
index 0000000000..ad621d41d1
--- /dev/null
+++ b/examples/alpine-ts/server/routes/qr-code-form.tsx
@@ -0,0 +1,51 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/qr-code.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data="{url: '', image: ''}"
+          x-id="['qr-code']"
+          x-qr-code="{id: $id('qr-code'), encoding: {ecc: 'H'}, value: url}"
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="qr-code">
+            <form
+              x-on:submit="(e) => {
+                e.preventDefault()
+                const formData = new FormData(e.currentTarget)
+                const u = formData.get('url')?.toString()
+                if (u) url = u
+              }"
+            >
+              <input type="text" name="url" />
+              <button type="submit">Generate</button>
+            </form>
+
+            <template x-if="url">
+              <div x-qr-code:root>
+                <svg x-qr-code:frame>
+                  <path x-qr-code:pattern />
+                </svg>
+              </div>
+            </template>
+
+            <button x-on:click="$qrCode().getDataUrl('image/jpeg').then((i) => image = i)">Preview</button>
+            <template x-if="image">
+              <img x-bind:src="image" alt="QR Code" height={120} width={120} />
+            </template>
+          </main>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/qr-code.tsx b/examples/alpine-ts/server/routes/qr-code.tsx
new file mode 100644
index 0000000000..bf9c4a1a29
--- /dev/null
+++ b/examples/alpine-ts/server/routes/qr-code.tsx
@@ -0,0 +1,45 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, qrCodeControls } from "@zag-js/shared"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { Controls } from "../components/controls"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(qrCodeControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/qr-code.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['qr-code']"
+          x-qr-code={`{id: $id('qr-code'), encoding: {ecc: 'H'}, ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+          <main class="qr-code">
+            <div x-qr-code:root>
+              <svg x-qr-code:frame>
+                <path x-qr-code:pattern />
+              </svg>
+              <div x-qr-code:overlay>
+                <img src="https://avatars.githubusercontent.com/u/54212428?s=88&v=4" alt="" />
+              </div>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={qrCodeControls} state={state} slot="controls" />
+            <StateVisualizer label="qr-code" omit={["encoded"]} />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/radio-group.tsx b/examples/alpine-ts/server/routes/radio-group.tsx
new file mode 100644
index 0000000000..e49b80c10d
--- /dev/null
+++ b/examples/alpine-ts/server/routes/radio-group.tsx
@@ -0,0 +1,71 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, radioControls, radioData } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(radioControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/radio-group.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['radio']"
+          x-radio={`{id: $id('radio'), name: 'fruit', ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="radio">
+            <form
+              x-on:change="(e) => {
+                const result = $serialize(e.currentTarget, { hash: true })
+                console.log(result)
+              }"
+            >
+              <fieldset disabled={false}>
+                <div x-radio:root>
+                  <h3 x-radio:label>Fruits</h3>
+                  <div x-radio:indicator />
+                  {radioData.map((opt) => (
+                    <label data-testid={`radio-${opt.id}`} x-radio:item={`{value: '${opt.id}'}`}>
+                      <div data-testid={`control-${opt.id}`} x-radio:item-control={`{value: '${opt.id}'}`} />
+                      <span data-testid={`label-${opt.id}`} x-radio:item-text={`{value: '${opt.id}'}`}>
+                        {opt.label}
+                      </span>
+                      <input data-testid={`input-${opt.id}`} x-radio:item-hidden-input={`{value: '${opt.id}'}`} />
+                    </label>
+                  ))}
+                </div>
+
+                <button type="reset">Reset</button>
+                <button type="button" x-on:click="$radio().clearValue()">
+                  Clear
+                </button>
+                <button type="button" x-on:click="$radio().setValue('mango')">
+                  Set to Mangoes
+                </button>
+                <button type="button" x-on:click="$radio().focus()">
+                  Focus
+                </button>
+              </fieldset>
+            </form>
+          </main>
+
+          <Toolbar>
+            <Controls config={radioControls} state={state} slot="controls" />
+            <StateVisualizer label="radio" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/range-slider.tsx b/examples/alpine-ts/server/routes/range-slider.tsx
new file mode 100644
index 0000000000..c3ba39e24d
--- /dev/null
+++ b/examples/alpine-ts/server/routes/range-slider.tsx
@@ -0,0 +1,75 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, sliderControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(sliderControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/slider.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['slider']"
+          x-slider={`{
+            id: $id('slider'),
+            name: 'quantity',
+            defaultValue: [10, 60],
+            ${Object.keys(state)},
+          }`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="slider">
+            <form
+              // ensure we can read the value within forms
+              x-on:change="(e) => {
+                const formData = $serialize(e.currentTarget, { hash: true })
+                console.log(formData)
+              }"
+            >
+              <div x-slider:root>
+                <div>
+                  <label x-slider:label>Quantity:</label>
+                  <output x-slider:value-text x-text="$slider().value.join(' - ')"></output>
+                </div>
+                <div class="control-area">
+                  <div x-slider:control>
+                    <div x-slider:track>
+                      <div x-slider:range />
+                    </div>
+                    <template x-for="(_, index) in $slider().value" x-bind:key="index">
+                      <div x-slider:thumb="{ index }">
+                        <input x-slider:hidden-input="{ index }" />
+                      </div>
+                    </template>
+                  </div>
+                  <div x-slider:marker-group>
+                    <span x-slider:marker="{value: 10}">*</span>
+                    <span x-slider:marker="{value: 30}">*</span>
+                    <span x-slider:marker="{value: 50}">*</span>
+                    <span x-slider:marker="{value: 90}">*</span>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </main>
+
+          <Toolbar>
+            <Controls config={sliderControls} state={state} slot="controls" />
+            <StateVisualizer label="slider" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/rating-group.tsx b/examples/alpine-ts/server/routes/rating-group.tsx
new file mode 100644
index 0000000000..71b92930e8
--- /dev/null
+++ b/examples/alpine-ts/server/routes/rating-group.tsx
@@ -0,0 +1,87 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, ratingControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+function HalfStar() {
+  return (
+    <svg viewBox="0 0 273 260" data-part="star">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M135.977 214.086L52.1294 259.594L69.6031 165.229L0 99.1561L95.1465 86.614L135.977 1.04785V214.086Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M135.977 213.039L219.826 258.546L202.352 164.181L271.957 98.1082L176.808 85.5661L135.977 0V213.039Z"
+        fill="#bdbdbd"
+      />
+    </svg>
+  )
+}
+
+function Star() {
+  return (
+    <svg viewBox="0 0 273 260" data-part="star">
+      <path
+        d="M136.5 0L177.83 86.614L272.977 99.1561L203.374 165.229L220.847 259.594L136.5 213.815L52.1528 259.594L69.6265 165.229L0.0233917 99.1561L95.1699 86.614L136.5 0Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(ratingControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/rating-group.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['rating']"
+          x-rating={`{id: $id('rating'), defaultValue: 2.5, ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="rating">
+            <form action="">
+              <div x-rating:root>
+                <label x-rating:label>Rate:</label>
+                <div x-rating:control>
+                  <template x-for="index in $rating().items" x-bind:key="index">
+                    <span x-rating:item="{ index }">
+                      <template x-if="$rating().getItemState({ index }).half">
+                        <HalfStar />
+                      </template>
+                      <template x-if="! $rating().getItemState({ index }).half">
+                        <Star />
+                      </template>
+                    </span>
+                  </template>
+                </div>
+                <input x-rating:hidden-input data-testid="hidden-input" />
+              </div>
+              <button type="reset">Reset</button>
+            </form>
+          </main>
+
+          <Toolbar>
+            <Controls config={ratingControls} state={state} slot="controls" />
+            <StateVisualizer label="rating" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/scroll-area.tsx b/examples/alpine-ts/server/routes/scroll-area.tsx
new file mode 100644
index 0000000000..2e244e4d69
--- /dev/null
+++ b/examples/alpine-ts/server/routes/scroll-area.tsx
@@ -0,0 +1,58 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, scrollAreaControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(scrollAreaControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/scroll-area.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['scroll-area']"
+          x-scroll-area={`{id: $id('scroll-area'), ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="scroll-area">
+            <button x-on:click="$scrollArea().scrollToEdge({edge: 'bottom'})">Scroll to bottom</button>
+            <div x-scroll-area:root>
+              <div x-scroll-area:viewport>
+                <div x-scroll-area:content style={{ minWidth: "800px" }}>
+                  {Array.from({ length: 100 }).map((_, index) => (
+                    <div>{index}</div>
+                  ))}
+                </div>
+              </div>
+              <template x-if="$scrollArea().hasOverflowY">
+                <div x-scroll-area:scrollbar="{orientation: 'vertical'}">
+                  <div x-scroll-area:thumb="{orientation: 'vertical'}" />
+                </div>
+              </template>
+              <template x-if="$scrollArea().hasOverFlowX">
+                <div x-scroll-area:scrollbar="{orientation: 'horizontal'}">
+                  <div x-scroll-area:thumb="{orientation: 'horizontal'}" />
+                </div>
+              </template>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={scrollAreaControls} state={state} slot="controls" />
+            <StateVisualizer label="scroll-area" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/segment-control.tsx b/examples/alpine-ts/server/routes/segment-control.tsx
new file mode 100644
index 0000000000..4542b2407b
--- /dev/null
+++ b/examples/alpine-ts/server/routes/segment-control.tsx
@@ -0,0 +1,54 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, radioControls, radioData } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(radioControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/radio-group.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-radio={`{
+            id: $id('radio'),
+            name: 'fruit',
+            orientation: 'horizontal',
+            ${Object.keys(state)},
+          }`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="segmented-control">
+            <div x-radio:root>
+              <div x-radio:indicator />
+              {radioData.map((opt) => (
+                <label data-testid={`radio-${opt.id}`} x-radio:item={`{value: '${opt.id}'}`}>
+                  <span data-testid={`label-${opt.id}`} x-radio:item-text={`{value: '${opt.id}'}`}>
+                    {opt.label}
+                  </span>
+                  <input data-testid={`input-${opt.id}`} x-radio:item-hidden-input={`{value: '${opt.id}'}`} />
+                </label>
+              ))}
+            </div>
+            <button x-on:click="$radio().clearValue()">reset</button>
+          </main>
+
+          <Toolbar>
+            <Controls config={radioControls} state={state} slot="controls" />
+            <StateVisualizer label="radio" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/select.tsx b/examples/alpine-ts/server/routes/select.tsx
new file mode 100644
index 0000000000..1db3fcddc1
--- /dev/null
+++ b/examples/alpine-ts/server/routes/select.tsx
@@ -0,0 +1,95 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, selectControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(selectControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/select.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['select']"
+          x-select:collection="{items: $selectData}"
+          x-select={`{
+            collection,
+            id: $id('select'),
+            name: 'country',
+            onHighlightChange(details) {
+              console.log('onHighlightChange', details)
+            },
+            onValueChange(details) {
+              console.log('onChange', details)
+            },
+            onOpenChange(details) {
+              console.log('onOpenChange', details)
+            },
+            ${Object.keys(state)},
+          }`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="select">
+            <div x-select:root>
+              <label x-select:label>Label</label>
+              {/* control */}
+              <div x-select:control>
+                <button x-select:trigger>
+                  <span x-text="$select().valueAsString || 'Select option'"></span>
+                  <span x-select:indicator>▼</span>
+                </button>
+                <button x-select:clear-trigger>X</button>
+              </div>
+
+              <form
+                x-on:change="(e) => {
+                  const formData = $serialize(e.currentTarget, { hash: true })
+                  console.log(formData)
+                }"
+              >
+                {/* Hidden select */}
+                <select x-select:hidden-select>
+                  <template x-if="$select().empty">
+                    <option value="" />
+                  </template>
+                  <template x-for="option in $selectData" x-bind:key="option.value">
+                    <option x-bind:value="option.value" x-text="option.label"></option>
+                  </template>
+                </select>
+              </form>
+
+              {/* UI select */}
+              <template x-teleport="body">
+                <div x-select:positioner>
+                  <ul x-select:content>
+                    <template x-for="item in $selectData" x-bind:key="item.value">
+                      <li x-select:item="{ item }">
+                        <span x-select:item-text="{ item }" x-text="item.label"></span>
+                        <span x-select:item-indicator="{ item }">✓</span>
+                      </li>
+                    </template>
+                  </ul>
+                </div>
+              </template>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={selectControls} state={state} slot="controls" />
+            <StateVisualizer label="select" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/slider.tsx b/examples/alpine-ts/server/routes/slider.tsx
new file mode 100644
index 0000000000..fa2ebd6fdf
--- /dev/null
+++ b/examples/alpine-ts/server/routes/slider.tsx
@@ -0,0 +1,78 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, sliderControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(sliderControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/slider.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['slider']"
+          x-slider={`{
+            id: $id('slider'),
+            name: 'quantity',
+            defaultValue: [0],
+            ${Object.keys(state)},
+            thumbSize: { width: 20, height: 20 },
+          }`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="slider">
+            <form
+              // ensure we can read the value within forms
+              x-on:change="(e) => {
+                const formData = $serialize(e.currentTarget, { hash: true })
+                console.log(formData)
+              }"
+            >
+              <div x-slider:root>
+                <div>
+                  <label data-testid="label" x-slider:label>
+                    Slider Label
+                  </label>
+                  <output data-testid="output" x-slider:value-text x-text="$slider().value"></output>
+                </div>
+                <div class="control-area">
+                  <div x-slider:control>
+                    <div data-testid="track" x-slider:track>
+                      <div x-slider:range />
+                    </div>
+                    <span x-slider:dragging-indicator="{index: 0}" x-text="$slider().getThumbValue(0)"></span>
+                    <template x-for="(_, index) in $slider().value" x-bind:key="index">
+                      <div x-slider:thumb="{ index }">
+                        <input x-slider:hidden-input="{ index }" />
+                      </div>
+                    </template>
+                  </div>
+                  <div x-slider:marker-group>
+                    <span x-slider:marker="{value: 10}">*</span>
+                    <span x-slider:marker="{value: 30}">*</span>
+                    <span x-slider:marker="{value: 90}">*</span>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </main>
+
+          <Toolbar>
+            <Controls config={sliderControls} state={state} slot="controls" />
+            <StateVisualizer label="slider" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/steps.tsx b/examples/alpine-ts/server/routes/steps.tsx
new file mode 100644
index 0000000000..a7c8a315de
--- /dev/null
+++ b/examples/alpine-ts/server/routes/steps.tsx
@@ -0,0 +1,66 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, stepsControls, stepsData } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(stepsControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/steps.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['steps']"
+          x-steps={`{id: $id('steps'), count: ${stepsData.length}, ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="steps">
+            <div x-steps:root>
+              <div x-steps:list>
+                {stepsData.map((step, index) => (
+                  <div x-steps:item={`{index: ${index}}`}>
+                    <button x-steps:trigger={`{index: ${index}}`}>
+                      <div x-steps:indicator={`{index: ${index}}`}>{index + 1}</div>
+                      <span>{step.title}</span>
+                    </button>
+                    <div x-steps:separator={`{index: ${index}}`} />
+                  </div>
+                ))}
+              </div>
+
+              {stepsData.map((step, index) => (
+                <div x-steps:content={`{index: ${index}}`}>
+                  {step.title} - {step.description}
+                </div>
+              ))}
+
+              <div x-steps:content={`{index: ${stepsData.length}}`}>
+                Steps Complete - Thank you for filling out the form!
+              </div>
+
+              <div>
+                <button x-steps:prev-trigger>Back</button>
+                <button x-steps:next-trigger>Next</button>
+              </div>
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={stepsControls} state={state} slot="controls" />
+            <StateVisualizer label="steps" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/switch.tsx b/examples/alpine-ts/server/routes/switch.tsx
new file mode 100644
index 0000000000..5d124e0eb5
--- /dev/null
+++ b/examples/alpine-ts/server/routes/switch.tsx
@@ -0,0 +1,45 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, switchControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(switchControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/switch.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['switch']"
+          x-switch={`{id: $id('switch'), name: 'switch', ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="switch">
+            <label x-switch:root>
+              <input x-switch:hidden-input data-testid="hidden-input" />
+              <span x-switch:control>
+                <span x-switch:thumb />
+              </span>
+              <span x-switch:label x-text="'Feature is ' + ($switch().checked ? 'enabled' : 'disabled')"></span>
+            </label>
+          </main>
+
+          <Toolbar>
+            <Controls config={switchControls} state={state} slot="controls" />
+            <StateVisualizer label="switch" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/tabs.tsx b/examples/alpine-ts/server/routes/tabs.tsx
new file mode 100644
index 0000000000..ccddabb2cb
--- /dev/null
+++ b/examples/alpine-ts/server/routes/tabs.tsx
@@ -0,0 +1,54 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, tabsControls, tabsData } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(tabsControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/tabs.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['tabs']"
+          x-tabs={`{id: $id('tabs'), defaultValue: 'nils', ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="tabs">
+            <div x-tabs:root>
+              <div x-tabs:indicator />
+              <div x-tabs:list>
+                {tabsData.map((data) => (
+                  <button x-tabs:trigger={`{value: '${data.id}'}`} data-testid={`${data.id}-tab`}>
+                    {data.label}
+                  </button>
+                ))}
+              </div>
+              {tabsData.map((data) => (
+                <div x-tabs:content={`{value: '${data.id}'}`} data-testid={`${data.id}-tab-panel`}>
+                  <p>{data.content}</p>
+                  {data.id === "agnes" ? <input placeholder="Agnes" /> : null}
+                </div>
+              ))}
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={tabsControls} state={state} slot="controls" />
+            <StateVisualizer label="tabs" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/tags-input.tsx b/examples/alpine-ts/server/routes/tags-input.tsx
new file mode 100644
index 0000000000..f8643fbead
--- /dev/null
+++ b/examples/alpine-ts/server/routes/tags-input.tsx
@@ -0,0 +1,70 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, tagsInputControls } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(tagsInputControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/tags-input.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['tags-input']"
+          x-tags-input={`{id: $id('tags-input'), defaultValue: ['React', 'Vue'], ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="tags-input">
+            <div x-tags-input:root>
+              <label x-tags-input:label>Enter frameworks:</label>
+              <div x-tags-input:control>
+                <template
+                  x-for="(value, index) in $tagsInput().value"
+                  x-bind:key="$toDashCase(value) + '-tag-' + index"
+                >
+                  <span x-tags-input:item="{index, value}">
+                    <div x-bind:data-testid="$toDashCase(value) + '-tag'" x-tags-input:item-preview="{index, value}">
+                      <span
+                        x-bind:data-testid="$toDashCase(value) + '-valuetext'"
+                        x-tags-input:item-text="{index, value}"
+                        x-text="value"
+                      ></span>
+                      <button
+                        x-bind:data-testid="$toDashCase(value) + '-close-button'"
+                        x-tags-input:item-delete-trigger="{index, value}"
+                      >
+                        &#x2715;
+                      </button>
+                    </div>
+                    <input
+                      x-bind:data-testid="$toDashCase(value) + '-input'"
+                      x-tags-input:item-input="{index, value}"
+                    />
+                  </span>
+                </template>
+                <input data-testid="input" placeholder="add tag" x-tags-input:input />
+                <button x-tags-input:clear-trigger>X</button>
+              </div>
+              <input x-tags-input:hidden-input />
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={tagsInputControls} state={state} slot="controls" />
+            <StateVisualizer label="tags-input" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/timer-countdown.tsx b/examples/alpine-ts/server/routes/timer-countdown.tsx
new file mode 100644
index 0000000000..2ae5cc0406
--- /dev/null
+++ b/examples/alpine-ts/server/routes/timer-countdown.tsx
@@ -0,0 +1,59 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/timer.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data
+          x-id="['timer']"
+          x-timer="{
+            id: $id('timer'),
+            countdown: true,
+            autoStart: true,
+            startMs: $parse({ days: 2, seconds: 10 }),
+            onComplete() {
+              console.log('Timer completed')
+            },
+          }"
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="timer">
+            <div x-timer:root>
+              <div x-timer:area>
+                <div x-timer:item="{type: 'days'}" x-text="$timer().formattedTime.days"></div>
+                <div x-timer:separator>:</div>
+                <div x-timer:item="{type: 'hours'}" x-text="$timer().formattedTime.hours"></div>
+                <div x-timer:separator>:</div>
+                <div x-timer:item="{type: 'minutes'}" x-text="$timer().formattedTime.minutes"></div>
+                <div x-timer:separator>:</div>
+                <div x-timer:item="{type: 'seconds'}" x-text="$timer().formattedTime.seconds"></div>
+              </div>
+            </div>
+
+            <div x-timer:control>
+              <button x-timer:action-trigger="{action: 'start'}">START</button>
+              <button x-timer:action-trigger="{action: 'pause'}">PAUSE</button>
+              <button x-timer:action-trigger="{action: 'resume'}">RESUME</button>
+              <button x-timer:action-trigger="{action: 'reset'}">RESET</button>
+            </div>
+          </main>
+
+          <Toolbar controls={false} viz>
+            <StateVisualizer label="timer" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/timer-stopwatch.tsx b/examples/alpine-ts/server/routes/timer-stopwatch.tsx
new file mode 100644
index 0000000000..a901519418
--- /dev/null
+++ b/examples/alpine-ts/server/routes/timer-stopwatch.tsx
@@ -0,0 +1,46 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/timer.ts"></script>
+      </Head>
+
+      <body>
+        <div class="page" x-data x-id="['timer']" x-timer="{id: $id('timer'), autoStart: true}">
+          <Nav pathname={event.url.pathname} />
+
+          <main class="timer">
+            <div x-timer:root>
+              <div x-timer:area>
+                <div x-timer:item="{type: 'days'}" x-text="$timer().formattedTime.days"></div>
+                <div x-timer:separator>:</div>
+                <div x-timer:item="{type: 'hours'}" x-text="$timer().formattedTime.hours"></div>
+                <div x-timer:separator>:</div>
+                <div x-timer:item="{type: 'minutes'}" x-text="$timer().formattedTime.minutes"></div>
+                <div x-timer:separator>:</div>
+                <div x-timer:item="{type: 'seconds'}" x-text="$timer().formattedTime.seconds"></div>
+              </div>
+
+              <div x-timer:control>
+                <button x-timer:action-trigger="{action: 'start'}">START</button>
+                <button x-timer:action-trigger="{action: 'pause'}">PAUSE</button>
+                <button x-timer:action-trigger="{action: 'resume'}">RESUME</button>
+                <button x-timer:action-trigger="{action: 'reset'}">RESET</button>
+              </div>
+            </div>
+          </main>
+
+          <Toolbar controls={false} viz>
+            <StateVisualizer label="timer" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/toggle-group.tsx b/examples/alpine-ts/server/routes/toggle-group.tsx
new file mode 100644
index 0000000000..62f509008d
--- /dev/null
+++ b/examples/alpine-ts/server/routes/toggle-group.tsx
@@ -0,0 +1,44 @@
+import { defineHandler } from "nitro/h3"
+import { getControlDefaults, toggleGroupControls, toggleGroupData } from "@zag-js/shared"
+import { Controls } from "../components/controls"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const state = getControlDefaults(toggleGroupControls)
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/toggle-group.ts"></script>
+      </Head>
+
+      <body>
+        <div
+          class="page"
+          x-data={JSON.stringify(state)}
+          x-id="['toggle']"
+          x-toggle={`{id: $id('toggle'), ${Object.keys(state)}}`}
+        >
+          <Nav pathname={event.url.pathname} />
+
+          <main class="toggle-group">
+            <button>Outside</button>
+            <div x-toggle:root>
+              {toggleGroupData.map((item) => (
+                <button x-toggle:item={`{value: '${item.value}'}`}>{item.label}</button>
+              ))}
+            </div>
+          </main>
+
+          <Toolbar>
+            <Controls config={toggleGroupControls} state={state} slot="controls" />
+            <StateVisualizer label="toggle" context={["focusedId"]} />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/toggle.tsx b/examples/alpine-ts/server/routes/toggle.tsx
new file mode 100644
index 0000000000..aedf7c7c5e
--- /dev/null
+++ b/examples/alpine-ts/server/routes/toggle.tsx
@@ -0,0 +1,32 @@
+import { defineHandler } from "nitro/h3"
+import { Bold } from "lucide-static"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/toggle.ts"></script>
+      </Head>
+
+      <body>
+        <div class="page" x-data x-toggle="{}">
+          <Nav pathname={event.url.pathname} />
+
+          <main class="toggle">
+            <button x-toggle:root>
+              <span x-toggle:indicator>{html(Bold)}</span>
+            </button>
+          </main>
+
+          <Toolbar viz>
+            <StateVisualizer label="toggle" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/server/routes/tooltip.tsx b/examples/alpine-ts/server/routes/tooltip.tsx
new file mode 100644
index 0000000000..0c5b3db84c
--- /dev/null
+++ b/examples/alpine-ts/server/routes/tooltip.tsx
@@ -0,0 +1,58 @@
+import { defineHandler } from "nitro/h3"
+import { Head } from "../components/head"
+import { Nav } from "../components/nav"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+
+export default defineHandler((event) => {
+  const id = "tip-1"
+  const id2 = "tip-2"
+
+  return (
+    <html>
+      <Head>
+        <script type="module" src="/scripts/tooltip.ts"></script>
+      </Head>
+
+      <body>
+        <div class="page" x-data {...{ "x-tooltip.1": `{id: '${id}'}`, "x-tooltip.2": `{id: '${id2}'}` }}>
+          <Nav pathname={event.url.pathname} />
+
+          <main class="tooltip">
+            <div class="root">
+              <>
+                <button data-testid={`${id}-trigger`} {...{ "x-tooltip:trigger.1": "" }}>
+                  Hover me
+                </button>
+                <template x-if="$tooltip(1).open">
+                  <div {...{ "x-tooltip:positioner.1": "" }}>
+                    <div class="tooltip-content" data-testid={`${id}-tooltip`} {...{ "x-tooltip:content.1": "" }}>
+                      Tooltip
+                    </div>
+                  </div>
+                </template>
+              </>
+              <button data-testid={`${id2}-trigger`} {...{ "x-tooltip:trigger.2": "" }}>
+                Over me
+              </button>
+              <template x-if="$tooltip(2).open">
+                <template x-teleport="body">
+                  <div {...{ "x-tooltip:positioner.2": "" }}>
+                    <div class="tooltip-content" data-testid={`${id2}-tooltip`} {...{ "x-tooltip:content.2": "" }}>
+                      Tooltip 2
+                    </div>
+                  </div>
+                </template>
+              </template>
+            </div>
+          </main>
+
+          <Toolbar controls={false}>
+            <StateVisualizer label="tooltip-1" />
+            <StateVisualizer label="tooltip-2" />
+          </Toolbar>
+        </div>
+      </body>
+    </html>
+  )
+})
diff --git a/examples/alpine-ts/tsconfig.json b/examples/alpine-ts/tsconfig.json
new file mode 100644
index 0000000000..7d49f91d39
--- /dev/null
+++ b/examples/alpine-ts/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": ["nitro/tsconfig"],
+  "compilerOptions": {
+    "paths": {
+      "~/*": ["./*"]
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "mono-jsx"
+  }
+}
diff --git a/examples/alpine-ts/vite.config.ts b/examples/alpine-ts/vite.config.ts
new file mode 100644
index 0000000000..e6077b93fd
--- /dev/null
+++ b/examples/alpine-ts/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite"
+import { nitro } from "nitro/vite"
+
+export default defineConfig({
+  plugins: [nitro()],
+})
diff --git a/package.json b/package.json
index 56b10a8cb7..554e01301b 100644
--- a/package.json
+++ b/package.json
@@ -19,10 +19,12 @@
     "vue": "pnpm --filter \"./examples/nuxt-ts\"",
     "solid": "pnpm --filter \"./examples/solid-ts\"",
     "svelte": "pnpm --filter \"./examples/svelte-ts\"",
+    "alpine": "pnpm --filter \"./examples/alpine-ts\"",
     "start-react": "pnpm react dev",
     "start-vue": "pnpm vue dev",
     "start-solid": "pnpm solid dev",
     "start-svelte": "pnpm svelte dev",
+    "start-alpine": "pnpm alpine dev",
     "start-website": "pnpm website dev",
     "pw-report": "playwright show-report e2e/report",
     "pw-test": "cross-env FRAMEWORK=react playwright test",
@@ -30,6 +32,7 @@
     "e2e-react": "cross-env FRAMEWORK=react playwright test",
     "e2e-vue": "cross-env FRAMEWORK=vue playwright test",
     "e2e-solid": "cross-env FRAMEWORK=solid playwright test",
+    "e2e-alpine": "cross-env FRAMEWORK=alpine playwright test",
     "generate-machine": "plop machine && pnpm sync-pkgs",
     "generate-util": "plop utility && pnpm sync-pkgs",
     "typecheck": "pnpm packages -- typecheck",
diff --git a/playwright.config.ts b/playwright.config.ts
index e68b5c87ef..bc89f18178 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -34,6 +34,12 @@ export function getWebServer(): WebServer {
       url: "http://localhost:3003",
       reuseExistingServer: !CI,
     },
+    alpine: {
+      cwd: "./examples/alpine-ts",
+      command: "pnpm vite --port 3005",
+      url: "http://localhost:3005",
+      reuseExistingServer: !CI,
+    },
   }
 
   return frameworks[framework]