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

package/dist/components/code-input.js

@@ -0,0 +1,97 @@
+import { useTheme } from "../theme.js";
+import { DISABLED_OPACITY, SPACE, WEIGHTS } from "./tokens.js";
+import { Field } from "./field.js";
+import { fieldBorderColor, useFieldNote } from "./field-box.js";
+import { useTypedText } from "./typed-text.js";
+import { createEvent } from "@monimesl/dot-core";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/code-input.tsx
+const CodeInput$1 = ({ value, length = 6, label, hint, error, secure, disabled, onChange, onComplete }) => {
+	const { colors, radius } = useTheme();
+	const [text, typeText] = useTypedText(value, onChange !== void 0);
+	const [focused, setFocused] = useState(false);
+	const { noteId, controlAttributes } = useFieldNote(hint, error);
+	const count = Math.max(1, Math.round(length));
+	const digits = text.slice(0, count);
+	const next = Math.min(digits.length, count - 1);
+	const boxes = Array.from({ length: count }, (_, index) => {
+		const digit = digits[index];
+		const borderColor = fieldBorderColor(colors, error, focused && index === next);
+		return /* @__PURE__ */ jsx("span", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "1 1 0",
+				maxWidth: 52,
+				height: 52,
+				border: `1.5px solid ${borderColor}`,
+				borderRadius: radius,
+				background: colors.surface,
+				fontSize: 22,
+				fontWeight: WEIGHTS.bold
+			},
+			children: digit !== void 0 && secure ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				style: {
+					width: 12,
+					height: 12,
+					borderRadius: "50%",
+					background: colors.text
+				}
+			}) : digit
+		}, index);
+	});
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		hint,
+		error,
+		noteId,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "dot-code-input",
+			style: {
+				position: "relative",
+				display: "flex",
+				gap: SPACE.medium,
+				color: colors.text,
+				opacity: disabled ? DISABLED_OPACITY : 1
+			},
+			children: [boxes, /* @__PURE__ */ jsx("input", {
+				value: digits,
+				inputMode: "numeric",
+				autoComplete: "one-time-code",
+				maxLength: count,
+				disabled,
+				...controlAttributes,
+				onFocus: () => setFocused(true),
+				onBlur: () => setFocused(false),
+				onSelect: (event) => {
+					const input = event.currentTarget;
+					const end = input.value.length;
+					if (input.selectionStart !== end || input.selectionEnd !== end) input.setSelectionRange(end, end);
+				},
+				onChange: (event) => {
+					const typed = event.currentTarget.value.replace(/\D/g, "").slice(0, count);
+					if (typed === digits) return;
+					typeText(typed);
+					onChange?.(createEvent("change", { value: typed }));
+					if (typed.length === count) onComplete?.(createEvent("complete", { value: typed }));
+				},
+				style: {
+					position: "absolute",
+					inset: 0,
+					width: "100%",
+					height: "100%",
+					padding: 0,
+					border: "none",
+					opacity: 0,
+					fontSize: 16,
+					cursor: disabled ? "default" : "text"
+				}
+			})]
+		})
+	});
+};
+//#endregion
+export { CodeInput$1 as CodeInput };

package/dist/components/detail-row.d.ts

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

package/dist/components/detail-row.js

@@ -0,0 +1,40 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, WEIGHTS } from "./tokens.js";
+import { insets, paddingStyle } from "./padding.js";
+import { toneColor } from "./tones.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/detail-row.tsx
+const DetailRow = ({ label, value, tone, weight = "regular", ...padding }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dot-detail-row",
+		style: {
+			display: "flex",
+			alignItems: "baseline",
+			justifyContent: "space-between",
+			gap: 16,
+			...paddingStyle(padding, insets(6, 0)),
+			fontSize: FONT_SIZE.body,
+			lineHeight: "normal"
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			style: {
+				flexShrink: 0,
+				maxWidth: "50%",
+				color: colors.subtle
+			},
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			style: {
+				minWidth: 0,
+				textAlign: "end",
+				overflowWrap: "anywhere",
+				color: toneColor(colors, tone ?? "default"),
+				fontWeight: WEIGHTS[weight]
+			},
+			children: value
+		})]
+	});
+};
+//#endregion
+export { DetailRow };

package/dist/components/divider.d.ts

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

package/dist/components/divider.js

@@ -0,0 +1,18 @@
+import { useTheme } from "../theme.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/divider.tsx
+const Divider = () => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-divider",
+		role: "separator",
+		style: {
+			alignSelf: "stretch",
+			flexShrink: 0,
+			height: 1,
+			background: colors.border
+		}
+	});
+};
+//#endregion
+export { Divider };

