@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/checkbox/index.js

@@ -0,0 +1,311 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { s as getEventTarget } from "../../event-bTItRgiw.js";
+import { a as setElementChecked, s as trackFormControl, t as dispatchInputCheckedEvent } from "../../form-B1DW_w_3.js";
+import { t as trackPress } from "../../press-B7XLrLGR.js";
+import { n as visuallyHiddenStyle } from "../../visually-hidden-yDJ517KZ.js";
+import { n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { n as createGuards, r as createMachine } from "../../core-CJ0MZr3D.js";
+import { o as trackFocusVisible, r as isFocusVisible } from "../../focus-visible-DWdQf__4.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/checkbox/anatomy.ts
+const anatomy = createAnatomy("checkbox").parts("root", "label", "control", "indicator");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/checkbox/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `checkbox:${ctx.id}`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `checkbox:${ctx.id}:label`;
+const getControlId = (ctx) => ctx.ids?.control ?? `checkbox:${ctx.id}:control`;
+const getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `checkbox:${ctx.id}:input`;
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+//#endregion
+//#region src/machines/checkbox/connect.ts
+function connect(service, normalize) {
+	const { send, context, prop, computed, scope } = service;
+	const disabled = !!prop("disabled");
+	const readOnly = !!prop("readOnly");
+	const required = !!prop("required");
+	const invalid = !!prop("invalid");
+	const focused = !disabled && context.get("focused");
+	const focusVisible = !disabled && context.get("focusVisible");
+	const checked = computed("checked");
+	const indeterminate = computed("indeterminate");
+	const checkedState = context.get("checked");
+	const dataAttrs = {
+		"data-active": dataAttr(context.get("active")),
+		"data-focus": dataAttr(focused),
+		"data-focus-visible": dataAttr(focusVisible),
+		"data-readonly": dataAttr(readOnly),
+		"data-hover": dataAttr(context.get("hovered")),
+		"data-disabled": dataAttr(disabled),
+		"data-state": indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
+		"data-invalid": dataAttr(invalid),
+		"data-required": dataAttr(required)
+	};
+	return {
+		checked,
+		disabled,
+		indeterminate,
+		focused,
+		checkedState,
+		setChecked(checked) {
+			send({
+				type: "CHECKED.SET",
+				checked,
+				isTrusted: false
+			});
+		},
+		toggleChecked() {
+			send({
+				type: "CHECKED.TOGGLE",
+				checked,
+				isTrusted: false
+			});
+		},
+		getRootProps() {
+			return normalize.label({
+				...parts.root.attrs,
+				...dataAttrs,
+				dir: prop("dir"),
+				id: getRootId(scope),
+				htmlFor: getHiddenInputId(scope),
+				onPointerMove() {
+					if (disabled) return;
+					send({
+						type: "CONTEXT.SET",
+						context: { hovered: true }
+					});
+				},
+				onPointerLeave() {
+					if (disabled) return;
+					send({
+						type: "CONTEXT.SET",
+						context: { hovered: false }
+					});
+				},
+				onClick(event) {
+					if (getEventTarget(event) === getHiddenInputEl(scope)) event.stopPropagation();
+				}
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				...parts.label.attrs,
+				...dataAttrs,
+				dir: prop("dir"),
+				id: getLabelId(scope)
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				...dataAttrs,
+				dir: prop("dir"),
+				id: getControlId(scope),
+				"aria-hidden": true
+			});
+		},
+		getIndicatorProps() {
+			return normalize.element({
+				...parts.indicator.attrs,
+				...dataAttrs,
+				dir: prop("dir"),
+				hidden: !indeterminate && !checked
+			});
+		},
+		getHiddenInputProps() {
+			return normalize.input({
+				id: getHiddenInputId(scope),
+				type: "checkbox",
+				required: prop("required"),
+				defaultChecked: checked,
+				disabled,
+				"aria-labelledby": getLabelId(scope),
+				"aria-invalid": invalid,
+				name: prop("name"),
+				form: prop("form"),
+				value: prop("value"),
+				style: visuallyHiddenStyle,
+				onFocus() {
+					const focusVisible = isFocusVisible();
+					send({
+						type: "CONTEXT.SET",
+						context: {
+							focused: true,
+							focusVisible
+						}
+					});
+				},
+				onBlur() {
+					send({
+						type: "CONTEXT.SET",
+						context: {
+							focused: false,
+							focusVisible: false
+						}
+					});
+				},
+				onClick(event) {
+					if (readOnly) {
+						event.preventDefault();
+						return;
+					}
+					const checked = event.currentTarget.checked;
+					send({
+						type: "CHECKED.SET",
+						checked,
+						isTrusted: true
+					});
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/checkbox/machine.ts
+const { not } = createGuards();
+const machine = createMachine({
+	props({ props }) {
+		return {
+			value: "on",
+			...props,
+			defaultChecked: props.defaultChecked ?? false
+		};
+	},
+	initialState() {
+		return "ready";
+	},
+	context({ prop, bindable }) {
+		return {
+			checked: bindable(() => ({
+				defaultValue: prop("defaultChecked"),
+				value: prop("checked"),
+				onChange(checked) {
+					prop("onCheckedChange")?.({ checked });
+				}
+			})),
+			fieldsetDisabled: bindable(() => ({ defaultValue: false })),
+			focusVisible: bindable(() => ({ defaultValue: false })),
+			active: bindable(() => ({ defaultValue: false })),
+			focused: bindable(() => ({ defaultValue: false })),
+			hovered: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	watch({ track, context, prop, action }) {
+		track([() => prop("disabled")], () => {
+			action(["removeFocusIfNeeded"]);
+		});
+		track([() => context.get("checked")], () => {
+			action(["syncInputElement"]);
+		});
+	},
+	effects: [
+		"trackFormControlState",
+		"trackPressEvent",
+		"trackFocusVisible"
+	],
+	on: {
+		"CHECKED.TOGGLE": [{
+			guard: not("isTrusted"),
+			actions: ["toggleChecked", "dispatchChangeEvent"]
+		}, { actions: ["toggleChecked"] }],
+		"CHECKED.SET": [{
+			guard: not("isTrusted"),
+			actions: ["setChecked", "dispatchChangeEvent"]
+		}, { actions: ["setChecked"] }],
+		"CONTEXT.SET": { actions: ["setContext"] }
+	},
+	computed: {
+		indeterminate: ({ context }) => isIndeterminate(context.get("checked")),
+		checked: ({ context }) => isChecked(context.get("checked")),
+		disabled: ({ context, prop }) => !!prop("disabled") || context.get("fieldsetDisabled")
+	},
+	states: { ready: {} },
+	implementations: {
+		guards: { isTrusted: ({ event }) => !!event.isTrusted },
+		effects: {
+			trackPressEvent({ context, computed, scope }) {
+				if (computed("disabled")) return;
+				return trackPress({
+					pointerNode: getRootEl(scope),
+					keyboardNode: getHiddenInputEl(scope),
+					isValidKey: (event) => event.key === " ",
+					onPress: () => context.set("active", false),
+					onPressStart: () => context.set("active", true),
+					onPressEnd: () => context.set("active", false)
+				});
+			},
+			trackFocusVisible({ computed, scope }) {
+				if (computed("disabled")) return;
+				return trackFocusVisible({ root: scope.getRootNode?.() });
+			},
+			trackFormControlState({ context, scope }) {
+				return trackFormControl(getHiddenInputEl(scope), {
+					onFieldsetDisabledChange(disabled) {
+						context.set("fieldsetDisabled", disabled);
+					},
+					onFormReset() {
+						context.set("checked", context.initial("checked"));
+					}
+				});
+			}
+		},
+		actions: {
+			setContext({ context, event }) {
+				for (const key in event.context) context.set(key, event.context[key]);
+			},
+			syncInputElement({ context, computed, scope }) {
+				const inputEl = getHiddenInputEl(scope);
+				if (!inputEl) return;
+				setElementChecked(inputEl, computed("checked"));
+				inputEl.indeterminate = isIndeterminate(context.get("checked"));
+			},
+			removeFocusIfNeeded({ context, prop }) {
+				if (prop("disabled") && context.get("focused")) {
+					context.set("focused", false);
+					context.set("focusVisible", false);
+				}
+			},
+			setChecked({ context, event }) {
+				context.set("checked", event.checked);
+			},
+			toggleChecked({ context, computed }) {
+				const checked = isIndeterminate(computed("checked")) ? true : !computed("checked");
+				context.set("checked", checked);
+			},
+			dispatchChangeEvent({ computed, scope }) {
+				queueMicrotask(() => {
+					dispatchInputCheckedEvent(getHiddenInputEl(scope), { checked: computed("checked") });
+				});
+			}
+		}
+	}
+});
+function isIndeterminate(checked) {
+	return checked === "indeterminate";
+}
+function isChecked(checked) {
+	return isIndeterminate(checked) ? false : !!checked;
+}
+//#endregion
+//#region src/machines/checkbox/props.ts
+const props = createProps()([
+	"defaultChecked",
+	"checked",
+	"dir",
+	"disabled",
+	"form",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"name",
+	"onCheckedChange",
+	"readOnly",
+	"required",
+	"value"
+]);
+const splitProps = createSplitProps(props);
+//#endregion
+export { anatomy, connect, machine, props, splitProps };

package/dist/machines/clipboard/index.cjs

@@ -0,0 +1,228 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_create_anatomy = require("../../create-anatomy-BwDn25ph.cjs");
+const require_dom_query = require("../../dom-query-CQzY93XU.cjs");
+const require_form = require("../../form-CoupKpuP.cjs");
+const require_utils = require("../../utils-BH-oBBz2.cjs");
+const require_timers = require("../../timers-Beu4SfAj.cjs");
+const require_core = require("../../core-BNMw-JId.cjs");
+const require_create_props = require("../../create-props-CjLx2oS8.cjs");
+//#region src/machines/clipboard/anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("clipboard").parts("root", "control", "trigger", "indicator", "input", "label");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/clipboard/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `clipboard:${ctx.id}`;
+const getInputId = (ctx) => ctx.ids?.input ?? `clipboard:${ctx.id}:input`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `clipboard:${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 = require_dom_query.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/connect.ts
+function connect(service, normalize) {
+	const { state, send, context, scope, prop } = service;
+	const copied = state.matches("copied");
+	const translations = prop("translations");
+	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": require_dom_query.dataAttr(copied),
+				id: getRootId(scope)
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				htmlFor: getInputId(scope),
+				"data-copied": require_dom_query.dataAttr(copied),
+				id: getLabelId(scope)
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				"data-copied": require_dom_query.dataAttr(copied)
+			});
+		},
+		getInputProps() {
+			return normalize.input({
+				...parts.input.attrs,
+				defaultValue: context.get("value"),
+				"data-copied": require_dom_query.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": translations.triggerLabel?.(copied),
+				"data-copied": require_dom_query.dataAttr(copied),
+				onClick() {
+					send({ type: "COPY" });
+				}
+			});
+		},
+		getIndicatorProps(props) {
+			return normalize.element({
+				...parts.indicator.attrs,
+				hidden: props.copied !== copied
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/clipboard/machine.ts
+const machine = require_core.createMachine({
+	props({ props }) {
+		return {
+			timeout: 3e3,
+			defaultValue: "",
+			...props,
+			translations: {
+				triggerLabel: (copied) => copied ? "Copied to clipboard" : "Copy to clipboard",
+				...props.translations
+			}
+		};
+	},
+	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 require_timers.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;
+				require_form.setElementValue(inputEl, context.get("value"));
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/clipboard/props.ts
+const props = require_create_props.createProps()([
+	"getRootNode",
+	"id",
+	"ids",
+	"value",
+	"defaultValue",
+	"timeout",
+	"onStatusChange",
+	"onValueChange",
+	"translations"
+]);
+const contextProps = require_utils.createSplitProps(props);
+const indicatorProps = require_create_props.createProps()(["copied"]);
+const splitIndicatorProps = require_utils.createSplitProps(indicatorProps);
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.contextProps = contextProps;
+exports.indicatorProps = indicatorProps;
+exports.machine = machine;
+exports.props = props;
+exports.splitIndicatorProps = splitIndicatorProps;

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

@@ -0,0 +1,72 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.cjs";
+import { M as Service, T as Machine } from "../../index-BKgxIVbE.cjs";
+import { b as PropTypes, g as RequiredBy, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.cjs";
+import "../../index-BF6G2RiC.cjs";
+//#region src/machines/clipboard/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "indicator" | "input" | "label" | "control">;
+//#endregion
+//#region src/machines/clipboard/types.d.ts
+interface CopyStatusDetails {
+  copied: boolean;
+}
+interface ValueChangeDetails {
+  value: string;
+}
+interface IntlTranslations {
+  triggerLabel?: ((copied: boolean) => string) | undefined;
+}
+type ElementIds = Partial<{
+  root: string;
+  input: string;
+  label: string;
+}>;
+interface ClipboardProps extends CommonProperties {
+  translations?: IntlTranslations | undefined;
+  ids?: ElementIds | undefined;
+  value?: string | undefined;
+  defaultValue?: string | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  onStatusChange?: ((details: CopyStatusDetails) => void) | undefined;
+  timeout?: number | undefined;
+}
+interface ClipboardSchema {
+  state: "idle" | "copied";
+  props: RequiredBy<ClipboardProps, "timeout" | "translations">;
+  context: {
+    value: string;
+  };
+  effect: string;
+  action: string;
+  guard: string;
+}
+type ClipboardService = Service<ClipboardSchema>;
+type ClipboardMachine = Machine<ClipboardSchema>;
+interface IndicatorProps {
+  copied: boolean;
+}
+interface ClipboardApi<T extends PropTypes = PropTypes> {
+  copied: boolean;
+  value: string;
+  setValue: (value: string) => void;
+  copy: VoidFunction;
+  getRootProps: () => T["element"];
+  getLabelProps: () => T["label"];
+  getControlProps: () => T["element"];
+  getTriggerProps: () => T["button"];
+  getInputProps: () => T["input"];
+  getIndicatorProps: (props: IndicatorProps) => T["element"];
+}
+//#endregion
+//#region src/machines/clipboard/connect.d.ts
+declare function connect<T extends PropTypes>(service: ClipboardService, normalize: NormalizeProps<T>): ClipboardApi<T>;
+//#endregion
+//#region src/machines/clipboard/machine.d.ts
+declare const machine: Machine<ClipboardSchema>;
+//#endregion
+//#region src/machines/clipboard/props.d.ts
+declare const props: (keyof ClipboardProps)[];
+declare const contextProps: <Props extends ClipboardProps>(props: Props) => [ClipboardProps, Omit<Props, keyof ClipboardProps>];
+declare const indicatorProps: "copied"[];
+declare const splitIndicatorProps: <Props extends IndicatorProps>(props: Props) => [IndicatorProps, Omit<Props, "copied">];
+//#endregion
+export { type ClipboardApi as Api, type CopyStatusDetails, type ElementIds, type IndicatorProps, type IntlTranslations, type ClipboardMachine as Machine, type ClipboardProps as Props, type ClipboardService as Service, type ValueChangeDetails, anatomy, connect, contextProps, indicatorProps, machine, props, splitIndicatorProps };

package/dist/machines/clipboard/index.d.ts

@@ -0,0 +1,72 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.js";
+import { M as Service, T as Machine } from "../../index-CFoN0L3C.js";
+import { b as PropTypes, g as RequiredBy, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.js";
+import "../../index-BdeZuSX6.js";
+//#region src/machines/clipboard/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "indicator" | "input" | "label" | "control">;
+//#endregion
+//#region src/machines/clipboard/types.d.ts
+interface CopyStatusDetails {
+  copied: boolean;
+}
+interface ValueChangeDetails {
+  value: string;
+}
+interface IntlTranslations {
+  triggerLabel?: ((copied: boolean) => string) | undefined;
+}
+type ElementIds = Partial<{
+  root: string;
+  input: string;
+  label: string;
+}>;
+interface ClipboardProps extends CommonProperties {
+  translations?: IntlTranslations | undefined;
+  ids?: ElementIds | undefined;
+  value?: string | undefined;
+  defaultValue?: string | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  onStatusChange?: ((details: CopyStatusDetails) => void) | undefined;
+  timeout?: number | undefined;
+}
+interface ClipboardSchema {
+  state: "idle" | "copied";
+  props: RequiredBy<ClipboardProps, "timeout" | "translations">;
+  context: {
+    value: string;
+  };
+  effect: string;
+  action: string;
+  guard: string;
+}
+type ClipboardService = Service<ClipboardSchema>;
+type ClipboardMachine = Machine<ClipboardSchema>;
+interface IndicatorProps {
+  copied: boolean;
+}
+interface ClipboardApi<T extends PropTypes = PropTypes> {
+  copied: boolean;
+  value: string;
+  setValue: (value: string) => void;
+  copy: VoidFunction;
+  getRootProps: () => T["element"];
+  getLabelProps: () => T["label"];
+  getControlProps: () => T["element"];
+  getTriggerProps: () => T["button"];
+  getInputProps: () => T["input"];
+  getIndicatorProps: (props: IndicatorProps) => T["element"];
+}
+//#endregion
+//#region src/machines/clipboard/connect.d.ts
+declare function connect<T extends PropTypes>(service: ClipboardService, normalize: NormalizeProps<T>): ClipboardApi<T>;
+//#endregion
+//#region src/machines/clipboard/machine.d.ts
+declare const machine: Machine<ClipboardSchema>;
+//#endregion
+//#region src/machines/clipboard/props.d.ts
+declare const props: (keyof ClipboardProps)[];
+declare const contextProps: <Props extends ClipboardProps>(props: Props) => [ClipboardProps, Omit<Props, keyof ClipboardProps>];
+declare const indicatorProps: "copied"[];
+declare const splitIndicatorProps: <Props extends IndicatorProps>(props: Props) => [IndicatorProps, Omit<Props, "copied">];
+//#endregion
+export { type ClipboardApi as Api, type CopyStatusDetails, type ElementIds, type IndicatorProps, type IntlTranslations, type ClipboardMachine as Machine, type ClipboardProps as Props, type ClipboardService as Service, type ValueChangeDetails, anatomy, connect, contextProps, indicatorProps, machine, props, splitIndicatorProps };