@sprawlify/primitives 0.0.1

package/dist/machines/steps/index.mjs

@@ -0,0 +1,285 @@
+import { t as createAnatomy } from "../../create-anatomy-BbDZbHpC.mjs";
+import { vn as dataAttr } from "../../dom-query-DFCRhyj1.mjs";
+import { N as isValueWithinRange, u as createSplitProps, yt as fromLength } from "../../utils-BZyrxWWR.mjs";
+import { a as createMachine, s as memo } from "../../core-DCFNMTZF.mjs";
+import { t as createProps } from "../../create-props-BnF_vl-E.mjs";
+
+//#region src/machines/steps/steps.anatomy.ts
+const anatomy = createAnatomy("steps").parts("root", "list", "item", "trigger", "indicator", "separator", "content", "nextTrigger", "prevTrigger", "progress");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/steps/steps.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `steps:${ctx.id}`;
+const getListId = (ctx) => ctx.ids?.list ?? `steps:${ctx.id}:list`;
+const getTriggerId = (ctx, index) => ctx.ids?.triggerId?.(index) ?? `steps:${ctx.id}:trigger:${index}`;
+const getContentId = (ctx, index) => ctx.ids?.contentId?.(index) ?? `steps:${ctx.id}:content:${index}`;
+
+//#endregion
+//#region src/machines/steps/steps.connect.ts
+function connect(service, normalize) {
+	const { context, send, computed, prop, scope } = service;
+	const step = context.get("step");
+	const count = prop("count");
+	const percent = computed("percent");
+	const hasNextStep = computed("hasNextStep");
+	const hasPrevStep = computed("hasPrevStep");
+	const getItemState = (props$1) => ({
+		triggerId: getTriggerId(scope, props$1.index),
+		contentId: getContentId(scope, props$1.index),
+		current: props$1.index === step,
+		completed: props$1.index < step,
+		incomplete: props$1.index > step,
+		index: props$1.index,
+		first: props$1.index === 0,
+		last: props$1.index === count - 1
+	});
+	const goToNextStep = () => {
+		send({
+			type: "STEP.NEXT",
+			src: "next.trigger.click"
+		});
+	};
+	const goToPrevStep = () => {
+		send({
+			type: "STEP.PREV",
+			src: "prev.trigger.click"
+		});
+	};
+	const resetStep = () => {
+		send({
+			type: "STEP.RESET",
+			src: "reset.trigger.click"
+		});
+	};
+	const setStep = (value) => {
+		send({
+			type: "STEP.SET",
+			value,
+			src: "api.setValue"
+		});
+	};
+	return {
+		value: step,
+		count,
+		percent,
+		hasNextStep,
+		hasPrevStep,
+		isCompleted: computed("completed"),
+		goToNextStep,
+		goToPrevStep,
+		resetStep,
+		getItemState,
+		setStep,
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				id: getRootId(scope),
+				dir: prop("dir"),
+				"data-orientation": prop("orientation"),
+				style: { "--percent": `${percent}%` }
+			});
+		},
+		getListProps() {
+			const triggerIds = fromLength(count).map((_, index) => getTriggerId(scope, index));
+			return normalize.element({
+				...parts.list.attrs,
+				dir: prop("dir"),
+				id: getListId(scope),
+				role: "tablist",
+				"aria-owns": triggerIds.join(" "),
+				"aria-orientation": prop("orientation"),
+				"data-orientation": prop("orientation")
+			});
+		},
+		getItemProps(props$1) {
+			const itemState = getItemState(props$1);
+			return normalize.element({
+				...parts.item.attrs,
+				dir: prop("dir"),
+				"aria-current": itemState.current ? "step" : void 0,
+				"data-orientation": prop("orientation")
+			});
+		},
+		getTriggerProps(props$1) {
+			const itemState = getItemState(props$1);
+			return normalize.button({
+				...parts.trigger.attrs,
+				id: itemState.triggerId,
+				role: "tab",
+				dir: prop("dir"),
+				tabIndex: !prop("linear") || itemState.current ? 0 : -1,
+				"aria-selected": itemState.current,
+				"aria-controls": itemState.contentId,
+				"data-state": itemState.current ? "open" : "closed",
+				"data-orientation": prop("orientation"),
+				"data-complete": dataAttr(itemState.completed),
+				"data-current": dataAttr(itemState.current),
+				"data-incomplete": dataAttr(itemState.incomplete),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (prop("linear")) return;
+					send({
+						type: "STEP.SET",
+						value: props$1.index,
+						src: "trigger.click"
+					});
+				}
+			});
+		},
+		getContentProps(props$1) {
+			const itemState = getItemState(props$1);
+			return normalize.element({
+				...parts.content.attrs,
+				dir: prop("dir"),
+				id: itemState.contentId,
+				role: "tabpanel",
+				tabIndex: 0,
+				hidden: !itemState.current,
+				"data-state": itemState.current ? "open" : "closed",
+				"data-orientation": prop("orientation"),
+				"aria-labelledby": itemState.triggerId
+			});
+		},
+		getIndicatorProps(props$1) {
+			const itemState = getItemState(props$1);
+			return normalize.element({
+				...parts.indicator.attrs,
+				dir: prop("dir"),
+				"aria-hidden": true,
+				"data-complete": dataAttr(itemState.completed),
+				"data-current": dataAttr(itemState.current),
+				"data-incomplete": dataAttr(itemState.incomplete)
+			});
+		},
+		getSeparatorProps(props$1) {
+			const itemState = getItemState(props$1);
+			return normalize.element({
+				...parts.separator.attrs,
+				dir: prop("dir"),
+				"data-orientation": prop("orientation"),
+				"data-complete": dataAttr(itemState.completed),
+				"data-current": dataAttr(itemState.current),
+				"data-incomplete": dataAttr(itemState.incomplete)
+			});
+		},
+		getNextTriggerProps() {
+			return normalize.button({
+				...parts.nextTrigger.attrs,
+				dir: prop("dir"),
+				type: "button",
+				disabled: !hasNextStep,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					goToNextStep();
+				}
+			});
+		},
+		getPrevTriggerProps() {
+			return normalize.button({
+				dir: prop("dir"),
+				...parts.prevTrigger.attrs,
+				type: "button",
+				disabled: !hasPrevStep,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					goToPrevStep();
+				}
+			});
+		},
+		getProgressProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				...parts.progress.attrs,
+				role: "progressbar",
+				"aria-valuenow": percent,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuetext": `${percent}% complete`,
+				"data-complete": dataAttr(percent === 100)
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/steps/steps.machine.ts
+const machine = createMachine({
+	props({ props: props$1 }) {
+		return {
+			defaultStep: 0,
+			count: 1,
+			linear: false,
+			orientation: "horizontal",
+			...props$1
+		};
+	},
+	context({ prop, bindable }) {
+		return { step: bindable(() => ({
+			defaultValue: prop("defaultStep"),
+			value: prop("step"),
+			onChange(value) {
+				prop("onStepChange")?.({ step: value });
+				if (value == prop("count")) prop("onStepComplete")?.();
+			}
+		})) };
+	},
+	computed: {
+		percent: memo(({ context, prop }) => [context.get("step"), prop("count")], ([step, count]) => step / count * 100),
+		hasNextStep: ({ context, prop }) => context.get("step") < prop("count"),
+		hasPrevStep: ({ context }) => context.get("step") > 0,
+		completed: ({ context, prop }) => context.get("step") === prop("count")
+	},
+	initialState() {
+		return "idle";
+	},
+	entry: ["validateStep"],
+	states: { idle: { on: {
+		"STEP.SET": { actions: ["setStep"] },
+		"STEP.NEXT": { actions: ["goToNextStep"] },
+		"STEP.PREV": { actions: ["goToPrevStep"] },
+		"STEP.RESET": { actions: ["resetStep"] }
+	} } },
+	implementations: { actions: {
+		goToNextStep({ context, prop }) {
+			const value = Math.min(context.get("step") + 1, prop("count"));
+			context.set("step", value);
+		},
+		goToPrevStep({ context }) {
+			const value = Math.max(context.get("step") - 1, 0);
+			context.set("step", value);
+		},
+		resetStep({ context }) {
+			context.set("step", 0);
+		},
+		setStep({ context, event }) {
+			context.set("step", event.value);
+		},
+		validateStep({ context, prop }) {
+			validateStep(prop("count"), context.get("step"));
+		}
+	} }
+});
+const validateStep = (count, step) => {
+	if (!isValueWithinRange(step, 0, count)) throw new RangeError(`[sprawlify-js/steps] step index ${step} is out of bounds`);
+};
+
+//#endregion
+//#region src/machines/steps/steps.props.ts
+const props = createProps()([
+	"count",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"linear",
+	"onStepChange",
+	"onStepComplete",
+	"orientation",
+	"step",
+	"defaultStep"
+]);
+const splitProps = createSplitProps(props);
+
+//#endregion
+export { anatomy, connect, machine, props, splitProps };

