@monimesl/dot-renderer-react 0.1.0-alpha.8 → 1.0.0-beta.0

package/dist/components/image.js

@@ -0,0 +1,40 @@
+import { useTheme } from "../theme.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/image.tsx
+const SHAPE_RADIUS = {
+	square: 0,
+	circle: "50%"
+};
+const Image$1 = ({ src, alt, width, height, fit = "cover", shape = "rounded", aspect, onLoad, onError }) => {
+	const { radius } = useTheme();
+	const handleLoad = onLoad ? (event) => {
+		const { naturalWidth, naturalHeight } = event.currentTarget;
+		onLoad(createEvent("load", {
+			width: naturalWidth,
+			height: naturalHeight
+		}));
+	} : void 0;
+	const handleError = onError ? () => onError(createEvent("error", { message: `Failed to load ${src}` })) : void 0;
+	const style = {
+		objectFit: fit,
+		borderRadius: SHAPE_RADIUS[shape] ?? radius
+	};
+	if (aspect) {
+		style.width = width ?? "100%";
+		style.height = "auto";
+		style.aspectRatio = aspect.replace(":", " / ");
+	}
+	return /* @__PURE__ */ jsx("img", {
+		className: "dot-image",
+		src,
+		alt: alt ?? "",
+		width,
+		height: aspect ? void 0 : height,
+		style,
+		onLoad: handleLoad,
+		onError: handleError
+	});
+};
+//#endregion
+export { Image$1 as Image };

package/dist/components/index.d.ts

@@ -0,0 +1,38 @@
+import { AmountInput } from "./amount-input.js";
+import { Avatar } from "./avatar.js";
+import { Button } from "./button.js";
+import { Carousel } from "./carousel.js";
+import { Chip } from "./chip.js";
+import { CodeInput } from "./code-input.js";
+import { DetailRow } from "./detail-row.js";
+import { Disclosure } from "./disclosure.js";
+import { Divider } from "./divider.js";
+import { EmptyState } from "./empty-state.js";
+import { Badge, Notice, ProgressBar } from "./feedback.js";
+import { Footer } from "./footer.js";
+import { Grid, GridItem } from "./grid.js";
+import { Icon } from "./icon.js";
+import { Image } from "./image.js";
+import { Input } from "./input.js";
+import { Link } from "./link.js";
+import { List, ListItem } from "./list.js";
+import { Option } from "./option.js";
+import { Bullet, BulletList, Prose, Quote } from "./prose.js";
+import { QRCode } from "./qr-code.js";
+import { RichText } from "./rich-text.js";
+import { Scroll } from "./scroll.js";
+import { Select } from "./select.js";
+import { Sheet } from "./sheet.js";
+import { Skeleton } from "./skeleton.js";
+import { Slider } from "./slider.js";
+import { Spinner } from "./spinner.js";
+import { Stack } from "./stack.js";
+import { Step, Steps } from "./steps.js";
+import { Stepper } from "./stepper.js";
+import { Tab, Tabs } from "./tabs.js";
+import { Text } from "./text.js";
+import { TextArea } from "./text-area.js";
+import { Toast } from "./toast.js";
+import { Checkbox, Radio, RadioGroup, Switch } from "./toggles.js";
+import { View } from "./view.js";
+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 };

package/dist/components/index.js

