@tamagui/list-item 1.1.7 → 1.1.9

package/dist/cjs/ListItem.js

@@ -65,6 +65,7 @@ const ListItemFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
     disabled: {
       true: {
         opacity: 0.5,
+        // TODO breaking types
         pointerEvents: "none"
       }
     }
@@ -109,6 +110,7 @@ const useListItem = (props, {
     scaleIcon = 1,
     scaleSpace = 1,
     subTitle,
+    // text props
     color,
     fontWeight,
     letterSpacing,
@@ -120,7 +122,7 @@ const useListItem = (props, {
     ...rest
   } = props;
   const mediaActiveProps = (0, import_core.useMediaPropsActive)(props);
-  const size = mediaActiveProps.size || "$4";
+  const size = mediaActiveProps.size || "$true";
   const subtitleSize = `$${+String(size).replace("$", "") - 1}`;
   const iconSize = (0, import_font_size.getFontSize)(size) * scaleIcon;
   const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
@@ -131,61 +133,38 @@ const useListItem = (props, {
     props: {
       fontFamily,
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [
-          themedIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-            children: [
-              themedIcon,
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Spacer, {
-                size: spaceSize
-              })
-            ]
-          }) : 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" ? /* @__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: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Spacer, {
-                size: spaceSize
-              }),
-              themedIconAfter
-            ]
-          }) : null
-        ]
-      })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        themedIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          themedIcon,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Spacer, { size: spaceSize })
+        ] }) : 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,
+          contents
+        ] }) : contents,
+        themedIconAfter ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Spacer, { size: spaceSize }),
+          themedIconAfter
+        ] }) : null
+      ] })
     }
   };
 };
 const ListItemComponent = (0, import_react.forwardRef)((props, ref) => {
   const { props: listItemProps } = useListItem(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemFrame, {
-    ref,
-    justifyContent: "space-between",
-    ...listItemProps
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemFrame, { ref, justifyContent: "space-between", ...listItemProps });
 });
 const listItemStaticConfig = {
   inlineProps: /* @__PURE__ */ new Set([
+    // text props go here (can't really optimize them, but we never fully extract listItem anyway)
     "color",
     "fontWeight",
     "fontSize",

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 { getSize } from '@tamagui/get-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  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: '$true',\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 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(true).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 { getSize } from '@tamagui/get-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  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: '$true',\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(true).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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4LY;AA5LZ,kBAYO;AACP,uBAA4B;AAE5B,6BAA2C;AAC3C,oBAAuC;AACvC,kBAAkE;AAClE,mBAAqD;AA6CrD,MAAM,OAAO;AAEN,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,GAAG;AAAA,UAC1B,mBAAmB,OAAO,MAAM,GAAG;AAAA,UACnC,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;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;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,uBAAmB,iCAAoB,KAAK;AAClD,QAAM,OAAO,iBAAiB,QAAQ;AACtC,QAAM,eAAe,IAAI,CAAC,OAAO,IAAI,EAAE,QAAQ,KAAK,EAAE,IAAI;AAC1D,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,gBACJ,kCAAiB,uBAAU,IAAI,EAAE,MAAM,iBAAiB,KAAY,KAAK,QAAQ,IACjF;AAEF,QAAM,eAAW,gCAAmB,MAAM,gBAAgB;AAE1D,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,GAAG;AAAA,MACH,UACE,4EACG;AAAA,qBACC,4EACG;AAAA;AAAA,UACD,4CAAC,sBAAO,MAAM,WAAW;AAAA,WAC3B,IACE;AAAA,QAEH,SAAS,WACR,6CAAC,wBAAO,MAAM,GACX;AAAA,yBAAe,QAAQ,QAAQ,4CAAC,SAAM,MAAa,iBAAM;AAAA,UACzD,WACC,4EACE;AAAA,wDAAC,sBAAO,MAAI,MAAC,MAAM,YAAY,OAAO;AAAA,YACrC,OAAO,aAAa,YAAY,eAAe;AAAA;AAAA;AAAA,cAG9C,4CAAC,YAAS,MAAM,cAAe,oBAAS;AAAA,gBAExC;AAAA,aAEJ,IACE;AAAA,UACH;AAAA,WACH,IAEA;AAAA,QAED,kBACC,4EACE;AAAA,sDAAC,sBAAO,MAAM,WAAW;AAAA,UACxB;AAAA,WACH,IACE;AAAA,SACN;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,MAAM,wBAAoB,yBAA0C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,OAAO,cAAc,IAAI,YAAY,KAAK;AAClD,SAAO,4CAAC,iBAAc,KAAU,gBAAe,iBAAiB,GAAG,eAAe;AACpF,CAAC;AAEM,MAAM,uBAAuB;AAAA,EAClC,aAAa,oBAAI,IAAI;AAAA;AAAA,IAEnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAEO,MAAM,eAAW;AAAA,EACtB,cAAc;AAAA,QACZ,uBAAU,mBAAmB,EAAE,eAAe,KAAK,CAAC;AAAA,IACpD;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF;",
   "names": []
 }

package/dist/esm/ListItem.js

@@ -44,6 +44,7 @@ const ListItemFrame = styled(ThemeableStack, {
     disabled: {
       true: {
         opacity: 0.5,
+        // TODO breaking types
         pointerEvents: "none"
       }
     }
@@ -88,6 +89,7 @@ const useListItem = (props, {
     scaleIcon = 1,
     scaleSpace = 1,
     subTitle,
+    // text props
     color,
     fontWeight,
     letterSpacing,
@@ -99,7 +101,7 @@ const useListItem = (props, {
     ...rest
   } = props;
   const mediaActiveProps = useMediaPropsActive(props);
-  const size = mediaActiveProps.size || "$4";
+  const size = mediaActiveProps.size || "$true";
   const subtitleSize = `$${+String(size).replace("$", "") - 1}`;
   const iconSize = getFontSize(size) * scaleIcon;
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
@@ -110,61 +112,38 @@ const useListItem = (props, {
     props: {
       fontFamily,
       ...rest,
-      children: /* @__PURE__ */ jsxs(Fragment, {
-        children: [
-          themedIcon ? /* @__PURE__ */ jsxs(Fragment, {
-            children: [
-              themedIcon,
-              /* @__PURE__ */ jsx(Spacer, {
-                size: spaceSize
-              })
-            ]
-          }) : 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" ? /* @__PURE__ */ jsx(Subtitle, {
-                    size: subtitleSize,
-                    children: subTitle
-                  }) : subTitle
-                ]
-              }) : null,
-              contents
-            ]
-          }) : contents,
-          themedIconAfter ? /* @__PURE__ */ jsxs(Fragment, {
-            children: [
-              /* @__PURE__ */ jsx(Spacer, {
-                size: spaceSize
-              }),
-              themedIconAfter
-            ]
-          }) : null
-        ]
-      })
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        themedIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          themedIcon,
+          /* @__PURE__ */ jsx(Spacer, { size: spaceSize })
+        ] }) : 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,
+          contents
+        ] }) : contents,
+        themedIconAfter ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Spacer, { size: spaceSize }),
+          themedIconAfter
+        ] }) : null
+      ] })
     }
   };
 };
 const ListItemComponent = forwardRef((props, ref) => {
   const { props: listItemProps } = useListItem(props);
-  return /* @__PURE__ */ jsx(ListItemFrame, {
-    ref,
-    justifyContent: "space-between",
-    ...listItemProps
-  });
+  return /* @__PURE__ */ jsx(ListItemFrame, { ref, justifyContent: "space-between", ...listItemProps });
 });
 const listItemStaticConfig = {
   inlineProps: /* @__PURE__ */ new Set([
+    // text props go here (can't really optimize them, but we never fully extract listItem anyway)
     "color",
     "fontWeight",
     "fontSize",

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 { getSize } from '@tamagui/get-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  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: '$true',\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 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(true).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 { getSize } from '@tamagui/get-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  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: '$true',\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(true).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": "AA4LY,mBAEE,KAFF;AA5LZ;AAAA,EAGE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAE5B,SAAS,UAAU,wBAAwB;AAC3C,SAAS,gBAAgB,cAAc;AACvC,SAAS,aAA+B,0BAA0B;AAClE,SAAmC,kBAAkB;AA6CrD,MAAM,OAAO;AAEN,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,GAAG;AAAA,UAC1B,mBAAmB,OAAO,MAAM,GAAG;AAAA,UACnC,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;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;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB,oBAAoB,KAAK;AAClD,QAAM,OAAO,iBAAiB,QAAQ;AACtC,QAAM,eAAe,IAAI,CAAC,OAAO,IAAI,EAAE,QAAQ,KAAK,EAAE,IAAI;AAC1D,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,YACJ,iBAAiB,UAAU,IAAI,EAAE,MAAM,iBAAiB,KAAY,KAAK,QAAQ,IACjF;AAEF,QAAM,WAAW,mBAAmB,MAAM,gBAAgB;AAE1D,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,GAAG;AAAA,MACH,UACE,iCACG;AAAA,qBACC,iCACG;AAAA;AAAA,UACD,oBAAC,UAAO,MAAM,WAAW;AAAA,WAC3B,IACE;AAAA,QAEH,SAAS,WACR,qBAAC,UAAO,MAAM,GACX;AAAA,yBAAe,QAAQ,QAAQ,oBAAC,SAAM,MAAa,iBAAM;AAAA,UACzD,WACC,iCACE;AAAA,gCAAC,UAAO,MAAI,MAAC,MAAM,YAAY,OAAO;AAAA,YACrC,OAAO,aAAa,YAAY,eAAe;AAAA;AAAA;AAAA,cAG9C,oBAAC,YAAS,MAAM,cAAe,oBAAS;AAAA,gBAExC;AAAA,aAEJ,IACE;AAAA,UACH;AAAA,WACH,IAEA;AAAA,QAED,kBACC,iCACE;AAAA,8BAAC,UAAO,MAAM,WAAW;AAAA,UACxB;AAAA,WACH,IACE;AAAA,SACN;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,MAAM,oBAAoB,WAA0C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,OAAO,cAAc,IAAI,YAAY,KAAK;AAClD,SAAO,oBAAC,iBAAc,KAAU,gBAAe,iBAAiB,GAAG,eAAe;AACpF,CAAC;AAEM,MAAM,uBAAuB;AAAA,EAClC,aAAa,oBAAI,IAAI;AAAA;AAAA,IAEnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAEO,MAAM,WAAW;AAAA,EACtB,cAAc;AAAA,IACZ,UAAU,mBAAmB,EAAE,eAAe,KAAK,CAAC;AAAA,IACpD;AAAA,EACF;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF;",
   "names": []
 }

package/dist/jsx/ListItem.js

@@ -43,6 +43,7 @@ const ListItemFrame = styled(ThemeableStack, {
     disabled: {
       true: {
         opacity: 0.5,
+        // TODO breaking types
         pointerEvents: "none"
       }
     }
@@ -87,6 +88,7 @@ const useListItem = (props, {
     scaleIcon = 1,
     scaleSpace = 1,
     subTitle,
+    // text props
     color,
     fontWeight,
     letterSpacing,
@@ -98,7 +100,7 @@ const useListItem = (props, {
     ...rest
   } = props;
   const mediaActiveProps = useMediaPropsActive(props);
-  const size = mediaActiveProps.size || "$4";
+  const size = mediaActiveProps.size || "$true";
   const subtitleSize = `$${+String(size).replace("$", "") - 1}`;
   const iconSize = getFontSize(size) * scaleIcon;
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
@@ -118,7 +120,11 @@ const useListItem = (props, {
           {noTextWrap === "all" ? title : <Title size={size}>{title}</Title>}
           {subTitle ? <>
             <Spacer flex size={spaceSize * 0.333} />
-            {typeof subTitle === "string" && noTextWrap !== "all" ? <Subtitle size={subtitleSize}>{subTitle}</Subtitle> : 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}
@@ -136,6 +142,7 @@ const ListItemComponent = forwardRef((props, ref) => {
 });
 const listItemStaticConfig = {
   inlineProps: /* @__PURE__ */ new Set([
+    // text props go here (can't really optimize them, but we never fully extract listItem anyway)
     "color",
     "fontWeight",
     "fontSize",

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 { getSize } from '@tamagui/get-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  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: '$true',\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 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(true).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 { getSize } from '@tamagui/get-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  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: '$true',\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(true).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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",
   "names": []
 }

package/package.json

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

package/src/ListItem.tsx

@@ -168,7 +168,7 @@ export const useListItem = (
   } = props
 
   const mediaActiveProps = useMediaPropsActive(props)
-  const size = mediaActiveProps.size || '$4'
+  const size = mediaActiveProps.size || '$true'
   const subtitleSize = `$${+String(size).replace('$', '') - 1}` as FontSizeTokens
   const iconSize = getFontSize(size) * scaleIcon
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color })