@tamagui/list-item 3.0.0-beta.924.1 → 3.0.1

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 (17) hide show
  1. package/dist/cjs/ListItem.cjs +8 -37
  2. package/dist/cjs/ListItem.native.cjs +10 -40
  3. package/dist/cjs/ListItem.native.js +10 -40
  4. package/dist/cjs/ListItem.native.js.map +1 -1
  5. package/dist/esm/ListItem.mjs +10 -37
  6. package/dist/esm/ListItem.mjs.map +1 -1
  7. package/dist/esm/ListItem.native.js +12 -40
  8. package/dist/esm/ListItem.native.js.map +1 -1
  9. package/dist/jsx/ListItem.mjs +10 -37
  10. package/dist/jsx/ListItem.mjs.map +1 -1
  11. package/dist/jsx/ListItem.native.cjs +10 -40
  12. package/dist/jsx/ListItem.native.js +10 -40
  13. package/dist/jsx/ListItem.native.js.map +1 -1
  14. package/package.json +13 -12
  15. package/src/ListItem.tsx +25 -51
  16. package/types/ListItem.d.ts +25 -33
  17. package/types/ListItem.d.ts.map +1 -1
package/dist/jsx/ListItem.mjs CHANGED
@@ -1,10 +1,7 @@
1
- import { getFontSized } from "@tamagui/get-font-sized";
2
- import { oneSizeTokenSmaller } from "@tamagui/get-token";
3
1
  import { getThemedIconSize, useGetThemedIcon } from "@tamagui/helpers-tamagui";
4
- import { resolveSizeToken } from "@tamagui/size";
5
2
  import { YStack } from "@tamagui/stacks";
6
3
  import { SizableText, textParentProps, wrapChildrenInText } from "@tamagui/text";
7
- import { View, createStyledContext, getVariableValue, splitStyleProps, styled } from "@tamagui/web";
4
+ import { View, createStyledContext, getConfig, resolveSizing, splitStyleProps, styled } from "@tamagui/web";
8
5
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
9
6
 
