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

package/dist/index.js

@@ -1,6 +1,8 @@
 import { createEvent, toList, toText } from "@monimesl/dot-core";
-import { Fragment, createContext, createElement, useContext, useMemo, useState, useSyncExternalStore } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Children, Fragment, createContext, createElement, isValidElement, useContext, useEffect, useEffectEvent, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Banknote, Bell, Calendar, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleAlert, CircleCheck, CircleHelp, Clock, Copy, CreditCard, Download, Droplet, Ellipsis, Eye, EyeOff, File, Gift, Heart, History, House, Image, Info, Landmark, LayoutGrid, List, Lock, LogOut, Mail, MapPin, Minus, Pencil, Phone, Plus, QrCode, Receipt, RefreshCw, Search, Send, Settings, Share2, ShoppingCart, Smartphone, Star, Trash2, TriangleAlert, Upload, User, Users, Wallet, Wifi, X, Zap } from "lucide";
+import { encode } from "uqr";
 import { createRoot } from "react-dom/client";
 //#region src/theme.ts
 const FONT_FAMILY = "system-ui, sans-serif";
@@ -13,7 +15,11 @@ const DEFAULT_COLORS = {
 		text: "#111111",
 		subtle: "#8e8e93",
 		muted: "#e9e9eb",
-		border: "#e9e9eb"
+		border: "#e9e9eb",
+		info: "#0a64d6",
+		success: "#1a8a4a",
+		warning: "#b25e00",
+		danger: "#d0312d"
 	},
 	dark: {
 		primary: "#f5f5f5",
@@ -22,7 +28,11 @@ const DEFAULT_COLORS = {
 		text: "#f5f5f5",
 		subtle: "#8e8e93",
 		muted: "#2c2c2e",
-		border: "#2a2a2c"
+		border: "#2a2a2c",
+		info: "#4c9dff",
+		success: "#3ecf72",
+		warning: "#ffb340",
+		danger: "#ff6961"
 	}
 };
 function resolveTheme(theme, systemScheme) {
@@ -39,7 +49,11 @@ function resolveTheme(theme, systemScheme) {
 			text: pick(colors.text, defaults.text),
 			subtle: defaults.subtle,
 			muted: defaults.muted,
-			border: defaults.border
+			border: defaults.border,
+			info: defaults.info,
+			success: defaults.success,
+			warning: defaults.warning,
+			danger: defaults.danger
 		},
 		radius: theme.radius ?? DEFAULT_RADIUS
 	};
@@ -50,7 +64,7 @@ function useTheme() {
 }
 //#endregion
 //#region src/components/tokens.ts
-const GAP = {
+const SPACE = {
 	none: 0,
 	small: 4,
 	medium: 8,
@@ -63,22 +77,236 @@ const FONT_SIZE = {
 };
 const CARD_RADIUS_SCALE = 1.5;
 const DISABLED_OPACITY = .6;
+const ICON_SIZE = {
+	small: 16,
+	medium: 20,
+	large: 28
+};
+//#endregion
+//#region src/components/field.tsx
+function Field({ label, hint, error, children }) {
+	const { colors } = useTheme();
+	const note = error || hint;
+	return /* @__PURE__ */ jsxs("label", {
+		className: "dot-field",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: SPACE.small
+		},
+		children: [
+			label ? /* @__PURE__ */ jsx(FieldLabel, { children: label }) : null,
+			children,
+			note ? /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: FONT_SIZE.caption,
+					color: error ? colors.danger : colors.subtle
+				},
+				children: note
+			}) : null
+		]
+	});
+}
+function FieldLabel({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		style: {
+			fontSize: FONT_SIZE.caption,
+			fontWeight: 500
+		},
+		children
+	});
+}
+//#endregion
+//#region src/components/field-box.ts
+function useFieldBox(error, disabled) {
+	const { colors, radius } = useTheme();
+	const [focused, setFocused] = useState(false);
+	let borderColor = colors.border;
+	if (error) borderColor = colors.danger;
+	else if (focused) borderColor = colors.primary;
+	return {
+		style: {
+			border: `1px solid ${borderColor}`,
+			borderRadius: radius,
+			background: colors.surface,
+			color: colors.text,
+			fontSize: 16,
+			opacity: disabled ? DISABLED_OPACITY : 1
+		},
+		onFocus: () => setFocused(true),
+		onBlur: () => setFocused(false)
+	};
+}
+//#endregion
+//#region src/components/typed-text.ts
+function useTypedText(value, sendsChanges, show = (text) => text) {
+	const [text, setText] = useState(() => show(value ?? ""));
+	const [awaitingEcho, setAwaitingEcho] = useState([]);
+	const [previousValue, setPreviousValue] = useState(value);
+	if (value !== previousValue) {
+		setPreviousValue(value);
+		const echo = awaitingEcho.indexOf(value ?? "");
+		if (echo >= 0) setAwaitingEcho(awaitingEcho.slice(echo + 1));
+		else {
+			setAwaitingEcho([]);
+			setText(show(value ?? ""));
+		}
+	}
+	const type = (next, sent = next) => {
+		setText(next);
+		if (sendsChanges && value !== void 0) setAwaitingEcho([...awaitingEcho, sent]);
+	};
+	return [text, type];
+}
+//#endregion
+//#region src/components/amount-input.tsx
+const AMOUNT_FONT_SIZE = 28;
+const AmountInput = ({ value, currency, decimals = 0, label, placeholder = "0", hint, error, disabled, onChange }) => {
+	const { colors } = useTheme();
+	const places = Math.max(0, Math.round(decimals));
+	const [text, typeText] = useTypedText(amountText(value), onChange !== void 0, (sent) => sent === "" ? "" : formatAmount(Number(sent), places));
+	const box = useFieldBox(error, disabled);
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		hint,
+		error,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "dot-amount-input",
+			style: {
+				...box.style,
+				display: "flex",
+				alignItems: "baseline",
+				gap: SPACE.medium,
+				padding: "10px 14px"
+			},
+			children: [currency ? /* @__PURE__ */ jsx("span", {
+				style: {
+					color: colors.subtle,
+					fontSize: 20,
+					fontWeight: 500
+				},
+				children: currency
+			}) : null, /* @__PURE__ */ jsx("input", {
+				value: text,
+				placeholder,
+				inputMode: places > 0 ? "decimal" : "numeric",
+				disabled,
+				"aria-invalid": error ? true : void 0,
+				onFocus: box.onFocus,
+				onBlur: box.onBlur,
+				onChange: (event) => {
+					const typed = cleanAmount(event.currentTarget.value, places);
+					const amount = parseAmount(typed);
+					typeText(typed, amount === null ? "" : String(amount));
+					onChange?.(createEvent("change", { value: amount }));
+				},
+				style: {
+					flexGrow: 1,
+					minWidth: 0,
+					padding: 0,
+					border: "none",
+					outline: "none",
+					background: "transparent",
+					color: "inherit",
+					font: "inherit",
+					fontSize: AMOUNT_FONT_SIZE,
+					fontWeight: 600
+				}
+			})]
+		})
+	});
+};
+function amountText(value) {
+	if (value === void 0) return;
+	return Number.isFinite(value) ? String(value) : "";
+}
+function cleanAmount(typed, places) {
+	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);
+	return `${groupThousands(digits) || "0"}.${fraction}`;
+}
+function parseAmount(text) {
+	const plain = text.replaceAll(",", "");
+	return plain === "" ? null : Number(plain);
+}
+function formatAmount(amount, places) {
+	const [whole = "", fraction] = Math.abs(amount).toFixed(places).split(".");
+	const grouped = groupThousands(whole);
+	return fraction === void 0 ? grouped : `${grouped}.${fraction}`;
+}
+function groupThousands(digits) {
+	const groups = [];
+	for (let end = digits.length; end > 0; end -= 3) groups.unshift(digits.slice(Math.max(0, end - 3), end));
+	return groups.join(",");
+}
+//#endregion
+//#region src/components/spinner.tsx
+function LoadingIcon({ size }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		className: "dot-spinner",
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 3,
+		role: "progressbar",
+		"aria-label": "Loading",
+		style: { flexShrink: 0 },
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9",
+			strokeOpacity: .25
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M21 12a9 9 0 0 0-9-9",
+			strokeLinecap: "round",
+			children: /* @__PURE__ */ jsx("animateTransform", {
+				attributeName: "transform",
+				type: "rotate",
+				from: "0 12 12",
+				to: "360 12 12",
+				dur: "0.8s",
+				repeatCount: "indefinite"
+			})
+		})]
+	});
+}
+const Spinner = ({ size = "medium" }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("span", {
+		style: {
+			display: "inline-flex",
+			alignSelf: "center",
+			color: colors.subtle
+		},
+		children: /* @__PURE__ */ jsx(LoadingIcon, { size: ICON_SIZE[size] })
+	});
+};
 //#endregion
 //#region src/components/button.tsx
