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

package/README.md

@@ -21,9 +21,11 @@ source at build time, from `@phosphor-icons/core`.
 ## The theme
 
 A dot sets `scheme`, `colors` and `shape` in `defineDot`. The colors are `primary`, `background`,
-`surface` and `text`, each for light and dark. The renderer fills in the rest of the palette (the
-neutrals and the status colors) from Dash's own look. `useTheme()` gives a component the resolved
-theme.
+`surface`, `text`, `muted`, `border` and `subtle`, each for light and dark, and `custom` for the
+dot's own named colors. A page can set its own colors over the theme's, with `configs.colors` or
+`setColors`. The renderer fills in the rest of the palette from Dash's own look. On a background
+that isn't Dash's, it works out surfaces and quieter text that sit well on it. `useTheme()` gives a
+component the resolved theme.
 
 ## Only the components a dot uses
 

package/dist/color.js

@@ -1,25 +1,12 @@
 //#region src/color.ts
-const READABLE_CONTRAST = 4.5;
-function contrast(first, second) {
-	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 mix(from, to, amount) {
+	const end = channels(to);
+	return toHex(channels(from).map((start, index) => start + (end[index] - start) * amount));
 }
 function darken(color, points) {
 	const [hue, saturation, lightness] = toHsl(channels(color));
 	return toHex(fromHsl(hue, saturation, Math.max(0, lightness - points / 100)));
 }
-function luminance(color) {
-	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("");
@@ -27,7 +14,7 @@ function channels(color) {
 		0,
 		2,
 		4
-	].map((start) => parseInt(hex.slice(start, start + 2), 16));
+	].map((offset) => parseInt(hex.slice(offset, offset + 2), 16));
 	return [
 		red,
 		green,
@@ -104,4 +91,4 @@ function fromHsl(hue, saturation, lightness) {
 	];
 }
 //#endregion
-export { READABLE_CONTRAST, contrast, darken };
+export { darken, mix };

package/dist/components/amount-input.js

@@ -12,8 +12,8 @@ const AmountInput$1 = ({ value, currency = DEFAULT_CURRENCY, minorUnits, unit =
 	const { colors } = useTheme();
 	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 formatAmount = (minor) => formatMinorUnits(minor, decimalPlaces);
+	const [text, typeText, reshowText] = useTypedText(amountText(value, scale), onChange !== void 0, (sent) => sent === "" ? "" : formatAmount(Number(sent)));
 	const box = useFieldBox(error, disabled);
 	const { noteId, controlAttributes } = useFieldNote(hint, error);
 	return /* @__PURE__ */ jsx(Field, {
@@ -39,7 +39,7 @@ const AmountInput$1 = ({ value, currency = DEFAULT_CURRENCY, minorUnits, unit =
 				children: currency
 			}) : null, /* @__PURE__ */ jsx("input", {
 				value: text,
-				placeholder: placeholder ?? show(0),
+				placeholder: placeholder ?? formatAmount(0),
 				inputMode: decimalPlaces > 0 ? "decimal" : "numeric",
 				disabled,
 				...controlAttributes,
@@ -47,7 +47,7 @@ const AmountInput$1 = ({ value, currency = DEFAULT_CURRENCY, minorUnits, unit =
 				onBlur: () => {
 					box.onBlur();
 					const amount = toMinorUnits(text, decimalPlaces);
-					if (amount !== null) reshowText(show(amount));
+					if (amount !== null) reshowText(formatAmount(amount));
 				},
 				onChange: (event) => {
 					const typed = cleanAmount(event.currentTarget.value, decimalPlaces);
@@ -81,10 +81,12 @@ function amountText(value, scale) {
 }
 function cleanAmount(typed, decimalPlaces) {
 	const [whole = "", ...fractions] = typed.replace(/[^\d.]/g, "").split(".");
-	const digits = whole.replace(/^0+/, "") || whole.slice(0, 1);
-	if (decimalPlaces === 0 || fractions.length === 0) return groupThousands(digits);
+	let wholeDigits = whole.replace(/^0+/, "");
+	if (wholeDigits === "" && whole !== "") wholeDigits = "0";
+	if (decimalPlaces === 0 || fractions.length === 0) return groupThousands(wholeDigits);
+	if (wholeDigits === "") wholeDigits = "0";
 	const fraction = fractions.join("").slice(0, decimalPlaces);
-	return `${groupThousands(digits) || "0"}.${fraction}`;
+	return `${groupThousands(wholeDigits)}.${fraction}`;
 }
 function toMinorUnits(text, decimalPlaces) {
 	const plain = text.replaceAll(",", "");

package/dist/components/avatar.js

@@ -13,18 +13,23 @@ const AVATAR_SIZE = {
 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 firstInitial = initialOf(words[0]);
+	if (words.length === 1) return firstInitial;
+	return firstInitial + initialOf(words[words.length - 1]);
+}
+function initialOf(word) {
+	return word.charAt(0).toUpperCase();
 }
 const Avatar = ({ name = "", image, size = "medium" }) => {
 	const { colors } = useTheme();
-	const [failed, setFailed] = useState();
+	const [failedImage, setFailedImage] = useState();
 	const pixels = AVATAR_SIZE[size];
 	const letters = initials(name);
 	let content;
-	if (image && failed !== image) content = /* @__PURE__ */ jsx("img", {
+	if (image && failedImage !== image) content = /* @__PURE__ */ jsx("img", {
 		src: image,
 		alt: "",
-		onError: () => setFailed(image),
+		onError: () => setFailedImage(image),
 		style: {
 			width: "100%",
 			height: "100%",

package/dist/components/box.js

@@ -16,10 +16,8 @@ function boxStyle(props, theme, look = {}) {
 	const radius = props.radius ?? look.radius;
 	const style = {};
 	if (background !== void 0) style.background = backgroundColor(background, theme);
-	if (border !== void 0) {
-		const color = border === "strong" ? theme.colors.subtle : theme.colors.border;
-		style.border = border === "none" ? "none" : `1px solid ${color}`;
-	}
+	if (border === "none") style.border = "none";
+	else if (border !== void 0) style.border = `1px solid ${border === "strong" ? theme.colors.subtle : theme.colors.border}`;
 	if (radius !== void 0) {
 		style.borderRadius = radius === "full" ? FULL_RADIUS : theme.radius * RADIUS_SCALE[radius];
 		style.overflow = "hidden";
@@ -42,6 +40,7 @@ function backgroundColor(background, theme) {
 	if (BACKGROUND_WORDS.has(background)) return theme.colors[background];
 	return customColor(background, theme);
 }
+const unknownColors = /* @__PURE__ */ new Set();
 function customColor(name, theme) {
 	const color = theme.customColors[name];
 	if (color === void 0 && !unknownColors.has(name)) {
@@ -50,7 +49,6 @@ function customColor(name, theme) {
 	}
 	return color;
 }
-const unknownColors = /* @__PURE__ */ new Set();
 function cssLength(value) {
 	return value === "fill" ? "100%" : value;
 }

package/dist/components/carousel.js

@@ -1,7 +1,7 @@
 import { useTheme } from "../theme.js";
 import { SPACE } from "./tokens.js";
+import { clamp } from "./numbers.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";
@@ -17,41 +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;
-		if (!looping && beyondEnd) moveTo(shown);
-		else moveTo(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;
@@ -62,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);
@@ -77,27 +78,27 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 		count
 	]);
 	const gestureOf = (event) => {
-		const inProgress = gesture.current;
+		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 swipe = gestureOf(event);
@@ -111,13 +112,14 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 				return;
 			}
 			swipe.swiping = true;
-			swiped.current = true;
+			ignoreNextClick.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 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 swipe = gestureOf(event);
@@ -126,13 +128,15 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 		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);
+		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"
@@ -142,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",
@@ -155,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();
 				}
 			},
@@ -176,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: {
@@ -205,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",
@@ -247,7 +251,7 @@ function slidesOf(children, keyPrefix = "") {
 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/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

@@ -2,8 +2,8 @@ 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 { clamp } from "./utils.js";
 import { STATUS_ARTWORK, toneBackground, toneColor } from "./tones.js";
 import { IconButton } from "./icon-button.js";
 import { createEvent } from "@monimesl/dot-core";

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/list.js

@@ -1,5 +1,5 @@
 import { useTheme } from "../theme.js";
-import { CARD_RADIUS_SCALE, FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
+import { CARD_RADIUS_SCALE, CENTERED, FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
 import { CHEVRON_RIGHT_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
 import { insets, paddingStyle } from "./padding.js";
@@ -11,22 +11,22 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 const END_MARGIN = "0px 0px 200px 0px";
 const List$1 = ({ onEndReached, children, ...padding }) => {
 	const { colors, radius } = useTheme();
-	const list = useRef(null);
-	const reachedAt = useRef(null);
+	const listRef = useRef(null);
+	const lastRowReached = useRef(null);
 	useEffect(() => {
-		const last = list.current?.lastElementChild;
-		if (!onEndReached || !last || typeof IntersectionObserver === "undefined") return;
+		const lastRow = listRef.current?.lastElementChild;
+		if (!onEndReached || !lastRow || typeof IntersectionObserver === "undefined") return;
 		const observer = new IntersectionObserver((entries) => {
-			if (entries.some((entry) => entry.isIntersecting) && reachedAt.current !== last) {
-				reachedAt.current = last;
+			if (entries.some((entry) => entry.isIntersecting) && lastRowReached.current !== lastRow) {
+				lastRowReached.current = lastRow;
 				onEndReached(createEvent("endReached"));
 			}
 		}, { rootMargin: END_MARGIN });
-		observer.observe(last);
+		observer.observe(lastRow);
 		return () => observer.disconnect();
 	});
 	return /* @__PURE__ */ jsx("ul", {
-		ref: list,
+		ref: listRef,
 		className: "dot-list",
 		style: {
 			display: "flex",
@@ -59,9 +59,7 @@ const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...p
 	});
 	else if (icon) leading = /* @__PURE__ */ jsx("span", {
 		style: {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
+			...CENTERED,
 			width: 36,
 			height: 36,
 			borderRadius: "50%",

package/dist/components/numbers.js

@@ -0,0 +1,9 @@
+//#region src/components/numbers.ts
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(value, max));
+}
+function wholeCount(count) {
+	return Math.max(1, Math.round(count));
+}
+//#endregion
+export { clamp, wholeCount };

package/dist/components/padding.js

@@ -14,14 +14,17 @@ function insets(block, inline = block) {
 		bottom: block
 	};
 }
-function paddingStyle(props, own = NO_INSETS) {
-	const side = (space, pixels) => space === void 0 ? pixels : SPACE[space];
+function paddingStyle(props, ownInsets = NO_INSETS) {
 	return {
-		paddingTop: side(props.paddingTop ?? props.padding, own.top),
-		paddingInlineStart: side(props.paddingStart ?? props.padding, own.start),
-		paddingInlineEnd: side(props.paddingEnd ?? props.padding, own.end),
-		paddingBottom: side(props.paddingBottom ?? props.padding, own.bottom)
+		paddingTop: sidePadding(props.paddingTop ?? props.padding, ownInsets.top),
+		paddingInlineStart: sidePadding(props.paddingStart ?? props.padding, ownInsets.start),
+		paddingInlineEnd: sidePadding(props.paddingEnd ?? props.padding, ownInsets.end),
+		paddingBottom: sidePadding(props.paddingBottom ?? props.padding, ownInsets.bottom)
 	};
 }
+function sidePadding(pageSpace, ownPixels) {
+	if (pageSpace === void 0) return ownPixels;
+	return SPACE[pageSpace];
+}
 //#endregion
 export { insets, paddingStyle };

package/dist/components/scroll.js

@@ -6,13 +6,13 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/scroll.tsx
 const REST_DELAY_MS = 120;
 const Scroll$1 = ({ gap = "medium", snap = "none", index, onChange, children, ...padding }) => {
-	const row = useRef(null);
+	const rowRef = useRef(null);
 	const reportedIndex = useRef(void 0);
 	const restTimer = useRef(void 0);
 	const paddingCss = paddingStyle(padding);
 	const startPadding = Number(paddingCss.paddingInlineStart);
 	useEffect(() => {
-		const element = row.current;
+		const element = rowRef.current;
 		if (index === void 0 || index === reportedIndex.current || !element) return;
 		const child = element.children[index];
 		if (child) {
@@ -23,20 +23,22 @@ const Scroll$1 = ({ gap = "medium", snap = "none", index, onChange, children, ..
 			});
 		}
 	}, [index, startPadding]);
-	useEffect(() => () => clearTimeout(restTimer.current), []);
+	useEffect(() => {
+		return () => clearTimeout(restTimer.current);
+	}, []);
 	return /* @__PURE__ */ jsx("div", {
-		ref: row,
+		ref: rowRef,
 		className: "dot-scroll",
 		onScroll: onChange ? () => {
 			clearTimeout(restTimer.current);
 			restTimer.current = setTimeout(() => {
-				const element = row.current;
+				const element = rowRef.current;
 				if (!element) return;
 				const visibleStart = element.scrollLeft + startPadding;
-				const firstHalfInView = [...element.children].findIndex((item) => item.offsetLeft + item.offsetWidth / 2 >= visibleStart);
-				if (firstHalfInView !== -1 && firstHalfInView !== reportedIndex.current) {
-					reportedIndex.current = firstHalfInView;
-					onChange(createEvent("change", { index: firstHalfInView }));
+				const firstShownIndex = [...element.children].findIndex((item) => item.offsetLeft + item.offsetWidth / 2 >= visibleStart);
+				if (firstShownIndex !== -1 && firstShownIndex !== reportedIndex.current) {
+					reportedIndex.current = firstShownIndex;
+					onChange(createEvent("change", { index: firstShownIndex }));
 				}
 			}, REST_DELAY_MS);
 		} : void 0,

package/dist/components/sheet.js

@@ -16,7 +16,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...padding }) => {
 	const { colors, radius } = useTheme();
 	const container = usePortalContainer();
-	const corner = radius * CARD_RADIUS_SCALE;
+	const cornerRadius = radius * CARD_RADIUS_SCALE;
 	return /* @__PURE__ */ jsx(DialogRoot, {
 		open,
 		onOpenChange: (next) => {
@@ -51,8 +51,8 @@ const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...
 						end: 16,
 						bottom: 24
 					}),
-					borderTopLeftRadius: corner,
-					borderTopRightRadius: corner,
+					borderTopLeftRadius: cornerRadius,
+					borderTopRightRadius: cornerRadius,
 					background: colors.surface,
 					color: colors.text,
 					fontFamily: FONT_FAMILY,