@tamagui/list-item 1.0.1-beta.53 → 1.0.1-beta.56

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 (8) hide show
  1. package/dist/cjs/ListItem.js +19 -9
  2. package/dist/cjs/ListItem.js.map +2 -2
  3. package/dist/esm/ListItem.js +18 -8
  4. package/dist/esm/ListItem.js.map +2 -2
  5. package/dist/jsx/ListItem.js +18 -10
  6. package/package.json +5 -5
  7. package/types/ListItem.d.ts +89 -1
  8. package/types/ListItem.d.ts.map +1 -1
package/dist/cjs/ListItem.js CHANGED
@@ -72,8 +72,8 @@ const ListItemFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
72
72
  size: {
73
73
  "...size": (val, { tokens }) => {
74
74
  return {
75
- paddingVertical: (0, import_core.getSize)(val, -2),
76
- paddingHorizontal: tokens.size[val]
75
+ minHeight: tokens.size[val],
76
+ paddingHorizontal: tokens.space[val]
77
77
  };
78
78
  }
79
79
  },
@@ -105,7 +105,8 @@ const ListItemText = (0, import_core.styled)(import_text.SizableText, {
105
105
  ellipse: true
106
106
  });
107
107
  const ListItemSubtitle = (0, import_core.styled)(ListItemText, {
108
- color: "$colorPress"
108
+ color: "$colorPress",
109
+ size: "$3"
109
110
  });
110
111
  const ListItemComponent = (0, import_react.forwardRef)((props, ref) => {
111
112
  const _a = props, {
@@ -125,7 +126,8 @@ const ListItemComponent = (0, import_react.forwardRef)((props, ref) => {
125
126
  fontSize,
126
127
  fontFamily,
127
128
  textAlign,
128
- textProps
129
+ textProps,
130
+ title
129
131
  } = _a, rest = __objRest(_a, [
130
132
  "children",
131
133
  "icon",
@@ -143,10 +145,11 @@ const ListItemComponent = (0, import_react.forwardRef)((props, ref) => {
143
145
  "fontSize",
144
146
  "fontFamily",
145
147
  "textAlign",
146
- "textProps"
148
+ "textProps",
149
+ "title"
147
150
  ]);
148
151
  const size = props.size || "$4";
149
- const subtitleSizeToken = (0, import_core.getSize)(size, -2);
152
+ const subtitleSizeToken = (0, import_core.getSize)(size, -3);
150
153
  const subtitleSize = `$${subtitleSizeToken.key}`;
151
154
  const iconSize = (0, import_font_size.getFontSize)(size) * scaleIcon;
152
155
  const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
@@ -158,15 +161,18 @@ const ListItemComponent = (0, import_react.forwardRef)((props, ref) => {
158
161
  ref
159
162
  }, rest), themedIcon || themedIconAfter ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, themedIcon ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, themedIcon, /* @__PURE__ */ import_react.default.createElement(import_core.Spacer, {
160
163
  size: spaceSize
161
- })) : null, /* @__PURE__ */ import_react.default.createElement(import_stacks.YStack, null, contents, subTitle ? typeof subTitle === "string" ? /* @__PURE__ */ import_react.default.createElement(ListItemSubtitle, {
164
+ })) : null, !!(title || subTitle) && /* @__PURE__ */ import_react.default.createElement(import_stacks.YStack, {
165
+ flex: 1
166
+ }, /* @__PURE__ */ import_react.default.createElement(ListItemText, null, title), subTitle ? typeof subTitle === "string" ? /* @__PURE__ */ import_react.default.createElement(ListItemSubtitle, {
167
+ marginTop: "$-2",
162
168
  opacity: 0.65,
163
169
  size: subtitleSize
164
- }, subTitle) : subTitle : null), themedIconAfter ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_core.Spacer, {
170
+ }, subTitle) : subTitle : null), contents, themedIconAfter ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_core.Spacer, {
165
171
  flex: true,
166
172
  size: spaceSize
167
173
  }), themedIconAfter) : null) : contents);
168
174
  });
