@monimesl/dot-renderer-react 0.1.0-alpha.14 → 0.1.0-alpha.16

package/dist/components/box.js

@@ -0,0 +1,59 @@
+import { CARD_RADIUS_SCALE } from "./tokens.js";
+import { toneBackground } from "./tones.js";
+import { BACKGROUNDS, TONES } from "@monimesl/dot-core";
+//#region src/components/box.ts
+const RADIUS_SCALE = {
+	none: 0,
+	small: .5,
+	medium: 1,
+	large: CARD_RADIUS_SCALE
+};
+const FULL_RADIUS = 9999;
+const BACKGROUND_WORDS = new Set(BACKGROUNDS.words);
+const TONE_WORDS = new Set(TONES);
+function boxStyle(props, theme, look = {}) {
+	const background = props.background ?? look.background;
+	const border = props.border ?? look.border;
+	const radius = props.radius ?? look.radius;
+	const style = {};
+	if (background !== void 0) style.background = backgroundColor(background, theme);
+	if (border !== void 0) {
+		const color = border === "strong" ? theme.colors.subtle : theme.colors.border;
+		style.border = border === "none" ? "none" : `1px solid ${color}`;
+	}
+	if (radius !== void 0) {
+		style.borderRadius = radius === "full" ? FULL_RADIUS : theme.radius * RADIUS_SCALE[radius];
+		style.overflow = "hidden";
+	}
+	if (props.width !== void 0) {
+		style.width = cssLength(props.width);
+		style.flexShrink = 0;
+	}
+	if (props.aspect !== void 0) style.aspectRatio = props.aspect.replace(":", " / ");
+	else if (props.height !== void 0) {
+		style.height = cssLength(props.height);
+		style.flexShrink = 0;
+	}
+	if (props.minHeight !== void 0) style.minHeight = props.minHeight;
+	if (props.maxWidth !== void 0) style.maxWidth = props.maxWidth;
+	return style;
+}
+function backgroundColor(background, theme) {
+	if (TONE_WORDS.has(background)) return toneBackground(theme.colors, background);
+	if (BACKGROUND_WORDS.has(background)) return theme.colors[background];
+	return customColor(background, theme);
+}
+function customColor(name, theme) {
+	const color = theme.customColors[name];
+	if (color === void 0 && !unknownColors.has(name)) {
+		unknownColors.add(name);
+		console.warn(`The theme has no colour named "${name}". Add it to colors.custom in dot.ts.`);
+	}
+	return color;
+}
+const unknownColors = /* @__PURE__ */ new Set();
+function cssLength(value) {
+	return value === "fill" ? "100%" : value;
+}
+//#endregion
+export { boxStyle, customColor };

package/dist/components/index.d.ts

@@ -21,10 +21,11 @@ import { Select } from "./select.js";
 import { Sheet } from "./sheet.js";
 import { Skeleton } from "./skeleton.js";
 import { Spinner } from "./spinner.js";
+import { Stack } from "./stack.js";
 import { Tab, Tabs } from "./tabs.js";
 import { Text } from "./text.js";
 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, Badge, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, Scroll, Select, Sheet, Skeleton, Spinner, Switch, Tab, Tabs, Text, TextArea, Toast, View };
+export { AmountInput, Badge, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, Scroll, Select, Sheet, Skeleton, Spinner, Stack, Switch, Tab, Tabs, Text, TextArea, Toast, View };

package/dist/components/index.js

@@ -22,6 +22,7 @@ import { Scroll } from "./scroll.js";
 import { Sheet } from "./sheet.js";
 import { Select } from "./select.js";
 import { Skeleton } from "./skeleton.js";
+import { Stack } from "./stack.js";
 import { Tab, Tabs } from "./tabs.js";
 import { Text } from "./text.js";
 import { TextArea } from "./text-area.js";
@@ -60,6 +61,7 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	Sheet: () => Sheet,
 	Skeleton: () => Skeleton,
 	Spinner: () => Spinner,
+	Stack: () => Stack,
 	Switch: () => Switch,
 	Tab: () => Tab,
 	Tabs: () => Tabs,
@@ -69,4 +71,4 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	View: () => View
 });
 //#endregion
-export { AmountInput, Badge, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, Scroll, Select, Sheet, Skeleton, Spinner, Switch, Tab, Tabs, Text, TextArea, Toast, View, components_exports };
+export { AmountInput, Badge, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, Scroll, Select, Sheet, Skeleton, Spinner, Stack, Switch, Tab, Tabs, Text, TextArea, Toast, View, components_exports };

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