-const Button = ({ variant = "primary", disabled, onClick, children }) => {
+const Button = ({ variant = "primary", disabled, loading, onClick, children }) => {
 	const { colors, radius } = useTheme();
 	const filled = variant === "primary" && !disabled;
 	let color = colors.text;
 	if (filled) color = colors.surface;
 	else if (disabled) color = colors.subtle;
-	return /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		className: "dot-button",
 		"data-variant": variant,
 		disabled,
-		onClick: onClick ? () => onClick(createEvent("click")) : void 0,
+		"aria-busy": loading,
+		onClick: onClick && !loading ? () => onClick(createEvent("click")) : void 0,
 		style: {
-			padding: "10px 16px",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: SPACE.medium,
+			minHeight: 48,
+			padding: "12px 20px",
 			border: "none",
 			borderRadius: radius,
 			background: filled ? colors.primary : colors.muted,
@@ -87,22 +315,788 @@ const Button = ({ variant = "primary", disabled, onClick, children }) => {
 			fontSize: FONT_SIZE.body,
 			fontWeight: 600,
 			opacity: disabled ? DISABLED_OPACITY : 1,
+			cursor: disabled || loading ? "default" : "pointer"
+		},
+		children: [loading ? /* @__PURE__ */ jsx(LoadingIcon, { size: ICON_SIZE.small }) : null, children]
+	});
+};
+//#endregion
+//#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 = ({ autoplay = false, interval = 4e3, loop = false, indicator = "dots", gap = "none", effect = "slide", index, onChange, children }) => {
+	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;
+		moveTo(!looping && beyondEnd ? shown : 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 touch = gesture.current;
+		return touch?.pointerId === event.pointerId ? touch : 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 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)) {
+				endGesture();
+				return;
+			}
+			touch.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 onPointerUp = (event) => {
+		const touch = gestureOf(event);
+		if (!touch) 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);
+	};
+	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
+		},
+		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 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) {
+	return (value % count + count) % count;
+}
+//#endregion
+//#region src/components/tones.ts
+const STATUS_ICONS = {
+	default: "info",
+	info: "info",
+	success: "success",
+	warning: "warning",
+	danger: "error"
+};
+function toneColor(colors, tone) {
+	switch (tone) {
+		case "default": return colors.text;
+		case "muted": return colors.subtle;
+		default: return colors[tone];
+	}
+}
+function toneBackground(colors, tone) {
+	if (tone === "default" || tone === "muted") return colors.muted;
+	return withOpacity(colors[tone], .14);
+}
+function withOpacity(color, opacity) {
+	return `${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
+}
+//#endregion
+//#region src/components/icon.tsx
+const ICONS = {
+	"arrow-down": ArrowDown,
+	"arrow-left": ArrowLeft,
+	"arrow-right": ArrowRight,
+	"arrow-up": ArrowUp,
+	bank: Landmark,
+	bell: Bell,
+	bolt: Zap,
+	calendar: Calendar,
+	card: CreditCard,
+	cart: ShoppingCart,
+	cash: Banknote,
+	check: Check,
+	"chevron-down": ChevronDown,
+	"chevron-left": ChevronLeft,
+	"chevron-right": ChevronRight,
+	"chevron-up": ChevronUp,
+	clock: Clock,
+	close: X,
+	copy: Copy,
+	download: Download,
+	edit: Pencil,
+	error: CircleAlert,
+	eye: Eye,
+	"eye-off": EyeOff,
+	file: File,
+	gift: Gift,
+	grid: LayoutGrid,
+	heart: Heart,
+	help: CircleHelp,
+	history: History,
+	home: House,
+	image: Image,
+	info: Info,
+	list: List,
+	location: MapPin,
+	lock: Lock,
+	logout: LogOut,
+	mail: Mail,
+	minus: Minus,
+	mobile: Smartphone,
+	more: Ellipsis,
+	phone: Phone,
+	plus: Plus,
+	"qr-code": QrCode,
+	receipt: Receipt,
+	refresh: RefreshCw,
+	search: Search,
+	send: Send,
+	settings: Settings,
+	share: Share2,
+	star: Star,
+	success: CircleCheck,
+	trash: Trash2,
+	upload: Upload,
+	user: User,
+	users: Users,
+	wallet: Wallet,
+	warning: TriangleAlert,
+	water: Droplet,
+	wifi: Wifi
+};
+function IconGraphic({ name, size, color }) {
+	return /* @__PURE__ */ jsx("svg", {
+		className: "dot-icon",
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: color,
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		style: {
+			display: "inline-block",
+			verticalAlign: "middle",
+			flexShrink: 0
+		},
+		children: ICONS[name].map(([tag, attributes], index) => createElement(tag, {
+			key: index,
+			...attributes
+		}))
+	});
+}
+const Icon = ({ name, size = "medium", tone = "default" }) => {
+	const { colors } = useTheme();
+	if (!name) return null;
+	return /* @__PURE__ */ jsx(IconGraphic, {
+		name,
+		size: ICON_SIZE[size],
+		color: toneColor(colors, tone)
+	});
+};
+//#endregion
+//#region src/components/chip.tsx
+const Chip = ({ label, icon, selected = false, disabled, onTap }) => {
+	const { colors } = useTheme();
+	const color = selected ? colors.surface : colors.text;
+	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,
+			font: "inherit",
+			fontSize: FONT_SIZE.caption,
+			fontWeight: 500,
+			whiteSpace: "nowrap",
+			opacity: disabled ? DISABLED_OPACITY : 1,
 			cursor: disabled ? "default" : "pointer"
 		},
+		children: [icon ? /* @__PURE__ */ jsx(IconGraphic, {
+			name: icon,
+			size: ICON_SIZE.small,
+			color
+		}) : null, label]
+	});
+};
+//#endregion
+//#region src/components/code-input.tsx
+const CodeInput = ({ 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 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];
+		let borderColor = colors.border;
+		if (error) borderColor = colors.danger;
+		else if (focused && index === next) borderColor = colors.primary;
+		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: 600
+			},
+			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,
+		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,
+				"aria-invalid": error ? true : void 0,
+				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
+//#region src/components/divider.tsx
+const Divider = () => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-divider",
+		role: "separator",
+		style: {
+			height: 1,
+			alignSelf: "stretch",
+			flexShrink: 0,
+			background: colors.border
+		}
+	});
+};
+//#endregion
+//#region src/components/empty-state.tsx
+const EmptyState = ({ icon, title, text, children }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dot-empty-state",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: SPACE.medium,
+			padding: "32px 16px",
+			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: 600
+				},
+				children: title
+			}) : null,
+			text ? /* @__PURE__ */ jsx("span", {
+				style: {
+					maxWidth: 300,
+					fontSize: FONT_SIZE.body,
+					color: colors.subtle
+				},
+				children: text
+			}) : null,
+			children ? /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					gap: SPACE.medium,
+					paddingTop: SPACE.small
+				},
+				children
+			}) : null
+		]
+	});
+};
+//#endregion
+//#region src/components/feedback.tsx
+const ProgressBar = ({ value = 0 }) => {
+	const { colors } = useTheme();
+	const percent = Math.min(100, Math.max(0, value));
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-progress-bar",
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": percent,
+		style: {
+			height: 6,
+			borderRadius: 3,
+			background: colors.muted,
+			overflow: "hidden"
+		},
+		children: /* @__PURE__ */ jsx("div", { style: {
+			width: `${percent}%`,
+			height: "100%",
+			background: colors.primary,
+			transition: "width 0.2s"
+		} })
+	});
+};
+const Notice = ({ tone = "default", title, children }) => {
+	const { colors, radius } = useTheme();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dot-notice",
+		role: tone === "danger" ? "alert" : "status",
+		style: {
+			display: "flex",
+			gap: SPACE.medium,
+			padding: "12px 14px",
+			borderRadius: radius,
+			background: toneBackground(colors, tone),
+			color: colors.text,
+			fontSize: FONT_SIZE.body
+		},
+		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
+			},
+			children: [title ? /* @__PURE__ */ jsx("span", {
+				style: { fontWeight: 600 },
+				children: title
+			}) : null, children ? /* @__PURE__ */ jsx("span", { children }) : null]
+		})]
+	});
+};
+const Badge = ({ tone = "default", children }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("span", {
+		className: "dot-badge",
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			width: "fit-content",
+			padding: "2px 8px",
+			borderRadius: 999,
+			background: toneBackground(colors, tone),
+			color: toneColor(colors, tone),
+			fontSize: FONT_SIZE.caption,
+			fontWeight: 600,
+			whiteSpace: "nowrap"
+		},
+		children
+	});
+};
+//#endregion
+//#region src/components/footer.tsx
+const Footer = ({ children }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-footer",
+		style: {
+			position: "sticky",
+			bottom: 0,
+			marginTop: "auto",
+			display: "flex",
+			flexDirection: "column",
+			gap: SPACE.medium,
+			paddingTop: SPACE.medium,
+			paddingBottom: SPACE.medium,
+			background: colors.background
+		},
 		children
 	});
 };
 //#endregion
+//#region src/components/pill.tsx
+function Pill({ background, color, children }) {
+	return /* @__PURE__ */ jsx("span", {
+		style: {
+			minWidth: 18,
+			padding: "1px 6px",
+			borderRadius: 9,
+			background,
+			color,
+			fontSize: 11,
+			fontWeight: 600,
+			lineHeight: "16px",
+			textAlign: "center",
+			whiteSpace: "nowrap"
+		},
+		children
+	});
+}
+//#endregion
+//#region src/components/grid.tsx
+const TILE_SIZE = 52;
+const Grid = ({ columns = 4, gap = "medium", children }) => /* @__PURE__ */ jsx("div", {
+	className: "dot-grid",
+	style: {
+		display: "grid",
+		gridTemplateColumns: `repeat(${Math.max(1, Math.round(columns))}, minmax(0, 1fr))`,
+		gap: SPACE[gap]
+	},
+	children
+});
+const GridItem = ({ label, icon, image, badge, onTap }) => {
+	const { colors, radius } = useTheme();
+	const tileRadius = radius * CARD_RADIUS_SCALE;
+	let picture = null;
+	if (image) picture = /* @__PURE__ */ jsx("img", {
+		src: image,
+		alt: "",
+		width: TILE_SIZE,
+		height: TILE_SIZE,
+		style: {
+			display: "block",
+			borderRadius: tileRadius,
+			objectFit: "cover"
+		}
+	});
+	else if (icon) picture = /* @__PURE__ */ jsx(IconGraphic, {
+		name: icon,
+		size: 24,
+		color: colors.primary
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dot-grid-item",
+		role: onTap ? "button" : void 0,
+		onClick: onTap ? () => onTap(createEvent("tap")) : void 0,
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: 6,
+			padding: `${SPACE.small}px 0`,
+			cursor: onTap ? "pointer" : void 0
+		},
+		children: [/* @__PURE__ */ jsxs("span", {
+			style: {
+				position: "relative",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				width: TILE_SIZE,
+				height: TILE_SIZE,
+				borderRadius: tileRadius,
+				background: colors.muted
+			},
+			children: [picture, badge ? /* @__PURE__ */ jsx("span", {
+				style: {
+					position: "absolute",
+					top: -6,
+					right: -10
+				},
+				children: /* @__PURE__ */ jsx(Pill, {
+					background: colors.danger,
+					color: "#ffffff",
+					children: badge
+				})
+			}) : null]
+		}), label ? /* @__PURE__ */ jsx("span", {
+			style: {
+				display: "-webkit-box",
+				WebkitLineClamp: 2,
+				WebkitBoxOrient: "vertical",
+				overflow: "hidden",
+				width: "100%",
+				textAlign: "center",
+				fontSize: FONT_SIZE.caption,
+				color: colors.text
+			},
+			children: label
+		}) : null]
+	});
+};
+//#endregion
 //#region src/components/image.tsx
-const Image = ({ src, alt, width, height, onLoad, onError }) => {
+const Image$1 = ({ src, alt, width, height, fit = "cover", shape = "rounded", onLoad, onError }) => {
 	const { radius } = useTheme();
+	const corners = {
+		rounded: radius,
+		square: 0,
+		circle: "50%"
+	}[shape];
 	return /* @__PURE__ */ jsx("img", {
 		className: "dot-image",
 		src,
 		alt: alt ?? "",
 		width,
 		height,
-		style: { borderRadius: radius },
+		style: {
+			borderRadius: corners,
+			objectFit: fit
+		},
 		onLoad: onLoad ? (event) => {
 			const { naturalWidth, naturalHeight } = event.currentTarget;
 			onLoad(createEvent("load", {
@@ -137,50 +1131,530 @@ const HTML_TYPES = {
 		inputMode: "text"
 	}
 };
-const Input = ({ value, placeholder, label, type = "text", maxLength, disabled, onChange, onSubmit }) => {
+const Input = ({ value, placeholder, label, hint, error, prefix, suffix, type = "text", maxLength, disabled, onChange, onSubmit }) => {
+	const { colors } = useTheme();
+	const [text, typeText] = useTypedText(value, onChange !== void 0);
+	const box = useFieldBox(error, disabled);
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		hint,
+		error,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "dot-input",
+			style: {
+				...box.style,
+				display: "flex",
+				alignItems: "center",
+				gap: SPACE.medium,
+				padding: "0 14px"
+			},
+			children: [
+				prefix ? /* @__PURE__ */ jsx("span", {
+					style: { color: colors.subtle },
+					children: prefix
+				}) : null,
+				/* @__PURE__ */ jsx("input", {
+					...HTML_TYPES[type],
+					value: text,
+					placeholder,
+					maxLength,
+					disabled,
+					"aria-invalid": error ? true : void 0,
+					onFocus: box.onFocus,
+					onBlur: box.onBlur,
+					onChange: (event) => {
+						const next = event.currentTarget.value;
+						typeText(next);
+						onChange?.(createEvent("change", { value: next }));
+					},
+					onKeyDown: (event) => {
+						if (event.key === "Enter" && onSubmit) onSubmit(createEvent("submit", { value: text }));
+					},
+					style: {
+						flexGrow: 1,
+						minWidth: 0,
+						padding: "12px 0",
+						border: "none",
+						outline: "none",
+						background: "transparent",
+						color: "inherit",
+						font: "inherit"
+					}
+				}),
+				suffix ? /* @__PURE__ */ jsx("span", {
+					style: { color: colors.subtle },
+					children: suffix
+				}) : null
+			]
+		})
+	});
+};
+//#endregion
+//#region src/components/list.tsx
+const List$1 = ({ children }) => {
 	const { colors, radius } = useTheme();
-	const [text, setText] = useState(value ?? "");
-	const [awaitingEcho, setAwaitingEcho] = useState([]);
-	const [previousValue, setPreviousValue] = useState(value);
-	if (value !== previousValue) {
-		setPreviousValue(value);
-		const echo = awaitingEcho.indexOf(value ?? "");
-		if (echo >= 0) setAwaitingEcho(awaitingEcho.slice(echo + 1));
-		else {
-			setAwaitingEcho([]);
-			setText(value ?? "");
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-list",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1,
+			overflow: "hidden",
+			borderRadius: radius * CARD_RADIUS_SCALE,
+			border: `1px solid ${colors.border}`,
+			background: colors.border
+		},
+		children
+	});
+};
+const ListItem = ({ title, subtitle, value, icon, image, onTap, children }) => {
+	const { colors, radius } = useTheme();
+	let leading = null;
+	if (image) leading = /* @__PURE__ */ jsx("img", {
+		src: image,
+		alt: "",
+		width: 40,
+		height: 40,
+		style: {
+			borderRadius: radius,
+			objectFit: "cover",
+			flexShrink: 0
 		}
-	}
-	return /* @__PURE__ */ jsx("input", {
-		className: "dot-input",
-		...HTML_TYPES[type],
-		value: text,
-		placeholder,
-		"aria-label": label,
-		maxLength,
-		disabled,
-		onChange: (event) => {
-			const next = event.currentTarget.value;
-			setText(next);
-			if (onChange && value !== void 0) setAwaitingEcho([...awaitingEcho, next]);
-			onChange?.(createEvent("change", { value: next }));
+	});
+	else if (icon) leading = /* @__PURE__ */ jsx("span", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: 36,
+			height: 36,
+			borderRadius: "50%",
+			background: colors.muted,
+			flexShrink: 0
 		},
-		onKeyDown: (event) => {
-			if (event.key === "Enter" && onSubmit) onSubmit(createEvent("submit", { value: text }));
+		children: /* @__PURE__ */ jsx(IconGraphic, {
+			name: icon,
+			size: ICON_SIZE.medium,
+			color: colors.text
+		})
+	});
+	let trailing = children;
+	if (!trailing && value) trailing = /* @__PURE__ */ jsx("span", {
+		style: { color: colors.subtle },
+		children: value
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dot-list-item",
+		role: onTap ? "button" : void 0,
+		onClick: onTap ? () => onTap(createEvent("tap")) : void 0,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 12,
+			padding: "12px 16px",
+			background: colors.surface,
+			fontSize: FONT_SIZE.body,
+			cursor: onTap ? "pointer" : void 0
 		},
+		children: [
+			leading,
+			/* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					flexGrow: 1,
+					minWidth: 0
+				},
+				children: [title ? /* @__PURE__ */ jsx("span", {
+					style: { fontWeight: 500 },
+					children: title
+				}) : null, subtitle ? /* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: FONT_SIZE.caption,
+						color: colors.subtle
+					},
+					children: subtitle
+				}) : null]
+			}),
+			trailing ? /* @__PURE__ */ jsx("span", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: SPACE.small,
+					flexShrink: 0
+				},
+				children: trailing
+			}) : null,
+			onTap ? /* @__PURE__ */ jsx(IconGraphic, {
+				name: "chevron-right",
+				size: ICON_SIZE.small,
+				color: colors.subtle
+			}) : null
+		]
+	});
+};
+//#endregion
+//#region src/components/qr-code.tsx
+const DARK = "#000000";
+const LIGHT = "#ffffff";
+const QUIET_ZONE = 2;
+const QRCode = ({ value, size = 200, label }) => {
+	const { radius } = useTheme();
+	const drawing = useMemo(() => value ? drawCode(value) : null, [value]);
+	return /* @__PURE__ */ jsx("svg", {
+		className: "dot-qr-code",
+		role: "img",
+		"aria-label": label ?? value,
+		width: size,
+		height: size,
+		viewBox: drawing ? `0 0 ${drawing.size} ${drawing.size}` : "0 0 1 1",
+		shapeRendering: "crispEdges",
 		style: {
-			width: "100%",
-			boxSizing: "border-box",
-			padding: "12px 14px",
-			border: `1px solid ${colors.border}`,
+			display: "block",
+			flexShrink: 0,
 			borderRadius: radius,
-			background: colors.surface,
+			background: LIGHT
+		},
+		children: drawing ? /* @__PURE__ */ jsx("path", {
+			d: drawing.path,
+			fill: DARK
+		}) : null
+	});
+};
+function drawCode(value) {
+	let modules;
+	try {
+		modules = encode(value, {
+			ecc: "M",
+			border: QUIET_ZONE
+		}).data;
+	} catch {
+		return null;
+	}
+	const squares = [];
+	modules.forEach((row, y) => {
+		row.forEach((dark, x) => {
+			if (dark) squares.push(`M${x} ${y}h1v1h-1z`);
+		});
+	});
+	return {
+		size: modules.length,
+		path: squares.join("")
+	};
+}
+//#endregion
+//#region src/components/animate.ts
+function animate(element, keyframes, options) {
+	if (!element || typeof element.animate !== "function") return;
+	return element.animate(keyframes, options);
+}
+//#endregion
+//#region src/components/sheet.tsx
+const SLIDE_UP = [{ transform: "translateY(100%)" }, { transform: "translateY(0)" }];
+function SheetPanel({ open, title, onClose, children }) {
+	const { colors, radius } = useTheme();
+	const panel = useRef(null);
+	useEffect(() => {
+		if (open) animate(panel.current, SLIDE_UP, {
+			duration: 200,
+			easing: "ease-out"
+		});
+	}, [open]);
+	if (!open) return null;
+	const corner = radius * CARD_RADIUS_SCALE;
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-sheet",
+		onClick: onClose,
+		style: {
+			position: "fixed",
+			inset: 0,
+			zIndex: 100,
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "flex-end",
+			background: "rgba(0, 0, 0, 0.4)"
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: panel,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": title,
+			onClick: (event) => event.stopPropagation(),
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: SPACE.medium,
+				maxHeight: "85vh",
+				overflowY: "auto",
+				padding: `${SPACE.large}px ${SPACE.large}px 24px`,
+				borderTopLeftRadius: corner,
+				borderTopRightRadius: corner,
+				background: colors.surface,
+				color: colors.text
+			},
+			children: [title ? /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: FONT_SIZE.body,
+					fontWeight: 600,
+					textAlign: "center"
+				},
+				children: title
+			}) : null, children]
+		})
+	});
+}
+const Sheet = ({ open = false, title, onClose, children }) => /* @__PURE__ */ jsx(SheetPanel, {
+	open,
+	title,
+	onClose: () => onClose?.(createEvent("close")),
+	children
+});
+//#endregion
+//#region src/components/select.tsx
+const OptionPlaceContext = createContext({
+	inField: false,
+	value: void 0,
+	choose: void 0
+});
+const Select = ({ value, label, placeholder, hint, error, disabled, onChange, children }) => {
+	const { colors } = useTheme();
+	const [open, setOpen] = useState(false);
+	const box = useFieldBox(error, disabled);
+	const choose = (next) => {
+		setOpen(false);
+		onChange?.(createEvent("change", { value: next }));
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Field, {
+		label,
+		hint,
+		error,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "dot-select",
+			disabled,
+			onClick: () => setOpen(true),
+			onFocus: box.onFocus,
+			onBlur: box.onBlur,
+			style: {
+				font: "inherit",
+				...box.style,
+				display: "flex",
+				alignItems: "center",
+				gap: SPACE.medium,
+				width: "100%",
+				padding: "12px 14px",
+				textAlign: "start",
+				cursor: disabled ? "default" : "pointer"
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: { flexGrow: 1 },
+				children: value ? /* @__PURE__ */ jsx(OptionPlaceContext.Provider, {
+					value: {
+						inField: true,
+						value,
+						choose: void 0
+					},
+					children
+				}) : /* @__PURE__ */ jsx("span", {
+					style: { color: colors.subtle },
+					children: placeholder
+				})
+			}), /* @__PURE__ */ jsx(IconGraphic, {
+				name: "chevron-down",
+				size: ICON_SIZE.small,
+				color: colors.subtle
+			})]
+		})
+	}), /* @__PURE__ */ jsx(SheetPanel, {
+		open,
+		title: label,
+		onClose: () => setOpen(false),
+		children: /* @__PURE__ */ jsx("div", {
+			role: "listbox",
+			style: {
+				display: "flex",
+				flexDirection: "column"
+			},
+			children: /* @__PURE__ */ jsx(OptionPlaceContext.Provider, {
+				value: {
+					inField: false,
+					value,
+					choose
+				},
+				children
+			})
+		})
+	})] });
+};
+const Option = ({ value, label }) => {
+	const { colors } = useTheme();
+	const place = useContext(OptionPlaceContext);
+	const chosen = value !== void 0 && value === place.value;
+	if (place.inField) return chosen ? /* @__PURE__ */ jsx(Fragment$1, { children: label }) : null;
+	const { choose } = place;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "dot-option",
+		role: "option",
+		"aria-selected": chosen,
+		onClick: choose && value !== void 0 ? () => choose(value) : void 0,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			padding: "14px 4px",
+			border: "none",
+			borderBottom: `1px solid ${colors.border}`,
+			background: "transparent",
 			color: colors.text,
-			outlineColor: colors.primary,
 			font: "inherit",
-			fontSize: 16,
-			opacity: disabled ? DISABLED_OPACITY : 1
-		}
+			fontSize: FONT_SIZE.body,
+			fontWeight: chosen ? 600 : 400,
+			textAlign: "start",
+			cursor: "pointer"
+		},
+		children: [/* @__PURE__ */ jsx("span", { children: label }), chosen ? /* @__PURE__ */ jsx(IconGraphic, {
+			name: "check",
+			size: ICON_SIZE.medium,
+			color: colors.primary
+		}) : null]
+	});
+};
+//#endregion
+//#region src/components/skeleton.tsx
+const PULSE = [
+	{ opacity: 1 },
+	{ opacity: .4 },
+	{ opacity: 1 }
+];
+const LINE_HEIGHT = 12;
+const Skeleton = ({ shape = "text", lines = 1, height }) => {
+	const { colors, radius } = useTheme();
+	const placeholder = useRef(null);
+	useEffect(() => {
+		const pulse = animate(placeholder.current, PULSE, {
+			duration: 1200,
+			iterations: Infinity
+		});
+		return () => pulse?.cancel();
+	}, []);
+	let content;
+	if (shape === "circle") {
+		const size = height ?? 40;
+		content = /* @__PURE__ */ jsx("div", { style: {
+			width: size,
+			height: size,
+			borderRadius: "50%",
+			background: colors.muted
+		} });
+	} else if (shape === "box") content = /* @__PURE__ */ jsx("div", { style: {
+		height: height ?? 80,
+		borderRadius: radius,
+		background: colors.muted
+	} });
+	else {
+		const count = Math.max(1, lines);
+		content = Array.from({ length: count }, (_, index) => {
+			const last = count > 1 && index === count - 1;
+			return /* @__PURE__ */ jsx("div", { style: {
+				width: last ? "60%" : "100%",
+				height: LINE_HEIGHT,
+				borderRadius: LINE_HEIGHT / 2,
+				background: colors.muted
+			} }, index);
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		ref: placeholder,
+		className: "dot-skeleton",
+		"aria-busy": "true",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: SPACE.medium,
+			width: shape === "circle" ? void 0 : "100%",
+			flexShrink: shape === "circle" ? 0 : 1
+		},
+		children: content
+	});
+};
+//#endregion
+//#region src/components/tabs.tsx
+const TabsContext = createContext({
+	value: void 0,
+	segmented: false,
+	choose: void 0
+});
+const Tabs = ({ value, variant = "underline", onChange, children }) => {
+	const { colors, radius } = useTheme();
+	const segmented = variant === "segmented";
+	const choose = onChange ? (next) => {
+		if (next !== value) onChange(createEvent("change", { value: next }));
+	} : void 0;
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-tabs",
+		role: "tablist",
+		style: {
+			display: "flex",
+			overflowX: "auto",
+			...segmented ? {
+				gap: 2,
+				padding: 3,
+				borderRadius: radius,
+				background: colors.muted
+			} : { borderBottom: `1px solid ${colors.border}` }
+		},
+		children: /* @__PURE__ */ jsx(TabsContext.Provider, {
+			value: {
+				value,
+				segmented,
+				choose
+			},
+			children
+		})
+	});
+};
+const Tab = ({ value, label, badge }) => {
+	const { colors, radius } = useTheme();
+	const { value: chosen, segmented, choose } = useContext(TabsContext);
+	const selected = value !== void 0 && value === chosen;
+	let color = colors.subtle;
+	if (selected) color = segmented ? colors.text : colors.primary;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "tab",
+		"aria-selected": selected,
+		onClick: choose && value !== void 0 ? () => choose(value) : void 0,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: 6,
+			flex: "1 0 auto",
+			minHeight: segmented ? 36 : 44,
+			padding: "0 12px",
+			border: "none",
+			font: "inherit",
+			fontSize: FONT_SIZE.body,
+			fontWeight: selected ? 600 : 500,
+			whiteSpace: "nowrap",
+			color,
+			cursor: "pointer",
+			...segmented ? {
+				borderRadius: radius - 2,
+				background: selected ? colors.surface : "transparent",
+				boxShadow: selected ? "0 1px 3px rgba(0, 0, 0, 0.15)" : "none"
+			} : {
+				marginBottom: -1,
+				background: "transparent",
+				borderBottom: `2px solid ${selected ? colors.primary : "transparent"}`
+			}
+		},
+		children: [label, badge ? /* @__PURE__ */ jsx(Pill, {
+			background: colors.primary,
+			color: colors.surface,
+			children: badge
+		}) : null]
 	});
 };
 //#endregion
@@ -193,11 +1667,265 @@ const VARIANTS = {
 		fontWeight: 600
 	}
 };
-const Text = ({ variant = "body", children }) => /* @__PURE__ */ jsx("span", {
-	className: "dot-text",
-	style: VARIANTS[variant],
-	children
+const WEIGHTS = {
+	regular: 400,
+	medium: 500,
+	bold: 600
+};
+const Text = ({ variant = "body", tone, weight, align, maxLines, children }) => {
+	const { colors } = useTheme();
+	const style = {
+		...VARIANTS[variant],
+		textAlign: align
+	};
+	if (tone) style.color = toneColor(colors, tone);
+	if (weight) style.fontWeight = WEIGHTS[weight];
+	if (maxLines) Object.assign(style, {
+		display: "-webkit-box",
+		WebkitLineClamp: maxLines,
+		WebkitBoxOrient: "vertical",
+		overflow: "hidden"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "dot-text",
+		style,
+		children
+	});
+};
+//#endregion
+//#region src/components/text-area.tsx
+const TextArea = ({ value, placeholder, label, hint, error, rows = 3, maxLength, disabled, onChange }) => {
+	const [text, typeText] = useTypedText(value, onChange !== void 0);
+	const box = useFieldBox(error, disabled);
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		hint,
+		error,
+		children: /* @__PURE__ */ jsx("textarea", {
+			className: "dot-text-area",
+			value: text,
+			placeholder,
+			rows,
+			maxLength,
+			disabled,
+			"aria-invalid": error ? true : void 0,
+			onFocus: box.onFocus,
+			onBlur: box.onBlur,
+			onChange: (event) => {
+				const next = event.currentTarget.value;
+				typeText(next);
+				onChange?.(createEvent("change", { value: next }));
+			},
+			style: {
+				font: "inherit",
+				...box.style,
+				boxSizing: "border-box",
+				width: "100%",
+				padding: "12px 14px",
+				outline: "none",
+				resize: "none"
+			}
+		})
+	});
+};
+//#endregion
+//#region src/components/toast.tsx
+const Toast = ({ message, tone = "default", duration = 2500, onHide }) => {
+	const { colors, radius } = useTheme();
+	const [hidden, setHidden] = useState(false);
+	const [previousMessage, setPreviousMessage] = useState(message);
+	if (message !== previousMessage) {
+		setPreviousMessage(message);
+		setHidden(false);
+	}
+	const hide = useEffectEvent(() => {
+		setHidden(true);
+		onHide?.(createEvent("hide"));
+	});
+	useEffect(() => {
+		if (!message) return;
+		const timer = setTimeout(hide, duration);
+		return () => clearTimeout(timer);
+	}, [message, duration]);
+	if (!message || hidden) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dot-toast",
+		role: "status",
+		style: {
+			position: "fixed",
+			top: SPACE.large,
+			left: "50%",
+			transform: "translateX(-50%)",
+			zIndex: 110,
+			display: "flex",
+			alignItems: "center",
+			gap: SPACE.medium,
+			maxWidth: "calc(100% - 32px)",
+			width: "max-content",
+			padding: "10px 16px",
+			borderRadius: radius,
+			background: colors.primary,
+			color: colors.surface,
+			fontSize: FONT_SIZE.body,
+			boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2)"
+		},
+		children: [tone === "default" ? null : /* @__PURE__ */ jsx(IconGraphic, {
+			name: STATUS_ICONS[tone],
+			size: ICON_SIZE.medium,
+			color: toneColor(colors, tone)
+		}), /* @__PURE__ */ jsx("span", { children: message })]
+	});
+};
+//#endregion
+//#region src/components/toggles.tsx
+function rowStyle(colors, disabled) {
+	return {
+		display: "flex",
+		alignItems: "center",
+		gap: 12,
+		width: "100%",
+		padding: "6px 0",
+		border: "none",
+		background: "transparent",
+		color: colors.text,
+		font: "inherit",
+		fontSize: FONT_SIZE.body,
+		textAlign: "start",
+		opacity: disabled ? DISABLED_OPACITY : 1,
+		cursor: disabled ? "default" : "pointer"
+	};
+}
+function changeTo(checked, onChange) {
+	return onChange ? () => onChange(createEvent("change", { checked })) : void 0;
+}
+function ChoiceMark({ round, checked, children }) {
+	const { colors } = useTheme();
+	const filled = checked && !round;
+	return /* @__PURE__ */ jsx("span", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			width: 22,
+			height: 22,
+			boxSizing: "border-box",
+			borderRadius: round ? "50%" : 6,
+			border: `2px solid ${checked ? colors.primary : colors.subtle}`,
+			background: filled ? colors.primary : "transparent"
+		},
+		children
+	});
+}
+const Switch = ({ checked = false, label, disabled, onChange }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "dot-switch",
+		role: "switch",
+		"aria-checked": checked,
+		disabled,
+		onClick: changeTo(!checked, onChange),
+		style: {
+			...rowStyle(colors, disabled),
+			justifyContent: "space-between"
+		},
+		children: [label ? /* @__PURE__ */ jsx("span", { children: label }) : null, /* @__PURE__ */ jsx("span", {
+			style: {
+				position: "relative",
+				flexShrink: 0,
+				width: 44,
+				height: 26,
+				borderRadius: 13,
+				background: checked ? colors.primary : colors.subtle,
+				transition: "background 0.2s"
+			},
+			children: /* @__PURE__ */ jsx("span", { style: {
+				position: "absolute",
+				top: 2,
+				left: checked ? 20 : 2,
+				width: 22,
+				height: 22,
+				borderRadius: "50%",
+				background: colors.surface,
+				transition: "left 0.2s"
+			} })
+		})]
+	});
+};
+const Checkbox = ({ checked = false, label, disabled, onChange }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "dot-checkbox",
+		role: "checkbox",
+		"aria-checked": checked,
+		disabled,
+		onClick: changeTo(!checked, onChange),
+		style: rowStyle(colors, disabled),
+		children: [/* @__PURE__ */ jsx(ChoiceMark, {
+			round: false,
+			checked,
+			children: checked ? /* @__PURE__ */ jsx(IconGraphic, {
+				name: "check",
+				size: ICON_SIZE.small,
+				color: colors.surface
+			}) : null
+		}), label ? /* @__PURE__ */ jsx("span", { children: label }) : null]
+	});
+};
+const RadioGroupContext = createContext({
+	value: void 0,
+	disabled: true,
+	choose: void 0
 });
+const RadioGroup = ({ value, label, disabled = false, onChange, children }) => {
+	const choose = onChange ? (next) => onChange(createEvent("change", { value: next })) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dot-radio-group",
+		role: "radiogroup",
+		"aria-label": label,
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: SPACE.small
+		},
+		children: [label ? /* @__PURE__ */ jsx(FieldLabel, { children: label }) : null, /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+			value: {
+				value,
+				disabled,
+				choose
+			},
+			children
+		})]
+	});
+};
+const Radio = ({ value, label, disabled }) => {
+	const { colors } = useTheme();
+	const group = useContext(RadioGroupContext);
+	const selected = value !== void 0 && value === group.value;
+	const inactive = disabled || group.disabled;
+	const { choose } = group;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "dot-radio",
+		role: "radio",
+		"aria-checked": selected,
+		disabled: inactive,
+		onClick: choose && value !== void 0 ? () => choose(value) : void 0,
+		style: rowStyle(colors, inactive),
+		children: [/* @__PURE__ */ jsx(ChoiceMark, {
+			round: true,
+			checked: selected,
+			children: selected ? /* @__PURE__ */ jsx("span", { style: {
+				width: 10,
+				height: 10,
+				borderRadius: "50%",
+				background: colors.primary
+			} }) : null
+		}), label ? /* @__PURE__ */ jsx("span", { children: label }) : null]
+	});
+};
 //#endregion
 //#region src/components/view.tsx
 const ALIGN = {
@@ -206,18 +1934,32 @@ const ALIGN = {
 	center: "center",
 	end: "flex-end"
 };
-const View = ({ direction = "column", gap = "medium", align = "stretch", variant = "plain", onTap, children }) => {
+const JUSTIFY = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	between: "space-between"
+};
+const View = ({ direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, padding, paddingTop, paddingStart, paddingEnd, paddingBottom, variant = "plain", onTap, children }) => {
 	const { colors, radius } = useTheme();
 	const card = variant === "card";
+	const allSides = padding ?? (card ? "large" : "none");
 	return /* @__PURE__ */ jsx("div", {
 		className: "dot-view",
 		onClick: onTap ? () => onTap(createEvent("tap")) : void 0,
 		style: {
 			display: "flex",
 			flexDirection: direction,
-			gap: GAP[gap],
+			gap: SPACE[gap],
 			alignItems: ALIGN[align],
-			padding: card ? 16 : void 0,
+			justifyContent: JUSTIFY[justify],
+			flexWrap: wrap ? "wrap" : void 0,
+			flexGrow: grow ? 1 : void 0,
+			minWidth: grow ? 0 : void 0,
+			paddingTop: SPACE[paddingTop ?? allSides],
+			paddingInlineStart: SPACE[paddingStart ?? allSides],
+			paddingInlineEnd: SPACE[paddingEnd ?? allSides],
+			paddingBottom: SPACE[paddingBottom ?? allSides],
 			borderRadius: card ? radius * CARD_RADIUS_SCALE : void 0,
 			background: card ? colors.surface : void 0,
 			border: card ? `1px solid ${colors.border}` : void 0,
@@ -229,10 +1971,39 @@ const View = ({ direction = "column", gap = "medium", align = "stretch", variant
 //#endregion
 //#region src/components/index.ts
 const builtins = {
+	AmountInput,
+	Badge,
 	Button,
-	Image,
+	Carousel,
+	Checkbox,
+	Chip,
+	CodeInput,
+	Divider,
+	EmptyState,
+	Footer,
+	Grid,
+	GridItem,
+	Icon,
+	Image: Image$1,
 	Input,
+	List: List$1,
+	ListItem,
+	Notice,
+	Option,
+	ProgressBar,
+	QRCode,
+	Radio,
+	RadioGroup,
+	Select,
+	Sheet,
+	Skeleton,
+	Spinner,
+	Switch,
+	Tab,
+	Tabs,
 	Text,
+	TextArea,
+	Toast,
 	View
 };
 //#endregion
@@ -246,11 +2017,11 @@ function PageRoot({ page, components }) {
 			return createElement(component, props, ...children);
 		},
 		text: toText,
-		on: (handler) => page.on(handler),
+		on: (handler, data) => page.on(handler, data),
 		each: (items, render, key) => createElement(Fragment, null, toList(items).map((item, index) => createElement(Fragment, { key: key ? String(key(item, index)) : index }, ...render(item, index))))
 	}), [page, components]);
 	if (!state) return null;
-	return createElement(Fragment, null, ...page.viewRenderer(state, context));
+	return page.viewRenderer(state, context);
 }
 //#endregion
 //#region src/root.tsx
@@ -279,11 +2050,8 @@ function DefaultSurface({ children }) {
 		className: "dot-surface",
 		style: {
 			minHeight: "100vh",
-			boxSizing: "border-box",
-			padding: 16,
 			display: "flex",
 			flexDirection: "column",
-			gap: 12,
 			background: colors.background,
 			color: colors.text,
 			fontFamily: FONT_FAMILY