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

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

@@ -0,0 +1,71 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/angle-slider/angle-slider.state.ts
+const asCount = (raw) => {
+	if (typeof raw === "number") return Number.isFinite(raw) ? raw : null;
+	if (typeof raw === "string" && raw.trim().length > 0) {
+		const n = Number(raw.trim());
+		return Number.isFinite(n) ? n : null;
+	}
+	return null;
+};
+function initial(args, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const step = written("step") ? asCount(args.step) ?? 1 : 1;
+	return {
+		value: written("value") ? asCount(args.value) ?? 0 : 0,
+		step,
+		largeStep: written("largeStep") ? asCount(args.largeStep) ?? 10 * step : 10 * step,
+		dir: written("dir") ? args.dir === "rtl" ? "rtl" : "ltr" : "ltr",
+		disabled: written("disabled") ? args.disabled === true : false,
+		readOnly: written("readOnly") ? args.readOnly === true : false,
+		invalid: written("invalid") ? args.invalid === true : false,
+		dragOffset: null,
+		name: args.name ?? "",
+		ariaLabel: args.ariaLabel ?? ""
+	};
+}
+function isInteractive(ctx) {
+	return !ctx.disabled && !ctx.readOnly;
+}
+const MIN_VALUE = 0;
+const MAX_VALUE = 359;
+function mirrorAngle(angle) {
+	return (360 - angle) % 360;
+}
+function pointAngle(centerX, centerY, clientX, clientY) {
+	const x = clientX - centerX;
+	const y = clientY - centerY;
+	return 360 - (Math.atan2(x, y) * (180 / Math.PI) + 180);
+}
+function pointerAngle(centerX, centerY, clientX, clientY, angularOffset, dir) {
+	const angle = pointAngle(centerX, centerY, clientX, clientY);
+	if (angularOffset !== null) return angle - angularOffset;
+	return dir === "rtl" ? mirrorAngle(angle) : angle;
+}
+function resolveValue(rawAngle, angularOffset, value, dir) {
+	if (angularOffset === null) return dir === "rtl" ? mirrorAngle(rawAngle) : rawAngle;
+	const clickAngle = value + angularOffset;
+	return dir === "rtl" ? value + clickAngle - rawAngle : rawAngle - angularOffset;
+}
+function displayAngle(value, dir) {
+	return dir === "rtl" ? mirrorAngle(value) : value;
+}
+function clampAngle(degree) {
+	return Math.min(Math.max(degree, 0), 359);
+}
+function constrainAngle(degree, step) {
+	const clamped = clampAngle(degree);
+	const upper = Math.ceil(clamped / step);
+	const nearest = Math.round(clamped / step);
+	return upper >= clamped / step ? upper * step === 359 ? 0 : upper * step : nearest * step;
+}
+function snapAngle(value, step) {
+	const remainder = (value - 0) % step;
+	return clampAngle(Math.abs(remainder) * 2 >= step ? value + Math.sign(remainder) * (step - Math.abs(remainder)) : value - remainder);
+}
+function valueAsDegree(value) {
+	return `${value}deg`;
+}
+export { MAX_VALUE, MIN_VALUE, clampAngle, constrainAngle, displayAngle, initial, isInteractive, pointAngle, pointerAngle, resolveValue, snapAngle, valueAsDegree };
+
+//# sourceMappingURL=angle-slider.state.js.map

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

@@ -0,0 +1,11 @@
+import { AngleSliderEvents } from "./angle-slider.events.js";
+import { AngleSliderContext } from "./angle-slider.state.js";
+import { AssignFor } from "@spinjs/runtime/fsm";
+type AngleAssign<K extends keyof AngleSliderEvents = keyof AngleSliderEvents> = AssignFor<AngleSliderContext, AngleSliderEvents, K>;
+export declare const setDragOffset: AngleAssign<"CONTROL.POINTER_DOWN">;
+export declare const setPointerValue: AngleAssign<"CONTROL.POINTER_DOWN" | "DOC.POINTER_MOVE">;
+export declare const setValue: AngleAssign<"VALUE.SET">;
+export declare const arrowDec: AngleAssign<"THUMB.ARROW_DEC">;
+export declare const arrowInc: AngleAssign<"THUMB.ARROW_INC">;
+export {};
+//# sourceMappingURL=angle-slider.transitions.d.ts.map

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

