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

package/dist/index.js

@@ -1,7 +1,8 @@
 import { createEvent, toList, toText } from "@monimesl/dot-core";
-import { Fragment, createContext, createElement, useContext, useEffect, useEffectEvent, useMemo, useRef, useState, useSyncExternalStore } from "react";
+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";
@@ -82,6 +83,165 @@ const ICON_SIZE = {
 	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", {
@@ -161,20 +321,251 @@ const Button = ({ variant = "primary", disabled, loading, onClick, children }) =
 	});
 };
 //#endregion
-//#region src/components/divider.tsx
-const Divider = () => {
+//#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();
-	return /* @__PURE__ */ jsx("div", {
-		className: "dot-divider",
-		role: "separator",
-		style: {
-			height: 1,
-			alignSelf: "stretch",
-			flexShrink: 0,
-			background: colors.border
+	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 = {
@@ -295,6 +686,203 @@ const Icon = ({ name, size = "medium", tone = "default" }) => {
 	});
 };
 //#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();
@@ -390,6 +978,107 @@ const Footer = ({ 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$1 = ({ src, alt, width, height, fit = "cover", shape = "rounded", onLoad, onError }) => {
 	const { radius } = useTheme();
@@ -419,82 +1108,6 @@ const Image$1 = ({ src, alt, width, height, fit = "cover", shape = "rounded", on
 	});
 };
 //#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) {
-	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 ?? "");
-		}
-	}
-	const type = (next) => {
-		setText(next);
-		if (sendsChanges && value !== void 0) setAwaitingEcho([...awaitingEcho, next]);
-	};
-	return [text, type];
-}
-//#endregion
 //#region src/components/input.tsx
 const HTML_TYPES = {
 	text: {
@@ -681,6 +1294,55 @@ const ListItem = ({ title, subtitle, value, icon, image, onTap, children }) => {
 	});
 };
 //#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: {
+			display: "block",
+			flexShrink: 0,
+			borderRadius: radius,
+			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;
@@ -917,6 +1579,85 @@ const Skeleton = ({ shape = "text", lines = 1, height }) => {
 	});
 };
 //#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
 //#region src/components/text.tsx
 const VARIANTS = {
 	body: { fontSize: FONT_SIZE.body },
@@ -1230,11 +1971,18 @@ const View = ({ direction = "column", gap = "medium", align = "stretch", justify
 //#endregion
 //#region src/components/index.ts
 const builtins = {
+	AmountInput,
 	Badge,
 	Button,
+	Carousel,
 	Checkbox,
+	Chip,
+	CodeInput,
 	Divider,
+	EmptyState,
 	Footer,
+	Grid,
+	GridItem,
 	Icon,
 	Image: Image$1,
 	Input,
@@ -1243,6 +1991,7 @@ const builtins = {
 	Notice,
 	Option,
 	ProgressBar,
+	QRCode,
 	Radio,
 	RadioGroup,
 	Select,
@@ -1250,6 +1999,8 @@ const builtins = {
 	Skeleton,
 	Spinner,
 	Switch,
+	Tab,
+	Tabs,
 	Text,
 	TextArea,
 	Toast,