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

package/README.md

@@ -0,0 +1,43 @@
+# @monimesl/dot-renderer-react
+
+Renders Dot pages with React. Every dot runs with this renderer. Dots get it through
+`@monimesl/dot-runtime` and never import it themselves.
+
+## How it draws
+
+Each built-in component is a React component that draws plain elements with inline styles, in
+the colors and shape of the dot's theme. A small stylesheet, `dist/styles.css`, covers what inline
+styles can't do, such as keyframes and scroll bars. The compiler copies it into each dot as
+`dot.css`.
+
+Five components use [Base UI](https://base-ui.com)'s headless parts for the focus, keyboard and
+screen-reader behaviour that is hard to get right: `Sheet` (and the sheet a `Select` opens), `Tabs`,
+`Switch`, `Checkbox` and `RadioGroup`. A sheet keeps focus inside it, closes on Escape and stops the
+page behind from scrolling. Fields link their hint or error to the control they describe.
+
+Icons are [Phosphor](https://phosphoricons.com)'s bold artwork. A script generates them into the
+source at build time, from `@phosphor-icons/core`.
+
+## The theme
+
+A dot sets `scheme`, `colors` and `shape` in `defineDot`. The colors are `primary`, `background`,
+`surface` and `text`, each for light and dark. The renderer fills in the rest of the palette (the
+neutrals and the status colors) from Dash's own look. `useTheme()` gives a component the resolved
+theme.
+
+## Only the components a dot uses
+
+A dot's production build carries only the components its pages use. The compiler lists them from
+the pages, imports each one by name and makes the webview with
+`createReactRenderer({ components })`. The renderer is built as one file per module, with the
+libraries it bundles under `dist/vendor/`. So a dot's bundle can leave out a component, and
+anything only that component imports. A development build has every component, because a hot reload
+keeps the renderer the page already runs with.
+
+`reactRenderer()`, the default export, makes a renderer with every built-in component. Pass
+`components` to add or replace some, and `wrapper` to wrap each page.
+
+## React
+
+Hosts serve React, so dots don't bundle it. This package's build makes the React that hosts ship,
+in `dist/react-host/<version>/`. A dot's page imports it through an import map.

package/dist/LICENSE-PHOSPHOR

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,14 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __commonJSMin, __exportAll };

package/dist/_virtual/builtin_esm-external-require-react.js

@@ -0,0 +1,9 @@
+import { __commonJSMin } from "./_rolldown/runtime.js";
+import * as m from "react";
+//#region builtin:esm-external-require-react
+var require_builtin_esm_external_require_react = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	module.exports = { ...m };
+}));
+//#endregion
+export default require_builtin_esm_external_require_react();
+export { require_builtin_esm_external_require_react };

package/dist/color.js