@@ -0,0 +1,18 @@
+import { clampAngle, constrainAngle, resolveValue, snapAngle } from "./angle-slider.state.js";
+// src/angle-slider/angle-slider.transitions.ts
+const setDragOffset = (_ctx, event) => ({ dragOffset: event.angularOffset });
+const setPointerValue = (ctx, event) => {
+	const offset = event.type === "CONTROL.POINTER_DOWN" ? event.angularOffset : ctx.dragOffset;
+	const dial = resolveValue(event.rawAngle, offset, ctx.value, ctx.dir);
+	return { value: constrainAngle(dial, ctx.step) };
+};
+const setValue = (_ctx, event) => {
+	const value = typeof event.value === "number" && Number.isFinite(event.value) ? event.value : null;
+	if (value === null) return {};
+	return { value: clampAngle(value) };
+};
+const arrowDec = (ctx, event) => ({ value: snapAngle(ctx.value - (event.step ?? ctx.step), event.step ?? ctx.step) });
+const arrowInc = (ctx, event) => ({ value: snapAngle(ctx.value + (event.step ?? ctx.step), event.step ?? ctx.step) });
+export { arrowDec, arrowInc, setDragOffset, setPointerValue, setValue };
+
+//# sourceMappingURL=angle-slider.transitions.js.map

package/dist/angle-slider/examples/basic.html

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { angleSlider } from "../angle-slider.presentation.js";
+
+const machine = angleSlider({ value: "45", ariaLabel: "Angle" });
+</script>
+
+<div class="mx-auto flex w-full max-w-[20rem] items-center justify-center"
+  {...machine.getRootProps()}>
+  <div
+    class="relative flex h-[15rem] w-[15rem] items-center justify-center rounded-full border border-solid border-border bg-surface-raised"
+    {...machine.getControlProps()}
+  >
+    <span
+      class="pointer-events-none absolute inset-y-0 left-1/2 w-[2px]"
+      {...machine.getThumbProps({ needle: true })}
+    >
+      <span
+        class="absolute inset-x-0 top-0 block h-[17%] rounded-full bg-primary"
+        aria-hidden="true"></span>
+    </span>
+    <div class="pointer-events-none absolute inset-[1px]"
+      {...machine.getMarkerGroupProps()}>
+      <template for={machine.getMarkers()} as={row} key={row}>
+        <span
+          class="absolute inset-y-0 left-1/2 w-[2px]"
+          {...machine.getMarkerProps({ value: row, diameter: true })}
+        >
+          <span
+            class={["absolute inset-x-0 top-[6%] block h-[11%] rounded-full", { "bg-border-strong": machine.getMarkerState(row) !== "at-value", "bg-primary": machine.getMarkerState(row) === "at-value" }]}
+            aria-hidden="true"></span>
+        </span>
+      </template>
+    </div>
+    <span class="flex flex-col items-center"
+      {...machine.getValueTextProps()}>
+      <span
+        class="stat-value tabular-nums">{machine.value}°</span>
+      <span class="text-sm font-medium text-text-muted">degrees</span>
+    </span>
+  </div>
+  <input {...machine.getHiddenInputProps()} />
+</div>

package/dist/angle-slider/examples/knob.html

@@ -0,0 +1,34 @@
+<script lang="ts">
+import { angleSlider } from "../angle-slider.presentation.js";
+
+const machine = angleSlider({ value: "121", ariaLabel: "Angle" });
+</script>
+
+<div class="mx-auto flex w-full max-w-[20rem] flex-col items-center gap-4"
+  {...machine.getRootProps()}>
+  <div
+    class="relative flex h-[15rem] w-[15rem] items-center justify-center"
+    {...machine.getControlProps()}
+  >
+    <svg class="absolute inset-0 h-full w-full -rotate-90" viewBox="0 0 200 200"
+      aria-hidden="true">
+      <circle cx="100" cy="100" r="80" class="fill-none stroke-surface-sunken"
+        stroke-width="20" />
+      <circle cx="100" cy="100" r="80" class="fill-none stroke-primary"
+        stroke-width="20" stroke-linecap="round"
+        stroke-dasharray={502.65}
+        stroke-dashoffset={502.65 * (1 - machine.value / 360)} />
+    </svg>
+    <span
+      class={["absolute h-[1.75rem] w-[1.75rem] -translate-1/2 rounded-full border-2 border-solid border-primary bg-surface", { "opacity-50": machine.disabled }]}
+      {...machine.getThumbProps()}
+    ></span>
+    <span class="flex flex-col items-center"
+      {...machine.getValueTextProps()}>
+      <span
+        class="stat-value tabular-nums">{machine.value}°</span>
+      <span class="text-sm font-medium text-text-muted">degrees</span>
+    </span>
+  </div>
+  <input {...machine.getHiddenInputProps()} />
+</div>

