@monimesl/dot-renderer-react 1.0.0-beta.7 → 1.0.0-beta.8

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/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
 			},

package/dist/components/scroll.js

@@ -1,4 +1,4 @@
-import { SPACE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { paddingStyle } from "./padding.js";
 import { createEvent } from "@monimesl/dot-core";
 import { useEffect, useRef } from "react";
@@ -9,7 +9,8 @@ const Scroll$1 = ({ gap = "medium", snap = "none", index, onChange, children, ..
 	const rowRef = useRef(null);
 	const reportedIndex = useRef(void 0);
 	const restTimer = useRef(void 0);
-	const paddingCss = paddingStyle(padding);
+	const { space } = useTheme();
+	const paddingCss = paddingStyle(padding, space);
 	const startPadding = Number(paddingCss.paddingInlineStart);
 	useEffect(() => {
 		const element = rowRef.current;
@@ -43,7 +44,7 @@ const Scroll$1 = ({ gap = "medium", snap = "none", index, onChange, children, ..
 			}, REST_DELAY_MS);
 		} : void 0,
 		style: {
-			gap: SPACE[gap],
+			gap: space[gap],
 			...paddingCss,
 			scrollPaddingInlineStart: paddingCss.paddingInlineStart,
 			scrollPaddingInlineEnd: paddingCss.paddingInlineEnd,

package/dist/components/select.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 { useFieldBox, useFieldNote } from "./field-box.js";
 import { CHEVRON_DOWN_ARTWORK } from "./icon-artwork.js";

package/dist/components/sheet.js

@@ -1,5 +1,5 @@
-import { FONT_FAMILY, useTheme } from "../theme.js";
-import { CARD_RADIUS_SCALE, FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { CARD_RADIUS_SCALE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { CLOSE_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
 import { pinnedPaddingStyle } from "./padding.js";
@@ -14,7 +14,7 @@ import { createEvent } from "@monimesl/dot-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/sheet.tsx
 const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...padding }) => {
-	const { colors, radius } = useTheme();
+	const { colors, radius, fontFamily, space, fontSize, headingFontFamily, headingWeight } = useTheme();
 	const container = usePortalContainer();
 	const cornerRadius = radius * CARD_RADIUS_SCALE;
 	return /* @__PURE__ */ jsx(DialogRoot, {
@@ -45,7 +45,7 @@ const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...
 					gap: SPACE.medium,
 					maxHeight: "85vh",
 					overflowY: "auto",
-					...pinnedPaddingStyle(padding, {
+					...pinnedPaddingStyle(padding, space, {
 						top: 16,
 						start: 16,
 						end: 16,
@@ -55,15 +55,16 @@ const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...
 					borderTopRightRadius: cornerRadius,
 					background: colors.surface,
 					color: colors.text,
-					fontFamily: FONT_FAMILY,
+					fontFamily,
 					outline: "none"
 				},
 				children: [
 					title ? /* @__PURE__ */ jsx(DialogTitle, {
 						style: {
 							margin: 0,
-							fontSize: FONT_SIZE.body,
-							fontWeight: WEIGHTS.bold,
+							fontSize: fontSize.body,
+							fontFamily: headingFontFamily,
+							fontWeight: WEIGHTS[headingWeight ?? "bold"],
 							lineHeight: "normal",
 							textAlign: "center"
 						},

package/dist/components/skeleton.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { SPACE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/skeleton.tsx
 const LINE_HEIGHT = 12;

package/dist/components/slider.js

@@ -1,5 +1,5 @@
+import { DISABLED_OPACITY } from "./tokens.js";
 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";
@@ -7,7 +7,7 @@ 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 { colors, fontSize } = 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;
@@ -23,7 +23,7 @@ const Slider$1 = ({ value, min = 0, max = 100, step = 1, showValue, label, hint,
 			},
 			children: [/* @__PURE__ */ jsx(FieldLabel, { children: label }), showValue ? /* @__PURE__ */ jsx("span", {
 				style: {
-					fontSize: FONT_SIZE.caption,
+					fontSize: fontSize.caption,
 					color: colors.subtle,
 					fontVariantNumeric: "tabular-nums"
 				},

package/dist/components/spinner.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { ICON_SIZE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/spinner.tsx
 function LoadingIcon({ size }) {

package/dist/components/stepper.js

@@ -1,5 +1,5 @@
+import { CENTERED, DISABLED_OPACITY, ICON_SIZE, WEIGHTS } from "./tokens.js";
 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";
@@ -8,7 +8,7 @@ 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 { colors, fontSize } = 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);
@@ -46,7 +46,7 @@ const Stepper$1 = ({ value, min, max, step = 1, label, hint, disabled, onChange
 					style: {
 						minWidth: 32,
 						textAlign: "center",
-						fontSize: FONT_SIZE.subtitle,
+						fontSize: fontSize.subtitle,
 						fontWeight: WEIGHTS.bold,
 						fontVariantNumeric: "tabular-nums",
 						color: colors.text

package/dist/components/steps.js

@@ -1,20 +1,23 @@
+import { CENTERED, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { CENTERED, 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
-});
+const Steps = ({ children, ...padding }) => {
+	const { space } = useTheme();
+	return /* @__PURE__ */ jsx("ol", {
+		className: "dot-steps",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			margin: 0,
+			...paddingStyle(padding, space)
+		},
+		children
+	});
+};
 function stepMark(colors, status) {
 	switch (status) {
 		case "done": return {
@@ -40,7 +43,7 @@ function stepMark(colors, status) {
 	}
 }
 const Step = ({ title, text, status = "upcoming" }) => {
-	const { colors } = useTheme();
+	const { colors, fontSize } = useTheme();
 	const { background, border, icon } = stepMark(colors, status);
 	return /* @__PURE__ */ jsxs("li", {
 		className: "dot-step",
@@ -90,7 +93,7 @@ const Step = ({ title, text, status = "upcoming" }) => {
 			},
 			children: [/* @__PURE__ */ jsx("span", {
 				style: {
-					fontSize: FONT_SIZE.body,
+					fontSize: fontSize.body,
 					fontWeight: status === "current" ? WEIGHTS.bold : WEIGHTS.medium,
 					color: status === "upcoming" ? colors.subtle : colors.text,
 					lineHeight: `${MARK_SIZE}px`
@@ -98,7 +101,7 @@ const Step = ({ title, text, status = "upcoming" }) => {
 				children: title
 			}), text ? /* @__PURE__ */ jsx("span", {
 				style: {
-					fontSize: FONT_SIZE.caption,
+					fontSize: fontSize.caption,
 					color: colors.subtle
 				},
 				children: text

package/dist/components/tabs.js

@@ -1,10 +1,10 @@
+import { CENTERED, PILL_STYLE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { CENTERED, FONT_SIZE, PILL_STYLE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
 import { TabsRoot } from "../vendor/@base-ui/react/tabs/root/TabsRoot.js";
 import { TabsTab } from "../vendor/@base-ui/react/tabs/tab/TabsTab.js";
 import { TabsList } from "../vendor/@base-ui/react/tabs/list/TabsList.js";
-import { createEvent } from "@monimesl/dot-core";
+import { DEFAULT_VARIANTS, createEvent } from "@monimesl/dot-core";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/tabs.tsx
@@ -12,8 +12,8 @@ const TabsContext = createContext({
 	value: void 0,
 	segmented: false
 });
-const Tabs$1 = ({ value, variant = "underline", onChange, children, ...padding }) => {
-	const { colors, radius } = useTheme();
+const Tabs$1 = ({ value, variant = DEFAULT_VARIANTS.Tabs, onChange, children, ...padding }) => {
+	const { colors, radius, space } = useTheme();
 	const segmented = variant === "segmented";
 	let variantStyle;
 	if (segmented) variantStyle = {
@@ -28,7 +28,7 @@ const Tabs$1 = ({ value, variant = "underline", onChange, children, ...padding }
 		onValueChange: (next) => {
 			if (next !== null && next !== value) onChange?.(createEvent("change", { value: next }));
 		},
-		style: paddingStyle(padding),
+		style: paddingStyle(padding, space),
 		children: /* @__PURE__ */ jsx(TabsList, {
 			className: "dot-tabs",
 			style: {
@@ -47,7 +47,7 @@ const Tabs$1 = ({ value, variant = "underline", onChange, children, ...padding }
 	});
 };
 const Tab$1 = ({ value, label, badge }) => {
-	const { colors, radius } = useTheme();
+	const { colors, radius, fontSize } = useTheme();
 	const { value: chosen, segmented } = useContext(TabsContext);
 	if (value === void 0) return null;
 	const selected = value === chosen;
@@ -74,7 +74,7 @@ const Tab$1 = ({ value, label, badge }) => {
 			minHeight: segmented ? 36 : 44,
 			padding: "0 12px",
 			border: "none",
-			fontSize: FONT_SIZE.body,
+			fontSize: fontSize.body,
 			fontWeight: selected ? WEIGHTS.bold : WEIGHTS.medium,
 			whiteSpace: "nowrap",
 			color,

package/dist/components/text.js

@@ -1,9 +1,9 @@
+import { SELECTABLE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, SELECTABLE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
-import { isTone, toneColor } from "./tones.js";
+import { textToneColor } from "./box.js";
 import { InsideProse } from "./prose-context.js";
-import { customColor } from "./box.js";
+import { DEFAULT_VARIANTS } from "@monimesl/dot-core";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/text.tsx
@@ -50,7 +50,7 @@ const DECORATION = {
 	underline: "underline",
 	strikethrough: "line-through"
 };
-const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
+const Text$1 = ({ variant = DEFAULT_VARIANTS.Text, tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
 	const theme = useTheme();
 	const insideText = useContext(InsideText);
 	const inProse = useContext(InsideProse);
@@ -61,16 +61,17 @@ const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, num
 		marginInline: 0,
 		marginBlockEnd: 0,
 		marginBlockStart: inProse && heading ? void 0 : 0,
-		fontSize: FONT_SIZE[variant],
-		fontWeight: WEIGHTS[weight ?? defaultWeight],
+		fontSize: theme.fontSize[variant],
+		fontFamily: heading ? theme.headingFontFamily : void 0,
+		fontWeight: WEIGHTS[weight ?? (heading ? theme.headingWeight : void 0) ?? defaultWeight],
 		fontStyle: italic ? "italic" : void 0,
 		letterSpacing: variant === "display" ? "-0.02em" : "normal",
-		color: tone ? textColor(tone, theme) : "inherit",
+		color: tone ? textToneColor(tone, theme) : "inherit",
 		textAlign: align,
 		textDecorationLine: decoration ? DECORATION[decoration] : void 0,
 		fontVariantNumeric: numeric ? "tabular-nums" : void 0,
 		...selectable ? SELECTABLE : void 0,
-		...paddingStyle(padding)
+		...paddingStyle(padding, theme.space)
 	};
 	if (!insideText) {
 		style.lineHeight = lineHeight + LEADING_CHANGE[leading ?? defaultLeading];
@@ -98,10 +99,5 @@ const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, num
 		children: content
 	});
 };
-function textColor(tone, theme) {
-	if (isTone(tone)) return toneColor(theme.colors, tone);
-	if (tone === "onPrimary") return theme.colors.onPrimary;
-	return customColor(tone, theme);
-}
 //#endregion
-export { Text };
+export { Text$1 as Text };

package/dist/components/toast.js

@@ -1,5 +1,5 @@
+import { ICON_SIZE, SPACE } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
 import { IconSvg } from "./icon-svg.js";
 import { STATUS_ARTWORK } from "./tones.js";
 import { createEvent } from "@monimesl/dot-core";
@@ -7,7 +7,7 @@ import { useEffect, useEffectEvent, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/toast.tsx
 const Toast$1 = ({ message, tone = "default", duration = 2500, onHide }) => {
-	const { colors, radius } = useTheme();
+	const { colors, radius, fontSize } = useTheme();
 	const [hidden, setHidden] = useState(false);
 	const [previousMessage, setPreviousMessage] = useState(message);
 	if (message !== previousMessage) {
@@ -42,7 +42,7 @@ const Toast$1 = ({ message, tone = "default", duration = 2500, onHide }) => {
 			borderRadius: radius,
 			background: colors.primary,
 			color: colors.onPrimary,
-			fontSize: FONT_SIZE.body,
+			fontSize: fontSize.body,
 			boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2)"
 		},
 		children: [tone === "default" ? null : /* @__PURE__ */ jsx(IconSvg, {

package/dist/components/toggles.js

@@ -1,5 +1,5 @@
+import { CENTERED, DISABLED_OPACITY, ICON_SIZE, SPACE } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
 import { FieldLabel } from "./field.js";
 import { CHECK_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
@@ -14,7 +14,8 @@ import { createEvent } from "@monimesl/dot-core";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/toggles.tsx
-function rowStyle(colors, disabled) {
+function rowStyle(theme, disabled) {
+	const { colors, fontSize } = theme;
 	return {
 		display: "flex",
 		alignItems: "center",
@@ -24,7 +25,7 @@ function rowStyle(colors, disabled) {
 		border: "none",
 		background: "transparent",
 		color: colors.text,
-		fontSize: FONT_SIZE.body,
+		fontSize: fontSize.body,
 		textAlign: "start",
 		opacity: disabled ? DISABLED_OPACITY : 1,
 		cursor: disabled ? "default" : "pointer"
@@ -47,14 +48,15 @@ function ChoiceMark({ round, checked, children }) {
 	});
 }
 const Switch$1 = ({ checked = false, label, disabled, onChange }) => {
-	const { colors } = useTheme();
+	const theme = useTheme();
+	const { colors } = theme;
 	return /* @__PURE__ */ jsxs(SwitchRoot, {
 		className: "dot-switch",
 		checked,
 		disabled,
 		onCheckedChange: (next) => onChange?.(createEvent("change", { checked: next })),
 		style: {
-			...rowStyle(colors, disabled),
+			...rowStyle(theme, disabled),
 			justifyContent: "space-between"
 		},
 		children: [label ? /* @__PURE__ */ jsx("span", { children: label }) : null, /* @__PURE__ */ jsx("span", {
@@ -81,13 +83,14 @@ const Switch$1 = ({ checked = false, label, disabled, onChange }) => {
 	});
 };
 const Checkbox$1 = ({ checked = false, label, disabled, onChange }) => {
-	const { colors } = useTheme();
+	const theme = useTheme();
+	const { colors } = theme;
 	return /* @__PURE__ */ jsxs(CheckboxRoot, {
 		className: "dot-checkbox",
 		checked,
 		disabled,
 		onCheckedChange: (next) => onChange?.(createEvent("change", { checked: next })),
-		style: rowStyle(colors, disabled),
+		style: rowStyle(theme, disabled),
 		children: [/* @__PURE__ */ jsx(ChoiceMark, {
 			round: false,
 			checked,
@@ -122,13 +125,14 @@ const RadioGroup$1 = ({ value, label, disabled = false, onChange, children }) =>
 	});
 };
 const Radio$1 = ({ value, label, disabled }) => {
-	const { colors } = useTheme();
+	const theme = useTheme();
+	const { colors } = theme;
 	if (value === void 0) return null;
 	return /* @__PURE__ */ jsx(RadioRoot, {
 		className: "dot-radio",
 		value,
 		disabled,
-		style: (state) => rowStyle(colors, state.disabled),
+		style: (state) => rowStyle(theme, state.disabled),
 		render: (props, state) => /* @__PURE__ */ jsxs("span", {
 			...props,
 			children: [/* @__PURE__ */ jsx(ChoiceMark, {

package/dist/components/tokens.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/tokens.d.ts
+export declare const SPACE: {
+  readonly none: 0;
+  readonly small: 4;
+  readonly medium: 8;
+  readonly large: 16;
+};
+export declare const FONT_SIZE: {
+  readonly caption: 13;
+  readonly body: 15;
+  readonly lead: 17;
+  readonly subtitle: 17;
+  readonly title: 20;
+  readonly display: 32;
+};
+//#endregion

package/dist/components/tokens.js

@@ -20,6 +20,16 @@ const WEIGHTS = {
 };
 const CARD_RADIUS_SCALE = 1.5;
 const DISABLED_OPACITY = .6;
+const SHADOWS = {
+	light: {
+		low: "0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.06)",
+		high: "0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.14)"
+	},
+	dark: {
+		low: "0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3)",
+		high: "0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.5)"
+	}
+};
 const CENTERED = {
 	display: "flex",
 	alignItems: "center",
@@ -46,4 +56,4 @@ const SELECTABLE = {
 	WebkitUserSelect: "text"
 };
 //#endregion
-export { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SELECTABLE, SPACE, WEIGHTS };
+export { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SELECTABLE, SHADOWS, SPACE, WEIGHTS };

package/dist/components/view.js

@@ -1,10 +1,10 @@
+import { SHADOWS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { SPACE } from "./tokens.js";
 import { insets, paddingStyle } from "./padding.js";
+import { boxStyle } from "./box.js";
 import { Footer as Footer$1 } from "./footer.js";
 import { pressable } from "./pressable.js";
-import { boxStyle } from "./box.js";
-import { createEvent } from "@monimesl/dot-core";
+import { DEFAULT_VARIANTS, createEvent } from "@monimesl/dot-core";
 import { Children, isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/view.tsx
@@ -25,21 +25,30 @@ const CARD_LOOK = {
 	border: "subtle",
 	radius: "large"
 };
+const RAISED_CARD_LOOK = {
+	...CARD_LOOK,
+	border: "none"
+};
 const View$1 = (props) => {
-	const { direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = "plain", onTap, children } = props;
+	const { direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = DEFAULT_VARIANTS.View, onTap, children } = props;
 	const theme = useTheme();
 	const card = variant === "card";
+	const raisedCard = card && theme.elevation === "raised";
+	let cardLook;
+	if (card) cardLook = raisedCard ? RAISED_CARD_LOOK : CARD_LOOK;
+	const elevation = props.elevation ?? (raisedCard ? "low" : "none");
 	const style = {
 		display: "flex",
 		flexDirection: direction,
 		alignItems: ALIGN[align],
 		justifyContent: JUSTIFY[justify],
 		flexWrap: wrap ? "wrap" : "nowrap",
-		gap: SPACE[gap],
-		...paddingStyle(props, card ? insets(SPACE.large) : void 0),
-		...boxStyle(props, theme, card ? CARD_LOOK : void 0),
+		gap: theme.space[gap],
+		...paddingStyle(props, theme.space, card ? insets(theme.space.large) : void 0),
+		...boxStyle(props, theme, cardLook),
 		cursor: onTap ? "pointer" : void 0
 	};
+	if (elevation !== "none") style.boxShadow = SHADOWS[theme.scheme][elevation];
 	if (endsWithFooter(children)) style.paddingBottom = 0;
 	if (grow) {
 		style.flexGrow = 1;

package/dist/page-root.js

@@ -1,18 +1,24 @@
-import { toList, toText } from "@monimesl/dot-core";
+import { useTheme } from "./theme.js";
+import { toList, toText, withComponentDefaults } from "@monimesl/dot-core";
 import { Fragment, createElement, useMemo, useSyncExternalStore } from "react";
 //#region src/page-root.tsx
 function PageRoot({ page, components }) {
 	const state = useSyncExternalStore(page.subscribe, page.getState);
+	const themeComponents = useTheme().components;
 	const context = useMemo(() => ({
 		h(type, props, ...children) {
 			const component = components[type];
 			if (!component) throw new Error(`The renderer has no component for <${type}>. Check the tag's name, or pass a component for it to the renderer.`);
-			return createElement(component, props, ...children);
+			return createElement(component, withComponentDefaults(type, props, themeComponents), ...children);
 		},
 		text: toText,
 		on: (handler, data) => page.on(handler, data),
 		each: (items, render, key) => createElement(Fragment, null, toList(items).map((item, index) => createElement(Fragment, { key: key ? String(key(item, index)) : index }, ...render(item, index))))
-	}), [page, components]);
+	}), [
+		page,
+		components,
+		themeComponents
+	]);
 	if (!state) return null;
 	return page.viewRenderer(state, context);
 }

package/dist/pull-to-refresh.js

@@ -1,5 +1,5 @@
-import { useTheme } from "./theme.js";
 import { CENTERED } from "./components/tokens.js";
+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";