@monimesl/dot-renderer-react 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/components/carousel.js

@@ -0,0 +1,254 @@
+import { useTheme } from "../theme.js";
+import { SPACE } from "./tokens.js";
+import { paddingStyle } from "./padding.js";
+import { clamp } from "./utils.js";
+import { createEvent } from "@monimesl/dot-core";
+import { Children, Fragment, isValidElement, useEffect, useEffectEvent, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/carousel.tsx
+const SLIDE_DURATION = 350;
+const SLIDE_EASING = "cubic-bezier(0.22, 0.61, 0.36, 1)";
+const SWIPE_DISTANCE = .2;
+const SWIPE_SPEED = .4;
+const EDGE_RESISTANCE = .3;
+const TAP_SLOP = 6;
+const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator = "dots", gap = "none", effect = "slide", index, onChange, children, ...padding }) => {
+	const { colors } = useTheme();
+	const slides = slidesOf(children);
+	const count = slides.length;
+	const looping = loop && count > 1;
+	const first = looping ? 1 : 0;
+	const last = looping ? count + 1 : count - 1;
+	const [position, setPosition] = useState(() => first + slideIndex(index ?? 0, count));
+	const [animated, setAnimated] = useState(true);
+	const [drag, setDrag] = useState(0);
+	const [dragging, setDragging] = useState(false);
+	const [width, setWidth] = useState(0);
+	const [previousIndex, setPreviousIndex] = useState(index);
+	const viewport = useRef(null);
+	const gesture = useRef(null);
+	const swiped = useRef(false);
+	if (index !== previousIndex) {
+		setPreviousIndex(index);
+		if (index !== void 0) {
+			setAnimated(true);
+			setPosition(first + slideIndex(index, count));
+		}
+	}
+	const shown = clamp(position, 0, last);
+	const current = count === 0 ? 0 : wrap(shown - first, count);
+	const moveTo = (target) => {
+		const next = clamp(target, 0, last);
+		setAnimated(true);
+		setPosition(next);
+		const nextIndex = wrap(next - first, count);
+		if (nextIndex !== current) onChange?.(createEvent("change", { index: nextIndex }));
+	};
+	const step = (direction) => {
+		const beyondEnd = current + direction < 0 || current + direction >= count;
+		if (!looping && beyondEnd) moveTo(shown);
+		else moveTo(shown + direction);
+	};
+	const advance = useEffectEvent(() => {
+		if (!looping && current === count - 1) moveTo(first);
+		else moveTo(shown + 1);
+	});
+	useEffect(() => {
+		if (!autoplay || count < 2 || dragging) return;
+		const timer = setTimeout(advance, interval);
+		return () => clearTimeout(timer);
+	}, [
+		autoplay,
+		count,
+		dragging,
+		interval,
+		current
+	]);
+	useEffect(() => {
+		if (!looping || position !== 0 && position !== count + 1) return;
+		const timer = setTimeout(() => {
+			setAnimated(false);
+			setPosition(position === 0 ? count : 1);
+		}, SLIDE_DURATION);
+		return () => clearTimeout(timer);
+	}, [
+		looping,
+		position,
+		count
+	]);
+	const gestureOf = (event) => {
+		const inProgress = gesture.current;
+		return inProgress?.pointerId === event.pointerId ? inProgress : null;
+	};
+	const endGesture = () => {
+		gesture.current = null;
+		setDragging(false);
+		setDrag(0);
+		setAnimated(true);
+	};
+	const onPointerDown = (event) => {
+		if (count < 2 || !event.isPrimary) return;
+		gesture.current = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY,
+			startTime: event.timeStamp,
+			swiping: false
+		};
+		swiped.current = false;
+		setDragging(true);
+		setWidth(viewport.current?.clientWidth ?? 0);
+	};
+	const onPointerMove = (event) => {
+		const swipe = gestureOf(event);
+		if (!swipe) return;
+		const movedX = event.clientX - swipe.startX;
+		const movedY = event.clientY - swipe.startY;
+		if (!swipe.swiping) {
+			if (Math.abs(movedX) < TAP_SLOP && Math.abs(movedY) < TAP_SLOP) return;
+			if (Math.abs(movedY) > Math.abs(movedX)) {
+				endGesture();
+				return;
+			}
+			swipe.swiping = true;
+			swiped.current = true;
+			event.currentTarget.setPointerCapture?.(event.pointerId);
+			setAnimated(false);
+		}
+		const beforeFirst = current === 0 && movedX > 0;
+		const afterLast = current === count - 1 && movedX < 0;
+		setDrag(!looping && (beforeFirst || afterLast) ? movedX * EDGE_RESISTANCE : movedX);
+	};
+	const onPointerUp = (event) => {
+		const swipe = gestureOf(event);
+		if (!swipe) return;
+		endGesture();
+		if (!swipe.swiping) return;
+		const movedX = event.clientX - swipe.startX;
+		const speed = Math.abs(movedX) / Math.max(1, event.timeStamp - swipe.startTime);
+		if (Math.abs(movedX) > width * SWIPE_DISTANCE || speed > SWIPE_SPEED) step(movedX < 0 ? 1 : -1);
+		else moveTo(shown);
+	};
+	const gapWidth = SPACE[gap];
+	const transition = animated ? `transform ${SLIDE_DURATION}ms ${SLIDE_EASING}` : "none";
+	const swipedSlides = width > 0 ? drag / (width + gapWidth) : 0;
+	const track = looping ? [
+		{
+			...slides[count - 1],
+			key: "copy-of-last"
+		},
+		...slides,
+		{
+			...slides[0],
+			key: "copy-of-first"
+		}
+	] : slides;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dot-carousel",
+		role: "region",
+		"aria-roledescription": "carousel",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: SPACE.medium,
+			minWidth: 0,
+			...paddingStyle(padding)
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: viewport,
+			onPointerDown,
+			onPointerMove,
+			onPointerUp,
+			onPointerCancel: endGesture,
+			onDragStart: (event) => event.preventDefault(),
+			onClickCapture: (event) => {
+				if (swiped.current) {
+					swiped.current = false;
+					event.stopPropagation();
+				}
+			},
+			style: {
+				overflow: "hidden",
+				touchAction: "pan-y",
+				userSelect: dragging ? "none" : void 0
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					gap: gapWidth,
+					transform: `translateX(calc(${-shown} * (100% + ${gapWidth}px) + ${drag}px))`,
+					transition
+				},
+				children: track.map((slide, trackPosition) => {
+					const visible = trackPosition === shown;
+					const distance = Math.abs(trackPosition - shown + swipedSlides);
+					const scale = 1 - Math.min(distance, 1) * .15000000000000002;
+					return /* @__PURE__ */ jsx("div", {
+						role: "group",
+						"aria-roledescription": "slide",
+						"aria-label": `${wrap(trackPosition - first, count) + 1} of ${count}`,
+						"aria-hidden": !visible,
+						inert: !visible,
+						style: {
+							display: "grid",
+							flex: "0 0 100%",
+							minWidth: 0,
+							transform: effect === "scale" ? `scale(${scale})` : void 0,
+							transition: effect === "scale" ? transition : void 0
+						},
+						children: slide.node
+					}, slide.key);
+				})
+			})
+		}), indicator === "dots" && count > 1 ? /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				justifyContent: "center"
+			},
+			children: slides.map((slide, slideIndex) => {
+				const active = slideIndex === current;
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": `Slide ${slideIndex + 1} of ${count}`,
+					"aria-current": active,
+					onClick: () => moveTo(first + slideIndex),
+					style: {
+						padding: "6px 3px",
+						border: "none",
+						background: "none",
+						cursor: "pointer"
+					},
+					children: /* @__PURE__ */ jsx("span", { style: {
+						display: "block",
+						width: active ? 18 : 6,
+						height: 6,
+						borderRadius: 3,
+						background: active ? colors.primary : colors.subtle,
+						transition: "width 0.3s, background 0.3s"
+					} })
+				}, slide.key);
+			})
+		}) : null]
+	});
+};
+function slidesOf(children, keyPrefix = "") {
+	const slides = [];
+	for (const child of Children.toArray(children)) {
+		if (!isValidElement(child)) continue;
+		const key = `${keyPrefix}${String(child.key)}`;
+		if (child.type === Fragment) slides.push(...slidesOf(child.props.children, `${key}/`));
+		else slides.push({
+			key,
+			node: child
+		});
+	}
+	return slides;
+}
+function slideIndex(index, count) {
+	return clamp(Math.round(index), 0, count - 1);
+}
+function wrap(value, count) {
+	return (value % count + count) % count;
+}
+//#endregion
+export { Carousel$1 as Carousel };

