@tamagui/list-item 1.0.1-beta.100

package/dist/esm/wrapStringChildrenInText.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/wrapStringChildrenInText.tsx"],
+  "sourcesContent": ["import { SizeTokens } from '@tamagui/core'\nimport React from 'react'\n\nimport { ListItemText, TextOnlyStyles } from './ListItem'\n\nexport function wrapStringChildrenInText({\n  children,\n  textProps,\n  size,\n  noTextWrap,\n  ...directTextProps\n}: TextOnlyStyles & { children?: React.ReactNode; size?: SizeTokens }) {\n  if (noTextWrap || !children) {\n    return children\n  }\n\n  // in the case of using variables, like so:\n  // <ListItem>Hello, {name}</ListItem>\n  // it gives us props.children as ['Hello, ', 'name']\n  // but we don't want to wrap multiple SizableText around each part\n  // so we group them\n  let allChildren = React.Children.toArray(children)\n  let nextChildren: any[] = []\n  let lastIsString = false\n\n  function concatStringChildren() {\n    if (!lastIsString) return\n    const index = nextChildren.length - 1\n    const childrenStrings = nextChildren[index]\n    nextChildren[index] = (\n      <ListItemText key={index} {...directTextProps} size={size} {...textProps}>\n        {childrenStrings}\n      </ListItemText>\n    )\n  }\n\n  for (const child of allChildren) {\n    const last = nextChildren[nextChildren.length - 1]\n    const isString = typeof child === 'string'\n    if (isString) {\n      if (lastIsString) {\n        last.push(child)\n      } else {\n        nextChildren.push([child])\n      }\n    } else {\n      concatStringChildren()\n      nextChildren.push(child)\n    }\n    lastIsString = isString\n  }\n  concatStringChildren()\n\n  return nextChildren\n}\n"],
+  "mappings": ";;AACA;AAEA;AAEO,kCAAkC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GACkE;AACrE,MAAI,cAAc,CAAC,UAAU;AAC3B,WAAO;AAAA,EACT;AAOA,MAAI,cAAc,MAAM,SAAS,QAAQ,QAAQ;AACjD,MAAI,eAAsB,CAAC;AAC3B,MAAI,eAAe;AAEnB,kCAAgC;AAC9B,QAAI,CAAC;AAAc;AACnB,UAAM,QAAQ,aAAa,SAAS;AACpC,UAAM,kBAAkB,aAAa;AACrC,iBAAa,SACX,oCAAC;AAAA,MAAa,KAAK;AAAA,SAAW;AAAA,MAAiB;AAAA,SAAgB;AAAA,OAC5D,eACH;AAAA,EAEJ;AATS;AAWT,aAAW,SAAS,aAAa;AAC/B,UAAM,OAAO,aAAa,aAAa,SAAS;AAChD,UAAM,WAAW,OAAO,UAAU;AAClC,QAAI,UAAU;AACZ,UAAI,cAAc;AAChB,aAAK,KAAK,KAAK;AAAA,MACjB,OAAO;AACL,qBAAa,KAAK,CAAC,KAAK,CAAC;AAAA,MAC3B;AAAA,IACF,OAAO;AACL,2BAAqB;AACrB,mBAAa,KAAK,KAAK;AAAA,IACzB;AACA,mBAAe;AAAA,EACjB;AACA,uBAAqB;AAErB,SAAO;AACT;AAjDgB;",
+  "names": []
+}

package/dist/jsx/Button.js

