chakra-ui · niLPotential · Oct 1, 2025 · Oct 1, 2025 · Oct 1, 2025 · Oct 1, 2025
diff --git a/examples/alpine-ts/.gitignore b/examples/alpine-ts/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/alpine-ts/index.html b/examples/alpine-ts/index.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+  </head>
+  <body style="padding: 40px">
+    <h1>Alpine.js + Zag</h1>
+
+    <ul>
+      <li>
+        <a href="pages/accordion.html">Accordion</a>
+      </li>
+      <li>
+        <a href="pages/angle-slider.html">Angle Slider</a>
+      </li>
+      <li>
+        <a href="pages/avatar.html">Avatar</a>
+      </li>
+      <li>
+        <a href="pages/checkbox.html">Checkbox</a>
+      </li>
+      <li>
+        <a href="pages/combobox.html">Combobox</a>
+      </li>
+      <li>
+        <a href="pages/dialog.html">Dialog</a>
+      </li>
+      <li>
+        <a href="pages/popover.html">Popover</a>
+      </li>
+    </ul>
+  </body>
+</html>
diff --git a/examples/alpine-ts/package.json b/examples/alpine-ts/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "alpine-ts",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/alpinejs": "^3.13.11",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.7"
+  },
+  "dependencies": {
+    "@zag-js/accordion": "workspace:*",
+    "@zag-js/angle-slider": "workspace:*",
+    "@zag-js/avatar": "workspace:*",
+    "@zag-js/checkbox": "workspace:*",
+    "@zag-js/collection": "workspace:*",
+    "@zag-js/combobox": "workspace:*",
+    "@zag-js/core": "workspace:*",
+    "@zag-js/dialog": "workspace:*",
+    "@zag-js/popover": "workspace:*",
+    "@zag-js/shared": "workspace:*",
+    "@zag-js/types": "workspace:*",
+    "@zag-js/utils": "workspace:*",
+    "alpinejs": "^3.15.0"
+  }
+}
diff --git a/examples/alpine-ts/pages/accordion.html b/examples/alpine-ts/pages/accordion.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+    <script type="module" src="./accordion.ts"></script>
+  </head>
+  <body style="padding: 40px">
+    <h1>Accordion</h1>
+
+    <div x-data="{collapsible: true, multiple: false}">
+      <div>
+        <input type="checkbox" name="collapsible" id="collapsible" x-model="collapsible" />
+        <label for="collapsible">collapsible</label>
+      </div>
+      <div>
+        <input type="checkbox" name="multiple" id="multiple" x-model="multiple" />
+        <label for="multiple">multiple</label>
+      </div>
+
+      <div x-id="['accordion']" x-accordion="{collapsible, multiple, id: $id('accordion')}" x-accordion:root>
+        <template x-for="value in ['First', 'Second', 'Third']" :key="value">
+          <div x-accordion:item="{value}">
+            <h3>
+              <button x-accordion:item-trigger="{value}" x-text="value + ' Item'"></button>
+            </h3>
+            <div x-accordion:item-content="{value}" x-text="value + ' Content'"></div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/examples/alpine-ts/pages/accordion.ts b/examples/alpine-ts/pages/accordion.ts
@@ -0,0 +1,11 @@
+import "@zag-js/shared/src/style.css"
+
+import Alpine from "alpinejs"
+import * as accordion from "@zag-js/accordion"
+import { createZagPlugin } from "../src/plugin"
+
+Alpine.plugin(createZagPlugin("accordion", accordion))
+// @ts-ignore
+window.Alpine = Alpine
+// @ts-ignore
+window.Alpine.start()
diff --git a/examples/alpine-ts/pages/angle-slider.html b/examples/alpine-ts/pages/angle-slider.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+    <script type="module" src="./angle-slider.ts"></script>
+  </head>
+  <body style="padding: 40px">
+    <h1>Angle Slider</h1>
+
+    <div x-data="{disabled: false, readOnly: false, step: 1}">
+      <div>
+        <input type="checkbox" name="disabled" id="disabled" x-model="disabled" />
+        <label for="disabled">disabled</label>
+      </div>
+      <div>
+        <input type="checkbox" name="readOnly" id="readOnly" x-model="readOnly" />
+        <label for="readOnly">readOnly</label>
+      </div>
+      <div>
+        <input type="number" name="step" id="step" x-model="step" />
+        <label for="step">step</label>
+      </div>
+
+      <div
+        x-id="['angle-slider']"
+        x-angle-slider="{disabled,  readOnly, step, id: $id('angle-slider')}"
+        x-angle-slider:root
+      >
+        <label x-angle-slider:label>
+          <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>
+            <template x-for="value in [0, 45, 90, 135, 180, 225, 270, 315]" :key="value">
+              <div x-angle-slider:marker="{value}"></div>
+            </template>
+          </div>
+        </div>
+        <input x-angle-slider:hidden-input />
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/examples/alpine-ts/pages/angle-slider.ts b/examples/alpine-ts/pages/angle-slider.ts
@@ -0,0 +1,11 @@
+import "@zag-js/shared/src/style.css"
+
+import Alpine from "alpinejs"
+import * as angleSlider from "@zag-js/angle-slider"
+import { createZagPlugin } from "../src/plugin"
+
+Alpine.plugin(createZagPlugin("angle-slider", angleSlider))
+// @ts-ignore
+window.Alpine = Alpine
+// @ts-ignore
+window.Alpine.start()
diff --git a/examples/alpine-ts/pages/avatar.html b/examples/alpine-ts/pages/avatar.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+    <script type="module" src="./avatar.ts"></script>
+  </head>
+  <body style="padding: 40px">
+    <h1>Avatar</h1>
+
+    <div
+      x-data="{name: 'Segun Adebayo', src: 'https://static.wikia.nocookie.net/naruto/images/d/d6/Naruto_Part_I.png/revision/latest/scale-to-width-down/300?cb=20210223094656'}"
+    >
+      <div>
+        <label for="name">name</label>
+        <input type="text" name="name" id="name" x-model="name" />
+      </div>
+      <div>
+        <label for="src">src</label>
+        <input type="text" name="src" id="src" x-model="src" />
+      </div>
+
+      <div x-id="['avatar']" x-avatar="{id: $id('avatar')}" x-avatar:root>
+        <span x-avatar:fallback x-text="name.split(' ').map((word) => word.at(0)).join('')"></span>
+        <img alt="PA" :src="src" x-avatar:image />
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/examples/alpine-ts/pages/avatar.ts b/examples/alpine-ts/pages/avatar.ts
@@ -0,0 +1,11 @@
+import "@zag-js/shared/src/style.css"
+
+import Alpine from "alpinejs"
+import * as avatar from "@zag-js/avatar"
+import { createZagPlugin } from "../src/plugin"
+
+Alpine.plugin(createZagPlugin("avatar", avatar))
+// @ts-ignore
+window.Alpine = Alpine
+// @ts-ignore
+window.Alpine.start()
diff --git a/examples/alpine-ts/pages/checkbox.html b/examples/alpine-ts/pages/checkbox.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+    <script type="module" src="./checkbox.ts"></script>
+  </head>
+  <body style="padding: 40px">
+    <h1>Checkbox</h1>
+
+    <div x-data="{disabled: false, invalid: false}">
+      <div>
+        <input type="checkbox" name="disabled" id="disabled" x-model="disabled" />
+        <label for="disabled">disabled</label>
+      </div>
+      <div>
+        <input type="checkbox" name="invalid" id="invalid" x-model="invalid" />
+        <label for="invalid">invalid</label>
+      </div>
+
+      <label x-id="['checkbox']" x-checkbox="{disabled, invalid, id: $id('checkbox')}" x-checkbox:root>
+        <div x-checkbox:control></div>
+        <span x-checkbox:label x-text="'Input is ' + ($checkbox.checked ? 'checked' : 'unchecked')"></span>
+        <input x-checkbox:hidden-input />
+      </label>
+
+      <label x-id="['checkbox']" x-checkbox="{disabled, invalid, id: $id('checkbox')}" x-checkbox:root>
+        <div x-checkbox:control></div>
+        <span x-checkbox:label x-text="'Input is ' + ($checkbox.checked ? 'checked' : 'unchecked')"></span>
+        <input x-checkbox:hidden-input />
+      </label>
+    </div>
+  </body>
+</html>
diff --git a/examples/alpine-ts/pages/checkbox.ts b/examples/alpine-ts/pages/checkbox.ts
@@ -0,0 +1,11 @@
+import "@zag-js/shared/src/style.css"
+
+import Alpine from "alpinejs"
+import * as checkbox from "@zag-js/checkbox"
+import { createZagPlugin } from "../src/plugin"
+
+Alpine.plugin(createZagPlugin("checkbox", checkbox))
+// @ts-ignore
+window.Alpine = Alpine
+// @ts-ignore
+window.Alpine.start()
diff --git a/examples/alpine-ts/pages/combobox.html b/examples/alpine-ts/pages/combobox.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+    <script type="module" src="./combobox.ts"></script>
+  </head>
+  <body style="padding: 40px">
+    <h1>Combobox</h1>
+
+    <div
+      x-data="{disabled: false, readOnly: false, loopFocus: false,
+        inputBehavior: 'autohighlight', selectionBehavior: 'replace',
+        data: ['First', 'Second', 'Third'], options: []}"
+    >
+      <div>
+        <input type="checkbox" name="disabled" id="disabled" x-model="disabled" />
+        <label for="disabled">disabled</label>
+      </div>
+      <div>
+        <input type="checkbox" name="readOnly" id="readOnly" x-model="readOnly" />
+        <label for="readOnly">readOnly</label>
+      </div>
+      <div>
+        <input type="checkbox" name="loopFocus" id="loopFocus" x-model="loopFocus" />
+        <label for="loopFocus">loopFocus</label>
+      </div>
+      <div>
+        <label for="inputBehavior">inputBehavior</label>
+        <select name="inputBehavior" id="inputBehavior" x-model="inputBehavior">
+          <option value="autohighlight">autohighlight</option>
+          <option value="autocomplete">autocomplete</option>
+          <option value="none">none</option>
+        </select>
+      </div>
+      <div>
+        <label for="selectionBehavior">selectionBehavior</label>
+        <select name="selectionBehavior" id="selectionBehavior" x-model="selectionBehavior">
+          <option value="replace">replace</option>
+          <option value="clear">clear</option>
+          <option value="preserve">preserve</option>
+        </select>
+      </div>
+
+      <div
+        x-id="['combobox']"
+        x-combobox:collection="{items: options}"
+        x-combobox="{disabled, readOnly, loopFocus, inputBehavior, selectionBehavior,
+            id: $id('combobox'), collection,
+            onOpenChange() {
+                options = data;
+            },
+            onInputValueChange({inputValue}) {
+                const filtered = data.filter((item) =>
+                    item.toLowerCase().includes(inputValue.toLowerCase()));
+                options = filtered.length > 0 ? filtered : data;
+            }}"
+      >
+        <div x-combobox:root>
+          <label x-combobox:label>Select</label>
+          <div x-combobox:control>
+            <input x-combobox:input />
+            <button x-combobox:trigger>v</button>
+          </div>
+        </div>
+        <div x-combobox:positioner>
+          <ul x-combobox:content>
+            <template x-for="item in options" :key="item">
+              <li x-combobox:item="{item}" x-text="item + ' item'"></li>
+            </template>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/examples/alpine-ts/pages/combobox.ts b/examples/alpine-ts/pages/combobox.ts
@@ -0,0 +1,11 @@
+import "@zag-js/shared/src/style.css"
+
+import Alpine from "alpinejs"
+import * as combobox from "@zag-js/combobox"
+import { createZagPlugin } from "../src/plugin"
+
+Alpine.plugin(createZagPlugin("combobox", combobox))
+// @ts-ignore
+window.Alpine = Alpine
+// @ts-ignore
+window.Alpine.start()