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

package/dist/components/option.js

@@ -0,0 +1,43 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
+import { IconGraphic } from "./icon.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(IconGraphic, {
+			name: "check",
+			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,27 @@
+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, own = NO_INSETS) {
+	const side = (space, pixels) => space === void 0 ? pixels : SPACE[space];
+	return {
+		paddingTop: side(props.paddingTop ?? props.padding, own.top),
+		paddingInlineStart: side(props.paddingStart ?? props.padding, own.start),
+		paddingInlineEnd: side(props.paddingEnd ?? props.padding, own.end),
+		paddingBottom: side(props.paddingBottom ?? props.padding, own.bottom)
+	};
+}
+//#endregion
+export { insets, paddingStyle };

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/qr-code.d.ts

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

package/dist/components/qr-code.js

@@ -0,0 +1,58 @@
+import { useTheme } from "../theme.js";
+import { encode } from "../vendor/uqr/dist/index.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/qr-code.tsx
+const DARK = "#000000";
+const LIGHT = "#ffffff";
+const QUIET_ZONE = 2;
+const QRCode = ({ value, size = 200, label }) => {
+	const { radius } = useTheme();
+	const drawing = useMemo(() => value ? drawCode(value) : null, [value]);
+	return /* @__PURE__ */ jsxs("svg", {
+		className: "dot-qr-code",
+		role: "img",
+		"aria-label": label ?? value,
+		width: size,
+		height: size,
+		viewBox: drawing ? `0 0 ${drawing.size} ${drawing.size}` : "0 0 1 1",
+		shapeRendering: "crispEdges",
+		style: {
+			display: "block",
+			flexShrink: 0,
+			overflow: "hidden",
+			borderRadius: radius
+		},
+		children: [/* @__PURE__ */ jsx("rect", {
+			width: "100%",
+			height: "100%",
+			fill: LIGHT
+		}), drawing ? /* @__PURE__ */ jsx("path", {
+			d: drawing.path,
+			fill: DARK
+		}) : null]
+	});
+};
+function drawCode(value) {
+	let modules;
+	try {
+		modules = encode(value, {
+			ecc: "M",
+			border: QUIET_ZONE
+		}).data;
+	} catch {
+		return null;
+	}
+	const squares = [];
+	modules.forEach((row, y) => {
+		row.forEach((dark, x) => {
+			if (dark) squares.push(`M${x} ${y}h1v1h-1z`);
+		});
+	});
+	return {
+		size: modules.length,
+		path: squares.join("")
+	};
+}
+//#endregion
+export { QRCode };

package/dist/components/scroll.d.ts

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

package/dist/components/scroll.js

@@ -0,0 +1,55 @@
+import { SPACE } from "./tokens.js";
+import { paddingStyle } from "./padding.js";
+import { createEvent } from "@monimesl/dot-core";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/scroll.tsx
+const REST_MS = 120;
+const Scroll$1 = ({ gap = "medium", snap = "none", index, onChange, children, ...padding }) => {
+	const row = useRef(null);
+	const reported = useRef(void 0);
+	const resting = useRef(void 0);
+	const space = paddingStyle(padding);
+	const start = Number(space.paddingInlineStart);
+	useEffect(() => {
+		const element = row.current;
+		if (index === void 0 || index === reported.current || !element) return;
+		const child = element.children[index];
+		if (child) {
+			reported.current = index;
+			element.scrollTo?.({
+				left: child.offsetLeft - start,
+				behavior: "smooth"
+			});
+		}
+	}, [index, start]);
+	useEffect(() => () => clearTimeout(resting.current), []);
+	return /* @__PURE__ */ jsx("div", {
+		ref: row,
+		className: "dot-scroll",
+		onScroll: onChange ? () => {
+			clearTimeout(resting.current);
+			resting.current = setTimeout(() => {
+				const element = row.current;
+				if (!element) return;
+				const left = element.scrollLeft + start;
+				const first = [...element.children].findIndex((item) => item.offsetLeft + item.offsetWidth / 2 >= left);
+				if (first !== -1 && first !== reported.current) {
+					reported.current = first;
+					onChange(createEvent("change", { index: first }));
+				}
+			}, REST_MS);
+		} : void 0,
+		style: {
+			gap: SPACE[gap],
+			...space,
+			scrollPaddingInlineStart: space.paddingInlineStart,
+			scrollPaddingInlineEnd: space.paddingInlineEnd,
+			scrollSnapType: snap === "none" ? void 0 : "x mandatory",
+			"--dot-scroll-snap": snap === "none" ? "none" : snap
+		},
+		children
+	});
+};
+//#endregion
+export { Scroll$1 as Scroll };

package/dist/components/select.d.ts

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

package/dist/components/select.js

