@monimesl/dot-renderer-react 0.1.0-alpha.19 → 0.1.0-alpha.21

package/dist/components/scroll.js

@@ -4,47 +4,47 @@ 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 REST_DELAY_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);
+	const reportedIndex = useRef(void 0);
+	const restTimer = useRef(void 0);
+	const paddingCss = paddingStyle(padding);
+	const startPadding = Number(paddingCss.paddingInlineStart);
 	useEffect(() => {
 		const element = row.current;
-		if (index === void 0 || index === reported.current || !element) return;
+		if (index === void 0 || index === reportedIndex.current || !element) return;
 		const child = element.children[index];
 		if (child) {
-			reported.current = index;
+			reportedIndex.current = index;
 			element.scrollTo?.({
-				left: child.offsetLeft - start,
+				left: child.offsetLeft - startPadding,
 				behavior: "smooth"
 			});
 		}
-	}, [index, start]);
-	useEffect(() => () => clearTimeout(resting.current), []);
+	}, [index, startPadding]);
+	useEffect(() => () => clearTimeout(restTimer.current), []);
 	return /* @__PURE__ */ jsx("div", {
 		ref: row,
 		className: "dot-scroll",
 		onScroll: onChange ? () => {
-			clearTimeout(resting.current);
-			resting.current = setTimeout(() => {
+			clearTimeout(restTimer.current);
+			restTimer.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 }));
+				const visibleStart = element.scrollLeft + startPadding;
+				const firstHalfInView = [...element.children].findIndex((item) => item.offsetLeft + item.offsetWidth / 2 >= visibleStart);
+				if (firstHalfInView !== -1 && firstHalfInView !== reportedIndex.current) {
+					reportedIndex.current = firstHalfInView;
+					onChange(createEvent("change", { index: firstHalfInView }));
 				}
-			}, REST_MS);
+			}, REST_DELAY_MS);
 		} : void 0,
 		style: {
 			gap: SPACE[gap],
-			...space,
-			scrollPaddingInlineStart: space.paddingInlineStart,
-			scrollPaddingInlineEnd: space.paddingInlineEnd,
+			...paddingCss,
+			scrollPaddingInlineStart: paddingCss.paddingInlineStart,
+			scrollPaddingInlineEnd: paddingCss.paddingInlineEnd,
 			scrollSnapType: snap === "none" ? void 0 : "x mandatory",
 			"--dot-scroll-snap": snap === "none" ? "none" : snap
 		},

package/dist/components/select.js

@@ -2,7 +2,8 @@ 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 { CHEVRON_DOWN_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.js";
 import { OptionPlaceContext } from "./option-place.js";
 import { SheetPanel } from "./sheet.js";
 import { createEvent } from "@monimesl/dot-core";
@@ -60,8 +61,8 @@ const Select$1 = ({ value, label, placeholder, hint, error, disabled, onChange,
 					style: { color: colors.subtle },
 					children: placeholder
 				})
-			}), /* @__PURE__ */ jsx(IconGraphic, {
-				name: "chevron-down",
+			}), /* @__PURE__ */ jsx(IconSvg, {
+				artwork: CHEVRON_DOWN_ARTWORK,
 				size: ICON_SIZE.small,
 				color: colors.subtle
 			})]

package/dist/components/sheet.js

