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

package/dist/components/stack.d.ts

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

package/dist/components/stack.js

@@ -0,0 +1,25 @@
+import { useTheme } from "../theme.js";
+import { boxStyle } from "./box.js";
+import { Children } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/stack.tsx
+const Stack = (props) => {
+	const theme = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-stack",
+		style: {
+			display: "grid",
+			...boxStyle(props, theme)
+		},
+		children: Children.map(props.children, (child) => /* @__PURE__ */ jsx("div", {
+			style: {
+				gridArea: "1 / 1",
+				display: "grid",
+				minWidth: 0
+			},
+			children: child
+		}))
+	});
+};
+//#endregion
+export { Stack };

package/dist/components/stepper.d.ts

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

package/dist/components/stepper.js

@@ -0,0 +1,92 @@
+import { useTheme } from "../theme.js";
+import { CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
+import { Field } from "./field.js";
+import { useFieldNote } from "./field-box.js";
+import { useTypedText } from "./typed-text.js";
+import { IconGraphic } from "./icon.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/stepper.tsx
+const Stepper$1 = ({ value, min, max, step = 1, label, hint, disabled, onChange }) => {
+	const { colors } = useTheme();
+	const [shownText, showText] = useTypedText(value === void 0 ? void 0 : String(value), onChange !== void 0);
+	const { noteId, controlAttributes } = useFieldNote(hint, void 0);
+	const current = shownText === "" ? min ?? 0 : Number(shownText);
+	const moveTo = (next) => {
+		showText(String(next));
+		onChange?.(createEvent("change", { value: next }));
+	};
+	const atMin = min !== void 0 && current - step < min;
+	const atMax = max !== void 0 && current + step > max;
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		hint,
+		error: void 0,
+		noteId,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "dot-stepper",
+			role: "group",
+			"aria-label": label,
+			...controlAttributes,
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 12,
+				width: "fit-content"
+			},
+			children: [
+				/* @__PURE__ */ jsx(StepButton, {
+					icon: "minus",
+					label: "Less",
+					disabled: disabled || atMin,
+					onPress: () => moveTo(current - step)
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-live": "polite",
+					style: {
+						minWidth: 32,
+						textAlign: "center",
+						fontSize: FONT_SIZE.subtitle,
+						fontWeight: WEIGHTS.bold,
+						fontVariantNumeric: "tabular-nums",
+						color: colors.text
+					},
+					children: current
+				}),
+				/* @__PURE__ */ jsx(StepButton, {
+					icon: "plus",
+					label: "More",
+					disabled: disabled || atMax,
+					onPress: () => moveTo(current + step)
+				})
+			]
+		})
+	});
+};
+function StepButton({ icon, label, disabled, onPress }) {
+	const { colors, radius } = useTheme();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		disabled,
+		onClick: onPress,
+		style: {
+			...CENTERED,
+			width: 40,
+			height: 40,
+			border: "none",
+			borderRadius: radius,
+			background: colors.muted,
+			color: colors.text,
+			opacity: disabled ? DISABLED_OPACITY : 1,
+			cursor: disabled ? "default" : "pointer"
+		},
+		children: /* @__PURE__ */ jsx(IconGraphic, {
+			name: icon,
+			size: ICON_SIZE.medium,
+			color: "currentColor"
+		})
+	});
+}
+//#endregion
+export { Stepper$1 as Stepper };

package/dist/components/steps.d.ts

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

package/dist/components/steps.js

