@spinjs/components 0.0.0-stage → 0.1.0-preview.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Micah Cotton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,62 @@
-# Temporary Holding Version
+# @spinjs/components
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Thirty-seven headless statechart machines and the platform controllers —
+comboboxes, date pickers, carousels, menus, dialogs, and the rest — each with
+copyable `.html` templates you own and restyle through the theme.
+
+```sh
+npm install @spinjs/components @spinjs/runtime
+```
+
+```sh
+npx spin component copy select basic
+```
+
+The copy lands at `lib/components/select.html`. The Spin plugin compiles it
+into a standard custom element (`<app-select>`) with zero framework lock-in;
+`import "spin/components"` registers every project component, and the plugin
+generates `src/spin-components.d.ts` for DOM and JSX typechecking.
+
+A machine is for states JS manages: anything the platform does not already hold
+— open and closed, selected and highlighted, paging and dragging, commit and
+revert. The guards and the gesture phases are states no one else holds. Where
+the browser already owns the state (native `<dialog>`, `popover`,
+`<details>`), a platform controller adapts it to the same contract shape.
+
+## Driving a component
+
+Every component exposes the same surface through its controller: `ctl.bind`
+seats props and subscribes events, `ctl.commands.*` invokes machine commands,
+and `ctl.state.*` reads reactive state.
+
+```tsx
+// Solid
+import { createSpinComponent } from "@spinjs/components/solid";
+import { select } from "@spinjs/components";
+
+const ctl = createSpinComponent(element, select);
+ctl.bind({ value: "bun" }, {
+  "value-change": (event) => console.log(event.detail.value),
+});
+```
+
+```tsx
+// React
+import { useSpinComponent } from "@spinjs/components/react";
+```
+
+```ts
+// Vanilla DOM, Vue, Svelte
+import { spinComponentCtl } from "@spinjs/components/controller";
+```
+
+## Subpaths
+
+One subpath per component (`@spinjs/components/select`,
+`@spinjs/components/combobox`, `@spinjs/components/date-picker`, and the other
+thirty-four), plus:
+
+- `@spinjs/components/react` — `useSpinComponent`.
+- `@spinjs/components/solid` — `createSpinComponent`.
+- `@spinjs/components/controller` — `spinComponentCtl`.
+- `@spinjs/components/spin-element` — the custom-element base.

package/dist/angle-slider/angle-slider.events.d.ts

@@ -0,0 +1,30 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface AngleSliderEvents {
+  "VALUE.SET": {
+    value: number;
+  };
+  "CONTROL.POINTER_DOWN": {
+    rawAngle: number;
+    angularOffset: number | null;
+  };
+  "DOC.POINTER_MOVE": {
+    rawAngle: number;
+  };
+  "DOC.POINTER_UP": {};
+  "THUMB.FOCUS": {};
+  "THUMB.BLUR": {};
+  "THUMB.ARROW_DEC": {
+    step?: number;
+  };
+  "THUMB.ARROW_INC": {
+    step?: number;
+  };
+  "THUMB.HOME": {};
+  "THUMB.END": {};
+}
+export type AngleSliderEvent = EventUnion<AngleSliderEvents>;
+export type AngleSliderValueChange = {
+  readonly value: number;
+  readonly valueAsDegree: string;
+};
+//# sourceMappingURL=angle-slider.events.d.ts.map

package/dist/angle-slider/angle-slider.events.js

@@ -0,0 +1 @@
+export {};

package/dist/angle-slider/angle-slider.machine.d.ts

@@ -0,0 +1,9 @@
+import { AngleSliderEvents, AngleSliderValueChange } from "./angle-slider.events.js";
+import { AngleSliderArgs, AngleSliderContext, AngleSliderState, clampAngle, constrainAngle, displayAngle, initial, isInteractive, pointAngle, pointerAngle, resolveValue, snapAngle, valueAsDegree } from "./angle-slider.state.js";
+import { Machine } from "@spinjs/runtime/fsm";
+import { defaultTwin } from "@spinjs/runtime";
+export declare const MIN_VALUE = 0;
+export declare const MAX_VALUE = 359;
+export declare function angleSlider(args?: AngleSliderArgs, authored?: (name: string) => boolean): Machine<AngleSliderContext, AngleSliderEvents, AngleSliderState>;
+export { AngleSliderArgs, AngleSliderContext, AngleSliderState, type AngleSliderValueChange, clampAngle, constrainAngle, defaultTwin, displayAngle, initial, isInteractive, pointAngle, pointerAngle, resolveValue, snapAngle, valueAsDegree };
+//# sourceMappingURL=angle-slider.machine.d.ts.map