@@ -2,23 +2,38 @@ import { useTheme } from "../theme.js";
 import { FONT_SIZE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
 import { toneColor } from "./tones.js";
+import { customColor } from "./box.js";
+import { TONES } from "@monimesl/dot-core";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/text.tsx
 const InsideText = createContext(false);
-const Text = ({ variant = "body", tone, weight, align, maxLines, children, ...padding }) => {
-	const { colors } = useTheme();
+const DEFAULT_WEIGHT = {
+	display: "bold",
+	title: "bold",
+	subtitle: "medium",
+	body: "regular",
+	caption: "regular"
+};
+const DECORATION = {
+	none: "none",
+	underline: "underline",
+	strikethrough: "line-through"
+};
+const Text$1 = ({ variant = "body", tone, weight, align, maxLines, decoration, numeric, children, ...padding }) => {
+	const theme = useTheme();
 	const nested = useContext(InsideText);
-	const defaultWeight = variant === "title" ? "bold" : "regular";
 	const style = {
 		display: nested ? "inline" : "block",
 		margin: 0,
 		fontSize: FONT_SIZE[variant],
 		lineHeight: "normal",
-		fontWeight: WEIGHTS[weight ?? defaultWeight],
+		fontWeight: WEIGHTS[weight ?? DEFAULT_WEIGHT[variant]],
 		letterSpacing: "normal",
-		color: tone ? toneColor(colors, tone) : "inherit",
+		color: tone ? textColor(tone, theme) : "inherit",
 		textAlign: align,
+		textDecorationLine: decoration ? DECORATION[decoration] : void 0,
+		fontVariantNumeric: numeric ? "tabular-nums" : void 0,
 		...paddingStyle(padding)
 	};
 	if (maxLines) {
@@ -42,5 +57,10 @@ const Text = ({ variant = "body", tone, weight, align, maxLines, children, ...pa
 		children: content
 	});
 };
+const THEME_TONES = new Set(TONES);
+function textColor(tone, theme) {
+	if (THEME_TONES.has(tone)) return toneColor(theme.colors, tone);
+	return tone === "onPrimary" ? theme.colors.onPrimary : customColor(tone, theme);
+}
 //#endregion
-export { Text };
+export { Text$1 as Text };

package/dist/components/tokens.js

@@ -8,7 +8,9 @@ const SPACE = {
 const FONT_SIZE = {
 	caption: 13,
 	body: 15,
-	title: 20
+	subtitle: 17,
+	title: 20,
+	display: 32
 };
 const WEIGHTS = {
 	regular: 400,

package/dist/components/view.js

@@ -1,7 +1,8 @@
 import { useTheme } from "../theme.js";
-import { CARD_RADIUS_SCALE, SPACE } from "./tokens.js";
+import { SPACE } from "./tokens.js";
 import { insets, paddingStyle } from "./padding.js";
 import { pressable } from "./pressable.js";
+import { boxStyle } from "./box.js";
 import { createEvent } from "@monimesl/dot-core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/view.tsx
@@ -17,8 +18,14 @@ const JUSTIFY = {
 	end: "flex-end",
 	between: "space-between"
 };
-const View$1 = ({ direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = "plain", onTap, children, ...padding }) => {
-	const { colors, radius } = useTheme();
+const CARD_LOOK = {
+	background: "surface",
+	border: "subtle",
+	radius: "large"
+};
+const View$1 = (props) => {
+	const { direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = "plain", onTap, children } = props;
+	const theme = useTheme();
 	const card = variant === "card";
 	const style = {
 		display: "flex",
@@ -27,18 +34,14 @@ const View$1 = ({ direction = "column", gap = "medium", align = "stretch", justi
 		justifyContent: JUSTIFY[justify],
 		flexWrap: wrap ? "wrap" : "nowrap",
 		gap: SPACE[gap],
-		...paddingStyle(padding, card ? insets(SPACE.large) : void 0),
+		...paddingStyle(props, card ? insets(SPACE.large) : void 0),
+		...boxStyle(props, theme, card ? CARD_LOOK : void 0),
 		cursor: onTap ? "pointer" : void 0
 	};
 	if (grow) {
 		style.flexGrow = 1;
 		style.minWidth = 0;
 	}
-	if (card) {
-		style.background = colors.surface;
-		style.border = `1px solid ${colors.border}`;
-		style.borderRadius = radius * CARD_RADIUS_SCALE;
-	}
 	const press = onTap ? pressable(() => onTap(createEvent("tap"))) : void 0;
 	return /* @__PURE__ */ jsx("div", {
 		className: "dot-view",

package/dist/index.d.ts

@@ -24,6 +24,7 @@ import { Select } from "./components/select.js";
 import { Sheet } from "./components/sheet.js";
 import { Skeleton } from "./components/skeleton.js";
 import { Spinner } from "./components/spinner.js";
+import { Stack } from "./components/stack.js";
 import { Tab, Tabs } from "./components/tabs.js";
 import { Text } from "./components/text.js";
 import { TextArea } from "./components/text-area.js";
@@ -32,4 +33,4 @@ import { Checkbox, Radio, RadioGroup, Switch } from "./components/toggles.js";
 import { View } from "./components/view.js";
 import "./components/index.js";
 import { ResolvedColors, ResolvedTheme, resolveTheme, useTheme } from "./theme.js";
-export { AmountInput, Badge, type BuiltinReactComponents, Button, Carousel, Checkbox, Chip, CodeInput, type CreateReactRendererOptions, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, type ReactComponent, type ReactComponents, type ReactRendererOptions, type ResolvedColors, type ResolvedTheme, Scroll, Select, Sheet, Skeleton, Spinner, Switch, Tab, Tabs, Text, TextArea, Toast, View, type Wrapper, createReactRenderer, reactRenderer as default, resolveTheme, useTheme };
+export { AmountInput, Badge, type BuiltinReactComponents, Button, Carousel, Checkbox, Chip, CodeInput, type CreateReactRendererOptions, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, type ReactComponent, type ReactComponents, type ReactRendererOptions, type ResolvedColors, type ResolvedTheme, Scroll, Select, Sheet, Skeleton, Spinner, Stack, Switch, Tab, Tabs, Text, TextArea, Toast, View, type Wrapper, createReactRenderer, reactRenderer as default, resolveTheme, useTheme };

package/dist/index.js

@@ -22,6 +22,7 @@ import { Scroll } from "./components/scroll.js";
 import { Sheet } from "./components/sheet.js";
 import { Select } from "./components/select.js";
 import { Skeleton } from "./components/skeleton.js";
+import { Stack } from "./components/stack.js";
 import { Tab, Tabs } from "./components/tabs.js";
 import { Text } from "./components/text.js";
 import { TextArea } from "./components/text-area.js";
@@ -32,4 +33,4 @@ import { createReactRenderer, reactRenderer } from "./renderer.js";
 //#region src/index.ts
 var src_default = reactRenderer;
 //#endregion
-export { AmountInput, Badge, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, Scroll, Select, Sheet, Skeleton, Spinner, Switch, Tab, Tabs, Text, TextArea, Toast, View, createReactRenderer, src_default as default, resolveTheme, useTheme };
+export { AmountInput, Badge, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, Scroll, Select, Sheet, Skeleton, Spinner, Stack, Switch, Tab, Tabs, Text, TextArea, Toast, View, createReactRenderer, src_default as default, resolveTheme, useTheme };

package/dist/theme.d.ts

@@ -17,6 +17,7 @@ export interface ResolvedColors {
 export interface ResolvedTheme {
   scheme: ColorScheme;
   colors: ResolvedColors;
+  customColors: Readonly<Record<string, string>>;
   shape: ThemeShape;
   radius: number;
 }

package/dist/theme.js

@@ -55,10 +55,19 @@ function resolveTheme(theme, systemScheme) {
 			surface,
 			text
 		},
+		customColors: resolveCustomColors(colors.custom ?? {}, scheme),
 		shape,
 		radius: SHAPE_RADIUS[shape]
 	};
 }
+function resolveCustomColors(custom, scheme) {
+	const resolved = {};
+	for (const [name, color] of Object.entries(custom)) {
+		const value = color[scheme] ?? color.light ?? color.dark;
+		if (value) resolved[name] = value;
+	}
+	return resolved;
+}
 function primaryAndOnPrimary(primary, surface, text, scheme) {
 	if (contrast(primary, surface) >= 4.5) return {
 		primary,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-renderer-react",
-  "version": "0.1.0-alpha.14",
+  "version": "0.1.0-alpha.16",
   "description": "React renderer for Dot webviews",
   "type": "module",
   "repository": {
@@ -29,8 +29,8 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "uqr": "^0.1.3",
-    "@monimesl/dot-core": "0.1.0-alpha.14",
-    "@monimesl/dot-webview": "0.1.0-alpha.14"
+    "@monimesl/dot-webview": "0.1.0-alpha.16",
+    "@monimesl/dot-core": "0.1.0-alpha.16"
   },
   "devDependencies": {
     "@base-ui/react": "1.8.0",
@@ -45,7 +45,7 @@
     "tsdown": "^0.23.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.1",
-    "@monimesl/dot-service": "0.1.0-alpha.14"
+    "@monimesl/dot-service": "0.1.0-alpha.16"
   },
   "publishConfig": {
     "access": "public"