@@ -0,0 +1,110 @@
+import { useTheme } from "../theme.js";
+import { CENTERED, FONT_SIZE, WEIGHTS } from "./tokens.js";
+import { paddingStyle } from "./padding.js";
+import { IconGraphic } from "./icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/steps.tsx
+const MARK_SIZE = 24;
+const Steps = ({ children, ...padding }) => /* @__PURE__ */ jsx("ol", {
+	className: "dot-steps",
+	style: {
+		display: "flex",
+		flexDirection: "column",
+		margin: 0,
+		...paddingStyle(padding)
+	},
+	children
+});
+function stepMark(colors, status) {
+	switch (status) {
+		case "done": return {
+			background: colors.success,
+			border: colors.success,
+			icon: "check"
+		};
+		case "failed": return {
+			background: colors.danger,
+			border: colors.danger,
+			icon: "close"
+		};
+		case "current": return {
+			background: colors.primary,
+			border: colors.primary,
+			icon: void 0
+		};
+		case "upcoming": return {
+			background: "transparent",
+			border: colors.subtle,
+			icon: void 0
+		};
+	}
+}
+const Step = ({ title, text, status = "upcoming" }) => {
+	const { colors } = useTheme();
+	const { background, border, icon } = stepMark(colors, status);
+	return /* @__PURE__ */ jsxs("li", {
+		className: "dot-step",
+		"aria-current": status === "current" ? "step" : void 0,
+		style: {
+			display: "flex",
+			gap: 12,
+			listStyle: "none"
+		},
+		children: [/* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center"
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: {
+					...CENTERED,
+					flexShrink: 0,
+					width: MARK_SIZE,
+					height: MARK_SIZE,
+					boxSizing: "border-box",
+					borderRadius: "50%",
+					border: `2px solid ${border}`,
+					background
+				},
+				children: icon ? /* @__PURE__ */ jsx(IconGraphic, {
+					name: icon,
+					size: 14,
+					color: "#ffffff"
+				}) : null
+			}), /* @__PURE__ */ jsx("span", {
+				className: "dot-step-line",
+				style: {
+					flex: 1,
+					width: 2,
+					minHeight: 12,
+					background: colors.border
+				}
+			})]
+		}), /* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 2,
+				paddingBottom: 16
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: FONT_SIZE.body,
+					fontWeight: status === "current" ? WEIGHTS.bold : WEIGHTS.medium,
+					color: status === "upcoming" ? colors.subtle : colors.text,
+					lineHeight: `${MARK_SIZE}px`
+				},
+				children: title
+			}), text ? /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: FONT_SIZE.caption,
+					color: colors.subtle
+				},
+				children: text
+			}) : null]
+		})]
+	});
+};
+//#endregion
+export { Step, Steps };

package/dist/components/tabs.d.ts

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

package/dist/components/tabs.js

@@ -0,0 +1,95 @@
+import { useTheme } from "../theme.js";
+import { CENTERED, FONT_SIZE, PILL_STYLE, WEIGHTS } from "./tokens.js";
+import { paddingStyle } from "./padding.js";
+import { TabsRoot } from "../vendor/@base-ui/react/tabs/root/TabsRoot.js";
+import { TabsTab } from "../vendor/@base-ui/react/tabs/tab/TabsTab.js";
+import { TabsList } from "../vendor/@base-ui/react/tabs/list/TabsList.js";
+import { createEvent } from "@monimesl/dot-core";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tabs.tsx
+const TabsContext = createContext({
+	value: void 0,
+	segmented: false
+});
+const Tabs$1 = ({ value, variant = "underline", onChange, children, ...padding }) => {
+	const { colors, radius } = useTheme();
+	const segmented = variant === "segmented";
+	let variantStyle;
+	if (segmented) variantStyle = {
+		gap: 2,
+		padding: 3,
+		borderRadius: radius,
+		background: colors.muted
+	};
+	else variantStyle = { borderBottom: `1px solid ${colors.border}` };
+	return /* @__PURE__ */ jsx(TabsRoot, {
+		value: value ?? null,
+		onValueChange: (next) => {
+			if (next !== null && next !== value) onChange?.(createEvent("change", { value: next }));
+		},
+		style: paddingStyle(padding),
+		children: /* @__PURE__ */ jsx(TabsList, {
+			className: "dot-tabs",
+			style: {
+				display: "flex",
+				overflowX: "auto",
+				...variantStyle
+			},
+			children: /* @__PURE__ */ jsx(TabsContext.Provider, {
+				value: {
+					value,
+					segmented
+				},
+				children
+			})
+		})
+	});
+};
+const Tab$1 = ({ value, label, badge }) => {
+	const { colors, radius } = useTheme();
+	const { value: chosen, segmented } = useContext(TabsContext);
+	if (value === void 0) return null;
+	const selected = value === chosen;
+	let color = colors.subtle;
+	if (selected) color = segmented ? colors.text : colors.primary;
+	let variantStyle;
+	if (segmented) variantStyle = {
+		borderRadius: Math.max(radius - 2, 0),
+		background: selected ? colors.surface : "transparent",
+		boxShadow: selected ? "0 1px 3px rgba(0, 0, 0, 0.15)" : "none"
+	};
+	else variantStyle = {
+		marginBottom: -1,
+		background: "transparent",
+		borderBottom: `2px solid ${selected ? colors.primary : "transparent"}`
+	};
+	return /* @__PURE__ */ jsxs(TabsTab, {
+		className: "dot-tab",
+		value,
+		style: {
+			...CENTERED,
+			gap: 6,
+			flex: "1 0 auto",
+			minHeight: segmented ? 36 : 44,
+			padding: "0 12px",
+			border: "none",
+			fontSize: FONT_SIZE.body,
+			fontWeight: selected ? WEIGHTS.bold : WEIGHTS.medium,
+			whiteSpace: "nowrap",
+			color,
+			cursor: "pointer",
+			...variantStyle
+		},
+		children: [label, badge ? /* @__PURE__ */ jsx("span", {
+			style: {
+				...PILL_STYLE,
+				background: colors.primary,
+				color: colors.onPrimary
+			},
+			children: badge
+		}) : null]
+	});
+};
+//#endregion
+export { Tab$1 as Tab, Tabs$1 as Tabs };

