@monimesl/dot-renderer-react 1.0.0-beta.0 → 1.0.0-beta.10

package/dist/components/grid.js

@@ -1,25 +1,32 @@
+import { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, PILL_STYLE } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { CARD_RADIUS_SCALE, CENTERED, FONT_SIZE, PILL_STYLE, SPACE } from "./tokens.js";
 import { wholeCount } from "./numbers.js";
 import { paddingStyle } from "./padding.js";
+import { SideRoomContext } from "./side-room.js";
 import { IconGraphic } from "./icon.js";
 import { pressable } from "./pressable.js";
 import { createEvent } from "@monimesl/dot-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/grid.tsx
 const TILE_SIZE = 52;
-const Grid$1 = ({ columns = 4, gap = "medium", children, ...padding }) => /* @__PURE__ */ jsx("div", {
-	className: "dot-grid",
-	style: {
-		display: "grid",
-		gridTemplateColumns: `repeat(${wholeCount(columns)}, minmax(0, 1fr))`,
-		gap: SPACE[gap],
-		...paddingStyle(padding)
-	},
-	children
-});
-const GridItem$1 = ({ label, icon, image, badge, onTap }) => {
-	const { colors, radius } = useTheme();
+const Grid$1 = ({ columns = 4, gap = "medium", children, ...padding }) => {
+	const { space } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-grid",
+		style: {
+			display: "grid",
+			gridTemplateColumns: `repeat(${wholeCount(columns)}, minmax(0, 1fr))`,
+			gap: space[gap],
+			...paddingStyle(padding, space)
+		},
+		children: /* @__PURE__ */ jsx(SideRoomContext.Provider, {
+			value: false,
+			children
+		})
+	});
+};
+const GridItem$1 = ({ label, icon, image, badge, disabled = false, onTap }) => {
+	const { colors, radius, fontSize } = useTheme();
 	let picture = null;
 	if (image) picture = /* @__PURE__ */ jsx("img", {
 		src: image,
@@ -39,9 +46,11 @@ const GridItem$1 = ({ label, icon, image, badge, onTap }) => {
 		size: 24,
 		color: "currentColor"
 	});
-	const press = onTap ? pressable(() => onTap(createEvent("tap"))) : void 0;
+	const press = onTap && !disabled ? pressable(() => onTap(createEvent("tap"))) : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "dot-grid-item",
+		role: onTap ? "button" : void 0,
+		"aria-disabled": disabled || void 0,
 		...press,
 		style: {
 			position: "relative",
@@ -50,6 +59,7 @@ const GridItem$1 = ({ label, icon, image, badge, onTap }) => {
 			alignItems: "center",
 			gap: 6,
 			padding: "4px 0",
+			opacity: disabled ? DISABLED_OPACITY : void 0,
 			cursor: press ? "pointer" : void 0
 		},
 		children: [/* @__PURE__ */ jsxs("span", {
@@ -85,7 +95,7 @@ const GridItem$1 = ({ label, icon, image, badge, onTap }) => {
 				WebkitLineClamp: 2,
 				WebkitBoxOrient: "vertical",
 				color: colors.text,
-				fontSize: FONT_SIZE.caption,
+				fontSize: fontSize.caption,
 				lineHeight: "normal",
 				textAlign: "center"
 			},

package/dist/components/hidden-view.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+//#region src/components/hidden-view.ts
+const HiddenViewContext = createContext(false);
+//#endregion
+export { HiddenViewContext };

package/dist/components/icon-button.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { ICON_SIZE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { IconSvg } from "./icon-svg.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon-button.tsx

package/dist/components/icon.js

@@ -1,24 +1,51 @@
-import { useTheme } from "../theme.js";
 import { ICON_SIZE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { ICON_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
-import { toneColor } from "./tones.js";
+import { textToneColor } from "./box.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon.tsx
+const ICON_PATH = /^statics\/(?!.*\.\.)[\w./-]+\.svg$/i;
+const unknownIcons = /* @__PURE__ */ new Set();
 function IconGraphic({ name, size, color }) {
-	return /* @__PURE__ */ jsx(IconSvg, {
+	const { icons } = useTheme();
+	if (Object.hasOwn(ICON_ARTWORK, name)) return /* @__PURE__ */ jsx(IconSvg, {
 		artwork: ICON_ARTWORK[name],
 		size,
 		color
 	});
+	const path = Object.hasOwn(icons, name) ? icons[name] : void 0;
+	if (path === void 0 || !ICON_PATH.test(path)) {
+		if (!unknownIcons.has(name)) {
+			unknownIcons.add(name);
+			console.warn(`The theme has no icon named "${name}". Add it to theme.icons in dot.ts.`);
+		}
+		return null;
+	}
+	const mask = `url("${path}") center / contain no-repeat`;
+	return /* @__PURE__ */ jsx("span", {
+		className: "dot-icon",
+		"aria-hidden": "true",
+		style: {
+			display: "inline-flex",
+			width: size,
+			height: size,
+			verticalAlign: "middle",
+			flexShrink: 0,
+			backgroundColor: color,
+			mask,
+			WebkitMask: mask
+		}
+	});
 }
 const Icon = ({ name, size = "medium", tone = "default" }) => {
-	const { colors } = useTheme();
+	const theme = useTheme();
 	if (!name) return null;
+	const color = textToneColor(tone, theme) ?? theme.colors.text;
 	return /* @__PURE__ */ jsx(IconGraphic, {
 		name,
 		size: ICON_SIZE[size],
-		color: toneColor(colors, tone)
+		color
 	});
 };
 //#endregion

package/dist/components/index.d.ts

@@ -17,6 +17,7 @@ import { Input } from "./input.js";
 import { Link } from "./link.js";
 import { List, ListItem } from "./list.js";
 import { Option } from "./option.js";
+import { Pinned } from "./pinned.js";
 import { Bullet, BulletList, Prose, Quote } from "./prose.js";
 import { QRCode } from "./qr-code.js";
 import { RichText } from "./rich-text.js";
@@ -35,4 +36,4 @@ import { TextArea } from "./text-area.js";
 import { Toast } from "./toast.js";
 import { Checkbox, Radio, RadioGroup, Switch } from "./toggles.js";
 import { View } from "./view.js";
-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 };
+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, Pinned, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View };

package/dist/components/index.js

@@ -19,6 +19,7 @@ import { Input } from "./input.js";
 import { Link } from "./link.js";
 import { List, ListItem } from "./list.js";
 import { Option } from "./option.js";
+import { Pinned } from "./pinned.js";
 import { Bullet, BulletList, Prose, Quote } from "./prose.js";
 import { QRCode } from "./qr-code.js";
 import { Text } from "./text.js";
@@ -63,6 +64,7 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	ListItem: () => ListItem,
 	Notice: () => Notice,
 	Option: () => Option,
+	Pinned: () => Pinned,
 	ProgressBar: () => ProgressBar,
 	Prose: () => Prose,
 	QRCode: () => QRCode,
@@ -89,4 +91,4 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	View: () => View
 });
 //#endregion
-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, components_exports };
+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, Pinned, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, components_exports };

package/dist/components/input.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { ICON_SIZE, SPACE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { Field } from "./field.js";
 import { BARE_INPUT_STYLE, useFieldBox, useFieldNote } from "./field-box.js";
 import { useTypedText } from "./typed-text.js";

package/dist/components/link.js

@@ -1,3 +1,4 @@
+import { pressLook } from "./tokens.js";
 import { useTheme } from "../theme.js";
 import { toneColor } from "./tones.js";
 import { pressable } from "./pressable.js";
@@ -5,14 +6,21 @@ import { isHttps } from "./https.js";
 import { createEvent } from "@monimesl/dot-core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/link.tsx
-const Link$1 = ({ href, tone, onTap, children }) => {
+const Link$1 = ({ href, tone, disabled, onTap, children }) => {
 	const { colors } = useTheme();
 	const style = {
-		color: tone ? toneColor(colors, tone) : colors.primary,
+		color: tone ? toneColor(colors, tone) : colors.primaryText,
 		textDecorationLine: "underline",
 		textUnderlineOffset: "2px",
-		cursor: "pointer"
+		...pressLook(disabled)
 	};
+	if (disabled) return /* @__PURE__ */ jsx("span", {
+		className: "dot-link",
+		role: "link",
+		"aria-disabled": true,
+		style,
+		children
+	});
 	if (isHttps(href)) return /* @__PURE__ */ jsx("a", {
 		className: "dot-link",
 		href,

package/dist/components/list.js

@@ -1,16 +1,34 @@
+import { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, ICON_SIZE, SHADOWS, WEIGHTS, pressLook } from "./tokens.js";
 import { useTheme } from "../theme.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";
-import { useEffect, useRef } from "react";
+import { createContext, useContext, useEffect, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/list.tsx
 const END_MARGIN = "0px 0px 200px 0px";
-const List$1 = ({ onEndReached, children, ...padding }) => {
-	const { colors, radius } = useTheme();
+const ROW_SIZES = {
+	sm: {
+		block: 12,
+		gap: 12,
+		image: 40,
+		icon: 36,
+		glyph: ICON_SIZE.medium
+	},
+	md: {
+		block: 16,
+		gap: 16,
+		image: 48,
+		icon: 44,
+		glyph: ICON_SIZE.large
+	}
+};
+const ListSizeContext = createContext("sm");
+const List$1 = ({ size = "sm", onEndReached, children, ...padding }) => {
+	const { colors, radius, space, elevation, scheme } = useTheme();
+	const raised = elevation === "raised";
 	const listRef = useRef(null);
 	const lastRowReached = useRef(null);
 	useEffect(() => {
@@ -25,32 +43,37 @@ const List$1 = ({ onEndReached, children, ...padding }) => {
 		observer.observe(lastRow);
 		return () => observer.disconnect();
 	});
-	return /* @__PURE__ */ jsx("ul", {
-		ref: listRef,
-		className: "dot-list",
-		style: {
-			display: "flex",
-			flexDirection: "column",
-			margin: 0,
-			...paddingStyle(padding),
-			overflow: "hidden",
-			listStyle: "none",
-			borderRadius: radius * CARD_RADIUS_SCALE,
-			border: `1px solid ${colors.border}`,
-			background: colors.surface,
-			"--dot-list-divider": colors.border
-		},
-		children
+	return /* @__PURE__ */ jsx(ListSizeContext.Provider, {
+		value: Object.hasOwn(ROW_SIZES, size) ? size : "sm",
+		children: /* @__PURE__ */ jsx("ul", {
+			ref: listRef,
+			className: "dot-list",
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				margin: 0,
+				...paddingStyle(padding, space),
+				overflow: "hidden",
+				listStyle: "none",
+				borderRadius: radius * CARD_RADIUS_SCALE,
+				border: raised ? "none" : `1px solid ${colors.border}`,
+				boxShadow: raised ? SHADOWS[scheme].low : void 0,
+				background: colors.surface,
+				"--dot-list-divider": colors.border
+			},
+			children
+		})
 	});
 };
-const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...padding }) => {
-	const { colors, radius } = useTheme();
+const ListItem$1 = ({ title, subtitle, value, icon, image, disabled = false, onTap, children, ...padding }) => {
+	const { colors, radius, space, fontSize } = useTheme();
+	const rowSize = ROW_SIZES[useContext(ListSizeContext)];
 	let leading = null;
 	if (image) leading = /* @__PURE__ */ jsx("img", {
 		src: image,
 		alt: "",
-		width: 40,
-		height: 40,
+		width: rowSize.image,
+		height: rowSize.image,
 		style: {
 			borderRadius: radius,
 			objectFit: "cover",
@@ -60,15 +83,15 @@ const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...p
 	else if (icon) leading = /* @__PURE__ */ jsx("span", {
 		style: {
 			...CENTERED,
-			width: 36,
-			height: 36,
+			width: rowSize.icon,
+			height: rowSize.icon,
 			borderRadius: "50%",
 			background: colors.muted,
 			flexShrink: 0
 		},
 		children: /* @__PURE__ */ jsx(IconGraphic, {
 			name: icon,
-			size: ICON_SIZE.medium,
+			size: rowSize.glyph,
 			color: colors.text
 		})
 	});
@@ -91,7 +114,7 @@ const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...p
 				children: title
 			}) : null, subtitle ? /* @__PURE__ */ jsx("span", {
 				style: {
-					fontSize: FONT_SIZE.caption,
+					fontSize: fontSize.caption,
 					lineHeight: "normal",
 					color: colors.subtle
 				},
@@ -99,6 +122,7 @@ const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...p
 			}) : null]
 		}),
 		trailing || onTap ? /* @__PURE__ */ jsxs("div", {
+			inert: disabled,
 			style: {
 				display: "flex",
 				alignItems: "center",
@@ -116,24 +140,29 @@ const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...p
 	const rowStyle = {
 		display: "flex",
 		alignItems: "center",
-		gap: 12,
-		...paddingStyle(padding, insets(12, 16)),
+		gap: rowSize.gap,
+		...paddingStyle(padding, space, insets(rowSize.block, 16)),
 		width: "100%",
 		background: colors.surface,
 		color: colors.text,
-		fontSize: FONT_SIZE.body,
+		fontSize: fontSize.body,
 		textAlign: "start"
 	};
 	return /* @__PURE__ */ jsx("li", {
 		className: "dot-list-item",
-		style: onTap ? { background: colors.surface } : rowStyle,
+		"aria-disabled": disabled || void 0,
+		style: onTap ? { background: colors.surface } : {
+			...rowStyle,
+			opacity: disabled ? DISABLED_OPACITY : 1
+		},
 		children: onTap ? /* @__PURE__ */ jsx("button", {
 			type: "button",
+			disabled,
 			onClick: () => onTap(createEvent("tap")),
 			style: {
 				...rowStyle,
 				border: "none",
-				cursor: "pointer"
+				...pressLook(disabled)
 			},
 			children: content
 		}) : content

package/dist/components/option.js

@@ -1,13 +1,13 @@
+import { ICON_SIZE, WEIGHTS, pressLook } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.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";
 //#region src/components/option.tsx
-const Option = ({ value, label }) => {
-	const { colors } = useTheme();
+const Option = ({ value, label, disabled }) => {
+	const { colors, fontSize } = 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;
@@ -17,6 +17,7 @@ const Option = ({ value, label }) => {
 		className: "dot-option",
 		role: "option",
 		"aria-selected": chosen,
+		disabled,
 		onClick: choose && value !== void 0 ? () => choose(value) : void 0,
 		style: {
 			display: "flex",
@@ -28,10 +29,10 @@ const Option = ({ value, label }) => {
 			borderBottom: `1px solid ${colors.border}`,
 			background: "transparent",
 			color: colors.text,
-			fontSize: FONT_SIZE.body,
+			fontSize: fontSize.body,
 			fontWeight: chosen ? WEIGHTS.bold : WEIGHTS.regular,
 			textAlign: "start",
-			cursor: "pointer"
+			...pressLook(disabled)
 		},
 		children: [/* @__PURE__ */ jsx("span", { children: label }), chosen ? /* @__PURE__ */ jsx(IconSvg, {
 			artwork: CHECK_ARTWORK,

package/dist/components/padding.js

@@ -1,4 +1,3 @@
-import { SPACE } from "./tokens.js";
 //#region src/components/padding.ts
 const NO_INSETS = {
 	top: 0,
@@ -14,21 +13,21 @@ function insets(block, inline = block) {
 		bottom: block
 	};
 }
-function paddingStyle(props, ownInsets = NO_INSETS) {
+function paddingStyle(props, space, ownInsets = NO_INSETS) {
 	return {
-		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)
+		paddingTop: sidePadding(props.paddingTop ?? props.padding, space, ownInsets.top),
+		paddingInlineStart: sidePadding(props.paddingStart ?? props.padding, space, ownInsets.start),
+		paddingInlineEnd: sidePadding(props.paddingEnd ?? props.padding, space, ownInsets.end),
+		paddingBottom: sidePadding(props.paddingBottom ?? props.padding, space, ownInsets.bottom)
 	};
 }
-function sidePadding(pageSpace, ownPixels) {
+function sidePadding(pageSpace, space, ownPixels) {
 	if (pageSpace === void 0) return ownPixels;
-	return SPACE[pageSpace];
+	return space[pageSpace];
 }
 const HOME_INDICATOR = "env(safe-area-inset-bottom, 0px)";
-function pinnedPaddingStyle(props, ownInsets) {
-	const style = paddingStyle(props, ownInsets);
+function pinnedPaddingStyle(props, space, ownInsets) {
+	const style = paddingStyle(props, space, ownInsets);
 	return {
 		...style,
 		paddingBottom: `calc(${style.paddingBottom}px + ${HOME_INDICATOR})`

package/dist/components/pinned-bar.js

@@ -0,0 +1,29 @@
+import { insets, paddingStyle, pinnedPaddingStyle } from "./padding.js";
+//#region src/components/pinned-bar.ts
+const STATUS_BAR = "env(safe-area-inset-top, 0px)";
+function pinnedBarStyle(edge, padding, space, ownInsets = insets(0)) {
+	let edgeStyle;
+	if (edge === "top") edgeStyle = {
+		...paddingStyle(padding, space, ownInsets),
+		top: STATUS_BAR
+	};
+	else edgeStyle = {
+		...pinnedPaddingStyle(padding, space, ownInsets),
+		bottom: 0,
+		marginTop: "auto"
+	};
+	return {
+		...edgeStyle,
+		position: "sticky",
+		zIndex: 1,
+		display: "flex",
+		flexDirection: "column",
+		alignSelf: "stretch",
+		marginInlineStart: "calc(-1 * var(--dot-view-start, 0px))",
+		marginInlineEnd: "calc(-1 * var(--dot-view-end, 0px))",
+		paddingInlineStart: `calc(var(--dot-view-start, 0px) + ${edgeStyle.paddingInlineStart}px)`,
+		paddingInlineEnd: `calc(var(--dot-view-end, 0px) + ${edgeStyle.paddingInlineEnd}px)`
+	};
+}
+//#endregion
+export { pinnedBarStyle };

package/dist/components/pinned.d.ts

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

package/dist/components/pinned.js

@@ -0,0 +1,26 @@
+import { useTheme } from "../theme.js";
+import { backgroundColor } from "./box.js";
+import { pinnedBarStyle } from "./pinned-bar.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/pinned.tsx
+const Pinned = ({ edge = "top", gap = "medium", background = "background", border = "none", children, ...padding }) => {
+	const theme = useTheme();
+	const { colors, space } = theme;
+	const style = {
+		...pinnedBarStyle(edge, padding, space),
+		gap: space[gap],
+		background: backgroundColor(background, theme)
+	};
+	if (border !== "none") {
+		const line = `1px solid ${border === "strong" ? colors.subtle : colors.border}`;
+		if (edge === "top") style.borderBottom = line;
+		else style.borderTop = line;
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: `dot-pinned dot-bar-${edge}`,
+		style,
+		children
+	});
+};
+//#endregion
+export { Pinned };

package/dist/components/pressable.js

@@ -3,7 +3,9 @@ function pressable(press) {
 	return {
 		role: "button",
 		tabIndex: 0,
-		onClick: press,
+		onClick: (event) => {
+			if (!event.target.closest(":disabled, [aria-disabled=\"true\"]")) press();
+		},
 		onKeyDown: (event) => {
 			if (event.target !== event.currentTarget) return;
 			if (event.key === "Enter" || event.key === " ") {

package/dist/components/prose.js

@@ -1,29 +1,32 @@
+import { SELECTABLE } from "./tokens.js";
 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 Prose = ({ children, ...padding }) => {
+	const { space } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-prose",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 12,
+			width: "100%",
+			maxWidth: READING_WIDTH,
+			marginInline: "auto",
+			...SELECTABLE,
+			...paddingStyle(padding, space)
+		},
+		children: /* @__PURE__ */ jsx(InsideProse.Provider, {
+			value: true,
+			children
+		})
+	});
+};
 const Quote = ({ cite, children }) => {
-	const { colors } = useTheme();
+	const { colors, fontSize } = useTheme();
 	return /* @__PURE__ */ jsxs("blockquote", {
 		className: "dot-quote",
 		style: {
@@ -37,7 +40,7 @@ const Quote = ({ cite, children }) => {
 		},
 		children: [children, cite && /* @__PURE__ */ jsxs("span", {
 			style: {
-				fontSize: FONT_SIZE.caption,
+				fontSize: fontSize.caption,
 				fontStyle: "normal",
 				color: colors.subtle
 			},