package/dist/angle-slider/angle-slider.machine.js

@@ -0,0 +1,56 @@
+import { clampAngle, constrainAngle, displayAngle, initial, isInteractive, pointAngle, pointerAngle, resolveValue, snapAngle, valueAsDegree } from "./angle-slider.state.js";
+import { arrowDec, arrowInc, setDragOffset, setPointerValue, setValue } from "./angle-slider.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+import { defaultTwin } from "@spinjs/runtime";
+// src/angle-slider/angle-slider.machine.ts
+const MIN_VALUE = 0;
+const MAX_VALUE = 359;
+function angleSlider(args = {}, authored = () => false) {
+	return createMachine({
+		id: "angle-slider",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			value: { event: "VALUE.SET" },
+			step: {},
+			largeStep: {},
+			dir: {},
+			disabled: {},
+			readOnly: {},
+			invalid: {},
+			name: {},
+			ariaLabel: {}
+		},
+		on: { "VALUE.SET": { assign: setValue } },
+		states: {
+			idle: { on: {
+				"CONTROL.POINTER_DOWN": {
+					target: "dragging",
+					assign: [setDragOffset, setPointerValue]
+				},
+				"THUMB.FOCUS": { target: "focused" }
+			} },
+			focused: { on: {
+				"CONTROL.POINTER_DOWN": {
+					target: "dragging",
+					assign: [setDragOffset, setPointerValue]
+				},
+				"THUMB.ARROW_DEC": { assign: arrowDec },
+				"THUMB.ARROW_INC": { assign: arrowInc },
+				"THUMB.HOME": { assign: () => ({ value: 0 }) },
+				"THUMB.END": { assign: () => ({ value: 359 }) },
+				"THUMB.BLUR": { target: "idle" }
+			} },
+			dragging: { on: {
+				"DOC.POINTER_UP": {
+					target: "focused",
+					assign: () => ({ dragOffset: null })
+				},
+				"DOC.POINTER_MOVE": { assign: setPointerValue }
+			} }
+		}
+	});
+}
+export { MAX_VALUE, MIN_VALUE, angleSlider, clampAngle, constrainAngle, defaultTwin, displayAngle, initial, isInteractive, pointAngle, pointerAngle, resolveValue, snapAngle, valueAsDegree };
+
+//# sourceMappingURL=angle-slider.machine.js.map

package/dist/angle-slider/angle-slider.presentation.d.ts

