@monimesl/dot-renderer-react 0.1.0-alpha.9 → 1.0.0-beta.0

package/dist/components/carousel.js

@@ -1,5 +1,6 @@
 import { useTheme } from "../theme.js";
 import { SPACE } from "./tokens.js";
+import { clamp } from "./numbers.js";
 import { paddingStyle } from "./padding.js";
 import { createEvent } from "@monimesl/dot-core";
 import { Children, Fragment, isValidElement, useEffect, useEffectEvent, useRef, useState } from "react";
@@ -16,40 +17,41 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 	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 firstPosition = looping ? 1 : 0;
+	const lastPosition = looping ? count + 1 : count - 1;
+	const [position, setPosition] = useState(() => firstPosition + slideIndex(index ?? 0, count));
 	const [animated, setAnimated] = useState(true);
-	const [drag, setDrag] = useState(0);
+	const [dragOffset, setDragOffset] = useState(0);
 	const [dragging, setDragging] = useState(false);
-	const [width, setWidth] = useState(0);
+	const [viewportWidth, setViewportWidth] = useState(0);
 	const [previousIndex, setPreviousIndex] = useState(index);
-	const viewport = useRef(null);
-	const gesture = useRef(null);
-	const swiped = useRef(false);
+	const viewportRef = useRef(null);
+	const gestureRef = useRef(null);
+	const ignoreNextClick = useRef(false);
 	if (index !== previousIndex) {
 		setPreviousIndex(index);
 		if (index !== void 0) {
 			setAnimated(true);
-			setPosition(first + slideIndex(index, count));
+			setPosition(firstPosition + 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);
+	const shownPosition = clamp(position, 0, lastPosition);
+	const currentIndex = count === 0 ? 0 : wrapIndex(shownPosition - firstPosition, count);
+	const moveTo = (targetPosition) => {
+		const nextPosition = clamp(targetPosition, 0, lastPosition);
 		setAnimated(true);
-		setPosition(next);
-		const nextIndex = wrap(next - first, count);
-		if (nextIndex !== current) onChange?.(createEvent("change", { index: nextIndex }));
+		setPosition(nextPosition);
+		const nextIndex = wrapIndex(nextPosition - firstPosition, count);
+		if (nextIndex !== currentIndex) onChange?.(createEvent("change", { index: nextIndex }));
 	};
-	const step = (direction) => {
-		const beyondEnd = current + direction < 0 || current + direction >= count;
-		moveTo(!looping && beyondEnd ? shown : shown + direction);
+	const stepBy = (direction) => {
+		const beyondEnd = currentIndex + direction < 0 || currentIndex + direction >= count;
+		if (!looping && beyondEnd) moveTo(shownPosition);
+		else moveTo(shownPosition + direction);
 	};
 	const advance = useEffectEvent(() => {
-		if (!looping && current === count - 1) moveTo(first);
-		else moveTo(shown + 1);
+		if (!looping && currentIndex === count - 1) moveTo(firstPosition);
+		else moveTo(shownPosition + 1);
 	});
 	useEffect(() => {
 		if (!autoplay || count < 2 || dragging) return;
@@ -60,10 +62,11 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 		count,
 		dragging,
 		interval,
-		current
+		currentIndex
 	]);
 	useEffect(() => {
-		if (!looping || position !== 0 && position !== count + 1) return;
+		const onCopy = position === 0 || position === count + 1;
+		if (!looping || !onCopy) return;
 		const timer = setTimeout(() => {
 			setAnimated(false);
 			setPosition(position === 0 ? count : 1);
@@ -75,61 +78,65 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 		count
 	]);
 	const gestureOf = (event) => {
-		const touch = gesture.current;
-		return touch?.pointerId === event.pointerId ? touch : null;
+		const inProgress = gestureRef.current;
+		return inProgress?.pointerId === event.pointerId ? inProgress : null;
 	};
 	const endGesture = () => {
-		gesture.current = null;
+		gestureRef.current = null;
 		setDragging(false);
-		setDrag(0);
+		setDragOffset(0);
 		setAnimated(true);
 	};
 	const onPointerDown = (event) => {
 		if (count < 2 || !event.isPrimary) return;
-		gesture.current = {
+		gestureRef.current = {
 			pointerId: event.pointerId,
 			startX: event.clientX,
 			startY: event.clientY,
 			startTime: event.timeStamp,
 			swiping: false
 		};
-		swiped.current = false;
+		ignoreNextClick.current = false;
 		setDragging(true);
-		setWidth(viewport.current?.clientWidth ?? 0);
+		setViewportWidth(viewportRef.current?.clientWidth ?? 0);
 	};
 	const onPointerMove = (event) => {
-		const touch = gestureOf(event);
-		if (!touch) return;
-		const dx = event.clientX - touch.startX;
-		const dy = event.clientY - touch.startY;
-		if (!touch.swiping) {
-			if (Math.abs(dx) < TAP_SLOP && Math.abs(dy) < TAP_SLOP) return;
-			if (Math.abs(dy) > Math.abs(dx)) {
+		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;
 			}
-			touch.swiping = true;
-			swiped.current = true;
+			swipe.swiping = true;
+			ignoreNextClick.current = true;
 			event.currentTarget.setPointerCapture?.(event.pointerId);
 			setAnimated(false);
 		}
-		const pastEnd = !looping && (current === 0 && dx > 0 || current === count - 1 && dx < 0);
-		setDrag(pastEnd ? dx * EDGE_RESISTANCE : dx);
+		const beforeFirst = currentIndex === 0 && movedX > 0;
+		const afterLast = currentIndex === count - 1 && movedX < 0;
+		if (!looping && (beforeFirst || afterLast)) setDragOffset(movedX * EDGE_RESISTANCE);
+		else setDragOffset(movedX);
 	};
 	const onPointerUp = (event) => {
-		const touch = gestureOf(event);
-		if (!touch) return;
+		const swipe = gestureOf(event);
+		if (!swipe) return;
 		endGesture();
-		if (!touch.swiping) return;
-		const dx = event.clientX - touch.startX;
-		const speed = Math.abs(dx) / Math.max(1, event.timeStamp - touch.startTime);
-		if (Math.abs(dx) > width * SWIPE_DISTANCE || speed > SWIPE_SPEED) step(dx < 0 ? 1 : -1);
-		else moveTo(shown);
+		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) > viewportWidth * SWIPE_DISTANCE || speed > SWIPE_SPEED) stepBy(movedX < 0 ? 1 : -1);
+		else moveTo(shownPosition);
 	};
 	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 ? [
+	let draggedSlides = 0;
+	if (viewportWidth > 0) draggedSlides = dragOffset / (viewportWidth + gapWidth);
+	let track = slides;
+	if (looping) track = [
 		{
 			...slides[count - 1],
 			key: "copy-of-last"
@@ -139,7 +146,7 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 			...slides[0],
 			key: "copy-of-first"
 		}
-	] : slides;
+	];
 	return /* @__PURE__ */ jsxs("div", {
 		className: "dot-carousel",
 		role: "region",
@@ -152,15 +159,15 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 			...paddingStyle(padding)
 		},
 		children: [/* @__PURE__ */ jsx("div", {
-			ref: viewport,
+			ref: viewportRef,
 			onPointerDown,
 			onPointerMove,
 			onPointerUp,
 			onPointerCancel: endGesture,
 			onDragStart: (event) => event.preventDefault(),
 			onClickCapture: (event) => {
-				if (swiped.current) {
-					swiped.current = false;
+				if (ignoreNextClick.current) {
+					ignoreNextClick.current = false;
 					event.stopPropagation();
 				}
 			},
@@ -173,17 +180,17 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 				style: {
 					display: "flex",
 					gap: gapWidth,
-					transform: `translateX(calc(${-shown} * (100% + ${gapWidth}px) + ${drag}px))`,
+					transform: `translateX(calc(${-shownPosition} * (100% + ${gapWidth}px) + ${dragOffset}px))`,
 					transition
 				},
 				children: track.map((slide, trackPosition) => {
-					const visible = trackPosition === shown;
-					const distance = Math.abs(trackPosition - shown + swipedSlides);
+					const visible = trackPosition === shownPosition;
+					const distance = Math.abs(trackPosition - shownPosition + draggedSlides);
 					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-label": `${wrapIndex(trackPosition - firstPosition, count) + 1} of ${count}`,
 						"aria-hidden": !visible,
 						inert: !visible,
 						style: {
@@ -202,13 +209,13 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 				display: "flex",
 				justifyContent: "center"
 			},
-			children: slides.map((slide, slideIndex) => {
-				const active = slideIndex === current;
+			children: slides.map((slide, dotIndex) => {
+				const active = dotIndex === currentIndex;
 				return /* @__PURE__ */ jsx("button", {
 					type: "button",
-					"aria-label": `Slide ${slideIndex + 1} of ${count}`,
+					"aria-label": `Slide ${dotIndex + 1} of ${count}`,
 					"aria-current": active,
-					onClick: () => moveTo(first + slideIndex),
+					onClick: () => moveTo(firstPosition + dotIndex),
 					style: {
 						padding: "6px 3px",
 						border: "none",
@@ -241,13 +248,10 @@ function slidesOf(children, keyPrefix = "") {
 	}
 	return slides;
 }
-function clamp(value, min, max) {
-	return Math.max(min, Math.min(value, max));
-}
 function slideIndex(index, count) {
 	return clamp(Math.round(index), 0, count - 1);
 }
-function wrap(value, count) {
+function wrapIndex(value, count) {
 	return (value % count + count) % count;
 }
 //#endregion

package/dist/components/code-input.js

@@ -1,8 +1,9 @@
 import { useTheme } from "../theme.js";
-import { DISABLED_OPACITY, SPACE, WEIGHTS } from "./tokens.js";
+import { CENTERED, 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 { wholeCount } from "./numbers.js";
 import { createEvent } from "@monimesl/dot-core";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,17 +13,15 @@ const CodeInput$1 = ({ value, length = 6, label, hint, error, secure, disabled,
 	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 count = wholeCount(length);
 	const digits = text.slice(0, count);
-	const next = Math.min(digits.length, count - 1);
+	const nextBox = 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);
+		const borderColor = fieldBorderColor(colors, error, focused && index === nextBox);
 		return /* @__PURE__ */ jsx("span", {
 			style: {
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
+				...CENTERED,
 				flex: "1 1 0",
 				maxWidth: 52,
 				height: 52,

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/empty-state.js

@@ -1,5 +1,5 @@
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { CENTERED, 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";
@@ -20,9 +20,7 @@ const EmptyState = ({ icon, title, text, children, ...padding }) => {
 		children: [
 			icon ? /* @__PURE__ */ jsx("span", {
 				style: {
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "center",
+					...CENTERED,
 					width: 64,
 					height: 64,
 					borderRadius: "50%",

package/dist/components/feedback.js

@@ -1,13 +1,17 @@
 import { useTheme } from "../theme.js";
 import { FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { CLOSE_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.js";
+import { clamp } from "./numbers.js";
 import { insets, paddingStyle } from "./padding.js";
-import { STATUS_ICONS, toneBackground, toneColor } from "./tones.js";
-import { IconGraphic } from "./icon.js";
+import { STATUS_ARTWORK, toneBackground, toneColor } from "./tones.js";
+import { IconButton } from "./icon-button.js";
+import { createEvent } from "@monimesl/dot-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/feedback.tsx
-const ProgressBar = ({ value = 0 }) => {
+const ProgressBar$1 = ({ value = 0 }) => {
 	const { colors } = useTheme();
-	const percent = Math.min(100, Math.max(0, value));
+	const percent = clamp(value, 0, 100);
 	return /* @__PURE__ */ jsx("div", {
 		className: "dot-progress-bar",
 		role: "progressbar",
@@ -29,7 +33,7 @@ const ProgressBar = ({ value = 0 }) => {
 		} })
 	});
 };
-const Notice = ({ tone = "default", title, children, ...padding }) => {
+const Notice$1 = ({ tone = "default", title, children, onClose, ...padding }) => {
 	const { colors, radius } = useTheme();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "dot-notice",
@@ -44,25 +48,37 @@ const Notice = ({ tone = "default", title, children, ...padding }) => {
 			fontSize: FONT_SIZE.body,
 			lineHeight: "normal"
 		},
-		children: [/* @__PURE__ */ jsx(IconGraphic, {
-			name: STATUS_ICONS[tone],
-			size: ICON_SIZE.medium,
-			color: toneColor(colors, tone)
-		}), /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				flexDirection: "column",
-				gap: 2,
-				minWidth: 0
-			},
-			children: [title ? /* @__PURE__ */ jsx("span", {
-				style: { fontWeight: WEIGHTS.bold },
-				children: title
-			}) : null, children ? /* @__PURE__ */ jsx("span", { children }) : null]
-		})]
+		children: [
+			/* @__PURE__ */ jsx(IconSvg, {
+				artwork: STATUS_ARTWORK[tone],
+				size: ICON_SIZE.medium,
+				color: toneColor(colors, tone)
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 2,
+					minWidth: 0
+				},
+				children: [title ? /* @__PURE__ */ jsx("span", {
+					style: { fontWeight: WEIGHTS.bold },
+					children: title
+				}) : null, children ? /* @__PURE__ */ jsx("span", { children }) : null]
+			}),
+			onClose ? /* @__PURE__ */ jsx(IconButton, {
+				artwork: CLOSE_ARTWORK,
+				label: "Close",
+				onPress: () => onClose(createEvent("close")),
+				style: {
+					marginLeft: "auto",
+					alignSelf: "flex-start"
+				}
+			}) : null
+		]
 	});
 };
-const Badge = ({ tone = "default", children }) => {
+const Badge$1 = ({ tone = "default", children }) => {
 	const { colors } = useTheme();
 	return /* @__PURE__ */ jsx("span", {
 		className: "dot-badge",
@@ -82,4 +98,4 @@ const Badge = ({ tone = "default", children }) => {
 	});
 };
 //#endregion
-export { Badge, Notice, ProgressBar };
+export { Badge$1 as Badge, Notice$1 as Notice, ProgressBar$1 as ProgressBar };

package/dist/components/footer.js

@@ -1,6 +1,6 @@
 import { useTheme } from "../theme.js";
 import { SPACE } from "./tokens.js";
-import { insets, paddingStyle } from "./padding.js";
+import { HOME_INDICATOR, insets, pinnedPaddingStyle } from "./padding.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/footer.tsx
 const Footer = ({ children, ...padding }) => {
@@ -14,7 +14,8 @@ const Footer = ({ children, ...padding }) => {
 			display: "flex",
 			flexDirection: "column",
 			gap: SPACE.medium,
-			...paddingStyle(padding, insets(SPACE.medium, 0)),
+			...pinnedPaddingStyle(padding, insets(SPACE.medium, 0)),
+			marginBottom: `calc(-1 * ${HOME_INDICATOR})`,
 			background: colors.background
 		},
 		children

package/dist/components/grid.js

@@ -1,5 +1,6 @@
 import { useTheme } from "../theme.js";
-import { CARD_RADIUS_SCALE, FONT_SIZE, PILL_STYLE, SPACE } from "./tokens.js";
+import { CARD_RADIUS_SCALE, CENTERED, FONT_SIZE, PILL_STYLE, SPACE } from "./tokens.js";
+import { wholeCount } from "./numbers.js";
 import { paddingStyle } from "./padding.js";
 import { IconGraphic } from "./icon.js";
 import { pressable } from "./pressable.js";
@@ -11,7 +12,7 @@ const Grid$1 = ({ columns = 4, gap = "medium", children, ...padding }) => /* @__
 	className: "dot-grid",
 	style: {
 		display: "grid",
-		gridTemplateColumns: `repeat(${Math.max(1, Math.round(columns))}, minmax(0, 1fr))`,
+		gridTemplateColumns: `repeat(${wholeCount(columns)}, minmax(0, 1fr))`,
 		gap: SPACE[gap],
 		...paddingStyle(padding)
 	},
@@ -54,9 +55,7 @@ const GridItem$1 = ({ label, icon, image, badge, onTap }) => {
 		children: [/* @__PURE__ */ jsxs("span", {
 			style: {
 				position: "relative",
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
+				...CENTERED,
 				flexShrink: 0,
 				width: TILE_SIZE,
 				height: TILE_SIZE,

package/dist/components/https.js

@@ -0,0 +1,11 @@
+//#region src/components/https.ts
+function isHttps(href) {
+	if (!href) return false;
+	try {
+		return new URL(href).protocol === "https:";
+	} catch {
+		return false;
+	}
+}
+//#endregion
+export { isHttps };