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

package/dist/index.js

@@ -1,1338 +1,43 @@
-import { createEvent, toList, toText } from "@monimesl/dot-core";
-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";
-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/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/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$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/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: {
-		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/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/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 = {
-	Badge,
-	Button,
-	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
-//#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 };