@tamagui/button 2.7.7 → 3.0.0-beta.1091.1

package/dist/cjs/Button.cjs

@@ -3,287 +3,116 @@ 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 Button_exports = {};
 __export(Button_exports, {
-  Button: () => Button,
-  ButtonContext: () => ButtonContext
+	ButtonFrame: () => ButtonFrame,
+	ButtonIcon: () => ButtonIcon,
+	ButtonText: () => ButtonText,
+	useButton: () => useButton
 });
 module.exports = __toCommonJS(Button_exports);
-var import_font_size = require("@tamagui/font-size");
-var import_get_button_sized = require("@tamagui/get-button-sized");
 var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
 var import_stacks = require("@tamagui/stacks");
 var import_text = require("@tamagui/text");
 var import_web = require("@tamagui/web");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-const context = (0, import_web.createStyledContext)({
-  size: void 0,
-  variant: void 0,
-  color: void 0,
-  elevation: void 0,
-  ellipsis: void 0,
-  fontFamily: void 0,
-  fontSize: void 0,
-  fontStyle: void 0,
-  fontWeight: void 0,
-  letterSpacing: void 0,
-  maxFontSizeMultiplier: void 0,
-  textAlign: void 0
+const ButtonFrame = (0, import_web.styled)(import_web.View, {
+	role: "button",
+	render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button" }),
+	tabIndex: 0,
+	alignItems: "center",
+	flexDirection: "row",
+	flexWrap: "nowrap",
+	justifyContent: "center",
+	variants: { disabled: { true: { pointerEvents: "none" } } }
 });
-const Frame = (0, import_web.styled)(import_web.View, {
-  context,
-  name: "Button",
-  role: "button",
-  render: /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
-    type: "button"
-  }),
-  tabIndex: 0,
-  variants: {
-    unstyled: {
-      true: {
-        // reset browser <button> defaults
-        outlineWidth: 0,
-        borderWidth: 0,
-        backgroundColor: "transparent"
-      },
-      false: {
-        size: "$true",
-        justifyContent: "center",
-        alignItems: "center",
-        flexWrap: "nowrap",
-        flexDirection: "row",
-        backgroundColor: "$background",
-        borderWidth: 1,
-        borderColor: "transparent",
-        "$platform-web": {
-          cursor: "pointer"
-        },
-        hoverStyle: {
-          backgroundColor: "$backgroundHover",
-          borderColor: "$borderColorHover"
-        },
-        pressStyle: {
-          backgroundColor: "$backgroundPress",
-          borderColor: "$borderColorHover"
-        },
-        focusVisibleStyle: {
-          outlineColor: "$outlineColor",
-          outlineStyle: "solid",
-          outlineWidth: 2
-        }
-      }
-    },
-    variant: {
-      outlined: process.env.TAMAGUI_HEADLESS === "1" ? {} : {
-        backgroundColor: "transparent",
-        borderWidth: 1,
-        borderColor: "$borderColor",
-        hoverStyle: {
-          backgroundColor: "transparent",
-          borderColor: "$borderColorHover"
-        },
-        pressStyle: {
-          backgroundColor: "transparent",
-          borderColor: "$borderColorPress"
-        }
-      }
-    },
-    circular: import_stacks.themeableVariants.circular,
-    chromeless: import_stacks.themeableVariants.chromeless,
-    size: {
-      "...size": (val, extras) => {
-        const buttonStyle = (0, import_get_button_sized.getButtonSized)(val, extras);
-        const gap = (0, import_web.getTokenValue)(val);
-        return {
-          ...buttonStyle,
-          gap
-        };
-      },
-      ":number": (val, extras) => {
-        const buttonStyle = (0, import_get_button_sized.getButtonSized)(val, extras);
-        const gap = val * 0.4;
-        return {
-          ...buttonStyle,
-          gap
-        };
-      }
-    },
-    elevation: {
-      "...size": import_stacks.getElevation,
-      ":number": import_stacks.getElevation
-    },
-    disabled: {
-      true: {
-        pointerEvents: "none",
-        // @ts-ignore
-        "aria-disabled": true
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+const ButtonText = (0, import_web.styled)(import_web.Text, {
+	flexGrow: 0,
+	flexShrink: 1
 });
-const Text = (0, import_web.styled)(import_text.SizableText, {
-  context,
-  variants: {
-    unstyled: {
-      false: {
-        userSelect: "none",
-        // flexGrow 1 leads to inconsistent native style where text pushes to start of view
-        flexGrow: 0,
-        flexShrink: 1,
-        ellipsis: true,
-        color: "$color",
-        "$platform-web": {
-          cursor: "pointer"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-});
-const Icon = props => {
-  const {
-    children,
-    scaleIcon = 1,
-    size
-  } = props;
-  const styledContext = context.useStyledContext();
-  if (!styledContext) {
-    throw new Error("Button.Icon must be used within a Button");
-  }
-  const sizeToken = size ?? styledContext.size;
-  const iconColorProp = styledContext.color === "unset" || typeof styledContext.color === "number" ? void 0 : styledContext.color;
-  const iconColor = (0, import_helpers_tamagui.useCurrentColor)(iconColorProp);
-  const iconSize = (typeof sizeToken === "number" ? sizeToken * 0.5 : (0, import_font_size.getFontSize)(sizeToken)) * scaleIcon;
-  return (0, import_helpers_tamagui.getIcon)(children, {
-    size: iconSize,
-    color: iconColor
-  });
+const ButtonIcon = ({ children, color, scaleIcon = 1, size }) => {
+	const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
+		color,
+		size: size === void 0 ? void 0 : size * scaleIcon
+	});
+	return getThemedIcon(children);
 };
-const ButtonContext = (0, import_web.createStyledContext)({
-  size: void 0,
-  variant: void 0,
-  color: void 0
-});
-const ButtonComponent = Frame.styleable((propsIn, ref) => {
-  const isNested = (0, import_react.useContext)(import_stacks.ButtonNestingContext);
-  const processedProps = (0, import_web.useProps)(propsIn, {
-    noNormalize: true,
-    noExpand: true
-  });
-  const {
-    children,
-    iconSize,
-    icon,
-    iconAfter,
-    scaleIcon = 1,
-    noTextWrap,
-    textProps,
-    color,
-    ellipsis,
-    fontFamily,
-    fontSize,
-    fontStyle,
-    fontWeight,
-    letterSpacing,
-    maxFontSizeMultiplier,
-    textAlign,
-    ...props
-  } = processedProps;
-  const size = propsIn.size || (propsIn.unstyled ? void 0 : "$true");
-  const styledContext = context.useStyledContext();
-  const contextColor = color ?? propsIn.color ?? styledContext?.color;
-  const iconColorProp = contextColor === "unset" || typeof contextColor === "number" ? void 0 : contextColor;
-  const iconColor = (0, import_helpers_tamagui.useCurrentColor)(iconColorProp);
-  const finalSize = iconSize ?? size ?? styledContext?.size;
-  const iconSizeNumber = (typeof finalSize === "number" ? finalSize * 0.5 : (0, import_font_size.getFontSize)(finalSize)) * scaleIcon;
-  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(icon2 => {
-    if (!icon2) return null;
-    return (0, import_helpers_tamagui.getIcon)(icon2, {
-      size: iconSizeNumber,
-      color: iconColor
-      // No marginLeft or marginRight needed - spacing is handled by the gap property in Frame's size variants
-    });
-  });
-  const wrappedChildren = (0, import_text.wrapChildrenInText)(Text, {
-    children,
-    color: contextColor,
-    ellipsis: ellipsis ?? propsIn.ellipsis ?? styledContext?.ellipsis,
-    fontFamily: fontFamily ?? propsIn.fontFamily ?? styledContext?.fontFamily,
-    fontSize: fontSize ?? propsIn.fontSize ?? styledContext?.fontSize,
-    fontStyle: fontStyle ?? propsIn.fontStyle ?? styledContext?.fontStyle,
-    fontWeight: fontWeight ?? propsIn.fontWeight ?? styledContext?.fontWeight,
-    letterSpacing: letterSpacing ?? propsIn.letterSpacing ?? styledContext?.letterSpacing,
-    maxFontSizeMultiplier: maxFontSizeMultiplier ?? propsIn.maxFontSizeMultiplier ?? styledContext?.maxFontSizeMultiplier,
-    noTextWrap: noTextWrap ?? propsIn.noTextWrap,
-    textAlign: textAlign ?? propsIn.textAlign ?? styledContext?.textAlign,
-    textProps: textProps ?? propsIn.textProps
-  }, {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1",
-    size: finalSize ?? styledContext?.size
-  });
-  const textContext = {
-    color: contextColor,
-    ellipsis: ellipsis ?? propsIn.ellipsis ?? styledContext?.ellipsis,
-    fontFamily: fontFamily ?? propsIn.fontFamily ?? styledContext?.fontFamily,
-    fontSize: fontSize ?? propsIn.fontSize ?? styledContext?.fontSize,
-    fontStyle: fontStyle ?? propsIn.fontStyle ?? styledContext?.fontStyle,
-    fontWeight: fontWeight ?? propsIn.fontWeight ?? styledContext?.fontWeight,
-    letterSpacing: letterSpacing ?? propsIn.letterSpacing ?? styledContext?.letterSpacing,
-    maxFontSizeMultiplier: maxFontSizeMultiplier ?? propsIn.maxFontSizeMultiplier ?? styledContext?.maxFontSizeMultiplier,
-    textAlign: textAlign ?? propsIn.textAlign ?? styledContext?.textAlign
-  };
-  const buttonContext = {
-    ...styledContext,
-    ...textContext,
-    size: props.size ?? propsIn.size ?? styledContext?.size,
-    variant: props.variant ?? propsIn.variant ?? styledContext?.variant,
-    elevation: props.elevation ?? propsIn.elevation ?? styledContext?.elevation
-  };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.ButtonNestingContext.Provider, {
-    value: true,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(context.Provider, {
-      ...buttonContext,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(Frame, {
-        ref,
-        ...props,
-        ...(isNested && {
-          render: "span"
-        }),
-        ...(props.circular && !propsIn.size && {
-          size
-        }),
-        tabIndex: 0,
-        children: [themedIcon, wrappedChildren, themedIconAfter]
-      })
-    })
-  });
-});
-const Button = (0, import_web.withStaticProperties)(ButtonComponent, {
-  Apply: context.Provider,
-  Frame,
-  Text,
-  Icon
-});
+function useButton(propsIn, { Text: Text2 = ButtonText, iconColor, iconSize: iconSizeOption, textProps: textPropsOption } = {}) {
+	const isNested = (0, import_react.useContext)(import_stacks.ButtonNestingContext);
+	const [wrappedTextProps, buttonProps] = (0, import_web.splitStyleProps)(propsIn, {
+		expandShorthands: true,
+		filter: import_text.textParentProps
+	});
+	const { children, disabled, icon, iconAfter, iconSize, render, scaleIcon = 1, ...frameProps } = buttonProps;
+	const { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;
+	const resolvedIconSize = iconSize ?? iconSizeOption;
+	const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
+		color: iconColor,
+		size: resolvedIconSize === void 0 ? void 0 : resolvedIconSize * scaleIcon
+	});
+	const [themedIcon, themedIconAfter] = [icon, iconAfter].map((item) => {
+		return item ? getThemedIcon(item) : null;
+	});
+	const wrappedChildren = (0, import_text.wrapChildrenInText)(Text2, {
+		children,
+		noTextWrap,
+		textProps
+	}, {
+		...textPropsOption,
+		...textStyleProps
+	});
+	const resolvedRender = render ?? (isNested ? "span" : disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+		type: "button",
+		disabled: true
+	}) : void 0);
+	const resolvedProps = {
+		...frameProps,
+		...disabled && {
+			"aria-disabled": true,
+			disabled: true,
+			tabIndex: -1
+		},
+		...resolvedRender === void 0 ? null : { render: resolvedRender },
+		...isNested && {
+			role: "none",
+			tabIndex: -1,
+			"aria-disabled": void 0,
+			disabled: void 0,
+			onPress: void 0,
+			onPressIn: void 0,
+			onPressOut: void 0,
+			onLongPress: void 0,
+			onClick: void 0,
+			onKeyDown: void 0,
+			onKeyUp: void 0
+		},
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stacks.ButtonNestingContext.Provider, {
+			value: true,
+			children: [
+				themedIcon,
+				wrappedChildren,
+				themedIconAfter
+			]
+		})
+	};
+	return {
+		isNested,
+		props: resolvedProps
+	};
+}

package/dist/cjs/Button.native.cjs

@@ -0,0 +1,122 @@
+"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 Button_exports = {};
+__export(Button_exports, {
+	ButtonFrame: () => ButtonFrame,
+	ButtonIcon: () => ButtonIcon,
+	ButtonText: () => ButtonText,
+	useButton: () => useButton
+});
+module.exports = __toCommonJS(Button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
+var import_stacks = require("@tamagui/stacks");
+var import_text = require("@tamagui/text");
+var import_web = require("@tamagui/web");
+var import_react = require("react");
+var ButtonFrame = (0, import_web.styled)(import_web.View, {
+	role: "button",
+	render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button" }),
+	tabIndex: 0,
+	alignItems: "center",
+	flexDirection: "row",
+	flexWrap: "nowrap",
+	justifyContent: "center",
+	variants: { disabled: { true: { pointerEvents: "none" } } }
+});
+var ButtonText = (0, import_web.styled)(import_web.Text, {
+	flexGrow: 0,
+	flexShrink: 1
+});
+var ButtonIcon = function(param) {
+	var { children, color, scaleIcon = 1, size } = param;
+	var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
+		color,
+		size: size === void 0 ? void 0 : size * scaleIcon
+	});
+	return getThemedIcon(children);
+};
+function useButton(propsIn) {
+	var { Text: _$Text = ButtonText, iconColor, iconSize: iconSizeOption, textProps: textPropsOption } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+	var isNested = (0, import_react.useContext)(import_stacks.ButtonNestingContext);
+	var [wrappedTextProps, buttonProps] = (0, import_web.splitStyleProps)(propsIn, {
+		expandShorthands: true,
+		filter: import_text.textParentProps
+	});
+	var { children, disabled, icon, iconAfter, iconSize, render, scaleIcon = 1, ...frameProps } = buttonProps;
+	var { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps;
+	var resolvedIconSize = iconSize !== null && iconSize !== void 0 ? iconSize : iconSizeOption;
+	var getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
+		color: iconColor,
+		size: resolvedIconSize === void 0 ? void 0 : resolvedIconSize * scaleIcon
+	});
+	var [themedIcon, themedIconAfter] = [icon, iconAfter].map(function(item) {
+		return item ? getThemedIcon(item) : null;
+	});
+	var wrappedChildren = (0, import_text.wrapChildrenInText)(_$Text, {
+		children,
+		noTextWrap,
+		textProps
+	}, {
+		...textPropsOption,
+		...textStyleProps
+	});
+	var resolvedRender = render !== null && render !== void 0 ? render : isNested ? "span" : disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+		type: "button",
+		disabled: true
+	}) : void 0;
+	var resolvedProps = {
+		...frameProps,
+		...disabled && {
+			"aria-disabled": true,
+			disabled: true,
+			tabIndex: -1
+		},
+		...resolvedRender === void 0 ? null : { render: resolvedRender },
+		...isNested && {
+			role: "none",
+			tabIndex: -1,
+			"aria-disabled": void 0,
+			disabled: void 0,
+			onPress: void 0,
+			onPressIn: void 0,
+			onPressOut: void 0,
+			onLongPress: void 0,
+			onClick: void 0,
+			onKeyDown: void 0,
+			onKeyUp: void 0
+		},
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stacks.ButtonNestingContext.Provider, {
+			value: true,
+			children: [
+				themedIcon,
+				wrappedChildren,
+				themedIconAfter
+			]
+		})
+	};
+	return {
+		isNested,
+		props: resolvedProps
+	};
+}