@@ -0,0 +1,105 @@
+//#region src/color.ts
+const READABLE_CONTRAST = 4.5;
+function contrast(first, second) {
+	const [lighter, darker] = [luminance(first), luminance(second)].sort((a, b) => b - a);
+	return (lighter + .05) / (darker + .05);
+}
+function darken(color, points) {
+	const [hue, saturation, lightness] = toHsl(channels(color));
+	return toHex(fromHsl(hue, saturation, Math.max(0, lightness - points / 100)));
+}
+function luminance(color) {
+	const [red, green, blue] = channels(color).map((channel) => {
+		const share = channel / 255;
+		return share <= .03928 ? share / 12.92 : ((share + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * red + .7152 * green + .0722 * blue;
+}
+function channels(color) {
+	let hex = color.slice(1);
+	if (hex.length === 3 || hex.length === 4) hex = [...hex].map((digit) => digit + digit).join("");
+	const [red, green, blue] = [
+		0,
+		2,
+		4
+	].map((start) => parseInt(hex.slice(start, start + 2), 16));
+	return [
+		red,
+		green,
+		blue
+	];
+}
+function toHex(rgb) {
+	return `#${rgb.map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`;
+}
+function toHsl([red, green, blue]) {
+	const [r, g, b] = [
+		red / 255,
+		green / 255,
+		blue / 255
+	];
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const lightness = (max + min) / 2;
+	const chroma = max - min;
+	if (chroma === 0) return [
+		0,
+		0,
+		lightness
+	];
+	const saturation = chroma / (1 - Math.abs(2 * lightness - 1));
+	let hue;
+	if (max === r) hue = (g - b) / chroma % 6;
+	else if (max === g) hue = (b - r) / chroma + 2;
+	else hue = (r - g) / chroma + 4;
+	return [
+		(hue * 60 + 360) % 360,
+		saturation,
+		lightness
+	];
+}
+function fromHsl(hue, saturation, lightness) {
+	const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+	const second = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
+	const sector = Math.floor(hue / 60) % 6;
+	const [r, g, b] = [
+		[
+			chroma,
+			second,
+			0
+		],
+		[
+			second,
+			chroma,
+			0
+		],
+		[
+			0,
+			chroma,
+			second
+		],
+		[
+			0,
+			second,
+			chroma
+		],
+		[
+			second,
+			0,
+			chroma
+		],
+		[
+			chroma,
+			0,
+			second
+		]
+	][sector];
+	const lift = lightness - chroma / 2;
+	return [
+		(r + lift) * 255,
+		(g + lift) * 255,
+		(b + lift) * 255
+	];
+}
+//#endregion
+export { READABLE_CONTRAST, contrast, darken };

package/dist/components/amount-input.d.ts

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

package/dist/components/amount-input.js

@@ -0,0 +1,106 @@
+import { useTheme } from "../theme.js";
+import { SPACE, WEIGHTS } from "./tokens.js";
+import { Field } from "./field.js";
+import { BARE_INPUT_STYLE, useFieldBox, 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/amount-input.tsx
+const AMOUNT_FONT_SIZE = 28;
+const DEFAULT_CURRENCY = "SLE";
+const AmountInput$1 = ({ value, currency = DEFAULT_CURRENCY, minorUnits, unit = "minor", label, placeholder, hint, error, disabled, onChange }) => {
+	const { colors } = useTheme();
+	const places = minorUnits === void 0 ? currencyMinorUnits(currency) : Math.max(0, Math.round(minorUnits));
+	const scale = unit === "major" ? 10 ** places : 1;
+	const show = (minor) => formatMinorUnits(minor, places);
+	const [text, typeText, reshowText] = useTypedText(amountText(value, scale), onChange !== void 0, (sent) => sent === "" ? "" : show(Number(sent)));
+	const box = useFieldBox(error, disabled);
+	const { noteId, controlAttributes } = useFieldNote(hint, error);
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		hint,
+		error,
+		noteId,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "dot-amount-input",
+			style: {
+				...box.style,
+				display: "flex",
+				alignItems: "baseline",
+				gap: SPACE.medium,
+				padding: "10px 14px"
+			},
+			children: [currency ? /* @__PURE__ */ jsx("span", {
+				style: {
+					color: colors.subtle,
+					fontSize: 20,
+					fontWeight: WEIGHTS.medium
+				},
+				children: currency
+			}) : null, /* @__PURE__ */ jsx("input", {
+				value: text,
+				placeholder: placeholder ?? show(0),
+				inputMode: places > 0 ? "decimal" : "numeric",
+				disabled,
+				...controlAttributes,
+				onFocus: box.onFocus,
+				onBlur: () => {
+					box.onBlur();
+					const amount = toMinorUnits(text, places);
+					if (amount !== null) reshowText(show(amount));
+				},
+				onChange: (event) => {
+					const typed = cleanAmount(event.currentTarget.value, places);
+					const amount = toMinorUnits(typed, places);
+					typeText(typed, amount === null ? "" : String(amount));
+					onChange?.(createEvent("change", { value: amount === null ? null : amount / scale }));
+				},
+				style: {
+					...BARE_INPUT_STYLE,
+					padding: 0,
+					fontSize: AMOUNT_FONT_SIZE,
+					fontWeight: WEIGHTS.bold
+				}
+			})]
+		})
+	});
+};
+function currencyMinorUnits(currency) {
+	try {
+		return new Intl.NumberFormat("en", {
+			style: "currency",
+			currency
+		}).resolvedOptions().maximumFractionDigits ?? 2;
+	} catch {
+		return 2;
+	}
+}
+function amountText(value, scale) {
+	if (value === void 0) return;
+	return Number.isFinite(value) ? String(Math.round(value * scale)) : "";
+}
+function cleanAmount(typed, places) {
+	const [whole = "", ...fractions] = typed.replace(/[^\d.]/g, "").split(".");
+	const digits = whole.replace(/^0+/, "") || whole.slice(0, 1);
+	if (places === 0 || fractions.length === 0) return groupThousands(digits);
+	const fraction = fractions.join("").slice(0, places);
+	return `${groupThousands(digits) || "0"}.${fraction}`;
+}
+function toMinorUnits(text, places) {
+	const plain = text.replaceAll(",", "");
+	if (plain === "") return null;
+	const [whole = "", fraction = ""] = plain.split(".");
+	return Number(`${whole}${fraction.padEnd(places, "0").slice(0, places)}`);
+}
+function formatMinorUnits(minorUnits, places) {
+	const digits = String(Math.abs(minorUnits)).padStart(places + 1, "0");
+	const grouped = groupThousands(digits.slice(0, digits.length - places));
+	return places === 0 ? grouped : `${grouped}.${digits.slice(digits.length - places)}`;
+}
+function groupThousands(digits) {
+	const groups = [];
+	for (let end = digits.length; end > 0; end -= 3) groups.unshift(digits.slice(Math.max(0, end - 3), end));
+	return groups.join(",");
+}
+//#endregion
+export { AmountInput$1 as AmountInput };

package/dist/components/button.d.ts

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

package/dist/components/button.js

@@ -0,0 +1,42 @@
+import { useTheme } from "../theme.js";
+import { DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { LoadingIcon } from "./spinner.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/button.tsx
+const Button$1 = ({ variant = "primary", disabled, loading, onClick, children }) => {
+	const { colors, radius } = useTheme();
+	const filled = variant === "primary" && !disabled;
+	let color = colors.text;
+	if (filled) color = colors.onPrimary;
+	else if (disabled) color = colors.subtle;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "dot-button",
+		"data-variant": variant,
+		disabled: Boolean(disabled),
+		"aria-busy": loading || void 0,
+		"aria-disabled": loading || void 0,
+		onClick: onClick && !loading ? () => onClick(createEvent("click")) : void 0,
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: SPACE.medium,
+			minHeight: 48,
+			padding: "12px 20px",
+			border: "none",
+			borderRadius: radius,
+			background: filled ? colors.primary : colors.muted,
+			color,
+			fontSize: FONT_SIZE.body,
+			fontWeight: WEIGHTS.bold,
+			lineHeight: "normal",
+			opacity: disabled ? DISABLED_OPACITY : 1,
+			cursor: disabled || loading ? "default" : "pointer"
+		},
+		children: [loading ? /* @__PURE__ */ jsx(LoadingIcon, { size: ICON_SIZE.small }) : null, children]
+	});
+};
+//#endregion
+export { Button$1 as Button };

