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

package/dist/index.js

@@ -1,6 +1,7 @@
 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 { Fragment, createContext, createElement, 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 { createRoot } from "react-dom/client";
 //#region src/theme.ts
 const FONT_FAMILY = "system-ui, sans-serif";
@@ -13,7 +14,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 +27,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 +48,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 +63,7 @@ function useTheme() {
 }
 //#endregion
 //#region src/components/tokens.ts
-const GAP = {
+const SPACE = {
 	none: 0,
 	small: 4,
 	medium: 8,
@@ -63,22 +76,77 @@ 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/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 +155,259 @@ const Button = ({ variant = "primary", disabled, onClick, children }) => {
 			fontSize: FONT_SIZE.body,
 			fontWeight: 600,
 			opacity: disabled ? DISABLED_OPACITY : 1,
-			cursor: disabled ? "default" : "pointer"
+			cursor: disabled || loading ? "default" : "pointer"
+		},
+		children: [loading ? /* @__PURE__ */ jsx(LoadingIcon, { size: ICON_SIZE.small }) : null, children]
+	});
+};
+//#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/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/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/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", {
@@ -114,6 +419,82 @@ const Image = ({ src, alt, width, height, onLoad, onError }) => {
 	});
 };
 //#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: {
@@ -137,50 +518,402 @@ 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("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 }));
-		},
-		onKeyDown: (event) => {
-			if (event.key === "Enter" && onSubmit) onSubmit(createEvent("submit", { value: text }));
-		},
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-list",
 		style: {
-			width: "100%",
-			boxSizing: "border-box",
-			padding: "12px 14px",
+			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/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
@@ -193,11 +926,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 +1193,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 +1230,29 @@ const View = ({ direction = "column", gap = "medium", align = "stretch", variant
 //#endregion
 //#region src/components/index.ts
 const builtins = {
+	Badge,
 	Button,
-	Image,
+	Checkbox,
+	Divider,
+	Footer,
+	Icon,
+	Image: Image$1,
 	Input,
+	List: List$1,
+	ListItem,
+	Notice,
+	Option,
+	ProgressBar,
+	Radio,
+	RadioGroup,
+	Select,
+	Sheet,
+	Skeleton,
+	Spinner,
+	Switch,
 	Text,
+	TextArea,
+	Toast,
 	View
 };
 //#endregion
@@ -246,11 +1266,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 +1299,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