@tamagui/list-item 2.7.7 → 3.0.0-beta.643.1

package/dist/jsx/ListItem.mjs

@@ -1,231 +1,162 @@
-import { getFontSize } from "@tamagui/font-size";
 import { getFontSized } from "@tamagui/get-font-sized";
-import { getSize, getSpace } from "@tamagui/get-token";
+import { oneSizeTokenSmaller } from "@tamagui/get-token";
 import { withStaticProperties } from "@tamagui/helpers";
-import { getIcon, useCurrentColor } from "@tamagui/helpers-tamagui";
+import { getThemedIconSize, useGetThemedIcon } from "@tamagui/helpers-tamagui";
 import { YStack } from "@tamagui/stacks";
+import { resolveSizeToken } from "@tamagui/size";
 import { SizableText, wrapChildrenInText } from "@tamagui/text";
-import { createStyledContext, styled, View } from "@tamagui/web";
+import { View, createStyledContext, createStyledHOC, getVariableValue, styled, useProps } from "@tamagui/web";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
 const NAME = "ListItem";
 const context = createStyledContext({
-  size: void 0,
-  variant: void 0,
-  color: void 0
+	size: void 0,
+	variant: void 0,
+	color: void 0
 });
+const listItemSizeVariant = (val, { tokens }) => {
+	const sizeToken = resolveSizeToken(val, "size");
+	const spaceToken = resolveSizeToken(val, "space");
+	const size = typeof sizeToken === "number" ? sizeToken : tokens.size[sizeToken];
+	const sizeVal = getVariableValue(size);
+	return {
+		minHeight: size,
+		paddingHorizontal: tokens.space[spaceToken],
+		paddingVertical: Math.max(0, Math.round(sizeVal * .36 - 9)),
+		gap: getThemedIconSize(sizeToken, .4)
+	};
+};
+const listItemSubtitleSizeVariant = (val, extras) => {
+	const fontSizeToken = resolveSizeToken(val, "fontSize");
+	const oneSmaller = oneSizeTokenSmaller(fontSizeToken);
+	return getFontSized(oneSmaller, extras);
+};
 const ListItemFrame = styled(View, {
-  context,
-  name: NAME,
-  render: "li",
-  role: "listitem",
-  variants: {
-    unstyled: {
-      false: {
-        size: "$true",
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexWrap: "nowrap",
-        borderColor: "$borderColor",
-        width: "100%",
-        maxWidth: "100%",
-        overflow: "hidden",
-        flexDirection: "row",
-        backgroundColor: "$background",
-        cursor: "default",
-        hoverStyle: {
-          backgroundColor: "$backgroundHover",
-          borderColor: "$borderColorHover"
-        },
-        pressStyle: {
-          backgroundColor: "$backgroundPress",
-          borderColor: "$borderColorPress"
-        }
-      }
-    },
-    variant: {
-      outlined: process.env.TAMAGUI_HEADLESS === "1" ? {} : {
-        backgroundColor: "transparent",
-        borderWidth: 1,
-        borderColor: "$borderColor",
-        hoverStyle: {
-          backgroundColor: "transparent",
-          borderColor: "$borderColorHover"
-        },
-        pressStyle: {
-          backgroundColor: "transparent",
-          borderColor: "$borderColorPress"
-        }
-      }
-    },
-    size: {
-      "...size": (val, {
-        tokens
-      }) => {
-        return {
-          minHeight: tokens.size[val],
-          paddingHorizontal: tokens.space[val],
-          paddingVertical: getSpace(tokens.space[val], {
-            shift: -4
-          })
-        };
-      }
-    },
-    active: {
-      true: {
-        hoverStyle: {
-          backgroundColor: "$background"
-        }
-      }
-    },
-    disabled: {
-      true: {
-        opacity: 0.5,
-        pointerEvents: "none"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	context,
+	displayName: NAME,
+	render: "li",
+	role: "listitem",
+	size: true,
+	alignItems: "center",
+	justifyContent: "space-between",
+	flexWrap: "nowrap",
+	width: "100%",
+	maxWidth: "100%",
+	overflow: "hidden",
+	flexDirection: "row",
+	variants: {
+		size: {
+			true: listItemSizeVariant,
+			Size: listItemSizeVariant
+		},
+		disabled: { true: { pointerEvents: "none" } }
+	}
 });
 const ListItemText = styled(SizableText, {
-  context,
-  name: "ListItemText",
-  variants: {
-    unstyled: {
-      false: {
-        color: "$color",
-        size: "$true",
-        flexGrow: 1,
-        flexShrink: 1,
-        ellipsis: true,
-        cursor: "inherit"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	context,
+	displayName: "ListItemText",
+	size: true,
+	flexGrow: 1,
+	flexShrink: 1,
+	ellipsis: true,
+	cursor: "inherit"
 });
 const ListItemSubtitle = styled(ListItemText, {
-  name: "ListItemSubtitle",
-  context,
-  variants: {
-    unstyled: {
-      false: {
-        opacity: 0.6,
-        maxWidth: "100%",
-        color: "$color"
-      }
-    },
-    size: {
-      "...size": (val, extras) => {
-        const oneSmaller = getSize(val, {
-          shift: -1,
-          excludeHalfSteps: true
-        });
-        const fontStyle = getFontSized(oneSmaller.key, extras);
-        return fontStyle;
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "ListItemSubtitle",
+	context,
+	opacity: .6,
+	maxWidth: "100%",
+	variants: { size: {
+		true: listItemSubtitleSizeVariant,
+		Size: listItemSubtitleSizeVariant
+	} }
 });
 const ListItemTitle = styled(ListItemText, {
-  name: "ListItemTitle",
-  context,
-  variants: {
-    unstyled: {
-      false: {}
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "ListItemTitle",
+	context
 });
-const ListItemIcon = props => {
-  const {
-    children,
-    size,
-    scaleIcon = 1
-  } = props;
-  const styledContext = context.useStyledContext();
-  if (!styledContext) {
-    throw new Error("ListItem.Icon must be used within a ListItem");
-  }
-  const sizeToken = size ?? styledContext.size ?? "$true";
-  const iconColor = useCurrentColor(styledContext.color);
-  const iconSize = getFontSize(sizeToken) * scaleIcon;
-  return getIcon(children, {
-    size: iconSize,
-    color: iconColor
-  });
+const ListItemIcon = (props) => {
+	const { children, size, scaleIcon = 1 } = props;
+	const styledContext = context.useStyledContext();
+	if (!styledContext) {
+		throw new Error("ListItem.Icon must be used within a ListItem");
+	}
+	const sizeToken = size ?? styledContext.size ?? true;
+	const contextColor = styledContext.color;
+	const iconColorProp = contextColor === "unset" || typeof contextColor === "number" ? void 0 : contextColor;
+	const iconSize = getThemedIconSize(sizeToken, scaleIcon);
+	const getThemedIcon = useGetThemedIcon({
+		size: iconSize,
+		color: iconColorProp
+	});
+	return getThemedIcon(children);
 };
-const ListItemComponent = ListItemFrame.styleable(function ListItem(propsIn, ref) {
-  const {
-    children,
-    icon,
-    iconAfter,
-    scaleIcon = 1,
-    unstyled = false,
-    subTitle,
-    title,
-    iconSize,
-    ...rest
-  } = propsIn;
-  const size = propsIn.size || "$true";
-  const styledContext = context.useStyledContext();
-  const iconColor = useCurrentColor(styledContext?.color);
-  const iconSizeNumber = getFontSize(iconSize || size) * scaleIcon;
-  const iconSpacing = iconSizeNumber * 0.4;
-  const themedIcon = icon ? /* @__PURE__ */jsx(View, {
-    marginRight: iconSpacing,
-    children: getIcon(icon, {
-      size: iconSizeNumber,
-      color: iconColor
-    })
-  }) : null;
-  const themedIconAfter = iconAfter ? /* @__PURE__ */jsx(View, {
-    marginLeft: iconSpacing,
-    children: getIcon(iconAfter, {
-      size: iconSizeNumber,
-      color: iconColor
-    })
-  }) : null;
-  const wrappedChildren = wrapChildrenInText(ListItemText, {
-    children
-  }, propsIn.unstyled !== true ? {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1",
-    fontSize: propsIn.size
-  } : void 0);
-  return /* @__PURE__ */jsxs(ListItemFrame, {
-    ref,
-    ...rest,
-    children: [themedIcon, title || subTitle ? /* @__PURE__ */jsxs(YStack, {
-      flex: 1,
-      children: [title ? typeof title === "string" ? /* @__PURE__ */jsx(ListItemTitle, {
-        unstyled,
-        size,
-        children: title
-      }) : title : null, subTitle ? /* @__PURE__ */jsx(Fragment, {
-        children: typeof subTitle === "string" ? /* @__PURE__ */jsx(ListItemSubtitle, {
-          unstyled,
-          size,
-          children: subTitle
-        }) : subTitle
-      }) : null, wrappedChildren]
-    }) : wrappedChildren, themedIconAfter]
-  });
+const ListItemComponent = createStyledHOC(ListItemFrame, function ListItem(propsIn, ref) {
+	const processedProps = useProps(propsIn, {
+		noNormalize: true,
+		noExpand: true
+	});
+	const { children, icon, iconAfter, scaleIcon = 1, subTitle, title, iconSize, color, ...rest } = processedProps;
+	const styledContext = context.useStyledContext();
+	const size = rest.size ?? propsIn.size ?? styledContext?.size ?? true;
+	const contextColor = color ?? propsIn.color ?? styledContext?.color;
+	const iconColorProp = contextColor === "unset" || typeof contextColor === "number" ? void 0 : contextColor;
+	const iconSizeNumber = getThemedIconSize(iconSize ?? size, scaleIcon);
+	const getThemedIcon = useGetThemedIcon({
+		size: iconSizeNumber,
+		color: iconColorProp
+	});
+	const themedIcon = icon ? getThemedIcon(icon) : null;
+	const themedIconAfter = iconAfter ? getThemedIcon(iconAfter) : null;
+	const wrappedChildren = wrapChildrenInText(ListItemText, { children }, { size });
+	const listItemContext = {
+		...styledContext,
+		color: contextColor,
+		size,
+		variant: rest.variant ?? propsIn.variant ?? styledContext?.variant
+	};
+	const frameProps = {
+		size,
+		variant: listItemContext.variant,
+		...rest
+	};
+	return /* @__PURE__ */ jsx(context.Provider, {
+		...listItemContext,
+		children: /* @__PURE__ */ jsx(ListItemFrame, {
+			ref,
+			...frameProps,
+			children: /* @__PURE__ */ jsxs(context.Provider, {
+				...listItemContext,
+				children: [
+					themedIcon,
+					title || subTitle ? /* @__PURE__ */ jsxs(YStack, {
+						flex: 1,
+						children: [
+							title ? typeof title === "string" ? /* @__PURE__ */ jsx(ListItemTitle, {
+								size,
+								children: title
+							}) : title : null,
+							subTitle ? /* @__PURE__ */ jsx(Fragment, { children: typeof subTitle === "string" ? /* @__PURE__ */ jsx(ListItemSubtitle, {
+								size,
+								children: subTitle
+							}) : subTitle }) : null,
+							wrappedChildren
+						]
+					}) : wrappedChildren,
+					themedIconAfter
+				]
+			})
+		})
+	});
 });
 const ListItem2 = withStaticProperties(ListItemComponent, {
-  Apply: context.Provider,
-  Frame: ListItemFrame,
-  Text: ListItemText,
-  Subtitle: ListItemSubtitle,
-  Icon: ListItemIcon,
-  Title: ListItemTitle
+	Apply: context.Provider,
+	Frame: ListItemFrame,
+	Text: ListItemText,
+	Subtitle: ListItemSubtitle,
+	Icon: ListItemIcon,
+	Title: ListItemTitle
 });
-export { ListItem2 as ListItem };
+
+export { ListItem2 as ListItem, listItemSizeVariant };
 //# sourceMappingURL=ListItem.mjs.map

package/dist/jsx/ListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["getFontSize","getFontSized","getSize","getSpace","withStaticProperties","getIcon","useCurrentColor","YStack","SizableText","wrapChildrenInText","createStyledContext","styled","View","Fragment","jsx","jsxs","NAME","context","size","variant","color","ListItemFrame","name","render","role","variants","unstyled","false","alignItems","justifyContent","flexWrap","borderColor","width","maxWidth","overflow","flexDirection","backgroundColor","cursor","hoverStyle","pressStyle","outlined","process","env","TAMAGUI_HEADLESS","borderWidth","...size","val","tokens","minHeight","paddingHorizontal","space","paddingVertical","shift","active","true","disabled","opacity","pointerEvents","defaultVariants","ListItemText","flexGrow","flexShrink","ellipsis","ListItemSubtitle","extras","oneSmaller","excludeHalfSteps","fontStyle","key","ListItemTitle","ListItemIcon","props","children","scaleIcon","styledContext","useStyledContext","Error","sizeToken","iconColor","iconSize","ListItemComponent","styleable","ListItem","propsIn","ref","icon","iconAfter","subTitle","title","rest","iconSizeNumber","iconSpacing","themedIcon","marginRight","themedIconAfter","marginLeft","wrappedChildren","fontSize","flex","ListItem2","Apply","Provider","Frame","Text","Subtitle","Icon","Title"],"sources":["../../src/ListItem.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItem.js","names":[],"sources":["jsx/ListItem.js"],"sourcesContent":["import { getFontSized } from \"@tamagui/get-font-sized\";\nimport { oneSizeTokenSmaller } from \"@tamagui/get-token\";\nimport { withStaticProperties } from \"@tamagui/helpers\";\nimport { getThemedIconSize, useGetThemedIcon } from \"@tamagui/helpers-tamagui\";\nimport { YStack } from \"@tamagui/stacks\";\nimport { resolveSizeToken } from \"@tamagui/size\";\nimport { SizableText, wrapChildrenInText } from \"@tamagui/text\";\nimport {\n  createStyledContext,\n  createStyledHOC,\n  getVariableValue,\n  styled,\n  useProps,\n  View\n} from \"@tamagui/web\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nconst NAME = \"ListItem\";\nconst context = createStyledContext({\n  size: void 0,\n  variant: void 0,\n  color: void 0\n});\nconst listItemSizeVariant = (val, { tokens }) => {\n  const sizeToken = resolveSizeToken(val, \"size\");\n  const spaceToken = resolveSizeToken(val, \"space\");\n  const size = typeof sizeToken === \"number\" ? sizeToken : tokens.size[sizeToken];\n  const sizeVal = getVariableValue(size);\n  return {\n    minHeight: size,\n    paddingHorizontal: tokens.space[spaceToken],\n    paddingVertical: Math.max(0, Math.round(sizeVal * 0.36 - 9)),\n    gap: getThemedIconSize(sizeToken, 0.4)\n  };\n};\nconst listItemSubtitleSizeVariant = (val, extras) => {\n  const fontSizeToken = resolveSizeToken(val, \"fontSize\");\n  const oneSmaller = oneSizeTokenSmaller(fontSizeToken);\n  return getFontSized(oneSmaller, extras);\n};\nconst ListItemFrame = styled(View, {\n  context,\n  displayName: NAME,\n  render: \"li\",\n  role: \"listitem\",\n  size: true,\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  flexWrap: \"nowrap\",\n  width: \"100%\",\n  maxWidth: \"100%\",\n  overflow: \"hidden\",\n  flexDirection: \"row\",\n  variants: {\n    size: {\n      true: listItemSizeVariant,\n      Size: listItemSizeVariant\n    },\n    disabled: {\n      true: {\n        pointerEvents: \"none\"\n      }\n    }\n  }\n});\nconst ListItemText = styled(SizableText, {\n  context,\n  displayName: \"ListItemText\",\n  size: true,\n  flexGrow: 1,\n  flexShrink: 1,\n  ellipsis: true,\n  cursor: \"inherit\"\n});\nconst ListItemSubtitle = styled(ListItemText, {\n  displayName: \"ListItemSubtitle\",\n  context,\n  opacity: 0.6,\n  maxWidth: \"100%\",\n  variants: {\n    size: {\n      true: listItemSubtitleSizeVariant,\n      Size: listItemSubtitleSizeVariant\n    }\n  }\n});\nconst ListItemTitle = styled(ListItemText, {\n  displayName: \"ListItemTitle\",\n  context\n});\nconst ListItemIcon = (props) => {\n  const { children, size, scaleIcon = 1 } = props;\n  const styledContext = context.useStyledContext();\n  if (!styledContext) {\n    throw new Error(\"ListItem.Icon must be used within a ListItem\");\n  }\n  const sizeToken = size ?? styledContext.size ?? true;\n  const contextColor = styledContext.color;\n  const iconColorProp = contextColor === \"unset\" || typeof contextColor === \"number\" ? void 0 : contextColor;\n  const iconSize = getThemedIconSize(sizeToken, scaleIcon);\n  const getThemedIcon = useGetThemedIcon({\n    size: iconSize,\n    color: iconColorProp\n  });\n  return getThemedIcon(children);\n};\nconst ListItemComponent = createStyledHOC(\n  ListItemFrame,\n  function ListItem(propsIn, ref) {\n    const processedProps = useProps(propsIn, {\n      noNormalize: true,\n      noExpand: true\n    });\n    const {\n      children,\n      icon,\n      iconAfter,\n      scaleIcon = 1,\n      subTitle,\n      title,\n      iconSize,\n      color,\n      ...rest\n    } = processedProps;\n    const styledContext = context.useStyledContext();\n    const size = rest.size ?? propsIn.size ?? styledContext?.size ?? true;\n    const contextColor = color ?? propsIn.color ?? styledContext?.color;\n    const iconColorProp = contextColor === \"unset\" || typeof contextColor === \"number\" ? void 0 : contextColor;\n    const iconSizeNumber = getThemedIconSize(iconSize ?? size, scaleIcon);\n    const getThemedIcon = useGetThemedIcon({\n      size: iconSizeNumber,\n      color: iconColorProp\n    });\n    const themedIcon = icon ? getThemedIcon(icon) : null;\n    const themedIconAfter = iconAfter ? getThemedIcon(iconAfter) : null;\n    const wrappedChildren = wrapChildrenInText(ListItemText, { children }, { size });\n    const listItemContext = {\n      ...styledContext,\n      color: contextColor,\n      size,\n      variant: rest.variant ?? propsIn.variant ?? styledContext?.variant\n    };\n    const frameProps = {\n      size,\n      variant: listItemContext.variant,\n      ...rest\n    };\n    return /* @__PURE__ */ jsx(context.Provider, { ...listItemContext, children: /* @__PURE__ */ jsx(ListItemFrame, { ref, ...frameProps, children: /* @__PURE__ */ jsxs(context.Provider, { ...listItemContext, children: [\n      themedIcon,\n      title || subTitle ? /* @__PURE__ */ jsxs(YStack, { flex: 1, children: [\n        title ? typeof title === \"string\" ? /* @__PURE__ */ jsx(ListItemTitle, { size, children: title }) : title : null,\n        subTitle ? /* @__PURE__ */ jsx(Fragment, { children: typeof subTitle === \"string\" ? /* @__PURE__ */ jsx(ListItemSubtitle, { size, children: subTitle }) : subTitle }) : null,\n        wrappedChildren\n      ] }) : wrappedChildren,\n      themedIconAfter\n    ] }) }) });\n  }\n);\nconst ListItem2 = withStaticProperties(ListItemComponent, {\n  Apply: context.Provider,\n  Frame: ListItemFrame,\n  Text: ListItemText,\n  Subtitle: ListItemSubtitle,\n  Icon: ListItemIcon,\n  Title: ListItemTitle\n});\nexport {\n  ListItem2 as ListItem,\n  listItemSizeVariant\n};\n//# sourceMappingURL=ListItem.js.map\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,OAAO;AACb,MAAM,UAAU,oBAAoB;CAClC,MAAM,KAAK;CACX,SAAS,KAAK;CACd,OAAO,KAAK;AACd,CAAC;AACD,MAAM,uBAAuB,KAAK,EAAE,aAAa;CAC/C,MAAM,YAAY,iBAAiB,KAAK,MAAM;CAC9C,MAAM,aAAa,iBAAiB,KAAK,OAAO;CAChD,MAAM,OAAO,OAAO,cAAc,WAAW,YAAY,OAAO,KAAK;CACrE,MAAM,UAAU,iBAAiB,IAAI;CACrC,OAAO;EACL,WAAW;EACX,mBAAmB,OAAO,MAAM;EAChC,iBAAiB,KAAK,IAAI,GAAG,KAAK,MAAM,UAAU,MAAO,CAAC,CAAC;EAC3D,KAAK,kBAAkB,WAAW,EAAG;CACvC;AACF;AACA,MAAM,+BAA+B,KAAK,WAAW;CACnD,MAAM,gBAAgB,iBAAiB,KAAK,UAAU;CACtD,MAAM,aAAa,oBAAoB,aAAa;CACpD,OAAO,aAAa,YAAY,MAAM;AACxC;AACA,MAAM,gBAAgB,OAAO,MAAM;CACjC;CACA,aAAa;CACb,QAAQ;CACR,MAAM;CACN,MAAM;CACN,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,OAAO;CACP,UAAU;CACV,UAAU;CACV,eAAe;CACf,UAAU;EACR,MAAM;GACJ,MAAM;GACN,MAAM;EACR;EACA,UAAU,EACR,MAAM,EACJ,eAAe,OACjB,EACF;CACF;AACF,CAAC;AACD,MAAM,eAAe,OAAO,aAAa;CACvC;CACA,aAAa;CACb,MAAM;CACN,UAAU;CACV,YAAY;CACZ,UAAU;CACV,QAAQ;AACV,CAAC;AACD,MAAM,mBAAmB,OAAO,cAAc;CAC5C,aAAa;CACb;CACA,SAAS;CACT,UAAU;CACV,UAAU,EACR,MAAM;EACJ,MAAM;EACN,MAAM;CACR,EACF;AACF,CAAC;AACD,MAAM,gBAAgB,OAAO,cAAc;CACzC,aAAa;CACb;AACF,CAAC;AACD,MAAM,gBAAgB,UAAU;CAC9B,MAAM,EAAE,UAAU,MAAM,YAAY,MAAM;CAC1C,MAAM,gBAAgB,QAAQ,iBAAiB;CAC/C,IAAI,CAAC,eAAe;EAClB,MAAM,IAAI,MAAM,8CAA8C;CAChE;CACA,MAAM,YAAY,QAAQ,cAAc,QAAQ;CAChD,MAAM,eAAe,cAAc;CACnC,MAAM,gBAAgB,iBAAiB,WAAW,OAAO,iBAAiB,WAAW,KAAK,IAAI;CAC9F,MAAM,WAAW,kBAAkB,WAAW,SAAS;CACvD,MAAM,gBAAgB,iBAAiB;EACrC,MAAM;EACN,OAAO;CACT,CAAC;CACD,OAAO,cAAc,QAAQ;AAC/B;AACA,MAAM,oBAAoB,gBACxB,eACA,SAAS,SAAS,SAAS,KAAK;CAC9B,MAAM,iBAAiB,SAAS,SAAS;EACvC,aAAa;EACb,UAAU;CACZ,CAAC;CACD,MAAM,EACJ,UACA,MACA,WACA,YAAY,GACZ,UACA,OACA,UACA,OACA,GAAG,SACD;CACJ,MAAM,gBAAgB,QAAQ,iBAAiB;CAC/C,MAAM,OAAO,KAAK,QAAQ,QAAQ,QAAQ,eAAe,QAAQ;CACjE,MAAM,eAAe,SAAS,QAAQ,SAAS,eAAe;CAC9D,MAAM,gBAAgB,iBAAiB,WAAW,OAAO,iBAAiB,WAAW,KAAK,IAAI;CAC9F,MAAM,iBAAiB,kBAAkB,YAAY,MAAM,SAAS;CACpE,MAAM,gBAAgB,iBAAiB;EACrC,MAAM;EACN,OAAO;CACT,CAAC;CACD,MAAM,aAAa,OAAO,cAAc,IAAI,IAAI;CAChD,MAAM,kBAAkB,YAAY,cAAc,SAAS,IAAI;CAC/D,MAAM,kBAAkB,mBAAmB,cAAc,EAAE,SAAS,GAAG,EAAE,KAAK,CAAC;CAC/E,MAAM,kBAAkB;EACtB,GAAG;EACH,OAAO;EACP;EACA,SAAS,KAAK,WAAW,QAAQ,WAAW,eAAe;CAC7D;CACA,MAAM,aAAa;EACjB;EACA,SAAS,gBAAgB;EACzB,GAAG;CACL;CACA,OAAuB,oBAAI,QAAQ,UAAU;EAAE,GAAG;EAAiB,UAA0B,oBAAI,eAAe;GAAE;GAAK,GAAG;GAAY,UAA0B,qBAAK,QAAQ,UAAU;IAAE,GAAG;IAAiB,UAAU;KACrN;KACA,SAAS,WAA2B,qBAAK,QAAQ;MAAE,MAAM;MAAG,UAAU;OACpE,QAAQ,OAAO,UAAU,WAA2B,oBAAI,eAAe;QAAE;QAAM,UAAU;OAAM,CAAC,IAAI,QAAQ;OAC5G,WAA2B,oBAAI,UAAU,EAAE,UAAU,OAAO,aAAa,WAA2B,oBAAI,kBAAkB;QAAE;QAAM,UAAU;OAAS,CAAC,IAAI,SAAS,CAAC,IAAI;OACxK;MACF;KAAE,CAAC,IAAI;KACP;IACF;GAAE,CAAC;EAAE,CAAC;CAAE,CAAC;AACX,CACF;AACA,MAAM,YAAY,qBAAqB,mBAAmB;CACxD,OAAO,QAAQ;CACf,OAAO;CACP,MAAM;CACN,UAAU;CACV,MAAM;CACN,OAAO;AACT,CAAC"}

package/dist/jsx/ListItem.native.cjs

@@ -0,0 +1,192 @@
+"use strict";
+
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ListItem_exports = {};
+__export(ListItem_exports, {
+	ListItem: () => ListItem2,
+	listItemSizeVariant: () => listItemSizeVariant
+});
+module.exports = __toCommonJS(ListItem_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_get_font_sized = require("@tamagui/get-font-sized");
+var import_get_token = require("@tamagui/get-token");
+var import_helpers = require("@tamagui/helpers");
+var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
+var import_stacks = require("@tamagui/stacks");
+var import_size = require("@tamagui/size");
+var import_text = require("@tamagui/text");
+var import_web = require("@tamagui/web");
+var NAME = "ListItem";
+var context = (0, import_web.createStyledContext)({
+	size: void 0,
+	variant: void 0,
+	color: void 0
+});
+var listItemSizeVariant = function(val, param) {
+	var { tokens } = param;
+	var sizeToken = (0, import_size.resolveSizeToken)(val, "size");
+	var spaceToken = (0, import_size.resolveSizeToken)(val, "space");
+	var size = typeof sizeToken === "number" ? sizeToken : tokens.size[sizeToken];
+	var sizeVal = (0, import_web.getVariableValue)(size);
+	return {
+		minHeight: size,
+		paddingHorizontal: tokens.space[spaceToken],
+		paddingVertical: Math.max(0, Math.round(sizeVal * .36 - 9)),
+		gap: (0, import_helpers_tamagui.getThemedIconSize)(sizeToken, .4)
+	};
+};
+var listItemSubtitleSizeVariant = function(val, extras) {
+	var fontSizeToken = (0, import_size.resolveSizeToken)(val, "fontSize");
+	var oneSmaller = (0, import_get_token.oneSizeTokenSmaller)(fontSizeToken);
+	return (0, import_get_font_sized.getFontSized)(oneSmaller, extras);
+};
+var ListItemFrame = (0, import_web.styled)(import_web.View, {
+	context,
+	displayName: NAME,
+	render: "li",
+	role: "listitem",
+	size: true,
+	alignItems: "center",
+	justifyContent: "space-between",
+	flexWrap: "nowrap",
+	width: "100%",
+	maxWidth: "100%",
+	overflow: "hidden",
+	flexDirection: "row",
+	variants: {
+		size: {
+			true: listItemSizeVariant,
+			Size: listItemSizeVariant
+		},
+		disabled: { true: { pointerEvents: "none" } }
+	}
+});
+var ListItemText = (0, import_web.styled)(import_text.SizableText, {
+	context,
+	displayName: "ListItemText",
+	size: true,
+	flexGrow: 1,
+	flexShrink: 1,
+	ellipsis: true,
+	cursor: "inherit"
+});
+var ListItemSubtitle = (0, import_web.styled)(ListItemText, {
+	displayName: "ListItemSubtitle",
+	context,
+	opacity: .6,
+	maxWidth: "100%",
+	variants: { size: {
+		true: listItemSubtitleSizeVariant,
+		Size: listItemSubtitleSizeVariant
+	} }
+});
+var ListItemTitle = (0, import_web.styled)(ListItemText, {
+	displayName: "ListItemTitle",
+	context
+});
+var ListItemIcon = function(props) {
+	var { children, size, scaleIcon = 1 } = props;
+	var styledContext = context.useStyledContext();
+	if (!styledContext) {
+		throw new Error("ListItem.Icon must be used within a ListItem");
+	}
+	var _ref;
+	var sizeToken = (_ref = size !== null && size !== void 0 ? size : styledContext.size) !== null && _ref !== void 0 ? _ref : true;
+	var contextColor = styledContext.color;
+	var iconColorProp = contextColor === "unset" || typeof contextColor === "number" ? void 0 : contextColor;
+	var iconSize = (0, import_helpers_tamagui.getThemedIconSize)(sizeToken, scaleIcon);
+	var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
+		size: iconSize,
+		color: iconColorProp
+	});
+	return getThemedIcon(children);
+};
+var ListItemComponent = (0, import_web.createStyledHOC)(ListItemFrame, function ListItem(propsIn, ref) {
+	var processedProps = (0, import_web.useProps)(propsIn, {
+		noNormalize: true,
+		noExpand: true
+	});
+	var { children, icon, iconAfter, scaleIcon = 1, subTitle, title, iconSize, color, ...rest } = processedProps;
+	var styledContext = context.useStyledContext();
+	var _rest_size, _ref, _ref1;
+	var size = (_ref1 = (_ref = (_rest_size = rest.size) !== null && _rest_size !== void 0 ? _rest_size : propsIn.size) !== null && _ref !== void 0 ? _ref : styledContext === null || styledContext === void 0 ? void 0 : styledContext.size) !== null && _ref1 !== void 0 ? _ref1 : true;
+	var _ref2;
+	var contextColor = (_ref2 = color !== null && color !== void 0 ? color : propsIn.color) !== null && _ref2 !== void 0 ? _ref2 : styledContext === null || styledContext === void 0 ? void 0 : styledContext.color;
+	var iconColorProp = contextColor === "unset" || typeof contextColor === "number" ? void 0 : contextColor;
+	var iconSizeNumber = (0, import_helpers_tamagui.getThemedIconSize)(iconSize !== null && iconSize !== void 0 ? iconSize : size, scaleIcon);
+	var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
+		size: iconSizeNumber,
+		color: iconColorProp
+	});
+	var themedIcon = icon ? getThemedIcon(icon) : null;
+	var themedIconAfter = iconAfter ? getThemedIcon(iconAfter) : null;
+	var wrappedChildren = (0, import_text.wrapChildrenInText)(ListItemText, { children }, { size });
+	var _rest_variant, _ref3;
+	var listItemContext = {
+		...styledContext,
+		color: contextColor,
+		size,
+		variant: (_ref3 = (_rest_variant = rest.variant) !== null && _rest_variant !== void 0 ? _rest_variant : propsIn.variant) !== null && _ref3 !== void 0 ? _ref3 : styledContext === null || styledContext === void 0 ? void 0 : styledContext.variant
+	};
+	var frameProps = {
+		size,
+		variant: listItemContext.variant,
+		...rest
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(context.Provider, {
+		...listItemContext,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemFrame, {
+			ref,
+			...frameProps,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(context.Provider, {
+				...listItemContext,
+				children: [
+					themedIcon,
+					title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stacks.YStack, {
+						flex: 1,
+						children: [
+							title ? typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemTitle, {
+								size,
+								children: title
+							}) : title : null,
+							subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: typeof subTitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListItemSubtitle, {
+								size,
+								children: subTitle
+							}) : subTitle }) : null,
+							wrappedChildren
+						]
+					}) : wrappedChildren,
+					themedIconAfter
+				]
+			})
+		})
+	});
+});
+var ListItem2 = (0, import_helpers.withStaticProperties)(ListItemComponent, {
+	Apply: context.Provider,
+	Frame: ListItemFrame,
+	Text: ListItemText,
+	Subtitle: ListItemSubtitle,
+	Icon: ListItemIcon,
+	Title: ListItemTitle
+});