@sprawlify/primitives 0.0.1

package/dist/machines/clipboard/index.mjs

@@ -0,0 +1,219 @@
+import { t as createAnatomy } from "../../create-anatomy-BbDZbHpC.mjs";
+import { at as setElementValue, rn as getWindow, vn as dataAttr } from "../../dom-query-DFCRhyj1.mjs";
+import { s as setRafTimeout, u as createSplitProps } from "../../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/clipboard/clipboard.anatomy.ts
+const anatomy = createAnatomy("clipboard").parts("root", "control", "trigger", "indicator", "input", "label");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/clipboard/clipboard.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `clip:${ctx.id}`;
+const getInputId = (ctx) => ctx.ids?.input ?? `clip:${ctx.id}:input`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `clip:${ctx.id}:label`;
+const getInputEl = (ctx) => ctx.getById(getInputId(ctx));
+const writeToClipboard = (ctx, value) => copyText(ctx.getDoc(), value);
+function createNode(doc, text) {
+	const node = doc.createElement("pre");
+	Object.assign(node.style, {
+		width: "1px",
+		height: "1px",
+		position: "fixed",
+		top: "5px"
+	});
+	node.textContent = text;
+	return node;
+}
+function copyNode(node) {
+	const selection = getWindow(node).getSelection();
+	if (selection == null) return Promise.reject(/* @__PURE__ */ new Error());
+	selection.removeAllRanges();
+	const doc = node.ownerDocument;
+	const range = doc.createRange();
+	range.selectNodeContents(node);
+	selection.addRange(range);
+	doc.execCommand("copy");
+	selection.removeAllRanges();
+	return Promise.resolve();
+}
+function copyText(doc, text) {
+	const win = doc.defaultView || window;
+	if (win.navigator.clipboard?.writeText !== void 0) return win.navigator.clipboard.writeText(text);
+	if (!doc.body) return Promise.reject(/* @__PURE__ */ new Error());
+	const node = createNode(doc, text);
+	doc.body.appendChild(node);
+	copyNode(node);
+	doc.body.removeChild(node);
+	return Promise.resolve();
+}
+
+//#endregion
+//#region src/machines/clipboard/clipboard.connect.ts
+function connect(service, normalize) {
+	const { state, send, context, scope } = service;
+	const copied = state.matches("copied");
+	return {
+		copied,
+		value: context.get("value"),
+		setValue(value) {
+			send({
+				type: "VALUE.SET",
+				value
+			});
+		},
+		copy() {
+			send({ type: "COPY" });
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				"data-copied": dataAttr(copied),
+				id: getRootId(scope)
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				htmlFor: getInputId(scope),
+				"data-copied": dataAttr(copied),
+				id: getLabelId(scope)
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				"data-copied": dataAttr(copied)
+			});
+		},
+		getInputProps() {
+			return normalize.input({
+				...parts.input.attrs,
+				defaultValue: context.get("value"),
+				"data-copied": dataAttr(copied),
+				readOnly: true,
+				"data-readonly": "true",
+				id: getInputId(scope),
+				onFocus(event) {
+					event.currentTarget.select();
+				},
+				onCopy() {
+					send({ type: "INPUT.COPY" });
+				}
+			});
+		},
+		getTriggerProps() {
+			return normalize.button({
+				...parts.trigger.attrs,
+				type: "button",
+				"aria-label": copied ? "Copied to clipboard" : "Copy to clipboard",
+				"data-copied": dataAttr(copied),
+				onClick() {
+					send({ type: "COPY" });
+				}
+			});
+		},
+		getIndicatorProps(props$1) {
+			return normalize.element({
+				...parts.indicator.attrs,
+				hidden: props$1.copied !== copied
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/clipboard/clipboard.machine.ts
+const machine = createMachine({
+	props({ props: props$1 }) {
+		return {
+			timeout: 3e3,
+			defaultValue: "",
+			...props$1
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return { value: bindable(() => ({
+			defaultValue: prop("defaultValue"),
+			value: prop("value"),
+			onChange(value) {
+				prop("onValueChange")?.({ value });
+			}
+		})) };
+	},
+	watch({ track, context, action }) {
+		track([() => context.get("value")], () => {
+			action(["syncInputElement"]);
+		});
+	},
+	on: {
+		"VALUE.SET": { actions: ["setValue"] },
+		COPY: {
+			target: "copied",
+			actions: ["copyToClipboard", "invokeOnCopy"]
+		}
+	},
+	states: {
+		idle: { on: { "INPUT.COPY": {
+			target: "copied",
+			actions: ["invokeOnCopy"]
+		} } },
+		copied: {
+			effects: ["waitForTimeout"],
+			on: {
+				"COPY.DONE": { target: "idle" },
+				COPY: {
+					target: "copied",
+					actions: ["copyToClipboard", "invokeOnCopy"]
+				},
+				"INPUT.COPY": { actions: ["invokeOnCopy"] }
+			}
+		}
+	},
+	implementations: {
+		effects: { waitForTimeout({ prop, send }) {
+			return setRafTimeout(() => {
+				send({ type: "COPY.DONE" });
+			}, prop("timeout"));
+		} },
+		actions: {
+			setValue({ context, event }) {
+				context.set("value", event.value);
+			},
+			copyToClipboard({ context, scope }) {
+				writeToClipboard(scope, context.get("value"));
+			},
+			invokeOnCopy({ prop }) {
+				prop("onStatusChange")?.({ copied: true });
+			},
+			syncInputElement({ context, scope }) {
+				const inputEl = getInputEl(scope);
+				if (!inputEl) return;
+				setElementValue(inputEl, context.get("value"));
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/machines/clipboard/clipboard.props.ts
+const props = createProps()([
+	"getRootNode",
+	"id",
+	"ids",
+	"value",
+	"defaultValue",
+	"timeout",
+	"onStatusChange",
+	"onValueChange"
+]);
+const contextProps = createSplitProps(props);
+const indicatorProps = createProps()(["copied"]);
+const splitIndicatorProps = createSplitProps(indicatorProps);
+
+//#endregion
+export { anatomy, connect, contextProps, indicatorProps, machine, props, splitIndicatorProps };

package/dist/machines/collapsible/index.cjs

@@ -0,0 +1,362 @@
+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/collapsible/collapsible.anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("collapsible").parts("root", "trigger", "content", "indicator");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/collapsible/collapsible.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `collapsible:${ctx.id}`;
+const getContentId = (ctx) => ctx.ids?.content ?? `collapsible:${ctx.id}:content`;
+const getTriggerId = (ctx) => ctx.ids?.trigger ?? `collapsible:${ctx.id}:trigger`;
+const getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+
+//#endregion
+//#region src/machines/collapsible/collapsible.connect.ts
+function connect(service, normalize) {
+	const { state, send, context, scope, prop } = service;
+	const visible = state.matches("open") || state.matches("closing");
+	const open = state.matches("open");
+	const closed = state.matches("closed");
+	const { width, height } = context.get("size");
+	const disabled = !!prop("disabled");
+	const collapsedHeight = prop("collapsedHeight");
+	const collapsedWidth = prop("collapsedWidth");
+	const hasCollapsedHeight = collapsedHeight != null;
+	const hasCollapsedWidth = collapsedWidth != null;
+	const hasCollapsedSize = hasCollapsedHeight || hasCollapsedWidth;
+	const skip = !context.get("initial") && open;
+	return {
+		disabled,
+		visible,
+		open,
+		measureSize() {
+			send({ type: "size.measure" });
+		},
+		setOpen(nextOpen) {
+			if (state.matches("open") === nextOpen) return;
+			send({ type: nextOpen ? "open" : "close" });
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				"data-state": open ? "open" : "closed",
+				dir: prop("dir"),
+				id: getRootId(scope)
+			});
+		},
+		getContentProps() {
+			return normalize.element({
+				...parts.content.attrs,
+				id: getContentId(scope),
+				"data-collapsible": "",
+				"data-state": skip ? void 0 : open ? "open" : "closed",
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-has-collapsed-size": require_dom_query.dataAttr(hasCollapsedSize),
+				hidden: !visible && !hasCollapsedSize,
+				dir: prop("dir"),
+				style: {
+					"--height": require_utils.toPx(height),
+					"--width": require_utils.toPx(width),
+					"--collapsed-height": require_utils.toPx(collapsedHeight),
+					"--collapsed-width": require_utils.toPx(collapsedWidth),
+					...closed && hasCollapsedHeight && {
+						overflow: "hidden",
+						minHeight: require_utils.toPx(collapsedHeight),
+						maxHeight: require_utils.toPx(collapsedHeight)
+					},
+					...closed && hasCollapsedWidth && {
+						overflow: "hidden",
+						minWidth: require_utils.toPx(collapsedWidth),
+						maxWidth: require_utils.toPx(collapsedWidth)
+					}
+				}
+			});
+		},
+		getTriggerProps() {
+			return normalize.element({
+				...parts.trigger.attrs,
+				id: getTriggerId(scope),
+				dir: prop("dir"),
+				type: "button",
+				"data-state": open ? "open" : "closed",
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"aria-controls": getContentId(scope),
+				"aria-expanded": visible || false,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					send({ type: open ? "close" : "open" });
+				}
+			});
+		},
+		getIndicatorProps() {
+			return normalize.element({
+				...parts.indicator.attrs,
+				dir: prop("dir"),
+				"data-state": open ? "open" : "closed",
+				"data-disabled": require_dom_query.dataAttr(disabled)
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/collapsible/collapsible.machine.ts
+const machine = require_core.createMachine({
+	initialState({ prop }) {
+		return prop("open") || prop("defaultOpen") ? "open" : "closed";
+	},
+	context({ bindable }) {
+		return {
+			size: bindable(() => ({
+				defaultValue: {
+					height: 0,
+					width: 0
+				},
+				sync: true
+			})),
+			initial: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	refs() {
+		return {
+			cleanup: void 0,
+			stylesRef: void 0
+		};
+	},
+	watch({ track, prop, action }) {
+		track([() => prop("open")], () => {
+			action([
+				"setInitial",
+				"computeSize",
+				"toggleVisibility"
+			]);
+		});
+	},
+	exit: ["cleanupNode"],
+	states: {
+		closed: {
+			effects: ["trackTabbableElements"],
+			on: {
+				"controlled.open": { target: "open" },
+				open: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: [
+						"setInitial",
+						"computeSize",
+						"invokeOnOpen"
+					]
+				}]
+			}
+		},
+		closing: {
+			effects: ["trackExitAnimation"],
+			on: {
+				"controlled.close": { target: "closed" },
+				"controlled.open": { target: "open" },
+				open: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["setInitial", "invokeOnOpen"]
+				}],
+				close: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnExitComplete"]
+				}, {
+					target: "closed",
+					actions: [
+						"setInitial",
+						"computeSize",
+						"invokeOnExitComplete"
+					]
+				}],
+				"animation.end": {
+					target: "closed",
+					actions: ["invokeOnExitComplete", "clearInitial"]
+				}
+			}
+		},
+		open: {
+			effects: ["trackEnterAnimation"],
+			on: {
+				"controlled.close": { target: "closing" },
+				close: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closing",
+					actions: [
+						"setInitial",
+						"computeSize",
+						"invokeOnClose"
+					]
+				}],
+				"size.measure": { actions: ["measureSize"] },
+				"animation.end": { actions: ["clearInitial"] }
+			}
+		}
+	},
+	implementations: {
+		guards: { isOpenControlled: ({ prop }) => prop("open") != void 0 },
+		effects: {
+			trackEnterAnimation: ({ send, scope }) => {
+				let cleanup;
+				const rafCleanup = require_dom_query.raf(() => {
+					const contentEl = getContentEl(scope);
+					if (!contentEl) return;
+					const animationName = require_dom_query.getComputedStyle(contentEl).animationName;
+					if (!animationName || animationName === "none") {
+						send({ type: "animation.end" });
+						return;
+					}
+					const onEnd = (event) => {
+						if (require_dom_query.getEventTarget(event) === contentEl) send({ type: "animation.end" });
+					};
+					contentEl.addEventListener("animationend", onEnd);
+					cleanup = () => {
+						contentEl.removeEventListener("animationend", onEnd);
+					};
+				});
+				return () => {
+					rafCleanup();
+					cleanup?.();
+				};
+			},
+			trackExitAnimation: ({ send, scope }) => {
+				let cleanup;
+				const rafCleanup = require_dom_query.raf(() => {
+					const contentEl = getContentEl(scope);
+					if (!contentEl) return;
+					const animationName = require_dom_query.getComputedStyle(contentEl).animationName;
+					if (!animationName || animationName === "none") {
+						send({ type: "animation.end" });
+						return;
+					}
+					const onEnd = (event) => {
+						if (require_dom_query.getEventTarget(event) === contentEl) send({ type: "animation.end" });
+					};
+					contentEl.addEventListener("animationend", onEnd);
+					const restoreStyles = require_dom_query.setStyle(contentEl, { animationFillMode: "forwards" });
+					cleanup = () => {
+						contentEl.removeEventListener("animationend", onEnd);
+						require_dom_query.nextTick(() => restoreStyles());
+					};
+				});
+				return () => {
+					rafCleanup();
+					cleanup?.();
+				};
+			},
+			trackTabbableElements: ({ scope, prop }) => {
+				if (!prop("collapsedHeight") && !prop("collapsedWidth")) return;
+				const contentEl = getContentEl(scope);
+				if (!contentEl) return;
+				const applyInertToTabbables = () => {
+					const restoreAttrs = require_dom_query.getTabbables(contentEl).map((tabbable) => require_dom_query.setAttribute(tabbable, "inert", ""));
+					return () => {
+						restoreAttrs.forEach((attr) => attr());
+					};
+				};
+				let restoreInert = applyInertToTabbables();
+				const observerCleanup = require_dom_query.observeChildren(contentEl, { callback() {
+					restoreInert();
+					restoreInert = applyInertToTabbables();
+				} });
+				return () => {
+					restoreInert();
+					observerCleanup();
+				};
+			}
+		},
+		actions: {
+			setInitial: ({ context, flush }) => {
+				flush(() => {
+					context.set("initial", true);
+				});
+			},
+			clearInitial: ({ context }) => {
+				context.set("initial", false);
+			},
+			cleanupNode: ({ refs }) => {
+				refs.set("stylesRef", null);
+			},
+			measureSize: ({ context, scope }) => {
+				const contentEl = getContentEl(scope);
+				if (!contentEl) return;
+				const { height, width } = contentEl.getBoundingClientRect();
+				context.set("size", {
+					height,
+					width
+				});
+			},
+			computeSize: ({ refs, scope, context }) => {
+				refs.get("cleanup")?.();
+				const rafCleanup = require_dom_query.raf(() => {
+					const contentEl = getContentEl(scope);
+					if (!contentEl) return;
+					const hidden = contentEl.hidden;
+					contentEl.style.animationName = "none";
+					contentEl.style.animationDuration = "0s";
+					contentEl.hidden = false;
+					const rect = contentEl.getBoundingClientRect();
+					context.set("size", {
+						height: rect.height,
+						width: rect.width
+					});
+					if (context.get("initial")) {
+						contentEl.style.animationName = "";
+						contentEl.style.animationDuration = "";
+					}
+					contentEl.hidden = hidden;
+				});
+				refs.set("cleanup", rafCleanup);
+			},
+			invokeOnOpen: ({ prop }) => {
+				prop("onOpenChange")?.({ open: true });
+			},
+			invokeOnClose: ({ prop }) => {
+				prop("onOpenChange")?.({ open: false });
+			},
+			invokeOnExitComplete: ({ prop }) => {
+				prop("onExitComplete")?.();
+			},
+			toggleVisibility: ({ prop, send }) => {
+				send({ type: prop("open") ? "controlled.open" : "controlled.close" });
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/machines/collapsible/collapsible.props.ts
+const props = require_create_props.createProps()([
+	"dir",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"collapsedHeight",
+	"collapsedWidth",
+	"onExitComplete",
+	"onOpenChange",
+	"defaultOpen",
+	"open"
+]);
+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/collapsible/index.d.cts

@@ -0,0 +1,82 @@
+import { n as AnatomyInstance } from "../../create-anatomy-BGQ8pv8J.cjs";
+import { p as Machine, y as Service } from "../../types-DejIu60O.cjs";
+import { b as NormalizeProps, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+
+//#region src/machines/collapsible/collapsible.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "content" | "indicator">;
+//#endregion
+//#region src/machines/collapsible/collapsible.types.d.ts
+interface OpenChangeDetails {
+  open: boolean;
+}
+type ElementIds = Partial<{
+  root: string;
+  content: string;
+  trigger: string;
+}>;
+interface CollapsibleProps extends CommonProperties, DirectionProperty {
+  ids?: ElementIds | undefined;
+  open?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+  onExitComplete?: VoidFunction | undefined;
+  disabled?: boolean | undefined;
+  collapsedHeight?: number | string | undefined;
+  collapsedWidth?: number | string | undefined;
+}
+interface CollapsibleSchema {
+  state: "open" | "closed" | "closing";
+  props: CollapsibleProps;
+  context: {
+    size: {
+      width: number;
+      height: number;
+    };
+    initial: boolean;
+  };
+  refs: {
+    stylesRef: any;
+    cleanup: VoidFunction | undefined;
+  };
+  guard: "isOpenControlled";
+  event: {
+    type: "controlled.open";
+  } | {
+    type: "controlled.close";
+  } | {
+    type: "open";
+  } | {
+    type: "close";
+  } | {
+    type: "size.measure";
+  } | {
+    type: "animation.end";
+  };
+  action: "setInitial" | "clearInitial" | "cleanupNode" | "measureSize" | "computeSize" | "invokeOnOpen" | "invokeOnClose" | "invokeOnExitComplete" | "toggleVisibility";
+  effect: "trackEnterAnimation" | "trackExitAnimation" | "trackTabbableElements";
+}
+type CollapsibleService = Service<CollapsibleSchema>;
+type CollapsibleMachine = Machine<CollapsibleSchema>;
+interface CollapsibleApi<T extends PropTypes = PropTypes> {
+  open: boolean;
+  visible: boolean;
+  disabled: boolean;
+  setOpen: (open: boolean) => void;
+  measureSize: VoidFunction;
+  getRootProps: () => T["element"];
+  getTriggerProps: () => T["button"];
+  getContentProps: () => T["element"];
+  getIndicatorProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/collapsible/collapsible.connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<CollapsibleSchema>, normalize: NormalizeProps<T>): CollapsibleApi<T>;
+//#endregion
+//#region src/machines/collapsible/collapsible.machine.d.ts
+declare const machine: Machine<CollapsibleSchema>;
+//#endregion
+//#region src/machines/collapsible/collapsible.props.d.ts
+declare const props: (keyof CollapsibleProps)[];
+declare const splitProps: <Props extends Partial<CollapsibleProps>>(props: Props) => [Partial<CollapsibleProps>, Omit<Props, keyof CollapsibleProps>];
+//#endregion
+export { type CollapsibleApi as Api, type ElementIds, type CollapsibleMachine as Machine, type OpenChangeDetails, type CollapsibleProps as Props, type CollapsibleService as Service, anatomy, connect, machine, props, splitProps };