@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/checkbox/index.cjs

@@ -0,0 +1,316 @@
+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_event = require("../../event-DDz-mMhM.cjs");
+const require_form = require("../../form-CoupKpuP.cjs");
+const require_press = require("../../press-BdD5suLQ.cjs");
+const require_visually_hidden = require("../../visually-hidden-BgSCFLz_.cjs");
+const require_utils = require("../../utils-BH-oBBz2.cjs");
+const require_core = require("../../core-BNMw-JId.cjs");
+const require_focus_visible = require("../../focus-visible-G4cmlWqq.cjs");
+const require_create_props = require("../../create-props-CjLx2oS8.cjs");
+//#region src/machines/checkbox/anatomy.ts
+const anatomy = require_create_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": require_dom_query.dataAttr(context.get("active")),
+		"data-focus": require_dom_query.dataAttr(focused),
+		"data-focus-visible": require_dom_query.dataAttr(focusVisible),
+		"data-readonly": require_dom_query.dataAttr(readOnly),
+		"data-hover": require_dom_query.dataAttr(context.get("hovered")),
+		"data-disabled": require_dom_query.dataAttr(disabled),
+		"data-state": indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
+		"data-invalid": require_dom_query.dataAttr(invalid),
+		"data-required": require_dom_query.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 (require_event.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: require_visually_hidden.visuallyHiddenStyle,
+				onFocus() {
+					const focusVisible = require_focus_visible.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 } = require_core.createGuards();
+const machine = require_core.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 require_press.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 require_focus_visible.trackFocusVisible({ root: scope.getRootNode?.() });
+			},
+			trackFormControlState({ context, scope }) {
+				return require_form.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;
+				require_form.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(() => {
+					require_form.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 = require_create_props.createProps()([
+	"defaultChecked",
+	"checked",
+	"dir",
+	"disabled",
+	"form",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"name",
+	"onCheckedChange",
+	"readOnly",
+	"required",
+	"value"
+]);
+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/checkbox/index.d.cts

@@ -0,0 +1,81 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.cjs";
+import { M as Service, S as EventObject, T as Machine } from "../../index-BKgxIVbE.cjs";
+import { b as PropTypes, g as RequiredBy, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.cjs";
+import "../../index-BF6G2RiC.cjs";
+//#region src/machines/checkbox/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "indicator" | "label" | "control">;
+//#endregion
+//#region src/machines/checkbox/types.d.ts
+type CheckedState = boolean | "indeterminate";
+interface CheckedChangeDetails {
+  checked: CheckedState;
+}
+type ElementIds = Partial<{
+  root: string;
+  hiddenInput: string;
+  control: string;
+  label: string;
+}>;
+interface CheckboxProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  disabled?: boolean | undefined;
+  invalid?: boolean | undefined;
+  required?: boolean | undefined;
+  checked?: CheckedState | undefined;
+  defaultChecked?: CheckedState | undefined;
+  readOnly?: boolean | undefined;
+  onCheckedChange?: ((details: CheckedChangeDetails) => void) | undefined;
+  name?: string | undefined;
+  form?: string | undefined;
+  value?: string | undefined;
+}
+type PropsWithDefault = "value";
+interface CheckboxSchema {
+  state: "ready";
+  props: RequiredBy<CheckboxProps, PropsWithDefault>;
+  context: {
+    checked: CheckedState;
+    active: boolean;
+    focused: boolean;
+    focusVisible: boolean;
+    hovered: boolean;
+    fieldsetDisabled: boolean;
+  };
+  computed: {
+    indeterminate: boolean;
+    checked: boolean;
+    disabled: boolean;
+  };
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type CheckboxService = Service<CheckboxSchema>;
+type CheckboxMachine = Machine<CheckboxSchema>;
+interface CheckboxApi<T extends PropTypes = PropTypes> {
+  checked: boolean;
+  disabled: boolean | undefined;
+  indeterminate: boolean;
+  focused: boolean | undefined;
+  checkedState: CheckedState;
+  setChecked: (checked: CheckedState) => void;
+  toggleChecked: VoidFunction;
+  getRootProps: () => T["label"];
+  getLabelProps: () => T["element"];
+  getControlProps: () => T["element"];
+  getHiddenInputProps: () => T["input"];
+  getIndicatorProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/checkbox/connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<CheckboxSchema>, normalize: NormalizeProps<T>): CheckboxApi<T>;
+//#endregion
+//#region src/machines/checkbox/machine.d.ts
+declare const machine: Machine<CheckboxSchema>;
+//#endregion
+//#region src/machines/checkbox/props.d.ts
+declare const props: (keyof CheckboxProps)[];
+declare const splitProps: <Props extends Partial<CheckboxProps>>(props: Props) => [Partial<CheckboxProps>, Omit<Props, keyof CheckboxProps>];
+//#endregion
+export { type CheckboxApi as Api, type CheckedChangeDetails, type CheckedState, type ElementIds, type CheckboxMachine as Machine, type CheckboxProps as Props, type CheckboxService as Service, anatomy, connect, machine, props, splitProps };

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

@@ -0,0 +1,81 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.js";
+import { M as Service, S as EventObject, T as Machine } from "../../index-CFoN0L3C.js";
+import { b as PropTypes, g as RequiredBy, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.js";
+import "../../index-BdeZuSX6.js";
+//#region src/machines/checkbox/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "indicator" | "label" | "control">;
+//#endregion
+//#region src/machines/checkbox/types.d.ts
+type CheckedState = boolean | "indeterminate";
+interface CheckedChangeDetails {
+  checked: CheckedState;
+}
+type ElementIds = Partial<{
+  root: string;
+  hiddenInput: string;
+  control: string;
+  label: string;
+}>;
+interface CheckboxProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  disabled?: boolean | undefined;
+  invalid?: boolean | undefined;
+  required?: boolean | undefined;
+  checked?: CheckedState | undefined;
+  defaultChecked?: CheckedState | undefined;
+  readOnly?: boolean | undefined;
+  onCheckedChange?: ((details: CheckedChangeDetails) => void) | undefined;
+  name?: string | undefined;
+  form?: string | undefined;
+  value?: string | undefined;
+}
+type PropsWithDefault = "value";
+interface CheckboxSchema {
+  state: "ready";
+  props: RequiredBy<CheckboxProps, PropsWithDefault>;
+  context: {
+    checked: CheckedState;
+    active: boolean;
+    focused: boolean;
+    focusVisible: boolean;
+    hovered: boolean;
+    fieldsetDisabled: boolean;
+  };
+  computed: {
+    indeterminate: boolean;
+    checked: boolean;
+    disabled: boolean;
+  };
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type CheckboxService = Service<CheckboxSchema>;
+type CheckboxMachine = Machine<CheckboxSchema>;
+interface CheckboxApi<T extends PropTypes = PropTypes> {
+  checked: boolean;
+  disabled: boolean | undefined;
+  indeterminate: boolean;
+  focused: boolean | undefined;
+  checkedState: CheckedState;
+  setChecked: (checked: CheckedState) => void;
+  toggleChecked: VoidFunction;
+  getRootProps: () => T["label"];
+  getLabelProps: () => T["element"];
+  getControlProps: () => T["element"];
+  getHiddenInputProps: () => T["input"];
+  getIndicatorProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/checkbox/connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<CheckboxSchema>, normalize: NormalizeProps<T>): CheckboxApi<T>;
+//#endregion
+//#region src/machines/checkbox/machine.d.ts
+declare const machine: Machine<CheckboxSchema>;
+//#endregion
+//#region src/machines/checkbox/props.d.ts
+declare const props: (keyof CheckboxProps)[];
+declare const splitProps: <Props extends Partial<CheckboxProps>>(props: Props) => [Partial<CheckboxProps>, Omit<Props, keyof CheckboxProps>];
+//#endregion
+export { type CheckboxApi as Api, type CheckedChangeDetails, type CheckedState, type ElementIds, type CheckboxMachine as Machine, type CheckboxProps as Props, type CheckboxService as Service, anatomy, connect, machine, props, splitProps };