package/dist/angle-slider/examples/labeled.html

@@ -0,0 +1,63 @@
+<script lang="ts">
+import { angleSlider } from "../angle-slider.presentation.js";
+
+const machine = angleSlider({ value: "121" });
+</script>
+
+<div class="mx-auto flex w-full max-w-[20rem] flex-col items-center justify-center"
+  {...machine.getRootProps()}>
+  <label class="mb-2 text-sm font-medium text-text" {...machine.getLabelProps()}>Angle</label>
+  <div class="relative p-8">
+    <div class="pointer-events-none absolute inset-0" aria-hidden="true">
+      <span
+        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[50%] top-[5.3%]">0°</span>
+      <span
+        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[81.6%] top-[18.4%]">45°</span>
+      <span
+        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[94.7%] top-[50%]">90°</span>
+      <span
+        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[81.6%] top-[81.6%]">135°</span>
+      <span
+        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[50%] top-[94.7%]">180°</span>
+      <span
+        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[18.4%] top-[81.6%]">225°</span>
+      <span
+        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[5.3%] top-[50%]">270°</span>
+      <span
+        class="absolute -translate-1/2 font-mono text-xs text-text-muted left-[18.4%] top-[18.4%]">315°</span>
+    </div>
+    <div
+      class="relative flex h-[15rem] w-[15rem] items-center justify-center rounded-full border border-solid border-border bg-surface-raised"
+      {...machine.getControlProps()}
+    >
+      <span
+        class="pointer-events-none absolute inset-y-0 left-1/2 w-[2px]"
+        {...machine.getThumbProps({ needle: true })}
+      >
+        <span
+          class="absolute inset-x-0 top-0 block h-[17%] rounded-full bg-primary"
+          aria-hidden="true"></span>
+      </span>
+      <div class="pointer-events-none absolute inset-[1px]"
+        {...machine.getMarkerGroupProps()}>
+        <template for={machine.getMarkers()} as={row} key={row}>
+          <span
+            class="absolute inset-y-0 left-1/2 w-[2px]"
+            {...machine.getMarkerProps({ value: row, diameter: true })}
+          >
+            <span
+              class={["absolute inset-x-0 top-[6%] block h-[11%] rounded-full", { "bg-border-strong": machine.getMarkerState(row) === "over-value", "bg-semantic-success": machine.getMarkerState(row) === "under-value", "bg-primary": machine.getMarkerState(row) === "at-value" }]}
+              aria-hidden="true"></span>
+          </span>
+        </template>
+      </div>
+      <span class="flex flex-col items-center"
+        {...machine.getValueTextProps()}>
+        <span
+          class="stat-value tabular-nums">{machine.value}°</span>
+        <span class="text-sm font-medium text-text-muted">degrees</span>
+      </span>
+    </div>
+  </div>
+  <input {...machine.getHiddenInputProps()} />
+</div>

package/dist/angle-slider/examples/marks.html

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { angleSlider } from "../angle-slider.presentation.js";
+
+const machine = angleSlider({ value: "45", step: "10", ariaLabel: "Angle" });
+</script>
+
+<div class="mx-auto flex w-full max-w-[20rem] items-center justify-center"
+  {...machine.getRootProps()}>
+  <div
+    class="relative flex h-[15rem] w-[15rem] items-center justify-center rounded-full border border-solid border-border bg-surface-raised"
+    {...machine.getControlProps()}
+  >
+    <span
+      class="pointer-events-none absolute inset-y-0 left-1/2 w-[2px]"
+      {...machine.getThumbProps({ needle: true })}
+    >
+      <span
+        class="absolute inset-x-0 top-0 block h-[17%] rounded-full bg-primary"
+        aria-hidden="true"></span>
+    </span>
+    <div class="pointer-events-none absolute inset-[1px]"
+      {...machine.getMarkerGroupProps()}>
+      <template for={machine.getMarkers()} as={row} key={row}>
+        <span
+          class="absolute inset-y-0 left-1/2 w-[2px]"
+          {...machine.getMarkerProps({ value: row, diameter: true })}
+        >
+          <span
+            class={["absolute inset-x-0 top-[6%] block h-[11%] rounded-full", { "bg-border-strong": machine.getMarkerState(row) === "over-value", "bg-semantic-success": machine.getMarkerState(row) === "under-value", "bg-primary": machine.getMarkerState(row) === "at-value" }]}
+            aria-hidden="true"></span>
+        </span>
+      </template>
+    </div>
+    <span class="flex flex-col items-center"
+      {...machine.getValueTextProps()}>
+      <span
+        class="stat-value tabular-nums">{machine.value}°</span>
+      <span class="text-sm font-medium text-text-muted">degrees</span>
+    </span>
+  </div>
+  <input {...machine.getHiddenInputProps()} />
+</div>