package/dist/components/chip.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Chip } from "@monimesl/dot-core";
+//#region src/components/chip.d.ts
+declare const Chip$1: ReactComponent<typeof Chip>;
+//#endregion
+export { Chip$1 as Chip };

package/dist/components/chip.js

@@ -0,0 +1,41 @@
+import { useTheme } from "../theme.js";
+import { DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
+import { IconGraphic } from "./icon.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chip.tsx
+const Chip$1 = ({ label, icon, selected = false, disabled, onTap }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "dot-chip",
+		"aria-pressed": selected,
+		disabled,
+		onClick: onTap ? () => onTap(createEvent("tap")) : void 0,
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 6,
+			flexShrink: 0,
+			minHeight: 34,
+			padding: "0 14px",
+			borderRadius: 17,
+			border: `1px solid ${selected ? colors.primary : colors.border}`,
+			background: selected ? colors.primary : colors.surface,
+			color: selected ? colors.onPrimary : colors.text,
+			fontSize: FONT_SIZE.caption,
+			fontWeight: WEIGHTS.medium,
+			lineHeight: "normal",
+			whiteSpace: "nowrap",
+			opacity: disabled ? DISABLED_OPACITY : 1,
+			cursor: disabled ? "default" : "pointer"
+		},
+		children: [icon ? /* @__PURE__ */ jsx(IconGraphic, {
+			name: icon,
+			size: ICON_SIZE.small,
+			color: "currentColor"
+		}) : null, label]
+	});
+};
+//#endregion
+export { Chip$1 as Chip };

