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

package/dist/index.js

@@ -1,2089 +1,43 @@
-import { createEvent, toList, toText } from "@monimesl/dot-core";
-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";
-const DEFAULT_RADIUS = 12;
-const DEFAULT_COLORS = {
-	light: {
-		primary: "#1c1c1e",
-		background: "#f2f2f2",
-		surface: "#ffffff",
-		text: "#111111",
-		subtle: "#8e8e93",
-		muted: "#e9e9eb",
-		border: "#e9e9eb",
-		info: "#0a64d6",
-		success: "#1a8a4a",
-		warning: "#b25e00",
-		danger: "#d0312d"
-	},
-	dark: {
-		primary: "#f5f5f5",
-		background: "#121212",
-		surface: "#1e1e1e",
-		text: "#f5f5f5",
-		subtle: "#8e8e93",
-		muted: "#2c2c2e",
-		border: "#2a2a2c",
-		info: "#4c9dff",
-		success: "#3ecf72",
-		warning: "#ffb340",
-		danger: "#ff6961"
-	}
-};
-function resolveTheme(theme, systemScheme) {
-	const scheme = !theme.scheme || theme.scheme === "system" ? systemScheme : theme.scheme;
-	const defaults = DEFAULT_COLORS[scheme];
-	const colors = theme.colors ?? {};
-	const pick = (color, fallback) => color?.[scheme] ?? fallback;
-	return {
-		scheme,
-		colors: {
-			primary: pick(colors.primary, defaults.primary),
-			background: pick(colors.background, defaults.background),
-			surface: pick(colors.surface, defaults.surface),
-			text: pick(colors.text, defaults.text),
-			subtle: defaults.subtle,
-			muted: defaults.muted,
-			border: defaults.border,
-			info: defaults.info,
-			success: defaults.success,
-			warning: defaults.warning,
-			danger: defaults.danger
-		},
-		radius: theme.radius ?? DEFAULT_RADIUS
-	};
-}
-const ThemeContext = createContext(resolveTheme({}, "light"));
-function useTheme() {
-	return useContext(ThemeContext);
-}
-//#endregion
-//#region src/components/tokens.ts
-const SPACE = {
-	none: 0,
-	small: 4,
-	medium: 8,
-	large: 16
-};
-const FONT_SIZE = {
-	caption: 13,
-	body: 15,
-	title: 20
-};
-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, 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__ */ jsxs("button", {
-		type: "button",
-		className: "dot-button",
-		"data-variant": variant,
-		disabled,
-		"aria-busy": loading,
-		onClick: onClick && !loading ? () => onClick(createEvent("click")) : void 0,
-		style: {
-			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,
-			color,
-			font: "inherit",
-			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$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: corners,
-			objectFit: fit
-		},
-		onLoad: onLoad ? (event) => {
-			const { naturalWidth, naturalHeight } = event.currentTarget;
-			onLoad(createEvent("load", {
-				width: naturalWidth,
-				height: naturalHeight
-			}));
-		} : void 0,
-		onError: onError ? () => onError(createEvent("error", { message: `Failed to load ${src}` })) : void 0
-	});
-};
-//#endregion
-//#region src/components/input.tsx
-const HTML_TYPES = {
-	text: {
-		type: "text",
-		inputMode: "text"
-	},
-	number: {
-		type: "text",
-		inputMode: "decimal"
-	},
-	email: {
-		type: "email",
-		inputMode: "email"
-	},
-	phone: {
-		type: "tel",
-		inputMode: "tel"
-	},
-	password: {
-		type: "password",
-		inputMode: "text"
-	}
-};
-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();
-	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
-		}
-	});
-	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
-		},
-		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: {
-			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;
-	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,
-			font: "inherit",
-			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
-//#region src/components/text.tsx
-const VARIANTS = {
-	body: { fontSize: FONT_SIZE.body },
-	caption: { fontSize: FONT_SIZE.caption },
-	title: {
-		fontSize: FONT_SIZE.title,
-		fontWeight: 600
-	}
-};
-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 = {
-	stretch: "stretch",
-	start: "flex-start",
-	center: "center",
-	end: "flex-end"
-};
-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: SPACE[gap],
-			alignItems: ALIGN[align],
-			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,
-			cursor: onTap ? "pointer" : void 0
-		},
-		children
-	});
-};
-//#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,
-	List: List$1,
-	ListItem,
-	Notice,
-	Option,
-	ProgressBar,
-	QRCode,
-	Radio,
-	RadioGroup,
-	Select,
-	Sheet,
-	Skeleton,
-	Spinner,
-	Switch,
-	Tab,
-	Tabs,
-	Text,
-	TextArea,
-	Toast,
-	View
-};
-//#endregion
-//#region src/page-root.tsx
-function PageRoot({ page, components }) {
-	const state = useSyncExternalStore(page.subscribe, page.getState);
-	const context = useMemo(() => ({
-		h(type, props, ...children) {
-			const component = components[type];
-			if (!component) throw new Error(`The renderer has no component registered for tag '<${type}>'`);
-			return createElement(component, props, ...children);
-		},
-		text: toText,
-		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 page.viewRenderer(state, context);
-}
-//#endregion
-//#region src/root.tsx
-function Root({ page, dotContext, components, wrapper: Wrapper }) {
-	const theme = useSyncExternalStore(dotContext.theme.subscribe, dotContext.theme.get);
-	const systemContext = useSyncExternalStore(dotContext.systemContext.subscribe, dotContext.systemContext.get);
-	const resolved = useMemo(() => resolveTheme(theme, systemContext.scheme), [theme, systemContext.scheme]);
-	const content = /* @__PURE__ */ jsx(PageRoot, {
-		page,
-		components
-	});
-	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
-		value: resolved,
-		children: Wrapper ? /* @__PURE__ */ jsx(Wrapper, {
-			theme: {
-				...theme,
-				scheme: resolved.scheme
-			},
-			children: content
-		}) : /* @__PURE__ */ jsx(DefaultSurface, { children: content })
-	});
-}
-function DefaultSurface({ children }) {
-	const { colors } = useTheme();
-	return /* @__PURE__ */ jsx("div", {
-		className: "dot-surface",
-		style: {
-			minHeight: "100vh",
-			display: "flex",
-			flexDirection: "column",
-			background: colors.background,
-			color: colors.text,
-			fontFamily: FONT_FAMILY
-		},
-		children
-	});
-}
-//#endregion
-//#region src/renderer.tsx
-function reactRenderer({ components = {}, wrapper } = {}) {
-	const registry = {
-		...builtins,
-		...components
-	};
-	return {
-		name: "react",
-		mount(container, page, dotContext) {
-			const root = createRoot(container);
-			root.render(/* @__PURE__ */ jsx(Root, {
-				page,
-				dotContext,
-				components: registry,
-				wrapper
-			}));
-			return () => root.unmount();
-		}
-	};
-}
-//#endregion
+import { resolveTheme, useTheme } from "./theme.js";
+import { AmountInput } from "./components/amount-input.js";
+import { Avatar } from "./components/avatar.js";
+import { Spinner } from "./components/spinner.js";
+import { Button } from "./components/button.js";
+import { Carousel } from "./components/carousel.js";
+import { Icon } from "./components/icon.js";
+import { Chip } from "./components/chip.js";
+import { CodeInput } from "./components/code-input.js";
+import { DetailRow } from "./components/detail-row.js";
+import { Disclosure } from "./components/disclosure.js";
+import { Divider } from "./components/divider.js";
+import { EmptyState } from "./components/empty-state.js";
+import { Badge, Notice, ProgressBar } from "./components/feedback.js";
+import { Footer } from "./components/footer.js";
+import { Grid, GridItem } from "./components/grid.js";
+import { Image } from "./components/image.js";
+import { Input } from "./components/input.js";
+import { Link } from "./components/link.js";
+import { List, ListItem } from "./components/list.js";
+import { Option } from "./components/option.js";
+import { Bullet, BulletList, Prose, Quote } from "./components/prose.js";
+import { QRCode } from "./components/qr-code.js";
+import { Text } from "./components/text.js";
+import { RichText } from "./components/rich-text.js";
+import { Scroll } from "./components/scroll.js";
+import { Sheet } from "./components/sheet.js";
+import { Select } from "./components/select.js";
+import { Skeleton } from "./components/skeleton.js";
+import { Slider } from "./components/slider.js";
+import { Stack } from "./components/stack.js";
+import { Step, Steps } from "./components/steps.js";
+import { Stepper } from "./components/stepper.js";
+import { Tab, Tabs } from "./components/tabs.js";
+import { TextArea } from "./components/text-area.js";
+import { Toast } from "./components/toast.js";
+import { Checkbox, Radio, RadioGroup, Switch } from "./components/toggles.js";
+import { View } from "./components/view.js";
+import { createReactRenderer, reactRenderer } from "./renderer.js";
 //#region src/index.ts
 var src_default = reactRenderer;
 //#endregion
-export { builtins, src_default as default, resolveTheme, useTheme };
-
-//# sourceMappingURL=index.js.map
+export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, createReactRenderer, src_default as default, resolveTheme, useTheme };