@monimesl/dot-renderer-react 1.0.0-beta.2 → 1.0.0-beta.4

package/README.md

@@ -20,9 +20,9 @@ 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`, `text`, `muted`, `border` and `subtle`, each for light and dark, and `custom` for the
-dot's own named colors. A page can set its own colors over the theme's, with `configs.colors` or
+A dot sets its `theme` in `defineDot`, with `scheme`, `colors` and `shape`. The colors are
+`primary`, `background`, `surface`, `text`, `muted`, `border` and `subtle`, each for light and dark,
+and `custom` for the dot's own named colors. A page can set its own colors over the theme's, with `configs.colors` or
 `setColors`. The renderer fills in the rest of the palette from Dash's own look. On a background
 that isn't Dash's, it works out surfaces and quieter text that sit well on it. `useTheme()` gives a
 component the resolved theme.

package/dist/components/box.js

@@ -45,7 +45,7 @@ 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.`);
+		console.warn(`The theme has no colour named "${name}". Add it to theme.colors.custom in dot.ts.`);
 	}
 	return color;
 }

package/dist/components/list.js

@@ -5,11 +5,28 @@ 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 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 } = useTheme();
 	const listRef = useRef(null);
 	const lastRowReached = useRef(null);
@@ -25,32 +42,36 @@ 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: size,
+		children: /* @__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
+		})
 	});
 };
 const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...padding }) => {
 	const { colors, radius } = 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 +81,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
 		})
 	});
@@ -116,8 +137,8 @@ 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, insets(rowSize.block, 16)),
 		width: "100%",
 		background: colors.surface,
 		color: colors.text,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-renderer-react",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "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": "1.0.0-beta.2",
-    "@monimesl/dot-webview": "1.0.0-beta.2"
+    "@monimesl/dot-core": "1.0.0-beta.4",
+    "@monimesl/dot-webview": "1.0.0-beta.4"
   },
   "devDependencies": {
     "@base-ui/react": "1.8.0",
@@ -46,7 +46,7 @@
     "tsdown": "^0.23.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.1",
-    "@monimesl/dot-service": "1.0.0-beta.2"
+    "@monimesl/dot-service": "1.0.0-beta.4"
   },
   "publishConfig": {
     "access": "public"