10
7
  const ListItemContext = createStyledContext({
@@ -12,29 +9,11 @@ const ListItemContext = createStyledContext({
12
9
  variant: void 0,
13
10
  color: void 0
14
11
  });
15
- const listItemSizeVariant = styled.dynamic((val, { tokens }) => {
16
- const sizeToken = resolveSizeToken(val, "size");
17
- const spaceToken = resolveSizeToken(val, "space");
18
- const size = typeof sizeToken === "number" ? sizeToken : tokens.size[sizeToken];
19
- const sizeVal = getVariableValue(size);
20
- return {
21
- minHeight: size,
22
- paddingHorizontal: tokens.space[spaceToken],
23
- paddingVertical: Math.max(0, Math.round(sizeVal * .36 - 9)),
24
- gap: getThemedIconSize(sizeToken, .4)
25
- };
26
- });
27
- const listItemSubtitleSizeVariant = styled.dynamic((val, env) => {
28
- const fontSizeToken = resolveSizeToken(val, "fontSize");
29
- const oneSmaller = oneSizeTokenSmaller(fontSizeToken);
30
- return getFontSized(oneSmaller, env);
31
- });
32
12
  const ListItemFrame = styled(View, {
33
13
  context: ListItemContext,
34
14
  displayName: "ListItemFrame",
35
15
  role: "listitem",
36
16
  render: "li",
37
- size: true,
38
17
  alignItems: "center",
39
18
  justifyContent: "space-between",
40
19
  flexWrap: "nowrap",
@@ -42,10 +21,7 @@ const ListItemFrame = styled(View, {
42
21
  maxWidth: "100%",
43
22
  overflow: "hidden",
44
23
  flexDirection: "row",
45
- variants: {
46
- size: listItemSizeVariant,
47
- disabled: { true: { pointerEvents: "none" } }
48
- }
24
+ variants: { disabled: { true: { pointerEvents: "none" } } }
49
25
  });
50
26
  const ListItemText = styled(SizableText, {
51
27
  context: ListItemContext,
@@ -60,20 +36,17 @@ const ListItemSubtitle = styled(ListItemText, {
60
36
  context: ListItemContext,
61
37
  displayName: "ListItemSubtitle",
62
38
  opacity: .6,
63
- maxWidth: "100%",
64
- variants: { size: listItemSubtitleSizeVariant }
39
+ maxWidth: "100%"
65
40
  });
66
41
  const ListItemTitle = styled(ListItemText, {
67
42
  context: ListItemContext,
68
43
  displayName: "ListItemTitle"
69
44
  });
70
- const ListItemIcon = ({ children, size, scaleIcon = 1 }) => {
71
- const context = ListItemContext.useStyledContext();
72
- const getThemedIcon = useGetThemedIcon({
73
- size: getThemedIconSize(size ?? context.size ?? true, scaleIcon),
74
- color: context.color
75
- });
76
- return getThemedIcon(children);
45
+ const toIconFontKey = (size) => {
46
+ if (typeof size !== "string") return size;
47
+ const { sizing } = getConfig();
48
+ if (!sizing?.sizes?.[size]) return size;
49
+ return resolveSizing(size)?.fontSize ?? size;
77
50
  };
78
51
  function useListItem(propsIn) {
79
52
  const [wrappedTextProps, listItemProps] = splitStyleProps(propsIn, {
@@ -84,7 +57,7 @@ function useListItem(propsIn) {
84
57
  const { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;
85
58
  const context = ListItemContext.useStyledContext();
86
59
  const getThemedIcon = useGetThemedIcon({
87
- size: getThemedIconSize(iconSize ?? propsIn.size ?? context.size ?? true, scaleIcon),
60
+ size: getThemedIconSize(toIconFontKey(iconSize ?? propsIn.size ?? context.size ?? true), scaleIcon),
88
61
  color: propsIn.color ?? context.color
89
62
  });
90
63
  const wrappedChildren = wrapChildrenInText(ListItemText, {
@@ -118,5 +91,5 @@ function useListItem(propsIn) {
118
91
  } };
119
92
  }
120
93
 
121
- export { ListItemContext, ListItemFrame, ListItemIcon, ListItemSubtitle, ListItemText, ListItemTitle, listItemSizeVariant, useListItem };
94
+ export { ListItemContext, ListItemFrame, ListItemSubtitle, ListItemText, ListItemTitle, useListItem };
122
95
  //# sourceMappingURL=ListItem.mjs.map
package/dist/jsx/ListItem.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.js","names":[],"sources":["jsx/ListItem.js"],"sourcesContent":["import { getFontSized } from \"@tamagui/get-font-sized\";\nimport { oneSizeTokenSmaller } from \"@tamagui/get-token\";\nimport { getThemedIconSize, useGetThemedIcon } from \"@tamagui/helpers-tamagui\";\nimport { resolveSizeToken } from \"@tamagui/size\";\nimport { YStack } from \"@tamagui/stacks\";\nimport { SizableText, textParentProps, wrapChildrenInText } from \"@tamagui/text\";\nimport {\n createStyledContext,\n getVariableValue,\n splitStyleProps,\n styled,\n View\n} from \"@tamagui/web\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nconst ListItemContext = createStyledContext({\n size: void 0,\n variant: void 0,\n color: void 0\n});\nconst listItemSizeVariant = styled.dynamic(\n (val, { tokens }) => {\n const sizeToken = resolveSizeToken(val, \"size\");\n const spaceToken = resolveSizeToken(val, \"space\");\n const size = typeof sizeToken === \"number\" ? sizeToken : tokens.size[sizeToken];\n const sizeVal = getVariableValue(size);\n return {\n minHeight: size,\n paddingHorizontal: tokens.space[spaceToken],\n paddingVertical: Math.max(0, Math.round(sizeVal * 0.36 - 9)),\n gap: getThemedIconSize(sizeToken, 0.4)\n };\n }\n);\nconst listItemSubtitleSizeVariant = styled.dynamic((val, env) => {\n const fontSizeToken = resolveSizeToken(val, \"fontSize\");\n const oneSmaller = oneSizeTokenSmaller(fontSizeToken);\n return getFontSized(oneSmaller, env);\n});\nconst ListItemFrame = styled(View, {\n context: ListItemContext,\n displayName: \"ListItemFrame\",\n // role is the cross-platform one; render only lands on web\n role: \"listitem\",\n render: \"li\",\n size: true,\n alignItems: \"center\",\n justifyContent: \"space-between\",\n flexWrap: \"nowrap\",\n width: \"100%\",\n maxWidth: \"100%\",\n overflow: \"hidden\",\n flexDirection: \"row\",\n variants: {\n size: listItemSizeVariant,\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nconst ListItemText = styled(SizableText, {\n context: ListItemContext,\n displayName: \"ListItemText\",\n size: true,\n flexGrow: 1,\n flexShrink: 1,\n ellipsis: true,\n cursor: \"inherit\"\n});\nconst ListItemSubtitle = styled(ListItemText, {\n context: ListItemContext,\n displayName: \"ListItemSubtitle\",\n opacity: 0.6,\n maxWidth: \"100%\",\n variants: {\n size: listItemSubtitleSizeVariant\n }\n});\nconst ListItemTitle = styled(ListItemText, {\n context: ListItemContext,\n displayName: \"ListItemTitle\"\n});\nconst ListItemIcon = ({ children, size, scaleIcon = 1 }) => {\n const context = ListItemContext.useStyledContext();\n const getThemedIcon = useGetThemedIcon({\n size: getThemedIconSize(size ?? context.size ?? true, scaleIcon),\n color: context.color\n });\n return getThemedIcon(children);\n};\nfunction useListItem(propsIn) {\n const [wrappedTextProps, listItemProps] = splitStyleProps(propsIn, {\n expandShorthands: true,\n filter: textParentProps\n });\n const {\n children,\n icon,\n iconAfter,\n iconSize,\n scaleIcon = 1,\n subTitle,\n title,\n ...frameProps\n } = listItemProps;\n const { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;\n const context = ListItemContext.useStyledContext();\n const getThemedIcon = useGetThemedIcon({\n size: getThemedIconSize(iconSize ?? propsIn.size ?? context.size ?? true, scaleIcon),\n color: propsIn.color ?? context.color\n });\n const wrappedChildren = wrapChildrenInText(\n ListItemText,\n { children, noTextWrap, textProps },\n textStyleProps\n );\n return {\n props: {\n ...frameProps,\n color: propsIn.color,\n children: /* @__PURE__ */ jsxs(Fragment, { children: [\n icon ? getThemedIcon(icon) : null,\n title || subTitle ? /* @__PURE__ */ jsxs(YStack, { flex: 1, children: [\n typeof title === \"string\" ? /* @__PURE__ */ jsx(ListItemTitle, { ...textStyleProps, ...textProps, children: title }) : title,\n typeof subTitle === \"string\" ? /* @__PURE__ */ jsx(ListItemSubtitle, { ...textStyleProps, ...textProps, children: subTitle }) : subTitle,\n wrappedChildren\n ] }) : wrappedChildren,\n iconAfter ? getThemedIcon(iconAfter) : null\n ] })\n }\n };\n}\nexport {\n ListItemContext,\n ListItemFrame,\n ListItemIcon,\n ListItemSubtitle,\n ListItemText,\n ListItemTitle,\n listItemSizeVariant,\n useListItem\n};\n//# sourceMappingURL=ListItem.js.map\n"],"mappings":"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"}
1
+ {"version":3,"file":"ListItem.js","names":[],"sources":["jsx/ListItem.js"],"sourcesContent":["import { getThemedIconSize, useGetThemedIcon } from \"@tamagui/helpers-tamagui\";\nimport { YStack } from \"@tamagui/stacks\";\nimport { SizableText, textParentProps, wrapChildrenInText } from \"@tamagui/text\";\nimport {\n createStyledContext,\n getConfig,\n resolveSizing,\n splitStyleProps,\n styled,\n View\n} from \"@tamagui/web\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nconst ListItemContext = createStyledContext({\n size: void 0,\n variant: void 0,\n color: void 0\n});\nconst ListItemFrame = styled(View, {\n context: ListItemContext,\n displayName: \"ListItemFrame\",\n // role is the cross-platform one; render only lands on web\n role: \"listitem\",\n render: \"li\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n flexWrap: \"nowrap\",\n width: \"100%\",\n maxWidth: \"100%\",\n overflow: \"hidden\",\n flexDirection: \"row\",\n variants: {\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nconst ListItemText = styled(SizableText, {\n context: ListItemContext,\n displayName: \"ListItemText\",\n size: true,\n flexGrow: 1,\n flexShrink: 1,\n ellipsis: true,\n cursor: \"inherit\"\n});\nconst ListItemSubtitle = styled(ListItemText, {\n context: ListItemContext,\n displayName: \"ListItemSubtitle\",\n opacity: 0.6,\n maxWidth: \"100%\"\n});\nconst ListItemTitle = styled(ListItemText, {\n context: ListItemContext,\n displayName: \"ListItemTitle\"\n});\nconst toIconFontKey = (size) => {\n if (typeof size !== \"string\") return size;\n const { sizing } = getConfig();\n if (!sizing?.sizes?.[size]) return size;\n return resolveSizing(size)?.fontSize ?? size;\n};\nfunction useListItem(propsIn) {\n const [wrappedTextProps, listItemProps] = splitStyleProps(propsIn, {\n expandShorthands: true,\n filter: textParentProps\n });\n const {\n children,\n icon,\n iconAfter,\n iconSize,\n scaleIcon = 1,\n subTitle,\n title,\n ...frameProps\n } = listItemProps;\n const { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;\n const context = ListItemContext.useStyledContext();\n const getThemedIcon = useGetThemedIcon({\n size: getThemedIconSize(\n toIconFontKey(iconSize ?? propsIn.size ?? context.size ?? true),\n scaleIcon\n ),\n color: propsIn.color ?? context.color\n });\n const wrappedChildren = wrapChildrenInText(\n ListItemText,\n { children, noTextWrap, textProps },\n textStyleProps\n );\n return {\n props: {\n ...frameProps,\n color: propsIn.color,\n children: /* @__PURE__ */ jsxs(Fragment, { children: [\n icon ? getThemedIcon(icon) : null,\n title || subTitle ? /* @__PURE__ */ jsxs(YStack, { flex: 1, children: [\n typeof title === \"string\" ? /* @__PURE__ */ jsx(ListItemTitle, { ...textStyleProps, ...textProps, children: title }) : title,\n typeof subTitle === \"string\" ? /* @__PURE__ */ jsx(ListItemSubtitle, { ...textStyleProps, ...textProps, children: subTitle }) : subTitle,\n wrappedChildren\n ] }) : wrappedChildren,\n iconAfter ? getThemedIcon(iconAfter) : null\n ] })\n }\n };\n}\nexport {\n ListItemContext,\n ListItemFrame,\n ListItemSubtitle,\n ListItemText,\n ListItemTitle,\n useListItem\n};\n//# sourceMappingURL=ListItem.js.map\n"],"mappings":";;;;;;;AAYA,MAAM,kBAAkB,oBAAoB;CAC1C,MAAM,KAAK;CACX,SAAS,KAAK;CACd,OAAO,KAAK;AACd,CAAC;AACD,MAAM,gBAAgB,OAAO,MAAM;CACjC,SAAS;CACT,aAAa;CAEb,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,OAAO;CACP,UAAU;CACV,UAAU;CACV,eAAe;CACf,UAAU,EACR,UAAU,EACR,MAAM,EACJ,eAAe,OACjB,EACF,EACF;AACF,CAAC;AACD,MAAM,eAAe,OAAO,aAAa;CACvC,SAAS;CACT,aAAa;CACb,MAAM;CACN,UAAU;CACV,YAAY;CACZ,UAAU;CACV,QAAQ;AACV,CAAC;AACD,MAAM,mBAAmB,OAAO,cAAc;CAC5C,SAAS;CACT,aAAa;CACb,SAAS;CACT,UAAU;AACZ,CAAC;AACD,MAAM,gBAAgB,OAAO,cAAc;CACzC,SAAS;CACT,aAAa;AACf,CAAC;AACD,MAAM,iBAAiB,SAAS;CAC9B,IAAI,OAAO,SAAS,UAAU,OAAO;CACrC,MAAM,EAAE,WAAW,UAAU;CAC7B,IAAI,CAAC,QAAQ,QAAQ,OAAO,OAAO;CACnC,OAAO,cAAc,IAAI,CAAC,EAAE,YAAY;AAC1C;AACA,SAAS,YAAY,SAAS;CAC5B,MAAM,CAAC,kBAAkB,iBAAiB,gBAAgB,SAAS;EACjE,kBAAkB;EAClB,QAAQ;CACV,CAAC;CACD,MAAM,EACJ,UACA,MACA,WACA,UACA,YAAY,GACZ,UACA,OACA,GAAG,eACD;CACJ,MAAM,EAAE,YAAY,WAAW,GAAG,mBAAmB;CACrD,MAAM,UAAU,gBAAgB,iBAAiB;CACjD,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,kBACJ,cAAc,YAAY,QAAQ,QAAQ,QAAQ,QAAQ,IAAI,GAC9D,SACF;EACA,OAAO,QAAQ,SAAS,QAAQ;CAClC,CAAC;CACD,MAAM,kBAAkB,mBACtB,cACA;EAAE;EAAU;EAAY;CAAU,GAClC,cACF;CACA,OAAO,EACL,OAAO;EACL,GAAG;EACH,OAAO,QAAQ;EACf,UAA0B,qBAAK,UAAU,EAAE,UAAU;GACnD,OAAO,cAAc,IAAI,IAAI;GAC7B,SAAS,WAA2B,qBAAK,QAAQ;IAAE,MAAM;IAAG,UAAU;KACpE,OAAO,UAAU,WAA2B,oBAAI,eAAe;MAAE,GAAG;MAAgB,GAAG;MAAW,UAAU;KAAM,CAAC,IAAI;KACvH,OAAO,aAAa,WAA2B,oBAAI,kBAAkB;MAAE,GAAG;MAAgB,GAAG;MAAW,UAAU;KAAS,CAAC,IAAI;KAChI;IACF;GAAE,CAAC,IAAI;GACP,YAAY,cAAc,SAAS,IAAI;EACzC,EAAE,CAAC;CACL,EACF;AACF"}
package/dist/jsx/ListItem.native.cjs CHANGED
@@ -24,19 +24,14 @@ var ListItem_exports = {};
24
24
  __export(ListItem_exports, {
25
25
  ListItemContext: () => ListItemContext,
26
26
  ListItemFrame: () => ListItemFrame,
27
- ListItemIcon: () => ListItemIcon,
28
27
  ListItemSubtitle: () => ListItemSubtitle,
29
28
  ListItemText: () => ListItemText,
30
29
  ListItemTitle: () => ListItemTitle,
31
- listItemSizeVariant: () => listItemSizeVariant,
32
30
  useListItem: () => useListItem
33
31
  });
34
32
  module.exports = __toCommonJS(ListItem_exports);
35
33
  var import_jsx_runtime = require("react/jsx-runtime");
36
- var import_get_font_sized = require("@tamagui/get-font-sized");
37
- var import_get_token = require("@tamagui/get-token");
38
34
  var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
39
- var import_size = require("@tamagui/size");
40
35
  var import_stacks = require("@tamagui/stacks");
41
36
  var import_text = require("@tamagui/text");
42
37
  var import_web = require("@tamagui/web");
@@ -45,30 +40,11 @@ var ListItemContext = (0, import_web.createStyledContext)({
45
40
  variant: void 0,
46
41
  color: void 0
47
42
  });
48
- var listItemSizeVariant = import_web.styled.dynamic(function(val, param) {
49
- var { tokens } = param;
50
- var sizeToken = (0, import_size.resolveSizeToken)(val, "size");
51
- var spaceToken = (0, import_size.resolveSizeToken)(val, "space");
52
- var size = typeof sizeToken === "number" ? sizeToken : tokens.size[sizeToken];
53
- var sizeVal = (0, import_web.getVariableValue)(size);
54
- return {
55
- minHeight: size,
56
- paddingHorizontal: tokens.space[spaceToken],
57
- paddingVertical: Math.max(0, Math.round(sizeVal * .36 - 9)),
58
- gap: (0, import_helpers_tamagui.getThemedIconSize)(sizeToken, .4)
59
- };
60
- });
61
- var listItemSubtitleSizeVariant = import_web.styled.dynamic(function(val, env) {
62
- var fontSizeToken = (0, import_size.resolveSizeToken)(val, "fontSize");
63
- var oneSmaller = (0, import_get_token.oneSizeTokenSmaller)(fontSizeToken);
64
- return (0, import_get_font_sized.getFontSized)(oneSmaller, env);
65
- });
66
43
  var ListItemFrame = (0, import_web.styled)(import_web.View, {
67
44
  context: ListItemContext,
68
45
  displayName: "ListItemFrame",
69
46
  role: "listitem",
70
47
  render: "li",
71
- size: true,
72
48
  alignItems: "center",
73
49
  justifyContent: "space-between",
74
50
  flexWrap: "nowrap",
@@ -76,10 +52,7 @@ var ListItemFrame = (0, import_web.styled)(import_web.View, {
76
52
  maxWidth: "100%",
77
53
  overflow: "hidden",
78
54
  flexDirection: "row",
79
- variants: {
80
- size: listItemSizeVariant,
81
- disabled: { true: { pointerEvents: "none" } }
82
- }
55
+ variants: { disabled: { true: { pointerEvents: "none" } } }
83
56
  });
84
57
  var ListItemText = (0, import_web.styled)(import_text.SizableText, {
85
58
  context: ListItemContext,
@@ -94,22 +67,19 @@ var ListItemSubtitle = (0, import_web.styled)(ListItemText, {
94
67
  context: ListItemContext,
95
68
  displayName: "ListItemSubtitle",
96
69
  opacity: .6,
97
- maxWidth: "100%",
98
- variants: { size: listItemSubtitleSizeVariant }
70
+ maxWidth: "100%"
99
71
  });
100
72
  var ListItemTitle = (0, import_web.styled)(ListItemText, {
101
73
  context: ListItemContext,
102
74
  displayName: "ListItemTitle"
103
75
  });
104
- var ListItemIcon = function(param) {
105
- var { children, size, scaleIcon = 1 } = param;
106
- var context = ListItemContext.useStyledContext();
107
- var _ref;
108
- var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
109
- size: (0, import_helpers_tamagui.getThemedIconSize)((_ref = size !== null && size !== void 0 ? size : context.size) !== null && _ref !== void 0 ? _ref : true, scaleIcon),
110
- color: context.color
111
- });
112
- return getThemedIcon(children);
76
+ var toIconFontKey = function(size) {
77
+ var _sizing_sizes, _resolveSizing;
78
+ if (typeof size !== "string") return size;
79
+ var { sizing } = (0, import_web.getConfig)();
80
+ if (!(sizing === null || sizing === void 0 ? void 0 : (_sizing_sizes = sizing.sizes) === null || _sizing_sizes === void 0 ? void 0 : _sizing_sizes[size])) return size;
81
+ var _resolveSizing_fontSize;
82
+ return (_resolveSizing_fontSize = (_resolveSizing = (0, import_web.resolveSizing)(size)) === null || _resolveSizing === void 0 ? void 0 : _resolveSizing.fontSize) !== null && _resolveSizing_fontSize !== void 0 ? _resolveSizing_fontSize : size;
113
83
  };
114
84
  function useListItem(propsIn) {
115
85
  var [wrappedTextProps, listItemProps] = (0, import_web.splitStyleProps)(propsIn, {
@@ -121,7 +91,7 @@ function useListItem(propsIn) {
121
91
  var context = ListItemContext.useStyledContext();
122
92
  var _ref, _ref1, _propsIn_color;
123
93
  var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
124
- size: (0, import_helpers_tamagui.getThemedIconSize)((_ref1 = (_ref = iconSize !== null && iconSize !== void 0 ? iconSize : propsIn.size) !== null && _ref !== void 0 ? _ref : context.size) !== null && _ref1 !== void 0 ? _ref1 : true, scaleIcon),
94
+ size: (0, import_helpers_tamagui.getThemedIconSize)(toIconFontKey((_ref1 = (_ref = iconSize !== null && iconSize !== void 0 ? iconSize : propsIn.size) !== null && _ref !== void 0 ? _ref : context.size) !== null && _ref1 !== void 0 ? _ref1 : true), scaleIcon),
125
95
  color: (_propsIn_color = propsIn.color) !== null && _propsIn_color !== void 0 ? _propsIn_color : context.color
126
96
  });
127
97
  var wrappedChildren = (0, import_text.wrapChildrenInText)(ListItemText, {
package/dist/jsx/ListItem.native.js CHANGED
@@ -24,19 +24,14 @@ var ListItem_exports = {};
24
24
  __export(ListItem_exports, {
25
25
  ListItemContext: () => ListItemContext,
26
26
  ListItemFrame: () => ListItemFrame,
27
- ListItemIcon: () => ListItemIcon,
28
27
  ListItemSubtitle: () => ListItemSubtitle,
29
28
  ListItemText: () => ListItemText,
30
29
  ListItemTitle: () => ListItemTitle,
31
- listItemSizeVariant: () => listItemSizeVariant,
32
30
  useListItem: () => useListItem
33
31
  });
34
32
  module.exports = __toCommonJS(ListItem_exports);
35
33
  var import_jsx_runtime = require("react/jsx-runtime");
36
- var import_get_font_sized = require("@tamagui/get-font-sized");
37
- var import_get_token = require("@tamagui/get-token");
38
34
  var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
39
- var import_size = require("@tamagui/size");
40
35
  var import_stacks = require("@tamagui/stacks");
41
36
  var import_text = require("@tamagui/text");
42
37
  var import_web = require("@tamagui/web");
@@ -45,30 +40,11 @@ var ListItemContext = (0, import_web.createStyledContext)({
45
40
  variant: void 0,
46
41
  color: void 0
47
42
  });
48
- var listItemSizeVariant = import_web.styled.dynamic(function(val, param) {
49
- var { tokens } = param;
50
- var sizeToken = (0, import_size.resolveSizeToken)(val, "size");
51
- var spaceToken = (0, import_size.resolveSizeToken)(val, "space");
52
- var size = typeof sizeToken === "number" ? sizeToken : tokens.size[sizeToken];
53
- var sizeVal = (0, import_web.getVariableValue)(size);
54
- return {
55
- minHeight: size,
56
- paddingHorizontal: tokens.space[spaceToken],
57
- paddingVertical: Math.max(0, Math.round(sizeVal * .36 - 9)),
58
- gap: (0, import_helpers_tamagui.getThemedIconSize)(sizeToken, .4)
59
- };
60
- });
61
- var listItemSubtitleSizeVariant = import_web.styled.dynamic(function(val, env) {
62
- var fontSizeToken = (0, import_size.resolveSizeToken)(val, "fontSize");
63
- var oneSmaller = (0, import_get_token.oneSizeTokenSmaller)(fontSizeToken);
64
- return (0, import_get_font_sized.getFontSized)(oneSmaller, env);
65
- });
66
43
  var ListItemFrame = (0, import_web.styled)(import_web.View, {
67
44
  context: ListItemContext,
68
45
  displayName: "ListItemFrame",
69
46
  role: "listitem",
70
47
  render: "li",
71
- size: true,
72
48
  alignItems: "center",
73
49
  justifyContent: "space-between",
74
50
  flexWrap: "nowrap",
@@ -76,10 +52,7 @@ var ListItemFrame = (0, import_web.styled)(import_web.View, {
76
52
  maxWidth: "100%",
77
53
  overflow: "hidden",
78
54
  flexDirection: "row",
79
- variants: {
80
- size: listItemSizeVariant,
81
- disabled: { true: { pointerEvents: "none" } }
82
- }
55
+ variants: { disabled: { true: { pointerEvents: "none" } } }
83
56
  });
84
57
  var ListItemText = (0, import_web.styled)(import_text.SizableText, {
85
58
  context: ListItemContext,
@@ -94,22 +67,19 @@ var ListItemSubtitle = (0, import_web.styled)(ListItemText, {
94
67
  context: ListItemContext,
95
68
  displayName: "ListItemSubtitle",
96
69
  opacity: .6,
97
- maxWidth: "100%",
98
- variants: { size: listItemSubtitleSizeVariant }
70
+ maxWidth: "100%"
99
71
  });
100
72
  var ListItemTitle = (0, import_web.styled)(ListItemText, {
101
73
  context: ListItemContext,
102
74
  displayName: "ListItemTitle"
103
75
  });
104
- var ListItemIcon = function(param) {
105
- var { children, size, scaleIcon = 1 } = param;
106
- var context = ListItemContext.useStyledContext();
107
- var _ref;
108
- var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
109
- size: (0, import_helpers_tamagui.getThemedIconSize)((_ref = size !== null && size !== void 0 ? size : context.size) !== null && _ref !== void 0 ? _ref : true, scaleIcon),
110
- color: context.color
111
- });
112
- return getThemedIcon(children);
76
+ var toIconFontKey = function(size) {
77
+ var _sizing_sizes, _resolveSizing;
78
+ if (typeof size !== "string") return size;
79
+ var { sizing } = (0, import_web.getConfig)();
80
+ if (!(sizing === null || sizing === void 0 ? void 0 : (_sizing_sizes = sizing.sizes) === null || _sizing_sizes === void 0 ? void 0 : _sizing_sizes[size])) return size;
81
+ var _resolveSizing_fontSize;
82
+ return (_resolveSizing_fontSize = (_resolveSizing = (0, import_web.resolveSizing)(size)) === null || _resolveSizing === void 0 ? void 0 : _resolveSizing.fontSize) !== null && _resolveSizing_fontSize !== void 0 ? _resolveSizing_fontSize : size;
113
83
  };
114
84
  function useListItem(propsIn) {
115
85
  var [wrappedTextProps, listItemProps] = (0, import_web.splitStyleProps)(propsIn, {
@@ -121,7 +91,7 @@ function useListItem(propsIn) {
121
91
  var context = ListItemContext.useStyledContext();
122
92
  var _ref, _ref1, _propsIn_color;
123
93
  var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
124
- size: (0, import_helpers_tamagui.getThemedIconSize)((_ref1 = (_ref = iconSize !== null && iconSize !== void 0 ? iconSize : propsIn.size) !== null && _ref !== void 0 ? _ref : context.size) !== null && _ref1 !== void 0 ? _ref1 : true, scaleIcon),
94
+ size: (0, import_helpers_tamagui.getThemedIconSize)(toIconFontKey((_ref1 = (_ref = iconSize !== null && iconSize !== void 0 ? iconSize : propsIn.size) !== null && _ref !== void 0 ? _ref : context.size) !== null && _ref1 !== void 0 ? _ref1 : true), scaleIcon),
125
95
  color: (_propsIn_color = propsIn.color) !== null && _propsIn_color !== void 0 ? _propsIn_color : context.color
126
96
  });
127
97
  var wrappedChildren = (0, import_text.wrapChildrenInText)(ListItemText, {
package/dist/jsx/ListItem.native.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.native.js","names":[],"sources":["jsx/ListItem.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar ListItem_exports = {};\n__export(ListItem_exports, {\n ListItemContext: () => ListItemContext,\n ListItemFrame: () => ListItemFrame,\n ListItemIcon: () => ListItemIcon,\n ListItemSubtitle: () => ListItemSubtitle,\n ListItemText: () => ListItemText,\n ListItemTitle: () => ListItemTitle,\n listItemSizeVariant: () => listItemSizeVariant,\n useListItem: () => useListItem\n});\nmodule.exports = __toCommonJS(ListItem_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_get_font_sized = require(\"@tamagui/get-font-sized\");\nvar import_get_token = require(\"@tamagui/get-token\");\nvar import_helpers_tamagui = require(\"@tamagui/helpers-tamagui\");\nvar import_size = require(\"@tamagui/size\");\nvar import_stacks = require(\"@tamagui/stacks\");\nvar import_text = require(\"@tamagui/text\");\nvar import_web = require(\"@tamagui/web\");\nvar ListItemContext = (0, import_web.createStyledContext)({\n size: void 0,\n variant: void 0,\n color: void 0\n});\nvar listItemSizeVariant = import_web.styled.dynamic(function(val, param) {\n var { tokens } = param;\n var sizeToken = (0, import_size.resolveSizeToken)(val, \"size\");\n var spaceToken = (0, import_size.resolveSizeToken)(val, \"space\");\n var size = typeof sizeToken === \"number\" ? sizeToken : tokens.size[sizeToken];\n var sizeVal = (0, import_web.getVariableValue)(size);\n return {\n minHeight: size,\n paddingHorizontal: tokens.space[spaceToken],\n paddingVertical: Math.max(0, Math.round(sizeVal * 0.36 - 9)),\n gap: (0, import_helpers_tamagui.getThemedIconSize)(sizeToken, 0.4)\n };\n});\nvar listItemSubtitleSizeVariant = import_web.styled.dynamic(function(val, env) {\n var fontSizeToken = (0, import_size.resolveSizeToken)(val, \"fontSize\");\n var oneSmaller = (0, import_get_token.oneSizeTokenSmaller)(fontSizeToken);\n return (0, import_get_font_sized.getFontSized)(oneSmaller, env);\n});\nvar ListItemFrame = (0, import_web.styled)(import_web.View, {\n context: ListItemContext,\n displayName: \"ListItemFrame\",\n // role is the cross-platform one; render only lands on web\n role: \"listitem\",\n render: \"li\",\n size: true,\n alignItems: \"center\",\n justifyContent: \"space-between\",\n flexWrap: \"nowrap\",\n width: \"100%\",\n maxWidth: \"100%\",\n overflow: \"hidden\",\n flexDirection: \"row\",\n variants: {\n size: listItemSizeVariant,\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nvar ListItemText = (0, import_web.styled)(import_text.SizableText, {\n context: ListItemContext,\n displayName: \"ListItemText\",\n size: true,\n flexGrow: 1,\n flexShrink: 1,\n ellipsis: true,\n cursor: \"inherit\"\n});\nvar ListItemSubtitle = (0, import_web.styled)(ListItemText, {\n context: ListItemContext,\n displayName: \"ListItemSubtitle\",\n opacity: 0.6,\n maxWidth: \"100%\",\n variants: {\n size: listItemSubtitleSizeVariant\n }\n});\nvar ListItemTitle = (0, import_web.styled)(ListItemText, {\n context: ListItemContext,\n displayName: \"ListItemTitle\"\n});\nvar ListItemIcon = function(param) {\n var { children, size, scaleIcon = 1 } = param;\n var context = ListItemContext.useStyledContext();\n var _ref;\n var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({\n size: (0, import_helpers_tamagui.getThemedIconSize)((_ref = size !== null && size !== void 0 ? size : context.size) !== null && _ref !== void 0 ? _ref : true, scaleIcon),\n color: context.color\n });\n return getThemedIcon(children);\n};\nfunction useListItem(propsIn) {\n var [wrappedTextProps, listItemProps] = (0, import_web.splitStyleProps)(propsIn, {\n expandShorthands: true,\n filter: import_text.textParentProps\n });\n var { children, icon, iconAfter, iconSize, scaleIcon = 1, subTitle, title, ...frameProps } = listItemProps;\n var { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;\n var context = ListItemContext.useStyledContext();\n var _ref, _ref1, _propsIn_color;\n var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({\n size: (0, import_helpers_tamagui.getThemedIconSize)((_ref1 = (_ref = iconSize !== null && iconSize !== void 0 ? iconSize : propsIn.size) !== null && _ref !== void 0 ? _ref : context.size) !== null && _ref1 !== void 0 ? _ref1 : true, scaleIcon),\n color: (_propsIn_color = propsIn.color) !== null && _propsIn_color !== void 0 ? _propsIn_color : context.color\n });\n var wrappedChildren = (0, import_text.wrapChildrenInText)(ListItemText, {\n children,\n noTextWrap,\n textProps\n }, textStyleProps);\n return {\n props: {\n ...frameProps,\n color: propsIn.color,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {\n children: [\n icon ? getThemedIcon(icon) : null,\n title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stacks.YStack, {\n flex: 1,\n children: [\n typeof title === \"string\" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemTitle, {\n ...textStyleProps,\n ...textProps,\n children: title\n }) : title,\n typeof subTitle === \"string\" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemSubtitle, {\n ...textStyleProps,\n ...textProps,\n children: subTitle\n }) : subTitle,\n wrappedChildren\n ]\n }) : wrappedChildren,\n iconAfter ? getThemedIcon(iconAfter) : null\n ]\n })\n }\n };\n}\n//# sourceMappingURL=ListItem.js.map\n"],"mappings":"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"}
1
+ {"version":3,"file":"ListItem.native.js","names":[],"sources":["jsx/ListItem.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar ListItem_exports = {};\n__export(ListItem_exports, {\n ListItemContext: () => ListItemContext,\n ListItemFrame: () => ListItemFrame,\n ListItemSubtitle: () => ListItemSubtitle,\n ListItemText: () => ListItemText,\n ListItemTitle: () => ListItemTitle,\n useListItem: () => useListItem\n});\nmodule.exports = __toCommonJS(ListItem_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_helpers_tamagui = require(\"@tamagui/helpers-tamagui\");\nvar import_stacks = require(\"@tamagui/stacks\");\nvar import_text = require(\"@tamagui/text\");\nvar import_web = require(\"@tamagui/web\");\nvar ListItemContext = (0, import_web.createStyledContext)({\n size: void 0,\n variant: void 0,\n color: void 0\n});\nvar ListItemFrame = (0, import_web.styled)(import_web.View, {\n context: ListItemContext,\n displayName: \"ListItemFrame\",\n // role is the cross-platform one; render only lands on web\n role: \"listitem\",\n render: \"li\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n flexWrap: \"nowrap\",\n width: \"100%\",\n maxWidth: \"100%\",\n overflow: \"hidden\",\n flexDirection: \"row\",\n variants: {\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nvar ListItemText = (0, import_web.styled)(import_text.SizableText, {\n context: ListItemContext,\n displayName: \"ListItemText\",\n size: true,\n flexGrow: 1,\n flexShrink: 1,\n ellipsis: true,\n cursor: \"inherit\"\n});\nvar ListItemSubtitle = (0, import_web.styled)(ListItemText, {\n context: ListItemContext,\n displayName: \"ListItemSubtitle\",\n opacity: 0.6,\n maxWidth: \"100%\"\n});\nvar ListItemTitle = (0, import_web.styled)(ListItemText, {\n context: ListItemContext,\n displayName: \"ListItemTitle\"\n});\nvar toIconFontKey = function(size) {\n var _sizing_sizes, _resolveSizing;\n if (typeof size !== \"string\") return size;\n var { sizing } = (0, import_web.getConfig)();\n if (!(sizing === null || sizing === void 0 ? void 0 : (_sizing_sizes = sizing.sizes) === null || _sizing_sizes === void 0 ? void 0 : _sizing_sizes[size])) return size;\n var _resolveSizing_fontSize;\n return (_resolveSizing_fontSize = (_resolveSizing = (0, import_web.resolveSizing)(size)) === null || _resolveSizing === void 0 ? void 0 : _resolveSizing.fontSize) !== null && _resolveSizing_fontSize !== void 0 ? _resolveSizing_fontSize : size;\n};\nfunction useListItem(propsIn) {\n var [wrappedTextProps, listItemProps] = (0, import_web.splitStyleProps)(propsIn, {\n expandShorthands: true,\n filter: import_text.textParentProps\n });\n var { children, icon, iconAfter, iconSize, scaleIcon = 1, subTitle, title, ...frameProps } = listItemProps;\n var { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;\n var context = ListItemContext.useStyledContext();\n var _ref, _ref1, _propsIn_color;\n var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({\n size: (0, import_helpers_tamagui.getThemedIconSize)(toIconFontKey((_ref1 = (_ref = iconSize !== null && iconSize !== void 0 ? iconSize : propsIn.size) !== null && _ref !== void 0 ? _ref : context.size) !== null && _ref1 !== void 0 ? _ref1 : true), scaleIcon),\n color: (_propsIn_color = propsIn.color) !== null && _propsIn_color !== void 0 ? _propsIn_color : context.color\n });\n var wrappedChildren = (0, import_text.wrapChildrenInText)(ListItemText, {\n children,\n noTextWrap,\n textProps\n }, textStyleProps);\n return {\n props: {\n ...frameProps,\n color: propsIn.color,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {\n children: [\n icon ? getThemedIcon(icon) : null,\n title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stacks.YStack, {\n flex: 1,\n children: [\n typeof title === \"string\" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemTitle, {\n ...textStyleProps,\n ...textProps,\n children: title\n }) : title,\n typeof subTitle === \"string\" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemSubtitle, {\n ...textStyleProps,\n ...textProps,\n children: subTitle\n }) : subTitle,\n wrappedChildren\n ]\n }) : wrappedChildren,\n iconAfter ? getThemedIcon(iconAfter) : null\n ]\n })\n }\n };\n}\n//# sourceMappingURL=ListItem.js.map\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@tamagui/list-item",
3
- "version": "3.0.0-beta.924.1",
3
+ "version": "3.0.1",
4
+ "license": "MIT",
4
5
  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
5
6
  "source": "src/index.ts",
6
7
  "files": [
@@ -35,18 +36,17 @@
35
36
  "clean:build": "tamagui-build clean:build"
36
37
  },
37
38
  "dependencies": {
38
- "@tamagui/font-size": "3.0.0-beta.924.1",
39
- "@tamagui/get-font-sized": "3.0.0-beta.924.1",
40
- "@tamagui/get-token": "3.0.0-beta.924.1",
41
- "@tamagui/helpers": "3.0.0-beta.924.1",
42
- "@tamagui/helpers-tamagui": "3.0.0-beta.924.1",
43
- "@tamagui/size": "3.0.0-beta.924.1",
44
- "@tamagui/stacks": "3.0.0-beta.924.1",
45
- "@tamagui/text": "3.0.0-beta.924.1",
46
- "@tamagui/web": "3.0.0-beta.924.1"
39
+ "@tamagui/font-size": "3.0.1",
40
+ "@tamagui/get-font-sized": "3.0.1",
41
+ "@tamagui/get-token": "3.0.1",
42
+ "@tamagui/helpers": "3.0.1",
43
+ "@tamagui/helpers-tamagui": "3.0.1",
44
+ "@tamagui/stacks": "3.0.1",
45
+ "@tamagui/text": "3.0.1",
46
+ "@tamagui/web": "3.0.1"
47
47
  },
48
48
  "devDependencies": {
49
- "@tamagui/build": "3.0.0-beta.924.1",
49
+ "@tamagui/build": "3.0.1",
50
50
  "react": "19.2.3"
51
51
  },
52
52
  "peerDependencies": {
@@ -57,5 +57,6 @@
57
57
  "type": "git",
58
58
  "url": "git+https://github.com/tamagui/tamagui.git",
59
59
  "directory": "code/ui/list-item"
60
- }
60
+ },
61
+ "releaseSourceCommit": "c156b7cc55e5a6cc5883ebc8189720850ac32dbd"
61
62
  }
package/src/ListItem.tsx CHANGED
@@ -1,14 +1,12 @@
1
- import { getFontSized } from '@tamagui/get-font-sized'
2
- import { oneSizeTokenSmaller } from '@tamagui/get-token'
3
1
  import { getThemedIconSize, useGetThemedIcon } from '@tamagui/helpers-tamagui'
4
- import { resolveSizeToken } from '@tamagui/size'
5
2
  import { YStack } from '@tamagui/stacks'
6
3
  import type { TextParentStyles } from '@tamagui/text'
7
4
  import { SizableText, textParentProps, wrapChildrenInText } from '@tamagui/text'
8
- import type { ColorTokens, FontSizeTokens, GetProps, SizeTokens } from '@tamagui/web'
5
+ import type { ColorTokens, ComponentSize, GetProps } from '@tamagui/web'
9
6
  import {
10
7
  createStyledContext,
11
- getVariableValue,
8
+ getConfig,
9
+ resolveSizing,
12
10
  splitStyleProps,
13
11
  styled,
14
12
  View,
@@ -24,7 +22,7 @@ type IconProp = JSX.Element | FunctionComponent<{ color?: any; size?: any }> | n
24
22
  * getting size and color from a ListItem down to its text and icons.
25
23
  */
26
24
  export const ListItemContext = createStyledContext<{
27
- size?: SizeTokens | true
25
+ size?: string | boolean
28
26
  variant?: 'outlined'
29
27
  color?: ColorTokens | string
30
28
  }>({
@@ -33,37 +31,14 @@ export const ListItemContext = createStyledContext<{
33
31
  color: undefined,
34
32
  })
35
33
 
36
- export const listItemSizeVariant = styled.dynamic<SizeTokens | true>(
37
- (val, { tokens }) => {
38
- const sizeToken = resolveSizeToken(val, 'size')
39
- const spaceToken = resolveSizeToken(val, 'space')
40
- const size = typeof sizeToken === 'number' ? sizeToken : tokens.size[sizeToken]
41
- const sizeVal = getVariableValue(size) as number
42
- return {
43
- minHeight: size,
44
- paddingHorizontal: tokens.space[spaceToken],
45
- paddingVertical: Math.max(0, Math.round(sizeVal * 0.36 - 9)),
46
- gap: getThemedIconSize(sizeToken, 0.4),
47
- }
48
- }
49
- )
50
-
51
- const listItemSubtitleSizeVariant = styled.dynamic<SizeTokens | true>((val, env) => {
52
- const fontSizeToken = resolveSizeToken(val, 'fontSize')
53
- const oneSmaller = oneSizeTokenSmaller(fontSizeToken)
54
- return getFontSized(oneSmaller as FontSizeTokens, env)
55
- })
56
-
57
- // structural layout, the size mechanism, and the disabled pointer-event block.
58
- // theme decoration (palette, border, cursor, the outlined/active appearance,
59
- // disabled dimming) lives in a skin — see tamagui's components/ListItem.tsx
34
+ // structural layout and the disabled pointer-event block. Sizing (padding,
35
+ // font) lives in a skin — see tamagui's components/ListItem.tsx
60
36
  export const ListItemFrame = styled(View, {
61
37
  context: ListItemContext,
62
38
  displayName: 'ListItemFrame',
63
39
  // role is the cross-platform one; render only lands on web
64
40
  role: 'listitem',
65
41
  render: 'li',
66
- size: true,
67
42
  alignItems: 'center',
68
43
  justifyContent: 'space-between',
69
44
  flexWrap: 'nowrap',
@@ -73,8 +48,6 @@ export const ListItemFrame = styled(View, {
73
48
  flexDirection: 'row',
74
49
 
75
50
  variants: {
76
- size: listItemSizeVariant,
77
-
78
51
  disabled: {
79
52
  true: {
80
53
  pointerEvents: 'none',
@@ -98,10 +71,6 @@ export const ListItemSubtitle = styled(ListItemText, {
98
71
  displayName: 'ListItemSubtitle',
99
72
  opacity: 0.6,
100
73
  maxWidth: '100%',
101
-
102
- variants: {
103
- size: listItemSubtitleSizeVariant,
104
- } as const,
105
74
  })
106
75
 
107
76
  export const ListItemTitle = styled(ListItemText, {
@@ -111,20 +80,10 @@ export const ListItemTitle = styled(ListItemText, {
111
80
 
112
81
  export type ListItemIconProps = {
113
82
  children: ReactNode
114
- size?: SizeTokens | true
83
+ size?: string | number | boolean
115
84
  scaleIcon?: number
116
85
  }
117
86
 
118
- export const ListItemIcon = ({ children, size, scaleIcon = 1 }: ListItemIconProps) => {
119
- const context = ListItemContext.useStyledContext()
120
- const getThemedIcon = useGetThemedIcon({
121
- size: getThemedIconSize(size ?? context.size ?? true, scaleIcon),
122
- color: context.color,
123
- })
124
-
125
- return getThemedIcon(children)
126
- }
127
-
128
87
  /**
129
88
  * The props `useListItem` reads and replaces, so exactly what its result omits.
130
89
  */
@@ -132,7 +91,7 @@ type ListItemConsumedProps = {
132
91
  children?: ReactNode
133
92
  icon?: IconProp
134
93
  iconAfter?: IconProp
135
- iconSize?: SizeTokens | true
94
+ iconSize?: string | number | boolean
136
95
  scaleIcon?: number
137
96
  subTitle?: ReactNode
138
97
  title?: ReactNode
@@ -143,7 +102,7 @@ export type ListItemBehaviorProps = TextParentStyles &
143
102
  // read to theme an `icon` prop, then passed through untouched: the frame
144
103
  // declares the styled context, so it is what publishes these to the parts
145
104
  color?: ColorTokens | string
146
- size?: SizeTokens | true
105
+ size?: string | boolean
147
106
  }
148
107
 
149
108
  /**
@@ -165,6 +124,18 @@ export type UseListItemProps<Props extends ListItemBehaviorProps> = Omit<
165
124
  * to generated text, while size and color still reach the parts through the
166
125
  * styled context.
167
126
  */
127
+ // control names are not font keys ('md' is not on the type scale): translate
128
+ // through the ladder before measuring. Numbers, booleans, and anything the
129
+ // ladder does not name pass through to the font lookup as before.
130
+ type IconSizeInput = string | number | boolean | null | undefined
131
+
132
+ const toIconFontKey = (size: IconSizeInput): IconSizeInput => {
133
+ if (typeof size !== 'string') return size
134
+ const { sizing } = getConfig()
135
+ if (!sizing?.sizes?.[size]) return size
136
+ return resolveSizing(size as ComponentSize)?.fontSize ?? size
137
+ }
138
+
168
139
  export function useListItem<Props extends ListItemBehaviorProps>(
169
140
  propsIn: Props
170
141
  ): { props: UseListItemProps<Props> } {
@@ -188,7 +159,10 @@ export function useListItem<Props extends ListItemBehaviorProps>(
188
159
  // prop is themed here, before the frame renders, so it reads them itself
189
160
  const context = ListItemContext.useStyledContext()
190
161
  const getThemedIcon = useGetThemedIcon({
191
- size: getThemedIconSize(iconSize ?? propsIn.size ?? context.size ?? true, scaleIcon),
162
+ size: getThemedIconSize(
163
+ toIconFontKey(iconSize ?? propsIn.size ?? context.size ?? true),
164
+ scaleIcon
165
+ ),
192
166
  color: propsIn.color ?? context.color,
193
167
  })
194
168