@sprawlify/primitives 0.0.1

package/dist/machines/progress/index.mjs

@@ -0,0 +1,284 @@
+import { t as createAnatomy } from "../../create-anatomy-BbDZbHpC.mjs";
+import "../../dom-query-DFCRhyj1.mjs";
+import { T as getValuePercent, ot as isNumber, u as createSplitProps } 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/progress/progress.anatomy.ts
+const anatomy = createAnatomy("progress").parts("root", "label", "track", "range", "valueText", "view", "circle", "circleTrack", "circleRange");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/progress/progress.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `progress:${ctx.id}`;
+const getTrackId = (ctx) => ctx.ids?.track ?? `progress:${ctx.id}:track`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `progress:${ctx.id}:label`;
+const getCircleId = (ctx) => ctx.ids?.circle ?? `progress:${ctx.id}:circle`;
+
+//#endregion
+//#region src/machines/progress/progress.connect.ts
+function connect(service, normalize) {
+	const { context, computed, prop, send, scope } = service;
+	const percent = computed("percent");
+	const percentAsString = computed("isIndeterminate") ? "" : computed("formatter").format(percent / 100);
+	const max = prop("max");
+	const min = prop("min");
+	const orientation = prop("orientation");
+	const translations = prop("translations");
+	const indeterminate = computed("isIndeterminate");
+	const value = context.get("value");
+	const valueAsString = translations?.value({
+		value,
+		max,
+		percent,
+		min,
+		formatter: computed("formatter")
+	}) ?? "";
+	const progressState = getProgressState(value, max);
+	const progressbarProps = {
+		role: "progressbar",
+		"aria-label": valueAsString,
+		"data-max": max,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": value ?? void 0,
+		"data-orientation": orientation,
+		"data-state": progressState
+	};
+	const circleProps$1 = getCircleProps(service);
+	return {
+		value,
+		valueAsString,
+		min,
+		max,
+		percent,
+		percentAsString,
+		indeterminate,
+		setValue(value$1) {
+			send({
+				type: "VALUE.SET",
+				value: value$1
+			});
+		},
+		setToMax() {
+			send({
+				type: "VALUE.SET",
+				value: max
+			});
+		},
+		setToMin() {
+			send({
+				type: "VALUE.SET",
+				value: min
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				...parts.root.attrs,
+				id: getRootId(scope),
+				"data-max": max,
+				"data-value": value ?? void 0,
+				"data-state": progressState,
+				"data-orientation": orientation,
+				style: { "--percent": indeterminate ? void 0 : percent }
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				id: getLabelId(scope),
+				...parts.label.attrs,
+				"data-orientation": orientation
+			});
+		},
+		getValueTextProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				"aria-live": "polite",
+				...parts.valueText.attrs
+			});
+		},
+		getTrackProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				id: getTrackId(scope),
+				...parts.track.attrs,
+				...progressbarProps
+			});
+		},
+		getRangeProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				...parts.range.attrs,
+				"data-orientation": orientation,
+				"data-state": progressState,
+				style: { [computed("isHorizontal") ? "width" : "height"]: indeterminate ? void 0 : `${percent}%` }
+			});
+		},
+		getCircleProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				id: getCircleId(scope),
+				...parts.circle.attrs,
+				...progressbarProps,
+				...circleProps$1.root
+			});
+		},
+		getCircleTrackProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				"data-orientation": orientation,
+				...parts.circleTrack.attrs,
+				...circleProps$1.track
+			});
+		},
+		getCircleRangeProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				...parts.circleRange.attrs,
+				...circleProps$1.range,
+				"data-state": progressState
+			});
+		},
+		getViewProps(props$1) {
+			return normalize.element({
+				dir: prop("dir"),
+				...parts.view.attrs,
+				"data-state": props$1.state,
+				hidden: props$1.state !== progressState
+			});
+		}
+	};
+}
+function getProgressState(value, maxValue) {
+	return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
+}
+const circleProps = { style: {
+	"--radius": "calc(var(--size) / 2 - var(--thickness) / 2)",
+	cx: "calc(var(--size) / 2)",
+	cy: "calc(var(--size) / 2)",
+	r: "var(--radius)",
+	fill: "transparent",
+	strokeWidth: "var(--thickness)"
+} };
+const rootProps = { style: {
+	width: "var(--size)",
+	height: "var(--size)"
+} };
+function getCircleProps(service) {
+	const { context, computed } = service;
+	return {
+		root: rootProps,
+		track: circleProps,
+		range: {
+			opacity: context.get("value") === 0 ? 0 : void 0,
+			style: {
+				...circleProps.style,
+				"--percent": computed("percent"),
+				"--circumference": `calc(2 * 3.14159 * var(--radius))`,
+				"--offset": `calc(var(--circumference) * (100 - var(--percent)) / 100)`,
+				strokeDashoffset: `calc(var(--circumference) * ((100 - var(--percent)) / 100))`,
+				strokeDasharray: computed("isIndeterminate") ? void 0 : `var(--circumference)`,
+				transformOrigin: "center",
+				transform: "rotate(-90deg)"
+			}
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/progress/progress.machine.ts
+const machine = createMachine({
+	props({ props: props$1 }) {
+		const min = props$1.min ?? 0;
+		const max = props$1.max ?? 100;
+		return {
+			orientation: "horizontal",
+			...props$1,
+			max,
+			min,
+			defaultValue: props$1.defaultValue !== void 0 ? props$1.defaultValue : midValue(min, max),
+			formatOptions: {
+				style: "percent",
+				...props$1.formatOptions
+			},
+			translations: {
+				value: ({ value, percent, formatter }) => {
+					if (value === null) return "loading...";
+					if (formatter) {
+						const num = formatter.resolvedOptions().style === "percent" ? percent / 100 : value;
+						return formatter.format(num);
+					}
+					return value.toString();
+				},
+				...props$1.translations
+			}
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	entry: ["validateContext"],
+	context({ bindable, prop }) {
+		return { value: bindable(() => ({
+			defaultValue: prop("defaultValue"),
+			value: prop("value"),
+			onChange(value) {
+				prop("onValueChange")?.({ value });
+			}
+		})) };
+	},
+	computed: {
+		isIndeterminate: ({ context }) => context.get("value") === null,
+		percent({ context, prop }) {
+			const value = context.get("value");
+			if (!isNumber(value)) return -1;
+			return getValuePercent(value, prop("min"), prop("max")) * 100;
+		},
+		formatter: memo(({ prop }) => [prop("locale"), prop("formatOptions")], ([locale, formatOptions]) => new Intl.NumberFormat(locale, formatOptions)),
+		isHorizontal: ({ prop }) => prop("orientation") === "horizontal"
+	},
+	states: { idle: { on: { "VALUE.SET": { actions: ["setValue"] } } } },
+	implementations: { actions: {
+		setValue: ({ context, event, prop }) => {
+			const value = event.value === null ? null : Math.max(0, Math.min(event.value, prop("max")));
+			context.set("value", value);
+		},
+		validateContext: ({ context, prop }) => {
+			const max = prop("max");
+			const min = prop("min");
+			const value = context.get("value");
+			if (value == null) return;
+			if (!isValidNumber(max)) throw new Error(`[progress] The max value passed \`${max}\` is not a valid number`);
+			if (!isValidMax(value, max)) throw new Error(`[progress] The value passed \`${value}\` exceeds the max value \`${max}\``);
+			if (!isValidMin(value, min)) throw new Error(`[progress] The value passed \`${value}\` exceeds the min value \`${min}\``);
+		}
+	} }
+});
+const isValidNumber = (max) => isNumber(max) && !isNaN(max);
+const isValidMax = (value, max) => isValidNumber(value) && value <= max;
+const isValidMin = (value, min) => isValidNumber(value) && value >= min;
+const midValue = (min, max) => min + (max - min) / 2;
+
+//#endregion
+//#region src/machines/progress/progress.props.ts
+const props = createProps()([
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"max",
+	"min",
+	"orientation",
+	"translations",
+	"value",
+	"onValueChange",
+	"defaultValue",
+	"formatOptions",
+	"locale"
+]);
+const splitProps = createSplitProps(props);
+
+//#endregion
+export { anatomy, connect, machine, props, splitProps };

package/dist/machines/qr-code/index.cjs

@@ -0,0 +1,172 @@
+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 uqr = require("uqr");
+
+//#region src/machines/qr-code/qr-code.anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("qr-code").parts("root", "frame", "pattern", "overlay", "downloadTrigger");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/qr-code/qr-code.dom.ts
+const getRootId = (scope) => scope.ids?.root ?? `qrcode:${scope.id}:root`;
+const getFrameId = (scope) => scope.ids?.frame ?? `qrcode:${scope.id}:frame`;
+const getFrameEl = (scope) => scope.getById(getFrameId(scope));
+
+//#endregion
+//#region src/machines/qr-code/qr-code.connect.ts
+function connect(service, normalize) {
+	const { context, computed, send, scope, prop } = service;
+	const encoded = computed("encoded");
+	const pixelSize = prop("pixelSize");
+	const height = encoded.size * pixelSize;
+	const width = encoded.size * pixelSize;
+	const paths = [];
+	for (let row = 0; row < encoded.size; row++) for (let col = 0; col < encoded.size; col++) {
+		const x = col * pixelSize;
+		const y = row * pixelSize;
+		if (encoded.data[row][col]) paths.push(`M${x},${y}h${pixelSize}v${pixelSize}h-${pixelSize}z`);
+	}
+	return {
+		value: context.get("value"),
+		setValue(value) {
+			send({
+				type: "VALUE.SET",
+				value
+			});
+		},
+		getDataUrl(type, quality) {
+			return require_dom_query.getDataUrl(getFrameEl(scope), {
+				type,
+				quality
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				id: getRootId(scope),
+				...parts.root.attrs,
+				style: {
+					"--qrcode-pixel-size": `${pixelSize}px`,
+					"--qrcode-width": `${width}px`,
+					"--qrcode-height": `${height}px`,
+					position: "relative"
+				}
+			});
+		},
+		getFrameProps() {
+			return normalize.svg({
+				id: getFrameId(scope),
+				...parts.frame.attrs,
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: `0 0 ${width} ${height}`
+			});
+		},
+		getPatternProps() {
+			return normalize.path({
+				d: paths.join(""),
+				...parts.pattern.attrs
+			});
+		},
+		getOverlayProps() {
+			return normalize.element({
+				...parts.overlay.attrs,
+				style: {
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					translate: "-50% -50%"
+				}
+			});
+		},
+		getDownloadTriggerProps(props$1) {
+			return normalize.button({
+				type: "button",
+				...parts.downloadTrigger.attrs,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({
+						type: "DOWNLOAD_TRIGGER.CLICK",
+						...props$1
+					});
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/qr-code/qr-code.machine.ts
+const machine = require_core.createMachine({
+	props({ props: props$1 }) {
+		return {
+			defaultValue: "",
+			pixelSize: 10,
+			...props$1
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return { value: bindable(() => ({
+			value: prop("value"),
+			defaultValue: prop("defaultValue"),
+			onChange(value) {
+				prop("onValueChange")?.({ value });
+			}
+		})) };
+	},
+	computed: { encoded: require_core.memo(({ context, prop }) => [context.get("value"), prop("encoding")], ([value, encoding]) => (0, uqr.encode)(value, encoding)) },
+	states: { idle: { on: {
+		"VALUE.SET": { actions: ["setValue"] },
+		"DOWNLOAD_TRIGGER.CLICK": { actions: ["downloadQrCode"] }
+	} } },
+	implementations: { actions: {
+		setValue({ context, event }) {
+			context.set("value", event.value);
+		},
+		downloadQrCode({ event, scope }) {
+			const { mimeType, quality, fileName } = event;
+			const svgEl = getFrameEl(scope);
+			const doc = scope.getDoc();
+			require_dom_query.getDataUrl(svgEl, {
+				type: mimeType,
+				quality
+			}).then((dataUri) => {
+				const a = doc.createElement("a");
+				a.href = dataUri;
+				a.rel = "noopener";
+				a.download = fileName;
+				a.click();
+				setTimeout(() => {
+					a.remove();
+				}, 0);
+			});
+		}
+	} }
+});
+
+//#endregion
+//#region src/machines/qr-code/qr-code.props.ts
+const props = require_create_props.createProps()([
+	"ids",
+	"defaultValue",
+	"value",
+	"id",
+	"encoding",
+	"dir",
+	"getRootNode",
+	"onValueChange",
+	"pixelSize"
+]);
+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/qr-code/index.d.cts

@@ -0,0 +1,70 @@
+import { n as AnatomyInstance } from "../../create-anatomy-BGQ8pv8J.cjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu60O.cjs";
+import { n as DataUrlType } from "../../data-url-C3ITPVRX.cjs";
+import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+import { QrCodeGenerateOptions, QrCodeGenerateOptions as QrCodeGenerateOptions$1, QrCodeGenerateResult, QrCodeGenerateResult as QrCodeGenerateResult$1 } from "uqr";
+
+//#region src/machines/qr-code/qr-code.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "pattern" | "frame" | "overlay" | "downloadTrigger">;
+//#endregion
+//#region src/machines/qr-code/qr-code.types.d.ts
+interface ValueChangeDetails {
+  value: string;
+}
+type ElementIds = Partial<{
+  root: string;
+  frame: string;
+}>;
+interface QrCodeProps extends DirectionProperty, CommonProperties {
+  value?: string | undefined;
+  defaultValue?: string | undefined;
+  ids?: ElementIds | undefined;
+  encoding?: QrCodeGenerateOptions$1 | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  pixelSize?: number | undefined;
+}
+type PropsWithDefault = "pixelSize" | "defaultValue";
+type Computed = Readonly<{
+  encoded: QrCodeGenerateResult$1;
+}>;
+interface QrCodeSchema {
+  props: RequiredBy<QrCodeProps, PropsWithDefault>;
+  context: {
+    value: string;
+  };
+  computed: Computed;
+  state: "idle";
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type QrCodeService = Service<QrCodeSchema>;
+type QrCodeMachine = Machine<QrCodeSchema>;
+interface DownloadTriggerProps {
+  mimeType: DataUrlType;
+  quality?: number | undefined;
+  fileName: string;
+}
+interface QrCodeApi<T extends PropTypes = PropTypes> {
+  value: string;
+  setValue: (value: string) => void;
+  getDataUrl: (type: DataUrlType, quality?: number) => Promise<string>;
+  getRootProps: () => T["element"];
+  getFrameProps: () => T["svg"];
+  getPatternProps: () => T["path"];
+  getOverlayProps: () => T["element"];
+  getDownloadTriggerProps: (props: DownloadTriggerProps) => T["button"];
+}
+//#endregion
+//#region src/machines/qr-code/qr-code.connect.d.ts
+declare function connect<T extends PropTypes>(service: QrCodeService, normalize: NormalizeProps<T>): QrCodeApi<T>;
+//#endregion
+//#region src/machines/qr-code/qr-code.machine.d.ts
+declare const machine: Machine<QrCodeSchema>;
+//#endregion
+//#region src/machines/qr-code/qr-code.props.d.ts
+declare const props: (keyof QrCodeProps)[];
+declare const splitProps: <Props extends Partial<QrCodeProps>>(props: Props) => [Partial<QrCodeProps>, Omit<Props, keyof QrCodeProps>];
+//#endregion
+export { type QrCodeApi as Api, type DownloadTriggerProps, type ElementIds, type QrCodeMachine as Machine, type QrCodeProps as Props, type QrCodeGenerateOptions, type QrCodeGenerateResult, type QrCodeService as Service, type ValueChangeDetails, anatomy, connect, machine, props, splitProps };

package/dist/machines/qr-code/index.d.mts

@@ -0,0 +1,70 @@
+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 { n as DataUrlType } from "../../data-url-DLwZ9M77.mjs";
+import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-C0MKXQmE.mjs";
+import { QrCodeGenerateOptions, QrCodeGenerateOptions as QrCodeGenerateOptions$1, QrCodeGenerateResult, QrCodeGenerateResult as QrCodeGenerateResult$1 } from "uqr";
+
+//#region src/machines/qr-code/qr-code.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "pattern" | "frame" | "overlay" | "downloadTrigger">;
+//#endregion
+//#region src/machines/qr-code/qr-code.types.d.ts
+interface ValueChangeDetails {
+  value: string;
+}
+type ElementIds = Partial<{
+  root: string;
+  frame: string;
+}>;
+interface QrCodeProps extends DirectionProperty, CommonProperties {
+  value?: string | undefined;
+  defaultValue?: string | undefined;
+  ids?: ElementIds | undefined;
+  encoding?: QrCodeGenerateOptions$1 | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  pixelSize?: number | undefined;
+}
+type PropsWithDefault = "pixelSize" | "defaultValue";
+type Computed = Readonly<{
+  encoded: QrCodeGenerateResult$1;
+}>;
+interface QrCodeSchema {
+  props: RequiredBy<QrCodeProps, PropsWithDefault>;
+  context: {
+    value: string;
+  };
+  computed: Computed;
+  state: "idle";
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type QrCodeService = Service<QrCodeSchema>;
+type QrCodeMachine = Machine<QrCodeSchema>;
+interface DownloadTriggerProps {
+  mimeType: DataUrlType;
+  quality?: number | undefined;
+  fileName: string;
+}
+interface QrCodeApi<T extends PropTypes = PropTypes> {
+  value: string;
+  setValue: (value: string) => void;
+  getDataUrl: (type: DataUrlType, quality?: number) => Promise<string>;
+  getRootProps: () => T["element"];
+  getFrameProps: () => T["svg"];
+  getPatternProps: () => T["path"];
+  getOverlayProps: () => T["element"];
+  getDownloadTriggerProps: (props: DownloadTriggerProps) => T["button"];
+}
+//#endregion
+//#region src/machines/qr-code/qr-code.connect.d.ts
+declare function connect<T extends PropTypes>(service: QrCodeService, normalize: NormalizeProps<T>): QrCodeApi<T>;
+//#endregion
+//#region src/machines/qr-code/qr-code.machine.d.ts
+declare const machine: Machine<QrCodeSchema>;
+//#endregion
+//#region src/machines/qr-code/qr-code.props.d.ts
+declare const props: (keyof QrCodeProps)[];
+declare const splitProps: <Props extends Partial<QrCodeProps>>(props: Props) => [Partial<QrCodeProps>, Omit<Props, keyof QrCodeProps>];
+//#endregion
+export { type QrCodeApi as Api, type DownloadTriggerProps, type ElementIds, type QrCodeMachine as Machine, type QrCodeProps as Props, type QrCodeGenerateOptions, type QrCodeGenerateResult, type QrCodeService as Service, type ValueChangeDetails, anatomy, connect, machine, props, splitProps };