package/dist/components/code-input.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { CodeInput } from "@monimesl/dot-core";
+//#region src/components/code-input.d.ts
+declare const CodeInput$1: ReactComponent<typeof CodeInput>;
+//#endregion
+export { CodeInput$1 as CodeInput };

package/dist/components/code-input.js

@@ -0,0 +1,97 @@
+import { useTheme } from "../theme.js";
+import { DISABLED_OPACITY, SPACE, WEIGHTS } from "./tokens.js";
+import { Field } from "./field.js";
+import { fieldBorderColor, useFieldNote } from "./field-box.js";
+import { useTypedText } from "./typed-text.js";
+import { createEvent } from "@monimesl/dot-core";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/code-input.tsx
+const CodeInput$1 = ({ value, length = 6, label, hint, error, secure, disabled, onChange, onComplete }) => {
+	const { colors, radius } = useTheme();
+	const [text, typeText] = useTypedText(value, onChange !== void 0);
+	const [focused, setFocused] = useState(false);
+	const { noteId, controlAttributes } = useFieldNote(hint, error);
+	const count = Math.max(1, Math.round(length));
+	const digits = text.slice(0, count);
+	const next = Math.min(digits.length, count - 1);
+	const boxes = Array.from({ length: count }, (_, index) => {
+		const digit = digits[index];
+		const borderColor = fieldBorderColor(colors, error, focused && index === next);
+		return /* @__PURE__ */ jsx("span", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "1 1 0",
+				maxWidth: 52,
+				height: 52,
+				border: `1.5px solid ${borderColor}`,
+				borderRadius: radius,
+				background: colors.surface,
+				fontSize: 22,
+				fontWeight: WEIGHTS.bold
+			},
+			children: digit !== void 0 && secure ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				style: {
+					width: 12,
+					height: 12,
+					borderRadius: "50%",
+					background: colors.text
+				}
+			}) : digit
+		}, index);
+	});
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		hint,
+		error,
+		noteId,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "dot-code-input",
+			style: {
+				position: "relative",
+				display: "flex",
+				gap: SPACE.medium,
+				color: colors.text,
+				opacity: disabled ? DISABLED_OPACITY : 1
+			},
+			children: [boxes, /* @__PURE__ */ jsx("input", {
+				value: digits,
+				inputMode: "numeric",
+				autoComplete: "one-time-code",
+				maxLength: count,
+				disabled,
+				...controlAttributes,
+				onFocus: () => setFocused(true),
+				onBlur: () => setFocused(false),
+				onSelect: (event) => {
+					const input = event.currentTarget;
+					const end = input.value.length;
+					if (input.selectionStart !== end || input.selectionEnd !== end) input.setSelectionRange(end, end);
+				},
+				onChange: (event) => {
+					const typed = event.currentTarget.value.replace(/\D/g, "").slice(0, count);
+					if (typed === digits) return;
+					typeText(typed);
+					onChange?.(createEvent("change", { value: typed }));
+					if (typed.length === count) onComplete?.(createEvent("complete", { value: typed }));
+				},
+				style: {
+					position: "absolute",
+					inset: 0,
+					width: "100%",
+					height: "100%",
+					padding: 0,
+					border: "none",
+					opacity: 0,
+					fontSize: 16,
+					cursor: disabled ? "default" : "text"
+				}
+			})]
+		})
+	});
+};
+//#endregion
+export { CodeInput$1 as CodeInput };