package/dist/machines/switch/index.cjs

@@ -0,0 +1,305 @@
+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_focus_visible = require('../../focus-visible-DYTWdWpa.cjs');
+const require_create_props = require('../../create-props-YKy7JIKj.cjs');
+
+//#region src/machines/switch/switch.anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("switch").parts("root", "label", "control", "thumb");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/switch/switch.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `switch:${ctx.id}`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `switch:${ctx.id}:label`;
+const getThumbId = (ctx) => ctx.ids?.thumb ?? `switch:${ctx.id}:thumb`;
+const getControlId = (ctx) => ctx.ids?.control ?? `switch:${ctx.id}:control`;
+const getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `switch:${ctx.id}:input`;
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+
+//#endregion
+//#region src/machines/switch/switch.connect.ts
+function connect(service, normalize) {
+	const { context, send, prop, scope } = service;
+	const disabled = !!prop("disabled");
+	const readOnly = !!prop("readOnly");
+	const required = !!prop("required");
+	const checked = !!context.get("checked");
+	const focused = !disabled && context.get("focused");
+	const focusVisible = !disabled && context.get("focusVisible");
+	const active = !disabled && context.get("active");
+	const dataAttrs = {
+		"data-active": require_dom_query.dataAttr(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": checked ? "checked" : "unchecked",
+		"data-invalid": require_dom_query.dataAttr(prop("invalid")),
+		"data-required": require_dom_query.dataAttr(required)
+	};
+	return {
+		checked,
+		disabled,
+		focused,
+		setChecked(checked$1) {
+			send({
+				type: "CHECKED.SET",
+				checked: checked$1,
+				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 (disabled) return;
+					if (require_dom_query.getEventTarget(event) === getHiddenInputEl(scope)) event.stopPropagation();
+					if (require_dom_query.isSafari()) getHiddenInputEl(scope)?.focus();
+				}
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				...parts.label.attrs,
+				...dataAttrs,
+				dir: prop("dir"),
+				id: getLabelId(scope)
+			});
+		},
+		getThumbProps() {
+			return normalize.element({
+				...parts.thumb.attrs,
+				...dataAttrs,
+				dir: prop("dir"),
+				id: getThumbId(scope),
+				"aria-hidden": true
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				...dataAttrs,
+				dir: prop("dir"),
+				id: getControlId(scope),
+				"aria-hidden": true
+			});
+		},
+		getHiddenInputProps() {
+			return normalize.input({
+				id: getHiddenInputId(scope),
+				type: "checkbox",
+				required: prop("required"),
+				defaultChecked: checked,
+				disabled,
+				"aria-labelledby": getLabelId(scope),
+				"aria-invalid": prop("invalid"),
+				name: prop("name"),
+				form: prop("form"),
+				value: prop("value"),
+				style: require_dom_query.visuallyHiddenStyle,
+				onFocus() {
+					send({
+						type: "CONTEXT.SET",
+						context: {
+							focused: true,
+							focusVisible: require_focus_visible.isFocusVisible()
+						}
+					});
+				},
+				onBlur() {
+					send({
+						type: "CONTEXT.SET",
+						context: {
+							focused: false,
+							focusVisible: false
+						}
+					});
+				},
+				onClick(event) {
+					if (readOnly) {
+						event.preventDefault();
+						return;
+					}
+					const checked$1 = event.currentTarget.checked;
+					send({
+						type: "CHECKED.SET",
+						checked: checked$1,
+						isTrusted: true
+					});
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/switch/switch.machine.ts
+const { not } = require_core.createGuards();
+const machine = require_core.createMachine({
+	props({ props: props$1 }) {
+		return {
+			defaultChecked: false,
+			label: "switch",
+			value: "on",
+			...props$1
+		};
+	},
+	initialState() {
+		return "ready";
+	},
+	context({ prop, bindable }) {
+		return {
+			checked: bindable(() => ({
+				defaultValue: prop("defaultChecked"),
+				value: prop("checked"),
+				onChange(value) {
+					prop("onCheckedChange")?.({ checked: value });
+				}
+			})),
+			fieldsetDisabled: bindable(() => ({ defaultValue: false })),
+			focusVisible: bindable(() => ({ defaultValue: false })),
+			active: bindable(() => ({ defaultValue: false })),
+			focused: bindable(() => ({ defaultValue: false })),
+			hovered: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	computed: { isDisabled: ({ context, prop }) => prop("disabled") || context.get("fieldsetDisabled") },
+	watch({ track, prop, context, 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"] }
+	},
+	states: { ready: {} },
+	implementations: {
+		guards: { isTrusted: ({ event }) => !!event.isTrusted },
+		effects: {
+			trackPressEvent({ computed, scope, context }) {
+				if (computed("isDisabled")) return;
+				return require_dom_query.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("isDisabled")) return;
+				return require_focus_visible.trackFocusVisible({ root: scope.getRootNode() });
+			},
+			trackFormControlState({ context, send, scope }) {
+				return require_dom_query.trackFormControl(getHiddenInputEl(scope), {
+					onFieldsetDisabledChange(disabled) {
+						context.set("fieldsetDisabled", disabled);
+					},
+					onFormReset() {
+						send({
+							type: "CHECKED.SET",
+							checked: !!context.initial("checked"),
+							src: "form-reset"
+						});
+					}
+				});
+			}
+		},
+		actions: {
+			setContext({ context, event }) {
+				for (const key in event.context) context.set(key, event.context[key]);
+			},
+			syncInputElement({ context, scope }) {
+				const inputEl = getHiddenInputEl(scope);
+				if (!inputEl) return;
+				require_dom_query.setElementChecked(inputEl, !!context.get("checked"));
+			},
+			removeFocusIfNeeded({ context, prop }) {
+				if (prop("disabled")) context.set("focused", false);
+			},
+			setChecked({ context, event }) {
+				context.set("checked", event.checked);
+			},
+			toggleChecked({ context }) {
+				context.set("checked", !context.get("checked"));
+			},
+			dispatchChangeEvent({ context, scope }) {
+				require_dom_query.dispatchInputCheckedEvent(getHiddenInputEl(scope), { checked: context.get("checked") });
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/machines/switch/switch.props.ts
+const props = require_create_props.createProps()([
+	"checked",
+	"defaultChecked",
+	"dir",
+	"disabled",
+	"form",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"label",
+	"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/switch/index.d.cts

@@ -0,0 +1,80 @@
+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, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+
+//#region src/machines/switch/switch.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "thumb">;
+//#endregion
+//#region src/machines/switch/switch.types.d.ts
+interface CheckedChangeDetails {
+  checked: boolean;
+}
+type ElementIds = Partial<{
+  root: string;
+  hiddenInput: string;
+  control: string;
+  label: string;
+  thumb: string;
+}>;
+interface SwitchProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  label?: string | undefined;
+  disabled?: boolean | undefined;
+  invalid?: boolean | undefined;
+  required?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  onCheckedChange?: ((details: CheckedChangeDetails) => void) | undefined;
+  checked?: boolean | undefined;
+  defaultChecked?: boolean | undefined;
+  name?: string | undefined;
+  form?: string | undefined;
+  value?: string | number | undefined;
+}
+type PropsWithDefault = "value";
+type ComputedContext = Readonly<{
+  isDisabled: boolean;
+}>;
+interface PrivateContext {
+  active: boolean;
+  focused: boolean;
+  focusVisible: boolean;
+  hovered: boolean;
+  fieldsetDisabled: boolean;
+  checked: boolean;
+}
+interface SwitchSchema {
+  props: RequiredBy<SwitchProps, PropsWithDefault>;
+  context: PrivateContext;
+  state: "ready";
+  computed: ComputedContext;
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type SwitchService = Service<SwitchSchema>;
+type SwitchMachine = Machine<SwitchSchema>;
+interface SwitchApi<T extends PropTypes = PropTypes> {
+  checked: boolean;
+  disabled: boolean | undefined;
+  focused: boolean | undefined;
+  setChecked: (checked: boolean) => void;
+  toggleChecked: VoidFunction;
+  getRootProps: () => T["label"];
+  getLabelProps: () => T["element"];
+  getThumbProps: () => T["element"];
+  getControlProps: () => T["element"];
+  getHiddenInputProps: () => T["input"];
+}
+//#endregion
+//#region src/machines/switch/switch.connect.d.ts
+declare function connect<T extends PropTypes>(service: SwitchService, normalize: NormalizeProps<T>): SwitchApi<T>;
+//#endregion
+//#region src/machines/switch/switch.machine.d.ts
+declare const machine: Machine<SwitchSchema>;
+//#endregion
+//#region src/machines/switch/switch.props.d.ts
+declare const props: (keyof SwitchProps)[];
+declare const splitProps: <Props extends Partial<SwitchProps>>(props: Props) => [Partial<SwitchProps>, Omit<Props, keyof SwitchProps>];
+//#endregion
+export { type SwitchApi as Api, type CheckedChangeDetails, type ElementIds, type SwitchMachine as Machine, type SwitchProps as Props, type SwitchService as Service, anatomy, connect, machine, props, splitProps };