package/dist/async-list/async-list.events.d.ts

@@ -0,0 +1,23 @@
+import { SortDescriptor } from "./async-list.state.js";
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface AsyncListEvents {
+  "RELOAD": {};
+  "LOAD_MORE": {};
+  "SORT": {
+    sortDescriptor: SortDescriptor;
+  };
+  "FILTER": {
+    filterText: string;
+  };
+  "SUCCESS": {
+    items: readonly unknown[];
+    cursor: unknown;
+    append: boolean;
+  };
+  "ERROR": {
+    error: unknown;
+  };
+  "ABORT": {};
+}
+export type AsyncListEvent = EventUnion<AsyncListEvents>;
+//# sourceMappingURL=async-list.events.d.ts.map

package/dist/async-list/async-list.events.js

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

package/dist/async-list/async-list.machine.d.ts

@@ -0,0 +1,5 @@
+import { AsyncListArgs, AsyncListContext, AsyncListState } from "./async-list.state.js";
+import { AsyncListEvents } from "./async-list.events.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function asyncList(args?: AsyncListArgs, authored?: (name: string) => boolean): Machine<AsyncListContext, AsyncListEvents, AsyncListState>;
+//# sourceMappingURL=async-list.machine.d.ts.map

package/dist/async-list/async-list.machine.js

@@ -0,0 +1,96 @@
+import { initial } from "./async-list.state.js";
+import { clearCursor, clearError, clearItems, hasCursor, hasSortFn, setCursor, setError, setFilterText, setItems, setSortDescriptor } from "./async-list.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/async-list/async-list.machine.ts
+function asyncList(args = {}, authored = () => false) {
+	return createMachine({
+		id: "async-list",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			hasSortFn: {},
+			load: {},
+			sortFn: {}
+		},
+		on: { RELOAD: {
+			target: "loading",
+			assign: clearItems
+		} },
+		states: {
+			idle: { on: {
+				LOAD_MORE: [{
+					cond: hasCursor,
+					target: "loading"
+				}],
+				SORT: [{
+					cond: hasSortFn,
+					target: "sorting",
+					assign: [setSortDescriptor, clearCursor]
+				}, {
+					target: "loading",
+					assign: [setSortDescriptor, clearCursor]
+				}],
+				FILTER: {
+					target: "loading",
+					assign: [setFilterText, clearCursor]
+				}
+			} },
+			loading: {
+				entry: [{ assign: clearError }],
+				on: {
+					SUCCESS: {
+						target: "idle",
+						assign: [
+							setItems,
+							setCursor,
+							clearError
+						]
+					},
+					ERROR: {
+						target: "idle",
+						assign: setError
+					},
+					ABORT: { target: "idle" },
+					FILTER: {
+						target: "loading",
+						assign: [setFilterText, clearCursor]
+					}
+				}
+			},
+			sorting: { on: {
+				SUCCESS: {
+					target: "idle",
+					assign: [
+						setItems,
+						setCursor,
+						clearError
+					]
+				},
+				ERROR: {
+					target: "idle",
+					assign: setError
+				},
+				ABORT: { target: "idle" },
+				FILTER: {
+					target: "loading",
+					assign: [setFilterText, clearCursor]
+				},
+				RELOAD: {
+					target: "loading",
+					assign: clearItems
+				},
+				SORT: [{
+					cond: hasSortFn,
+					target: "sorting",
+					assign: [setSortDescriptor, clearCursor]
+				}, {
+					target: "loading",
+					assign: [setSortDescriptor, clearCursor]
+				}]
+			} }
+		}
+	});
+}
+export { asyncList };
+
+//# sourceMappingURL=async-list.machine.js.map