@@ -0,0 +1,177 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import {
+  ButtonInsideButtonContext,
+  getButtonSize,
+  getVariableValue,
+  spacedChildren,
+  styled,
+  themeable,
+  useTheme
+} from "@tamagui/core";
+import { getFontSize } from "@tamagui/font-size";
+import { ThemeableStack } from "@tamagui/stacks";
+import { SizableText } from "@tamagui/text";
+import React, { forwardRef, isValidElement, useContext } from "react";
+React["createElement"];
+const ButtonFrame = styled(ThemeableStack, {
+  name: "Button",
+  tag: "button",
+  hoverable: true,
+  pressable: true,
+  backgrounded: true,
+  borderWidth: 1,
+  borderColor: "transparent",
+  justifyContent: "center",
+  alignItems: "center",
+  flexWrap: "nowrap",
+  flexDirection: "row",
+  cursor: "pointer",
+  pressStyle: {
+    borderColor: "transparent"
+  },
+  hoverStyle: {
+    borderColor: "transparent"
+  },
+  focusStyle: {
+    borderColor: "$borderColorFocus"
+  },
+  variants: {
+    size: {
+      "...size": getButtonSize
+    },
+    active: {
+      true: {
+        hoverStyle: {
+          backgroundColor: "$background"
+        }
+      }
+    },
+    disabled: {
+      true: {
+        opacity: 0.5,
+        pointerEvents: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const ButtonText = styled(SizableText, {
+  color: "$color",
+  selectable: false,
+  flexGrow: 1,
+  flexShrink: 1,
+  ellipse: true
+});
+const ButtonComponent = forwardRef((props, ref) => {
+  const {
+    children,
+    icon,
+    iconAfter,
+    noTextWrap,
+    theme: themeName,
+    space,
+    spaceFlex,
+    scaleIcon = 1,
+    scaleSpace = 0.5,
+    color: colorProp,
+    fontWeight,
+    letterSpacing,
+    fontSize,
+    fontFamily,
+    textAlign,
+    textProps,
+    ...rest
+  } = props;
+  const isInsideButton = useContext(ButtonInsideButtonContext);
+  const theme = useTheme();
+  const size = props.size || "$4";
+  let color;
+  if (theme && colorProp && colorProp in theme) {
+    color = theme[colorProp];
+  } else if (colorProp) {
+    color = colorProp;
+  } else {
+    color = theme == null ? void 0 : theme.color;
+  }
+  color = color == null ? void 0 : color.toString();
+  const iconSize = getFontSize(size) * scaleIcon;
+  const addTheme = /* @__PURE__ */ __name((el) => {
+    if (isValidElement(el)) {
+      return el;
+    }
+    if (el) {
+      return React.createElement(el, {
+        color,
+        size: iconSize
+      });
+    }
+    return el;
+  }, "addTheme");
+  const themedIcon = icon ? addTheme(icon) : null;
+  const themedIconAfter = iconAfter ? addTheme(iconAfter) : null;
+  let contents = children;
+  if (!noTextWrap && children) {
+    let concatStringChildren = function() {
+      if (!lastIsString)
+        return;
+      const index = nextChildren.length - 1;
+      const childrenStrings = nextChildren[index];
+      nextChildren[index] = <ButtonText key={index} {...{
+        fontWeight,
+        letterSpacing,
+        fontSize,
+        fontFamily,
+        textAlign,
+        size
+      }} {...colorProp && {
+        color: colorProp
+      }} {...textProps}>{childrenStrings}</ButtonText>;
+    };
+    __name(concatStringChildren, "concatStringChildren");
+    let allChildren = React.Children.toArray(children);
+    let nextChildren = [];
+    let lastIsString = false;
+    for (const child of allChildren) {
+      const last = nextChildren[nextChildren.length - 1];
+      const isString = typeof child === "string";
+      if (isString) {
+        if (lastIsString) {
+          last.push(child);
+        } else {
+          nextChildren.push([child]);
+        }
+      } else {
+        concatStringChildren();
+        nextChildren.push(child);
+      }
+      lastIsString = isString;
+    }
+    concatStringChildren();
+    contents = nextChildren;
+  }
+  return <ButtonInsideButtonContext.Provider value={true}><ButtonFrame fontFamily={fontFamily} {...isInsideButton && {
+    tag: "span"
+  }} ref={ref} {...rest}>{themedIcon || themedIconAfter ? spacedChildren({
+    space: getVariableValue(iconSize) * scaleSpace,
+    spaceFlex,
+    direction: props.flexDirection || "row",
+    children: [themedIcon, contents, themedIconAfter]
+  }) : contents}</ButtonFrame></ButtonInsideButtonContext.Provider>;
+});
+const Button = ButtonFrame.extractable(themeable(ButtonComponent), {
+  inlineProps: /* @__PURE__ */ new Set([
+    "color",
+    "fontWeight",
+    "fontSize",
+    "fontFamily",
+    "letterSpacing",
+    "textAlign"
+  ])
+});
+export {
+  Button,
+  ButtonText
+};

package/dist/jsx/ListItem.js

@@ -0,0 +1,139 @@
+import {
+  Spacer,
+  getSize,
+  getVariableValue,
+  styled,
+  themeable,
+  withStaticProperties
+} from "@tamagui/core";
+import { getFontSize } from "@tamagui/font-size";
+import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
+import { ThemeableStack, YStack } from "@tamagui/stacks";
+import { SizableText, wrapChildrenInText } from "@tamagui/text";
+import React, { forwardRef } from "react";
+React["createElement"];
+const ListItemFrame = styled(ThemeableStack, {
+  name: "ListItem",
+  tag: "li",
+  alignItems: "center",
+  flexWrap: "nowrap",
+  width: "100%",
+  borderColor: "$borderColor",
+  maxWidth: "100%",
+  overflow: "hidden",
+  flexDirection: "row",
+  variants: {
+    size: {
+      "...size": (val, { tokens }) => {
+        return {
+          minHeight: tokens.size[val],
+          paddingHorizontal: tokens.space[val]
+        };
+      }
+    },
+    active: {
+      true: {
+        hoverStyle: {
+          backgroundColor: "$background"
+        }
+      }
+    },
+    disabled: {
+      true: {
+        opacity: 0.5,
+        pointerEvents: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const ListItemText = styled(SizableText, {
+  name: "ListItemText",
+  color: "$color",
+  selectable: false,
+  flexGrow: 1,
+  flexShrink: 1,
+  ellipse: true
+});
+const ListItemSubtitle = styled(ListItemText, {
+  name: "ListItemSubtitle",
+  color: "$colorPress",
+  marginTop: "$-2",
+  opacity: 0.65,
+  ellipse: true,
+  maxWidth: "100%",
+  size: "$3"
+});
+const ListItemTitle = styled(ListItemText, {
+  name: "ListItemTitle",
+  ellipse: true
+});
+const ListItemComponent = forwardRef((props, ref) => {
+  const {
+    children,
+    icon,
+    iconAfter,
+    noTextWrap,
+    theme: themeName,
+    space,
+    spaceFlex,
+    scaleIcon = 1,
+    scaleSpace = 1,
+    subTitle,
+    color,
+    fontWeight,
+    letterSpacing,
+    fontSize,
+    fontFamily,
+    textAlign,
+    textProps,
+    title,
+    ...rest
+  } = props;
+  const size = props.size || "$4";
+  const subtitleSizeToken = getSize(size, -3);
+  const subtitleSize = `$${subtitleSizeToken.key}`;
+  const iconSize = getFontSize(size) * scaleIcon;
+  const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
+  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
+  const spaceSize = getVariableValue(iconSize) * scaleSpace;
+  const contents = wrapChildrenInText(ListItemText, props);
+  return <ListItemFrame fontFamily={fontFamily} ref={ref} {...rest}>
+    {themedIcon ? <>
+      {themedIcon}
+      <Spacer size={spaceSize} />
+    </> : null}
+    {Boolean(title || subTitle) ? <YStack flex={1}>
+      <ListItemTitle>{title}</ListItemTitle>
+      {subTitle ? typeof subTitle === "string" ? <ListItemSubtitle size={subtitleSize}>{subTitle}</ListItemSubtitle> : subTitle : null}
+      {contents}
+    </YStack> : contents}
+    {themedIconAfter ? <>
+      <Spacer flex size={spaceSize} />
+      {themedIconAfter}
+    </> : null}
+  </ListItemFrame>;
+});
+const ListItemInner = ListItemFrame.extractable(themeable(ListItemComponent), {
+  inlineProps: /* @__PURE__ */ new Set([
+    "color",
+    "fontWeight",
+    "fontSize",
+    "fontFamily",
+    "letterSpacing",
+    "textAlign"
+  ])
+});
+const ListItem = withStaticProperties(ListItemInner, {
+  Text: ListItemText,
+  Subtitle: ListItemSubtitle
+});
+export {
+  ListItem,
+  ListItemFrame,
+  ListItemSubtitle,
+  ListItemText
+};
+//# sourceMappingURL=ListItem.js.map

package/dist/jsx/ListItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ListItem.tsx"],
+  "sourcesContent": ["import {\n  FontSizeTokens,\n  GetProps,\n  Spacer,\n  TamaguiComponent,\n  ThemeableProps,\n  getSize,\n  getVariableValue,\n  styled,\n  themeable,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack, YStack } from '@tamagui/stacks'\nimport { SizableText, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ListItemIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null\n\nexport type ListItemProps = Omit<TextParentStyles, 'TextComponent'> &\n  GetProps<typeof ListItemFrame> &\n  ThemeableProps & {\n    // add icon before, passes color and size automatically if Component\n    icon?: IconProp\n    // add icon after, passes color and size automatically if Component\n    iconAfter?: IconProp\n    // adjust icon relative to size\n    // default: -1\n    scaleIcon?: number\n    // make the spacing elements flex\n    spaceFlex?: number | boolean\n    // adjust internal space relative to icon size\n    scaleSpace?: number\n    // title\n    title?: React.ReactNode\n    // subtitle\n    subTitle?: React.ReactNode\n  }\n\nexport const ListItemFrame = styled(ThemeableStack, {\n  name: 'ListItem',\n  tag: 'li',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  width: '100%',\n  borderColor: '$borderColor',\n  maxWidth: '100%',\n  overflow: 'hidden',\n  flexDirection: 'row',\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          minHeight: tokens.size[val],\n          paddingHorizontal: tokens.space[val],\n        }\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  },\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\nexport const ListItemText = styled(SizableText, {\n  name: 'ListItemText',\n  color: '$color',\n  selectable: false,\n  flexGrow: 1,\n  flexShrink: 1,\n  ellipse: true,\n})\n\nexport const ListItemSubtitle = styled(ListItemText, {\n  name: 'ListItemSubtitle',\n  color: '$colorPress',\n  marginTop: '$-2',\n  opacity: 0.65,\n  ellipse: true,\n  maxWidth: '100%',\n  size: '$3',\n})\n\nconst ListItemTitle = styled(ListItemText, {\n  name: 'ListItemTitle',\n  ellipse: true,\n})\n\nconst ListItemComponent = forwardRef((props: ListItemProps, ref) => {\n  // careful not to desctructure and re-order props, order is important\n  const {\n    children,\n    icon,\n    iconAfter,\n    noTextWrap,\n    theme: themeName,\n    space,\n    spaceFlex,\n    scaleIcon = 1,\n    scaleSpace = 1,\n    subTitle,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    title,\n    ...rest\n  } = props as ListItemProps\n\n  const size = props.size || '$4'\n  const subtitleSizeToken = getSize(size, -3)\n  const subtitleSize = `$${subtitleSizeToken.key}` as FontSizeTokens\n  const iconSize = getFontSize(size) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(ListItemText, props)\n\n  return (\n    <ListItemFrame fontFamily={fontFamily} ref={ref as any} {...rest}>\n      {themedIcon ? (\n        <>\n          {themedIcon}\n          <Spacer size={spaceSize} />\n        </>\n      ) : null}\n      {/* helper for common title/subtitle pttern */}\n      {Boolean(title || subTitle) ? (\n        <YStack flex={1}>\n          <ListItemTitle>{title}</ListItemTitle>\n          {subTitle ? (\n            typeof subTitle === 'string' ? (\n              // TODO can use theme but we need to standardize to alt themes\n              // or standardize on subtle colors in themes\n              <ListItemSubtitle size={subtitleSize}>{subTitle}</ListItemSubtitle>\n            ) : (\n              subTitle\n            )\n          ) : null}\n          {contents}\n        </YStack>\n      ) : (\n        contents\n      )}\n      {themedIconAfter ? (\n        <>\n          <Spacer flex size={spaceSize} />\n          {themedIconAfter}\n        </>\n      ) : null}\n    </ListItemFrame>\n  )\n})\n\nconst ListItemInner: TamaguiComponent<ListItemProps, HTMLLIElement | View> =\n  ListItemFrame.extractable(themeable(ListItemComponent as any) as any, {\n    inlineProps: new Set([\n      // text props go here (can't really optimize them, but we never fully extract listItem anyway)\n      'color',\n      'fontWeight',\n      'fontSize',\n      'fontFamily',\n      'letterSpacing',\n      'textAlign',\n    ]),\n  })\n\nexport const ListItem = withStaticProperties(ListItemInner, {\n  Text: ListItemText,\n  Subtitle: ListItemSubtitle,\n})\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/jsx/index.js

@@ -0,0 +1,2 @@
+export * from "./ListItem";
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './ListItem'\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/jsx/useCurrentColor.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useTheme } from "@tamagui/core";
+const useCurrentColor = /* @__PURE__ */ __name((colorProp) => {
+  const theme = useTheme();
+  let color;
+  if (theme && colorProp && colorProp in theme) {
+    color = theme[colorProp];
+  } else if (colorProp) {
+    color = colorProp;
+  } else {
+    color = theme == null ? void 0 : theme.color;
+  }
+  return (color == null ? void 0 : color.toString()) || "";
+}, "useCurrentColor");
+export {
+  useCurrentColor
+};

package/dist/jsx/useGetThemedIcon.js

@@ -0,0 +1,19 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import React, { isValidElement } from "react";
+import { useCurrentColor } from "./useCurrentColor";
+const useGetThemedIcon = /* @__PURE__ */ __name((props) => {
+  const color = useCurrentColor(props.color);
+  return (el) => {
+    if (isValidElement(el)) {
+      return el;
+    }
+    if (el) {
+      return React.createElement(el, props);
+    }
+    return el;
+  };
+}, "useGetThemedIcon");
+export {
+  useGetThemedIcon
+};

package/dist/jsx/wrapStringChildrenInText.js

@@ -0,0 +1,47 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import React from "react";
+import { ListItemText } from "./ListItem";
+function wrapStringChildrenInText({
+  children,
+  textProps,
+  size,
+  noTextWrap,
+  ...directTextProps
+}) {
+  if (noTextWrap || !children) {
+    return children;
+  }
+  let allChildren = React.Children.toArray(children);
+  let nextChildren = [];
+  let lastIsString = false;
+  function concatStringChildren() {
+    if (!lastIsString)
+      return;
+    const index = nextChildren.length - 1;
+    const childrenStrings = nextChildren[index];
+    nextChildren[index] = <ListItemText key={index} {...directTextProps} size={size} {...textProps}>{childrenStrings}</ListItemText>;
+  }
+  __name(concatStringChildren, "concatStringChildren");
+  for (const child of allChildren) {
+    const last = nextChildren[nextChildren.length - 1];
+    const isString = typeof child === "string";
+    if (isString) {
+      if (lastIsString) {
+        last.push(child);
+      } else {
+        nextChildren.push([child]);
+      }
+    } else {
+      concatStringChildren();
+      nextChildren.push(child);
+    }
+    lastIsString = isString;
+  }
+  concatStringChildren();
+  return nextChildren;
+}
+__name(wrapStringChildrenInText, "wrapStringChildrenInText");
+export {
+  wrapStringChildrenInText
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@tamagui/list-item",
+  "version": "1.0.1-beta.100",
+  "sideEffects": [
+    "*.css"
+  ],
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch"
+  },
+  "dependencies": {
+    "@tamagui/core": "^1.0.1-beta.100",
+    "@tamagui/font-size": "^1.0.1-beta.100",
+    "@tamagui/helpers-tamagui": "^1.0.1-beta.100"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.1-beta.100",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14"
+}

package/src/ListItem.tsx

@@ -0,0 +1,200 @@
+import {
+  FontSizeTokens,
+  GetProps,
+  Spacer,
+  TamaguiComponent,
+  ThemeableProps,
+  getSize,
+  getVariableValue,
+  styled,
+  themeable,
+  withStaticProperties,
+} from '@tamagui/core'
+import { getFontSize } from '@tamagui/font-size'
+import { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'
+import { ThemeableStack, YStack } from '@tamagui/stacks'
+import { SizableText, wrapChildrenInText } from '@tamagui/text'
+import React, { FunctionComponent, forwardRef } from 'react'
+import { View } from 'react-native'
+
+// bugfix esbuild strips react jsx: 'preserve'
+React['createElement']
+
+type ListItemIconProps = { color?: string; size?: number }
+type IconProp = JSX.Element | FunctionComponent<ListItemIconProps> | null
+
+export type ListItemProps = Omit<TextParentStyles, 'TextComponent'> &
+  GetProps<typeof ListItemFrame> &
+  ThemeableProps & {
+    // add icon before, passes color and size automatically if Component
+    icon?: IconProp
+    // add icon after, passes color and size automatically if Component
+    iconAfter?: IconProp
+    // adjust icon relative to size
+    // default: -1
+    scaleIcon?: number
+    // make the spacing elements flex
+    spaceFlex?: number | boolean
+    // adjust internal space relative to icon size
+    scaleSpace?: number
+    // title
+    title?: React.ReactNode
+    // subtitle
+    subTitle?: React.ReactNode
+  }
+
+export const ListItemFrame = styled(ThemeableStack, {
+  name: 'ListItem',
+  tag: 'li',
+  alignItems: 'center',
+  flexWrap: 'nowrap',
+  width: '100%',
+  borderColor: '$borderColor',
+  maxWidth: '100%',
+  overflow: 'hidden',
+  flexDirection: 'row',
+
+  variants: {
+    size: {
+      '...size': (val, { tokens }) => {
+        return {
+          minHeight: tokens.size[val],
+          paddingHorizontal: tokens.space[val],
+        }
+      },
+    },
+
+    active: {
+      true: {
+        hoverStyle: {
+          backgroundColor: '$background',
+        },
+      },
+    },
+
+    disabled: {
+      true: {
+        opacity: 0.5,
+        // TODO breaking types
+        pointerEvents: 'none' as any,
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: '$4',
+  },
+})
+
+export const ListItemText = styled(SizableText, {
+  name: 'ListItemText',
+  color: '$color',
+  selectable: false,
+  flexGrow: 1,
+  flexShrink: 1,
+  ellipse: true,
+})
+
+export const ListItemSubtitle = styled(ListItemText, {
+  name: 'ListItemSubtitle',
+  color: '$colorPress',
+  marginTop: '$-2',
+  opacity: 0.65,
+  ellipse: true,
+  maxWidth: '100%',
+  size: '$3',
+})
+
+const ListItemTitle = styled(ListItemText, {
+  name: 'ListItemTitle',
+  ellipse: true,
+})
+
+const ListItemComponent = forwardRef((props: ListItemProps, ref) => {
+  // careful not to desctructure and re-order props, order is important
+  const {
+    children,
+    icon,
+    iconAfter,
+    noTextWrap,
+    theme: themeName,
+    space,
+    spaceFlex,
+    scaleIcon = 1,
+    scaleSpace = 1,
+    subTitle,
+
+    // text props
+    color,
+    fontWeight,
+    letterSpacing,
+    fontSize,
+    fontFamily,
+    textAlign,
+    textProps,
+    title,
+    ...rest
+  } = props as ListItemProps
+
+  const size = props.size || '$4'
+  const subtitleSizeToken = getSize(size, -3)
+  const subtitleSize = `$${subtitleSizeToken.key}` as FontSizeTokens
+  const iconSize = getFontSize(size) * scaleIcon
+  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })
+  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)
+  const spaceSize = getVariableValue(iconSize) * scaleSpace
+  const contents = wrapChildrenInText(ListItemText, props)
+
+  return (
+    <ListItemFrame fontFamily={fontFamily} ref={ref as any} {...rest}>
+      {themedIcon ? (
+        <>
+          {themedIcon}
+          <Spacer size={spaceSize} />
+        </>
+      ) : null}
+      {/* helper for common title/subtitle pttern */}
+      {Boolean(title || subTitle) ? (
+        <YStack flex={1}>
+          <ListItemTitle>{title}</ListItemTitle>
+          {subTitle ? (
+            typeof subTitle === 'string' ? (
+              // TODO can use theme but we need to standardize to alt themes
+              // or standardize on subtle colors in themes
+              <ListItemSubtitle size={subtitleSize}>{subTitle}</ListItemSubtitle>
+            ) : (
+              subTitle
+            )
+          ) : null}
+          {contents}
+        </YStack>
+      ) : (
+        contents
+      )}
+      {themedIconAfter ? (
+        <>
+          <Spacer flex size={spaceSize} />
+          {themedIconAfter}
+        </>
+      ) : null}
+    </ListItemFrame>
+  )
+})
+
+const ListItemInner: TamaguiComponent<ListItemProps, HTMLLIElement | View> =
+  ListItemFrame.extractable(themeable(ListItemComponent as any) as any, {
+    inlineProps: new Set([
+      // text props go here (can't really optimize them, but we never fully extract listItem anyway)
+      'color',
+      'fontWeight',
+      'fontSize',
+      'fontFamily',
+      'letterSpacing',
+      'textAlign',
+    ]),
+  })
+
+export const ListItem = withStaticProperties(ListItemInner, {
+  Text: ListItemText,
+  Subtitle: ListItemSubtitle,
+})

package/src/index.ts

@@ -0,0 +1 @@
+export * from './ListItem'