package/dist/components/carousel.d.ts

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

package/dist/components/carousel.js

@@ -0,0 +1,254 @@
+import { useTheme } from "../theme.js";
+import { SPACE } from "./tokens.js";
+import { paddingStyle } from "./padding.js";
+import { createEvent } from "@monimesl/dot-core";
+import { Children, Fragment, isValidElement, useEffect, useEffectEvent, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/carousel.tsx
+const SLIDE_DURATION = 350;
+const SLIDE_EASING = "cubic-bezier(0.22, 0.61, 0.36, 1)";
+const SWIPE_DISTANCE = .2;
+const SWIPE_SPEED = .4;
+const EDGE_RESISTANCE = .3;
+const TAP_SLOP = 6;
+const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator = "dots", gap = "none", effect = "slide", index, onChange, children, ...padding }) => {
+	const { colors } = useTheme();
+	const slides = slidesOf(children);
+	const count = slides.length;
+	const looping = loop && count > 1;
+	const first = looping ? 1 : 0;
+	const last = looping ? count + 1 : count - 1;
+	const [position, setPosition] = useState(() => first + slideIndex(index ?? 0, count));
+	const [animated, setAnimated] = useState(true);
+	const [drag, setDrag] = useState(0);
+	const [dragging, setDragging] = useState(false);
+	const [width, setWidth] = useState(0);
+	const [previousIndex, setPreviousIndex] = useState(index);
+	const viewport = useRef(null);
+	const gesture = useRef(null);
+	const swiped = useRef(false);
+	if (index !== previousIndex) {
+		setPreviousIndex(index);
+		if (index !== void 0) {
+			setAnimated(true);
+			setPosition(first + slideIndex(index, count));
+		}
+	}
+	const shown = clamp(position, 0, last);
+	const current = count === 0 ? 0 : wrap(shown - first, count);
+	const moveTo = (target) => {
+		const next = clamp(target, 0, last);
+		setAnimated(true);
+		setPosition(next);
+		const nextIndex = wrap(next - first, count);
+		if (nextIndex !== current) onChange?.(createEvent("change", { index: nextIndex }));
+	};
+	const step = (direction) => {
+		const beyondEnd = current + direction < 0 || current + direction >= count;
+		moveTo(!looping && beyondEnd ? shown : shown + direction);
+	};
+	const advance = useEffectEvent(() => {
+		if (!looping && current === count - 1) moveTo(first);
+		else moveTo(shown + 1);
+	});
+	useEffect(() => {
+		if (!autoplay || count < 2 || dragging) return;
+		const timer = setTimeout(advance, interval);
+		return () => clearTimeout(timer);
+	}, [
+		autoplay,
+		count,
+		dragging,
+		interval,
+		current
+	]);
+	useEffect(() => {
+		if (!looping || position !== 0 && position !== count + 1) return;
+		const timer = setTimeout(() => {
+			setAnimated(false);
+			setPosition(position === 0 ? count : 1);
+		}, SLIDE_DURATION);
+		return () => clearTimeout(timer);
+	}, [
+		looping,
+		position,
+		count
+	]);
+	const gestureOf = (event) => {
+		const touch = gesture.current;
+		return touch?.pointerId === event.pointerId ? touch : null;
+	};
+	const endGesture = () => {
+		gesture.current = null;
+		setDragging(false);
+		setDrag(0);
+		setAnimated(true);
+	};
+	const onPointerDown = (event) => {
+		if (count < 2 || !event.isPrimary) return;
+		gesture.current = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY,
+			startTime: event.timeStamp,
+			swiping: false
+		};
+		swiped.current = false;
+		setDragging(true);
+		setWidth(viewport.current?.clientWidth ?? 0);
+	};
+	const onPointerMove = (event) => {
+		const touch = gestureOf(event);
+		if (!touch) return;
+		const dx = event.clientX - touch.startX;
+		const dy = event.clientY - touch.startY;
+		if (!touch.swiping) {
+			if (Math.abs(dx) < TAP_SLOP && Math.abs(dy) < TAP_SLOP) return;
+			if (Math.abs(dy) > Math.abs(dx)) {
+				endGesture();
+				return;
+			}
+			touch.swiping = true;
+			swiped.current = true;
+			event.currentTarget.setPointerCapture?.(event.pointerId);
+			setAnimated(false);
+		}
+		const pastEnd = !looping && (current === 0 && dx > 0 || current === count - 1 && dx < 0);
+		setDrag(pastEnd ? dx * EDGE_RESISTANCE : dx);
+	};
+	const onPointerUp = (event) => {
+		const touch = gestureOf(event);
+		if (!touch) return;
+		endGesture();
+		if (!touch.swiping) return;
+		const dx = event.clientX - touch.startX;
+		const speed = Math.abs(dx) / Math.max(1, event.timeStamp - touch.startTime);
+		if (Math.abs(dx) > width * SWIPE_DISTANCE || speed > SWIPE_SPEED) step(dx < 0 ? 1 : -1);
+		else moveTo(shown);
+	};
+	const gapWidth = SPACE[gap];
+	const transition = animated ? `transform ${SLIDE_DURATION}ms ${SLIDE_EASING}` : "none";
+	const swipedSlides = width > 0 ? drag / (width + gapWidth) : 0;
+	const track = looping ? [
+		{
+			...slides[count - 1],
+			key: "copy-of-last"
+		},
+		...slides,
+		{
+			...slides[0],
+			key: "copy-of-first"
+		}
+	] : slides;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dot-carousel",
+		role: "region",
+		"aria-roledescription": "carousel",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: SPACE.medium,
+			minWidth: 0,
+			...paddingStyle(padding)
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: viewport,
+			onPointerDown,
+			onPointerMove,
+			onPointerUp,
+			onPointerCancel: endGesture,
+			onDragStart: (event) => event.preventDefault(),
+			onClickCapture: (event) => {
+				if (swiped.current) {
+					swiped.current = false;
+					event.stopPropagation();
+				}
+			},
+			style: {
+				overflow: "hidden",
+				touchAction: "pan-y",
+				userSelect: dragging ? "none" : void 0
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					gap: gapWidth,
+					transform: `translateX(calc(${-shown} * (100% + ${gapWidth}px) + ${drag}px))`,
+					transition
+				},
+				children: track.map((slide, trackPosition) => {
+					const visible = trackPosition === shown;
+					const distance = Math.abs(trackPosition - shown + swipedSlides);
+					const scale = 1 - Math.min(distance, 1) * .15000000000000002;
+					return /* @__PURE__ */ jsx("div", {
+						role: "group",
+						"aria-roledescription": "slide",
+						"aria-label": `${wrap(trackPosition - first, count) + 1} of ${count}`,
+						"aria-hidden": !visible,
+						inert: !visible,
+						style: {
+							display: "grid",
+							flex: "0 0 100%",
+							minWidth: 0,
+							transform: effect === "scale" ? `scale(${scale})` : void 0,
+							transition: effect === "scale" ? transition : void 0
+						},
+						children: slide.node
+					}, slide.key);
+				})
+			})
+		}), indicator === "dots" && count > 1 ? /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				justifyContent: "center"
+			},
+			children: slides.map((slide, slideIndex) => {
+				const active = slideIndex === current;
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": `Slide ${slideIndex + 1} of ${count}`,
+					"aria-current": active,
+					onClick: () => moveTo(first + slideIndex),
+					style: {
+						padding: "6px 3px",
+						border: "none",
+						background: "none",
+						cursor: "pointer"
+					},
+					children: /* @__PURE__ */ jsx("span", { style: {
+						display: "block",
+						width: active ? 18 : 6,
+						height: 6,
+						borderRadius: 3,
+						background: active ? colors.primary : colors.subtle,
+						transition: "width 0.3s, background 0.3s"
+					} })
+				}, slide.key);
+			})
+		}) : null]
+	});
+};
+function slidesOf(children, keyPrefix = "") {
+	const slides = [];
+	for (const child of Children.toArray(children)) {
+		if (!isValidElement(child)) continue;
+		const key = `${keyPrefix}${String(child.key)}`;
+		if (child.type === Fragment) slides.push(...slidesOf(child.props.children, `${key}/`));
+		else slides.push({
+			key,
+			node: child
+		});
+	}
+	return slides;
+}
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(value, max));
+}
+function slideIndex(index, count) {
+	return clamp(Math.round(index), 0, count - 1);
+}
+function wrap(value, count) {
+	return (value % count + count) % count;
+}
+//#endregion
+export { Carousel$1 as Carousel };