package/dist/components/detail-row.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { DetailRow } from "@monimesl/dot-core";
+//#region src/components/detail-row.d.ts
+declare const DetailRow$1: ReactComponent<typeof DetailRow>;
+//#endregion
+export { DetailRow$1 as DetailRow };

package/dist/components/detail-row.js

@@ -0,0 +1,40 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, WEIGHTS } from "./tokens.js";
+import { insets, paddingStyle } from "./padding.js";
+import { toneColor } from "./tones.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/detail-row.tsx
+const DetailRow = ({ label, value, tone, weight = "regular", ...padding }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dot-detail-row",
+		style: {
+			display: "flex",
+			alignItems: "baseline",
+			justifyContent: "space-between",
+			gap: 16,
+			...paddingStyle(padding, insets(6, 0)),
+			fontSize: FONT_SIZE.body,
+			lineHeight: "normal"
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			style: {
+				flexShrink: 0,
+				maxWidth: "50%",
+				color: colors.subtle
+			},
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			style: {
+				minWidth: 0,
+				textAlign: "end",
+				overflowWrap: "anywhere",
+				color: toneColor(colors, tone ?? "default"),
+				fontWeight: WEIGHTS[weight]
+			},
+			children: value
+		})]
+	});
+};
+//#endregion
+export { DetailRow };

package/dist/components/disclosure.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Disclosure } from "@monimesl/dot-core";
+//#region src/components/disclosure.d.ts
+declare const Disclosure$1: ReactComponent<typeof Disclosure>;
+//#endregion
+export { Disclosure$1 as Disclosure };

package/dist/components/disclosure.js