@@ -0,0 +1,92 @@
+import { useTheme } from "../theme.js";
+import { ICON_SIZE, SPACE } from "./tokens.js";
+import { Field } from "./field.js";
+import { useFieldBox, useFieldNote } from "./field-box.js";
+import { IconGraphic } from "./icon.js";
+import { OptionPlaceContext } from "./option-place.js";
+import { SheetPanel } from "./sheet.js";
+import { createEvent } from "@monimesl/dot-core";
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/select.tsx
+const Select$1 = ({ value, label, placeholder, hint, error, disabled, onChange, children }) => {
+	const { colors } = useTheme();
+	const [open, setOpen] = useState(false);
+	const box = useFieldBox(error, disabled);
+	const { noteId, controlAttributes } = useFieldNote(hint, error);
+	const labelId = useId();
+	const valueId = useId();
+	const choose = (next) => {
+		setOpen(false);
+		onChange?.(createEvent("change", { value: next }));
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Field, {
+		label,
+		hint,
+		error,
+		labelId,
+		noteId,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "dot-select",
+			disabled,
+			"aria-haspopup": "listbox",
+			"aria-labelledby": label ? `${labelId} ${valueId}` : valueId,
+			...controlAttributes,
+			onClick: () => setOpen(true),
+			onFocus: box.onFocus,
+			onBlur: box.onBlur,
+			style: {
+				...box.style,
+				display: "flex",
+				alignItems: "center",
+				gap: SPACE.medium,
+				width: "100%",
+				padding: "12px 14px",
+				textAlign: "start",
+				cursor: disabled ? "default" : "pointer"
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				id: valueId,
+				style: { flexGrow: 1 },
+				children: value ? /* @__PURE__ */ jsx(OptionPlaceContext.Provider, {
+					value: {
+						inField: true,
+						value,
+						choose: void 0
+					},
+					children
+				}) : /* @__PURE__ */ jsx("span", {
+					style: { color: colors.subtle },
+					children: placeholder
+				})
+			}), /* @__PURE__ */ jsx(IconGraphic, {
+				name: "chevron-down",
+				size: ICON_SIZE.small,
+				color: colors.subtle
+			})]
+		})
+	}), /* @__PURE__ */ jsx(SheetPanel, {
+		open,
+		title: label,
+		onClose: () => setOpen(false),
+		children: /* @__PURE__ */ jsx("div", {
+			role: "listbox",
+			"aria-label": label,
+			style: {
+				display: "flex",
+				flexDirection: "column"
+			},
+			children: /* @__PURE__ */ jsx(OptionPlaceContext.Provider, {
+				value: {
+					inField: false,
+					value,
+					choose
+				},
+				children
+			})
+		})
+	})] });
+};
+//#endregion
+export { Select$1 as Select };

package/dist/components/sheet.d.ts

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

package/dist/components/sheet.js

@@ -0,0 +1,105 @@
+import { FONT_FAMILY, useTheme } from "../theme.js";
+import { CARD_RADIUS_SCALE, FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { paddingStyle } from "./padding.js";
+import { IconGraphic } from "./icon.js";
+import { DialogBackdrop } from "../vendor/@base-ui/react/dialog/backdrop/DialogBackdrop.js";
+import { DialogClose } from "../vendor/@base-ui/react/dialog/close/DialogClose.js";
+import { DialogPopup } from "../vendor/@base-ui/react/dialog/popup/DialogPopup.js";
+import { DialogPortal } from "../vendor/@base-ui/react/dialog/portal/DialogPortal.js";
+import { DialogRoot } from "../vendor/@base-ui/react/dialog/root/DialogRoot.js";
+import { DialogTitle } from "../vendor/@base-ui/react/dialog/title/DialogTitle.js";
+import { usePortalContainer } from "../portal.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/sheet.tsx
+const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...padding }) => {
+	const { colors, radius } = useTheme();
+	const container = usePortalContainer();
+	const corner = radius * CARD_RADIUS_SCALE;
+	return /* @__PURE__ */ jsx(DialogRoot, {
+		open,
+		onOpenChange: (next) => {
+			if (!next) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogPortal, {
+			container,
+			children: [/* @__PURE__ */ jsx(DialogBackdrop, {
+				className: "dot-sheet-backdrop",
+				style: {
+					position: "fixed",
+					inset: 0,
+					zIndex: 100,
+					background: "rgba(0, 0, 0, 0.4)"
+				}
+			}), /* @__PURE__ */ jsxs(DialogPopup, {
+				className: "dot-sheet",
+				"aria-label": title,
+				style: {
+					position: "fixed",
+					insetInline: 0,
+					bottom: 0,
+					zIndex: 101,
+					display: "flex",
+					flexDirection: "column",
+					gap: SPACE.medium,
+					maxHeight: "85vh",
+					overflowY: "auto",
+					...paddingStyle(padding, {
+						top: 16,
+						start: 16,
+						end: 16,
+						bottom: 24
+					}),
+					borderTopLeftRadius: corner,
+					borderTopRightRadius: corner,
+					background: colors.surface,
+					color: colors.text,
+					fontFamily: FONT_FAMILY,
+					outline: "none"
+				},
+				children: [
+					title ? /* @__PURE__ */ jsx(DialogTitle, {
+						style: {
+							margin: 0,
+							fontSize: FONT_SIZE.body,
+							fontWeight: WEIGHTS.bold,
+							lineHeight: "normal",
+							textAlign: "center"
+						},
+						children: title
+					}) : null,
+					showCloseIcon ? /* @__PURE__ */ jsx(DialogClose, {
+						"aria-label": "Close",
+						style: {
+							position: "absolute",
+							top: 10,
+							insetInlineEnd: 10,
+							display: "flex",
+							padding: 4,
+							border: "none",
+							borderRadius: "50%",
+							background: "transparent",
+							cursor: "pointer"
+						},
+						children: /* @__PURE__ */ jsx(IconGraphic, {
+							name: "close",
+							size: ICON_SIZE.medium,
+							color: colors.subtle
+						})
+					}) : null,
+					children
+				]
+			})]
+		})
+	});
+};
+const Sheet$1 = ({ open = false, title, showCloseIcon = false, onClose, children, ...padding }) => /* @__PURE__ */ jsx(SheetPanel, {
+	...padding,
+	open,
+	title,
+	showCloseIcon,
+	onClose: () => onClose?.(createEvent("close")),
+	children
+});
+//#endregion
+export { Sheet$1 as Sheet, SheetPanel };

