@tamagui/button 2.0.0-rc.9 → 2.1.0

package/dist/cjs/index.native.js

@@ -5,15 +5,17 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  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;
-  },
-  __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var index_exports = {};
 module.exports = __toCommonJS(index_exports);

package/dist/cjs/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","index_exports","module","exports"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,aAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAP,YAAc,CAAAK,aAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","index_exports","module","exports"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,aAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAP,YAAc,CAAAK,aAAA","ignoreList":[]}

package/dist/cjs/v1/Button.cjs

@@ -3,20 +3,22 @@ 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: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  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;
-  };
+  }
+  return to;
+};
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var Button_exports = {};
 __export(Button_exports, {
@@ -28,140 +30,147 @@ __export(Button_exports, {
   useButton: () => useButton
 });
 module.exports = __toCommonJS(Button_exports);
-var import_font_size = require("@tamagui/font-size"),
-  import_get_button_sized = require("@tamagui/get-button-sized"),
-  import_helpers = require("@tamagui/helpers"),
-  import_helpers_tamagui = require("@tamagui/helpers-tamagui"),
-  import_stacks = require("@tamagui/stacks"),
-  import_text = require("@tamagui/text"),
-  import_web = require("@tamagui/web"),
-  import_react = require("react"),
-  import_spacer = require("@tamagui/spacer"),
-  import_jsx_runtime = require("react/jsx-runtime");
+var import_font_size = require("@tamagui/font-size");
+var import_get_button_sized = require("@tamagui/get-button-sized");
+var import_helpers = require("@tamagui/helpers");
+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_spacer = require("@tamagui/spacer");
+var import_jsx_runtime = require("react/jsx-runtime");
 const ButtonContext = (0, import_web.createStyledContext)({
-    // keeping these here means they work with styled() passing down color to text
-    color: void 0,
-    ellipsis: void 0,
-    fontFamily: void 0,
-    fontSize: void 0,
-    fontStyle: void 0,
-    fontWeight: void 0,
-    letterSpacing: void 0,
-    maxFontSizeMultiplier: void 0,
-    size: void 0,
-    textAlign: void 0,
-    variant: void 0
-  }),
-  BUTTON_NAME = "Button",
-  ButtonFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
-    name: BUTTON_NAME,
-    render: "button",
-    context: ButtonContext,
-    role: "button",
-    focusable: !0,
-    variants: {
-      unstyled: {
-        false: {
-          size: "$true",
-          justifyContent: "center",
-          alignItems: "center",
-          flexWrap: "nowrap",
-          flexDirection: "row",
-          cursor: "pointer",
-          hoverTheme: !0,
-          pressTheme: !0,
-          backgroundColor: "$background",
-          borderWidth: 1,
-          borderColor: "transparent",
-          focusVisibleStyle: {
-            outlineColor: "$outlineColor",
-            outlineStyle: "solid",
-            outlineWidth: 2
-          }
-        }
-      },
-      variant: {
-        outlined: {
-          backgroundColor: "transparent",
-          borderWidth: 2,
-          borderColor: "$borderColor",
-          hoverStyle: {
-            backgroundColor: "transparent",
-            borderColor: "$borderColorHover"
-          },
-          pressStyle: {
-            backgroundColor: "transparent",
-            borderColor: "$borderColorPress"
-          },
-          focusVisibleStyle: {
-            backgroundColor: "transparent",
-            borderColor: "$borderColorFocus"
-          }
-        }
-      },
-      size: {
-        "...size": import_get_button_sized.getButtonSized,
-        ":number": import_get_button_sized.getButtonSized
+  // keeping these here means they work with styled() passing down color to text
+  color: void 0,
+  ellipsis: void 0,
+  fontFamily: void 0,
+  fontSize: void 0,
+  fontStyle: void 0,
+  fontWeight: void 0,
+  letterSpacing: void 0,
+  maxFontSizeMultiplier: void 0,
+  size: void 0,
+  textAlign: void 0,
+  variant: void 0
+});
+const BUTTON_NAME = "Button";
+const ButtonFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
+  name: BUTTON_NAME,
+  render: "button",
+  context: ButtonContext,
+  role: "button",
+  focusable: true,
+  variants: {
+    unstyled: {
+      true: {
+        // reset browser <button> defaults
+        outlineWidth: 0,
+        borderWidth: 0,
+        backgroundColor: "transparent"
       },
-      disabled: {
-        true: {
-          pointerEvents: "none"
+      false: {
+        size: "$true",
+        justifyContent: "center",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        flexDirection: "row",
+        cursor: "pointer",
+        hoverTheme: true,
+        pressTheme: true,
+        backgroundColor: "$background",
+        borderWidth: 1,
+        borderColor: "transparent",
+        focusVisibleStyle: {
+          outlineColor: "$outlineColor",
+          outlineStyle: "solid",
+          outlineWidth: 2
         }
       }
     },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
-    }
-  }),
-  ButtonText = (0, import_web.styled)(import_text.SizableText, {
-    name: "Button",
-    context: ButtonContext,
-    variants: {
-      unstyled: {
-        false: {
-          userSelect: "none",
-          cursor: "pointer",
-          // flexGrow 1 leads to inconsistent native style where text pushes to start of view
-          flexGrow: 0,
-          flexShrink: 1,
-          ellipsis: !0,
-          color: "$color"
+    variant: {
+      outlined: {
+        backgroundColor: "transparent",
+        borderWidth: 2,
+        borderColor: "$borderColor",
+        hoverStyle: {
+          backgroundColor: "transparent",
+          borderColor: "$borderColorHover"
+        },
+        pressStyle: {
+          backgroundColor: "transparent",
+          borderColor: "$borderColorPress"
+        },
+        focusVisibleStyle: {
+          backgroundColor: "transparent",
+          borderColor: "$borderColorFocus"
         }
       }
     },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
+    size: {
+      "...size": import_get_button_sized.getButtonSized,
+      ":number": import_get_button_sized.getButtonSized
+    },
+    disabled: {
+      true: {
+        pointerEvents: "none"
+      }
     }
-  }),
-  ButtonIcon = props => {
-    const {
-        children,
-        scaleIcon = 1
-      } = props,
-      {
-        size,
-        color
-      } = (0, import_react.useContext)(ButtonContext),
-      iconSize = (typeof size == "number" ? size * 0.5 : (0, import_font_size.getFontSize)(size)) * scaleIcon;
-    return (0, import_helpers_tamagui.useGetThemedIcon)({
-      size: iconSize,
-      color
-    })(children);
   },
-  ButtonComponent = ButtonFrame.styleable(function (props, ref) {
-    const {
-      props: buttonProps
-    } = useButton(props);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ButtonFrame, {
-      "data-disable-theme": !0,
-      ...buttonProps,
-      ref
-    });
-  }),
-  Button2 = (0, import_helpers.withStaticProperties)(ButtonComponent, {
-    Text: ButtonText,
-    Icon: ButtonIcon
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const ButtonText = (0, import_web.styled)(import_text.SizableText, {
+  name: "Button",
+  context: ButtonContext,
+  variants: {
+    unstyled: {
+      false: {
+        userSelect: "none",
+        cursor: "pointer",
+        // flexGrow 1 leads to inconsistent native style where text pushes to start of view
+        flexGrow: 0,
+        flexShrink: 1,
+        ellipsis: true,
+        color: "$color"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const ButtonIcon = props => {
+  const {
+    children,
+    scaleIcon = 1
+  } = props;
+  const {
+    size,
+    color
+  } = (0, import_react.useContext)(ButtonContext);
+  const iconSize = (typeof size === "number" ? size * 0.5 : (0, import_font_size.getFontSize)(size)) * scaleIcon;
+  const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
+    size: iconSize,
+    color
+  });
+  return getThemedIcon(children);
+};
+const ButtonComponent = ButtonFrame.styleable(function Button(props, ref) {
+  const {
+    props: buttonProps
+  } = useButton(props);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ButtonFrame, {
+    "data-disable-theme": true,
+    ...buttonProps,
+    ref
   });
+});
+const Button2 = (0, import_helpers.withStaticProperties)(ButtonComponent, {
+  Text: ButtonText,
+  Icon: ButtonIcon
+});
 function useButton({
   textProps,
   ...propsIn
@@ -170,87 +179,87 @@ function useButton({
 } = {
   Text: Button2.Text
 }) {
-  const isNested = (0, import_react.useContext)(import_stacks.ButtonNestingContext),
-    propsActive = (0, import_web.useProps)(propsIn, {
-      noNormalize: !0,
-      noExpand: !0
-    }),
-    {
-      icon,
-      iconAfter,
-      gap,
-      spaceFlex,
-      scaleIcon = 1,
-      scaleSpace = 0.66,
-      noTextWrap,
-      fontFamily,
-      fontSize,
-      fontWeight,
-      fontStyle,
-      letterSpacing,
-      render,
-      ellipsis,
-      maxFontSizeMultiplier,
-      ...restProps
-    } = propsActive,
-    size = propsActive.size || (propsActive.unstyled ? void 0 : "$true"),
-    color = propsActive.color,
-    iconSize = (typeof size == "number" ? size * 0.5 : (0, import_font_size.getFontSize)(size, {
-      font: fontFamily?.[0] === "$" ? fontFamily : void 0
-    })) * scaleIcon,
-    getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
-      size: iconSize,
-      color
+  const isNested = (0, import_react.useContext)(import_stacks.ButtonNestingContext);
+  const propsActive = (0, import_web.useProps)(propsIn, {
+    noNormalize: true,
+    noExpand: true
+  });
+  const {
+    icon,
+    iconAfter,
+    gap,
+    spaceFlex,
+    scaleIcon = 1,
+    scaleSpace = 0.66,
+    noTextWrap,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    fontStyle,
+    letterSpacing,
+    render,
+    ellipsis,
+    maxFontSizeMultiplier,
+    ...restProps
+  } = propsActive;
+  const size = propsActive.size || (propsActive.unstyled ? void 0 : "$true");
+  const color = propsActive.color;
+  const iconSize = (typeof size === "number" ? size * 0.5 : (0, import_font_size.getFontSize)(size, {
+    font: fontFamily?.[0] === "$" ? fontFamily : void 0
+  })) * scaleIcon;
+  const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
+    size: iconSize,
+    color
+  });
+  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
+  const spaceSize = gap ?? (0, import_web.getVariableValue)(iconSize) * scaleSpace;
+  const contents = noTextWrap ? [propsIn.children] : (0, import_text.wrapChildrenInText)(Text, {
+    children: propsIn.children,
+    fontFamily,
+    fontSize,
+    textProps,
+    fontWeight,
+    fontStyle,
+    letterSpacing,
+    ellipsis,
+    maxFontSizeMultiplier
+  }, Text === ButtonText && propsActive.unstyled !== true ? {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1",
+    size
+  } : void 0);
+  const inner = (0, import_spacer.spacedChildren)({
+    // a bit arbitrary but scaling to font size is necessary so long as button does
+    space: spaceSize,
+    spaceFlex,
+    ensureKeys: true,
+    direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
+    // for keys to stay the same we keep indices as similar a possible
+    // so even if icons are undefined we still pass them
+    children: [themedIcon, ...contents, themedIconAfter]
+  });
+  const props = {
+    size,
+    ...(propsIn.disabled && {
+      // in rnw - false still has keyboard tabIndex, undefined = not actually focusable
+      focusable: void 0,
+      // even with tabIndex unset, it will keep focusVisibleStyle on web so disable it here
+      focusVisibleStyle: {
+        borderColor: "$background"
+      }
     }),
-    [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon),
-    spaceSize = gap ?? (0, import_web.getVariableValue)(iconSize) * scaleSpace,
-    contents = noTextWrap ? [propsIn.children] : (0, import_text.wrapChildrenInText)(Text, {
-      children: propsIn.children,
-      fontFamily,
-      fontSize,
-      textProps,
-      fontWeight,
-      fontStyle,
-      letterSpacing,
-      ellipsis,
-      maxFontSizeMultiplier
-    }, Text === ButtonText && propsActive.unstyled !== !0 ? {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1",
-      size
-    } : void 0),
-    inner = (0, import_spacer.spacedChildren)({
-      // a bit arbitrary but scaling to font size is necessary so long as button does
-      space: spaceSize,
-      spaceFlex,
-      ensureKeys: !0,
-      direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
-      // for keys to stay the same we keep indices as similar a possible
-      // so even if icons are undefined we still pass them
-      children: [themedIcon, ...contents, themedIconAfter]
+    // fixes SSR issue + DOM nesting issue of not allowing button in button
+    render: render ?? (isNested ? "span" :
+    // defaults to <a /> when accessibilityRole = link
+    // see https://github.com/tamagui/tamagui/issues/505
+    propsActive.accessibilityRole === "link" || propsActive.role === "link" ? "a" : "button"),
+    ...restProps,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.ButtonNestingContext.Provider, {
+      value: true,
+      children: inner
     }),
-    props = {
-      size,
-      ...(propsIn.disabled && {
-        // in rnw - false still has keyboard tabIndex, undefined = not actually focusable
-        focusable: void 0,
-        // even with tabIndex unset, it will keep focusVisibleStyle on web so disable it here
-        focusVisibleStyle: {
-          borderColor: "$background"
-        }
-      }),
-      // fixes SSR issue + DOM nesting issue of not allowing button in button
-      render: render ?? (isNested ? "span" :
-      // defaults to <a /> when accessibilityRole = link
-      // see https://github.com/tamagui/tamagui/issues/505
-      propsActive.accessibilityRole === "link" || propsActive.role === "link" ? "a" : "button"),
-      ...restProps,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.ButtonNestingContext.Provider, {
-        value: !0,
-        children: inner
-      }),
-      // forces it to be a runtime pressStyle so it passes through context text colors
-      disableClassName: !0
-    };
+    // forces it to be a runtime pressStyle so it passes through context text colors
+    disableClassName: true
+  };
   return {
     spaceSize,
     isNested,