@@ -0,0 +1,194 @@
+import { AngleSliderEvents } from "./angle-slider.events.js";
+import { AngleSliderArgs, AngleSliderContext, AngleSliderState } from "./angle-slider.state.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { DragDelta, DragPress } from "@spinjs/runtime/actions";
+/**
+ * Angle-slider definition: the DOM contract as data.
+ *
+ * Everything that needs a node lives here — the pointer-to-angle
+ * measurement, the thumb-over test for relative drags, and the thumb focus
+ * after a press. The gesture itself (the arming, the pointer capture, the
+ * release) is the runtime's `drag` action.
+ */
+export interface AngleSliderMarkerSlotProps {
+  readonly value: number;
+  /**
+   * Rim radius in dial-percent (50 = the control edge). The def cannot know
+   * the dial's drawn geometry, so the usage says.
+   */
+  readonly radius?: number;
+  /**
+   * Diameter mode: the marker is a full-diameter line the markup centers and
+   * rotates itself, so the bag keeps rotation and skips position.
+   */
+  readonly diameter?: boolean;
+}
+export interface AngleSliderThumbSlotProps {
+  readonly radius?: number;
+  /**
+   * Needle mode: the thumb is a full-diameter indicator line rotated to the
+   * value, not a dot on the rim, so the bag emits rotation without a rim
+   * point.
+   */
+  readonly needle?: boolean;
+}
+export interface AngleSliderValueChangeEnd {
+  readonly value: number;
+  readonly valueAsDegree: string;
+}
+type ScopeLike = ViewFor<AngleSliderContext, AngleSliderEvents, AngleSliderState>;
+type SlotLike<R> = SlotViewFor<R, AngleSliderContext, AngleSliderEvents, AngleSliderState>;
+/** Focus lives in the view: a press or a keyboard move hands focus to the
+ * thumb. */
+declare const def: {
+  name: string;
+  machine: (props: AngleSliderArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<AngleSliderContext, AngleSliderEvents, AngleSliderState>;
+  commitEvents: ("VALUE.SET" | "DOC.POINTER_UP" | "THUMB.ARROW_DEC" | "THUMB.ARROW_INC" | "THUMB.HOME" | "THUMB.END")[];
+  parts: {
+    root: {};
+    label: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AngleSliderContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AngleSliderEvents>, AngleSliderState>) => {
+        id: string;
+        for: string;
+        onClick: (event: MouseEvent) => void;
+      };
+    };
+    hiddenInput: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AngleSliderContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AngleSliderEvents>, AngleSliderState>) => {
+        id: string;
+        type: string;
+        name: string | undefined;
+        value: string;
+      };
+    };
+    control: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AngleSliderContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AngleSliderEvents>, AngleSliderState>) => {
+        id: string;
+        role: string;
+        style: {
+          position: string;
+          touchAction: string;
+          userSelect: string;
+        };
+        "use:drag": {
+          enabled: boolean;
+          preventDefault: boolean;
+          stopPropagation: boolean;
+          cancelOnEscape: boolean;
+          onStart: (press: DragPress) => void;
+          onMove: (delta: DragDelta) => void;
+          onEnd: () => void;
+        };
+      };
+    };
+    thumb: {
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        tabindex: string | undefined;
+        style: {
+          rotate: string;
+        } | {
+          left: string;
+          top: string;
+          rotate?: undefined;
+        };
+        onFocus: () => void;
+        onBlur: () => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        id: string;
+        role: string;
+        "aria-label": string | undefined;
+      };
+    };
+    valueText: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, AngleSliderContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<AngleSliderEvents>, AngleSliderState>, arg: unknown) => {
+        id: string;
+      };
+    };
+    markerGroup: {
+      id: string;
+    };
+  };
+  slots: {
+    marker: {
+      indexes: () => number[];
+      attrs: (scope: SlotLike<{
+        readonly value: number;
+        readonly radius?: number;
+        readonly diameter?: boolean;
+      }>) => {
+        id: string;
+        style: {
+          rotate: string;
+        } | {
+          rotate: string;
+          left: string;
+          top: string;
+        };
+      };
+    };
+  };
+  commands: {
+    setValue: {
+      event: (args: readonly unknown[]) => {
+        type: "VALUE.SET";
+        value: number;
+      };
+    };
+    focus: {
+      view: ({ focus }: {
+        readonly args: readonly unknown[];
+        readonly id: (part: string, slot?: unknown) => string;
+        readonly focus: (part: string, slot?: unknown) => void;
+        readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+        readonly root: () => Element;
+      }) => void;
+    };
+  };
+  readers: {
+    value: {
+      read: (context: AngleSliderContext) => number;
+    };
+    disabled: {
+      read: (context: AngleSliderContext) => boolean;
+    };
+    valueAsDegree: {
+      read: (context: AngleSliderContext) => string;
+    };
+    dragging: {
+      read: (_context: AngleSliderContext, state: AngleSliderState) => state is "dragging";
+    };
+  };
+  methods: {
+    getMarkers: {
+      call: () => number[];
+    };
+    getMarkerState: {
+      call: (context: AngleSliderContext, _state: AngleSliderState, args: readonly unknown[]) => "at-value" | "under-value" | "over-value";
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: AngleSliderContext) => number[];
+      detail: (watched: readonly unknown[]) => {
+        value: number;
+        valueAsDegree: string;
+      };
+    };
+    "value-change-end": {
+      prop: string;
+      on: "commit";
+      watch: (context: AngleSliderContext) => number[];
+      detail: (watched: readonly unknown[]) => {
+        value: number;
+        valueAsDegree: string;
+      };
+    };
+  };
+};
+export type AngleSliderApi = ApiOf<typeof def>;
+export declare const angleSlider: import("@spinjs/runtime").DefinedComponent<AngleSliderApi, AngleSliderArgs>;
+export {};
+//# sourceMappingURL=angle-slider.presentation.d.ts.map

