feat: add angle-slider

.changeset/gentle-moons-pretend.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/angle-slider": minor
+---
+
+Add new angle slider machine to allow users to select an angle interactively.

.xstate/angle-slider.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _xstate = require("xstate");
+const {
+  actions,
+  createMachine,
+  assign
+} = _xstate;
+const {
+  choose
+} = actions;
+const fetchMachine = createMachine({
+  id: "angle-slider",
+  initial: "idle",
+  context: {},
+  on: {
+    "VALUE.SET": {
+      actions: ["setValue"]
+    }
+  },
+  on: {
+    UPDATE_CONTEXT: {
+      actions: "updateContext"
+    }
+  },
+  states: {
+    idle: {
+      on: {
+        "CONTROL.POINTER_DOWN": {
+          target: "dragging",
+          actions: ["setPointerValue", "focusThumb"]
+        },
+        "THUMB.FOCUS": {
+          target: "focused"
+        }
+      }
+    },
+    focused: {
+      on: {
+        "CONTROL.POINTER_DOWN": {
+          target: "dragging",
+          actions: ["setPointerValue", "focusThumb"]
+        },
+        "THUMB.ARROW_DEC": {
+          actions: ["decrementValue", "invokeOnChangeEnd"]
+        },
+        "THUMB.ARROW_INC": {
+          actions: ["incrementValue", "invokeOnChangeEnd"]
+        },
+        "THUMB.HOME": {
+          actions: ["setValueToMin", "invokeOnChangeEnd"]
+        },
+        "THUMB.END": {
+          actions: ["setValueToMax", "invokeOnChangeEnd"]
+        },
+        "THUMB.BLUR": {
+          target: "idle"
+        }
+      }
+    },
+    dragging: {
+      entry: "focusThumb",
+      activities: "trackPointerMove",
+      on: {
+        "DOC.POINTER_UP": {
+          target: "focused",
+          actions: "invokeOnChangeEnd"
+        },
+        "DOC.POINTER_MOVE": {
+          actions: "setPointerValue"
+        }
+      }
+    }
+  }
+}, {
+  actions: {
+    updateContext: assign((context, event) => {
+      return {
+        [event.contextKey]: true
+      };
+    })
+  },
+  guards: {}
+});

examples/lit-ts/package.json

@@ -16,6 +16,7 @@
     "@zag-js/accordion": "workspace:*",
     "@zag-js/anatomy": "workspace:*",
     "@zag-js/anatomy-icons": "workspace:*",
+    "@zag-js/angle-slider": "workspace:*",
     "@zag-js/aria-hidden": "workspace:*",
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",

examples/next-ts/package.json

@@ -16,6 +16,7 @@
     "@zag-js/accordion": "workspace:*",
     "@zag-js/anatomy": "workspace:*",
     "@zag-js/anatomy-icons": "workspace:*",
+    "@zag-js/angle-slider": "workspace:*",
     "@zag-js/aria-hidden": "workspace:*",
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",

examples/next-ts/pages/angle-slider.tsx

@@ -0,0 +1,42 @@
+import * as angleSlider from "@zag-js/angle-slider"
+import { useMachine, normalizeProps } from "@zag-js/react"
+import { angleSliderControls } from "@zag-js/shared"
+import { useId } from "react"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+import { useControls } from "../hooks/use-controls"
+
+export default function Page() {
+  const controls = useControls(angleSliderControls)
+
+  const [state, send] = useMachine(angleSlider.machine({ id: useId() }), {
+    context: controls.context,
+  })
+
+  const api = angleSlider.connect(state, send, normalizeProps)
+
+  return (
+    <>
+      <main className="angle-slider">
+        <div {...api.getRootProps()}>
+          <label {...api.getLabelProps()}>
+            Angle Slider: <div {...api.getValueTextProps()}>{api.valueAsDegree}</div>
+          </label>
+          <div {...api.getControlProps()}>
+            <div {...api.getThumbProps()}></div>
+            <div {...api.getMarkerGroupProps()}>
+              {[0, 45, 90, 135, 180, 225, 270, 315].map((value) => (
+                <div {...api.getMarkerProps({ value })}></div>
+              ))}
+            </div>
+          </div>
+          <input {...api.getHiddenInputProps()} />
+        </div>
+      </main>
+
+      <Toolbar controls={controls.ui}>
+        <StateVisualizer state={state} />
+      </Toolbar>
+    </>
+  )
+}

