@tamagui/list-item 1.0.1-beta.217 → 1.0.1-beta.219

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.
@@ -173,7 +173,6 @@ const useListItem = (props, {
173
173
  themedIconAfter ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
174
174
  children: [
175
175
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Spacer, {
176
- flex: true,
177
176
  size: spaceSize
178
177
  }),
179
178
  themedIconAfter
@@ -188,6 +187,7 @@ const ListItemComponent = (0, import_react.forwardRef)((props, ref) => {
188
187
  const { props: listItemProps } = useListItem(props);
189
188
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemFrame, {
190
189
  ref,
190
+ justifyContent: "space-between",
191
191
  ...listItemProps
192
192
  });
193
193
  });
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ListItem.tsx"],
4
- "sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiElement,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSpace, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\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' | 'noTextWrap'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n /**\n * title\n */\n title?: React.ReactNode\n /**\n * subtitle\n */\n subTitle?: React.ReactNode\n /**\n * will not wrap text around `children` only, \"all\" will not wrap title or subTitle\n */\n noTextWrap?: boolean | 'all'\n }\n\nexport const 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 paddingVertical: getSpace(val, -2),\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n name: 'ListItemText',\n color: '$color',\n userSelect: 'none',\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n cursor: 'default',\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n name: 'ListItemSubtitle',\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n maxWidth: '100%',\n size: '$3',\n})\n\nexport const ListItemTitle = styled(ListItemText, {\n name: 'ListItemTitle',\n})\n\nexport const useListItem = (\n props: ListItemProps,\n {\n Text = ListItemText,\n Subtitle = ListItemSubtitle,\n Title = ListItemTitle,\n }: {\n Title?: any\n Subtitle?: any\n Text?: any\n } = { Text: ListItemText, Subtitle: ListItemSubtitle, Title: ListItemTitle }\n) => {\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\n\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.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 // @ts-ignore noTextWrap = all is ok\n const contents = wrapChildrenInText(Text, mediaActiveProps)\n\n return {\n props: {\n fontFamily,\n ...rest,\n children: (\n <>\n {themedIcon ? (\n <>\n {themedIcon}\n <Spacer size={spaceSize} />\n </>\n ) : null}\n {/* helper for common title/subtitle pttern */}\n {Boolean(title || subTitle) ? (\n <YStack flex={1}>\n {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n {subTitle ? (\n <>\n <Spacer flex size={spaceSize * 0.333} />\n {typeof subTitle === 'string' && noTextWrap !== 'all' ? (\n // TODO can use theme but we need to standardize to alt themes\n // or standardize on subtle colors in themes\n <Subtitle size={subtitleSize}>{subTitle}</Subtitle>\n ) : (\n subTitle\n )}\n </>\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer flex size={spaceSize} />\n {themedIconAfter}\n </>\n ) : null}\n </>\n ),\n },\n }\n}\n\nconst ListItemComponent = forwardRef<TamaguiElement, ListItemProps>((props, ref) => {\n const { props: listItemProps } = useListItem(props)\n return <ListItemFrame ref={ref} {...listItemProps} />\n})\n\nexport const listItemStaticConfig = {\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(\n ListItemFrame.extractable(themeable(ListItemComponent), listItemStaticConfig),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\n)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiElement,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSpace, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\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' | 'noTextWrap'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n /**\n * title\n */\n title?: React.ReactNode\n /**\n * subtitle\n */\n subTitle?: React.ReactNode\n /**\n * will not wrap text around `children` only, \"all\" will not wrap title or subTitle\n */\n noTextWrap?: boolean | 'all'\n }\n\nexport const 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 paddingVertical: getSpace(val, -2),\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n name: 'ListItemText',\n color: '$color',\n userSelect: 'none',\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n cursor: 'default',\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n name: 'ListItemSubtitle',\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n maxWidth: '100%',\n size: '$3',\n})\n\nexport const ListItemTitle = styled(ListItemText, {\n name: 'ListItemTitle',\n})\n\nexport const useListItem = (\n props: ListItemProps,\n {\n Text = ListItemText,\n Subtitle = ListItemSubtitle,\n Title = ListItemTitle,\n }: {\n Title?: any\n Subtitle?: any\n Text?: any\n } = { Text: ListItemText, Subtitle: ListItemSubtitle, Title: ListItemTitle }\n) => {\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\n\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.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 // @ts-ignore noTextWrap = all is ok\n const contents = wrapChildrenInText(Text, mediaActiveProps)\n\n return {\n props: {\n fontFamily,\n ...rest,\n children: (\n <>\n {themedIcon ? (\n <>\n {themedIcon}\n <Spacer size={spaceSize} />\n </>\n ) : null}\n {/* helper for common title/subtitle pttern */}\n {Boolean(title || subTitle) ? (\n <YStack flex={1}>\n {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n {subTitle ? (\n <>\n <Spacer flex size={spaceSize * 0.333} />\n {typeof subTitle === 'string' && noTextWrap !== 'all' ? (\n // TODO can use theme but we need to standardize to alt themes\n // or standardize on subtle colors in themes\n <Subtitle size={subtitleSize}>{subTitle}</Subtitle>\n ) : (\n subTitle\n )}\n </>\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer size={spaceSize} />\n {themedIconAfter}\n </>\n ) : null}\n </>\n ),\n },\n }\n}\n\nconst ListItemComponent = forwardRef<TamaguiElement, ListItemProps>((props, ref) => {\n const { props: listItemProps } = useListItem(props)\n return <ListItemFrame ref={ref} justifyContent=\"space-between\" {...listItemProps} />\n})\n\nexport const listItemStaticConfig = {\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(\n ListItemFrame.extractable(themeable(ListItemComponent), listItemStaticConfig),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\n)\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2LY;AA3LZ,kBAYO;AACP,uBAA4B;AAC5B,6BAA2C;AAC3C,oBAAuC;AACvC,kBAAkE;AAClE,mBAAqD;AAGrD,aAAAA,QAAM;AA6CC,MAAM,oBAAgB,oBAAO,8BAAgB;AAAA,EAClD,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,OAAO,MAAM;AAC9B,eAAO;AAAA,UACL,WAAW,OAAO,KAAK;AAAA,UACvB,mBAAmB,OAAO,MAAM;AAAA,UAChC,qBAAiB,iCAAS,KAAK,EAAE;AAAA,QACnC;AAAA,MACF;AAAA,IACF;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAAS;AAAA,QAET,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,mBAAe,oBAAO,yBAAa;AAAA,EAC9C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,QAAQ;AACV,CAAC;AAEM,MAAM,uBAAmB,oBAAO,cAAc;AAAA,EACnD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AACR,CAAC;AAEM,MAAM,oBAAgB,oBAAO,cAAc;AAAA,EAChD,MAAM;AACR,CAAC;AAEM,MAAM,cAAc,CACzB,OACA;AAAA,EACE,OAAO;AAAA,EACP,WAAW;AAAA,EACX,QAAQ;AACV,IAII,EAAE,MAAM,cAAc,UAAU,kBAAkB,OAAO,cAAc,MACxE;AAEH,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,IACA;AAAA,OACG;AAAA,EACL,IAAI;AAEJ,QAAM,uBAAmB,iCAAoB,KAAK;AAClD,QAAM,OAAO,iBAAiB,QAAQ;AACtC,QAAM,wBAAoB,qBAAQ,MAAM,EAAE;AAC1C,QAAM,eAAe,IAAI,kBAAkB;AAC3C,QAAM,eAAW,8BAAY,IAAI,IAAI;AACrC,QAAM,oBAAgB,yCAAiB,EAAE,MAAM,UAAU,MAAM,CAAC;AAChE,QAAM,CAAC,YAAY,eAAe,IAAI,CAAC,MAAM,SAAS,EAAE,IAAI,aAAa;AACzE,QAAM,gBAAY,8BAAiB,QAAQ,IAAI;AAE/C,QAAM,eAAW,gCAAmB,MAAM,gBAAgB;AAE1D,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,GAAG;AAAA,MACH,UACE;AAAA,QACG;AAAA,uBACC;AAAA,YACG;AAAA;AAAA,cACD,4CAAC;AAAA,gBAAO,MAAM;AAAA,eAAW;AAAA;AAAA,WAC3B,IACE;AAAA,UAEH,QAAQ,SAAS,QAAQ,IACxB,6CAAC;AAAA,YAAO,MAAM;AAAA,YACX;AAAA,6BAAe,QAAQ,QAAQ,4CAAC;AAAA,gBAAM;AAAA,gBAAa;AAAA,eAAM;AAAA,cACzD,WACC;AAAA,gBACE;AAAA,8DAAC;AAAA,oBAAO,MAAI;AAAA,oBAAC,MAAM,YAAY;AAAA,mBAAO;AAAA,kBACrC,OAAO,aAAa,YAAY,eAAe,QAG9C,4CAAC;AAAA,oBAAS,MAAM;AAAA,oBAAe;AAAA,mBAAS,IAExC;AAAA;AAAA,eAEJ,IACE;AAAA,cACH;AAAA;AAAA,WACH,IAEA;AAAA,UAED,kBACC;AAAA,YACE;AAAA,0DAAC;AAAA,gBAAO,MAAM;AAAA,eAAW;AAAA,cACxB;AAAA;AAAA,WACH,IACE;AAAA;AAAA,OACN;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,MAAM,wBAAoB,yBAA0C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,OAAO,cAAc,IAAI,YAAY,KAAK;AAClD,SAAO,4CAAC;AAAA,IAAc;AAAA,IAAU,gBAAe;AAAA,IAAiB,GAAG;AAAA,GAAe;AACpF,CAAC;AAEM,MAAM,uBAAuB;AAAA,EAClC,aAAa,oBAAI,IAAI;AAAA,IAEnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAEO,MAAM,eAAW;AAAA,EACtB,cAAc,gBAAY,uBAAU,iBAAiB,GAAG,oBAAoB;AAAA,EAC5E;AAAA,IACE,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF;",
6
6
  "names": ["React"]
7
7
  }