@@ -0,0 +1,76 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { CHEVRON_DOWN_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.js";
+import { createEvent } from "@monimesl/dot-core";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/disclosure.tsx
+const Disclosure$1 = ({ title, subtitle, open: startsOpen = false, children, onToggle }) => {
+	const { colors } = useTheme();
+	const [open, setOpen] = useState(startsOpen);
+	return /* @__PURE__ */ jsxs("details", {
+		className: "dot-disclosure",
+		open,
+		onToggle: (event) => {
+			const next = event.currentTarget.open;
+			if (next !== open) {
+				setOpen(next);
+				onToggle?.(createEvent("toggle", { open: next }));
+			}
+		},
+		style: { color: colors.text },
+		children: [/* @__PURE__ */ jsxs("summary", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: SPACE.medium,
+				padding: "12px 0",
+				cursor: "pointer"
+			},
+			children: [/* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 2,
+					flex: 1,
+					minWidth: 0
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: FONT_SIZE.body,
+						fontWeight: WEIGHTS.medium
+					},
+					children: title
+				}), subtitle ? /* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: FONT_SIZE.caption,
+						color: colors.subtle
+					},
+					children: subtitle
+				}) : null]
+			}), /* @__PURE__ */ jsx("span", {
+				style: {
+					display: "flex",
+					transform: open ? "rotate(180deg)" : "none",
+					transition: "transform 0.2s"
+				},
+				children: /* @__PURE__ */ jsx(IconSvg, {
+					artwork: CHEVRON_DOWN_ARTWORK,
+					size: ICON_SIZE.medium,
+					color: colors.subtle
+				})
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: SPACE.medium,
+				paddingBottom: 12
+			},
+			children
+		})]
+	});
+};
+//#endregion
+export { Disclosure$1 as Disclosure };

package/dist/components/divider.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Divider } from "@monimesl/dot-core";
+//#region src/components/divider.d.ts
+declare const Divider$1: ReactComponent<typeof Divider>;
+//#endregion
+export { Divider$1 as Divider };

package/dist/components/divider.js

@@ -0,0 +1,18 @@
+import { useTheme } from "../theme.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/divider.tsx
+const Divider = () => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-divider",
+		role: "separator",
+		style: {
+			alignSelf: "stretch",
+			flexShrink: 0,
+			height: 1,
+			background: colors.border
+		}
+	});
+};
+//#endregion
+export { Divider };

package/dist/components/empty-state.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { EmptyState } from "@monimesl/dot-core";
+//#region src/components/empty-state.d.ts
+declare const EmptyState$1: ReactComponent<typeof EmptyState>;
+//#endregion
+export { EmptyState$1 as EmptyState };

package/dist/components/empty-state.js

@@ -0,0 +1,66 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { insets, paddingStyle } from "./padding.js";
+import { IconGraphic } from "./icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/empty-state.tsx
+const EmptyState = ({ icon, title, text, children, ...padding }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dot-empty-state",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: SPACE.medium,
+			...paddingStyle(padding, insets(32, 16)),
+			textAlign: "center",
+			color: colors.text
+		},
+		children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					width: 64,
+					height: 64,
+					borderRadius: "50%",
+					background: colors.muted
+				},
+				children: /* @__PURE__ */ jsx(IconGraphic, {
+					name: icon,
+					size: ICON_SIZE.large,
+					color: colors.subtle
+				})
+			}) : null,
+			title ? /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: 17,
+					fontWeight: WEIGHTS.bold,
+					lineHeight: "normal"
+				},
+				children: title
+			}) : null,
+			text ? /* @__PURE__ */ jsx("span", {
+				style: {
+					maxWidth: 300,
+					fontSize: FONT_SIZE.body,
+					lineHeight: "normal",
+					color: colors.subtle
+				},
+				children: text
+			}) : null,
+			children ? /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					gap: SPACE.medium,
+					paddingTop: SPACE.small
+				},
+				children
+			}) : null
+		]
+	});
+};
+//#endregion
+export { EmptyState };

package/dist/components/feedback.d.ts

@@ -0,0 +1,8 @@
+import { ReactComponent } from "../types.js";
+import { Badge, Notice, ProgressBar } from "@monimesl/dot-core";
+//#region src/components/feedback.d.ts
+declare const ProgressBar$1: ReactComponent<typeof ProgressBar>;
+declare const Notice$1: ReactComponent<typeof Notice>;
+declare const Badge$1: ReactComponent<typeof Badge>;
+//#endregion
+export { Badge$1 as Badge, Notice$1 as Notice, ProgressBar$1 as ProgressBar };