@@ -0,0 +1,92 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { AmountInput } from "./amount-input.js";
+import { Avatar } from "./avatar.js";
+import { Spinner } from "./spinner.js";
+import { Button } from "./button.js";
+import { Carousel } from "./carousel.js";
+import { Icon } from "./icon.js";
+import { Chip } from "./chip.js";
+import { CodeInput } from "./code-input.js";
+import { DetailRow } from "./detail-row.js";
+import { Disclosure } from "./disclosure.js";
+import { Divider } from "./divider.js";
+import { EmptyState } from "./empty-state.js";
+import { Badge, Notice, ProgressBar } from "./feedback.js";
+import { Footer } from "./footer.js";
+import { Grid, GridItem } from "./grid.js";
+import { Image } from "./image.js";
+import { Input } from "./input.js";
+import { Link } from "./link.js";
+import { List, ListItem } from "./list.js";
+import { Option } from "./option.js";
+import { Bullet, BulletList, Prose, Quote } from "./prose.js";
+import { QRCode } from "./qr-code.js";
+import { Text } from "./text.js";
+import { RichText } from "./rich-text.js";
+import { Scroll } from "./scroll.js";
+import { Sheet } from "./sheet.js";
+import { Select } from "./select.js";
+import { Skeleton } from "./skeleton.js";
+import { Slider } from "./slider.js";
+import { Stack } from "./stack.js";
+import { Step, Steps } from "./steps.js";
+import { Stepper } from "./stepper.js";
+import { Tab, Tabs } from "./tabs.js";
+import { TextArea } from "./text-area.js";
+import { Toast } from "./toast.js";
+import { Checkbox, Radio, RadioGroup, Switch } from "./toggles.js";
+import { View } from "./view.js";
+//#region src/components/index.ts
+var components_exports = /* @__PURE__ */ __exportAll({
+	AmountInput: () => AmountInput,
+	Avatar: () => Avatar,
+	Badge: () => Badge,
+	Bullet: () => Bullet,
+	BulletList: () => BulletList,
+	Button: () => Button,
+	Carousel: () => Carousel,
+	Checkbox: () => Checkbox,
+	Chip: () => Chip,
+	CodeInput: () => CodeInput,
+	DetailRow: () => DetailRow,
+	Disclosure: () => Disclosure,
+	Divider: () => Divider,
+	EmptyState: () => EmptyState,
+	Footer: () => Footer,
+	Grid: () => Grid,
+	GridItem: () => GridItem,
+	Icon: () => Icon,
+	Image: () => Image,
+	Input: () => Input,
+	Link: () => Link,
+	List: () => List,
+	ListItem: () => ListItem,
+	Notice: () => Notice,
+	Option: () => Option,
+	ProgressBar: () => ProgressBar,
+	Prose: () => Prose,
+	QRCode: () => QRCode,
+	Quote: () => Quote,
+	Radio: () => Radio,
+	RadioGroup: () => RadioGroup,
+	RichText: () => RichText,
+	Scroll: () => Scroll,
+	Select: () => Select,
+	Sheet: () => Sheet,
+	Skeleton: () => Skeleton,
+	Slider: () => Slider,
+	Spinner: () => Spinner,
+	Stack: () => Stack,
+	Step: () => Step,
+	Stepper: () => Stepper,
+	Steps: () => Steps,
+	Switch: () => Switch,
+	Tab: () => Tab,
+	Tabs: () => Tabs,
+	Text: () => Text,
+	TextArea: () => TextArea,
+	Toast: () => Toast,
+	View: () => View
+});
+//#endregion
+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, components_exports };

package/dist/components/input.d.ts

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

package/dist/components/input.js

@@ -0,0 +1,108 @@
+import { useTheme } from "../theme.js";
+import { ICON_SIZE, SPACE } from "./tokens.js";
+import { Field } from "./field.js";
+import { BARE_INPUT_STYLE, useFieldBox, useFieldNote } from "./field-box.js";
+import { useTypedText } from "./typed-text.js";
+import { CLOSE_ARTWORK, SEARCH_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.js";
+import { IconButton } from "./icon-button.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#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"
+	},
+	search: {
+		type: "search",
+		inputMode: "search"
+	}
+};
+const Input$1 = ({ value, placeholder, label, hint, error, prefix, suffix, type = "text", maxLength, clearable, disabled, onChange, onSubmit }) => {
+	const { colors } = useTheme();
+	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__ */ jsxs("span", {
+			className: "dot-input",
+			style: {
+				...box.style,
+				display: "flex",
+				alignItems: "center",
+				gap: SPACE.medium,
+				padding: "0 14px"
+			},
+			children: [
+				type === "search" && !prefix ? /* @__PURE__ */ jsx(IconSvg, {
+					artwork: SEARCH_ARTWORK,
+					size: ICON_SIZE.medium,
+					color: colors.subtle
+				}) : null,
+				prefix ? /* @__PURE__ */ jsx("span", {
+					style: { color: colors.subtle },
+					children: prefix
+				}) : null,
+				/* @__PURE__ */ jsx("input", {
+					...HTML_TYPES[type],
+					value: text,
+					placeholder,
+					maxLength,
+					disabled,
+					...controlAttributes,
+					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 }));
+					},
+					enterKeyHint: type === "search" ? "search" : void 0,
+					style: {
+						...BARE_INPUT_STYLE,
+						padding: "12px 0"
+					}
+				}),
+				clearable && text && !disabled ? /* @__PURE__ */ jsx(IconButton, {
+					artwork: CLOSE_ARTWORK,
+					label: "Clear",
+					size: ICON_SIZE.small,
+					onPress: () => {
+						typeText("");
+						onChange?.(createEvent("change", { value: "" }));
+					}
+				}) : null,
+				suffix ? /* @__PURE__ */ jsx("span", {
+					style: { color: colors.subtle },
+					children: suffix
+				}) : null
+			]
+		})
+	});
+};
+//#endregion
+export { Input$1 as Input };

