@tamagui/list-item 3.0.0-beta.807.1 → 3.0.0-beta.831.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 +58 -86
  2. package/dist/cjs/ListItem.native.cjs +60 -89
  3. package/dist/cjs/ListItem.native.js +60 -89
  4. package/dist/cjs/ListItem.native.js.map +1 -1
  5. package/dist/esm/ListItem.mjs +53 -87
  6. package/dist/esm/ListItem.mjs.map +1 -1
  7. package/dist/esm/ListItem.native.js +55 -90
  8. package/dist/esm/ListItem.native.js.map +1 -1
  9. package/dist/jsx/ListItem.mjs +53 -87
  10. package/dist/jsx/ListItem.mjs.map +1 -1
  11. package/dist/jsx/ListItem.native.cjs +60 -89
  12. package/dist/jsx/ListItem.native.js +60 -89
  13. package/dist/jsx/ListItem.native.js.map +1 -1
  14. package/package.json +11 -11
  15. package/src/ListItem.tsx +136 -147
  16. package/types/ListItem.d.ts +86 -124
  17. package/types/ListItem.d.ts.map +1 -1
package/dist/cjs/ListItem.cjs CHANGED
@@ -20,21 +20,25 @@ var __copyProps = (to, from, except, desc) => {
20
20
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
21
21
  var ListItem_exports = {};
22
22
  __export(ListItem_exports, {
23
- ListItem: () => ListItem2,
24
- listItemSizeVariant: () => listItemSizeVariant
23
+ ListItemContext: () => ListItemContext,
24
+ ListItemFrame: () => ListItemFrame,
25
+ ListItemIcon: () => ListItemIcon,
26
+ ListItemSubtitle: () => ListItemSubtitle,
27
+ ListItemText: () => ListItemText,
28
+ ListItemTitle: () => ListItemTitle,
29
+ listItemSizeVariant: () => listItemSizeVariant,
30
+ useListItem: () => useListItem
25
31
  });
26
32
  module.exports = __toCommonJS(ListItem_exports);
27
33
  var import_get_font_sized = require("@tamagui/get-font-sized");
28
34
  var import_get_token = require("@tamagui/get-token");
29
- var import_helpers = require("@tamagui/helpers");
30
35
  var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
31
- var import_stacks = require("@tamagui/stacks");
32
36
  var import_size = require("@tamagui/size");
37
+ var import_stacks = require("@tamagui/stacks");
33
38
  var import_text = require("@tamagui/text");
34
39
  var import_web = require("@tamagui/web");
35
40
  var import_jsx_runtime = require("react/jsx-runtime");
36
- const NAME = "ListItem";
37
- const context = (0, import_web.createStyledContext)({
41
+ const ListItemContext = (0, import_web.createStyledContext)({
38
42
  size: void 0,
39
43
  variant: void 0,
40
44
  color: void 0
@@ -57,10 +61,10 @@ const listItemSubtitleSizeVariant = (val, extras) => {
57
61
  return (0, import_get_font_sized.getFontSized)(oneSmaller, extras);
58
62
  };
59
63
  const ListItemFrame = (0, import_web.styled)(import_web.View, {
60
- context,
61
- displayName: NAME,
62
- render: "li",
64
+ context: ListItemContext,
65
+ displayName: "ListItemFrame",
63
66
  role: "listitem",
67
+ render: "li",
64
68
  size: true,
65
69
  alignItems: "center",
66
70
  justifyContent: "space-between",
@@ -78,7 +82,7 @@ const ListItemFrame = (0, import_web.styled)(import_web.View, {
78
82
  }
79
83
  });
80
84
  const ListItemText = (0, import_web.styled)(import_text.SizableText, {
81
- context,
85
+ context: ListItemContext,
82
86
  displayName: "ListItemText",
83
87
  size: true,
84
88
  flexGrow: 1,
@@ -87,8 +91,8 @@ const ListItemText = (0, import_web.styled)(import_text.SizableText, {
87
91
  cursor: "inherit"
88
92
  });
89
93
  const ListItemSubtitle = (0, import_web.styled)(ListItemText, {
94
+ context: ListItemContext,
90
95
  displayName: "ListItemSubtitle",
91
- context,
92
96
  opacity: .6,
93
97
  maxWidth: "100%",
94
98
  variants: { size: {
@@ -97,88 +101,56 @@ const ListItemSubtitle = (0, import_web.styled)(ListItemText, {
97
101
  } }
98
102
  });
99
103
  const ListItemTitle = (0, import_web.styled)(ListItemText, {
100
- displayName: "ListItemTitle",
101
- context
104
+ context: ListItemContext,
105
+ displayName: "ListItemTitle"
102
106
  });
103
- const ListItemIcon = (props) => {
104
- const { children, size, scaleIcon = 1 } = props;
105
- const styledContext = context.useStyledContext();
106
- if (!styledContext) {
107
- throw new Error("ListItem.Icon must be used within a ListItem");
108
- }
109
- const sizeToken = size ?? styledContext.size ?? true;
110
- const contextColor = styledContext.color;
111
- const iconColorProp = contextColor === "unset" || typeof contextColor === "number" ? void 0 : contextColor;
112
- const iconSize = (0, import_helpers_tamagui.getThemedIconSize)(sizeToken, scaleIcon);
107
+ const ListItemIcon = ({ children, size, scaleIcon = 1 }) => {
108
+ const context = ListItemContext.useStyledContext();
113
109
  const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
114
- size: iconSize,
115
- color: iconColorProp
110
+ size: (0, import_helpers_tamagui.getThemedIconSize)(size ?? context.size ?? true, scaleIcon),
111
+ color: context.color
116
112
  });
117
113
  return getThemedIcon(children);
118
114
  };
119
- const ListItemComponent = (0, import_web.createStyledHOC)(ListItemFrame, function ListItem(propsIn, ref) {
120
- const processedProps = (0, import_web.useProps)(propsIn, {
121
- noNormalize: true,
122
- noExpand: true
115
+ function useListItem(propsIn) {
116
+ const [wrappedTextProps, listItemProps] = (0, import_web.splitStyleProps)(propsIn, {
117
+ expandShorthands: true,
118
+ filter: import_text.textParentProps
123
119
  });
124
- const { children, icon, iconAfter, scaleIcon = 1, subTitle, title, iconSize, color, ...rest } = processedProps;
125
- const styledContext = context.useStyledContext();
126
- const size = rest.size ?? propsIn.size ?? styledContext?.size ?? true;
127
- const contextColor = color ?? propsIn.color ?? styledContext?.color;
128
- const iconColorProp = contextColor === "unset" || typeof contextColor === "number" ? void 0 : contextColor;
129
- const iconSizeNumber = (0, import_helpers_tamagui.getThemedIconSize)(iconSize ?? size, scaleIcon);
120
+ const { children, icon, iconAfter, iconSize, scaleIcon = 1, subTitle, title, ...frameProps } = listItemProps;
121
+ const { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;
122
+ const context = ListItemContext.useStyledContext();
130
123
  const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
131
- size: iconSizeNumber,
132
- color: iconColorProp
124
+ size: (0, import_helpers_tamagui.getThemedIconSize)(iconSize ?? propsIn.size ?? context.size ?? true, scaleIcon),
125
+ color: propsIn.color ?? context.color
133
126
  });
134
- const themedIcon = icon ? getThemedIcon(icon) : null;
135
- const themedIconAfter = iconAfter ? getThemedIcon(iconAfter) : null;
136
- const wrappedChildren = (0, import_text.wrapChildrenInText)(ListItemText, { children }, { size });
137
- const listItemContext = {
138
- ...styledContext,
139
- color: contextColor,
140
- size,
141
- variant: rest.variant ?? propsIn.variant ?? styledContext?.variant
142
- };
143
- const frameProps = {
144
- size,
145
- variant: listItemContext.variant,
146
- ...rest
147
- };
148
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(context.Provider, {
149
- ...listItemContext,
150
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemFrame, {
151
- ref,
152
- ...frameProps,
153
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(context.Provider, {
154
- ...listItemContext,
127
+ const wrappedChildren = (0, import_text.wrapChildrenInText)(ListItemText, {
128
+ children,
129
+ noTextWrap,
130
+ textProps
131
+ }, textStyleProps);
132
+ return { props: {
133
+ ...frameProps,
134
+ color: propsIn.color,
135
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
136
+ icon ? getThemedIcon(icon) : null,
137
+ title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stacks.YStack, {
138
+ flex: 1,
155
139
  children: [
156
- themedIcon,
157
- title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stacks.YStack, {
158
- flex: 1,
159
- children: [
160
- title ? typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemTitle, {
161
- size,
162
- children: title
163
- }) : title : null,
164
- subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: typeof subTitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemSubtitle, {
165
- size,
166
- children: subTitle
167
- }) : subTitle }) : null,
168
- wrappedChildren
169
- ]
170
- }) : wrappedChildren,
171
- themedIconAfter
140
+ typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemTitle, {
141
+ ...textStyleProps,
142
+ ...textProps,
143
+ children: title
144
+ }) : title,
145
+ typeof subTitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemSubtitle, {
146
+ ...textStyleProps,
147
+ ...textProps,
148
+ children: subTitle
149
+ }) : subTitle,
150
+ wrappedChildren
172
151
  ]
173
- })
174
- })
175
- });
176
- });
177
- const ListItem2 = (0, import_helpers.withStaticProperties)(ListItemComponent, {
178
- Apply: context.Provider,
179
- Frame: ListItemFrame,
180
- Text: ListItemText,
181
- Subtitle: ListItemSubtitle,
182
- Icon: ListItemIcon,
183
- Title: ListItemTitle
184
- });
152
+ }) : wrappedChildren,
153
+ iconAfter ? getThemedIcon(iconAfter) : null
154
+ ] })
155
+ } };
156
+ }
package/dist/cjs/ListItem.native.cjs CHANGED
@@ -22,21 +22,25 @@ var __copyProps = (to, from, except, desc) => {
22
22
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
23
23
  var ListItem_exports = {};
24
24
  __export(ListItem_exports, {
25
- ListItem: () => ListItem2,
26
- listItemSizeVariant: () => listItemSizeVariant
25
+ ListItemContext: () => ListItemContext,
26
+ ListItemFrame: () => ListItemFrame,
27
+ ListItemIcon: () => ListItemIcon,
28
+ ListItemSubtitle: () => ListItemSubtitle,
29
+ ListItemText: () => ListItemText,
30
+ ListItemTitle: () => ListItemTitle,
31
+ listItemSizeVariant: () => listItemSizeVariant,
32
+ useListItem: () => useListItem
27
33
  });
28
34
  module.exports = __toCommonJS(ListItem_exports);
29
35
  var import_jsx_runtime = require("react/jsx-runtime");
30
36
  var import_get_font_sized = require("@tamagui/get-font-sized");
31
37
  var import_get_token = require("@tamagui/get-token");
32
- var import_helpers = require("@tamagui/helpers");
33
38
  var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
34
- var import_stacks = require("@tamagui/stacks");
35
39
  var import_size = require("@tamagui/size");
40
+ var import_stacks = require("@tamagui/stacks");
36
41
  var import_text = require("@tamagui/text");
37
42
  var import_web = require("@tamagui/web");
38
- var NAME = "ListItem";
39
- var context = (0, import_web.createStyledContext)({
43
+ var ListItemContext = (0, import_web.createStyledContext)({
40
44
  size: void 0,
41
45
  variant: void 0,
42
46
  color: void 0
@@ -60,10 +64,10 @@ var listItemSubtitleSizeVariant = function(val, extras) {
60
64
  return (0, import_get_font_sized.getFontSized)(oneSmaller, extras);
61
65
  };
62
66
  var ListItemFrame = (0, import_web.styled)(import_web.View, {
63
- context,
64
- displayName: NAME,
65
- render: "li",
67
+ context: ListItemContext,
68
+ displayName: "ListItemFrame",
66
69
  role: "listitem",
70
+ render: "li",
67
71
  size: true,
68
72
  alignItems: "center",
69
73
  justifyContent: "space-between",
@@ -81,7 +85,7 @@ var ListItemFrame = (0, import_web.styled)(import_web.View, {
81
85
  }
82
86
  });
83
87
  var ListItemText = (0, import_web.styled)(import_text.SizableText, {
84
- context,
88
+ context: ListItemContext,
85
89
  displayName: "ListItemText",
86
90
  size: true,
87
91
  flexGrow: 1,
@@ -90,8 +94,8 @@ var ListItemText = (0, import_web.styled)(import_text.SizableText, {
90
94
  cursor: "inherit"
91
95
  });
92
96
  var ListItemSubtitle = (0, import_web.styled)(ListItemText, {
97
+ context: ListItemContext,
93
98
  displayName: "ListItemSubtitle",
94
- context,
95
99
  opacity: .6,
96
100
  maxWidth: "100%",
97
101
  variants: { size: {
@@ -100,92 +104,59 @@ var ListItemSubtitle = (0, import_web.styled)(ListItemText, {
100
104
  } }
101
105
  });
102
106
  var ListItemTitle = (0, import_web.styled)(ListItemText, {
103
- displayName: "ListItemTitle",
104
- context
107
+ context: ListItemContext,
108
+ displayName: "ListItemTitle"
105
109
  });
106
- var ListItemIcon = function(props) {
107
- var { children, size, scaleIcon = 1 } = props;
108
- var styledContext = context.useStyledContext();
109
- if (!styledContext) {
110
- throw new Error("ListItem.Icon must be used within a ListItem");
111
- }
110
+ var ListItemIcon = function(param) {
111
+ var { children, size, scaleIcon = 1 } = param;
112
+ var context = ListItemContext.useStyledContext();
112
113
  var _ref;
113
- var sizeToken = (_ref = size !== null && size !== void 0 ? size : styledContext.size) !== null && _ref !== void 0 ? _ref : true;
114
- var contextColor = styledContext.color;
115
- var iconColorProp = contextColor === "unset" || typeof contextColor === "number" ? void 0 : contextColor;
116
- var iconSize = (0, import_helpers_tamagui.getThemedIconSize)(sizeToken, scaleIcon);
117
114
  var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
118
- size: iconSize,
119
- color: iconColorProp
115
+ size: (0, import_helpers_tamagui.getThemedIconSize)((_ref = size !== null && size !== void 0 ? size : context.size) !== null && _ref !== void 0 ? _ref : true, scaleIcon),
116
+ color: context.color
120
117
  });
121
118
  return getThemedIcon(children);
122
119
  };
123
- var ListItemComponent = (0, import_web.createStyledHOC)(ListItemFrame, function ListItem(propsIn, ref) {
124
- var processedProps = (0, import_web.useProps)(propsIn, {
125
- noNormalize: true,
126
- noExpand: true
120
+ function useListItem(propsIn) {
121
+ var [wrappedTextProps, listItemProps] = (0, import_web.splitStyleProps)(propsIn, {
122
+ expandShorthands: true,
123
+ filter: import_text.textParentProps
127
124
  });
128
- var { children, icon, iconAfter, scaleIcon = 1, subTitle, title, iconSize, color, ...rest } = processedProps;
129
- var styledContext = context.useStyledContext();
130
- var _rest_size, _ref, _ref1;
131
- var size = (_ref1 = (_ref = (_rest_size = rest.size) !== null && _rest_size !== void 0 ? _rest_size : propsIn.size) !== null && _ref !== void 0 ? _ref : styledContext === null || styledContext === void 0 ? void 0 : styledContext.size) !== null && _ref1 !== void 0 ? _ref1 : true;
132
- var _ref2;
133
- var contextColor = (_ref2 = color !== null && color !== void 0 ? color : propsIn.color) !== null && _ref2 !== void 0 ? _ref2 : styledContext === null || styledContext === void 0 ? void 0 : styledContext.color;
134
- var iconColorProp = contextColor === "unset" || typeof contextColor === "number" ? void 0 : contextColor;
135
- var iconSizeNumber = (0, import_helpers_tamagui.getThemedIconSize)(iconSize !== null && iconSize !== void 0 ? iconSize : size, scaleIcon);
125
+ var { children, icon, iconAfter, iconSize, scaleIcon = 1, subTitle, title, ...frameProps } = listItemProps;
126
+ var { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;
127
+ var context = ListItemContext.useStyledContext();
128
+ var _ref, _ref1, _propsIn_color;
136
129
  var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
137
- size: iconSizeNumber,
138
- color: iconColorProp
130
+ 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),
131
+ color: (_propsIn_color = propsIn.color) !== null && _propsIn_color !== void 0 ? _propsIn_color : context.color
139
132
  });
140
- var themedIcon = icon ? getThemedIcon(icon) : null;
141
- var themedIconAfter = iconAfter ? getThemedIcon(iconAfter) : null;
142
- var wrappedChildren = (0, import_text.wrapChildrenInText)(ListItemText, { children }, { size });
143
- var _rest_variant, _ref3;
144
- var listItemContext = {
145
- ...styledContext,
146
- color: contextColor,
147
- size,
148
- variant: (_ref3 = (_rest_variant = rest.variant) !== null && _rest_variant !== void 0 ? _rest_variant : propsIn.variant) !== null && _ref3 !== void 0 ? _ref3 : styledContext === null || styledContext === void 0 ? void 0 : styledContext.variant
149
- };
150
- var frameProps = {
151
- size,
152
- variant: listItemContext.variant,
153
- ...rest
154
- };
155
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(context.Provider, {
156
- ...listItemContext,
157
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemFrame, {
158
- ref,
159
- ...frameProps,
160
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(context.Provider, {
161
- ...listItemContext,
133
+ var wrappedChildren = (0, import_text.wrapChildrenInText)(ListItemText, {
134
+ children,
135
+ noTextWrap,
136
+ textProps
137
+ }, textStyleProps);
138
+ return { props: {
139
+ ...frameProps,
140
+ color: propsIn.color,
141
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
142
+ icon ? getThemedIcon(icon) : null,
143
+ title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stacks.YStack, {
144
+ flex: 1,
162
145
  children: [
163
- themedIcon,
164
- title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stacks.YStack, {
165
- flex: 1,
166
- children: [
167
- title ? typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemTitle, {
168
- size,
169
- children: title
170
- }) : title : null,
171
- subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: typeof subTitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemSubtitle, {
172
- size,
173
- children: subTitle
174
- }) : subTitle }) : null,
175
- wrappedChildren
176
- ]
177
- }) : wrappedChildren,
178
- themedIconAfter
146
+ typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemTitle, {
147
+ ...textStyleProps,
148
+ ...textProps,
149
+ children: title
150
+ }) : title,
151
+ typeof subTitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemSubtitle, {
152
+ ...textStyleProps,
153
+ ...textProps,
154
+ children: subTitle
155
+ }) : subTitle,
156
+ wrappedChildren
179
157
  ]
180
- })
181
- })
182
- });
183
- });
184
- var ListItem2 = (0, import_helpers.withStaticProperties)(ListItemComponent, {
185
- Apply: context.Provider,
186
- Frame: ListItemFrame,
187
- Text: ListItemText,
188
- Subtitle: ListItemSubtitle,
189
- Icon: ListItemIcon,
190
- Title: ListItemTitle
191
- });
158
+ }) : wrappedChildren,
159
+ iconAfter ? getThemedIcon(iconAfter) : null
160
+ ] })
161
+ } };
162
+ }
package/dist/cjs/ListItem.native.js CHANGED
@@ -22,21 +22,25 @@ var __copyProps = (to, from, except, desc) => {
22
22
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
23
23
  var ListItem_exports = {};
24
24
  __export(ListItem_exports, {
25
- ListItem: () => ListItem2,
26
- listItemSizeVariant: () => listItemSizeVariant
25
+ ListItemContext: () => ListItemContext,
26
+ ListItemFrame: () => ListItemFrame,
27
+ ListItemIcon: () => ListItemIcon,
28
+ ListItemSubtitle: () => ListItemSubtitle,
29
+ ListItemText: () => ListItemText,
30
+ ListItemTitle: () => ListItemTitle,
31
+ listItemSizeVariant: () => listItemSizeVariant,
32
+ useListItem: () => useListItem
27
33
  });
28
34
  module.exports = __toCommonJS(ListItem_exports);
29
35
  var import_jsx_runtime = require("react/jsx-runtime");
30
36
  var import_get_font_sized = require("@tamagui/get-font-sized");
31
37
  var import_get_token = require("@tamagui/get-token");
32
- var import_helpers = require("@tamagui/helpers");
33
38
  var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
34
- var import_stacks = require("@tamagui/stacks");
35
39
  var import_size = require("@tamagui/size");
40
+ var import_stacks = require("@tamagui/stacks");
36
41
  var import_text = require("@tamagui/text");
37
42
  var import_web = require("@tamagui/web");
38
- var NAME = "ListItem";
39
- var context = (0, import_web.createStyledContext)({
43
+ var ListItemContext = (0, import_web.createStyledContext)({
40
44
  size: void 0,
41
45
  variant: void 0,
42
46
  color: void 0
@@ -60,10 +64,10 @@ var listItemSubtitleSizeVariant = function(val, extras) {
60
64
  return (0, import_get_font_sized.getFontSized)(oneSmaller, extras);
61
65
  };
62
66
  var ListItemFrame = (0, import_web.styled)(import_web.View, {
63
- context,
64
- displayName: NAME,
65
- render: "li",
67
+ context: ListItemContext,
68
+ displayName: "ListItemFrame",
66
69
  role: "listitem",
70
+ render: "li",
67
71
  size: true,
68
72
  alignItems: "center",
69
73
  justifyContent: "space-between",
@@ -81,7 +85,7 @@ var ListItemFrame = (0, import_web.styled)(import_web.View, {
81
85
  }
82
86
  });
83
87
  var ListItemText = (0, import_web.styled)(import_text.SizableText, {
84
- context,
88
+ context: ListItemContext,
85
89
  displayName: "ListItemText",
86
90
  size: true,
87
91
  flexGrow: 1,
@@ -90,8 +94,8 @@ var ListItemText = (0, import_web.styled)(import_text.SizableText, {
90
94
  cursor: "inherit"
91
95
  });
92
96
  var ListItemSubtitle = (0, import_web.styled)(ListItemText, {
97
+ context: ListItemContext,
93
98
  displayName: "ListItemSubtitle",
94
- context,
95
99
  opacity: .6,
96
100
  maxWidth: "100%",
97
101
  variants: { size: {
@@ -100,94 +104,61 @@ var ListItemSubtitle = (0, import_web.styled)(ListItemText, {
100
104
  } }
101
105
  });
102
106
  var ListItemTitle = (0, import_web.styled)(ListItemText, {
103
- displayName: "ListItemTitle",
104
- context
107
+ context: ListItemContext,
108
+ displayName: "ListItemTitle"
105
109
  });
106
- var ListItemIcon = function(props) {
107
- var { children, size, scaleIcon = 1 } = props;
108
- var styledContext = context.useStyledContext();
109
- if (!styledContext) {
110
- throw new Error("ListItem.Icon must be used within a ListItem");
111
- }
110
+ var ListItemIcon = function(param) {
111
+ var { children, size, scaleIcon = 1 } = param;
112
+ var context = ListItemContext.useStyledContext();
112
113
  var _ref;
113
- var sizeToken = (_ref = size !== null && size !== void 0 ? size : styledContext.size) !== null && _ref !== void 0 ? _ref : true;
114
- var contextColor = styledContext.color;
115
- var iconColorProp = contextColor === "unset" || typeof contextColor === "number" ? void 0 : contextColor;
116
- var iconSize = (0, import_helpers_tamagui.getThemedIconSize)(sizeToken, scaleIcon);
117
114
  var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
118
- size: iconSize,
119
- color: iconColorProp
115
+ size: (0, import_helpers_tamagui.getThemedIconSize)((_ref = size !== null && size !== void 0 ? size : context.size) !== null && _ref !== void 0 ? _ref : true, scaleIcon),
116
+ color: context.color
120
117
  });
121
118
  return getThemedIcon(children);
122
119
  };
123
- var ListItemComponent = (0, import_web.createStyledHOC)(ListItemFrame, function ListItem(propsIn, ref) {
124
- var processedProps = (0, import_web.useProps)(propsIn, {
125
- noNormalize: true,
126
- noExpand: true
120
+ function useListItem(propsIn) {
121
+ var [wrappedTextProps, listItemProps] = (0, import_web.splitStyleProps)(propsIn, {
122
+ expandShorthands: true,
123
+ filter: import_text.textParentProps
127
124
  });
128
- var { children, icon, iconAfter, scaleIcon = 1, subTitle, title, iconSize, color, ...rest } = processedProps;
129
- var styledContext = context.useStyledContext();
130
- var _rest_size, _ref, _ref1;
131
- var size = (_ref1 = (_ref = (_rest_size = rest.size) !== null && _rest_size !== void 0 ? _rest_size : propsIn.size) !== null && _ref !== void 0 ? _ref : styledContext === null || styledContext === void 0 ? void 0 : styledContext.size) !== null && _ref1 !== void 0 ? _ref1 : true;
132
- var _ref2;
133
- var contextColor = (_ref2 = color !== null && color !== void 0 ? color : propsIn.color) !== null && _ref2 !== void 0 ? _ref2 : styledContext === null || styledContext === void 0 ? void 0 : styledContext.color;
134
- var iconColorProp = contextColor === "unset" || typeof contextColor === "number" ? void 0 : contextColor;
135
- var iconSizeNumber = (0, import_helpers_tamagui.getThemedIconSize)(iconSize !== null && iconSize !== void 0 ? iconSize : size, scaleIcon);
125
+ var { children, icon, iconAfter, iconSize, scaleIcon = 1, subTitle, title, ...frameProps } = listItemProps;
126
+ var { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;
127
+ var context = ListItemContext.useStyledContext();
128
+ var _ref, _ref1, _propsIn_color;
136
129
  var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
137
- size: iconSizeNumber,
138
- color: iconColorProp
130
+ 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),
131
+ color: (_propsIn_color = propsIn.color) !== null && _propsIn_color !== void 0 ? _propsIn_color : context.color
139
132
  });
140
- var themedIcon = icon ? getThemedIcon(icon) : null;
141
- var themedIconAfter = iconAfter ? getThemedIcon(iconAfter) : null;
142
- var wrappedChildren = (0, import_text.wrapChildrenInText)(ListItemText, { children }, { size });
143
- var _rest_variant, _ref3;
144
- var listItemContext = {
145
- ...styledContext,
146
- color: contextColor,
147
- size,
148
- variant: (_ref3 = (_rest_variant = rest.variant) !== null && _rest_variant !== void 0 ? _rest_variant : propsIn.variant) !== null && _ref3 !== void 0 ? _ref3 : styledContext === null || styledContext === void 0 ? void 0 : styledContext.variant
149
- };
150
- var frameProps = {
151
- size,
152
- variant: listItemContext.variant,
153
- ...rest
154
- };
155
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(context.Provider, {
156
- ...listItemContext,
157
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemFrame, {
158
- ref,
159
- ...frameProps,
160
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(context.Provider, {
161
- ...listItemContext,
133
+ var wrappedChildren = (0, import_text.wrapChildrenInText)(ListItemText, {
134
+ children,
135
+ noTextWrap,
136
+ textProps
137
+ }, textStyleProps);
138
+ return { props: {
139
+ ...frameProps,
140
+ color: propsIn.color,
141
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
142
+ icon ? getThemedIcon(icon) : null,
143
+ title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stacks.YStack, {
144
+ flex: 1,
162
145
  children: [
163
- themedIcon,
164
- title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stacks.YStack, {
165
- flex: 1,
166
- children: [
167
- title ? typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemTitle, {
168
- size,
169
- children: title
170
- }) : title : null,
171
- subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: typeof subTitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemSubtitle, {
172
- size,
173
- children: subTitle
174
- }) : subTitle }) : null,
175
- wrappedChildren
176
- ]
177
- }) : wrappedChildren,
178
- themedIconAfter
146
+ typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemTitle, {
147
+ ...textStyleProps,
148
+ ...textProps,
149
+ children: title
150
+ }) : title,
151
+ typeof subTitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemSubtitle, {
152
+ ...textStyleProps,
153
+ ...textProps,
154
+ children: subTitle
155
+ }) : subTitle,
156
+ wrappedChildren
179
157
  ]
180
- })
181
- })
182
- });
183
- });
184
- var ListItem2 = (0, import_helpers.withStaticProperties)(ListItemComponent, {
185
- Apply: context.Provider,
186
- Frame: ListItemFrame,
187
- Text: ListItemText,
188
- Subtitle: ListItemSubtitle,
189
- Icon: ListItemIcon,
190
- Title: ListItemTitle
191
- });
158
+ }) : wrappedChildren,
159
+ iconAfter ? getThemedIcon(iconAfter) : null
160
+ ] })
161
+ } };
162
+ }
192
163
 
193
164
  //# sourceMappingURL=ListItem.native.js.map