package/dist/angle-slider/angle-slider.presentation.js

@@ -0,0 +1,277 @@
+import { displayAngle, isInteractive as isInteractive$1, valueAsDegree } from "./angle-slider.state.js";
+import { angleSlider as angleSlider$1 } from "./angle-slider.machine.js";
+import { ariaLabelledBy, defineComponent, focuser, isComposing, sliderThumb } from "@spinjs/runtime";
+// src/angle-slider/angle-slider.presentation.ts
+const MARKERS = [
+	0,
+	45,
+	90,
+	135,
+	180,
+	225,
+	270,
+	315
+];
+/** Rim placement: dial degrees (zero top, clockwise) to a center-based
+* left/top pair on a 100-unit dial. */
+const rimPlacement = (angle, radius) => {
+	const radians = (angle - 90) * Math.PI / 180;
+	const left = 50 + radius * Math.cos(radians);
+	const top = 50 + radius * Math.sin(radians);
+	return {
+		left: `${left}%`,
+		top: `${top}%`
+	};
+};
+const textProp = (raw) => typeof raw === "string" ? raw : "";
+/** A marker's slot may be the bare index, whose number is the value. */
+const markerSlot = (slot) => {
+	if (typeof slot === "number" && Number.isFinite(slot)) return { value: slot };
+	if (typeof slot !== "object" || slot === null || Array.isArray(slot)) return { value: NaN };
+	const bag = { ...slot };
+	const value = bag["value"];
+	const radius = bag["radius"];
+	const diameter = bag["diameter"];
+	return {
+		value: typeof value === "number" && Number.isFinite(value) ? value : NaN,
+		...typeof radius === "number" && Number.isFinite(radius) ? { radius } : {},
+		...diameter === true ? { diameter: true } : {}
+	};
+};
+/** The thumb's optional slot arg carries the recipe's per-usage geometry. */
+const thumbSlot = (arg) => {
+	if (typeof arg !== "object" || arg === null || Array.isArray(arg)) return {};
+	const bag = { ...arg };
+	const radius = bag["radius"];
+	const needle = bag["needle"];
+	return {
+		...typeof radius === "number" && Number.isFinite(radius) ? { radius } : {},
+		...needle === true ? { needle: true } : {}
+	};
+};
+/** atan2 around the center, in dial degrees (zero top, clockwise). */
+const pointAngle = (centerX, centerY, clientX, clientY) => {
+	const x = clientX - centerX;
+	const y = clientY - centerY;
+	return 360 - (Math.atan2(x, y) * (180 / Math.PI) + 180);
+};
+const rawAngle = (scope, clientX, clientY) => {
+	const rect = scope.measure("control");
+	if (rect === null) return null;
+	return pointAngle(rect.left + rect.width / 2, rect.top + rect.height / 2, clientX, clientY);
+};
+/** Whether the press landed on the thumb — the press target carries its own
+* id, so no node lookup. */
+const overThumb = (scope, target) => {
+	if (target === null || !(target instanceof Element)) return false;
+	const thumbId = scope.id("thumb");
+	return target.id === thumbId || target.closest(`[id="${thumbId}"]`) !== null;
+};
+const angleSlider = defineComponent({
+	name: "angle-slider",
+	machine: (props, authored) => angleSlider$1(props, authored),
+	commitEvents: [
+		"DOC.POINTER_UP",
+		"THUMB.ARROW_INC",
+		"THUMB.ARROW_DEC",
+		"THUMB.HOME",
+		"THUMB.END",
+		"VALUE.SET"
+	],
+	parts: {
+		root: {},
+		label: { attrs: (scope) => ({
+			id: scope.id("label"),
+			for: scope.id("hiddenInput"),
+			onClick: (event) => {
+				if (!isInteractive$1(scope.context)) return;
+				event.preventDefault();
+				focuser(scope.id)("thumb");
+			}
+		}) },
+		hiddenInput: {
+			id: "hidden-input",
+			attrs: (scope) => {
+				const name = textProp(scope.context.name);
+				return {
+					id: scope.id("hiddenInput"),
+					type: "hidden",
+					name: name.length > 0 ? name : void 0,
+					value: String(scope.context.value)
+				};
+			}
+		},
+		control: { attrs: (scope) => ({
+			id: scope.id("control"),
+			role: "presentation",
+			style: {
+				position: "relative",
+				touchAction: "none",
+				userSelect: "none"
+			},
+			"use:drag": {
+				enabled: isInteractive$1(scope.context),
+				preventDefault: false,
+				stopPropagation: true,
+				cancelOnEscape: false,
+				onStart: (press) => {
+					const ctx = scope.context;
+					const angle = rawAngle(scope, press.x, press.y);
+					if (angle === null) return;
+					const angularOffset = overThumb(scope, press.target) ? angle - ctx.value : null;
+					scope.send({
+						type: "CONTROL.POINTER_DOWN",
+						rawAngle: angle,
+						angularOffset
+					});
+					focuser(scope.id)("thumb");
+				},
+				onMove: (delta) => {
+					if (scope.state !== "dragging") return;
+					const angle = rawAngle(scope, delta.x, delta.y);
+					if (angle === null) return;
+					scope.send({
+						type: "DOC.POINTER_MOVE",
+						rawAngle: angle
+					});
+				},
+				onEnd: () => {
+					if (scope.state !== "dragging") return;
+					scope.send({ type: "DOC.POINTER_UP" });
+				}
+			}
+		}) },
+		thumb: { attrs: (scope, arg) => {
+			const ctx = scope.context;
+			const shown = displayAngle(ctx.value, ctx.dir);
+			const slot = thumbSlot(arg);
+			const ariaLabel = textProp(scope.context.ariaLabel);
+			return {
+				id: scope.id("thumb"),
+				role: "slider",
+				"aria-label": ariaLabel.length > 0 ? ariaLabel : void 0,
+				...ariaLabelledBy(scope, ariaLabel.length > 0 ? void 0 : { part: "label" }),
+				...sliderThumb({
+					max: "359",
+					min: "0",
+					now: String(ctx.value)
+				}),
+				tabindex: scope.context.readOnly === true || isInteractive$1(ctx) ? "0" : void 0,
+				style: slot.needle === true ? { rotate: `${shown}deg` } : { ...rimPlacement(shown, slot.radius ?? 40) },
+				onFocus: () => {
+					scope.send({ type: "THUMB.FOCUS" });
+				},
+				onBlur: () => {
+					scope.send({ type: "THUMB.BLUR" });
+				},
+				onKeydown: (event) => {
+					if (event.defaultPrevented) return;
+					const live = scope.context;
+					if (!isInteractive$1(live)) return;
+					if (isComposing(event)) return;
+					const large = event.shiftKey ? live.largeStep : void 0;
+					const keyed = (type) => {
+						event.preventDefault();
+						if (type === "THUMB.ARROW_DEC" || type === "THUMB.ARROW_INC") scope.send({
+							type,
+							...large !== void 0 ? { step: large } : {}
+						});
+						else scope.send({ type });
+						focuser(scope.id)("thumb");
+						return true;
+					};
+					switch (event.key) {
+						case "ArrowLeft":
+						case "ArrowUp":
+							keyed("THUMB.ARROW_DEC");
+							break;
+						case "ArrowRight":
+						case "ArrowDown":
+							keyed("THUMB.ARROW_INC");
+							break;
+						case "Home":
+							keyed("THUMB.HOME");
+							break;
+						case "End": keyed("THUMB.END");
+					}
+				}
+			};
+		} },
+		valueText: {
+			id: "value-text",
+			attrs: (scope, arg) => {
+				return { id: scope.id("valueText") };
+			}
+		},
+		markerGroup: { id: "marker-group" }
+	},
+	slots: { marker: {
+		indexes: () => MARKERS,
+		attrs: (scope) => {
+			const slot = markerSlot(scope.slot);
+			const context = scope.context;
+			const shown = displayAngle(slot.value, context.dir);
+			const radius = slot.radius ?? 46;
+			return {
+				id: scope.id("marker", slot.value),
+				style: { ...slot.diameter === true ? { rotate: `${shown}deg` } : {
+					...rimPlacement(shown, radius),
+					rotate: `${shown}deg`
+				} }
+			};
+		}
+	} },
+	commands: {
+		setValue: { event: (args) => ({
+			type: "VALUE.SET",
+			value: typeof args[0] === "number" ? args[0] : 0
+		}) },
+		focus: { view: ({ focus }) => focus("thumb") }
+	},
+	readers: {
+		value: { read: (context) => context.value },
+		disabled: { read: (context) => context.disabled },
+		valueAsDegree: { read: (context) => valueAsDegree(context.value) },
+		dragging: { read: (_context, state) => state === "dragging" }
+	},
+	methods: {
+		getMarkers: { call: () => MARKERS },
+		getMarkerState: { call: (context, _state, args) => {
+			const value = args[0];
+			if (typeof value !== "number" || !Number.isFinite(value)) return "at-value";
+			if (value < context.value) return "under-value";
+			if (value > context.value) return "over-value";
+			return "at-value";
+		} }
+	},
+	events: {
+		"value-change": {
+			prop: "onValueChange",
+			watch: (context) => [context.value],
+			detail: (watched) => {
+				const value = watched[0];
+				const degrees = typeof value === "number" && Number.isFinite(value) ? value : 0;
+				return {
+					value: degrees,
+					valueAsDegree: `${degrees}deg`
+				};
+			}
+		},
+		"value-change-end": {
+			prop: "onValueChangeEnd",
+			on: "commit",
+			watch: (context) => [context.value],
+			detail: (watched) => {
+				const value = watched[0];
+				const degrees = typeof value === "number" && Number.isFinite(value) ? value : 0;
+				return {
+					value: degrees,
+					valueAsDegree: `${degrees}deg`
+				};
+			}
+		}
+	}
+});
+export { angleSlider };
+
+//# sourceMappingURL=angle-slider.presentation.js.map

package/dist/angle-slider/angle-slider.state.d.ts

@@ -0,0 +1,38 @@
+export type AngleSliderState = "idle" | "focused" | "dragging";
+export interface AngleSliderContext {
+  value: number;
+  step: number;
+  largeStep: number;
+  dir: "ltr" | "rtl";
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean;
+  dragOffset: number | null;
+  name: string;
+  ariaLabel: string;
+}
+export interface AngleSliderArgs {
+  value?: string;
+  step?: string;
+  largeStep?: string;
+  dir?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  invalid?: boolean;
+  defaultInvalid?: boolean;
+  name?: string;
+  ariaLabel?: string;
+}
+export declare function initial(args: AngleSliderArgs, authored: (name: string) => boolean): AngleSliderContext;
+export declare function isInteractive(ctx: AngleSliderContext): boolean;
+export declare const MIN_VALUE = 0;
+export declare const MAX_VALUE = 359;
+export declare function pointAngle(centerX: number, centerY: number, clientX: number, clientY: number): number;
+export declare function pointerAngle(centerX: number, centerY: number, clientX: number, clientY: number, angularOffset: number | null, dir: "ltr" | "rtl"): number;
+export declare function resolveValue(rawAngle: number, angularOffset: number | null, value: number, dir: "ltr" | "rtl"): number;
+export declare function displayAngle(value: number, dir: "ltr" | "rtl"): number;
+export declare function clampAngle(degree: number): number;
+export declare function constrainAngle(degree: number, step: number): number;
+export declare function snapAngle(value: number, step: number): number;
+export declare function valueAsDegree(value: number): string;
+//# sourceMappingURL=angle-slider.state.d.ts.map