package/dist/components/link.d.ts

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

package/dist/components/link.js

@@ -0,0 +1,32 @@
+import { useTheme } from "../theme.js";
+import { toneColor } from "./tones.js";
+import { pressable } from "./pressable.js";
+import { isHttps } from "./https.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/link.tsx
+const Link$1 = ({ href, tone, onTap, children }) => {
+	const { colors } = useTheme();
+	const style = {
+		color: tone ? toneColor(colors, tone) : colors.primary,
+		textDecorationLine: "underline",
+		textUnderlineOffset: "2px",
+		cursor: "pointer"
+	};
+	if (isHttps(href)) return /* @__PURE__ */ jsx("a", {
+		className: "dot-link",
+		href,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		style,
+		children
+	});
+	return /* @__PURE__ */ jsx("a", {
+		className: "dot-link",
+		style,
+		...pressable(() => onTap?.(createEvent("tap"))),
+		children
+	});
+};
+//#endregion
+export { Link$1 as Link };

package/dist/components/list.d.ts

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

package/dist/components/list.js

@@ -0,0 +1,143 @@
+import { useTheme } from "../theme.js";
+import { CARD_RADIUS_SCALE, CENTERED, FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
+import { CHEVRON_RIGHT_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.js";
+import { insets, paddingStyle } from "./padding.js";
+import { IconGraphic } from "./icon.js";
+import { createEvent } from "@monimesl/dot-core";
+import { useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/list.tsx
+const END_MARGIN = "0px 0px 200px 0px";
+const List$1 = ({ onEndReached, children, ...padding }) => {
+	const { colors, radius } = useTheme();
+	const listRef = useRef(null);
+	const lastRowReached = useRef(null);
+	useEffect(() => {
+		const lastRow = listRef.current?.lastElementChild;
+		if (!onEndReached || !lastRow || typeof IntersectionObserver === "undefined") return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting) && lastRowReached.current !== lastRow) {
+				lastRowReached.current = lastRow;
+				onEndReached(createEvent("endReached"));
+			}
+		}, { rootMargin: END_MARGIN });
+		observer.observe(lastRow);
+		return () => observer.disconnect();
+	});
+	return /* @__PURE__ */ jsx("ul", {
+		ref: listRef,
+		className: "dot-list",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			margin: 0,
+			...paddingStyle(padding),
+			overflow: "hidden",
+			listStyle: "none",
+			borderRadius: radius * CARD_RADIUS_SCALE,
+			border: `1px solid ${colors.border}`,
+			background: colors.surface,
+			"--dot-list-divider": colors.border
+		},
+		children
+	});
+};
+const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...padding }) => {
+	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: {
+			...CENTERED,
+			width: 36,
+			height: 36,
+			borderRadius: "50%",
+			background: colors.muted,
+			flexShrink: 0
+		},
+		children: /* @__PURE__ */ jsx(IconGraphic, {
+			name: icon,
+			size: ICON_SIZE.medium,
+			color: colors.text
+		})
+	});
+	const trailing = children || value;
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		leading,
+		/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				flexGrow: 1,
+				minWidth: 0,
+				overflowWrap: "anywhere"
+			},
+			children: [title ? /* @__PURE__ */ jsx("span", {
+				style: {
+					lineHeight: "normal",
+					fontWeight: WEIGHTS.medium
+				},
+				children: title
+			}) : null, subtitle ? /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: FONT_SIZE.caption,
+					lineHeight: "normal",
+					color: colors.subtle
+				},
+				children: subtitle
+			}) : null]
+		}),
+		trailing || onTap ? /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 4,
+				flexShrink: 0,
+				color: colors.subtle
+			},
+			children: [trailing, onTap ? /* @__PURE__ */ jsx(IconSvg, {
+				artwork: CHEVRON_RIGHT_ARTWORK,
+				size: ICON_SIZE.small,
+				color: colors.subtle
+			}) : null]
+		}) : null
+	] });
+	const rowStyle = {
+		display: "flex",
+		alignItems: "center",
+		gap: 12,
+		...paddingStyle(padding, insets(12, 16)),
+		width: "100%",
+		background: colors.surface,
+		color: colors.text,
+		fontSize: FONT_SIZE.body,
+		textAlign: "start"
+	};
+	return /* @__PURE__ */ jsx("li", {
+		className: "dot-list-item",
+		style: onTap ? { background: colors.surface } : rowStyle,
+		children: onTap ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => onTap(createEvent("tap")),
+			style: {
+				...rowStyle,
+				border: "none",
+				cursor: "pointer"
+			},
+			children: content
+		}) : content
+	});
+};
+//#endregion
+export { List$1 as List, ListItem$1 as ListItem };