package/dist/components/chip.d.ts

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

package/dist/components/chip.js

@@ -0,0 +1,41 @@
+import { useTheme } from "../theme.js";
+import { DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
+import { IconGraphic } from "./icon.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chip.tsx
+const Chip$1 = ({ label, icon, selected = false, disabled, onTap }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "dot-chip",
+		"aria-pressed": selected,
+		disabled,
+		onClick: onTap ? () => onTap(createEvent("tap")) : void 0,
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 6,
+			flexShrink: 0,
+			minHeight: 34,
+			padding: "0 14px",
+			borderRadius: 17,
+			border: `1px solid ${selected ? colors.primary : colors.border}`,
+			background: selected ? colors.primary : colors.surface,
+			color: selected ? colors.onPrimary : colors.text,
+			fontSize: FONT_SIZE.caption,
+			fontWeight: WEIGHTS.medium,
+			lineHeight: "normal",
+			whiteSpace: "nowrap",
+			opacity: disabled ? DISABLED_OPACITY : 1,
+			cursor: disabled ? "default" : "pointer"
+		},
+		children: [icon ? /* @__PURE__ */ jsx(IconGraphic, {
+			name: icon,
+			size: ICON_SIZE.small,
+			color: "currentColor"
+		}) : null, label]
+	});
+};
+//#endregion
+export { Chip$1 as Chip };

package/dist/components/code-input.d.ts

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