@sprawlify/primitives 0.0.1

package/dist/machines/toggle-group/index.d.cts

@@ -0,0 +1,81 @@
+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, d as Orientation, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+
+//#region src/machines/toggle-group/toggle-group.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "item">;
+//#endregion
+//#region src/machines/toggle-group/toggle-group.types.d.ts
+interface ValueChangeDetails {
+  value: string[];
+}
+type ElementIds = Partial<{
+  root: string;
+  item: (value: string) => string;
+}>;
+interface ToggleGroupProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  disabled?: boolean | undefined;
+  value?: string[] | undefined;
+  defaultValue?: string[] | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  loopFocus?: boolean | undefined;
+  rovingFocus?: boolean | undefined;
+  orientation?: Orientation | undefined;
+  multiple?: boolean | undefined;
+  deselectable?: boolean | undefined;
+}
+type PropsWithDefault = "loopFocus" | "rovingFocus" | "orientation";
+type ComputedContext = Readonly<{
+  currentLoopFocus: boolean;
+}>;
+interface PrivateContext {
+  isTabbingBackward: boolean;
+  isClickFocus: boolean;
+  focusedId: string | null;
+  isWithinToolbar: boolean;
+  value: string[];
+}
+interface ToggleGroupSchema {
+  props: RequiredBy<ToggleGroupProps, PropsWithDefault>;
+  context: PrivateContext;
+  computed: ComputedContext;
+  state: "idle" | "focused";
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type ToggleGroupService = Service<ToggleGroupSchema>;
+type ToggleGroupMachine = Machine<ToggleGroupSchema>;
+interface ItemProps {
+  value: string;
+  disabled?: boolean | undefined;
+}
+interface ItemState {
+  id: string;
+  disabled: boolean;
+  pressed: boolean;
+  focused: boolean;
+}
+interface ToggleGroupApi<T extends PropTypes = PropTypes> {
+  value: string[];
+  setValue: (value: string[]) => void;
+  getItemState: (props: ItemProps) => ItemState;
+  getRootProps: () => T["element"];
+  getItemProps: (props: ItemProps) => T["button"];
+}
+//#endregion
+//#region src/machines/toggle-group/toggle-group.connect.d.ts
+declare function connect<T extends PropTypes>(service: ToggleGroupService, normalize: NormalizeProps<T>): ToggleGroupApi<T>;
+//#endregion
+//#region src/machines/toggle-group/toggle-group.machine.d.ts
+declare const machine: Machine<ToggleGroupSchema>;
+//#endregion
+//#region src/machines/toggle-group/toggle-group.props.d.ts
+declare const props: (keyof ToggleGroupProps)[];
+declare const splitProps: <Props extends Partial<ToggleGroupProps>>(props: Props) => [Partial<ToggleGroupProps>, Omit<Props, keyof ToggleGroupProps>];
+declare const itemProps: (keyof ItemProps)[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
+//#endregion
+export { type ToggleGroupApi as Api, type ElementIds, type ItemProps, type ItemState, type ToggleGroupMachine as Machine, type Orientation, type ToggleGroupProps as Props, type ToggleGroupService as Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/dist/machines/toggle-group/index.d.mts

@@ -0,0 +1,81 @@
+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, d as Orientation, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-C0MKXQmE.mjs";
+
+//#region src/machines/toggle-group/toggle-group.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "item">;
+//#endregion
+//#region src/machines/toggle-group/toggle-group.types.d.ts
+interface ValueChangeDetails {
+  value: string[];
+}
+type ElementIds = Partial<{
+  root: string;
+  item: (value: string) => string;
+}>;
+interface ToggleGroupProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  disabled?: boolean | undefined;
+  value?: string[] | undefined;
+  defaultValue?: string[] | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  loopFocus?: boolean | undefined;
+  rovingFocus?: boolean | undefined;
+  orientation?: Orientation | undefined;
+  multiple?: boolean | undefined;
+  deselectable?: boolean | undefined;
+}
+type PropsWithDefault = "loopFocus" | "rovingFocus" | "orientation";
+type ComputedContext = Readonly<{
+  currentLoopFocus: boolean;
+}>;
+interface PrivateContext {
+  isTabbingBackward: boolean;
+  isClickFocus: boolean;
+  focusedId: string | null;
+  isWithinToolbar: boolean;
+  value: string[];
+}
+interface ToggleGroupSchema {
+  props: RequiredBy<ToggleGroupProps, PropsWithDefault>;
+  context: PrivateContext;
+  computed: ComputedContext;
+  state: "idle" | "focused";
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type ToggleGroupService = Service<ToggleGroupSchema>;
+type ToggleGroupMachine = Machine<ToggleGroupSchema>;
+interface ItemProps {
+  value: string;
+  disabled?: boolean | undefined;
+}
+interface ItemState {
+  id: string;
+  disabled: boolean;
+  pressed: boolean;
+  focused: boolean;
+}
+interface ToggleGroupApi<T extends PropTypes = PropTypes> {
+  value: string[];
+  setValue: (value: string[]) => void;
+  getItemState: (props: ItemProps) => ItemState;
+  getRootProps: () => T["element"];
+  getItemProps: (props: ItemProps) => T["button"];
+}
+//#endregion
+//#region src/machines/toggle-group/toggle-group.connect.d.ts
+declare function connect<T extends PropTypes>(service: ToggleGroupService, normalize: NormalizeProps<T>): ToggleGroupApi<T>;
+//#endregion
+//#region src/machines/toggle-group/toggle-group.machine.d.ts
+declare const machine: Machine<ToggleGroupSchema>;
+//#endregion
+//#region src/machines/toggle-group/toggle-group.props.d.ts
+declare const props: (keyof ToggleGroupProps)[];
+declare const splitProps: <Props extends Partial<ToggleGroupProps>>(props: Props) => [Partial<ToggleGroupProps>, Omit<Props, keyof ToggleGroupProps>];
+declare const itemProps: (keyof ItemProps)[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
+//#endregion
+export { type ToggleGroupApi as Api, type ElementIds, type ItemProps, type ItemState, type ToggleGroupMachine as Machine, type Orientation, type ToggleGroupProps as Props, type ToggleGroupService as Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/dist/machines/toggle-group/index.mjs

@@ -0,0 +1,322 @@
+import { t as createAnatomy } from "../../create-anatomy-BbDZbHpC.mjs";
+import { Rt as isSafari, S as queryAll, U as raf, Xt as contains, b as prevById, ft as getEventTarget, lt as getEventKey, vn as dataAttr, y as nextById } from "../../dom-query-DFCRhyj1.mjs";
+import { Ct as last, _t as first, dt as isEqual, n as ensureProps, pt as addOrRemove, tt as isArray, u as createSplitProps } from "../../utils-BZyrxWWR.mjs";
+import { a as createMachine, i as createGuards } from "../../core-DCFNMTZF.mjs";
+import { t as createProps } from "../../create-props-BnF_vl-E.mjs";
+
+//#region src/machines/toggle-group/toggle-group.anatomy.ts
+const anatomy = createAnatomy("toggle-group").parts("root", "item");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/toggle-group/toggle-group.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `toggle-group:${ctx.id}`;
+const getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `toggle-group:${ctx.id}:${value}`;
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getElements = (ctx) => {
+	const selector = `[data-ownedby='${CSS.escape(getRootId(ctx))}']:not([data-disabled])`;
+	return queryAll(getRootEl(ctx), selector);
+};
+const getFirstEl = (ctx) => first(getElements(ctx));
+const getLastEl = (ctx) => last(getElements(ctx));
+const getNextEl = (ctx, id, loopFocus) => nextById(getElements(ctx), id, loopFocus);
+const getPrevEl = (ctx, id, loopFocus) => prevById(getElements(ctx), id, loopFocus);
+
+//#endregion
+//#region src/machines/toggle-group/toggle-group.connect.ts
+function connect(service, normalize) {
+	const { context, send, prop, scope } = service;
+	const value = context.get("value");
+	const disabled = prop("disabled");
+	const isSingle = !prop("multiple");
+	const rovingFocus = prop("rovingFocus");
+	const isHorizontal = prop("orientation") === "horizontal";
+	function getItemState(props$1) {
+		const id = getItemId(scope, props$1.value);
+		return {
+			id,
+			disabled: Boolean(props$1.disabled || disabled),
+			pressed: !!value.includes(props$1.value),
+			focused: context.get("focusedId") === id
+		};
+	}
+	return {
+		value,
+		setValue(value$1) {
+			send({
+				type: "VALUE.SET",
+				value: value$1
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				id: getRootId(scope),
+				dir: prop("dir"),
+				role: isSingle ? "radiogroup" : "group",
+				tabIndex: context.get("isTabbingBackward") ? -1 : 0,
+				"data-disabled": dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				"data-focus": dataAttr(context.get("focusedId") != null),
+				style: { outline: "none" },
+				onMouseDown() {
+					if (disabled) return;
+					send({ type: "ROOT.MOUSE_DOWN" });
+				},
+				onFocus(event) {
+					if (disabled) return;
+					if (event.currentTarget !== getEventTarget(event)) return;
+					if (context.get("isClickFocus")) return;
+					if (context.get("isTabbingBackward")) return;
+					send({ type: "ROOT.FOCUS" });
+				},
+				onBlur(event) {
+					const target = event.relatedTarget;
+					if (contains(event.currentTarget, target)) return;
+					if (disabled) return;
+					send({ type: "ROOT.BLUR" });
+				}
+			});
+		},
+		getItemState,
+		getItemProps(props$1) {
+			const itemState = getItemState(props$1);
+			const rovingTabIndex = itemState.focused ? 0 : -1;
+			return normalize.button({
+				...parts.item.attrs,
+				id: itemState.id,
+				type: "button",
+				"data-ownedby": getRootId(scope),
+				"data-focus": dataAttr(itemState.focused),
+				disabled: itemState.disabled,
+				tabIndex: rovingFocus ? rovingTabIndex : void 0,
+				role: isSingle ? "radio" : void 0,
+				"aria-checked": isSingle ? itemState.pressed : void 0,
+				"aria-pressed": isSingle ? void 0 : itemState.pressed,
+				"data-disabled": dataAttr(itemState.disabled),
+				"data-orientation": prop("orientation"),
+				dir: prop("dir"),
+				"data-state": itemState.pressed ? "on" : "off",
+				onFocus() {
+					if (itemState.disabled) return;
+					send({
+						type: "TOGGLE.FOCUS",
+						id: itemState.id
+					});
+				},
+				onClick(event) {
+					if (itemState.disabled) return;
+					send({
+						type: "TOGGLE.CLICK",
+						id: itemState.id,
+						value: props$1.value
+					});
+					if (isSafari()) event.currentTarget.focus({ preventScroll: true });
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!contains(event.currentTarget, getEventTarget(event))) return;
+					if (itemState.disabled) return;
+					const exec = {
+						Tab(event$1) {
+							const isShiftTab = event$1.shiftKey;
+							send({
+								type: "TOGGLE.SHIFT_TAB",
+								isShiftTab
+							});
+						},
+						ArrowLeft() {
+							if (!rovingFocus || !isHorizontal) return;
+							send({ type: "TOGGLE.FOCUS_PREV" });
+						},
+						ArrowRight() {
+							if (!rovingFocus || !isHorizontal) return;
+							send({ type: "TOGGLE.FOCUS_NEXT" });
+						},
+						ArrowUp() {
+							if (!rovingFocus || isHorizontal) return;
+							send({ type: "TOGGLE.FOCUS_PREV" });
+						},
+						ArrowDown() {
+							if (!rovingFocus || isHorizontal) return;
+							send({ type: "TOGGLE.FOCUS_NEXT" });
+						},
+						Home() {
+							if (!rovingFocus) return;
+							send({ type: "TOGGLE.FOCUS_FIRST" });
+						},
+						End() {
+							if (!rovingFocus) return;
+							send({ type: "TOGGLE.FOCUS_LAST" });
+						}
+					}[getEventKey(event)];
+					if (exec) {
+						exec(event);
+						if (event.key !== "Tab") event.preventDefault();
+					}
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/toggle-group/toggle-group.machine.ts
+const { not, and } = createGuards();
+const machine = createMachine({
+	props({ props: props$1 }) {
+		return {
+			defaultValue: [],
+			orientation: "horizontal",
+			rovingFocus: true,
+			loopFocus: true,
+			deselectable: true,
+			...props$1
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return {
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				onChange(value) {
+					prop("onValueChange")?.({ value });
+				}
+			})),
+			focusedId: bindable(() => ({ defaultValue: null })),
+			isTabbingBackward: bindable(() => ({ defaultValue: false })),
+			isClickFocus: bindable(() => ({ defaultValue: false })),
+			isWithinToolbar: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	computed: { currentLoopFocus: ({ context, prop }) => prop("loopFocus") && !context.get("isWithinToolbar") },
+	entry: ["checkIfWithinToolbar"],
+	on: {
+		"VALUE.SET": { actions: ["setValue"] },
+		"TOGGLE.CLICK": { actions: ["setValue"] },
+		"ROOT.MOUSE_DOWN": { actions: ["setClickFocus"] }
+	},
+	states: {
+		idle: { on: {
+			"ROOT.FOCUS": {
+				target: "focused",
+				guard: not(and("isClickFocus", "isTabbingBackward")),
+				actions: ["focusFirstToggle", "clearClickFocus"]
+			},
+			"TOGGLE.FOCUS": {
+				target: "focused",
+				actions: ["setFocusedId"]
+			}
+		} },
+		focused: { on: {
+			"ROOT.BLUR": {
+				target: "idle",
+				actions: [
+					"clearIsTabbingBackward",
+					"clearFocusedId",
+					"clearClickFocus"
+				]
+			},
+			"TOGGLE.FOCUS": { actions: ["setFocusedId"] },
+			"TOGGLE.FOCUS_NEXT": { actions: ["focusNextToggle"] },
+			"TOGGLE.FOCUS_PREV": { actions: ["focusPrevToggle"] },
+			"TOGGLE.FOCUS_FIRST": { actions: ["focusFirstToggle"] },
+			"TOGGLE.FOCUS_LAST": { actions: ["focusLastToggle"] },
+			"TOGGLE.SHIFT_TAB": [{
+				guard: not("isFirstToggleFocused"),
+				target: "idle",
+				actions: ["setIsTabbingBackward"]
+			}, { actions: ["setIsTabbingBackward"] }]
+		} }
+	},
+	implementations: {
+		guards: {
+			isClickFocus: ({ context }) => context.get("isClickFocus"),
+			isTabbingBackward: ({ context }) => context.get("isTabbingBackward"),
+			isFirstToggleFocused: ({ context, scope }) => context.get("focusedId") === getFirstEl(scope)?.id
+		},
+		actions: {
+			setIsTabbingBackward({ context }) {
+				context.set("isTabbingBackward", true);
+			},
+			clearIsTabbingBackward({ context }) {
+				context.set("isTabbingBackward", false);
+			},
+			setClickFocus({ context }) {
+				context.set("isClickFocus", true);
+			},
+			clearClickFocus({ context }) {
+				context.set("isClickFocus", false);
+			},
+			checkIfWithinToolbar({ context, scope }) {
+				const closestToolbar = getRootEl(scope)?.closest("[role=toolbar]");
+				context.set("isWithinToolbar", !!closestToolbar);
+			},
+			setFocusedId({ context, event }) {
+				context.set("focusedId", event.id);
+			},
+			clearFocusedId({ context }) {
+				context.set("focusedId", null);
+			},
+			setValue({ context, event, prop }) {
+				ensureProps(event, ["value"]);
+				let next = context.get("value");
+				if (isArray(event.value)) next = event.value;
+				else if (prop("multiple")) next = addOrRemove(next, event.value);
+				else next = isEqual(next, [event.value]) && prop("deselectable") ? [] : [event.value];
+				context.set("value", next);
+			},
+			focusNextToggle({ context, scope, prop }) {
+				raf(() => {
+					const focusedId = context.get("focusedId");
+					if (!focusedId) return;
+					getNextEl(scope, focusedId, prop("loopFocus"))?.focus({ preventScroll: true });
+				});
+			},
+			focusPrevToggle({ context, scope, prop }) {
+				raf(() => {
+					const focusedId = context.get("focusedId");
+					if (!focusedId) return;
+					getPrevEl(scope, focusedId, prop("loopFocus"))?.focus({ preventScroll: true });
+				});
+			},
+			focusFirstToggle({ scope }) {
+				raf(() => {
+					getFirstEl(scope)?.focus({ preventScroll: true });
+				});
+			},
+			focusLastToggle({ scope }) {
+				raf(() => {
+					getLastEl(scope)?.focus({ preventScroll: true });
+				});
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/machines/toggle-group/toggle-group.props.ts
+const props = createProps()([
+	"dir",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"loopFocus",
+	"multiple",
+	"onValueChange",
+	"orientation",
+	"rovingFocus",
+	"value",
+	"defaultValue",
+	"deselectable"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()(["value", "disabled"]);
+const splitItemProps = createSplitProps(itemProps);
+
+//#endregion
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };