@sprawlify/primitives 0.0.1

package/dist/machines/timer/index.cjs

@@ -0,0 +1,329 @@
+const require_create_anatomy = require('../../create-anatomy-CDsIFUXg.cjs');
+require('../../dom-query-CWZdWUGp.cjs');
+const require_utils = require('../../utils-_6frwjgJ.cjs');
+const require_core = require('../../core-CQFbMdTl.cjs');
+const require_create_props = require('../../create-props-YKy7JIKj.cjs');
+
+//#region src/machines/timer/timer.anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("timer").parts("root", "area", "control", "item", "itemValue", "itemLabel", "actionTrigger", "separator");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/timer/timer.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `timer:${ctx.id}:root`;
+const getAreaId = (ctx) => ctx.ids?.area ?? `timer:${ctx.id}:area`;
+
+//#endregion
+//#region src/machines/timer/timer.connect.ts
+const validActions = new Set([
+	"start",
+	"pause",
+	"resume",
+	"reset",
+	"restart"
+]);
+function connect(service, normalize) {
+	const { state, send, computed, scope } = service;
+	const running = state.matches("running");
+	const paused = state.matches("paused");
+	const time = computed("time");
+	const formattedTime = computed("formattedTime");
+	return {
+		running,
+		paused,
+		time,
+		formattedTime,
+		progressPercent: computed("progressPercent"),
+		start() {
+			send({ type: "START" });
+		},
+		pause() {
+			send({ type: "PAUSE" });
+		},
+		resume() {
+			send({ type: "RESUME" });
+		},
+		reset() {
+			send({ type: "RESET" });
+		},
+		restart() {
+			send({ type: "RESTART" });
+		},
+		getRootProps() {
+			return normalize.element({
+				id: getRootId(scope),
+				...parts.root.attrs
+			});
+		},
+		getAreaProps() {
+			return normalize.element({
+				role: "timer",
+				id: getAreaId(scope),
+				"aria-label": `${time.days} days ${formattedTime.hours}:${formattedTime.minutes}:${formattedTime.seconds}`,
+				"aria-atomic": true,
+				...parts.area.attrs
+			});
+		},
+		getControlProps() {
+			return normalize.element({ ...parts.control.attrs });
+		},
+		getItemProps(props$1) {
+			const value = time[props$1.type];
+			return normalize.element({
+				...parts.item.attrs,
+				"data-type": props$1.type,
+				style: { "--value": value }
+			});
+		},
+		getItemLabelProps(props$1) {
+			return normalize.element({
+				...parts.itemLabel.attrs,
+				"data-type": props$1.type
+			});
+		},
+		getItemValueProps(props$1) {
+			return normalize.element({
+				...parts.itemValue.attrs,
+				"data-type": props$1.type
+			});
+		},
+		getSeparatorProps() {
+			return normalize.element({
+				"aria-hidden": true,
+				...parts.separator.attrs
+			});
+		},
+		getActionTriggerProps(props$1) {
+			if (!validActions.has(props$1.action)) throw new Error(`[sprawlify-js] Invalid action: ${props$1.action}. Must be one of: ${Array.from(validActions).join(", ")}`);
+			return normalize.button({
+				...parts.actionTrigger.attrs,
+				hidden: require_utils.match(props$1.action, {
+					start: () => running || paused,
+					pause: () => !running,
+					reset: () => !running && !paused,
+					resume: () => !paused,
+					restart: () => false
+				}),
+				type: "button",
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({ type: props$1.action.toUpperCase() });
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/timer/timer.machine.ts
+const machine = require_core.createMachine({
+	props({ props: props$1 }) {
+		validateProps(props$1);
+		return {
+			interval: 1e3,
+			startMs: 0,
+			...props$1
+		};
+	},
+	initialState({ prop }) {
+		return prop("autoStart") ? "running" : "idle";
+	},
+	context({ prop, bindable }) {
+		return { currentMs: bindable(() => ({ defaultValue: prop("startMs") })) };
+	},
+	watch({ track, send, prop }) {
+		track([() => prop("startMs")], () => {
+			send({ type: "RESTART" });
+		});
+	},
+	on: { RESTART: {
+		target: "running:temp",
+		actions: ["resetTime"]
+	} },
+	computed: {
+		time: ({ context }) => msToTime(context.get("currentMs")),
+		formattedTime: ({ computed }) => formatTime(computed("time")),
+		progressPercent: require_core.memo(({ context, prop }) => [
+			context.get("currentMs"),
+			prop("targetMs"),
+			prop("startMs"),
+			prop("countdown")
+		], ([currentMs, targetMs = 0, startMs, countdown]) => {
+			return require_utils.clampValue(countdown ? toPercent(currentMs, targetMs, startMs) : toPercent(currentMs, startMs, targetMs), 0, 1);
+		})
+	},
+	states: {
+		idle: { on: {
+			START: { target: "running" },
+			RESET: { actions: ["resetTime"] }
+		} },
+		"running:temp": {
+			effects: ["waitForNextTick"],
+			on: { CONTINUE: { target: "running" } }
+		},
+		running: {
+			effects: ["keepTicking"],
+			on: {
+				PAUSE: { target: "paused" },
+				TICK: [{
+					target: "idle",
+					guard: "hasReachedTarget",
+					actions: ["invokeOnComplete"]
+				}, { actions: ["updateTime", "invokeOnTick"] }],
+				RESET: { actions: ["resetTime"] }
+			}
+		},
+		paused: { on: {
+			RESUME: { target: "running" },
+			RESET: {
+				target: "idle",
+				actions: ["resetTime"]
+			}
+		} }
+	},
+	implementations: {
+		effects: {
+			keepTicking({ prop, send }) {
+				return require_utils.setRafInterval(({ deltaMs }) => {
+					send({
+						type: "TICK",
+						deltaMs
+					});
+				}, prop("interval"));
+			},
+			waitForNextTick({ send }) {
+				return require_utils.setRafTimeout(() => {
+					send({ type: "CONTINUE" });
+				}, 0);
+			}
+		},
+		actions: {
+			updateTime({ context, prop, event }) {
+				const sign = prop("countdown") ? -1 : 1;
+				const deltaMs = roundToInterval(event.deltaMs, prop("interval"));
+				context.set("currentMs", (prev) => {
+					const newValue = prev + sign * deltaMs;
+					let targetMs = prop("targetMs");
+					if (targetMs == null && prop("countdown")) targetMs = 0;
+					if (prop("countdown") && targetMs != null) return Math.max(newValue, targetMs);
+					else if (!prop("countdown") && targetMs != null) return Math.min(newValue, targetMs);
+					return newValue;
+				});
+			},
+			resetTime({ context, prop }) {
+				let targetMs = prop("targetMs");
+				if (targetMs == null && prop("countdown")) targetMs = 0;
+				context.set("currentMs", prop("startMs") ?? 0);
+			},
+			invokeOnTick({ context, prop, computed }) {
+				prop("onTick")?.({
+					value: context.get("currentMs"),
+					time: computed("time"),
+					formattedTime: computed("formattedTime")
+				});
+			},
+			invokeOnComplete({ prop }) {
+				prop("onComplete")?.();
+			}
+		},
+		guards: { hasReachedTarget: ({ context, prop }) => {
+			let targetMs = prop("targetMs");
+			if (targetMs == null && prop("countdown")) targetMs = 0;
+			if (targetMs == null) return false;
+			const currentMs = context.get("currentMs");
+			return prop("countdown") ? currentMs <= targetMs : currentMs >= targetMs;
+		} }
+	}
+});
+function msToTime(ms) {
+	const time = Math.max(0, ms);
+	const milliseconds = time % 1e3;
+	const seconds = Math.floor(time / 1e3) % 60;
+	const minutes = Math.floor(time / (1e3 * 60)) % 60;
+	const hours = Math.floor(time / (1e3 * 60 * 60)) % 24;
+	return {
+		days: Math.floor(time / (1e3 * 60 * 60 * 24)),
+		hours,
+		minutes,
+		seconds,
+		milliseconds
+	};
+}
+function toPercent(value, minValue, maxValue) {
+	const range = maxValue - minValue;
+	if (range === 0) return 0;
+	return (value - minValue) / range;
+}
+function padStart(num, size = 2) {
+	return num.toString().padStart(size, "0");
+}
+function roundToInterval(value, interval) {
+	return Math.floor(value / interval) * interval;
+}
+function formatTime(time) {
+	const { days, hours, minutes, seconds } = time;
+	return {
+		days: padStart(days),
+		hours: padStart(hours),
+		minutes: padStart(minutes),
+		seconds: padStart(seconds),
+		milliseconds: padStart(time.milliseconds, 3)
+	};
+}
+function validateProps(props$1) {
+	const { startMs, targetMs, countdown, interval } = props$1;
+	if (interval != null && (typeof interval !== "number" || interval <= 0)) throw new Error(`[timer] Invalid interval: ${interval}. Must be a positive number.`);
+	if (startMs != null && (typeof startMs !== "number" || startMs < 0)) throw new Error(`[timer] Invalid startMs: ${startMs}. Must be a non-negative number.`);
+	if (targetMs != null && (typeof targetMs !== "number" || targetMs < 0)) throw new Error(`[timer] Invalid targetMs: ${targetMs}. Must be a non-negative number.`);
+	if (countdown && startMs != null && targetMs != null) {
+		if (startMs <= targetMs) throw new Error(`[timer] Invalid countdown configuration: startMs (${startMs}) must be greater than targetMs (${targetMs}).`);
+	}
+	if (!countdown && startMs != null && targetMs != null) {
+		if (startMs >= targetMs) throw new Error(`[timer] Invalid stopwatch configuration: startMs (${startMs}) must be less than targetMs (${targetMs}).`);
+	}
+	if (countdown && targetMs == null && startMs != null && startMs <= 0) throw new Error(`[timer] Invalid countdown configuration: startMs (${startMs}) must be greater than 0 when no targetMs is provided.`);
+}
+
+//#endregion
+//#region src/machines/timer/timer.parse.ts
+const segments = new Set([
+	"days",
+	"hours",
+	"minutes",
+	"seconds"
+]);
+function isTimeSegment(date) {
+	return require_utils.isObject(date) && Object.keys(date).some((key) => segments.has(key));
+}
+function parse(date) {
+	if (typeof date === "string") return new Date(date).getTime();
+	if (isTimeSegment(date)) {
+		const { days = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0 } = date;
+		return (days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds) * 1e3 + milliseconds;
+	}
+	throw new Error("Invalid date");
+}
+
+//#endregion
+//#region src/machines/timer/timer.props.ts
+const props = require_create_props.createProps()([
+	"autoStart",
+	"countdown",
+	"getRootNode",
+	"id",
+	"ids",
+	"interval",
+	"onComplete",
+	"onTick",
+	"startMs",
+	"targetMs"
+]);
+const splitProps = require_utils.createSplitProps(props);
+
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.parse = parse;
+exports.props = props;
+exports.splitProps = splitProps;

package/dist/machines/timer/index.d.cts

@@ -0,0 +1,98 @@
+import { n as AnatomyInstance } from "../../create-anatomy-BGQ8pv8J.cjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu60O.cjs";
+import { b as NormalizeProps, g as RequiredBy, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+
+//#region src/machines/timer/timer.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "item" | "area" | "control" | "itemLabel" | "separator" | "itemValue" | "actionTrigger">;
+//#endregion
+//#region src/machines/timer/timer.types.d.ts
+interface Time<T = number> {
+  days: T;
+  hours: T;
+  minutes: T;
+  seconds: T;
+  milliseconds: T;
+}
+type TimePart = keyof Time;
+type TimerAction = "start" | "pause" | "resume" | "reset" | "restart";
+type ElementIds = Partial<{
+  root: string;
+  area: string;
+}>;
+interface TickDetails {
+  value: number;
+  time: Time;
+  formattedTime: Time<string>;
+}
+interface TimerProps extends CommonProperties {
+  ids?: ElementIds | undefined;
+  countdown?: boolean | undefined;
+  startMs?: number | undefined;
+  targetMs?: number | undefined;
+  autoStart?: boolean | undefined;
+  interval?: number | undefined;
+  onTick?: ((details: TickDetails) => void) | undefined;
+  onComplete?: (() => void) | undefined;
+}
+type PropsWithDefault = "interval" | "startMs";
+interface Context {
+  currentMs: number;
+}
+interface Computed {
+  time: Time;
+  formattedTime: Time<string>;
+  progressPercent: number;
+}
+interface TimerSchema {
+  state: "idle" | "running" | "paused" | "running:temp";
+  props: RequiredBy<TimerProps, PropsWithDefault>;
+  context: Context;
+  computed: Computed;
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type TimerService = Service<TimerSchema>;
+type TimerMachine = Machine<TimerSchema>;
+interface ItemProps {
+  type: TimePart;
+}
+interface ActionTriggerProps {
+  action: TimerAction;
+}
+interface TimerApi<T extends PropTypes = PropTypes> {
+  running: boolean;
+  paused: boolean;
+  time: Time;
+  formattedTime: Time<string>;
+  start: VoidFunction;
+  pause: VoidFunction;
+  resume: VoidFunction;
+  reset: VoidFunction;
+  restart: VoidFunction;
+  progressPercent: number;
+  getRootProps: () => T["element"];
+  getAreaProps: () => T["element"];
+  getControlProps: () => T["element"];
+  getItemProps: (props: ItemProps) => T["element"];
+  getItemValueProps: (props: ItemProps) => T["element"];
+  getItemLabelProps: (props: ItemProps) => T["element"];
+  getSeparatorProps: () => T["element"];
+  getActionTriggerProps: (props: ActionTriggerProps) => T["button"];
+}
+//#endregion
+//#region src/machines/timer/timer.connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<TimerSchema>, normalize: NormalizeProps<T>): TimerApi<T>;
+//#endregion
+//#region src/machines/timer/timer.machine.d.ts
+declare const machine: Machine<TimerSchema>;
+//#endregion
+//#region src/machines/timer/timer.parse.d.ts
+declare function parse(date: string | Partial<Time>): number;
+//#endregion
+//#region src/machines/timer/timer.props.d.ts
+declare const props: (keyof TimerProps)[];
+declare const splitProps: <Props extends Partial<TimerProps>>(props: Props) => [Partial<TimerProps>, Omit<Props, keyof TimerProps>];
+//#endregion
+export { type ActionTriggerProps, type TimerApi as Api, type ElementIds, type ItemProps, type TimerMachine as Machine, type TimerProps as Props, type TimerService as Service, type TickDetails, type Time, type TimePart, type TimerAction, anatomy, connect, machine, parse, props, splitProps };

package/dist/machines/timer/index.d.mts

@@ -0,0 +1,98 @@
+import { n as AnatomyInstance } from "../../create-anatomy-B3XYc-qG.mjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DDTcG99l.mjs";
+import { b as NormalizeProps, g as RequiredBy, t as CommonProperties, x as PropTypes } from "../../index-C0MKXQmE.mjs";
+
+//#region src/machines/timer/timer.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "item" | "area" | "control" | "itemLabel" | "separator" | "itemValue" | "actionTrigger">;
+//#endregion
+//#region src/machines/timer/timer.types.d.ts
+interface Time<T = number> {
+  days: T;
+  hours: T;
+  minutes: T;
+  seconds: T;
+  milliseconds: T;
+}
+type TimePart = keyof Time;
+type TimerAction = "start" | "pause" | "resume" | "reset" | "restart";
+type ElementIds = Partial<{
+  root: string;
+  area: string;
+}>;
+interface TickDetails {
+  value: number;
+  time: Time;
+  formattedTime: Time<string>;
+}
+interface TimerProps extends CommonProperties {
+  ids?: ElementIds | undefined;
+  countdown?: boolean | undefined;
+  startMs?: number | undefined;
+  targetMs?: number | undefined;
+  autoStart?: boolean | undefined;
+  interval?: number | undefined;
+  onTick?: ((details: TickDetails) => void) | undefined;
+  onComplete?: (() => void) | undefined;
+}
+type PropsWithDefault = "interval" | "startMs";
+interface Context {
+  currentMs: number;
+}
+interface Computed {
+  time: Time;
+  formattedTime: Time<string>;
+  progressPercent: number;
+}
+interface TimerSchema {
+  state: "idle" | "running" | "paused" | "running:temp";
+  props: RequiredBy<TimerProps, PropsWithDefault>;
+  context: Context;
+  computed: Computed;
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type TimerService = Service<TimerSchema>;
+type TimerMachine = Machine<TimerSchema>;
+interface ItemProps {
+  type: TimePart;
+}
+interface ActionTriggerProps {
+  action: TimerAction;
+}
+interface TimerApi<T extends PropTypes = PropTypes> {
+  running: boolean;
+  paused: boolean;
+  time: Time;
+  formattedTime: Time<string>;
+  start: VoidFunction;
+  pause: VoidFunction;
+  resume: VoidFunction;
+  reset: VoidFunction;
+  restart: VoidFunction;
+  progressPercent: number;
+  getRootProps: () => T["element"];
+  getAreaProps: () => T["element"];
+  getControlProps: () => T["element"];
+  getItemProps: (props: ItemProps) => T["element"];
+  getItemValueProps: (props: ItemProps) => T["element"];
+  getItemLabelProps: (props: ItemProps) => T["element"];
+  getSeparatorProps: () => T["element"];
+  getActionTriggerProps: (props: ActionTriggerProps) => T["button"];
+}
+//#endregion
+//#region src/machines/timer/timer.connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<TimerSchema>, normalize: NormalizeProps<T>): TimerApi<T>;
+//#endregion
+//#region src/machines/timer/timer.machine.d.ts
+declare const machine: Machine<TimerSchema>;
+//#endregion
+//#region src/machines/timer/timer.parse.d.ts
+declare function parse(date: string | Partial<Time>): number;
+//#endregion
+//#region src/machines/timer/timer.props.d.ts
+declare const props: (keyof TimerProps)[];
+declare const splitProps: <Props extends Partial<TimerProps>>(props: Props) => [Partial<TimerProps>, Omit<Props, keyof TimerProps>];
+//#endregion
+export { type ActionTriggerProps, type TimerApi as Api, type ElementIds, type ItemProps, type TimerMachine as Machine, type TimerProps as Props, type TimerService as Service, type TickDetails, type Time, type TimePart, type TimerAction, anatomy, connect, machine, parse, props, splitProps };