@sprawlify/primitives 0.0.1

package/dist/machines/steps/index.cjs

@@ -0,0 +1,289 @@
+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_create_props = require('../../create-props-YKy7JIKj.cjs');
+
+//#region src/machines/steps/steps.anatomy.ts
+const anatomy = require_create_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 = require_utils.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": require_dom_query.dataAttr(itemState.completed),
+				"data-current": require_dom_query.dataAttr(itemState.current),
+				"data-incomplete": require_dom_query.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": require_dom_query.dataAttr(itemState.completed),
+				"data-current": require_dom_query.dataAttr(itemState.current),
+				"data-incomplete": require_dom_query.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": require_dom_query.dataAttr(itemState.completed),
+				"data-current": require_dom_query.dataAttr(itemState.current),
+				"data-incomplete": require_dom_query.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": require_dom_query.dataAttr(percent === 100)
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/steps/steps.machine.ts
+const machine = require_core.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: require_core.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 (!require_utils.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 = require_create_props.createProps()([
+	"count",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"linear",
+	"onStepChange",
+	"onStepComplete",
+	"orientation",
+	"step",
+	"defaultStep"
+]);
+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/steps/index.d.cts

@@ -0,0 +1,97 @@
+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/steps/steps.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "item" | "prevTrigger" | "nextTrigger" | "progress" | "trigger" | "content" | "indicator" | "list" | "separator">;
+//#endregion
+//#region src/machines/steps/steps.types.d.ts
+interface StepChangeDetails {
+  step: number;
+}
+interface ElementIds {
+  root?: string | undefined;
+  list?: string | undefined;
+  triggerId?: ((index: number) => string) | undefined;
+  contentId?: ((index: number) => string) | undefined;
+}
+interface StepsProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  step?: number | undefined;
+  defaultStep?: number | undefined;
+  onStepChange?: ((details: StepChangeDetails) => void) | undefined;
+  onStepComplete?: VoidFunction | undefined;
+  linear?: boolean | undefined;
+  orientation?: "horizontal" | "vertical" | undefined;
+  count?: number | undefined;
+}
+type PropsWithDefault = "orientation" | "linear" | "count";
+interface PrivateContext {
+  step: number;
+}
+type ComputedContext = Readonly<{
+  percent: number;
+  hasNextStep: boolean;
+  hasPrevStep: boolean;
+  completed: boolean;
+}>;
+interface StepsSchema {
+  props: RequiredBy<StepsProps, PropsWithDefault>;
+  context: PrivateContext;
+  computed: ComputedContext;
+  state: "idle";
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type StepsService = Service<StepsSchema>;
+type StepsMachine = Machine<StepsSchema>;
+interface ItemProps {
+  index: number;
+}
+interface ItemState {
+  index: number;
+  triggerId: string;
+  contentId: string;
+  current: boolean;
+  completed: boolean;
+  incomplete: boolean;
+  last: boolean;
+  first: boolean;
+}
+interface StepsApi<T extends PropTypes = PropTypes> {
+  value: number;
+  percent: number;
+  count: number;
+  hasNextStep: boolean;
+  hasPrevStep: boolean;
+  isCompleted: boolean;
+  setStep: (step: number) => void;
+  goToNextStep: VoidFunction;
+  goToPrevStep: VoidFunction;
+  resetStep: VoidFunction;
+  getItemState: (props: ItemProps) => ItemState;
+  getRootProps: () => T["element"];
+  getListProps: () => T["element"];
+  getItemProps: (props: ItemProps) => T["element"];
+  getTriggerProps: (props: ItemProps) => T["element"];
+  getContentProps: (props: ItemProps) => T["element"];
+  getNextTriggerProps: () => T["button"];
+  getPrevTriggerProps: () => T["button"];
+  getProgressProps: () => T["element"];
+  getIndicatorProps: (props: ItemProps) => T["element"];
+  getSeparatorProps: (props: ItemProps) => T["element"];
+}
+//#endregion
+//#region src/machines/steps/steps.connect.d.ts
+declare function connect<T extends PropTypes>(service: StepsService, normalize: NormalizeProps<T>): StepsApi<T>;
+//#endregion
+//#region src/machines/steps/steps.machine.d.ts
+declare const machine: Machine<StepsSchema>;
+//#endregion
+//#region src/machines/steps/steps.props.d.ts
+declare const props: (keyof StepsProps)[];
+declare const splitProps: <Props extends Partial<StepsProps>>(props: Props) => [Partial<StepsProps>, Omit<Props, keyof StepsProps>];
+//#endregion
+export { type StepsApi as Api, type ElementIds, type ItemProps, type ItemState, type StepsMachine as Machine, type StepsProps as Props, type StepsService as Service, type StepChangeDetails, anatomy, connect, machine, props, splitProps };

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

@@ -0,0 +1,97 @@
+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/steps/steps.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "item" | "prevTrigger" | "nextTrigger" | "progress" | "trigger" | "content" | "indicator" | "list" | "separator">;
+//#endregion
+//#region src/machines/steps/steps.types.d.ts
+interface StepChangeDetails {
+  step: number;
+}
+interface ElementIds {
+  root?: string | undefined;
+  list?: string | undefined;
+  triggerId?: ((index: number) => string) | undefined;
+  contentId?: ((index: number) => string) | undefined;
+}
+interface StepsProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  step?: number | undefined;
+  defaultStep?: number | undefined;
+  onStepChange?: ((details: StepChangeDetails) => void) | undefined;
+  onStepComplete?: VoidFunction | undefined;
+  linear?: boolean | undefined;
+  orientation?: "horizontal" | "vertical" | undefined;
+  count?: number | undefined;
+}
+type PropsWithDefault = "orientation" | "linear" | "count";
+interface PrivateContext {
+  step: number;
+}
+type ComputedContext = Readonly<{
+  percent: number;
+  hasNextStep: boolean;
+  hasPrevStep: boolean;
+  completed: boolean;
+}>;
+interface StepsSchema {
+  props: RequiredBy<StepsProps, PropsWithDefault>;
+  context: PrivateContext;
+  computed: ComputedContext;
+  state: "idle";
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type StepsService = Service<StepsSchema>;
+type StepsMachine = Machine<StepsSchema>;
+interface ItemProps {
+  index: number;
+}
+interface ItemState {
+  index: number;
+  triggerId: string;
+  contentId: string;
+  current: boolean;
+  completed: boolean;
+  incomplete: boolean;
+  last: boolean;
+  first: boolean;
+}
+interface StepsApi<T extends PropTypes = PropTypes> {
+  value: number;
+  percent: number;
+  count: number;
+  hasNextStep: boolean;
+  hasPrevStep: boolean;
+  isCompleted: boolean;
+  setStep: (step: number) => void;
+  goToNextStep: VoidFunction;
+  goToPrevStep: VoidFunction;
+  resetStep: VoidFunction;
+  getItemState: (props: ItemProps) => ItemState;
+  getRootProps: () => T["element"];
+  getListProps: () => T["element"];
+  getItemProps: (props: ItemProps) => T["element"];
+  getTriggerProps: (props: ItemProps) => T["element"];
+  getContentProps: (props: ItemProps) => T["element"];
+  getNextTriggerProps: () => T["button"];
+  getPrevTriggerProps: () => T["button"];
+  getProgressProps: () => T["element"];
+  getIndicatorProps: (props: ItemProps) => T["element"];
+  getSeparatorProps: (props: ItemProps) => T["element"];
+}
+//#endregion
+//#region src/machines/steps/steps.connect.d.ts
+declare function connect<T extends PropTypes>(service: StepsService, normalize: NormalizeProps<T>): StepsApi<T>;
+//#endregion
+//#region src/machines/steps/steps.machine.d.ts
+declare const machine: Machine<StepsSchema>;
+//#endregion
+//#region src/machines/steps/steps.props.d.ts
+declare const props: (keyof StepsProps)[];
+declare const splitProps: <Props extends Partial<StepsProps>>(props: Props) => [Partial<StepsProps>, Omit<Props, keyof StepsProps>];
+//#endregion
+export { type StepsApi as Api, type ElementIds, type ItemProps, type ItemState, type StepsMachine as Machine, type StepsProps as Props, type StepsService as Service, type StepChangeDetails, anatomy, connect, machine, props, splitProps };