examples/nuxt-ts/package.json

@@ -13,6 +13,7 @@
     "@zag-js/accordion": "workspace:*",
     "@zag-js/anatomy": "workspace:*",
     "@zag-js/anatomy-icons": "workspace:*",
+    "@zag-js/angle-slider": "workspace:*",
     "@zag-js/aria-hidden": "workspace:*",
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",
@@ -94,6 +95,6 @@
     "@nuxt/devtools": "latest",
     "@types/form-serialize": "0.7.4",
     "@types/node": "22.8.2",
-    "nuxt": "3.13.2"
+    "nuxt": "3.14.1592"
   }
 }

examples/nuxt-ts/pages/angle-slider.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import * as angleSlider from "@zag-js/angle-slider"
+import { angleSliderControls } from "@zag-js/shared"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+
+const controls = useControls(angleSliderControls)
+
+const [state, send] = useMachine(angleSlider.machine({ id: "1" }), {
+  context: controls.context,
+})
+
+const api = computed(() => angleSlider.connect(state.value, send, normalizeProps))
+</script>
+
+<template>
+  <main class="angle-slider">
+    <div v-bind="api.getRootProps()">
+      <label v-bind="api.getLabelProps()">
+        Angle Slider:
+        <div v-bind="api.getValueTextProps()">{{ api.valueAsDegree }}</div>
+      </label>
+      <div v-bind="api.getControlProps()">
+        <div v-bind="api.getThumbProps()"></div>
+        <div v-bind="api.getMarkerGroupProps()">
+          <div
+            v-for="value in [0, 45, 90, 135, 180, 225, 270, 315]"
+            :key="value"
+            v-bind="api.getMarkerProps({ value })"
+          ></div>
+        </div>
+      </div>
+      <input v-bind="api.getHiddenInputProps()" />
+    </div>
+  </main>
+
+  <Toolbar>
+    <StateVisualizer :state="state" />
+    <template #controls>
+      <Controls :control="controls" />
+    </template>
+  </Toolbar>
+</template>

examples/preact-ts/package.json

@@ -12,6 +12,7 @@
     "@zag-js/accordion": "workspace:*",
     "@zag-js/anatomy": "workspace:*",
     "@zag-js/anatomy-icons": "workspace:*",
+    "@zag-js/angle-slider": "workspace:*",
     "@zag-js/aria-hidden": "workspace:*",
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",

examples/react-19/package.json

@@ -13,6 +13,7 @@
     "@zag-js/accordion": "workspace:*",
     "@zag-js/anatomy": "workspace:*",
     "@zag-js/anatomy-icons": "workspace:*",
+    "@zag-js/angle-slider": "workspace:*",
     "@zag-js/aria-hidden": "workspace:*",
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",

examples/solid-ts/package.json

@@ -16,6 +16,7 @@
     "@zag-js/accordion": "workspace:*",
     "@zag-js/anatomy": "workspace:*",
     "@zag-js/anatomy-icons": "workspace:*",
+    "@zag-js/angle-slider": "workspace:*",
     "@zag-js/aria-hidden": "workspace:*",
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",

examples/solid-ts/src/routes/angle-slider.tsx

@@ -0,0 +1,42 @@
+import * as angleSlider from "@zag-js/angle-slider"
+import { normalizeProps, useMachine } from "@zag-js/solid"
+import { createMemo, createUniqueId, Index } from "solid-js"
+import { angleSliderControls } from "@zag-js/shared"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+import { useControls } from "../hooks/use-controls"
+
+export default function Page() {
+  const controls = useControls(angleSliderControls)
+
+  const [state, send] = useMachine(angleSlider.machine({ id: createUniqueId() }), {
+    context: controls.context,
+  })
+
+  const api = createMemo(() => angleSlider.connect(state, send, normalizeProps))
+
+  return (
+    <>
+      <main class="angle-slider">
+        <div {...api().getRootProps()}>
+          <label {...api().getLabelProps()}>
+            Angle Slider: <div {...api().getValueTextProps()}>{api().valueAsDegree}</div>
+          </label>
+          <div {...api().getControlProps()}>
+            <div {...api().getThumbProps()}></div>
+            <div {...api().getMarkerGroupProps()}>
+              <Index each={[0, 45, 90, 135, 180, 225, 270, 315]}>
+                {(value) => <div {...api().getMarkerProps({ value: value() })}></div>}
+              </Index>
+            </div>
+          </div>
+          <input {...api().getHiddenInputProps()} />
+        </div>
+      </main>
+
+      <Toolbar controls={controls.ui}>
+        <StateVisualizer state={state} />
+      </Toolbar>
+    </>
+  )
+}

