@monimesl/dot-renderer-react 0.1.0-alpha.10

package/dist/components/text-area.js

@@ -0,0 +1,42 @@
+import { Field } from "./field.js";
+import { useFieldBox, useFieldNote } from "./field-box.js";
+import { useTypedText } from "./typed-text.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/text-area.tsx
+const TextArea$1 = ({ value, placeholder, label, hint, error, rows = 3, maxLength, disabled, onChange }) => {
+	const [text, typeText] = useTypedText(value, onChange !== void 0);
+	const box = useFieldBox(error, disabled);
+	const { noteId, controlAttributes } = useFieldNote(hint, error);
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		hint,
+		error,
+		noteId,
+		children: /* @__PURE__ */ jsx("textarea", {
+			className: "dot-text-area",
+			value: text,
+			placeholder,
+			rows,
+			maxLength,
+			disabled,
+			...controlAttributes,
+			onFocus: box.onFocus,
+			onBlur: box.onBlur,
+			onChange: (event) => {
+				const next = event.currentTarget.value;
+				typeText(next);
+				onChange?.(createEvent("change", { value: next }));
+			},
+			style: {
+				...box.style,
+				width: "100%",
+				padding: "12px 14px",
+				outline: "none",
+				resize: "none"
+			}
+		})
+	});
+};
+//#endregion
+export { TextArea$1 as TextArea };

package/dist/components/text.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Text } from "@monimesl/dot-core";
+//#region src/components/text.d.ts
+declare const Text$1: ReactComponent<typeof Text>;
+//#endregion
+export { Text$1 as Text };

package/dist/components/text.js

@@ -0,0 +1,46 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, WEIGHTS } from "./tokens.js";
+import { paddingStyle } from "./padding.js";
+import { toneColor } from "./tones.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/text.tsx
+const InsideText = createContext(false);
+const Text = ({ variant = "body", tone, weight, align, maxLines, children, ...padding }) => {
+	const { colors } = useTheme();
+	const nested = useContext(InsideText);
+	const defaultWeight = variant === "title" ? "bold" : "regular";
+	const style = {
+		display: nested ? "inline" : "block",
+		margin: 0,
+		fontSize: FONT_SIZE[variant],
+		lineHeight: "normal",
+		fontWeight: WEIGHTS[weight ?? defaultWeight],
+		letterSpacing: "normal",
+		color: tone ? toneColor(colors, tone) : "inherit",
+		textAlign: align,
+		...paddingStyle(padding)
+	};
+	if (maxLines) {
+		style.display = "-webkit-box";
+		style.WebkitLineClamp = maxLines;
+		style.WebkitBoxOrient = "vertical";
+		style.overflow = "hidden";
+	}
+	const content = /* @__PURE__ */ jsx(InsideText.Provider, {
+		value: true,
+		children
+	});
+	if (variant === "title" && !nested) return /* @__PURE__ */ jsx("h2", {
+		className: "dot-text",
+		style,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "dot-text",
+		style,
+		children: content
+	});
+};
+//#endregion
+export { Text };

package/dist/components/toast.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Toast } from "@monimesl/dot-core";
+//#region src/components/toast.d.ts
+declare const Toast$1: ReactComponent<typeof Toast>;
+//#endregion
+export { Toast$1 as Toast };

package/dist/components/toast.js

@@ -0,0 +1,56 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
+import { STATUS_ICONS } from "./tones.js";
+import { IconGraphic } from "./icon.js";
+import { createEvent } from "@monimesl/dot-core";
+import { useEffect, useEffectEvent, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/toast.tsx
+const Toast$1 = ({ 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.onPrimary,
+			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: colors.onPrimary
+		}), /* @__PURE__ */ jsx("span", { children: message })]
+	});
+};
+//#endregion
+export { Toast$1 as Toast };

package/dist/components/toggles.d.ts

@@ -0,0 +1,9 @@
+import { ReactComponent } from "../types.js";
+import { Checkbox, Radio, RadioGroup, Switch } from "@monimesl/dot-core";
+//#region src/components/toggles.d.ts
+declare const Switch$1: ReactComponent<typeof Switch>;
+declare const Checkbox$1: ReactComponent<typeof Checkbox>;
+declare const RadioGroup$1: ReactComponent<typeof RadioGroup>;
+declare const Radio$1: ReactComponent<typeof Radio>;
+//#endregion
+export { Checkbox$1 as Checkbox, Radio$1 as Radio, RadioGroup$1 as RadioGroup, Switch$1 as Switch };

package/dist/components/toggles.js

