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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/components/list.js +46 -25
  2. package/package.json +4 -4
package/dist/components/list.js CHANGED
@@ -5,11 +5,28 @@ import { IconSvg } from "./icon-svg.js";
5
5
  import { insets, paddingStyle } from "./padding.js";
6
6
  import { IconGraphic } from "./icon.js";
7
7
  import { createEvent } from "@monimesl/dot-core";
8
- import { useEffect, useRef } from "react";
8
+ import { createContext, useContext, useEffect, useRef } from "react";
9
9
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
10
10
  //#region src/components/list.tsx
11
11
  const END_MARGIN = "0px 0px 200px 0px";
12
- const List$1 = ({ onEndReached, children, ...padding }) => {
12
+ const ROW_SIZES = {
13
+ sm: {
14
+ block: 12,
15
+ gap: 12,
16
+ image: 40,
17
+ icon: 36,
18
+ glyph: ICON_SIZE.medium
19
+ },
20
+ md: {
21
+ block: 16,
22
+ gap: 16,
23
+ image: 48,
24
+ icon: 44,
25
+ glyph: ICON_SIZE.large
26
+ }
27
+ };
28
+ const ListSizeContext = createContext("sm");
29
+ const List$1 = ({ size = "sm", onEndReached, children, ...padding }) => {
13
30
  const { colors, radius } = useTheme();
14
31
  const listRef = useRef(null);
15
32
  const lastRowReached = useRef(null);
@@ -25,32 +42,36 @@ const List$1 = ({ onEndReached, children, ...padding }) => {
25
42
  observer.observe(lastRow);
26
43
  return () => observer.disconnect();
27
44
  });
28
- return /* @__PURE__ */ jsx("ul", {
29
- ref: listRef,
30
- className: "dot-list",
31
- style: {
32
- display: "flex",
33
- flexDirection: "column",
34
- margin: 0,
35
- ...paddingStyle(padding),
36
- overflow: "hidden",
37
- listStyle: "none",
38
- borderRadius: radius * CARD_RADIUS_SCALE,
39
- border: `1px solid ${colors.border}`,
40
- background: colors.surface,
41
- "--dot-list-divider": colors.border
42
- },
43
- children
45
+ return /* @__PURE__ */ jsx(ListSizeContext.Provider, {
46
+ value: size,
47
+ children: /* @__PURE__ */ jsx("ul", {
48
+ ref: listRef,
49
+ className: "dot-list",
50
+ style: {
51
+ display: "flex",
52
+ flexDirection: "column",
53
+ margin: 0,
54
+ ...paddingStyle(padding),
55
+ overflow: "hidden",
56
+ listStyle: "none",
57
+ borderRadius: radius * CARD_RADIUS_SCALE,
58
+ border: `1px solid ${colors.border}`,
59
+ background: colors.surface,
60
+ "--dot-list-divider": colors.border
61
+ },
62
+ children
63
+ })
44
64
  });
45
65
  };
46
66
  const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...padding }) => {
47
67
  const { colors, radius } = useTheme();
68
+ const rowSize = ROW_SIZES[useContext(ListSizeContext)];
48
69
  let leading = null;
49
70
  if (image) leading = /* @__PURE__ */ jsx("img", {
50
71
  src: image,
51
72
  alt: "",
52
- width: 40,
53
- height: 40,
73
+ width: rowSize.image,
74
+ height: rowSize.image,
54
75
  style: {
55
76
  borderRadius: radius,
56
77
  objectFit: "cover",
@@ -60,15 +81,15 @@ const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...p
60
81
  else if (icon) leading = /* @__PURE__ */ jsx("span", {
61
82
  style: {
62
83
  ...CENTERED,
63
- width: 36,
64
- height: 36,
84
+ width: rowSize.icon,
85
+ height: rowSize.icon,
65
86
  borderRadius: "50%",
66
87
  background: colors.muted,
67
88
  flexShrink: 0
68
89
  },
69
90
  children: /* @__PURE__ */ jsx(IconGraphic, {
70
91
  name: icon,
71
- size: ICON_SIZE.medium,
92
+ size: rowSize.glyph,
72
93
  color: colors.text
73
94
  })
74
95
  });
@@ -116,8 +137,8 @@ const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...p
116
137
  const rowStyle = {
117
138
  display: "flex",
118
139
  alignItems: "center",
119
- gap: 12,
120
- ...paddingStyle(padding, insets(12, 16)),
140
+ gap: rowSize.gap,
141
+ ...paddingStyle(padding, insets(rowSize.block, 16)),
121
142
  width: "100%",
122
143
  background: colors.surface,
123
144
  color: colors.text,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@monimesl/dot-renderer-react",
3
- "version": "1.0.0-beta.3",
3
+ "version": "1.0.0-beta.4",
4
4
  "description": "React renderer for Dot webviews",
5
5
  "type": "module",
6
6
  "repository": {
@@ -29,8 +29,8 @@
29
29
  "react": "19.3.0",
30
30
  "react-dom": "19.3.0",
31
31
  "uqr": "^0.1.3",
32
- "@monimesl/dot-core": "1.0.0-beta.3",
33
- "@monimesl/dot-webview": "1.0.0-beta.3"
32
+ "@monimesl/dot-core": "1.0.0-beta.4",
33
+ "@monimesl/dot-webview": "1.0.0-beta.4"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@base-ui/react": "1.8.0",
@@ -46,7 +46,7 @@
46
46
  "tsdown": "^0.23.0",
47
47
  "typescript": "^5.9.3",
48
48
  "vitest": "^5.0.1",
49
- "@monimesl/dot-service": "1.0.0-beta.3"
49
+ "@monimesl/dot-service": "1.0.0-beta.4"
50
50
  },
51
51
  "publishConfig": {
52
52
  "access": "public"