@sprawlify/primitives 0.0.1

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

@@ -0,0 +1,80 @@
+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, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-C0MKXQmE.mjs";
+
+//#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 };

package/dist/machines/switch/index.mjs

@@ -0,0 +1,301 @@
+import { t as createAnatomy } from "../../create-anatomy-BbDZbHpC.mjs";
+import { Rt as isSafari, ft as getEventTarget, i as visuallyHiddenStyle, it as setElementChecked, nt as dispatchInputCheckedEvent, ot as trackFormControl, vn as dataAttr, w as trackPress } from "../../dom-query-DFCRhyj1.mjs";
+import { u as createSplitProps } from "../../utils-BZyrxWWR.mjs";
+import { a as createMachine, i as createGuards } from "../../core-DCFNMTZF.mjs";
+import { a as trackFocusVisible, n as isFocusVisible } from "../../focus-visible-irppYatv.mjs";
+import { t as createProps } from "../../create-props-BnF_vl-E.mjs";
+
+//#region src/machines/switch/switch.anatomy.ts
+const 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": dataAttr(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": checked ? "checked" : "unchecked",
+		"data-invalid": dataAttr(prop("invalid")),
+		"data-required": 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 (getEventTarget(event) === getHiddenInputEl(scope)) event.stopPropagation();
+					if (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: visuallyHiddenStyle,
+				onFocus() {
+					send({
+						type: "CONTEXT.SET",
+						context: {
+							focused: true,
+							focusVisible: 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 } = createGuards();
+const machine = 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 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 trackFocusVisible({ root: scope.getRootNode() });
+			},
+			trackFormControlState({ context, send, scope }) {
+				return 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;
+				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 }) {
+				dispatchInputCheckedEvent(getHiddenInputEl(scope), { checked: context.get("checked") });
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/machines/switch/switch.props.ts
+const props = createProps()([
+	"checked",
+	"defaultChecked",
+	"dir",
+	"disabled",
+	"form",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"label",
+	"name",
+	"onCheckedChange",
+	"readOnly",
+	"required",
+	"value"
+]);
+const splitProps = createSplitProps(props);
+
+//#endregion
+export { anatomy, connect, machine, props, splitProps };