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

package/dist/cjs/ListItem.cjs

@@ -1,256 +1,185 @@
+
 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
-  });
+	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;
+	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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ListItem_exports = {};
 __export(ListItem_exports, {
-  ListItem: () => ListItem2
+	ListItem: () => ListItem2,
+	listItemSizeVariant: () => listItemSizeVariant
 });
 module.exports = __toCommonJS(ListItem_exports);
-var import_font_size = require("@tamagui/font-size");
 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 import_jsx_runtime = require("react/jsx-runtime");
 const NAME = "ListItem";
 const context = (0, import_web.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 = (0, import_size.resolveSizeToken)(val, "size");
+	const spaceToken = (0, import_size.resolveSizeToken)(val, "space");
+	const size = typeof sizeToken === "number" ? sizeToken : tokens.size[sizeToken];
+	const 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)
+	};
+};
+const listItemSubtitleSizeVariant = (val, extras) => {
+	const fontSizeToken = (0, import_size.resolveSizeToken)(val, "fontSize");
+	const oneSmaller = (0, import_get_token.oneSizeTokenSmaller)(fontSizeToken);
+	return (0, import_get_font_sized.getFontSized)(oneSmaller, extras);
+};
 const ListItemFrame = (0, import_web.styled)(import_web.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: (0, import_get_token.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 = (0, import_web.styled)(import_text.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 = (0, import_web.styled)(ListItemText, {
-  name: "ListItemSubtitle",
-  context,
-  variants: {
-    unstyled: {
-      false: {
-        opacity: 0.6,
-        maxWidth: "100%",
-        color: "$color"
-      }
-    },
-    size: {
-      "...size": (val, extras) => {
-        const oneSmaller = (0, import_get_token.getSize)(val, {
-          shift: -1,
-          excludeHalfSteps: true
-        });
-        const fontStyle = (0, import_get_font_sized.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 = (0, import_web.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 = (0, import_helpers_tamagui.useCurrentColor)(styledContext.color);
-  const iconSize = (0, import_font_size.getFontSize)(sizeToken) * scaleIcon;
-  return (0, import_helpers_tamagui.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 = (0, import_helpers_tamagui.getThemedIconSize)(sizeToken, scaleIcon);
+	const getThemedIcon = (0, import_helpers_tamagui.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 = (0, import_helpers_tamagui.useCurrentColor)(styledContext?.color);
-  const iconSizeNumber = (0, import_font_size.getFontSize)(iconSize || size) * scaleIcon;
-  const iconSpacing = iconSizeNumber * 0.4;
-  const themedIcon = icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_web.View, {
-    marginRight: iconSpacing,
-    children: (0, import_helpers_tamagui.getIcon)(icon, {
-      size: iconSizeNumber,
-      color: iconColor
-    })
-  }) : null;
-  const themedIconAfter = iconAfter ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_web.View, {
-    marginLeft: iconSpacing,
-    children: (0, import_helpers_tamagui.getIcon)(iconAfter, {
-      size: iconSizeNumber,
-      color: iconColor
-    })
-  }) : null;
-  const wrappedChildren = (0, import_text.wrapChildrenInText)(ListItemText, {
-    children
-  }, propsIn.unstyled !== true ? {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1",
-    fontSize: propsIn.size
-  } : void 0);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ListItemFrame, {
-    ref,
-    ...rest,
-    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, {
-        unstyled,
-        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, {
-          unstyled,
-          size,
-          children: subTitle
-        }) : subTitle
-      }) : null, wrappedChildren]
-    }) : wrappedChildren, themedIconAfter]
-  });
+const ListItemComponent = (0, import_web.createStyledHOC)(ListItemFrame, function ListItem(propsIn, ref) {
+	const processedProps = (0, import_web.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 = (0, import_helpers_tamagui.getThemedIconSize)(iconSize ?? size, scaleIcon);
+	const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
+		size: iconSizeNumber,
+		color: iconColorProp
+	});
+	const themedIcon = icon ? getThemedIcon(icon) : null;
+	const themedIconAfter = iconAfter ? getThemedIcon(iconAfter) : null;
+	const wrappedChildren = (0, import_text.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__ */ (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
+				]
+			})
+		})
+	});
 });
 const ListItem2 = (0, import_helpers.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
+});

package/dist/cjs/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
+});