package/dist/components/text-area.d.ts

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

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,107 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, SELECTABLE, WEIGHTS } from "./tokens.js";
+import { paddingStyle } from "./padding.js";
+import { isTone, toneColor } from "./tones.js";
+import { InsideProse } from "./prose-context.js";
+import { customColor } from "./box.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/text.tsx
+const InsideText = createContext(false);
+const VARIANTS = {
+	display: {
+		weight: "bold",
+		lineHeight: 1.15,
+		heading: true
+	},
+	title: {
+		weight: "bold",
+		lineHeight: 1.25,
+		heading: true
+	},
+	subtitle: {
+		weight: "medium",
+		lineHeight: 1.35,
+		heading: true
+	},
+	lead: {
+		weight: "regular",
+		lineHeight: 1.5,
+		heading: false
+	},
+	body: {
+		weight: "regular",
+		lineHeight: 1.5,
+		heading: false
+	},
+	caption: {
+		weight: "regular",
+		lineHeight: 1.4,
+		heading: false
+	}
+};
+const LEADING_CHANGE = {
+	tight: -.1,
+	normal: 0,
+	relaxed: .2
+};
+const DECORATION = {
+	none: "none",
+	underline: "underline",
+	strikethrough: "line-through"
+};
+const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
+	const theme = useTheme();
+	const insideText = useContext(InsideText);
+	const inProse = useContext(InsideProse);
+	const { heading, lineHeight, weight: defaultWeight } = VARIANTS[variant];
+	const defaultLeading = inProse && !heading ? "relaxed" : "normal";
+	const style = {
+		display: insideText ? "inline" : "block",
+		marginInline: 0,
+		marginBlockEnd: 0,
+		marginBlockStart: inProse && heading ? void 0 : 0,
+		fontSize: FONT_SIZE[variant],
+		fontWeight: WEIGHTS[weight ?? defaultWeight],
+		fontStyle: italic ? "italic" : void 0,
+		letterSpacing: variant === "display" ? "-0.02em" : "normal",
+		color: tone ? textColor(tone, theme) : "inherit",
+		textAlign: align,
+		textDecorationLine: decoration ? DECORATION[decoration] : void 0,
+		fontVariantNumeric: numeric ? "tabular-nums" : void 0,
+		...selectable ? SELECTABLE : void 0,
+		...paddingStyle(padding)
+	};
+	if (!insideText) {
+		style.lineHeight = lineHeight + LEADING_CHANGE[leading ?? defaultLeading];
+		style.textWrap = heading ? "balance" : "pretty";
+		style.overflowWrap = "anywhere";
+	}
+	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" || variant === "subtitle") && !insideText) return /* @__PURE__ */ jsx(variant === "title" ? "h2" : "h3", {
+		className: "dot-text dot-heading",
+		style,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "dot-text",
+		style,
+		children: content
+	});
+};
+function textColor(tone, theme) {
+	if (isTone(tone)) return toneColor(theme.colors, tone);
+	if (tone === "onPrimary") return theme.colors.onPrimary;
+	return customColor(tone, theme);
+}
+//#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 { IconSvg } from "./icon-svg.js";
+import { STATUS_ARTWORK } from "./tones.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(IconSvg, {
+			artwork: STATUS_ARTWORK[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 };