@sprawlify/primitives 0.0.1

package/dist/machines/signature-pad/index.cjs

@@ -0,0 +1,334 @@
+const require_chunk = require('../../chunk-CbDLau6x.cjs');
+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');
+let perfect_freehand = require("perfect-freehand");
+perfect_freehand = require_chunk.__toESM(perfect_freehand);
+
+//#region src/machines/signature-pad/signature-pad.anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("signature-pad").parts("root", "control", "segment", "segmentPath", "guide", "clearTrigger", "label");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/signature-pad/signature-pad.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `signature-pad:${ctx.id}`;
+const getControlId = (ctx) => ctx.ids?.control ?? `signature-pad:${ctx.id}:control`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `signature-pad:${ctx.id}:label`;
+const getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `signature-pad:${ctx.id}:input`;
+const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+const getSegmentEl = (ctx) => require_dom_query.query(getControlEl(ctx), "[data-part=segment]");
+const getDataUrl$1 = (ctx, options) => {
+	return require_dom_query.getDataUrl(getSegmentEl(ctx), options);
+};
+
+//#endregion
+//#region src/machines/signature-pad/signature-pad.connect.ts
+function connect(service, normalize) {
+	const { state, send, prop, computed, context, scope } = service;
+	const drawing = state.matches("drawing");
+	const empty = computed("isEmpty");
+	const interactive = computed("isInteractive");
+	const disabled = !!prop("disabled");
+	const required = !!prop("required");
+	const translations = prop("translations");
+	return {
+		empty,
+		drawing,
+		currentPath: context.get("currentPath"),
+		paths: context.get("paths"),
+		clear() {
+			send({ type: "CLEAR" });
+		},
+		getDataUrl(type, quality) {
+			if (computed("isEmpty")) return Promise.resolve("");
+			return getDataUrl$1(scope, {
+				type,
+				quality
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				id: getLabelId(scope),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-required": require_dom_query.dataAttr(required),
+				htmlFor: getHiddenInputId(scope),
+				onClick(event) {
+					if (!interactive) return;
+					if (event.defaultPrevented) return;
+					getControlEl(scope)?.focus({ preventScroll: true });
+				}
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				id: getRootId(scope)
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				tabIndex: disabled ? void 0 : 0,
+				id: getControlId(scope),
+				role: "application",
+				"aria-roledescription": "signature pad",
+				"aria-label": translations.control,
+				"aria-disabled": disabled,
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				onPointerDown(event) {
+					if (!require_dom_query.isLeftClick(event)) return;
+					if (require_dom_query.isModifierKey(event)) return;
+					if (!interactive) return;
+					if (require_dom_query.getEventTarget(event)?.closest("[data-part=clear-trigger]")) return;
+					event.currentTarget.setPointerCapture(event.pointerId);
+					const point = {
+						x: event.clientX,
+						y: event.clientY
+					};
+					const controlEl = getControlEl(scope);
+					if (!controlEl) return;
+					const { offset } = require_dom_query.getRelativePoint(point, controlEl);
+					send({
+						type: "POINTER_DOWN",
+						point: offset,
+						pressure: event.pressure
+					});
+				},
+				onPointerUp(event) {
+					if (!interactive) return;
+					if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+				},
+				style: {
+					position: "relative",
+					touchAction: "none",
+					userSelect: "none",
+					WebkitUserSelect: "none"
+				}
+			});
+		},
+		getSegmentProps() {
+			return normalize.svg({
+				...parts.segment.attrs,
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					pointerEvents: "none",
+					fill: prop("drawing").fill
+				}
+			});
+		},
+		getSegmentPathProps(props$1) {
+			return normalize.path({
+				...parts.segmentPath.attrs,
+				d: props$1.path
+			});
+		},
+		getGuideProps() {
+			return normalize.element({
+				...parts.guide.attrs,
+				"data-disabled": require_dom_query.dataAttr(disabled)
+			});
+		},
+		getClearTriggerProps() {
+			return normalize.button({
+				...parts.clearTrigger.attrs,
+				type: "button",
+				"aria-label": translations.clearTrigger,
+				hidden: !context.get("paths").length || drawing,
+				disabled,
+				onClick() {
+					send({ type: "CLEAR" });
+				}
+			});
+		},
+		getHiddenInputProps(props$1) {
+			return normalize.input({
+				id: getHiddenInputId(scope),
+				type: "text",
+				hidden: true,
+				disabled,
+				required: prop("required"),
+				readOnly: true,
+				name: prop("name"),
+				value: props$1.value
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/signature-pad/get-svg-path.ts
+const average = (a, b) => (a + b) / 2;
+function getSvgPathFromStroke(points, closed = true) {
+	const len = points.length;
+	if (len < 4) return "";
+	let a = points[0];
+	let b = points[1];
+	const c = points[2];
+	let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(2)},${b[1].toFixed(2)} ${average(b[0], c[0]).toFixed(2)},${average(b[1], c[1]).toFixed(2)} T`;
+	for (let i = 2, max = len - 1; i < max; i++) {
+		a = points[i];
+		b = points[i + 1];
+		result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(2)} `;
+	}
+	if (closed) result += "Z";
+	return result;
+}
+
+//#endregion
+//#region src/machines/signature-pad/signature-pad.machine.ts
+const machine = require_core.createMachine({
+	props({ props: props$1 }) {
+		return {
+			defaultPaths: [],
+			...props$1,
+			drawing: {
+				size: 2,
+				simulatePressure: false,
+				thinning: .7,
+				smoothing: .4,
+				streamline: .6,
+				...props$1.drawing
+			},
+			translations: {
+				control: "signature pad",
+				clearTrigger: "clear signature",
+				...props$1.translations
+			}
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return {
+			paths: bindable(() => ({
+				defaultValue: prop("defaultPaths"),
+				value: prop("paths"),
+				sync: true,
+				onChange(value) {
+					prop("onDraw")?.({ paths: value });
+				}
+			})),
+			currentPoints: bindable(() => ({ defaultValue: [] })),
+			currentPath: bindable(() => ({ defaultValue: null }))
+		};
+	},
+	computed: {
+		isInteractive: ({ prop }) => !(prop("disabled") || prop("readOnly")),
+		isEmpty: ({ context }) => context.get("paths").length === 0
+	},
+	on: { CLEAR: { actions: [
+		"clearPoints",
+		"invokeOnDrawEnd",
+		"focusCanvasEl"
+	] } },
+	states: {
+		idle: { on: { POINTER_DOWN: {
+			target: "drawing",
+			actions: ["addPoint"]
+		} } },
+		drawing: {
+			effects: ["trackPointerMove"],
+			on: {
+				POINTER_MOVE: { actions: ["addPoint", "invokeOnDraw"] },
+				POINTER_UP: {
+					target: "idle",
+					actions: ["endStroke", "invokeOnDrawEnd"]
+				}
+			}
+		}
+	},
+	implementations: {
+		effects: { trackPointerMove({ scope, send }) {
+			return require_dom_query.trackPointerMove(scope.getDoc(), {
+				onPointerMove({ event, point }) {
+					const controlEl = getControlEl(scope);
+					if (!controlEl) return;
+					const { offset } = require_dom_query.getRelativePoint(point, controlEl);
+					send({
+						type: "POINTER_MOVE",
+						point: offset,
+						pressure: event.pressure
+					});
+				},
+				onPointerUp() {
+					send({ type: "POINTER_UP" });
+				}
+			});
+		} },
+		actions: {
+			addPoint({ context, event, prop }) {
+				const nextPoints = [...context.get("currentPoints"), event.point];
+				context.set("currentPoints", nextPoints);
+				const stroke = (0, perfect_freehand.default)(nextPoints, prop("drawing"));
+				context.set("currentPath", getSvgPathFromStroke(stroke));
+			},
+			endStroke({ context }) {
+				const nextPaths = [...context.get("paths"), context.get("currentPath")];
+				context.set("paths", nextPaths);
+				context.set("currentPoints", []);
+				context.set("currentPath", null);
+			},
+			clearPoints({ context }) {
+				context.set("currentPoints", []);
+				context.set("paths", []);
+				context.set("currentPath", null);
+			},
+			focusCanvasEl({ scope }) {
+				queueMicrotask(() => {
+					scope.getActiveElement()?.focus({ preventScroll: true });
+				});
+			},
+			invokeOnDraw({ context, prop }) {
+				prop("onDraw")?.({ paths: [...context.get("paths"), context.get("currentPath")] });
+			},
+			invokeOnDrawEnd({ context, prop, scope, computed }) {
+				prop("onDrawEnd")?.({
+					paths: [...context.get("paths")],
+					getDataUrl(type, quality = .92) {
+						if (computed("isEmpty")) return Promise.resolve("");
+						return getDataUrl$1(scope, {
+							type,
+							quality
+						});
+					}
+				});
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/machines/signature-pad/signature-pad.props.ts
+const props = require_create_props.createProps()([
+	"defaultPaths",
+	"dir",
+	"disabled",
+	"drawing",
+	"getRootNode",
+	"id",
+	"ids",
+	"name",
+	"onDraw",
+	"onDrawEnd",
+	"paths",
+	"readOnly",
+	"required",
+	"translations"
+]);
+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/signature-pad/index.d.cts

@@ -0,0 +1,108 @@
+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";
+import { StrokeOptions } from "perfect-freehand";
+
+//#region src/machines/signature-pad/signature-pad.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "segment" | "segmentPath" | "guide" | "clearTrigger">;
+//#endregion
+//#region src/machines/signature-pad/signature-pad.types.d.ts
+interface Point {
+  x: number;
+  y: number;
+  pressure: number;
+}
+interface DrawDetails {
+  paths: string[];
+}
+interface DrawingOptions extends StrokeOptions {
+  fill?: string | undefined;
+}
+type DataUrlType = "image/png" | "image/jpeg" | "image/svg+xml";
+interface DrawEndDetails {
+  paths: string[];
+  getDataUrl: (type: DataUrlType, quality?: number) => Promise<string>;
+}
+interface DataUrlOptions {
+  type: DataUrlType;
+  quality?: number | undefined;
+}
+type ElementIds = Partial<{
+  root: string;
+  control: string;
+  hiddenInput: string;
+  label: string;
+}>;
+interface IntlTranslations {
+  clearTrigger: string;
+  control: string;
+}
+interface SignaturePadProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  translations?: IntlTranslations | undefined;
+  onDraw?: ((details: DrawDetails) => void) | undefined;
+  onDrawEnd?: ((details: DrawEndDetails) => void) | undefined;
+  drawing?: DrawingOptions | undefined;
+  disabled?: boolean | undefined;
+  required?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  name?: string | undefined;
+  defaultPaths?: string[] | undefined;
+  paths?: string[] | undefined;
+}
+type PropsWithDefault = "drawing" | "translations";
+interface PrivateContext {
+  paths: string[];
+  currentPoints: Point[];
+  currentPath: string | null;
+}
+type ComputedContext = Readonly<{
+  isInteractive: boolean;
+  isEmpty: boolean;
+}>;
+interface SignaturePadSchema {
+  state: "idle" | "drawing";
+  props: RequiredBy<SignaturePadProps, PropsWithDefault>;
+  context: PrivateContext;
+  computed: ComputedContext;
+  action: string;
+  event: EventObject;
+  effect: string;
+  guard: string;
+}
+type SignaturePadService = Service<SignaturePadSchema>;
+type SignaturePadMachine = Machine<SignaturePadSchema>;
+interface SegmentPathProps {
+  path: string;
+}
+interface HiddenInputProps {
+  value: string;
+}
+interface SignaturePadApi<T extends PropTypes = PropTypes> {
+  empty: boolean;
+  drawing: boolean;
+  currentPath: string | null;
+  paths: string[];
+  getDataUrl: (type: DataUrlType, quality?: number) => Promise<string>;
+  clear: VoidFunction;
+  getLabelProps: () => T["element"];
+  getRootProps: () => T["element"];
+  getControlProps: () => T["element"];
+  getSegmentProps: () => T["svg"];
+  getSegmentPathProps: (props: SegmentPathProps) => T["path"];
+  getHiddenInputProps: (props: HiddenInputProps) => T["input"];
+  getGuideProps: () => T["element"];
+  getClearTriggerProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/signature-pad/signature-pad.connect.d.ts
+declare function connect<T extends PropTypes>(service: SignaturePadService, normalize: NormalizeProps<T>): SignaturePadApi<T>;
+//#endregion
+//#region src/machines/signature-pad/signature-pad.machine.d.ts
+declare const machine: Machine<SignaturePadSchema>;
+//#endregion
+//#region src/machines/signature-pad/signature-pad.props.d.ts
+declare const props: (keyof SignaturePadProps)[];
+declare const splitProps: <Props extends Partial<SignaturePadProps>>(props: Props) => [Partial<SignaturePadProps>, Omit<Props, keyof SignaturePadProps>];
+//#endregion
+export { type SignaturePadApi as Api, type DataUrlOptions, type DataUrlType, type DrawDetails, type DrawEndDetails, type DrawingOptions, type ElementIds, type HiddenInputProps, type IntlTranslations, type SignaturePadMachine as Machine, type Point, type SignaturePadProps as Props, type SegmentPathProps, type SignaturePadService as Service, type StrokeOptions, anatomy, connect, machine, props, splitProps };

package/dist/machines/signature-pad/index.d.mts

@@ -0,0 +1,108 @@
+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";
+import { StrokeOptions } from "perfect-freehand";
+
+//#region src/machines/signature-pad/signature-pad.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "segment" | "segmentPath" | "guide" | "clearTrigger">;
+//#endregion
+//#region src/machines/signature-pad/signature-pad.types.d.ts
+interface Point {
+  x: number;
+  y: number;
+  pressure: number;
+}
+interface DrawDetails {
+  paths: string[];
+}
+interface DrawingOptions extends StrokeOptions {
+  fill?: string | undefined;
+}
+type DataUrlType = "image/png" | "image/jpeg" | "image/svg+xml";
+interface DrawEndDetails {
+  paths: string[];
+  getDataUrl: (type: DataUrlType, quality?: number) => Promise<string>;
+}
+interface DataUrlOptions {
+  type: DataUrlType;
+  quality?: number | undefined;
+}
+type ElementIds = Partial<{
+  root: string;
+  control: string;
+  hiddenInput: string;
+  label: string;
+}>;
+interface IntlTranslations {
+  clearTrigger: string;
+  control: string;
+}
+interface SignaturePadProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  translations?: IntlTranslations | undefined;
+  onDraw?: ((details: DrawDetails) => void) | undefined;
+  onDrawEnd?: ((details: DrawEndDetails) => void) | undefined;
+  drawing?: DrawingOptions | undefined;
+  disabled?: boolean | undefined;
+  required?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  name?: string | undefined;
+  defaultPaths?: string[] | undefined;
+  paths?: string[] | undefined;
+}
+type PropsWithDefault = "drawing" | "translations";
+interface PrivateContext {
+  paths: string[];
+  currentPoints: Point[];
+  currentPath: string | null;
+}
+type ComputedContext = Readonly<{
+  isInteractive: boolean;
+  isEmpty: boolean;
+}>;
+interface SignaturePadSchema {
+  state: "idle" | "drawing";
+  props: RequiredBy<SignaturePadProps, PropsWithDefault>;
+  context: PrivateContext;
+  computed: ComputedContext;
+  action: string;
+  event: EventObject;
+  effect: string;
+  guard: string;
+}
+type SignaturePadService = Service<SignaturePadSchema>;
+type SignaturePadMachine = Machine<SignaturePadSchema>;
+interface SegmentPathProps {
+  path: string;
+}
+interface HiddenInputProps {
+  value: string;
+}
+interface SignaturePadApi<T extends PropTypes = PropTypes> {
+  empty: boolean;
+  drawing: boolean;
+  currentPath: string | null;
+  paths: string[];
+  getDataUrl: (type: DataUrlType, quality?: number) => Promise<string>;
+  clear: VoidFunction;
+  getLabelProps: () => T["element"];
+  getRootProps: () => T["element"];
+  getControlProps: () => T["element"];
+  getSegmentProps: () => T["svg"];
+  getSegmentPathProps: (props: SegmentPathProps) => T["path"];
+  getHiddenInputProps: (props: HiddenInputProps) => T["input"];
+  getGuideProps: () => T["element"];
+  getClearTriggerProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/signature-pad/signature-pad.connect.d.ts
+declare function connect<T extends PropTypes>(service: SignaturePadService, normalize: NormalizeProps<T>): SignaturePadApi<T>;
+//#endregion
+//#region src/machines/signature-pad/signature-pad.machine.d.ts
+declare const machine: Machine<SignaturePadSchema>;
+//#endregion
+//#region src/machines/signature-pad/signature-pad.props.d.ts
+declare const props: (keyof SignaturePadProps)[];
+declare const splitProps: <Props extends Partial<SignaturePadProps>>(props: Props) => [Partial<SignaturePadProps>, Omit<Props, keyof SignaturePadProps>];
+//#endregion
+export { type SignaturePadApi as Api, type DataUrlOptions, type DataUrlType, type DrawDetails, type DrawEndDetails, type DrawingOptions, type ElementIds, type HiddenInputProps, type IntlTranslations, type SignaturePadMachine as Machine, type Point, type SignaturePadProps as Props, type SegmentPathProps, type SignaturePadService as Service, type StrokeOptions, anatomy, connect, machine, props, splitProps };