@monimesl/dot-renderer-react 0.1.0-alpha.9 → 1.0.0-beta.1

package/dist/components/list.js

@@ -1,5 +1,7 @@
 import { useTheme } from "../theme.js";
-import { CARD_RADIUS_SCALE, FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.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";
@@ -9,22 +11,22 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 const END_MARGIN = "0px 0px 200px 0px";
 const List$1 = ({ onEndReached, children, ...padding }) => {
 	const { colors, radius } = useTheme();
-	const list = useRef(null);
-	const reachedAt = useRef(null);
+	const listRef = useRef(null);
+	const lastRowReached = useRef(null);
 	useEffect(() => {
-		const last = list.current?.lastElementChild;
-		if (!onEndReached || !last || typeof IntersectionObserver === "undefined") return;
+		const lastRow = listRef.current?.lastElementChild;
+		if (!onEndReached || !lastRow || typeof IntersectionObserver === "undefined") return;
 		const observer = new IntersectionObserver((entries) => {
-			if (entries.some((entry) => entry.isIntersecting) && reachedAt.current !== last) {
-				reachedAt.current = last;
+			if (entries.some((entry) => entry.isIntersecting) && lastRowReached.current !== lastRow) {
+				lastRowReached.current = lastRow;
 				onEndReached(createEvent("endReached"));
 			}
 		}, { rootMargin: END_MARGIN });
-		observer.observe(last);
+		observer.observe(lastRow);
 		return () => observer.disconnect();
 	});
 	return /* @__PURE__ */ jsx("ul", {
-		ref: list,
+		ref: listRef,
 		className: "dot-list",
 		style: {
 			display: "flex",
@@ -57,9 +59,7 @@ const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...p
 	});
 	else if (icon) leading = /* @__PURE__ */ jsx("span", {
 		style: {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
+			...CENTERED,
 			width: 36,
 			height: 36,
 			borderRadius: "50%",
@@ -106,14 +106,14 @@ const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...p
 				flexShrink: 0,
 				color: colors.subtle
 			},
-			children: [trailing, onTap ? /* @__PURE__ */ jsx(IconGraphic, {
-				name: "chevron-right",
+			children: [trailing, onTap ? /* @__PURE__ */ jsx(IconSvg, {
+				artwork: CHEVRON_RIGHT_ARTWORK,
 				size: ICON_SIZE.small,
 				color: colors.subtle
 			}) : null]
 		}) : null
 	] });
-	const row = {
+	const rowStyle = {
 		display: "flex",
 		alignItems: "center",
 		gap: 12,
@@ -126,12 +126,12 @@ const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...p
 	};
 	return /* @__PURE__ */ jsx("li", {
 		className: "dot-list-item",
-		style: onTap ? { background: colors.surface } : row,
+		style: onTap ? { background: colors.surface } : rowStyle,
 		children: onTap ? /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: () => onTap(createEvent("tap")),
 			style: {
-				...row,
+				...rowStyle,
 				border: "none",
 				cursor: "pointer"
 			},

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.js

@@ -1,6 +1,7 @@
 import { useTheme } from "../theme.js";
 import { FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
-import { IconGraphic } from "./icon.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";
@@ -32,8 +33,8 @@ const Option = ({ value, label }) => {
 			textAlign: "start",
 			cursor: "pointer"
 		},
-		children: [/* @__PURE__ */ jsx("span", { children: label }), chosen ? /* @__PURE__ */ jsx(IconGraphic, {
-			name: "check",
+		children: [/* @__PURE__ */ jsx("span", { children: label }), chosen ? /* @__PURE__ */ jsx(IconSvg, {
+			artwork: CHECK_ARTWORK,
 			size: ICON_SIZE.medium,
 			color: colors.primary
 		}) : null]

package/dist/components/padding.js

@@ -14,14 +14,25 @@ function insets(block, inline = block) {
 		bottom: block
 	};
 }
-function paddingStyle(props, own = NO_INSETS) {
-	const side = (space, pixels) => space === void 0 ? pixels : SPACE[space];
+function paddingStyle(props, ownInsets = NO_INSETS) {
 	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)
+		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 { insets, paddingStyle };
+export { HOME_INDICATOR, insets, paddingStyle, pinnedPaddingStyle };

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 };

package/dist/components/prose.js

@@ -0,0 +1,67 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, SELECTABLE } from "./tokens.js";
+import { paddingStyle } from "./padding.js";
+import { InsideProse } from "./prose-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/prose.tsx
+const READING_WIDTH = 680;
+const Prose = ({ children, ...padding }) => /* @__PURE__ */ jsx("div", {
+	className: "dot-prose",
+	style: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 12,
+		width: "100%",
+		maxWidth: READING_WIDTH,
+		marginInline: "auto",
+		...SELECTABLE,
+		...paddingStyle(padding)
+	},
+	children: /* @__PURE__ */ jsx(InsideProse.Provider, {
+		value: true,
+		children
+	})
+});
+const Quote = ({ cite, children }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsxs("blockquote", {
+		className: "dot-quote",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 6,
+			margin: 0,
+			paddingInlineStart: 14,
+			borderInlineStart: `3px solid ${colors.subtle}`,
+			fontStyle: "italic"
+		},
+		children: [children, cite && /* @__PURE__ */ jsxs("span", {
+			style: {
+				fontSize: FONT_SIZE.caption,
+				fontStyle: "normal",
+				color: colors.subtle
+			},
+			children: ["— ", cite]
+		})]
+	});
+};
+const BulletList = ({ ordered, children }) => {
+	return /* @__PURE__ */ jsx(ordered ? "ol" : "ul", {
+		className: "dot-bullets",
+		style: {
+			display: "grid",
+			gap: 6,
+			margin: 0,
+			paddingInlineStart: 22,
+			listStyleType: ordered ? "decimal" : "disc"
+		},
+		children
+	});
+};
+const Bullet = ({ children }) => /* @__PURE__ */ jsx("li", {
+	className: "dot-bullet",
+	style: { display: "list-item" },
+	children
+});
+//#endregion
+export { Bullet, BulletList, Prose, Quote };

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

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

package/dist/components/rich-text.js

@@ -0,0 +1,73 @@
+import { useTheme } from "../theme.js";
+import { Divider } from "./divider.js";
+import { Image } from "./image.js";
+import { isHttps } from "./https.js";
+import { Link } from "./link.js";
+import { Bullet, BulletList, Prose, Quote } from "./prose.js";
+import { parseMarkdown } from "../markdown.js";
+import { Text } from "./text.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/rich-text.tsx
+const HEADING_TEXT = {
+	1: { variant: "title" },
+	2: { variant: "subtitle" },
+	3: { weight: "bold" }
+};
+const RichText = ({ markdown }) => {
+	const blocks = useMemo(() => parseMarkdown(markdown ?? ""), [markdown]);
+	return /* @__PURE__ */ jsx(Prose, { children: blocks.map(renderBlock) });
+};
+function renderBlock(block, key) {
+	switch (block.kind) {
+		case "heading": return /* @__PURE__ */ jsx(Text, {
+			...HEADING_TEXT[block.level],
+			children: block.content.map(renderInline)
+		}, key);
+		case "paragraph": return /* @__PURE__ */ jsx(Text, { children: block.content.map(renderInline) }, key);
+		case "list": return /* @__PURE__ */ jsx(BulletList, {
+			ordered: block.ordered,
+			children: block.items.map((item, itemKey) => /* @__PURE__ */ jsx(Bullet, { children: item.map(renderBlock) }, itemKey))
+		}, key);
+		case "quote": return /* @__PURE__ */ jsx(Quote, { children: block.blocks.map(renderBlock) }, key);
+		case "image": return /* @__PURE__ */ jsx(Image, {
+			src: block.src,
+			alt: block.alt
+		}, key);
+		case "rule": return /* @__PURE__ */ jsx(Divider, {}, key);
+	}
+}
+function renderInline(inline, key) {
+	switch (inline.kind) {
+		case "text": return inline.text;
+		case "strong": return /* @__PURE__ */ jsx(Text, {
+			weight: "bold",
+			children: inline.children.map(renderInline)
+		}, key);
+		case "emphasis": return /* @__PURE__ */ jsx(Text, {
+			italic: true,
+			children: inline.children.map(renderInline)
+		}, key);
+		case "code": return /* @__PURE__ */ jsx(Code, { text: inline.text }, key);
+		case "link": return isHttps(inline.href) ? /* @__PURE__ */ jsx(Link, {
+			href: inline.href,
+			children: inline.children.map(renderInline)
+		}, key) : inline.children.map(renderInline);
+		case "break": return /* @__PURE__ */ jsx("br", {}, key);
+	}
+}
+function Code({ text }) {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("code", {
+		style: {
+			padding: "1px 4px",
+			borderRadius: 4,
+			background: colors.muted,
+			fontFamily: "ui-monospace, monospace",
+			fontSize: "0.9em"
+		},
+		children: text
+	});
+}
+//#endregion
+export { RichText };

package/dist/components/scroll.js

@@ -4,47 +4,49 @@ 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 rowRef = useRef(null);
+	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;
+		const element = rowRef.current;
+		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(() => {
+		return () => clearTimeout(restTimer.current);
+	}, []);
 	return /* @__PURE__ */ jsx("div", {
-		ref: row,
+		ref: rowRef,
 		className: "dot-scroll",
 		onScroll: onChange ? () => {
-			clearTimeout(resting.current);
-			resting.current = setTimeout(() => {
-				const element = row.current;
+			clearTimeout(restTimer.current);
+			restTimer.current = setTimeout(() => {
+				const element = rowRef.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 firstShownIndex = [...element.children].findIndex((item) => item.offsetLeft + item.offsetWidth / 2 >= visibleStart);
+				if (firstShownIndex !== -1 && firstShownIndex !== reportedIndex.current) {
+					reportedIndex.current = firstShownIndex;
+					onChange(createEvent("change", { index: firstShownIndex }));
 				}
-			}, 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 { paddingStyle } from "./padding.js";
-import { IconGraphic } from "./icon.js";
+import { CLOSE_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.js";
+import { pinnedPaddingStyle } from "./padding.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";
@@ -15,7 +16,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...padding }) => {
 	const { colors, radius } = useTheme();
 	const container = usePortalContainer();
-	const corner = radius * CARD_RADIUS_SCALE;
+	const cornerRadius = radius * CARD_RADIUS_SCALE;
 	return /* @__PURE__ */ jsx(DialogRoot, {
 		open,
 		onOpenChange: (next) => {
@@ -44,14 +45,14 @@ const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...
 					gap: SPACE.medium,
 					maxHeight: "85vh",
 					overflowY: "auto",
-					...paddingStyle(padding, {
+					...pinnedPaddingStyle(padding, {
 						top: 16,
 						start: 16,
 						end: 16,
 						bottom: 24
 					}),
-					borderTopLeftRadius: corner,
-					borderTopRightRadius: corner,
+					borderTopLeftRadius: cornerRadius,
+					borderTopRightRadius: cornerRadius,
 					background: colors.surface,
 					color: colors.text,
 					fontFamily: FONT_FAMILY,
@@ -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/slider.d.ts

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

package/dist/components/slider.js

@@ -0,0 +1,57 @@
+import { useTheme } from "../theme.js";
+import { DISABLED_OPACITY, FONT_SIZE } from "./tokens.js";
+import { Field, FieldLabel } from "./field.js";
+import { useFieldNote } from "./field-box.js";
+import { useTypedText } from "./typed-text.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/slider.tsx
+const Slider$1 = ({ value, min = 0, max = 100, step = 1, showValue, label, hint, disabled, onChange }) => {
+	const { colors } = useTheme();
+	const [positionText, showPosition] = useTypedText(value === void 0 ? void 0 : String(value), onChange !== void 0);
+	const { noteId, controlAttributes } = useFieldNote(hint, void 0);
+	const shownValue = positionText === "" ? String(min) : positionText;
+	return /* @__PURE__ */ jsxs(Field, {
+		label: void 0,
+		hint,
+		error: void 0,
+		noteId,
+		children: [label || showValue ? /* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "flex",
+				justifyContent: "space-between"
+			},
+			children: [/* @__PURE__ */ jsx(FieldLabel, { children: label }), showValue ? /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: FONT_SIZE.caption,
+					color: colors.subtle,
+					fontVariantNumeric: "tabular-nums"
+				},
+				children: shownValue
+			}) : null]
+		}) : null, /* @__PURE__ */ jsx("input", {
+			className: "dot-slider",
+			type: "range",
+			min,
+			max,
+			step,
+			value: shownValue,
+			disabled,
+			"aria-label": label,
+			...controlAttributes,
+			onChange: (event) => {
+				const next = event.currentTarget.value;
+				showPosition(next);
+				onChange?.(createEvent("change", { value: Number(next) }));
+			},
+			style: {
+				width: "100%",
+				margin: 0,
+				accentColor: colors.primary,
+				opacity: disabled ? DISABLED_OPACITY : 1
+			}
+		})]
+	});
+};
+//#endregion
+export { Slider$1 as Slider };

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 };