@@ -146,7 +146,6 @@ const useListItem = (props, {
146
146
  themedIconAfter ? /* @__PURE__ */ jsxs(Fragment, {
147
147
  children: [
148
148
  /* @__PURE__ */ jsx(Spacer, {
149
- flex: true,
150
149
  size: spaceSize
151
150
  }),
152
151
  themedIconAfter
@@ -161,6 +160,7 @@ const ListItemComponent = forwardRef((props, ref) => {
161
160
  const { props: listItemProps } = useListItem(props);
162
161
  return /* @__PURE__ */ jsx(ListItemFrame, {
163
162
  ref,
163
+ justifyContent: "space-between",
164
164
  ...listItemProps
165
165
  });
166
166
  });
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ListItem.tsx"],
4
- "sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiElement,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSpace, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\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' | 'noTextWrap'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n /**\n * title\n */\n title?: React.ReactNode\n /**\n * subtitle\n */\n subTitle?: React.ReactNode\n /**\n * will not wrap text around `children` only, \"all\" will not wrap title or subTitle\n */\n noTextWrap?: boolean | 'all'\n }\n\nexport const 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 paddingVertical: getSpace(val, -2),\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n name: 'ListItemText',\n color: '$color',\n userSelect: 'none',\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n cursor: 'default',\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n name: 'ListItemSubtitle',\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n maxWidth: '100%',\n size: '$3',\n})\n\nexport const ListItemTitle = styled(ListItemText, {\n name: 'ListItemTitle',\n})\n\nexport const useListItem = (\n props: ListItemProps,\n {\n Text = ListItemText,\n Subtitle = ListItemSubtitle,\n Title = ListItemTitle,\n }: {\n Title?: any\n Subtitle?: any\n Text?: any\n } = { Text: ListItemText, Subtitle: ListItemSubtitle, Title: ListItemTitle }\n) => {\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\n\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.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 // @ts-ignore noTextWrap = all is ok\n const contents = wrapChildrenInText(Text, mediaActiveProps)\n\n return {\n props: {\n fontFamily,\n ...rest,\n children: (\n <>\n {themedIcon ? (\n <>\n {themedIcon}\n <Spacer size={spaceSize} />\n </>\n ) : null}\n {/* helper for common title/subtitle pttern */}\n {Boolean(title || subTitle) ? (\n <YStack flex={1}>\n {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n {subTitle ? (\n <>\n <Spacer flex size={spaceSize * 0.333} />\n {typeof subTitle === 'string' && noTextWrap !== 'all' ? (\n // TODO can use theme but we need to standardize to alt themes\n // or standardize on subtle colors in themes\n <Subtitle size={subtitleSize}>{subTitle}</Subtitle>\n ) : (\n subTitle\n )}\n </>\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer flex size={spaceSize} />\n {themedIconAfter}\n </>\n ) : null}\n </>\n ),\n },\n }\n}\n\nconst ListItemComponent = forwardRef<TamaguiElement, ListItemProps>((props, ref) => {\n const { props: listItemProps } = useListItem(props)\n return <ListItemFrame ref={ref} {...listItemProps} />\n})\n\nexport const listItemStaticConfig = {\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(\n ListItemFrame.extractable(themeable(ListItemComponent), listItemStaticConfig),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\n)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiElement,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSpace, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\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' | 'noTextWrap'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n /**\n * title\n */\n title?: React.ReactNode\n /**\n * subtitle\n */\n subTitle?: React.ReactNode\n /**\n * will not wrap text around `children` only, \"all\" will not wrap title or subTitle\n */\n noTextWrap?: boolean | 'all'\n }\n\nexport const 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 paddingVertical: getSpace(val, -2),\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n name: 'ListItemText',\n color: '$color',\n userSelect: 'none',\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n cursor: 'default',\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n name: 'ListItemSubtitle',\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n maxWidth: '100%',\n size: '$3',\n})\n\nexport const ListItemTitle = styled(ListItemText, {\n name: 'ListItemTitle',\n})\n\nexport const useListItem = (\n props: ListItemProps,\n {\n Text = ListItemText,\n Subtitle = ListItemSubtitle,\n Title = ListItemTitle,\n }: {\n Title?: any\n Subtitle?: any\n Text?: any\n } = { Text: ListItemText, Subtitle: ListItemSubtitle, Title: ListItemTitle }\n) => {\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\n\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.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 // @ts-ignore noTextWrap = all is ok\n const contents = wrapChildrenInText(Text, mediaActiveProps)\n\n return {\n props: {\n fontFamily,\n ...rest,\n children: (\n <>\n {themedIcon ? (\n <>\n {themedIcon}\n <Spacer size={spaceSize} />\n </>\n ) : null}\n {/* helper for common title/subtitle pttern */}\n {Boolean(title || subTitle) ? (\n <YStack flex={1}>\n {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n {subTitle ? (\n <>\n <Spacer flex size={spaceSize * 0.333} />\n {typeof subTitle === 'string' && noTextWrap !== 'all' ? (\n // TODO can use theme but we need to standardize to alt themes\n // or standardize on subtle colors in themes\n <Subtitle size={subtitleSize}>{subTitle}</Subtitle>\n ) : (\n subTitle\n )}\n </>\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer size={spaceSize} />\n {themedIconAfter}\n </>\n ) : null}\n </>\n ),\n },\n }\n}\n\nconst ListItemComponent = forwardRef<TamaguiElement, ListItemProps>((props, ref) => {\n const { props: listItemProps } = useListItem(props)\n return <ListItemFrame ref={ref} justifyContent=\"space-between\" {...listItemProps} />\n})\n\nexport const listItemStaticConfig = {\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(\n ListItemFrame.extractable(themeable(ListItemComponent), listItemStaticConfig),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\n)\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -124,7 +124,7 @@ const useListItem = (props, {
124
124
  {contents}
125
125
  </YStack> : contents}
126
126
  {themedIconAfter ? <>
127
- <Spacer flex size={spaceSize} />
127
+ <Spacer size={spaceSize} />
128
128
  {themedIconAfter}
129
129
  </> : null}
130
130
  </>
@@ -133,7 +133,7 @@ const useListItem = (props, {
133
133
  };
134
134
  const ListItemComponent = forwardRef((props, ref) => {
135
135
  const { props: listItemProps } = useListItem(props);
136
- return <ListItemFrame ref={ref} {...listItemProps} />;
136
+ return <ListItemFrame ref={ref} justifyContent="space-between" {...listItemProps} />;
137
137
  });
138
138
  const listItemStaticConfig = {
139
139
  inlineProps: /* @__PURE__ */ new Set([
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/ListItem.tsx"],
4
- "sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiElement,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSpace, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\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' | 'noTextWrap'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n /**\n * title\n */\n title?: React.ReactNode\n /**\n * subtitle\n */\n subTitle?: React.ReactNode\n /**\n * will not wrap text around `children` only, \"all\" will not wrap title or subTitle\n */\n noTextWrap?: boolean | 'all'\n }\n\nexport const 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 paddingVertical: getSpace(val, -2),\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n name: 'ListItemText',\n color: '$color',\n userSelect: 'none',\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n cursor: 'default',\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n name: 'ListItemSubtitle',\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n maxWidth: '100%',\n size: '$3',\n})\n\nexport const ListItemTitle = styled(ListItemText, {\n name: 'ListItemTitle',\n})\n\nexport const useListItem = (\n props: ListItemProps,\n {\n Text = ListItemText,\n Subtitle = ListItemSubtitle,\n Title = ListItemTitle,\n }: {\n Title?: any\n Subtitle?: any\n Text?: any\n } = { Text: ListItemText, Subtitle: ListItemSubtitle, Title: ListItemTitle }\n) => {\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\n\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.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 // @ts-ignore noTextWrap = all is ok\n const contents = wrapChildrenInText(Text, mediaActiveProps)\n\n return {\n props: {\n fontFamily,\n ...rest,\n children: (\n <>\n {themedIcon ? (\n <>\n {themedIcon}\n <Spacer size={spaceSize} />\n </>\n ) : null}\n {/* helper for common title/subtitle pttern */}\n {Boolean(title || subTitle) ? (\n <YStack flex={1}>\n {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n {subTitle ? (\n <>\n <Spacer flex size={spaceSize * 0.333} />\n {typeof subTitle === 'string' && noTextWrap !== 'all' ? (\n // TODO can use theme but we need to standardize to alt themes\n // or standardize on subtle colors in themes\n <Subtitle size={subtitleSize}>{subTitle}</Subtitle>\n ) : (\n subTitle\n )}\n </>\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer flex size={spaceSize} />\n {themedIconAfter}\n </>\n ) : null}\n </>\n ),\n },\n }\n}\n\nconst ListItemComponent = forwardRef<TamaguiElement, ListItemProps>((props, ref) => {\n const { props: listItemProps } = useListItem(props)\n return <ListItemFrame ref={ref} {...listItemProps} />\n})\n\nexport const listItemStaticConfig = {\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(\n ListItemFrame.extractable(themeable(ListItemComponent), listItemStaticConfig),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\n)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import {\n FontSizeTokens,\n GetProps,\n Spacer,\n TamaguiElement,\n ThemeableProps,\n getSize,\n getVariableValue,\n styled,\n themeable,\n useMediaPropsActive,\n withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSpace, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\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' | 'noTextWrap'> &\n GetProps<typeof ListItemFrame> &\n ThemeableProps & {\n /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n /**\n * title\n */\n title?: React.ReactNode\n /**\n * subtitle\n */\n subTitle?: React.ReactNode\n /**\n * will not wrap text around `children` only, \"all\" will not wrap title or subTitle\n */\n noTextWrap?: boolean | 'all'\n }\n\nexport const 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 paddingVertical: getSpace(val, -2),\n }\n },\n },\n\n active: {\n true: {\n hoverStyle: {\n backgroundColor: '$background',\n },\n },\n },\n\n disabled: {\n true: {\n opacity: 0.5,\n // TODO breaking types\n pointerEvents: 'none' as any,\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const ListItemText = styled(SizableText, {\n name: 'ListItemText',\n color: '$color',\n userSelect: 'none',\n flexGrow: 1,\n flexShrink: 1,\n ellipse: true,\n cursor: 'default',\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n name: 'ListItemSubtitle',\n color: '$colorPress',\n marginTop: '$-2',\n opacity: 0.65,\n maxWidth: '100%',\n size: '$3',\n})\n\nexport const ListItemTitle = styled(ListItemText, {\n name: 'ListItemTitle',\n})\n\nexport const useListItem = (\n props: ListItemProps,\n {\n Text = ListItemText,\n Subtitle = ListItemSubtitle,\n Title = ListItemTitle,\n }: {\n Title?: any\n Subtitle?: any\n Text?: any\n } = { Text: ListItemText, Subtitle: ListItemSubtitle, Title: ListItemTitle }\n) => {\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\n\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.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 // @ts-ignore noTextWrap = all is ok\n const contents = wrapChildrenInText(Text, mediaActiveProps)\n\n return {\n props: {\n fontFamily,\n ...rest,\n children: (\n <>\n {themedIcon ? (\n <>\n {themedIcon}\n <Spacer size={spaceSize} />\n </>\n ) : null}\n {/* helper for common title/subtitle pttern */}\n {Boolean(title || subTitle) ? (\n <YStack flex={1}>\n {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n {subTitle ? (\n <>\n <Spacer flex size={spaceSize * 0.333} />\n {typeof subTitle === 'string' && noTextWrap !== 'all' ? (\n // TODO can use theme but we need to standardize to alt themes\n // or standardize on subtle colors in themes\n <Subtitle size={subtitleSize}>{subTitle}</Subtitle>\n ) : (\n subTitle\n )}\n </>\n ) : null}\n {contents}\n </YStack>\n ) : (\n contents\n )}\n {themedIconAfter ? (\n <>\n <Spacer size={spaceSize} />\n {themedIconAfter}\n </>\n ) : null}\n </>\n ),\n },\n }\n}\n\nconst ListItemComponent = forwardRef<TamaguiElement, ListItemProps>((props, ref) => {\n const { props: listItemProps } = useListItem(props)\n return <ListItemFrame ref={ref} justifyContent=\"space-between\" {...listItemProps} />\n})\n\nexport const listItemStaticConfig = {\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(\n ListItemFrame.extractable(themeable(ListItemComponent), listItemStaticConfig),\n {\n Text: ListItemText,\n Subtitle: ListItemSubtitle,\n }\n)\n"],
5
+ "mappings": "AAAA;AAAA,EAGE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,UAAU,wBAAwB;AAC3C,SAAS,gBAAgB,cAAc;AACvC,SAAS,aAA+B,0BAA0B;AAClE,OAAO,SAA4B,kBAAkB;AAGrD,MAAM;AA6CC,MAAM,gBAAgB,OAAO,gBAAgB;AAAA,EAClD,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,OAAO,MAAM;AAC9B,eAAO;AAAA,UACL,WAAW,OAAO,KAAK;AAAA,UACvB,mBAAmB,OAAO,MAAM;AAAA,UAChC,iBAAiB,SAAS,KAAK,EAAE;AAAA,QACnC;AAAA,MACF;AAAA,IACF;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAAS;AAAA,QAET,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,eAAe,OAAO,aAAa;AAAA,EAC9C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,QAAQ;AACV,CAAC;AAEM,MAAM,mBAAmB,OAAO,cAAc;AAAA,EACnD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AACR,CAAC;AAEM,MAAM,gBAAgB,OAAO,cAAc;AAAA,EAChD,MAAM;AACR,CAAC;AAEM,MAAM,cAAc,CACzB,OACA;AAAA,EACE,OAAO;AAAA,EACP,WAAW;AAAA,EACX,QAAQ;AACV,IAII,EAAE,MAAM,cAAc,UAAU,kBAAkB,OAAO,cAAc,MACxE;AAEH,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,IACA;AAAA,OACG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB,oBAAoB,KAAK;AAClD,QAAM,OAAO,iBAAiB,QAAQ;AACtC,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,eAAe,IAAI,CAAC,MAAM,SAAS,EAAE,IAAI,aAAa;AACzE,QAAM,YAAY,iBAAiB,QAAQ,IAAI;AAE/C,QAAM,WAAW,mBAAmB,MAAM,gBAAgB;AAE1D,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,GAAG;AAAA,MACH,UACE;AAAA,SACG,aACC;AAAA,WACG;AAAA,UACD,CAAC,OAAO,MAAM,WAAW;AAAA,QAC3B,MACE;AAAA,SAEH,QAAQ,SAAS,QAAQ,IACxB,CAAC,OAAO,MAAM;AAAA,WACX,eAAe,QAAQ,QAAQ,CAAC,MAAM,MAAM,OAAO,MAAM,EAAzB;AAAA,WAChC,WACC;AAAA,YACE,CAAC,OAAO,KAAK,MAAM,YAAY,OAAO;AAAA,aACrC,OAAO,aAAa,YAAY,eAAe,QAG9C,CAAC,SAAS,MAAM,eAAe,SAAS,EAAvC,YAED;AAAA,UAEJ,MACE;AAAA,WACH;AAAA,QACH,EAfC,UAiBD;AAAA,SAED,kBACC;AAAA,UACE,CAAC,OAAO,MAAM,WAAW;AAAA,WACxB;AAAA,QACH,MACE;AAAA,MACN;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,MAAM,oBAAoB,WAA0C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,OAAO,cAAc,IAAI,YAAY,KAAK;AAClD,SAAO,CAAC,cAAc,KAAK,KAAK,eAAe,oBAAoB,eAAe;AACpF,CAAC;AAEM,MAAM,uBAAuB;AAAA,EAClC,aAAa,oBAAI,IAAI;AAAA,IAEnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAEO,MAAM,WAAW;AAAA,EACtB,cAAc,YAAY,UAAU,iBAAiB,GAAG,oBAAoB;AAAA,EAC5E;AAAA,IACE,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/list-item",
3
- "version": "1.0.1-beta.217",
3
+ "version": "1.0.1-beta.219",
4
4
  "sideEffects": [
5
5
  "*.css"
6
6
  ],
@@ -21,16 +21,16 @@
21
21
  "watch": "tamagui-build --watch"
22
22
  },
23
23
  "dependencies": {
24
- "@tamagui/core": "^1.0.1-beta.217",
25
- "@tamagui/font-size": "^1.0.1-beta.217",
26
- "@tamagui/helpers-tamagui": "^1.0.1-beta.217"
24
+ "@tamagui/core": "^1.0.1-beta.219",
25
+ "@tamagui/font-size": "^1.0.1-beta.219",
26
+ "@tamagui/helpers-tamagui": "^1.0.1-beta.219"
27
27
  },
28
28
  "peerDependencies": {
29
29
  "react": ">=18",
30
30
  "react-dom": ">=18"
31
31
  },
32
32
  "devDependencies": {
33
- "@tamagui/build": "^1.0.1-beta.217",
33
+ "@tamagui/build": "^1.0.1-beta.219",
34
34
  "react": ">=18",
35
35
  "react-dom": ">=18"
36
36
  },
package/src/ListItem.tsx CHANGED
@@ -213,7 +213,7 @@ export const useListItem = (
213
213
  )}
214
214
  {themedIconAfter ? (
215
215
  <>
216
- <Spacer flex size={spaceSize} />
216
+ <Spacer size={spaceSize} />
217
217
  {themedIconAfter}
218
218
  </>
219
219
  ) : null}
@@ -225,7 +225,7 @@ export const useListItem = (
225
225
 
226
226
  const ListItemComponent = forwardRef<TamaguiElement, ListItemProps>((props, ref) => {
227
227
  const { props: listItemProps } = useListItem(props)
228
- return <ListItemFrame ref={ref} {...listItemProps} />
228
+ return <ListItemFrame ref={ref} justifyContent="space-between" {...listItemProps} />
229
229
  })
230
230
 
231
231
  export const listItemStaticConfig = {