@@ -1,7 +1,8 @@
 import { FONT_FAMILY, useTheme } from "../theme.js";
 import { CARD_RADIUS_SCALE, FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { CLOSE_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.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";
@@ -81,8 +82,8 @@ const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...
 							background: "transparent",
 							cursor: "pointer"
 						},
-						children: /* @__PURE__ */ jsx(IconGraphic, {
-							name: "close",
+						children: /* @__PURE__ */ jsx(IconSvg, {
+							artwork: CLOSE_ARTWORK,
 							size: ICON_SIZE.medium,
 							color: colors.subtle
 						})

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,94 @@
+import { useTheme } from "../theme.js";
+import { 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 [shown, show] = useTypedText(value === void 0 ? void 0 : String(value), onChange !== void 0);
+	const { noteId, controlAttributes } = useFieldNote(hint, void 0);
+	const current = shown === "" ? min ?? 0 : Number(shown);
+	const moveTo = (next) => {
+		show(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: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			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,112 @@
+import { useTheme } from "../theme.js";
+import { 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 mark(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 } = mark(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: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					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/text.js

@@ -1,10 +1,9 @@
 import { useTheme } from "../theme.js";
 import { FONT_SIZE, SELECTABLE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
-import { toneColor } from "./tones.js";
+import { isTone, toneColor } from "./tones.js";
 import { InsideProse } from "./prose-context.js";
 import { customColor } from "./box.js";
-import { TONES } from "@monimesl/dot-core";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/text.tsx
@@ -51,7 +50,7 @@ const DECORATION = {
 	underline: "underline",
 	strikethrough: "line-through"
 };
-const Text$1 = ({ variant = "body", tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
+const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
 	const theme = useTheme();
 	const nested = useContext(InsideText);
 	const inProse = useContext(InsideProse);
@@ -99,10 +98,9 @@ const Text$1 = ({ variant = "body", tone, weight, align, maxLines, decoration, n
 		children: content
 	});
 };
-const THEME_TONES = new Set(TONES);
 function textColor(tone, theme) {
-	if (THEME_TONES.has(tone)) return toneColor(theme.colors, tone);
+	if (isTone(tone)) return toneColor(theme.colors, tone);
 	return tone === "onPrimary" ? theme.colors.onPrimary : customColor(tone, theme);
 }
 //#endregion
-export { Text$1 as Text };
+export { Text };

package/dist/components/toast.js

@@ -1,7 +1,7 @@
 import { useTheme } from "../theme.js";
 import { FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
-import { STATUS_ICONS } from "./tones.js";
-import { IconGraphic } from "./icon.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";
@@ -45,8 +45,8 @@ const Toast$1 = ({ message, tone = "default", duration = 2500, onHide }) => {
 			fontSize: FONT_SIZE.body,
 			boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2)"
 		},
-		children: [tone === "default" ? null : /* @__PURE__ */ jsx(IconGraphic, {
-			name: STATUS_ICONS[tone],
+		children: [tone === "default" ? null : /* @__PURE__ */ jsx(IconSvg, {
+			artwork: STATUS_ARTWORK[tone],
 			size: ICON_SIZE.medium,
 			color: colors.onPrimary
 		}), /* @__PURE__ */ jsx("span", { children: message })]

package/dist/components/toggles.js

@@ -1,7 +1,8 @@
 import { useTheme } from "../theme.js";
 import { DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
 import { FieldLabel } from "./field.js";
-import { IconGraphic } from "./icon.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";
@@ -94,8 +95,8 @@ const Checkbox$1 = ({ checked = false, label, disabled, onChange }) => {
 			checked,
 			children: /* @__PURE__ */ jsx(CheckboxIndicator, {
 				style: { display: "flex" },
-				children: /* @__PURE__ */ jsx(IconGraphic, {
-					name: "check",
+				children: /* @__PURE__ */ jsx(IconSvg, {
+					artwork: CHECK_ARTWORK,
 					size: ICON_SIZE.small,
 					color: colors.onPrimary
 				})

package/dist/components/tones.js

@@ -1,10 +1,16 @@
+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 STATUS_ICONS = {
-	default: "info",
-	info: "info",
-	success: "success",
-	warning: "warning",
-	danger: "error"
+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) {
@@ -21,4 +27,4 @@ function withOpacity(color, opacity) {
 	return `${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
 }
 //#endregion
-export { STATUS_ICONS, toneBackground, toneColor };
+export { STATUS_ARTWORK, isTone, toneBackground, toneColor };

package/dist/components/typed-text.js

@@ -6,8 +6,8 @@ function useTypedText(value, sendsChanges, show = (text) => text) {
 	const [previousValue, setPreviousValue] = useState(value);
 	if (value !== previousValue) {
 		setPreviousValue(value);
-		const echo = awaitingEcho.indexOf(value ?? "");
-		if (echo >= 0) setAwaitingEcho(awaitingEcho.slice(echo + 1));
+		const echoIndex = awaitingEcho.indexOf(value ?? "");
+		if (echoIndex >= 0) setAwaitingEcho(awaitingEcho.slice(echoIndex + 1));
 		else {
 			setAwaitingEcho([]);
 			setText(show(value ?? ""));

package/dist/components/utils.js

@@ -0,0 +1,6 @@
+//#region src/components/utils.ts
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(value, max));
+}
+//#endregion
+export { clamp };

package/dist/index.d.ts

@@ -2,11 +2,13 @@ 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";
@@ -28,6 +30,8 @@ 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";
@@ -36,4 +40,4 @@ 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, Badge, type BuiltinReactComponents, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, type CreateReactRendererOptions, DetailRow, 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, Switch, Tab, Tabs, Text, TextArea, Toast, View, type Wrapper, createReactRenderer, reactRenderer as default, resolveTheme, useTheme };
+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 };

package/dist/index.js

@@ -1,5 +1,6 @@
 import { resolveTheme, useTheme } from "./theme.js";
 import { AmountInput } from "./components/amount-input.js";
+import { Avatar } from "./components/avatar.js";
 import { Spinner } from "./components/spinner.js";
 import { Button } from "./components/button.js";
 import { Carousel } from "./components/carousel.js";
@@ -7,6 +8,7 @@ import { Icon } from "./components/icon.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";
@@ -27,6 +29,8 @@ import { Select } from "./components/select.js";
 import { Skeleton } from "./components/skeleton.js";
 import { Slider } from "./components/slider.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 { TextArea } from "./components/text-area.js";
 import { Toast } from "./components/toast.js";
@@ -36,4 +40,4 @@ import { createReactRenderer, reactRenderer } from "./renderer.js";
 //#region src/index.ts
 var src_default = reactRenderer;
 //#endregion
-export { AmountInput, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, 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, Switch, Tab, Tabs, Text, TextArea, Toast, View, createReactRenderer, src_default as default, resolveTheme, useTheme };
+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, createReactRenderer, src_default as default, resolveTheme, useTheme };

package/dist/pull-to-refresh.js

@@ -0,0 +1,118 @@
+import { useTheme } from "./theme.js";
+import { LoadingIcon } from "./components/spinner.js";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/pull-to-refresh.tsx
+const PULL_DISTANCE = 64;
+const RESISTANCE = .5;
+const INDICATOR_SIZE = 36;
+const DRAG_DISTANCE = 6;
+function PullToRefresh({ page, children }) {
+	const { colors } = useTheme();
+	const refreshing = useSyncExternalStore(page.subscribeToRefreshing, page.isRefreshing);
+	const [pull, setPull] = useState(0);
+	const area = useRef(null);
+	useEffect(() => {
+		const element = area.current;
+		const view = element.ownerDocument.defaultView;
+		let startY;
+		let pulled = 0;
+		let dragged = false;
+		const begin = (y) => {
+			const atTop = view.scrollY <= 0;
+			startY = page.refreshable && atTop && !page.isRefreshing() ? y : void 0;
+			dragged = false;
+		};
+		const move = (y, event) => {
+			if (startY === void 0) return;
+			const distance = (y - startY) * RESISTANCE;
+			if (distance <= 0) {
+				pulled = 0;
+				setPull(0);
+				return;
+			}
+			if (event.cancelable) event.preventDefault();
+			if (distance > DRAG_DISTANCE) dragged = true;
+			pulled = Math.min(distance, PULL_DISTANCE * 1.5);
+			setPull(pulled);
+		};
+		const end = () => {
+			if (startY !== void 0 && pulled >= PULL_DISTANCE) page.refresh();
+			startY = void 0;
+			pulled = 0;
+			setPull(0);
+		};
+		const ignoreDragClick = (event) => {
+			if (dragged) {
+				dragged = false;
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		};
+		const touchStart = (event) => begin(event.touches[0].clientY);
+		const touchMove = (event) => move(event.touches[0].clientY, event);
+		const mouseDown = (event) => {
+			if (event.button === 0) begin(event.clientY);
+		};
+		const mouseMove = (event) => move(event.clientY, event);
+		const stops = [
+			listen(element, "touchstart", touchStart, { passive: true }),
+			listen(element, "touchmove", touchMove, { passive: false }),
+			listen(element, "touchend", end),
+			listen(element, "touchcancel", end),
+			listen(element, "mousedown", mouseDown),
+			listen(element, "click", ignoreDragClick, { capture: true }),
+			listen(view, "mousemove", mouseMove),
+			listen(view, "mouseup", end)
+		];
+		return () => stops.forEach((stop) => stop());
+	}, [page]);
+	const shown = refreshing ? PULL_DISTANCE : pull;
+	const ready = pull >= PULL_DISTANCE;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: area,
+		className: "dot-pull-to-refresh",
+		style: { display: "contents" },
+		children: [children, shown > 0 ? /* @__PURE__ */ jsx("span", {
+			role: refreshing ? "status" : void 0,
+			"aria-label": refreshing ? "Refreshing" : void 0,
+			style: {
+				position: "fixed",
+				top: 0,
+				left: "50%",
+				zIndex: 2,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				width: INDICATOR_SIZE,
+				height: INDICATOR_SIZE,
+				marginLeft: -18,
+				borderRadius: "50%",
+				background: colors.surface,
+				color: colors.primary,
+				boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
+				transform: `translateY(${shown - INDICATOR_SIZE / 2}px)`,
+				transition: pull > 0 ? "none" : "transform 0.2s",
+				pointerEvents: "none"
+			},
+			children: refreshing ? /* @__PURE__ */ jsx(LoadingIcon, { size: 20 }) : /* @__PURE__ */ jsx("svg", {
+				width: 20,
+				height: 20,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				style: { transform: `rotate(${ready ? 180 : pull / PULL_DISTANCE * 180}deg)` },
+				children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M6 13l6 6 6-6" })
+			})
+		}) : null]
+	});
+}
+function listen(target, type, listener, options) {
+	target.addEventListener(type, listener, options);
+	return () => target.removeEventListener(type, listener, options);
+}
+//#endregion
+export { PullToRefresh };