169
- const ListItem = ListItemFrame.extractable((0, import_core.themeable)(ListItemComponent), {
175
+ const ListItemInner = ListItemFrame.extractable((0, import_core.themeable)(ListItemComponent), {
170
176
  inlineProps: /* @__PURE__ */ new Set([
171
177
  "color",
172
178
  "fontWeight",
@@ -176,6 +182,10 @@ const ListItem = ListItemFrame.extractable((0, import_core.themeable)(ListItemCo
176
182
  "textAlign"
177
183
  ])
178
184
  });
185
+ const ListItem = (0, import_core.withStaticProperties)(ListItemInner, {
186
+ Text: ListItemText,
187
+ Subtitle: ListItemSubtitle
188
+ });
179
189
  // Annotate the CommonJS export names for ESM import in node:
180
190
  0 && (module.exports = {
181
191
  ListItem,
package/dist/cjs/ListItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ListItem.tsx"],
4
- "sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n ReactComponentWithRef,\n Spacer,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport {\n TextParentStyles,\n useGetThemedIcon,\n wrapStringChildrenInText,\n} from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n // add icon before, passes color and size automatically if Component\n icon?: IconProp\n // add icon after, passes color and size automatically if Component\n iconAfter?: IconProp\n // adjust icon relative to size\n // default: -1\n scaleIcon?: number\n // make the spacing elements flex\n spaceFlex?: number | boolean\n // adjust internal space relative to icon size\n scaleSpace?: number\n\n // subtitle\n subTitle?: React.ReactNode\n }\n\nconst ListItemFrame = styled(ThemeableStack, {\n name: 'ListItem',\n tag: 'li',\n alignItems: 'center',\n flexWrap: 'nowrap',\n width: '100%',\n borderColor: '$borderColor',\n maxWidth: '100%',\n overflow: 'hidden',\n flexDirection: 'row',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n paddingVertical: getSize(val, -2),\n paddingHorizontal: tokens.size[val],\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n false: {},\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n false: {},\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n color: '$color',\n selectable: false,\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n color: '$colorPress',\n})\n\nconst ListItemComponent = forwardRef((props: ListItemProps, ref) => {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 1,\n subTitle,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n ...rest\n } = props as ListItemProps\n\n const size = props.size || '$4'\n const subtitleSizeToken = getSize(size, -2)\n const subtitleSize = `$${subtitleSizeToken.key}` as FontSizeTokens\n const iconSize = getFontSize(size) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapStringChildrenInText(ListItemText, props)\n\n return (\n <ListItemFrame fontFamily={fontFamily} ref={ref as any} {...rest}>\n {themedIcon || themedIconAfter ? (\n <>\n {themedIcon ? (\n <>\n {themedIcon}\n <Spacer size={spaceSize} />\n </>\n ) : null}\n <YStack>\n {contents}\n {subTitle ? (\n typeof subTitle === 'string' ? (\n // TODO can use theme but we need to standardize to alt themes\n // or standardize on subtle colors in themes\n <ListItemSubtitle opacity={0.65} size={subtitleSize}>\n {subTitle}\n </ListItemSubtitle>\n ) : (\n subTitle\n )\n ) : null}\n </YStack>\n {themedIconAfter ? (\n <>\n <Spacer flex size={spaceSize} />\n {themedIconAfter}\n </>\n ) : null}\n </>\n ) : (\n contents\n )}\n </ListItemFrame>\n )\n})\n\nexport const ListItem: ReactComponentWithRef<ListItemProps, HTMLLIElement | View> =\n ListItemFrame.extractable(themeable(ListItemComponent as any) as any, {\n inlineProps: new Set([\n // text props go here (can't really optimize them, but we never fully extract listItem anyway)\n 'color',\n 'fontWeight',\n 'fontSize',\n 'fontFamily',\n 'letterSpacing',\n 'textAlign',\n ]),\n })\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n ReactComponentWithRef,\n Spacer,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport {\n TextParentStyles,\n useGetThemedIcon,\n wrapStringChildrenInText,\n} from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n // add icon before, passes color and size automatically if Component\n icon?: IconProp\n // add icon after, passes color and size automatically if Component\n iconAfter?: IconProp\n // adjust icon relative to size\n // default: -1\n scaleIcon?: number\n // make the spacing elements flex\n spaceFlex?: number | boolean\n // adjust internal space relative to icon size\n scaleSpace?: number\n // title\n title?: React.ReactNode\n // subtitle\n subTitle?: React.ReactNode\n }\n\nconst ListItemFrame = styled(ThemeableStack, {\n name: 'ListItem',\n tag: 'li',\n alignItems: 'center',\n flexWrap: 'nowrap',\n width: '100%',\n borderColor: '$borderColor',\n maxWidth: '100%',\n overflow: 'hidden',\n flexDirection: 'row',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n minHeight: tokens.size[val],\n paddingHorizontal: tokens.space[val],\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n false: {},\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n false: {},\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n color: '$color',\n selectable: false,\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n color: '$colorPress',\n size: '$3',\n})\n\nconst ListItemComponent = forwardRef((props: ListItemProps, ref) => {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 1,\n subTitle,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n title,\n ...rest\n } = props as ListItemProps\n\n const size = props.size || '$4'\n const subtitleSizeToken = getSize(size, -3)\n const subtitleSize = `$${subtitleSizeToken.key}` as FontSizeTokens\n const iconSize = getFontSize(size) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapStringChildrenInText(ListItemText, props)\n\n return (\n <ListItemFrame fontFamily={fontFamily} ref={ref as any} {...rest}>\n {themedIcon || themedIconAfter ? (\n <>\n {themedIcon ? (\n <>\n {themedIcon}\n <Spacer size={spaceSize} />\n </>\n ) : null}\n {/* helper for common title/subtitle pttern */}\n {!!(title || subTitle) && (\n <YStack flex={1}>\n <ListItemText>{title}</ListItemText>\n {subTitle ? (\n typeof subTitle === 'string' ? (\n // TODO can use theme but we need to standardize to alt themes\n // or standardize on subtle colors in themes\n <ListItemSubtitle marginTop=\"$-2\" opacity={0.65} size={subtitleSize}>\n {subTitle}\n </ListItemSubtitle>\n ) : (\n subTitle\n )\n ) : null}\n </YStack>\n )}\n {contents}\n {themedIconAfter ? (\n <>\n <Spacer flex size={spaceSize} />\n {themedIconAfter}\n </>\n ) : null}\n </>\n ) : (\n contents\n )}\n </ListItemFrame>\n )\n})\n\nconst ListItemInner: ReactComponentWithRef<ListItemProps, HTMLLIElement | View> =\n ListItemFrame.extractable(themeable(ListItemComponent as any) as any, {\n inlineProps: new Set([\n // text props go here (can't really optimize them, but we never fully extract listItem anyway)\n 'color',\n 'fontWeight',\n 'fontSize',\n 'fontFamily',\n 'letterSpacing',\n 'textAlign',\n ]),\n })\n\nexport const ListItem = withStaticProperties(ListItemInner, {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n})\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/ListItem.js CHANGED
@@ -3,7 +3,8 @@ import {
3
3
  getSize,
4
4
  getVariableValue,
5
5
  styled,
6
- themeable
6
+ themeable,
7
+ withStaticProperties
7
8
  } from "@tamagui/core";
8
9
  import { getFontSize } from "@tamagui/font-size";
9
10
  import {
@@ -28,8 +29,8 @@ const ListItemFrame = styled(ThemeableStack, {
28
29
  size: {
29
30
  "...size": (val, { tokens }) => {
30
31
  return {
31
- paddingVertical: getSize(val, -2),
32
- paddingHorizontal: tokens.size[val]
32
+ minHeight: tokens.size[val],
33
+ paddingHorizontal: tokens.space[val]
33
34
  };
34
35
  }
35
36
  },
@@ -61,7 +62,8 @@ const ListItemText = styled(SizableText, {
61
62
  ellipse: true
62
63
  });
63
64
  const ListItemSubtitle = styled(ListItemText, {
64
- color: "$colorPress"
65
+ color: "$colorPress",
66
+ size: "$3"
65
67
  });
66
68
  const ListItemComponent = forwardRef((props, ref) => {
67
69
  const {
@@ -82,10 +84,11 @@ const ListItemComponent = forwardRef((props, ref) => {
82
84
  fontFamily,
83
85
  textAlign,
84
86
  textProps,
87
+ title,
85
88
  ...rest
86
89
  } = props;
87
90
  const size = props.size || "$4";
88
- const subtitleSizeToken = getSize(size, -2);
91
+ const subtitleSizeToken = getSize(size, -3);
89
92
  const subtitleSize = `$${subtitleSizeToken.key}`;
90
93
  const iconSize = getFontSize(size) * scaleIcon;
91
94
  const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
@@ -98,15 +101,18 @@ const ListItemComponent = forwardRef((props, ref) => {
98
101
  ...rest
99
102
  }, themedIcon || themedIconAfter ? /* @__PURE__ */ React.createElement(React.Fragment, null, themedIcon ? /* @__PURE__ */ React.createElement(React.Fragment, null, themedIcon, /* @__PURE__ */ React.createElement(Spacer, {
100
103
  size: spaceSize
101
- })) : null, /* @__PURE__ */ React.createElement(YStack, null, contents, subTitle ? typeof subTitle === "string" ? /* @__PURE__ */ React.createElement(ListItemSubtitle, {
104
+ })) : null, !!(title || subTitle) && /* @__PURE__ */ React.createElement(YStack, {
105
+ flex: 1
106
+ }, /* @__PURE__ */ React.createElement(ListItemText, null, title), subTitle ? typeof subTitle === "string" ? /* @__PURE__ */ React.createElement(ListItemSubtitle, {
107
+ marginTop: "$-2",
102
108
  opacity: 0.65,
103
109
  size: subtitleSize
104
- }, subTitle) : subTitle : null), themedIconAfter ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Spacer, {
110
+ }, subTitle) : subTitle : null), contents, themedIconAfter ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Spacer, {
105
111
  flex: true,
106
112
  size: spaceSize
107
113
  }), themedIconAfter) : null) : contents);
108
114
  });
109
- const ListItem = ListItemFrame.extractable(themeable(ListItemComponent), {
115
+ const ListItemInner = ListItemFrame.extractable(themeable(ListItemComponent), {
110
116
  inlineProps: /* @__PURE__ */ new Set([
111
117
  "color",
112
118
  "fontWeight",
@@ -116,6 +122,10 @@ const ListItem = ListItemFrame.extractable(themeable(ListItemComponent), {
116
122
  "textAlign"
117
123
  ])
118
124
  });
125
+ const ListItem = withStaticProperties(ListItemInner, {
126
+ Text: ListItemText,
127
+ Subtitle: ListItemSubtitle
128
+ });
119
129
  export {
120
130
  ListItem,
121
131
  ListItemSubtitle,
package/dist/esm/ListItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ListItem.tsx"],
4
- "sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n ReactComponentWithRef,\n Spacer,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport {\n TextParentStyles,\n useGetThemedIcon,\n wrapStringChildrenInText,\n} from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n // add icon before, passes color and size automatically if Component\n icon?: IconProp\n // add icon after, passes color and size automatically if Component\n iconAfter?: IconProp\n // adjust icon relative to size\n // default: -1\n scaleIcon?: number\n // make the spacing elements flex\n spaceFlex?: number | boolean\n // adjust internal space relative to icon size\n scaleSpace?: number\n\n // subtitle\n subTitle?: React.ReactNode\n }\n\nconst ListItemFrame = styled(ThemeableStack, {\n name: 'ListItem',\n tag: 'li',\n alignItems: 'center',\n flexWrap: 'nowrap',\n width: '100%',\n borderColor: '$borderColor',\n maxWidth: '100%',\n overflow: 'hidden',\n flexDirection: 'row',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n paddingVertical: getSize(val, -2),\n paddingHorizontal: tokens.size[val],\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n false: {},\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n false: {},\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n color: '$color',\n selectable: false,\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n color: '$colorPress',\n})\n\nconst ListItemComponent = forwardRef((props: ListItemProps, ref) => {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 1,\n subTitle,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n ...rest\n } = props as ListItemProps\n\n const size = props.size || '$4'\n const subtitleSizeToken = getSize(size, -2)\n const subtitleSize = `$${subtitleSizeToken.key}` as FontSizeTokens\n const iconSize = getFontSize(size) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapStringChildrenInText(ListItemText, props)\n\n return (\n <ListItemFrame fontFamily={fontFamily} ref={ref as any} {...rest}>\n {themedIcon || themedIconAfter ? (\n <>\n {themedIcon ? (\n <>\n {themedIcon}\n <Spacer size={spaceSize} />\n </>\n ) : null}\n <YStack>\n {contents}\n {subTitle ? (\n typeof subTitle === 'string' ? (\n // TODO can use theme but we need to standardize to alt themes\n // or standardize on subtle colors in themes\n <ListItemSubtitle opacity={0.65} size={subtitleSize}>\n {subTitle}\n </ListItemSubtitle>\n ) : (\n subTitle\n )\n ) : null}\n </YStack>\n {themedIconAfter ? (\n <>\n <Spacer flex size={spaceSize} />\n {themedIconAfter}\n </>\n ) : null}\n </>\n ) : (\n contents\n )}\n </ListItemFrame>\n )\n})\n\nexport const ListItem: ReactComponentWithRef<ListItemProps, HTMLLIElement | View> =\n ListItemFrame.extractable(themeable(ListItemComponent as any) as any, {\n inlineProps: new Set([\n // text props go here (can't really optimize them, but we never fully extract listItem anyway)\n 'color',\n 'fontWeight',\n 'fontSize',\n 'fontFamily',\n 'letterSpacing',\n 'textAlign',\n ]),\n })\n"],
5
- "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AACA;AAAA;AAAA;AAAA;AAKA;AACA;AACA;AAIA,MAAM;AAwBN,MAAM,gBAAgB,OAAO,gBAAgB;AAAA,EAC3C,MAAM;AAAA,EACN,KAAK;AAAA,EACL,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,eAAe;AAAA,EAEf,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,iBAAiB,QAAQ,KAAK,EAAE;AAAA,UAChC,mBAAmB,OAAO,KAAK;AAAA,QACjC;AAAA,MACF;AAAA,IACF;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,MACA,OAAO,CAAC;AAAA,IACV;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAAS;AAAA,QAET,eAAe;AAAA,MACjB;AAAA,MACA,OAAO,CAAC;AAAA,IACV;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,eAAe,OAAO,aAAa;AAAA,EAC9C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAEM,MAAM,mBAAmB,OAAO,cAAc;AAAA,EACnD,OAAO;AACT,CAAC;AAED,MAAM,oBAAoB,WAAW,CAAC,OAAsB,QAAQ;AAElE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,MACD;AAEJ,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM,oBAAoB,QAAQ,MAAM,EAAE;AAC1C,QAAM,eAAe,IAAI,kBAAkB;AAC3C,QAAM,WAAW,YAAY,IAAI,IAAI;AACrC,QAAM,gBAAgB,iBAAiB,EAAE,MAAM,UAAU,MAAM,CAAC;AAChE,QAAM,CAAC,YAAY,mBAAmB,CAAC,MAAM,SAAS,EAAE,IAAI,aAAa;AACzE,QAAM,YAAY,iBAAiB,QAAQ,IAAI;AAC/C,QAAM,WAAW,yBAAyB,cAAc,KAAK;AAE7D,SACE,oCAAC;AAAA,IAAc;AAAA,IAAwB;AAAA,IAAkB,GAAG;AAAA,KACzD,cAAc,kBACb,0DACG,aACC,0DACG,YACD,oCAAC;AAAA,IAAO,MAAM;AAAA,GAAW,CAC3B,IACE,MACJ,oCAAC,cACE,UACA,WACC,OAAO,aAAa,WAGlB,oCAAC;AAAA,IAAiB,SAAS;AAAA,IAAM,MAAM;AAAA,KACpC,QACH,IAEA,WAEA,IACN,GACC,kBACC,0DACE,oCAAC;AAAA,IAAO,MAAI;AAAA,IAAC,MAAM;AAAA,GAAW,GAC7B,eACH,IACE,IACN,IAEA,QAEJ;AAEJ,CAAC;AAEM,MAAM,WACX,cAAc,YAAY,UAAU,iBAAwB,GAAU;AAAA,EACpE,aAAa,oBAAI,IAAI;AAAA,IAEnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH,CAAC;",
4
+ "sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n ReactComponentWithRef,\n Spacer,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport {\n TextParentStyles,\n useGetThemedIcon,\n wrapStringChildrenInText,\n} from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n // add icon before, passes color and size automatically if Component\n icon?: IconProp\n // add icon after, passes color and size automatically if Component\n iconAfter?: IconProp\n // adjust icon relative to size\n // default: -1\n scaleIcon?: number\n // make the spacing elements flex\n spaceFlex?: number | boolean\n // adjust internal space relative to icon size\n scaleSpace?: number\n // title\n title?: React.ReactNode\n // subtitle\n subTitle?: React.ReactNode\n }\n\nconst ListItemFrame = styled(ThemeableStack, {\n name: 'ListItem',\n tag: 'li',\n alignItems: 'center',\n flexWrap: 'nowrap',\n width: '100%',\n borderColor: '$borderColor',\n maxWidth: '100%',\n overflow: 'hidden',\n flexDirection: 'row',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n minHeight: tokens.size[val],\n paddingHorizontal: tokens.space[val],\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n false: {},\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n false: {},\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n color: '$color',\n selectable: false,\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n color: '$colorPress',\n size: '$3',\n})\n\nconst ListItemComponent = forwardRef((props: ListItemProps, ref) => {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 1,\n subTitle,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n title,\n ...rest\n } = props as ListItemProps\n\n const size = props.size || '$4'\n const subtitleSizeToken = getSize(size, -3)\n const subtitleSize = `$${subtitleSizeToken.key}` as FontSizeTokens\n const iconSize = getFontSize(size) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapStringChildrenInText(ListItemText, props)\n\n return (\n <ListItemFrame fontFamily={fontFamily} ref={ref as any} {...rest}>\n {themedIcon || themedIconAfter ? (\n <>\n {themedIcon ? (\n <>\n {themedIcon}\n <Spacer size={spaceSize} />\n </>\n ) : null}\n {/* helper for common title/subtitle pttern */}\n {!!(title || subTitle) && (\n <YStack flex={1}>\n <ListItemText>{title}</ListItemText>\n {subTitle ? (\n typeof subTitle === 'string' ? (\n // TODO can use theme but we need to standardize to alt themes\n // or standardize on subtle colors in themes\n <ListItemSubtitle marginTop=\"$-2\" opacity={0.65} size={subtitleSize}>\n {subTitle}\n </ListItemSubtitle>\n ) : (\n subTitle\n )\n ) : null}\n </YStack>\n )}\n {contents}\n {themedIconAfter ? (\n <>\n <Spacer flex size={spaceSize} />\n {themedIconAfter}\n </>\n ) : null}\n </>\n ) : (\n contents\n )}\n </ListItemFrame>\n )\n})\n\nconst ListItemInner: ReactComponentWithRef<ListItemProps, HTMLLIElement | View> =\n ListItemFrame.extractable(themeable(ListItemComponent as any) as any, {\n inlineProps: new Set([\n // text props go here (can't really optimize them, but we never fully extract listItem anyway)\n 'color',\n 'fontWeight',\n 'fontSize',\n 'fontFamily',\n 'letterSpacing',\n 'textAlign',\n ]),\n })\n\nexport const ListItem = withStaticProperties(ListItemInner, {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n})\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/jsx/ListItem.js CHANGED
@@ -3,7 +3,8 @@ import {
3
3
  getSize,
4
4
  getVariableValue,
5
5
  styled,
6
- themeable
6
+ themeable,
7
+ withStaticProperties
7
8
  } from "@tamagui/core";
8
9
  import { getFontSize } from "@tamagui/font-size";
9
10
  import {
@@ -28,8 +29,8 @@ const ListItemFrame = styled(ThemeableStack, {
28
29
  size: {
29
30
  "...size": (val, { tokens }) => {
30
31
  return {
31
- paddingVertical: getSize(val, -2),
32
- paddingHorizontal: tokens.size[val]
32
+ minHeight: tokens.size[val],
33
+ paddingHorizontal: tokens.space[val]
33
34
  };
34
35
  }
35
36
  },
@@ -61,7 +62,8 @@ const ListItemText = styled(SizableText, {
61
62
  ellipse: true
62
63
  });
63
64
  const ListItemSubtitle = styled(ListItemText, {
64
- color: "$colorPress"
65
+ color: "$colorPress",
66
+ size: "$3"
65
67
  });
66
68
  const ListItemComponent = forwardRef((props, ref) => {
67
69
  const {
@@ -82,10 +84,11 @@ const ListItemComponent = forwardRef((props, ref) => {
82
84
  fontFamily,
83
85
  textAlign,
84
86
  textProps,
87
+ title,
85
88
  ...rest
86
89
  } = props;
87
90
  const size = props.size || "$4";
88
- const subtitleSizeToken = getSize(size, -2);
91
+ const subtitleSizeToken = getSize(size, -3);
89
92
  const subtitleSize = `$${subtitleSizeToken.key}`;
90
93
  const iconSize = getFontSize(size) * scaleIcon;
91
94
  const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
@@ -97,17 +100,18 @@ const ListItemComponent = forwardRef((props, ref) => {
97
100
  {themedIcon}
98
101
  <Spacer size={spaceSize} />
99
102
  </> : null}
100
- <YStack>
101
- {contents}
102
- {subTitle ? typeof subTitle === "string" ? <ListItemSubtitle opacity={0.65} size={subtitleSize}>{subTitle}</ListItemSubtitle> : subTitle : null}
103
- </YStack>
103
+ {!!(title || subTitle) && <YStack flex={1}>
104
+ <ListItemText>{title}</ListItemText>
105
+ {subTitle ? typeof subTitle === "string" ? <ListItemSubtitle marginTop="$-2" opacity={0.65} size={subtitleSize}>{subTitle}</ListItemSubtitle> : subTitle : null}
106
+ </YStack>}
107
+ {contents}
104
108
  {themedIconAfter ? <>
105
109
  <Spacer flex size={spaceSize} />
106
110
  {themedIconAfter}
107
111
  </> : null}
108
112
  </> : contents}</ListItemFrame>;
109
113
  });
110
- const ListItem = ListItemFrame.extractable(themeable(ListItemComponent), {
114
+ const ListItemInner = ListItemFrame.extractable(themeable(ListItemComponent), {
111
115
  inlineProps: /* @__PURE__ */ new Set([
112
116
  "color",
113
117
  "fontWeight",
@@ -117,6 +121,10 @@ const ListItem = ListItemFrame.extractable(themeable(ListItemComponent), {
117
121
  "textAlign"
118
122
  ])
119
123
  });
124
+ const ListItem = withStaticProperties(ListItemInner, {
125
+ Text: ListItemText,
126
+ Subtitle: ListItemSubtitle
127
+ });
120
128
  export {
121
129
  ListItem,
122
130
  ListItemSubtitle,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/list-item",
3
- "version": "1.0.1-beta.53",
3
+ "version": "1.0.1-beta.56",
4
4
  "sideEffects": false,
5
5
  "source": "src/index.ts",
6
6
  "types": "./types/index.d.ts",
@@ -16,16 +16,16 @@
16
16
  "watch": "tamagui-build --watch"
17
17
  },
18
18
  "dependencies": {
19
- "@tamagui/core": "^1.0.1-beta.53",
20
- "@tamagui/font-size": "^1.0.1-beta.53",
21
- "@tamagui/helpers-tamagui": "^1.0.1-beta.53"
19
+ "@tamagui/core": "^1.0.1-beta.56",
20
+ "@tamagui/font-size": "^1.0.1-beta.56",
21
+ "@tamagui/helpers-tamagui": "^1.0.1-beta.56"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "react": "*",
25
25
  "react-dom": "*"
26
26
  },
27
27
  "devDependencies": {
28
- "@tamagui/build": "^1.0.1-beta.53",
28
+ "@tamagui/build": "^1.0.1-beta.56",
29
29
  "react": "*",
30
30
  "react-dom": "*"
31
31
  },
package/types/ListItem.d.ts CHANGED
@@ -13,6 +13,7 @@ export declare type ListItemProps = Omit<TextParentStyles, 'TextComponent'> & Ge
13
13
  scaleIcon?: number;
14
14
  spaceFlex?: number | boolean;
15
15
  scaleSpace?: number;
16
+ title?: React.ReactNode;
16
17
  subTitle?: React.ReactNode;
17
18
  };
18
19
  declare const ListItemFrame: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
@@ -182,6 +183,93 @@ export declare const ListItemSubtitle: import("@tamagui/core").TamaguiComponent<
182
183
  } | {
183
184
  [x: string]: undefined;
184
185
  })>;
185
- export declare const ListItem: ReactComponentWithRef<ListItemProps, HTMLLIElement | View>;
186
+ export declare const ListItem: ReactComponentWithRef<ListItemProps, View | HTMLLIElement> & {
187
+ Text: import("@tamagui/core").TamaguiComponent<(Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{}, "size"> & {
188
+ size?: FontSizeTokens | undefined;
189
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{}, "size"> & {
190
+ size?: FontSizeTokens | undefined;
191
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{}, "size"> & {
192
+ size?: FontSizeTokens | undefined;
193
+ }>>) | (Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
194
+ size?: FontSizeTokens | undefined;
195
+ }, string | number> & {
196
+ [x: string]: undefined;
197
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
198
+ size?: FontSizeTokens | undefined;
199
+ }, string | number> & {
200
+ [x: string]: undefined;
201
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
202
+ size?: FontSizeTokens | undefined;
203
+ }, string | number> & {
204
+ [x: string]: undefined;
205
+ }>>), any, import("@tamagui/core").TextPropsBase, {
206
+ size?: FontSizeTokens | undefined;
207
+ } & ({} | {
208
+ [x: string]: undefined;
209
+ })>;
210
+ Subtitle: import("@tamagui/core").TamaguiComponent<(Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{}, "size"> & {
211
+ size?: FontSizeTokens | undefined;
212
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{}, "size"> & {
213
+ size?: FontSizeTokens | undefined;
214
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{}, "size"> & {
215
+ size?: FontSizeTokens | undefined;
216
+ }>>) | (Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
217
+ size?: FontSizeTokens | undefined;
218
+ }, string | number> & {
219
+ [x: string]: undefined;
220
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
221
+ size?: FontSizeTokens | undefined;
222
+ }, string | number> & {
223
+ [x: string]: undefined;
224
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
225
+ size?: FontSizeTokens | undefined;
226
+ }, string | number> & {
227
+ [x: string]: undefined;
228
+ }>>) | (Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
229
+ size?: FontSizeTokens | undefined;
230
+ } & ({} | {
231
+ [x: string]: undefined;
232
+ }), string | number> & {
233
+ [x: string]: undefined;
234
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
235
+ size?: FontSizeTokens | undefined;
236
+ } & ({} | {
237
+ [x: string]: undefined;
238
+ }), string | number> & {
239
+ [x: string]: undefined;
240
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
241
+ size?: FontSizeTokens | undefined;
242
+ } & ({} | {
243
+ [x: string]: undefined;
244
+ }), string | number> & {
245
+ [x: string]: undefined;
246
+ }>>) | (Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
247
+ size?: FontSizeTokens | undefined;
248
+ } & ({} | {
249
+ [x: string]: undefined;
250
+ }), string | number> & {
251
+ [x: string]: undefined;
252
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
253
+ size?: FontSizeTokens | undefined;
254
+ } & ({} | {
255
+ [x: string]: undefined;
256
+ }), string | number> & {
257
+ [x: string]: undefined;
258
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
259
+ size?: FontSizeTokens | undefined;
260
+ } & ({} | {
261
+ [x: string]: undefined;
262
+ }), string | number> & {
263
+ [x: string]: undefined;
264
+ }>>), any, import("@tamagui/core").TextPropsBase, ({
265
+ size?: FontSizeTokens | undefined;
266
+ } & ({} | {
267
+ [x: string]: undefined;
268
+ })) & ({} | {
269
+ [x: string]: undefined;
270
+ } | {
271
+ [x: string]: undefined;
272
+ })>;
273
+ };
186
274
  export {};
187
275
  //# sourceMappingURL=ListItem.d.ts.map
package/types/ListItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../src/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,QAAQ,EACR,qBAAqB,EAErB,cAAc,EAKf,MAAM,eAAe,CAAA;AAEtB,OAAO,EACL,gBAAgB,EAGjB,MAAM,0BAA0B,CAAA;AAGjC,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAKnC,aAAK,iBAAiB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAC1D,aAAK,QAAQ,GAAG,GAAG,CAAC,OAAO,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAA;AAEzE,oBAAY,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,eAAe,CAAC,GACjE,QAAQ,CAAC,OAAO,aAAa,CAAC,GAC9B,cAAc,GAAG;IAEf,IAAI,CAAC,EAAE,QAAQ,CAAA;IAEf,SAAS,CAAC,EAAE,QAAQ,CAAA;IAGpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAE5B,UAAU,CAAC,EAAE,MAAM,CAAA;IAGnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAEH,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CjB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;GAMvB,CAAA;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAE3B,CAAA;AA0EF,eAAO,MAAM,QAAQ,EAAE,qBAAqB,CAAC,aAAa,EAAE,aAAa,GAAG,IAAI,CAW5E,CAAA"}
1
+ {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../src/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,QAAQ,EACR,qBAAqB,EAErB,cAAc,EAMf,MAAM,eAAe,CAAA;AAEtB,OAAO,EACL,gBAAgB,EAGjB,MAAM,0BAA0B,CAAA;AAGjC,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAKnC,aAAK,iBAAiB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAC1D,aAAK,QAAQ,GAAG,GAAG,CAAC,OAAO,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAA;AAEzE,oBAAY,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,eAAe,CAAC,GACjE,QAAQ,CAAC,OAAO,aAAa,CAAC,GAC9B,cAAc,GAAG;IAEf,IAAI,CAAC,EAAE,QAAQ,CAAA;IAEf,SAAS,CAAC,EAAE,QAAQ,CAAA;IAGpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAE5B,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAEH,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CjB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;GAMvB,CAAA;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAG3B,CAAA;AA4FF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGnB,CAAA"}