@tamagui/list-item 1.1.13 → 1.2.0

package/dist/cjs/ListItem.js

@@ -127,7 +127,7 @@ const useListItem = (props, {
   const iconSize = (0, import_font_size.getFontSize)(size) * scaleIcon;
   const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
   const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
-  const spaceSize = (0, import_core.getVariableValue)((0, import_core.getTokens)(true).space[mediaActiveProps.space] ?? iconSize) * scaleSpace;
+  const spaceSize = (0, import_core.getVariableValue)((0, import_core.getTokens)().space[mediaActiveProps.space] ?? iconSize) * scaleSpace;
   const contents = (0, import_text.wrapChildrenInText)(Text, mediaActiveProps);
   return {
     props: {

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 || '$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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",
+  "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().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/dist/esm/ListItem.js

@@ -106,7 +106,7 @@ const useListItem = (props, {
   const iconSize = getFontSize(size) * scaleIcon;
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
   const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
-  const spaceSize = getVariableValue(getTokens(true).space[mediaActiveProps.space] ?? iconSize) * scaleSpace;
+  const spaceSize = getVariableValue(getTokens().space[mediaActiveProps.space] ?? iconSize) * scaleSpace;
   const contents = wrapChildrenInText(Text, mediaActiveProps);
   return {
     props: {

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 || '$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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",
+  "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().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/dist/jsx/ListItem.js

@@ -105,7 +105,7 @@ const useListItem = (props, {
   const iconSize = getFontSize(size) * scaleIcon;
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
   const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
-  const spaceSize = getVariableValue(getTokens(true).space[mediaActiveProps.space] ?? iconSize) * scaleSpace;
+  const spaceSize = getVariableValue(getTokens().space[mediaActiveProps.space] ?? iconSize) * scaleSpace;
   const contents = wrapChildrenInText(Text, mediaActiveProps);
   return {
     props: {

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 || '$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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",
+  "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().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.13",
+  "version": "1.2.0",
   "sideEffects": [
     "*.css"
   ],
@@ -21,18 +21,18 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@tamagui/core": "^1.1.13",
-    "@tamagui/font-size": "^1.1.13",
-    "@tamagui/get-size": "^1.1.13",
-    "@tamagui/helpers-tamagui": "^1.1.13",
-    "@tamagui/text": "^1.1.13"
+    "@tamagui/core": "^1.2.0",
+    "@tamagui/font-size": "^1.2.0",
+    "@tamagui/get-size": "^1.2.0",
+    "@tamagui/helpers-tamagui": "^1.2.0",
+    "@tamagui/text": "^1.2.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.1.13",
+    "@tamagui/build": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/ListItem.tsx

@@ -174,7 +174,7 @@ export const useListItem = (
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color })
   const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)
   const spaceSize =
-    getVariableValue(getTokens(true).space[mediaActiveProps.space as any] ?? iconSize) *
+    getVariableValue(getTokens().space[mediaActiveProps.space as any] ?? iconSize) *
     scaleSpace
   // @ts-ignore noTextWrap = all is ok
   const contents = wrapChildrenInText(Text, mediaActiveProps)