package/dist/components/numbers.js

@@ -0,0 +1,9 @@
+//#region src/components/numbers.ts
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(value, max));
+}
+function wholeCount(count) {
+	return Math.max(1, Math.round(count));
+}
+//#endregion
+export { clamp, wholeCount };

package/dist/components/option-place.js

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+//#region src/components/option-place.ts
+const OptionPlaceContext = createContext({
+	inField: false,
+	value: void 0,
+	choose: void 0
+});
+//#endregion
+export { OptionPlaceContext };

package/dist/components/option.d.ts

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

package/dist/components/option.js

@@ -0,0 +1,44 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
+import { CHECK_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.js";
+import { OptionPlaceContext } from "./option-place.js";
+import { useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/option.tsx
+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",
+			minHeight: 52,
+			padding: "16px 12px",
+			border: "none",
+			borderBottom: `1px solid ${colors.border}`,
+			background: "transparent",
+			color: colors.text,
+			fontSize: FONT_SIZE.body,
+			fontWeight: chosen ? WEIGHTS.bold : WEIGHTS.regular,
+			textAlign: "start",
+			cursor: "pointer"
+		},
+		children: [/* @__PURE__ */ jsx("span", { children: label }), chosen ? /* @__PURE__ */ jsx(IconSvg, {
+			artwork: CHECK_ARTWORK,
+			size: ICON_SIZE.medium,
+			color: colors.primary
+		}) : null]
+	});
+};
+//#endregion
+export { Option };

package/dist/components/padding.d.ts

@@ -0,0 +1,2 @@
+import "@monimesl/dot-core";
+import "react";

package/dist/components/padding.js

@@ -0,0 +1,38 @@
+import { SPACE } from "./tokens.js";
+//#region src/components/padding.ts
+const NO_INSETS = {
+	top: 0,
+	start: 0,
+	end: 0,
+	bottom: 0
+};
+function insets(block, inline = block) {
+	return {
+		top: block,
+		start: inline,
+		end: inline,
+		bottom: block
+	};
+}
+function paddingStyle(props, ownInsets = NO_INSETS) {
+	return {
+		paddingTop: sidePadding(props.paddingTop ?? props.padding, ownInsets.top),
+		paddingInlineStart: sidePadding(props.paddingStart ?? props.padding, ownInsets.start),
+		paddingInlineEnd: sidePadding(props.paddingEnd ?? props.padding, ownInsets.end),
+		paddingBottom: sidePadding(props.paddingBottom ?? props.padding, ownInsets.bottom)
+	};
+}
+function sidePadding(pageSpace, ownPixels) {
+	if (pageSpace === void 0) return ownPixels;
+	return SPACE[pageSpace];
+}
+const HOME_INDICATOR = "env(safe-area-inset-bottom, 0px)";
+function pinnedPaddingStyle(props, ownInsets) {
+	const style = paddingStyle(props, ownInsets);
+	return {
+		...style,
+		paddingBottom: `calc(${style.paddingBottom}px + ${HOME_INDICATOR})`
+	};
+}
+//#endregion
+export { HOME_INDICATOR, insets, paddingStyle, pinnedPaddingStyle };

package/dist/components/pressable.js

@@ -0,0 +1,17 @@
+//#region src/components/pressable.ts
+function pressable(press) {
+	return {
+		role: "button",
+		tabIndex: 0,
+		onClick: press,
+		onKeyDown: (event) => {
+			if (event.target !== event.currentTarget) return;
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				press();
+			}
+		}
+	};
+}
+//#endregion
+export { pressable };

package/dist/components/prose-context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+//#region src/components/prose-context.ts
+const InsideProse = createContext(false);
+//#endregion
+export { InsideProse };

package/dist/components/prose.d.ts

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