@sprawlify/primitives 0.0.1

package/dist/machines/presence/index.mjs

@@ -0,0 +1,190 @@
+import { U as raf, V as nextTick, Yt as getComputedStyle, ft as getEventTarget, l as setStyle, rn as getWindow } from "../../dom-query-DFCRhyj1.mjs";
+import "../../utils-BZyrxWWR.mjs";
+import { a as createMachine } from "../../core-DCFNMTZF.mjs";
+import { t as createProps } from "../../create-props-BnF_vl-E.mjs";
+
+//#region src/machines/presence/presence.connect.ts
+function connect(service, normalize) {
+	const { state, send, context } = service;
+	const present = state.matches("mounted", "unmountSuspended");
+	return {
+		skip: !context.get("initial"),
+		present,
+		setNode(node) {
+			if (!node) return;
+			send({
+				type: "NODE.SET",
+				node
+			});
+		},
+		unmount() {
+			send({ type: "UNMOUNT" });
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/presence/presence.machine.ts
+const machine = createMachine({
+	props({ props: props$1 }) {
+		return {
+			...props$1,
+			present: !!props$1.present
+		};
+	},
+	initialState({ prop }) {
+		return prop("present") ? "mounted" : "unmounted";
+	},
+	refs() {
+		return {
+			node: null,
+			styles: null
+		};
+	},
+	context({ bindable }) {
+		return {
+			unmountAnimationName: bindable(() => ({ defaultValue: null })),
+			prevAnimationName: bindable(() => ({ defaultValue: null })),
+			present: bindable(() => ({ defaultValue: false })),
+			initial: bindable(() => ({
+				sync: true,
+				defaultValue: false
+			}))
+		};
+	},
+	exit: ["cleanupNode"],
+	watch({ track, prop, send }) {
+		track([() => prop("present")], () => {
+			send({ type: "PRESENCE.CHANGED" });
+		});
+	},
+	on: {
+		"NODE.SET": { actions: ["setupNode"] },
+		"PRESENCE.CHANGED": { actions: ["setInitial", "syncPresence"] }
+	},
+	states: {
+		mounted: { on: {
+			UNMOUNT: {
+				target: "unmounted",
+				actions: ["clearPrevAnimationName", "invokeOnExitComplete"]
+			},
+			"UNMOUNT.SUSPEND": { target: "unmountSuspended" }
+		} },
+		unmountSuspended: {
+			effects: ["trackAnimationEvents"],
+			on: {
+				MOUNT: {
+					target: "mounted",
+					actions: ["setPrevAnimationName"]
+				},
+				UNMOUNT: {
+					target: "unmounted",
+					actions: ["clearPrevAnimationName", "invokeOnExitComplete"]
+				}
+			}
+		},
+		unmounted: { on: { MOUNT: {
+			target: "mounted",
+			actions: ["setPrevAnimationName"]
+		} } }
+	},
+	implementations: {
+		actions: {
+			setInitial: ({ context }) => {
+				if (context.get("initial")) return;
+				queueMicrotask(() => {
+					context.set("initial", true);
+				});
+			},
+			invokeOnExitComplete: ({ prop, refs }) => {
+				prop("onExitComplete")?.();
+				const node = refs.get("node");
+				if (!node) return;
+				const event = new (getWindow(node)).CustomEvent("exitcomplete", { bubbles: false });
+				node.dispatchEvent(event);
+			},
+			setupNode: ({ refs, event }) => {
+				if (refs.get("node") === event.node) return;
+				refs.set("node", event.node);
+				refs.set("styles", getComputedStyle(event.node));
+			},
+			cleanupNode: ({ refs }) => {
+				refs.set("node", null);
+				refs.set("styles", null);
+			},
+			syncPresence: ({ context, refs, send, prop }) => {
+				const presentProp = prop("present");
+				if (presentProp) return send({
+					type: "MOUNT",
+					src: "presence.changed"
+				});
+				const node = refs.get("node");
+				if (!presentProp && node?.ownerDocument.visibilityState === "hidden") return send({
+					type: "UNMOUNT",
+					src: "visibilitychange"
+				});
+				raf(() => {
+					const animationName = getAnimationName(refs.get("styles"));
+					context.set("unmountAnimationName", animationName);
+					if (animationName === "none" || animationName === context.get("prevAnimationName") || refs.get("styles")?.display === "none" || refs.get("styles")?.animationDuration === "0s") send({
+						type: "UNMOUNT",
+						src: "presence.changed"
+					});
+					else send({ type: "UNMOUNT.SUSPEND" });
+				});
+			},
+			setPrevAnimationName: ({ context, refs }) => {
+				raf(() => {
+					context.set("prevAnimationName", getAnimationName(refs.get("styles")));
+				});
+			},
+			clearPrevAnimationName: ({ context }) => {
+				context.set("prevAnimationName", null);
+			}
+		},
+		effects: { trackAnimationEvents: ({ context, refs, send, prop }) => {
+			const node = refs.get("node");
+			if (!node) return;
+			const onStart = (event) => {
+				if ((event.composedPath?.()?.[0] ?? event.target) === node) context.set("prevAnimationName", getAnimationName(refs.get("styles")));
+			};
+			const onEnd = (event) => {
+				const animationName = getAnimationName(refs.get("styles"));
+				if (getEventTarget(event) === node && animationName === context.get("unmountAnimationName") && !prop("present")) send({
+					type: "UNMOUNT",
+					src: "animationend"
+				});
+			};
+			const onCancel = (event) => {
+				if (getEventTarget(event) === node && !prop("present")) send({
+					type: "UNMOUNT",
+					src: "animationcancel"
+				});
+			};
+			node.addEventListener("animationstart", onStart);
+			node.addEventListener("animationcancel", onCancel);
+			node.addEventListener("animationend", onEnd);
+			const cleanupStyles = setStyle(node, { animationFillMode: "forwards" });
+			return () => {
+				node.removeEventListener("animationstart", onStart);
+				node.removeEventListener("animationcancel", onCancel);
+				node.removeEventListener("animationend", onEnd);
+				nextTick(() => cleanupStyles());
+			};
+		} }
+	}
+});
+function getAnimationName(styles) {
+	return styles?.animationName || "none";
+}
+
+//#endregion
+//#region src/machines/presence/presence.props.ts
+const props = createProps()([
+	"onExitComplete",
+	"present",
+	"immediate"
+]);
+
+//#endregion
+export { connect, machine, props };

package/dist/machines/progress/index.cjs

@@ -0,0 +1,288 @@
+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/progress/progress.anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("progress").parts("root", "label", "track", "range", "valueText", "view", "circle", "circleTrack", "circleRange");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/progress/progress.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `progress:${ctx.id}`;
+const getTrackId = (ctx) => ctx.ids?.track ?? `progress:${ctx.id}:track`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `progress:${ctx.id}:label`;
+const getCircleId = (ctx) => ctx.ids?.circle ?? `progress:${ctx.id}:circle`;
+
+//#endregion
+//#region src/machines/progress/progress.connect.ts
+function connect(service, normalize) {
+	const { context, computed, prop, send, scope } = service;
+	const percent = computed("percent");
+	const percentAsString = computed("isIndeterminate") ? "" : computed("formatter").format(percent / 100);
+	const max = prop("max");
+	const min = prop("min");
+	const orientation = prop("orientation");
+	const translations = prop("translations");
+	const indeterminate = computed("isIndeterminate");
+	const value = context.get("value");
+	const valueAsString = translations?.value({
+		value,
+		max,
+		percent,
+		min,
+		formatter: computed("formatter")
+	}) ?? "";
+	const progressState = getProgressState(value, max);
+	const progressbarProps = {
+		role: "progressbar",
+		"aria-label": valueAsString,
+		"data-max": max,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": value ?? void 0,
+		"data-orientation": orientation,
+		"data-state": progressState
+	};
+	const circleProps$1 = getCircleProps(service);
+	return {
+		value,
+		valueAsString,
+		min,
+		max,
+		percent,
+		percentAsString,
+		indeterminate,
+		setValue(value$1) {
+			send({
+				type: "VALUE.SET",
+				value: value$1
+			});
+		},
+		setToMax() {
+			send({
+				type: "VALUE.SET",
+				value: max
+			});
+		},
+		setToMin() {
+			send({
+				type: "VALUE.SET",
+				value: min
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				...parts.root.attrs,
+				id: getRootId(scope),
+				"data-max": max,
+				"data-value": value ?? void 0,
+				"data-state": progressState,
+				"data-orientation": orientation,
+				style: { "--percent": indeterminate ? void 0 : percent }
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				id: getLabelId(scope),
+				...parts.label.attrs,
+				"data-orientation": orientation
+			});
+		},
+		getValueTextProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				"aria-live": "polite",
+				...parts.valueText.attrs
+			});
+		},
+		getTrackProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				id: getTrackId(scope),
+				...parts.track.attrs,
+				...progressbarProps
+			});
+		},
+		getRangeProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				...parts.range.attrs,
+				"data-orientation": orientation,
+				"data-state": progressState,
+				style: { [computed("isHorizontal") ? "width" : "height"]: indeterminate ? void 0 : `${percent}%` }
+			});
+		},
+		getCircleProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				id: getCircleId(scope),
+				...parts.circle.attrs,
+				...progressbarProps,
+				...circleProps$1.root
+			});
+		},
+		getCircleTrackProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				"data-orientation": orientation,
+				...parts.circleTrack.attrs,
+				...circleProps$1.track
+			});
+		},
+		getCircleRangeProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				...parts.circleRange.attrs,
+				...circleProps$1.range,
+				"data-state": progressState
+			});
+		},
+		getViewProps(props$1) {
+			return normalize.element({
+				dir: prop("dir"),
+				...parts.view.attrs,
+				"data-state": props$1.state,
+				hidden: props$1.state !== progressState
+			});
+		}
+	};
+}
+function getProgressState(value, maxValue) {
+	return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
+}
+const circleProps = { style: {
+	"--radius": "calc(var(--size) / 2 - var(--thickness) / 2)",
+	cx: "calc(var(--size) / 2)",
+	cy: "calc(var(--size) / 2)",
+	r: "var(--radius)",
+	fill: "transparent",
+	strokeWidth: "var(--thickness)"
+} };
+const rootProps = { style: {
+	width: "var(--size)",
+	height: "var(--size)"
+} };
+function getCircleProps(service) {
+	const { context, computed } = service;
+	return {
+		root: rootProps,
+		track: circleProps,
+		range: {
+			opacity: context.get("value") === 0 ? 0 : void 0,
+			style: {
+				...circleProps.style,
+				"--percent": computed("percent"),
+				"--circumference": `calc(2 * 3.14159 * var(--radius))`,
+				"--offset": `calc(var(--circumference) * (100 - var(--percent)) / 100)`,
+				strokeDashoffset: `calc(var(--circumference) * ((100 - var(--percent)) / 100))`,
+				strokeDasharray: computed("isIndeterminate") ? void 0 : `var(--circumference)`,
+				transformOrigin: "center",
+				transform: "rotate(-90deg)"
+			}
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/progress/progress.machine.ts
+const machine = require_core.createMachine({
+	props({ props: props$1 }) {
+		const min = props$1.min ?? 0;
+		const max = props$1.max ?? 100;
+		return {
+			orientation: "horizontal",
+			...props$1,
+			max,
+			min,
+			defaultValue: props$1.defaultValue !== void 0 ? props$1.defaultValue : midValue(min, max),
+			formatOptions: {
+				style: "percent",
+				...props$1.formatOptions
+			},
+			translations: {
+				value: ({ value, percent, formatter }) => {
+					if (value === null) return "loading...";
+					if (formatter) {
+						const num = formatter.resolvedOptions().style === "percent" ? percent / 100 : value;
+						return formatter.format(num);
+					}
+					return value.toString();
+				},
+				...props$1.translations
+			}
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	entry: ["validateContext"],
+	context({ bindable, prop }) {
+		return { value: bindable(() => ({
+			defaultValue: prop("defaultValue"),
+			value: prop("value"),
+			onChange(value) {
+				prop("onValueChange")?.({ value });
+			}
+		})) };
+	},
+	computed: {
+		isIndeterminate: ({ context }) => context.get("value") === null,
+		percent({ context, prop }) {
+			const value = context.get("value");
+			if (!require_utils.isNumber(value)) return -1;
+			return require_utils.getValuePercent(value, prop("min"), prop("max")) * 100;
+		},
+		formatter: require_core.memo(({ prop }) => [prop("locale"), prop("formatOptions")], ([locale, formatOptions]) => new Intl.NumberFormat(locale, formatOptions)),
+		isHorizontal: ({ prop }) => prop("orientation") === "horizontal"
+	},
+	states: { idle: { on: { "VALUE.SET": { actions: ["setValue"] } } } },
+	implementations: { actions: {
+		setValue: ({ context, event, prop }) => {
+			const value = event.value === null ? null : Math.max(0, Math.min(event.value, prop("max")));
+			context.set("value", value);
+		},
+		validateContext: ({ context, prop }) => {
+			const max = prop("max");
+			const min = prop("min");
+			const value = context.get("value");
+			if (value == null) return;
+			if (!isValidNumber(max)) throw new Error(`[progress] The max value passed \`${max}\` is not a valid number`);
+			if (!isValidMax(value, max)) throw new Error(`[progress] The value passed \`${value}\` exceeds the max value \`${max}\``);
+			if (!isValidMin(value, min)) throw new Error(`[progress] The value passed \`${value}\` exceeds the min value \`${min}\``);
+		}
+	} }
+});
+const isValidNumber = (max) => require_utils.isNumber(max) && !isNaN(max);
+const isValidMax = (value, max) => isValidNumber(value) && value <= max;
+const isValidMin = (value, min) => isValidNumber(value) && value >= min;
+const midValue = (min, max) => min + (max - min) / 2;
+
+//#endregion
+//#region src/machines/progress/progress.props.ts
+const props = require_create_props.createProps()([
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"max",
+	"min",
+	"orientation",
+	"translations",
+	"value",
+	"onValueChange",
+	"defaultValue",
+	"formatOptions",
+	"locale"
+]);
+const splitProps = require_utils.createSplitProps(props);
+
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;
+exports.splitProps = splitProps;

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

@@ -0,0 +1,96 @@
+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, d as Orientation, f as OrientationProperty, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+
+//#region src/machines/progress/progress.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "track" | "label" | "circle" | "view" | "valueText" | "range" | "circleTrack" | "circleRange">;
+//#endregion
+//#region src/machines/progress/progress.types.d.ts
+type ProgressState = "indeterminate" | "loading" | "complete";
+interface ValueTranslationDetails {
+  value: number | null;
+  max: number;
+  min: number;
+  percent: number;
+  formatter: Intl.NumberFormat;
+}
+interface ValueChangeDetails {
+  value: number | null;
+}
+interface IntlTranslations {
+  value: (details: ValueTranslationDetails) => string;
+}
+type ElementIds = Partial<{
+  root: string;
+  track: string;
+  label: string;
+  circle: string;
+}>;
+interface ProgressProps extends DirectionProperty, CommonProperties, OrientationProperty {
+  ids?: ElementIds | undefined;
+  value?: number | null | undefined;
+  defaultValue?: number | null | undefined;
+  min?: number | undefined;
+  max?: number | undefined;
+  translations?: IntlTranslations | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  formatOptions?: Intl.NumberFormatOptions | undefined;
+  locale?: string | undefined;
+}
+type PropsWithDefault = "orientation" | "translations" | "min" | "max" | "formatOptions";
+type Computed = Readonly<{
+  isIndeterminate: boolean;
+  percent: number;
+  isHorizontal: boolean;
+  formatter: Intl.NumberFormat;
+}>;
+interface ProgressSchema {
+  props: RequiredBy<ProgressProps, PropsWithDefault>;
+  computed: Computed;
+  context: {
+    value: number | null;
+  };
+  state: "idle";
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type ProgressService = Service<ProgressSchema>;
+type ProgressMachine = Machine<ProgressSchema>;
+interface ViewProps {
+  state: ProgressState;
+}
+interface ProgressApi<T extends PropTypes = PropTypes> {
+  value: number | null;
+  valueAsString: string;
+  setValue: (value: number | null) => void;
+  setToMax: VoidFunction;
+  setToMin: VoidFunction;
+  percent: number;
+  percentAsString: string;
+  min: number;
+  max: number;
+  indeterminate: boolean;
+  getRootProps: () => T["element"];
+  getLabelProps: () => T["element"];
+  getTrackProps: () => T["element"];
+  getValueTextProps: () => T["element"];
+  getRangeProps: () => T["element"];
+  getViewProps: (props: ViewProps) => T["element"];
+  getCircleProps: () => T["svg"];
+  getCircleTrackProps: () => T["circle"];
+  getCircleRangeProps: () => T["circle"];
+}
+//#endregion
+//#region src/machines/progress/progress.connect.d.ts
+declare function connect<T extends PropTypes>(service: ProgressService, normalize: NormalizeProps<T>): ProgressApi<T>;
+//#endregion
+//#region src/machines/progress/progress.machine.d.ts
+declare const machine: Machine<ProgressSchema>;
+//#endregion
+//#region src/machines/progress/progress.props.d.ts
+declare const props: (keyof ProgressProps)[];
+declare const splitProps: <Props extends Partial<ProgressProps>>(props: Props) => [Partial<ProgressProps>, Omit<Props, keyof ProgressProps>];
+//#endregion
+export { type ProgressApi as Api, type ElementIds, type IntlTranslations, type ProgressMachine as Machine, type Orientation, type ProgressState, type ProgressProps as Props, type ProgressService as Service, type ValueChangeDetails, type ValueTranslationDetails, type ViewProps, anatomy, connect, machine, props, splitProps };

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

@@ -0,0 +1,96 @@
+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, d as Orientation, f as OrientationProperty, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-C0MKXQmE.mjs";
+
+//#region src/machines/progress/progress.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "track" | "label" | "circle" | "view" | "valueText" | "range" | "circleTrack" | "circleRange">;
+//#endregion
+//#region src/machines/progress/progress.types.d.ts
+type ProgressState = "indeterminate" | "loading" | "complete";
+interface ValueTranslationDetails {
+  value: number | null;
+  max: number;
+  min: number;
+  percent: number;
+  formatter: Intl.NumberFormat;
+}
+interface ValueChangeDetails {
+  value: number | null;
+}
+interface IntlTranslations {
+  value: (details: ValueTranslationDetails) => string;
+}
+type ElementIds = Partial<{
+  root: string;
+  track: string;
+  label: string;
+  circle: string;
+}>;
+interface ProgressProps extends DirectionProperty, CommonProperties, OrientationProperty {
+  ids?: ElementIds | undefined;
+  value?: number | null | undefined;
+  defaultValue?: number | null | undefined;
+  min?: number | undefined;
+  max?: number | undefined;
+  translations?: IntlTranslations | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  formatOptions?: Intl.NumberFormatOptions | undefined;
+  locale?: string | undefined;
+}
+type PropsWithDefault = "orientation" | "translations" | "min" | "max" | "formatOptions";
+type Computed = Readonly<{
+  isIndeterminate: boolean;
+  percent: number;
+  isHorizontal: boolean;
+  formatter: Intl.NumberFormat;
+}>;
+interface ProgressSchema {
+  props: RequiredBy<ProgressProps, PropsWithDefault>;
+  computed: Computed;
+  context: {
+    value: number | null;
+  };
+  state: "idle";
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type ProgressService = Service<ProgressSchema>;
+type ProgressMachine = Machine<ProgressSchema>;
+interface ViewProps {
+  state: ProgressState;
+}
+interface ProgressApi<T extends PropTypes = PropTypes> {
+  value: number | null;
+  valueAsString: string;
+  setValue: (value: number | null) => void;
+  setToMax: VoidFunction;
+  setToMin: VoidFunction;
+  percent: number;
+  percentAsString: string;
+  min: number;
+  max: number;
+  indeterminate: boolean;
+  getRootProps: () => T["element"];
+  getLabelProps: () => T["element"];
+  getTrackProps: () => T["element"];
+  getValueTextProps: () => T["element"];
+  getRangeProps: () => T["element"];
+  getViewProps: (props: ViewProps) => T["element"];
+  getCircleProps: () => T["svg"];
+  getCircleTrackProps: () => T["circle"];
+  getCircleRangeProps: () => T["circle"];
+}
+//#endregion
+//#region src/machines/progress/progress.connect.d.ts
+declare function connect<T extends PropTypes>(service: ProgressService, normalize: NormalizeProps<T>): ProgressApi<T>;
+//#endregion
+//#region src/machines/progress/progress.machine.d.ts
+declare const machine: Machine<ProgressSchema>;
+//#endregion
+//#region src/machines/progress/progress.props.d.ts
+declare const props: (keyof ProgressProps)[];
+declare const splitProps: <Props extends Partial<ProgressProps>>(props: Props) => [Partial<ProgressProps>, Omit<Props, keyof ProgressProps>];
+//#endregion
+export { type ProgressApi as Api, type ElementIds, type IntlTranslations, type ProgressMachine as Machine, type Orientation, type ProgressState, type ProgressProps as Props, type ProgressService as Service, type ValueChangeDetails, type ValueTranslationDetails, type ViewProps, anatomy, connect, machine, props, splitProps };