@tamagui/list-item 1.6.2 → 1.7.0

package/dist/cjs/ListItem.js

@@ -48,7 +48,8 @@ const ListItemFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
         borderColor: "$borderColor",
         maxWidth: "100%",
         overflow: "hidden",
-        flexDirection: "row"
+        flexDirection: "row",
+        backgroundColor: "$backgroundStrong"
       }
     },
     size: {
@@ -81,20 +82,36 @@ const ListItemFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
 });
 const ListItemText = (0, import_core.styled)(import_text.SizableText, {
   name: "ListItemText",
-  color: "$color",
-  userSelect: "none",
-  flexGrow: 1,
-  flexShrink: 1,
-  ellipse: true,
-  cursor: "default"
+  variants: {
+    unstyled: {
+      false: {
+        color: "$color",
+        userSelect: "none",
+        flexGrow: 1,
+        flexShrink: 1,
+        ellipse: true,
+        cursor: "default"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
 const ListItemSubtitle = (0, import_core.styled)(ListItemText, {
   name: "ListItemSubtitle",
-  color: "$colorPress",
-  marginTop: "$-2",
-  opacity: 0.65,
-  maxWidth: "100%",
-  size: "$3"
+  variants: {
+    unstyled: {
+      false: {
+        opacity: 0.5,
+        maxWidth: "100%",
+        size: "$3"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
 const ListItemTitle = (0, import_core.styled)(ListItemText, {
   name: "ListItemTitle"
@@ -145,14 +162,11 @@ const useListItem = (props, {
         ] }) : null,
         title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stacks.YStack, { flex: 1, children: [
           noTextWrap === "all" ? title : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, { size, children: title }),
-          subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Spacer, { flex: true, size: spaceSize * 0.333 }),
-            typeof subTitle === "string" && noTextWrap !== "all" ? (
-              // TODO can use theme but we need to standardize to alt themes
-              // or standardize on subtle colors in themes
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Subtitle, { size: subtitleSize, children: subTitle })
-            ) : subTitle
-          ] }) : null,
+          subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: typeof subTitle === "string" && noTextWrap !== "all" ? (
+            // TODO can use theme but we need to standardize to alt themes
+            // or standardize on subtle colors in themes
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Subtitle, { size: subtitleSize, children: subTitle })
+          ) : subTitle }) : null,
           contents
         ] }) : contents,
         themedIconAfter ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [

package/dist/cjs/ListItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ListItem.tsx"],
-  "sourcesContent": ["import {\n  FontSizeTokens,\n  GetProps,\n  Spacer,\n  TamaguiElement,\n  ThemeableProps,\n  getTokens,\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\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\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'li',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        alignItems: 'center',\n        flexWrap: 'nowrap',\n        width: '100%',\n        borderColor: '$borderColor',\n        maxWidth: '100%',\n        overflow: 'hidden',\n        flexDirection: 'row',\n      },\n    },\n\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    unstyled: false,\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 || '$true'\n  const subtitleSize = `$${+String(size).replace('$', '') - 1}` 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 =\n    getVariableValue(getTokens().space[mediaActiveProps.space as any] ?? iconSize) *\n    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          {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(\n    themeable(ListItemComponent, { componentName: NAME }),\n    listItemStaticConfig\n  ),\n  {\n    Text: ListItemText,\n    Subtitle: ListItemSubtitle,\n  }\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  FontSizeTokens,\n  GetProps,\n  Spacer,\n  TamaguiElement,\n  ThemeableProps,\n  getTokens,\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\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\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'li',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        alignItems: 'center',\n        flexWrap: 'nowrap',\n        width: '100%',\n        borderColor: '$borderColor',\n        maxWidth: '100%',\n        overflow: 'hidden',\n        flexDirection: 'row',\n        backgroundColor: '$backgroundStrong',\n      },\n    },\n\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    unstyled: false,\n  },\n})\n\nexport const ListItemText = styled(SizableText, {\n  name: 'ListItemText',\n\n  variants: {\n    unstyled: {\n      false: {\n        color: '$color',\n        userSelect: 'none',\n        flexGrow: 1,\n        flexShrink: 1,\n        ellipse: true,\n        cursor: 'default',\n      },\n    },\n  },\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n  name: 'ListItemSubtitle',\n\n  variants: {\n    unstyled: {\n      false: {\n        opacity: 0.5,\n        maxWidth: '100%',\n        size: '$3',\n      },\n    },\n  },\n\n  defaultVariants: {\n    unstyled: false,\n  },\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 || '$true'\n  const subtitleSize = `$${+String(size).replace('$', '') - 1}` 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 =\n    getVariableValue(getTokens().space[mediaActiveProps.space as any] ?? iconSize) *\n    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          {title || subTitle ? (\n            <YStack flex={1}>\n              {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n              {subTitle ? (\n                <>\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(\n    themeable(ListItemComponent, { componentName: NAME }),\n    listItemStaticConfig\n  ),\n  {\n    Text: ListItemText,\n    Subtitle: ListItemSubtitle,\n  }\n)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/ListItem.js

@@ -27,7 +27,8 @@ const ListItemFrame = styled(ThemeableStack, {
         borderColor: "$borderColor",
         maxWidth: "100%",
         overflow: "hidden",
-        flexDirection: "row"
+        flexDirection: "row",
+        backgroundColor: "$backgroundStrong"
       }
     },
     size: {
@@ -60,20 +61,36 @@ const ListItemFrame = styled(ThemeableStack, {
 });
 const ListItemText = styled(SizableText, {
   name: "ListItemText",
-  color: "$color",
-  userSelect: "none",
-  flexGrow: 1,
-  flexShrink: 1,
-  ellipse: true,
-  cursor: "default"
+  variants: {
+    unstyled: {
+      false: {
+        color: "$color",
+        userSelect: "none",
+        flexGrow: 1,
+        flexShrink: 1,
+        ellipse: true,
+        cursor: "default"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
 const ListItemSubtitle = styled(ListItemText, {
   name: "ListItemSubtitle",
-  color: "$colorPress",
-  marginTop: "$-2",
-  opacity: 0.65,
-  maxWidth: "100%",
-  size: "$3"
+  variants: {
+    unstyled: {
+      false: {
+        opacity: 0.5,
+        maxWidth: "100%",
+        size: "$3"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
 const ListItemTitle = styled(ListItemText, {
   name: "ListItemTitle"
@@ -124,14 +141,11 @@ const useListItem = (props, {
         ] }) : null,
         title || subTitle ? /* @__PURE__ */ jsxs(YStack, { flex: 1, children: [
           noTextWrap === "all" ? title : /* @__PURE__ */ jsx(Title, { size, children: title }),
-          subTitle ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Spacer, { flex: true, size: spaceSize * 0.333 }),
-            typeof subTitle === "string" && noTextWrap !== "all" ? (
-              // TODO can use theme but we need to standardize to alt themes
-              // or standardize on subtle colors in themes
-              /* @__PURE__ */ jsx(Subtitle, { size: subtitleSize, children: subTitle })
-            ) : subTitle
-          ] }) : null,
+          subTitle ? /* @__PURE__ */ jsx(Fragment, { children: typeof subTitle === "string" && noTextWrap !== "all" ? (
+            // TODO can use theme but we need to standardize to alt themes
+            // or standardize on subtle colors in themes
+            /* @__PURE__ */ jsx(Subtitle, { size: subtitleSize, children: subTitle })
+          ) : subTitle }) : null,
           contents
         ] }) : contents,
         themedIconAfter ? /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/esm/ListItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ListItem.tsx"],
-  "sourcesContent": ["import {\n  FontSizeTokens,\n  GetProps,\n  Spacer,\n  TamaguiElement,\n  ThemeableProps,\n  getTokens,\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\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\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'li',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        alignItems: 'center',\n        flexWrap: 'nowrap',\n        width: '100%',\n        borderColor: '$borderColor',\n        maxWidth: '100%',\n        overflow: 'hidden',\n        flexDirection: 'row',\n      },\n    },\n\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    unstyled: false,\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 || '$true'\n  const subtitleSize = `$${+String(size).replace('$', '') - 1}` 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 =\n    getVariableValue(getTokens().space[mediaActiveProps.space as any] ?? iconSize) *\n    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          {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(\n    themeable(ListItemComponent, { componentName: NAME }),\n    listItemStaticConfig\n  ),\n  {\n    Text: ListItemText,\n    Subtitle: ListItemSubtitle,\n  }\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  FontSizeTokens,\n  GetProps,\n  Spacer,\n  TamaguiElement,\n  ThemeableProps,\n  getTokens,\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\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\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'li',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        alignItems: 'center',\n        flexWrap: 'nowrap',\n        width: '100%',\n        borderColor: '$borderColor',\n        maxWidth: '100%',\n        overflow: 'hidden',\n        flexDirection: 'row',\n        backgroundColor: '$backgroundStrong',\n      },\n    },\n\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    unstyled: false,\n  },\n})\n\nexport const ListItemText = styled(SizableText, {\n  name: 'ListItemText',\n\n  variants: {\n    unstyled: {\n      false: {\n        color: '$color',\n        userSelect: 'none',\n        flexGrow: 1,\n        flexShrink: 1,\n        ellipse: true,\n        cursor: 'default',\n      },\n    },\n  },\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n  name: 'ListItemSubtitle',\n\n  variants: {\n    unstyled: {\n      false: {\n        opacity: 0.5,\n        maxWidth: '100%',\n        size: '$3',\n      },\n    },\n  },\n\n  defaultVariants: {\n    unstyled: false,\n  },\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 || '$true'\n  const subtitleSize = `$${+String(size).replace('$', '') - 1}` 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 =\n    getVariableValue(getTokens().space[mediaActiveProps.space as any] ?? iconSize) *\n    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          {title || subTitle ? (\n            <YStack flex={1}>\n              {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n              {subTitle ? (\n                <>\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(\n    themeable(ListItemComponent, { componentName: NAME }),\n    listItemStaticConfig\n  ),\n  {\n    Text: ListItemText,\n    Subtitle: ListItemSubtitle,\n  }\n)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/ListItem.mjs

@@ -27,7 +27,8 @@ const ListItemFrame = styled(ThemeableStack, {
         borderColor: "$borderColor",
         maxWidth: "100%",
         overflow: "hidden",
-        flexDirection: "row"
+        flexDirection: "row",
+        backgroundColor: "$backgroundStrong"
       }
     },
     size: {
@@ -60,20 +61,36 @@ const ListItemFrame = styled(ThemeableStack, {
 });
 const ListItemText = styled(SizableText, {
   name: "ListItemText",
-  color: "$color",
-  userSelect: "none",
-  flexGrow: 1,
-  flexShrink: 1,
-  ellipse: true,
-  cursor: "default"
+  variants: {
+    unstyled: {
+      false: {
+        color: "$color",
+        userSelect: "none",
+        flexGrow: 1,
+        flexShrink: 1,
+        ellipse: true,
+        cursor: "default"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
 const ListItemSubtitle = styled(ListItemText, {
   name: "ListItemSubtitle",
-  color: "$colorPress",
-  marginTop: "$-2",
-  opacity: 0.65,
-  maxWidth: "100%",
-  size: "$3"
+  variants: {
+    unstyled: {
+      false: {
+        opacity: 0.5,
+        maxWidth: "100%",
+        size: "$3"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
 const ListItemTitle = styled(ListItemText, {
   name: "ListItemTitle"
@@ -124,14 +141,11 @@ const useListItem = (props, {
         ] }) : null,
         title || subTitle ? /* @__PURE__ */ jsxs(YStack, { flex: 1, children: [
           noTextWrap === "all" ? title : /* @__PURE__ */ jsx(Title, { size, children: title }),
-          subTitle ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Spacer, { flex: true, size: spaceSize * 0.333 }),
-            typeof subTitle === "string" && noTextWrap !== "all" ? (
-              // TODO can use theme but we need to standardize to alt themes
-              // or standardize on subtle colors in themes
-              /* @__PURE__ */ jsx(Subtitle, { size: subtitleSize, children: subTitle })
-            ) : subTitle
-          ] }) : null,
+          subTitle ? /* @__PURE__ */ jsx(Fragment, { children: typeof subTitle === "string" && noTextWrap !== "all" ? (
+            // TODO can use theme but we need to standardize to alt themes
+            // or standardize on subtle colors in themes
+            /* @__PURE__ */ jsx(Subtitle, { size: subtitleSize, children: subTitle })
+          ) : subTitle }) : null,
           contents
         ] }) : contents,
         themedIconAfter ? /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/esm/ListItem.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ListItem.tsx"],
-  "sourcesContent": ["import {\n  FontSizeTokens,\n  GetProps,\n  Spacer,\n  TamaguiElement,\n  ThemeableProps,\n  getTokens,\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\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\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'li',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        alignItems: 'center',\n        flexWrap: 'nowrap',\n        width: '100%',\n        borderColor: '$borderColor',\n        maxWidth: '100%',\n        overflow: 'hidden',\n        flexDirection: 'row',\n      },\n    },\n\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    unstyled: false,\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 || '$true'\n  const subtitleSize = `$${+String(size).replace('$', '') - 1}` 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 =\n    getVariableValue(getTokens().space[mediaActiveProps.space as any] ?? iconSize) *\n    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          {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(\n    themeable(ListItemComponent, { componentName: NAME }),\n    listItemStaticConfig\n  ),\n  {\n    Text: ListItemText,\n    Subtitle: ListItemSubtitle,\n  }\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  FontSizeTokens,\n  GetProps,\n  Spacer,\n  TamaguiElement,\n  ThemeableProps,\n  getTokens,\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\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\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'li',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        alignItems: 'center',\n        flexWrap: 'nowrap',\n        width: '100%',\n        borderColor: '$borderColor',\n        maxWidth: '100%',\n        overflow: 'hidden',\n        flexDirection: 'row',\n        backgroundColor: '$backgroundStrong',\n      },\n    },\n\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    unstyled: false,\n  },\n})\n\nexport const ListItemText = styled(SizableText, {\n  name: 'ListItemText',\n\n  variants: {\n    unstyled: {\n      false: {\n        color: '$color',\n        userSelect: 'none',\n        flexGrow: 1,\n        flexShrink: 1,\n        ellipse: true,\n        cursor: 'default',\n      },\n    },\n  },\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n  name: 'ListItemSubtitle',\n\n  variants: {\n    unstyled: {\n      false: {\n        opacity: 0.5,\n        maxWidth: '100%',\n        size: '$3',\n      },\n    },\n  },\n\n  defaultVariants: {\n    unstyled: false,\n  },\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 || '$true'\n  const subtitleSize = `$${+String(size).replace('$', '') - 1}` 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 =\n    getVariableValue(getTokens().space[mediaActiveProps.space as any] ?? iconSize) *\n    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          {title || subTitle ? (\n            <YStack flex={1}>\n              {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n              {subTitle ? (\n                <>\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(\n    themeable(ListItemComponent, { componentName: NAME }),\n    listItemStaticConfig\n  ),\n  {\n    Text: ListItemText,\n    Subtitle: ListItemSubtitle,\n  }\n)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/ListItem.js

@@ -26,7 +26,8 @@ const ListItemFrame = styled(ThemeableStack, {
         borderColor: "$borderColor",
         maxWidth: "100%",
         overflow: "hidden",
-        flexDirection: "row"
+        flexDirection: "row",
+        backgroundColor: "$backgroundStrong"
       }
     },
     size: {
@@ -59,20 +60,36 @@ const ListItemFrame = styled(ThemeableStack, {
 });
 const ListItemText = styled(SizableText, {
   name: "ListItemText",
-  color: "$color",
-  userSelect: "none",
-  flexGrow: 1,
-  flexShrink: 1,
-  ellipse: true,
-  cursor: "default"
+  variants: {
+    unstyled: {
+      false: {
+        color: "$color",
+        userSelect: "none",
+        flexGrow: 1,
+        flexShrink: 1,
+        ellipse: true,
+        cursor: "default"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
 const ListItemSubtitle = styled(ListItemText, {
   name: "ListItemSubtitle",
-  color: "$colorPress",
-  marginTop: "$-2",
-  opacity: 0.65,
-  maxWidth: "100%",
-  size: "$3"
+  variants: {
+    unstyled: {
+      false: {
+        opacity: 0.5,
+        maxWidth: "100%",
+        size: "$3"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
 const ListItemTitle = styled(ListItemText, {
   name: "ListItemTitle"
@@ -123,14 +140,11 @@ const useListItem = (props, {
         </> : null}
         {title || subTitle ? <YStack flex={1}>
           {noTextWrap === "all" ? title : <Title size={size}>{title}</Title>}
-          {subTitle ? <>
-            <Spacer flex size={spaceSize * 0.333} />
-            {typeof subTitle === "string" && noTextWrap !== "all" ? (
-              // TODO can use theme but we need to standardize to alt themes
-              // or standardize on subtle colors in themes
-              <Subtitle size={subtitleSize}>{subTitle}</Subtitle>
-            ) : subTitle}
-          </> : null}
+          {subTitle ? <>{typeof subTitle === "string" && noTextWrap !== "all" ? (
+            // TODO can use theme but we need to standardize to alt themes
+            // or standardize on subtle colors in themes
+            <Subtitle size={subtitleSize}>{subTitle}</Subtitle>
+          ) : subTitle}</> : null}
           {contents}
         </YStack> : contents}
         {themedIconAfter ? <>

package/dist/jsx/ListItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ListItem.tsx"],
-  "sourcesContent": ["import {\n  FontSizeTokens,\n  GetProps,\n  Spacer,\n  TamaguiElement,\n  ThemeableProps,\n  getTokens,\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\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\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'li',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        alignItems: 'center',\n        flexWrap: 'nowrap',\n        width: '100%',\n        borderColor: '$borderColor',\n        maxWidth: '100%',\n        overflow: 'hidden',\n        flexDirection: 'row',\n      },\n    },\n\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    unstyled: false,\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 || '$true'\n  const subtitleSize = `$${+String(size).replace('$', '') - 1}` 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 =\n    getVariableValue(getTokens().space[mediaActiveProps.space as any] ?? iconSize) *\n    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          {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(\n    themeable(ListItemComponent, { componentName: NAME }),\n    listItemStaticConfig\n  ),\n  {\n    Text: ListItemText,\n    Subtitle: ListItemSubtitle,\n  }\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  FontSizeTokens,\n  GetProps,\n  Spacer,\n  TamaguiElement,\n  ThemeableProps,\n  getTokens,\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\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\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'li',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        alignItems: 'center',\n        flexWrap: 'nowrap',\n        width: '100%',\n        borderColor: '$borderColor',\n        maxWidth: '100%',\n        overflow: 'hidden',\n        flexDirection: 'row',\n        backgroundColor: '$backgroundStrong',\n      },\n    },\n\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    unstyled: false,\n  },\n})\n\nexport const ListItemText = styled(SizableText, {\n  name: 'ListItemText',\n\n  variants: {\n    unstyled: {\n      false: {\n        color: '$color',\n        userSelect: 'none',\n        flexGrow: 1,\n        flexShrink: 1,\n        ellipse: true,\n        cursor: 'default',\n      },\n    },\n  },\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n  name: 'ListItemSubtitle',\n\n  variants: {\n    unstyled: {\n      false: {\n        opacity: 0.5,\n        maxWidth: '100%',\n        size: '$3',\n      },\n    },\n  },\n\n  defaultVariants: {\n    unstyled: false,\n  },\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 || '$true'\n  const subtitleSize = `$${+String(size).replace('$', '') - 1}` 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 =\n    getVariableValue(getTokens().space[mediaActiveProps.space as any] ?? iconSize) *\n    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          {title || subTitle ? (\n            <YStack flex={1}>\n              {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n              {subTitle ? (\n                <>\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(\n    themeable(ListItemComponent, { componentName: NAME }),\n    listItemStaticConfig\n  ),\n  {\n    Text: ListItemText,\n    Subtitle: ListItemSubtitle,\n  }\n)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/ListItem.mjs

@@ -26,7 +26,8 @@ const ListItemFrame = styled(ThemeableStack, {
         borderColor: "$borderColor",
         maxWidth: "100%",
         overflow: "hidden",
-        flexDirection: "row"
+        flexDirection: "row",
+        backgroundColor: "$backgroundStrong"
       }
     },
     size: {
@@ -59,20 +60,36 @@ const ListItemFrame = styled(ThemeableStack, {
 });
 const ListItemText = styled(SizableText, {
   name: "ListItemText",
-  color: "$color",
-  userSelect: "none",
-  flexGrow: 1,
-  flexShrink: 1,
-  ellipse: true,
-  cursor: "default"
+  variants: {
+    unstyled: {
+      false: {
+        color: "$color",
+        userSelect: "none",
+        flexGrow: 1,
+        flexShrink: 1,
+        ellipse: true,
+        cursor: "default"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
 const ListItemSubtitle = styled(ListItemText, {
   name: "ListItemSubtitle",
-  color: "$colorPress",
-  marginTop: "$-2",
-  opacity: 0.65,
-  maxWidth: "100%",
-  size: "$3"
+  variants: {
+    unstyled: {
+      false: {
+        opacity: 0.5,
+        maxWidth: "100%",
+        size: "$3"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
 const ListItemTitle = styled(ListItemText, {
   name: "ListItemTitle"
@@ -123,14 +140,11 @@ const useListItem = (props, {
         </> : null}
         {title || subTitle ? <YStack flex={1}>
           {noTextWrap === "all" ? title : <Title size={size}>{title}</Title>}
-          {subTitle ? <>
-            <Spacer flex size={spaceSize * 0.333} />
-            {typeof subTitle === "string" && noTextWrap !== "all" ? (
-              // TODO can use theme but we need to standardize to alt themes
-              // or standardize on subtle colors in themes
-              <Subtitle size={subtitleSize}>{subTitle}</Subtitle>
-            ) : subTitle}
-          </> : null}
+          {subTitle ? <>{typeof subTitle === "string" && noTextWrap !== "all" ? (
+            // TODO can use theme but we need to standardize to alt themes
+            // or standardize on subtle colors in themes
+            <Subtitle size={subtitleSize}>{subTitle}</Subtitle>
+          ) : subTitle}</> : null}
           {contents}
         </YStack> : contents}
         {themedIconAfter ? <>

package/dist/jsx/ListItem.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ListItem.tsx"],
-  "sourcesContent": ["import {\n  FontSizeTokens,\n  GetProps,\n  Spacer,\n  TamaguiElement,\n  ThemeableProps,\n  getTokens,\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\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\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'li',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        alignItems: 'center',\n        flexWrap: 'nowrap',\n        width: '100%',\n        borderColor: '$borderColor',\n        maxWidth: '100%',\n        overflow: 'hidden',\n        flexDirection: 'row',\n      },\n    },\n\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    unstyled: false,\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 || '$true'\n  const subtitleSize = `$${+String(size).replace('$', '') - 1}` 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 =\n    getVariableValue(getTokens().space[mediaActiveProps.space as any] ?? iconSize) *\n    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          {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(\n    themeable(ListItemComponent, { componentName: NAME }),\n    listItemStaticConfig\n  ),\n  {\n    Text: ListItemText,\n    Subtitle: ListItemSubtitle,\n  }\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  FontSizeTokens,\n  GetProps,\n  Spacer,\n  TamaguiElement,\n  ThemeableProps,\n  getTokens,\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\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\nconst NAME = 'ListItem'\n\nexport const ListItemFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'li',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        alignItems: 'center',\n        flexWrap: 'nowrap',\n        width: '100%',\n        borderColor: '$borderColor',\n        maxWidth: '100%',\n        overflow: 'hidden',\n        flexDirection: 'row',\n        backgroundColor: '$backgroundStrong',\n      },\n    },\n\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    unstyled: false,\n  },\n})\n\nexport const ListItemText = styled(SizableText, {\n  name: 'ListItemText',\n\n  variants: {\n    unstyled: {\n      false: {\n        color: '$color',\n        userSelect: 'none',\n        flexGrow: 1,\n        flexShrink: 1,\n        ellipse: true,\n        cursor: 'default',\n      },\n    },\n  },\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n  name: 'ListItemSubtitle',\n\n  variants: {\n    unstyled: {\n      false: {\n        opacity: 0.5,\n        maxWidth: '100%',\n        size: '$3',\n      },\n    },\n  },\n\n  defaultVariants: {\n    unstyled: false,\n  },\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 || '$true'\n  const subtitleSize = `$${+String(size).replace('$', '') - 1}` 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 =\n    getVariableValue(getTokens().space[mediaActiveProps.space as any] ?? iconSize) *\n    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          {title || subTitle ? (\n            <YStack flex={1}>\n              {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}\n              {subTitle ? (\n                <>\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(\n    themeable(ListItemComponent, { componentName: NAME }),\n    listItemStaticConfig\n  ),\n  {\n    Text: ListItemText,\n    Subtitle: ListItemSubtitle,\n  }\n)\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/list-item",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "sideEffects": [
     "*.css"
   ],
@@ -21,17 +21,17 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@tamagui/core": "1.6.2",
-    "@tamagui/font-size": "1.6.2",
-    "@tamagui/get-size": "1.6.2",
-    "@tamagui/helpers-tamagui": "1.6.2",
-    "@tamagui/text": "1.6.2"
+    "@tamagui/core": "1.7.0",
+    "@tamagui/font-size": "1.7.0",
+    "@tamagui/get-size": "1.7.0",
+    "@tamagui/helpers-tamagui": "1.7.0",
+    "@tamagui/text": "1.7.0"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.6.2",
+    "@tamagui/build": "1.7.0",
     "react": "^18.2.0"
   },
   "publishConfig": {

package/src/ListItem.tsx

@@ -77,6 +77,7 @@ export const ListItemFrame = styled(ThemeableStack, {
         maxWidth: '100%',
         overflow: 'hidden',
         flexDirection: 'row',
+        backgroundColor: '$backgroundStrong',
       },
     },
 
@@ -114,21 +115,41 @@ export const ListItemFrame = styled(ThemeableStack, {
 
 export const ListItemText = styled(SizableText, {
   name: 'ListItemText',
-  color: '$color',
-  userSelect: 'none',
-  flexGrow: 1,
-  flexShrink: 1,
-  ellipse: true,
-  cursor: 'default',
+
+  variants: {
+    unstyled: {
+      false: {
+        color: '$color',
+        userSelect: 'none',
+        flexGrow: 1,
+        flexShrink: 1,
+        ellipse: true,
+        cursor: 'default',
+      },
+    },
+  },
+
+  defaultVariants: {
+    unstyled: false,
+  },
 })
 
 export const ListItemSubtitle = styled(ListItemText, {
   name: 'ListItemSubtitle',
-  color: '$colorPress',
-  marginTop: '$-2',
-  opacity: 0.65,
-  maxWidth: '100%',
-  size: '$3',
+
+  variants: {
+    unstyled: {
+      false: {
+        opacity: 0.5,
+        maxWidth: '100%',
+        size: '$3',
+      },
+    },
+  },
+
+  defaultVariants: {
+    unstyled: false,
+  },
 })
 
 export const ListItemTitle = styled(ListItemText, {
@@ -202,7 +223,6 @@ export const useListItem = (
               {noTextWrap === 'all' ? title : <Title size={size}>{title}</Title>}
               {subTitle ? (
                 <>
-                  <Spacer flex size={spaceSize * 0.333} />
                   {typeof subTitle === 'string' && noTextWrap !== 'all' ? (
                     // TODO can use theme but we need to standardize to alt themes
                     // or standardize on subtle colors in themes

package/types/ListItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../src/ListItem.tsx"],"names":[],"mappings":"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"}

package/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}