package/dist/components/skeleton.d.ts

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

package/dist/components/skeleton.js

@@ -0,0 +1,55 @@
+import { useTheme } from "../theme.js";
+import { SPACE } from "./tokens.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skeleton.tsx
+const LINE_HEIGHT = 12;
+function Bar({ style }) {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("div", { style: {
+		flexShrink: 0,
+		background: colors.muted,
+		animation: "dot-skeleton-pulse 1.2s linear infinite",
+		...style
+	} });
+}
+const Skeleton = ({ shape = "text", lines = 1, height }) => {
+	const { radius } = useTheme();
+	let content;
+	if (shape === "circle") {
+		const size = height ?? 40;
+		content = /* @__PURE__ */ jsx(Bar, { style: {
+			width: size,
+			height: size,
+			borderRadius: "50%"
+		} });
+	} else if (shape === "box") content = /* @__PURE__ */ jsx(Bar, { style: {
+		width: "100%",
+		height: height ?? 80,
+		borderRadius: radius
+	} });
+	else {
+		const count = Math.max(1, lines);
+		content = Array.from({ length: count }, (_, index) => {
+			const last = count > 1 && index === count - 1;
+			return /* @__PURE__ */ jsx(Bar, { style: {
+				width: last ? "60%" : "100%",
+				height: LINE_HEIGHT,
+				borderRadius: LINE_HEIGHT / 2
+			} }, index);
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-skeleton",
+		"aria-busy": "true",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: SPACE.medium,
+			width: shape === "circle" ? void 0 : "100%",
+			flexShrink: shape === "circle" ? 0 : 1
+		},
+		children: content
+	});
+};
+//#endregion
+export { Skeleton };

package/dist/components/spinner.d.ts

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

package/dist/components/spinner.js

@@ -0,0 +1,48 @@
+import { useTheme } from "../theme.js";
+import { ICON_SIZE } from "./tokens.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/spinner.tsx
+function LoadingIcon({ size }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		className: "dot-spinner",
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 3,
+		role: "progressbar",
+		"aria-label": "Loading",
+		style: { flexShrink: 0 },
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9",
+			strokeOpacity: .25
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M21 12a9 9 0 0 0-9-9",
+			strokeLinecap: "round",
+			children: /* @__PURE__ */ jsx("animateTransform", {
+				attributeName: "transform",
+				type: "rotate",
+				from: "0 12 12",
+				to: "360 12 12",
+				dur: "0.8s",
+				repeatCount: "indefinite"
+			})
+		})]
+	});
+}
+const Spinner = ({ size = "medium" }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("span", {
+		style: {
+			display: "inline-flex",
+			alignSelf: "center",
+			color: colors.primary
+		},
+		children: /* @__PURE__ */ jsx(LoadingIcon, { size: ICON_SIZE[size] })
+	});
+};
+//#endregion
+export { LoadingIcon, Spinner };

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,91 @@
+import { useTheme } from "../theme.js";
+import { 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";
+	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",
+				...segmented ? {
+					gap: 2,
+					padding: 3,
+					borderRadius: radius,
+					background: colors.muted
+				} : { borderBottom: `1px solid ${colors.border}` }
+			},
+			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;
+	return /* @__PURE__ */ jsxs(TabsTab, {
+		className: "dot-tab",
+		value,
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			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",
+			...segmented ? {
+				borderRadius: Math.max(radius - 2, 0),
+				background: selected ? colors.surface : "transparent",
+				boxShadow: selected ? "0 1px 3px rgba(0, 0, 0, 0.15)" : "none"
+			} : {
+				marginBottom: -1,
+				background: "transparent",
+				borderBottom: `2px solid ${selected ? colors.primary : "transparent"}`
+			}
+		},
+		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 };