package/dist/components/empty-state.d.ts

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

package/dist/components/empty-state.js

@@ -0,0 +1,66 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { insets, paddingStyle } from "./padding.js";
+import { IconGraphic } from "./icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/empty-state.tsx
+const EmptyState = ({ icon, title, text, children, ...padding }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dot-empty-state",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: SPACE.medium,
+			...paddingStyle(padding, insets(32, 16)),
+			textAlign: "center",
+			color: colors.text
+		},
+		children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					width: 64,
+					height: 64,
+					borderRadius: "50%",
+					background: colors.muted
+				},
+				children: /* @__PURE__ */ jsx(IconGraphic, {
+					name: icon,
+					size: ICON_SIZE.large,
+					color: colors.subtle
+				})
+			}) : null,
+			title ? /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: 17,
+					fontWeight: WEIGHTS.bold,
+					lineHeight: "normal"
+				},
+				children: title
+			}) : null,
+			text ? /* @__PURE__ */ jsx("span", {
+				style: {
+					maxWidth: 300,
+					fontSize: FONT_SIZE.body,
+					lineHeight: "normal",
+					color: colors.subtle
+				},
+				children: text
+			}) : null,
+			children ? /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					gap: SPACE.medium,
+					paddingTop: SPACE.small
+				},
+				children
+			}) : null
+		]
+	});
+};
+//#endregion
+export { EmptyState };

package/dist/components/feedback.d.ts

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

package/dist/components/feedback.js

@@ -0,0 +1,85 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { insets, paddingStyle } from "./padding.js";
+import { STATUS_ICONS, toneBackground, toneColor } from "./tones.js";
+import { IconGraphic } from "./icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#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: {
+			width: "100%",
+			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, ...padding }) => {
+	const { colors, radius } = useTheme();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dot-notice",
+		role: tone === "danger" ? "alert" : "status",
+		style: {
+			display: "flex",
+			gap: SPACE.medium,
+			...paddingStyle(padding, insets(12, 14)),
+			borderRadius: radius,
+			background: toneBackground(colors, tone),
+			color: colors.text,
+			fontSize: FONT_SIZE.body,
+			lineHeight: "normal"
+		},
+		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,
+				minWidth: 0
+			},
+			children: [title ? /* @__PURE__ */ jsx("span", {
+				style: { fontWeight: WEIGHTS.bold },
+				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",
+			width: "fit-content",
+			padding: "2px 8px",
+			borderRadius: 999,
+			background: toneBackground(colors, tone),
+			color: toneColor(colors, tone),
+			fontSize: FONT_SIZE.caption,
+			fontWeight: WEIGHTS.bold,
+			lineHeight: "normal",
+			whiteSpace: "nowrap"
+		},
+		children
+	});
+};
+//#endregion
+export { Badge, Notice, ProgressBar };

package/dist/components/field-box.js

@@ -0,0 +1,44 @@
+import { useTheme } from "../theme.js";
+import { DISABLED_OPACITY } from "./tokens.js";
+import { useId, useState } from "react";
+//#region src/components/field-box.ts
+const BARE_INPUT_STYLE = {
+	flexGrow: 1,
+	minWidth: 0,
+	border: "none",
+	outline: "none",
+	background: "transparent",
+	color: "inherit"
+};
+function fieldBorderColor(colors, error, focused) {
+	if (error) return colors.danger;
+	return focused ? colors.primary : colors.border;
+}
+function useFieldBox(error, disabled) {
+	const { colors, radius } = useTheme();
+	const [focused, setFocused] = useState(false);
+	return {
+		style: {
+			border: `1px solid ${fieldBorderColor(colors, error, focused)}`,
+			borderRadius: radius,
+			background: colors.surface,
+			color: colors.text,
+			fontSize: 16,
+			opacity: disabled ? DISABLED_OPACITY : 1
+		},
+		onFocus: () => setFocused(true),
+		onBlur: () => setFocused(false)
+	};
+}
+function useFieldNote(hint, error) {
+	const noteId = useId();
+	return {
+		noteId,
+		controlAttributes: {
+			"aria-invalid": error ? true : void 0,
+			"aria-describedby": error || hint ? noteId : void 0
+		}
+	};
+}
+//#endregion
+export { BARE_INPUT_STYLE, fieldBorderColor, useFieldBox, useFieldNote };

package/dist/components/field.js