@@ -0,0 +1,149 @@
+import { useTheme } from "../theme.js";
+import { DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
+import { FieldLabel } from "./field.js";
+import { IconGraphic } from "./icon.js";
+import { CheckboxRoot } from "../vendor/@base-ui/react/checkbox/root/CheckboxRoot.js";
+import { CheckboxIndicator } from "../vendor/@base-ui/react/checkbox/indicator/CheckboxIndicator.js";
+import { RadioRoot } from "../vendor/@base-ui/react/radio/root/RadioRoot.js";
+import { RadioIndicator } from "../vendor/@base-ui/react/radio/indicator/RadioIndicator.js";
+import { RadioGroup as RadioGroup$2 } from "../vendor/@base-ui/react/radio-group/RadioGroup.js";
+import { SwitchRoot } from "../vendor/@base-ui/react/switch/root/SwitchRoot.js";
+import { SwitchThumb } from "../vendor/@base-ui/react/switch/thumb/SwitchThumb.js";
+import { createEvent } from "@monimesl/dot-core";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#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,
+		fontSize: FONT_SIZE.body,
+		textAlign: "start",
+		opacity: disabled ? DISABLED_OPACITY : 1,
+		cursor: disabled ? "default" : "pointer"
+	};
+}
+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,
+			borderRadius: round ? "50%" : 6,
+			border: `2px solid ${checked ? colors.primary : colors.subtle}`,
+			background: filled ? colors.primary : "transparent"
+		},
+		children
+	});
+}
+const Switch$1 = ({ checked = false, label, disabled, onChange }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsxs(SwitchRoot, {
+		className: "dot-switch",
+		checked,
+		disabled,
+		onCheckedChange: (next) => onChange?.(createEvent("change", { checked: next })),
+		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(SwitchThumb, { style: {
+				position: "absolute",
+				top: 2,
+				left: checked ? 20 : 2,
+				width: 22,
+				height: 22,
+				borderRadius: "50%",
+				background: colors.surface,
+				transition: "left 0.2s"
+			} })
+		})]
+	});
+};
+const Checkbox$1 = ({ checked = false, label, disabled, onChange }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsxs(CheckboxRoot, {
+		className: "dot-checkbox",
+		checked,
+		disabled,
+		onCheckedChange: (next) => onChange?.(createEvent("change", { checked: next })),
+		style: rowStyle(colors, disabled),
+		children: [/* @__PURE__ */ jsx(ChoiceMark, {
+			round: false,
+			checked,
+			children: /* @__PURE__ */ jsx(CheckboxIndicator, {
+				style: { display: "flex" },
+				children: /* @__PURE__ */ jsx(IconGraphic, {
+					name: "check",
+					size: ICON_SIZE.small,
+					color: colors.onPrimary
+				})
+			})
+		}), label ? /* @__PURE__ */ jsx("span", { children: label }) : null]
+	});
+};
+const RadioGroup$1 = ({ value, label, disabled = false, onChange, children }) => {
+	const labelId = useId();
+	return /* @__PURE__ */ jsxs(RadioGroup$2, {
+		className: "dot-radio-group",
+		"aria-labelledby": label ? labelId : void 0,
+		value: value ?? "",
+		disabled,
+		onValueChange: (next) => onChange?.(createEvent("change", { value: String(next) })),
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: SPACE.small
+		},
+		children: [label ? /* @__PURE__ */ jsx(FieldLabel, {
+			id: labelId,
+			children: label
+		}) : null, children]
+	});
+};
+const Radio$1 = ({ value, label, disabled }) => {
+	const { colors } = useTheme();
+	if (value === void 0) return null;
+	return /* @__PURE__ */ jsx(RadioRoot, {
+		className: "dot-radio",
+		value,
+		disabled,
+		style: (state) => rowStyle(colors, state.disabled),
+		render: (props, state) => /* @__PURE__ */ jsxs("span", {
+			...props,
+			children: [/* @__PURE__ */ jsx(ChoiceMark, {
+				round: true,
+				checked: state.checked,
+				children: /* @__PURE__ */ jsx(RadioIndicator, { style: {
+					width: 10,
+					height: 10,
+					borderRadius: "50%",
+					background: colors.primary
+				} })
+			}), label ? /* @__PURE__ */ jsx("span", { children: label }) : null]
+		})
+	});
+};
+//#endregion
+export { Checkbox$1 as Checkbox, Radio$1 as Radio, RadioGroup$1 as RadioGroup, Switch$1 as Switch };

package/dist/components/tokens.js

@@ -0,0 +1,37 @@
+//#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 WEIGHTS = {
+	regular: 400,
+	medium: 500,
+	bold: 600
+};
+const CARD_RADIUS_SCALE = 1.5;
+const DISABLED_OPACITY = .6;
+const ICON_SIZE = {
+	small: 16,
+	medium: 20,
+	large: 28
+};
+const PILL_STYLE = {
+	boxSizing: "content-box",
+	minWidth: 18,
+	minHeight: 16,
+	padding: "1px 6px",
+	borderRadius: 9,
+	fontSize: 11,
+	fontWeight: WEIGHTS.bold,
+	lineHeight: "16px",
+	textAlign: "center"
+};
+//#endregion
+export { CARD_RADIUS_SCALE, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SPACE, WEIGHTS };

package/dist/components/tones.js

@@ -0,0 +1,24 @@
+//#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
+export { STATUS_ICONS, toneBackground, toneColor };

package/dist/components/typed-text.js

@@ -0,0 +1,28 @@
+import { useState } from "react";
+//#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]);
+	};
+	const reshow = (next) => setText(next);
+	return [
+		text,
+		type,
+		reshow
+	];
+}
+//#endregion
+export { useTypedText };

