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

package/dist/color.js

@@ -1,7 +1,10 @@
 //#region src/color.ts
 const READABLE_CONTRAST = 4.5;
 function contrast(first, second) {
-	const [lighter, darker] = [luminance(first), luminance(second)].sort((a, b) => b - a);
+	const firstLuminance = luminance(first);
+	const secondLuminance = luminance(second);
+	const lighter = Math.max(firstLuminance, secondLuminance);
+	const darker = Math.min(firstLuminance, secondLuminance);
 	return (lighter + .05) / (darker + .05);
 }
 function darken(color, points) {
@@ -9,12 +12,14 @@ function darken(color, points) {
 	return toHex(fromHsl(hue, saturation, Math.max(0, lightness - points / 100)));
 }
 function luminance(color) {
-	const [red, green, blue] = channels(color).map((channel) => {
-		const share = channel / 255;
-		return share <= .03928 ? share / 12.92 : ((share + .055) / 1.055) ** 2.4;
-	});
+	const [red, green, blue] = channels(color).map(linearLight);
 	return .2126 * red + .7152 * green + .0722 * blue;
 }
+function linearLight(channel) {
+	const share = channel / 255;
+	if (share <= .03928) return share / 12.92;
+	return ((share + .055) / 1.055) ** 2.4;
+}
 function channels(color) {
 	let hex = color.slice(1);
 	if (hex.length === 3 || hex.length === 4) hex = [...hex].map((digit) => digit + digit).join("");
@@ -33,13 +38,11 @@ function toHex(rgb) {
 	return `#${rgb.map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`;
 }
 function toHsl([red, green, blue]) {
-	const [r, g, b] = [
-		red / 255,
-		green / 255,
-		blue / 255
-	];
-	const max = Math.max(r, g, b);
-	const min = Math.min(r, g, b);
+	const redShare = red / 255;
+	const greenShare = green / 255;
+	const blueShare = blue / 255;
+	const max = Math.max(redShare, greenShare, blueShare);
+	const min = Math.min(redShare, greenShare, blueShare);
 	const lightness = (max + min) / 2;
 	const chroma = max - min;
 	if (chroma === 0) return [
@@ -49,9 +52,9 @@ function toHsl([red, green, blue]) {
 	];
 	const saturation = chroma / (1 - Math.abs(2 * lightness - 1));
 	let hue;
-	if (max === r) hue = (g - b) / chroma % 6;
-	else if (max === g) hue = (b - r) / chroma + 2;
-	else hue = (r - g) / chroma + 4;
+	if (max === redShare) hue = (greenShare - blueShare) / chroma % 6;
+	else if (max === greenShare) hue = (blueShare - redShare) / chroma + 2;
+	else hue = (redShare - greenShare) / chroma + 4;
 	return [
 		(hue * 60 + 360) % 360,
 		saturation,
@@ -60,45 +63,44 @@ function toHsl([red, green, blue]) {
 }
 function fromHsl(hue, saturation, lightness) {
 	const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
-	const second = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
-	const sector = Math.floor(hue / 60) % 6;
-	const [r, g, b] = [
+	const middle = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
+	const [red, green, blue] = [
 		[
 			chroma,
-			second,
+			middle,
 			0
 		],
 		[
-			second,
+			middle,
 			chroma,
 			0
 		],
 		[
 			0,
 			chroma,
-			second
+			middle
 		],
 		[
 			0,
-			second,
+			middle,
 			chroma
 		],
 		[
-			second,
+			middle,
 			0,
 			chroma
 		],
 		[
 			chroma,
 			0,
-			second
+			middle
 		]
-	][sector];
+	][Math.floor(hue / 60) % 6];
 	const lift = lightness - chroma / 2;
 	return [
-		(r + lift) * 255,
-		(g + lift) * 255,
-		(b + lift) * 255
+		(red + lift) * 255,
+		(green + lift) * 255,
+		(blue + lift) * 255
 	];
 }
 //#endregion

package/dist/components/amount-input.js

@@ -10,9 +10,9 @@ const AMOUNT_FONT_SIZE = 28;
 const DEFAULT_CURRENCY = "SLE";
 const AmountInput$1 = ({ value, currency = DEFAULT_CURRENCY, minorUnits, unit = "minor", label, placeholder, hint, error, disabled, onChange }) => {
 	const { colors } = useTheme();
-	const places = minorUnits === void 0 ? currencyMinorUnits(currency) : Math.max(0, Math.round(minorUnits));
-	const scale = unit === "major" ? 10 ** places : 1;
-	const show = (minor) => formatMinorUnits(minor, places);
+	const decimalPlaces = minorUnits === void 0 ? currencyMinorUnits(currency) : Math.max(0, Math.round(minorUnits));
+	const scale = unit === "major" ? 10 ** decimalPlaces : 1;
+	const show = (minor) => formatMinorUnits(minor, decimalPlaces);
 	const [text, typeText, reshowText] = useTypedText(amountText(value, scale), onChange !== void 0, (sent) => sent === "" ? "" : show(Number(sent)));
 	const box = useFieldBox(error, disabled);
 	const { noteId, controlAttributes } = useFieldNote(hint, error);
@@ -40,18 +40,18 @@ const AmountInput$1 = ({ value, currency = DEFAULT_CURRENCY, minorUnits, unit =
 			}) : null, /* @__PURE__ */ jsx("input", {
 				value: text,
 				placeholder: placeholder ?? show(0),
-				inputMode: places > 0 ? "decimal" : "numeric",
+				inputMode: decimalPlaces > 0 ? "decimal" : "numeric",
 				disabled,
 				...controlAttributes,
 				onFocus: box.onFocus,
 				onBlur: () => {
 					box.onBlur();
-					const amount = toMinorUnits(text, places);
+					const amount = toMinorUnits(text, decimalPlaces);
 					if (amount !== null) reshowText(show(amount));
 				},
 				onChange: (event) => {
-					const typed = cleanAmount(event.currentTarget.value, places);
-					const amount = toMinorUnits(typed, places);
+					const typed = cleanAmount(event.currentTarget.value, decimalPlaces);
+					const amount = toMinorUnits(typed, decimalPlaces);
 					typeText(typed, amount === null ? "" : String(amount));
 					onChange?.(createEvent("change", { value: amount === null ? null : amount / scale }));
 				},
@@ -79,23 +79,26 @@ function amountText(value, scale) {
 	if (value === void 0) return;
 	return Number.isFinite(value) ? String(Math.round(value * scale)) : "";
 }
-function cleanAmount(typed, places) {
+function cleanAmount(typed, decimalPlaces) {
 	const [whole = "", ...fractions] = typed.replace(/[^\d.]/g, "").split(".");
 	const digits = whole.replace(/^0+/, "") || whole.slice(0, 1);
-	if (places === 0 || fractions.length === 0) return groupThousands(digits);
-	const fraction = fractions.join("").slice(0, places);
+	if (decimalPlaces === 0 || fractions.length === 0) return groupThousands(digits);
+	const fraction = fractions.join("").slice(0, decimalPlaces);
 	return `${groupThousands(digits) || "0"}.${fraction}`;
 }
-function toMinorUnits(text, places) {
+function toMinorUnits(text, decimalPlaces) {
 	const plain = text.replaceAll(",", "");
 	if (plain === "") return null;
 	const [whole = "", fraction = ""] = plain.split(".");
-	return Number(`${whole}${fraction.padEnd(places, "0").slice(0, places)}`);
+	const fractionDigits = fraction.padEnd(decimalPlaces, "0").slice(0, decimalPlaces);
+	return Number(`${whole}${fractionDigits}`);
 }
-function formatMinorUnits(minorUnits, places) {
-	const digits = String(Math.abs(minorUnits)).padStart(places + 1, "0");
-	const grouped = groupThousands(digits.slice(0, digits.length - places));
-	return places === 0 ? grouped : `${grouped}.${digits.slice(digits.length - places)}`;
+function formatMinorUnits(minorUnits, decimalPlaces) {
+	const digits = String(Math.abs(minorUnits)).padStart(decimalPlaces + 1, "0");
+	const wholeEnd = digits.length - decimalPlaces;
+	const grouped = groupThousands(digits.slice(0, wholeEnd));
+	if (decimalPlaces === 0) return grouped;
+	return `${grouped}.${digits.slice(wholeEnd)}`;
 }
 function groupThousands(digits) {
 	const groups = [];

package/dist/components/avatar.d.ts

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

package/dist/components/avatar.js

@@ -0,0 +1,63 @@
+import { useTheme } from "../theme.js";
+import { WEIGHTS } from "./tokens.js";
+import { USER_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/avatar.tsx
+const AVATAR_SIZE = {
+	small: 32,
+	medium: 40,
+	large: 56
+};
+function initials(name) {
+	const words = name.trim().split(/\s+/).filter(Boolean);
+	if (words.length === 0) return "";
+	return (words.length === 1 ? [words[0]] : [words[0], words[words.length - 1]]).map((word) => word.charAt(0).toUpperCase()).join("");
+}
+const Avatar = ({ name = "", image, size = "medium" }) => {
+	const { colors } = useTheme();
+	const [failed, setFailed] = useState();
+	const pixels = AVATAR_SIZE[size];
+	const letters = initials(name);
+	let content;
+	if (image && failed !== image) content = /* @__PURE__ */ jsx("img", {
+		src: image,
+		alt: "",
+		onError: () => setFailed(image),
+		style: {
+			width: "100%",
+			height: "100%",
+			objectFit: "cover"
+		}
+	});
+	else if (letters) content = letters;
+	else content = /* @__PURE__ */ jsx(IconSvg, {
+		artwork: USER_ARTWORK,
+		size: Math.round(pixels * .55),
+		color: "currentColor"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "dot-avatar",
+		role: "img",
+		"aria-label": name || void 0,
+		style: {
+			display: "inline-flex",
+			flexShrink: 0,
+			alignItems: "center",
+			justifyContent: "center",
+			width: pixels,
+			height: pixels,
+			borderRadius: "50%",
+			overflow: "hidden",
+			background: colors.muted,
+			color: colors.subtle,
+			fontSize: Math.round(pixels * .4),
+			fontWeight: WEIGHTS.bold,
+			lineHeight: 1
+		},
+		children: content
+	});
+};
+//#endregion
+export { Avatar };

package/dist/components/box.js

@@ -1,6 +1,6 @@
 import { CARD_RADIUS_SCALE } from "./tokens.js";
-import { toneBackground } from "./tones.js";
-import { BACKGROUNDS, TONES } from "@monimesl/dot-core";
+import { isTone, toneBackground } from "./tones.js";
+import { BACKGROUNDS } from "@monimesl/dot-core";
 //#region src/components/box.ts
 const RADIUS_SCALE = {
 	none: 0,
@@ -10,7 +10,6 @@ const RADIUS_SCALE = {
 };
 const FULL_RADIUS = 9999;
 const BACKGROUND_WORDS = new Set(BACKGROUNDS.words);
-const TONE_WORDS = new Set(TONES);
 function boxStyle(props, theme, look = {}) {
 	const background = props.background ?? look.background;
 	const border = props.border ?? look.border;
@@ -39,7 +38,7 @@ function boxStyle(props, theme, look = {}) {
 	return style;
 }
 function backgroundColor(background, theme) {
-	if (TONE_WORDS.has(background)) return toneBackground(theme.colors, background);
+	if (isTone(background)) return toneBackground(theme.colors, background);
 	if (BACKGROUND_WORDS.has(background)) return theme.colors[background];
 	return customColor(background, theme);
 }

package/dist/components/carousel.js

@@ -1,6 +1,7 @@
 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";
@@ -45,7 +46,8 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 	};
 	const step = (direction) => {
 		const beyondEnd = current + direction < 0 || current + direction >= count;
-		moveTo(!looping && beyondEnd ? shown : shown + direction);
+		if (!looping && beyondEnd) moveTo(shown);
+		else moveTo(shown + direction);
 	};
 	const advance = useEffectEvent(() => {
 		if (!looping && current === count - 1) moveTo(first);
@@ -75,8 +77,8 @@ 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 = gesture.current;
+		return inProgress?.pointerId === event.pointerId ? inProgress : null;
 	};
 	const endGesture = () => {
 		gesture.current = null;
@@ -98,32 +100,33 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 		setWidth(viewport.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;
+			swipe.swiping = true;
 			swiped.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 = current === 0 && movedX > 0;
+		const afterLast = current === count - 1 && movedX < 0;
+		setDrag(!looping && (beforeFirst || afterLast) ? movedX * EDGE_RESISTANCE : 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);
+		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];
@@ -241,9 +244,6 @@ 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);
 }

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/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 { insets, paddingStyle } from "./padding.js";
-import { STATUS_ICONS, toneBackground, toneColor } from "./tones.js";
-import { IconGraphic } from "./icon.js";
+import { clamp } from "./utils.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 };