@sprawlify/primitives 0.0.1

package/dist/machines/marquee/index.cjs

@@ -0,0 +1,395 @@
+const require_create_anatomy = require('../../create-anatomy-CDsIFUXg.cjs');
+const require_dom_query = 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/marquee/marquee.anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("marquee").parts("root", "viewport", "content", "edge", "item");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/marquee/marquee.dom.ts
+const dom = {
+	getRootId: (ctx) => ctx.ids?.root ?? `marquee:${ctx.id}`,
+	getViewportId: (ctx) => ctx.ids?.viewport ?? `marquee:${ctx.id}:viewport`,
+	getContentId: (ctx, index) => ctx.ids?.content?.(index) ?? `marquee:${ctx.id}:content:${index}`,
+	getRootEl: (ctx) => ctx.getById(dom.getRootId(ctx)),
+	getViewportEl: (ctx) => ctx.getById(dom.getViewportId(ctx)),
+	getContentEl: (ctx, index) => ctx.getById(dom.getContentId(ctx, index))
+};
+
+//#endregion
+//#region src/machines/marquee/marquee.utils.ts
+const getEdgePositionStyles = (options) => {
+	const { side } = options;
+	switch (side) {
+		case "start": return {
+			top: 0,
+			insetInlineStart: 0,
+			height: "100%"
+		};
+		case "end": return {
+			top: 0,
+			insetInlineEnd: 0,
+			height: "100%"
+		};
+		case "top": return {
+			top: 0,
+			insetInline: 0,
+			width: "100%"
+		};
+		case "bottom": return {
+			bottom: 0,
+			insetInline: 0,
+			width: "100%"
+		};
+	}
+};
+const getMarqueeTranslate = (options) => {
+	const { side, dir } = options;
+	if (side === "top") return "-100%";
+	if (side === "bottom") return "100%";
+	return side === "start" && dir === "ltr" || side === "end" && dir === "rtl" ? "-100%" : "100%";
+};
+
+//#endregion
+//#region src/machines/marquee/marquee.connect.ts
+function connect(service, normalize) {
+	const { scope, send, context, computed, prop } = service;
+	const side = prop("side");
+	const paused = context.get("paused");
+	const duration = context.get("duration");
+	const orientation = computed("orientation");
+	const multiplier = computed("multiplier");
+	const isVertical = computed("isVertical");
+	return {
+		paused,
+		orientation,
+		side,
+		multiplier,
+		contentCount: multiplier + 1,
+		pause() {
+			send({ type: "PAUSE" });
+		},
+		resume() {
+			send({ type: "RESUME" });
+		},
+		togglePause() {
+			send({ type: "TOGGLE_PAUSE" });
+		},
+		restart() {
+			send({ type: "RESTART" });
+		},
+		getRootProps() {
+			const dir = prop("dir");
+			return normalize.element({
+				...parts.root.attrs,
+				id: dom.getRootId(scope),
+				dir,
+				role: "region",
+				"aria-roledescription": "marquee",
+				"aria-live": "off",
+				"aria-label": prop("translations").root,
+				"data-state": paused ? "paused" : "idle",
+				"data-orientation": orientation,
+				"data-paused": require_dom_query.dataAttr(paused),
+				onMouseEnter: prop("pauseOnInteraction") ? () => send({ type: "PAUSE" }) : void 0,
+				onMouseLeave: prop("pauseOnInteraction") ? () => send({ type: "RESUME" }) : void 0,
+				onFocusCapture: prop("pauseOnInteraction") ? (event) => {
+					if (event.target !== event.currentTarget) send({ type: "PAUSE" });
+				} : void 0,
+				onBlurCapture: prop("pauseOnInteraction") ? (event) => {
+					if (!event.currentTarget.contains(event.relatedTarget)) send({ type: "RESUME" });
+				} : void 0,
+				style: {
+					display: "flex",
+					flexDirection: orientation === "vertical" ? "column" : "row",
+					position: "relative",
+					overflow: "hidden",
+					contain: "layout style paint",
+					"--marquee-duration": `${duration}s`,
+					"--marquee-spacing": prop("spacing"),
+					"--marquee-delay": `${prop("delay")}s`,
+					"--marquee-loop-count": prop("loopCount") === 0 ? "infinite" : prop("loopCount").toString(),
+					"--marquee-translate": getMarqueeTranslate({
+						side,
+						dir
+					})
+				}
+			});
+		},
+		getViewportProps() {
+			return normalize.element({
+				...parts.viewport.attrs,
+				id: dom.getViewportId(scope),
+				"data-part": "viewport",
+				"data-orientation": orientation,
+				"data-side": side,
+				onAnimationIteration(event) {
+					if (event.target === dom.getContentEl(scope, 0)) prop("onLoopComplete")?.();
+				},
+				onAnimationEnd(event) {
+					if (event.target === dom.getContentEl(scope, 0)) prop("onComplete")?.();
+				},
+				style: {
+					display: "flex",
+					[isVertical ? "height" : "width"]: "100%",
+					flexDirection: orientation === "vertical" ? side === "bottom" ? "column-reverse" : "column" : side === "end" ? "row-reverse" : "row"
+				}
+			});
+		},
+		getContentProps(props$1) {
+			const { index } = props$1;
+			const clone = index > 0;
+			return normalize.element({
+				...parts.content.attrs,
+				id: dom.getContentId(scope, index),
+				dir: prop("dir"),
+				"data-part": "content",
+				"data-index": index,
+				"data-orientation": orientation,
+				"data-side": side,
+				"data-reverse": prop("reverse") ? "" : void 0,
+				"data-clone": require_dom_query.dataAttr(clone),
+				role: clone ? "presentation" : void 0,
+				"aria-hidden": clone ? true : void 0,
+				style: {
+					display: "flex",
+					flexDirection: orientation === "vertical" ? "column" : "row",
+					flexShrink: 0,
+					backfaceVisibility: "hidden",
+					WebkitBackfaceVisibility: "hidden",
+					willChange: paused ? "auto" : "transform",
+					transform: "translateZ(0)",
+					[isVertical ? "minWidth" : "minHeight"]: "auto",
+					contain: "paint"
+				}
+			});
+		},
+		getEdgeProps(props$1) {
+			const { side: side$1 } = props$1;
+			const dir = prop("dir");
+			return normalize.element({
+				...parts.edge.attrs,
+				dir,
+				"data-part": "edge",
+				"data-side": side$1,
+				"data-orientation": orientation,
+				style: {
+					pointerEvents: "none",
+					position: "absolute",
+					...getEdgePositionStyles({
+						side: side$1,
+						dir
+					})
+				}
+			});
+		},
+		getItemProps() {
+			return normalize.element({
+				...parts.item.attrs,
+				dir: prop("dir"),
+				style: { [isVertical ? "marginBlock" : "marginInline"]: "calc(var(--marquee-spacing) / 2)" }
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/marquee/marquee.machine.ts
+const machine = require_core.createMachine({
+	props({ props: props$1 }) {
+		return {
+			dir: "ltr",
+			side: "start",
+			speed: 50,
+			delay: 0,
+			loopCount: 0,
+			spacing: "1rem",
+			autoFill: false,
+			pauseOnInteraction: false,
+			reverse: false,
+			defaultPaused: false,
+			translations: { root: "Marquee content" },
+			...props$1
+		};
+	},
+	refs() {
+		return {
+			dimensions: void 0,
+			initialDurationSet: false
+		};
+	},
+	context({ prop, bindable }) {
+		return {
+			paused: bindable(() => ({
+				value: prop("paused"),
+				defaultValue: prop("defaultPaused"),
+				onChange(value) {
+					prop("onPauseChange")?.({ paused: value });
+				}
+			})),
+			duration: bindable(() => ({ defaultValue: 2e3 / Math.max(.001, prop("speed")) }))
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	computed: {
+		orientation: ({ prop }) => {
+			const side = prop("side");
+			return side === "top" || side === "bottom" ? "vertical" : "horizontal";
+		},
+		isVertical: ({ prop }) => {
+			const side = prop("side");
+			return side === "top" || side === "bottom";
+		},
+		multiplier: ({ refs, prop }) => {
+			if (!prop("autoFill")) return 1;
+			const dimensions = refs.get("dimensions");
+			if (!dimensions) return 1;
+			const { rootSize, contentSize } = dimensions;
+			if (contentSize === 0) return 1;
+			return contentSize < rootSize ? Math.ceil(rootSize / contentSize) : 1;
+		}
+	},
+	watch({ track, action, prop }) {
+		track([() => prop("speed")], () => {
+			action(["recalculateDuration", "restartAnimation"]);
+		});
+		track([() => prop("spacing"), () => prop("side")], () => {
+			action(["recalculateDuration"]);
+		});
+	},
+	on: {
+		PAUSE: { actions: ["setPaused"] },
+		RESUME: { actions: ["setResumed"] },
+		TOGGLE_PAUSE: { actions: ["togglePaused"] },
+		RESTART: { actions: ["restartAnimation"] }
+	},
+	effects: ["trackDimensions"],
+	states: { idle: {} },
+	implementations: {
+		actions: {
+			setPaused({ context }) {
+				context.set("paused", true);
+			},
+			setResumed({ context }) {
+				context.set("paused", false);
+			},
+			togglePaused({ context }) {
+				context.set("paused", (prev) => !prev);
+			},
+			restartAnimation({ scope }) {
+				const viewportEl = dom.getViewportEl(scope);
+				if (!viewportEl) return;
+				viewportEl.querySelectorAll("[data-part=\"content\"]").forEach((el) => {
+					el.style.animation = "none";
+					el.offsetHeight;
+					el.style.animation = "";
+				});
+			},
+			recalculateDuration({ refs, computed, context, prop }) {
+				const dimensions = refs.get("dimensions");
+				if (!dimensions) return;
+				const { rootSize, contentSize } = dimensions;
+				const duration = calculateDuration({
+					rootSize,
+					contentSize,
+					speed: Math.max(.001, prop("speed")),
+					multiplier: computed("multiplier"),
+					autoFill: prop("autoFill")
+				});
+				context.set("duration", duration);
+			}
+		},
+		effects: { trackDimensions({ scope, refs, computed, context, prop }) {
+			const rootEl = dom.getRootEl(scope);
+			const contentEl = dom.getContentEl(scope, 0);
+			if (!rootEl || !contentEl) return;
+			const win = scope.getWin();
+			const measureDimensions = () => {
+				return {
+					rootSize: computed("isVertical") ? rootEl.clientHeight : rootEl.clientWidth,
+					contentSize: computed("isVertical") ? contentEl.clientHeight : contentEl.clientWidth
+				};
+			};
+			const exec = () => {
+				const { rootSize, contentSize } = measureDimensions();
+				if (rootSize > 0 && contentSize > 0) {
+					refs.set("dimensions", {
+						rootSize,
+						contentSize
+					});
+					if (!refs.get("initialDurationSet")) {
+						const duration = calculateDuration({
+							rootSize,
+							contentSize,
+							speed: Math.max(.001, prop("speed")),
+							multiplier: computed("multiplier"),
+							autoFill: prop("autoFill")
+						});
+						context.set("duration", duration);
+						refs.set("initialDurationSet", true);
+					}
+				}
+			};
+			let rafId = null;
+			const observer = new win.ResizeObserver(() => {
+				if (rafId !== null) return;
+				rafId = win.requestAnimationFrame(() => {
+					const { rootSize, contentSize } = measureDimensions();
+					refs.set("dimensions", {
+						rootSize,
+						contentSize
+					});
+					rafId = null;
+				});
+			});
+			observer.observe(rootEl);
+			observer.observe(contentEl);
+			exec();
+			return () => {
+				observer.disconnect();
+				if (rafId !== null) win.cancelAnimationFrame(rafId);
+			};
+		} }
+	}
+});
+function calculateDuration(options) {
+	const { rootSize, contentSize, speed, multiplier, autoFill } = options;
+	if (autoFill) return contentSize * multiplier / speed;
+	return contentSize < rootSize ? rootSize / speed : contentSize / speed;
+}
+
+//#endregion
+//#region src/machines/marquee/marquee.props.ts
+const props = require_create_props.createProps()([
+	"autoFill",
+	"defaultPaused",
+	"delay",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"loopCount",
+	"onComplete",
+	"onLoopComplete",
+	"onPauseChange",
+	"paused",
+	"pauseOnInteraction",
+	"reverse",
+	"side",
+	"spacing",
+	"speed",
+	"translations"
+]);
+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/marquee/index.d.cts

@@ -0,0 +1,102 @@
+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, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+
+//#region src/machines/marquee/marquee.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "item" | "content" | "viewport" | "edge">;
+//#endregion
+//#region src/machines/marquee/marquee.types.d.ts
+interface PauseStatusDetails {
+  paused: boolean;
+}
+type Side = "start" | "end" | "top" | "bottom";
+type ElementIds = Partial<{
+  root: string;
+  viewport: string;
+  content: (index: number) => string;
+}>;
+interface IntlTranslations {
+  root: string;
+}
+interface DimensionSnapshot {
+  rootSize: number;
+  contentSize: number;
+}
+interface MarqueeProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  translations?: IntlTranslations | undefined;
+  side?: Side | undefined;
+  speed?: number | undefined;
+  delay?: number | undefined;
+  loopCount?: number | undefined;
+  spacing?: string | undefined;
+  autoFill?: boolean | undefined;
+  pauseOnInteraction?: boolean | undefined;
+  reverse?: boolean | undefined;
+  paused?: boolean | undefined;
+  defaultPaused?: boolean | undefined;
+  onPauseChange?: ((details: PauseStatusDetails) => void) | undefined;
+  onLoopComplete?: (() => void) | undefined;
+  onComplete?: (() => void) | undefined;
+}
+type PropsWithDefault = "dir" | "side" | "speed" | "delay" | "loopCount" | "spacing" | "autoFill" | "pauseOnInteraction" | "reverse" | "defaultPaused" | "translations";
+type UserDefinedContext = RequiredBy<MarqueeProps, PropsWithDefault>;
+interface PrivateContext {
+  paused: boolean;
+  duration: number;
+}
+interface ComputedContext {
+  orientation: "horizontal" | "vertical";
+  isVertical: boolean;
+  multiplier: number;
+}
+type MarqueeService = Service<MarqueeSchema>;
+type MarqueeMachine = Machine<MarqueeSchema>;
+interface MarqueeSchema {
+  props: UserDefinedContext;
+  context: PrivateContext;
+  computed: ComputedContext;
+  refs: {
+    dimensions: DimensionSnapshot | undefined;
+    initialDurationSet: boolean;
+  };
+  state: "idle";
+  effect: string;
+  action: string;
+  guard: string;
+  event: EventObject;
+}
+interface ContentProps {
+  index: number;
+}
+interface EdgeProps {
+  side: Side;
+}
+interface MarqueeApi<T extends PropTypes = PropTypes> {
+  paused: boolean;
+  orientation: "horizontal" | "vertical";
+  side: Side;
+  multiplier: number;
+  contentCount: number;
+  pause: VoidFunction;
+  resume: VoidFunction;
+  togglePause: VoidFunction;
+  restart: VoidFunction;
+  getRootProps: () => T["element"];
+  getViewportProps: () => T["element"];
+  getContentProps: (props: ContentProps) => T["element"];
+  getEdgeProps: (props: EdgeProps) => T["element"];
+  getItemProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/marquee/marquee.connect.d.ts
+declare function connect<T extends PropTypes>(service: MarqueeService, normalize: NormalizeProps<T>): MarqueeApi<T>;
+//#endregion
+//#region src/machines/marquee/marquee.machine.d.ts
+declare const machine: Machine<MarqueeSchema>;
+//#endregion
+//#region src/machines/marquee/marquee.props.d.ts
+declare const props: ("ids" | "id" | "getRootNode" | ("translations" | "dir" | "reverse" | "side" | "speed" | "delay" | "loopCount" | "spacing" | "autoFill" | "pauseOnInteraction" | "defaultPaused") | "paused" | "onPauseChange" | "onLoopComplete" | "onComplete")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "id" | "getRootNode" | ("translations" | "dir" | "reverse" | "side" | "speed" | "delay" | "loopCount" | "spacing" | "autoFill" | "pauseOnInteraction" | "defaultPaused") | "paused" | "onPauseChange" | "onLoopComplete" | "onComplete">];
+//#endregion
+export { type MarqueeApi as Api, type ContentProps, type DimensionSnapshot, type EdgeProps, type ElementIds, type IntlTranslations, type MarqueeMachine as Machine, type Orientation, type PauseStatusDetails, type MarqueeProps as Props, type MarqueeService as Service, type Side, type UserDefinedContext, anatomy, connect, machine, props, splitProps };

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

@@ -0,0 +1,102 @@
+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, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-C0MKXQmE.mjs";
+
+//#region src/machines/marquee/marquee.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "item" | "content" | "viewport" | "edge">;
+//#endregion
+//#region src/machines/marquee/marquee.types.d.ts
+interface PauseStatusDetails {
+  paused: boolean;
+}
+type Side = "start" | "end" | "top" | "bottom";
+type ElementIds = Partial<{
+  root: string;
+  viewport: string;
+  content: (index: number) => string;
+}>;
+interface IntlTranslations {
+  root: string;
+}
+interface DimensionSnapshot {
+  rootSize: number;
+  contentSize: number;
+}
+interface MarqueeProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  translations?: IntlTranslations | undefined;
+  side?: Side | undefined;
+  speed?: number | undefined;
+  delay?: number | undefined;
+  loopCount?: number | undefined;
+  spacing?: string | undefined;
+  autoFill?: boolean | undefined;
+  pauseOnInteraction?: boolean | undefined;
+  reverse?: boolean | undefined;
+  paused?: boolean | undefined;
+  defaultPaused?: boolean | undefined;
+  onPauseChange?: ((details: PauseStatusDetails) => void) | undefined;
+  onLoopComplete?: (() => void) | undefined;
+  onComplete?: (() => void) | undefined;
+}
+type PropsWithDefault = "dir" | "side" | "speed" | "delay" | "loopCount" | "spacing" | "autoFill" | "pauseOnInteraction" | "reverse" | "defaultPaused" | "translations";
+type UserDefinedContext = RequiredBy<MarqueeProps, PropsWithDefault>;
+interface PrivateContext {
+  paused: boolean;
+  duration: number;
+}
+interface ComputedContext {
+  orientation: "horizontal" | "vertical";
+  isVertical: boolean;
+  multiplier: number;
+}
+type MarqueeService = Service<MarqueeSchema>;
+type MarqueeMachine = Machine<MarqueeSchema>;
+interface MarqueeSchema {
+  props: UserDefinedContext;
+  context: PrivateContext;
+  computed: ComputedContext;
+  refs: {
+    dimensions: DimensionSnapshot | undefined;
+    initialDurationSet: boolean;
+  };
+  state: "idle";
+  effect: string;
+  action: string;
+  guard: string;
+  event: EventObject;
+}
+interface ContentProps {
+  index: number;
+}
+interface EdgeProps {
+  side: Side;
+}
+interface MarqueeApi<T extends PropTypes = PropTypes> {
+  paused: boolean;
+  orientation: "horizontal" | "vertical";
+  side: Side;
+  multiplier: number;
+  contentCount: number;
+  pause: VoidFunction;
+  resume: VoidFunction;
+  togglePause: VoidFunction;
+  restart: VoidFunction;
+  getRootProps: () => T["element"];
+  getViewportProps: () => T["element"];
+  getContentProps: (props: ContentProps) => T["element"];
+  getEdgeProps: (props: EdgeProps) => T["element"];
+  getItemProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/marquee/marquee.connect.d.ts
+declare function connect<T extends PropTypes>(service: MarqueeService, normalize: NormalizeProps<T>): MarqueeApi<T>;
+//#endregion
+//#region src/machines/marquee/marquee.machine.d.ts
+declare const machine: Machine<MarqueeSchema>;
+//#endregion
+//#region src/machines/marquee/marquee.props.d.ts
+declare const props: ("ids" | "id" | "getRootNode" | ("translations" | "dir" | "reverse" | "side" | "speed" | "delay" | "loopCount" | "spacing" | "autoFill" | "pauseOnInteraction" | "defaultPaused") | "paused" | "onPauseChange" | "onLoopComplete" | "onComplete")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "id" | "getRootNode" | ("translations" | "dir" | "reverse" | "side" | "speed" | "delay" | "loopCount" | "spacing" | "autoFill" | "pauseOnInteraction" | "defaultPaused") | "paused" | "onPauseChange" | "onLoopComplete" | "onComplete">];
+//#endregion
+export { type MarqueeApi as Api, type ContentProps, type DimensionSnapshot, type EdgeProps, type ElementIds, type IntlTranslations, type MarqueeMachine as Machine, type Orientation, type PauseStatusDetails, type MarqueeProps as Props, type MarqueeService as Service, type Side, type UserDefinedContext, anatomy, connect, machine, props, splitProps };