@@ -0,0 +1,43 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/field.tsx
+function Field({ label, hint, error, labelId, noteId, 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, {
+				id: labelId,
+				children: label
+			}) : null,
+			children,
+			note ? /* @__PURE__ */ jsx("span", {
+				id: noteId,
+				style: {
+					fontSize: FONT_SIZE.caption,
+					color: error ? colors.danger : colors.subtle
+				},
+				children: note
+			}) : null
+		]
+	});
+}
+function FieldLabel({ id, children }) {
+	return /* @__PURE__ */ jsx("span", {
+		id,
+		style: {
+			fontSize: FONT_SIZE.caption,
+			fontWeight: WEIGHTS.medium
+		},
+		children
+	});
+}
+//#endregion
+export { Field, FieldLabel };

package/dist/components/footer.d.ts

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

package/dist/components/footer.js

@@ -0,0 +1,24 @@
+import { useTheme } from "../theme.js";
+import { SPACE } from "./tokens.js";
+import { insets, paddingStyle } from "./padding.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/footer.tsx
+const Footer = ({ children, ...padding }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("footer", {
+		className: "dot-footer",
+		style: {
+			position: "sticky",
+			bottom: 0,
+			marginTop: "auto",
+			display: "flex",
+			flexDirection: "column",
+			gap: SPACE.medium,
+			...paddingStyle(padding, insets(SPACE.medium, 0)),
+			background: colors.background
+		},
+		children
+	});
+};
+//#endregion
+export { Footer };

package/dist/components/grid.d.ts

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

package/dist/components/grid.js

@@ -0,0 +1,98 @@
+import { useTheme } from "../theme.js";
+import { CARD_RADIUS_SCALE, FONT_SIZE, PILL_STYLE, SPACE } from "./tokens.js";
+import { paddingStyle } from "./padding.js";
+import { IconGraphic } from "./icon.js";
+import { pressable } from "./pressable.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/grid.tsx
+const TILE_SIZE = 52;
+const Grid$1 = ({ columns = 4, gap = "medium", children, ...padding }) => /* @__PURE__ */ jsx("div", {
+	className: "dot-grid",
+	style: {
+		display: "grid",
+		gridTemplateColumns: `repeat(${Math.max(1, Math.round(columns))}, minmax(0, 1fr))`,
+		gap: SPACE[gap],
+		...paddingStyle(padding)
+	},
+	children
+});
+const GridItem$1 = ({ label, icon, image, badge, onTap }) => {
+	const { colors, radius } = useTheme();
+	let picture = null;
+	if (image) picture = /* @__PURE__ */ jsx("img", {
+		src: image,
+		alt: "",
+		width: TILE_SIZE,
+		height: TILE_SIZE,
+		style: {
+			display: "block",
+			width: "100%",
+			height: "100%",
+			borderRadius: "inherit",
+			objectFit: "cover"
+		}
+	});
+	else if (icon) picture = /* @__PURE__ */ jsx(IconGraphic, {
+		name: icon,
+		size: 24,
+		color: "currentColor"
+	});
+	const press = onTap ? pressable(() => onTap(createEvent("tap"))) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dot-grid-item",
+		...press,
+		style: {
+			position: "relative",
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: 6,
+			padding: "4px 0",
+			cursor: press ? "pointer" : void 0
+		},
+		children: [/* @__PURE__ */ jsxs("span", {
+			style: {
+				position: "relative",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				flexShrink: 0,
+				width: TILE_SIZE,
+				height: TILE_SIZE,
+				borderRadius: radius * CARD_RADIUS_SCALE,
+				background: colors.muted,
+				color: colors.primary
+			},
+			children: [picture, badge ? /* @__PURE__ */ jsx("span", {
+				className: "dot-grid-badge",
+				style: {
+					...PILL_STYLE,
+					position: "absolute",
+					top: -3,
+					insetInlineEnd: -10,
+					minHeight: 0,
+					lineHeight: "13px",
+					background: colors.danger,
+					color: colors.surface
+				},
+				children: badge
+			}) : null]
+		}), label ? /* @__PURE__ */ jsx("span", {
+			style: {
+				display: "-webkit-box",
+				overflow: "hidden",
+				width: "100%",
+				WebkitLineClamp: 2,
+				WebkitBoxOrient: "vertical",
+				color: colors.text,
+				fontSize: FONT_SIZE.caption,
+				lineHeight: "normal",
+				textAlign: "center"
+			},
+			children: label
+		}) : null]
+	});
+};
+//#endregion
+export { Grid$1 as Grid, GridItem$1 as GridItem };