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

package/dist/components/toggles.js

@@ -0,0 +1,148 @@
+import { useTheme } from "../theme.js";
+import { CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
+import { FieldLabel } from "./field.js";
+import { CHECK_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.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: {
+			...CENTERED,
+			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(IconSvg, {
+					artwork: CHECK_ARTWORK,
+					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,49 @@
+//#region src/components/tokens.ts
+const SPACE = {
+	none: 0,
+	small: 4,
+	medium: 8,
+	large: 16
+};
+const FONT_SIZE = {
+	caption: 13,
+	body: 15,
+	lead: 17,
+	subtitle: 17,
+	title: 20,
+	display: 32
+};
+const WEIGHTS = {
+	regular: 400,
+	medium: 500,
+	bold: 600
+};
+const CARD_RADIUS_SCALE = 1.5;
+const DISABLED_OPACITY = .6;
+const CENTERED = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+};
+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"
+};
+const SELECTABLE = {
+	userSelect: "text",
+	WebkitUserSelect: "text"
+};
+//#endregion
+export { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SELECTABLE, SPACE, WEIGHTS };

package/dist/components/tones.js

@@ -0,0 +1,30 @@
+import { ERROR_ARTWORK, INFO_ARTWORK, SUCCESS_ARTWORK, WARNING_ARTWORK } from "./icon-artwork.js";
+import { TONES } from "@monimesl/dot-core";
+//#region src/components/tones.ts
+const TONE_WORDS = new Set(TONES);
+function isTone(word) {
+	return TONE_WORDS.has(word);
+}
+const STATUS_ARTWORK = {
+	default: INFO_ARTWORK,
+	info: INFO_ARTWORK,
+	success: SUCCESS_ARTWORK,
+	warning: WARNING_ARTWORK,
+	danger: ERROR_ARTWORK
+};
+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_ARTWORK, isTone, 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 echoIndex = awaitingEcho.indexOf(value ?? "");
+		if (echoIndex >= 0) setAwaitingEcho(awaitingEcho.slice(echoIndex + 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,61 @@
+import { useTheme } from "../theme.js";
+import { SPACE } from "./tokens.js";
+import { insets, paddingStyle } from "./padding.js";
+import { Footer as Footer$1 } from "./footer.js";
+import { pressable } from "./pressable.js";
+import { boxStyle } from "./box.js";
+import { createEvent } from "@monimesl/dot-core";
+import { Children, isValidElement } from "react";
+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 CARD_LOOK = {
+	background: "surface",
+	border: "subtle",
+	radius: "large"
+};
+const View$1 = (props) => {
+	const { direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = "plain", onTap, children } = props;
+	const theme = 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(props, card ? insets(SPACE.large) : void 0),
+		...boxStyle(props, theme, card ? CARD_LOOK : void 0),
+		cursor: onTap ? "pointer" : void 0
+	};
+	if (endsWithFooter(children)) style.paddingBottom = 0;
+	if (grow) {
+		style.flexGrow = 1;
+		style.minWidth = 0;
+	}
+	const press = onTap ? pressable(() => onTap(createEvent("tap"))) : void 0;
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-view",
+		style,
+		...press,
+		children
+	});
+};
+function endsWithFooter(children) {
+	const last = Children.toArray(children).at(-1);
+	return isValidElement(last) && last.type === Footer$1;
+}
+//#endregion
+export { View$1 as View };

package/dist/index.d.ts

@@ -1,48 +1,43 @@
-import { BuiltinComponents, ColorScheme, ComponentManifest, PropsOf, Theme } from "@monimesl/dot-core";
-import { ComponentType, JSXElementConstructor, ReactNode } from "react";
-import { Renderer } from "@monimesl/dot-webview";
-//#region src/root.d.ts
-type Wrapper = ComponentType<{
-  theme: Theme;
-  children: ReactNode;
-}>;
-//#endregion
-//#region src/types.d.ts
-type ReactComponent<M extends ComponentManifest> = ComponentType<PropsOf<M, ReactNode>>;
-type ReactComponents<Manifests extends Record<string, ComponentManifest>> = { readonly [K in keyof Manifests]: ReactComponent<Manifests[K]>; };
-type BuiltinReactComponents = ReactComponents<BuiltinComponents>;
-//#endregion
-//#region src/components/index.d.ts
-export declare const builtins: BuiltinReactComponents;
-//#endregion
-//#region src/renderer.d.ts
-interface ReactRendererOptions {
-  components?: Partial<BuiltinReactComponents> & Readonly<Record<string, JSXElementConstructor<never>>>;
-  wrapper?: Wrapper;
-}
-declare function reactRenderer({ components, wrapper }?: ReactRendererOptions): Renderer;
-//#endregion
-//#region src/theme.d.ts
-interface ResolvedColors {
-  primary: string;
-  background: string;
-  surface: string;
-  text: string;
-  subtle: string;
-  muted: string;
-  border: string;
-  info: string;
-  success: string;
-  warning: string;
-  danger: string;
-}
-interface ResolvedTheme {
-  scheme: ColorScheme;
-  colors: ResolvedColors;
-  radius: number;
-}
-export declare function resolveTheme(theme: Theme, systemScheme: ColorScheme): ResolvedTheme;
-export declare function useTheme(): ResolvedTheme;
-//#endregion
-export { type BuiltinReactComponents, type ReactComponent, type ReactComponents, type ReactRendererOptions, type ResolvedColors, type ResolvedTheme, type Wrapper, reactRenderer as default };
-//# sourceMappingURL=index.d.ts.map
+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 { Avatar } from "./components/avatar.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 { 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 { 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 { Bullet, BulletList, Prose, Quote } from "./components/prose.js";
+import { QRCode } from "./components/qr-code.js";
+import { RichText } from "./components/rich-text.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 { Slider } from "./components/slider.js";
+import { Spinner } from "./components/spinner.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 { 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, Avatar, Badge, type BuiltinReactComponents, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, type CreateReactRendererOptions, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, type ReactComponent, type ReactComponents, type ReactRendererOptions, type ResolvedColors, type ResolvedTheme, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, type Wrapper, createReactRenderer, reactRenderer as default, resolveTheme, useTheme };