package/dist/components/view.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { View } from "@monimesl/dot-core";
+//#region src/components/view.d.ts
+declare const View$1: ReactComponent<typeof View>;
+//#endregion
+export { View$1 as View };

package/dist/components/view.js

@@ -0,0 +1,51 @@
+import { useTheme } from "../theme.js";
+import { CARD_RADIUS_SCALE, SPACE } from "./tokens.js";
+import { insets, paddingStyle } from "./padding.js";
+import { pressable } from "./pressable.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx } from "react/jsx-runtime";
+//#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$1 = ({ direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = "plain", onTap, children, ...padding }) => {
+	const { colors, radius } = useTheme();
+	const card = variant === "card";
+	const style = {
+		display: "flex",
+		flexDirection: direction,
+		alignItems: ALIGN[align],
+		justifyContent: JUSTIFY[justify],
+		flexWrap: wrap ? "wrap" : "nowrap",
+		gap: SPACE[gap],
+		...paddingStyle(padding, card ? insets(SPACE.large) : void 0),
+		cursor: onTap ? "pointer" : void 0
+	};
+	if (grow) {
+		style.flexGrow = 1;
+		style.minWidth = 0;
+	}
+	if (card) {
+		style.background = colors.surface;
+		style.border = `1px solid ${colors.border}`;
+		style.borderRadius = radius * CARD_RADIUS_SCALE;
+	}
+	const press = onTap ? pressable(() => onTap(createEvent("tap"))) : void 0;
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-view",
+		style,
+		...press,
+		children
+	});
+};
+//#endregion
+export { View$1 as View };

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+import { Wrapper } from "./root.js";
+import { BuiltinReactComponents, ReactComponent, ReactComponents } from "./types.js";
+import { CreateReactRendererOptions, ReactRendererOptions, createReactRenderer, reactRenderer } from "./renderer.js";
+import { AmountInput } from "./components/amount-input.js";
+import { Button } from "./components/button.js";
+import { Carousel } from "./components/carousel.js";
+import { Chip } from "./components/chip.js";
+import { CodeInput } from "./components/code-input.js";
+import { DetailRow } from "./components/detail-row.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 { Icon } from "./components/icon.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 { QRCode } from "./components/qr-code.js";
+import { Scroll } from "./components/scroll.js";
+import { Select } from "./components/select.js";
+import { Sheet } from "./components/sheet.js";
+import { Skeleton } from "./components/skeleton.js";
+import { Spinner } from "./components/spinner.js";
+import { Tab, Tabs } from "./components/tabs.js";
+import { Text } from "./components/text.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 "./components/index.js";
+import { ResolvedColors, ResolvedTheme, resolveTheme, useTheme } from "./theme.js";
+export { AmountInput, Badge, type BuiltinReactComponents, Button, Carousel, Checkbox, Chip, CodeInput, type CreateReactRendererOptions, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, type ReactComponent, type ReactComponents, type ReactRendererOptions, type ResolvedColors, type ResolvedTheme, Scroll, Select, Sheet, Skeleton, Spinner, Switch, Tab, Tabs, Text, TextArea, Toast, View, type Wrapper, createReactRenderer, reactRenderer as default, resolveTheme, useTheme };

package/dist/index.js

@@ -0,0 +1,35 @@
+import { resolveTheme, useTheme } from "./theme.js";
+import { AmountInput } from "./components/amount-input.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 { 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 { QRCode } from "./components/qr-code.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 { Tab, Tabs } from "./components/tabs.js";
+import { Text } from "./components/text.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 { AmountInput, Badge, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, Scroll, Select, Sheet, Skeleton, Spinner, Switch, Tab, Tabs, Text, TextArea, Toast, View, createReactRenderer, src_default as default, resolveTheme, useTheme };

package/dist/page-root.d.ts

@@ -0,0 +1,2 @@
+import { ComponentType, ReactNode } from "react";
+import "@monimesl/dot-webview";

package/dist/page-root.js

@@ -0,0 +1,20 @@
+import { toList, toText } from "@monimesl/dot-core";
+import { Fragment, createElement, useMemo, useSyncExternalStore } from "react";
+//#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 for <${type}>. Check the tag's name, or pass a component for it to the renderer.`);
+			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
+export { PageRoot };

package/dist/portal.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+//#region src/portal.ts
+const PortalContainerContext = createContext(null);
+function usePortalContainer() {
+	return useContext(PortalContainerContext) ?? void 0;
+}
+//#endregion
+export { PortalContainerContext, usePortalContainer };

package/dist/react-host/19.3.0/react-dom-client.js

@@ -0,0 +1,3 @@
+import { ReactDomClient } from './react-host.js';
+export default ReactDomClient;
+export const { createRoot, hydrateRoot, version } = ReactDomClient;

package/dist/react-host/19.3.0/react-dom.js

@@ -0,0 +1,3 @@
+import { ReactDom } from './react-host.js';
+export default ReactDom;
+export const { __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, browser, createPortal, flushSync, preconnect, prefetchDNS, preinit, preinitModule, preload, preloadModule, requestFormReset, unstable_batchedUpdates, useFormState, useFormStatus, version } = ReactDom;