examples/svelte-ts/package.json

@@ -14,6 +14,7 @@
     "@zag-js/accordion": "workspace:*",
     "@zag-js/anatomy": "workspace:*",
     "@zag-js/anatomy-icons": "workspace:*",
+    "@zag-js/angle-slider": "workspace:*",
     "@zag-js/aria-hidden": "workspace:*",
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",
@@ -100,4 +101,4 @@
     "vite": "5.4.11",
     "vite-tsconfig-paths": "5.0.1"
   }
-}
+}

examples/svelte-ts/src/App.svelte

@@ -3,6 +3,7 @@
   import { routesData } from "@zag-js/shared"
   import { Link, Route, Router } from "svelte-routing"
   import Accordion from "./routes/accordion.svelte"
+  import AngleSlider from "./routes/angle-slider.svelte"
   import Avatar from "./routes/avatar.svelte"
   import Carousel from "./routes/carousel.svelte"
   import Checkbox from "./routes/checkbox.svelte"
@@ -54,6 +55,7 @@
     { path: "/", component: Index },
     { path: "/accordion", component: Accordion },
     { path: "/avatar", component: Avatar },
+    { path: "/angle-slider", component: AngleSlider },
     { path: "/carousel", component: Carousel },
     { path: "/checkbox", component: Checkbox },
     { path: "/clipboard", component: Clipboard },

examples/svelte-ts/src/routes/angle-slider.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import StateVisualizer from "$lib/components/state-visualizer.svelte"
+  import Toolbar from "$lib/components/toolbar.svelte"
+  import { useControls } from "$lib/use-controls.svelte"
+  import * as angleSlider from "@zag-js/angle-slider"
+  import { angleSliderControls } from "@zag-js/shared"
+  import { normalizeProps, useMachine } from "@zag-js/svelte"
+
+  const controls = useControls(angleSliderControls)
+
+  const [snapshot, send] = useMachine(angleSlider.machine({ id: "1" }), {
+    context: controls.context,
+  })
+
+  const api = $derived(angleSlider.connect(snapshot, send, normalizeProps))
+</script>
+
+<main class="angle-slider">
+  <div {...api.getRootProps()}>
+    <!-- svelte-ignore a11y_label_has_associated_control -->
+    <label {...api.getLabelProps()}>
+      Angle Slider: <div {...api.getValueTextProps()}>{api.valueAsDegree}</div>
+    </label>
+    <div {...api.getControlProps()}>
+      <div {...api.getThumbProps()}></div>
+      <div {...api.getMarkerGroupProps()}>
+        {#each [0, 45, 90, 135, 180, 225, 270, 315] as value}
+          <div {...api.getMarkerProps({ value })}></div>
+        {/each}
+      </div>
+    </div>
+    <input {...api.getHiddenInputProps()} />
+  </div>
+</main>
+
+<Toolbar {controls}>
+  <StateVisualizer state={snapshot} />
+</Toolbar>

examples/vanilla-ts/package.json

@@ -17,6 +17,7 @@
     "@zag-js/accordion": "workspace:*",
     "@zag-js/anatomy": "workspace:*",
     "@zag-js/anatomy-icons": "workspace:*",
+    "@zag-js/angle-slider": "workspace:*",
     "@zag-js/aria-hidden": "workspace:*",
     "@zag-js/auto-resize": "workspace:*",
     "@zag-js/avatar": "workspace:*",

packages/machines/angle-slider/README.md

@@ -0,0 +1,19 @@
+# @zag-js/angle-slider
+
+Core logic for the angle-slider widget implemented as a state machine
+
+## Installation
+
+```sh
+yarn add @zag-js/angle-slider
+# or
+npm i @zag-js/angle-slider
+```
+
+## Contribution
+
+Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details.
+
+## Licence
+
+This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).