@tamagui/button 1.0.1-rc.4 → 1.0.1-rc.5

package/dist/cjs/Button.js

@@ -86,7 +86,7 @@ const ButtonText = (0, import_core.styled)(import_text.SizableText, {
   flexShrink: 1,
   ellipse: true
 });
-function useButton(props, { Text = ButtonText } = { Text: ButtonText }) {
+function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
   const {
     children,
     icon,
@@ -106,41 +106,42 @@ function useButton(props, { Text = ButtonText } = { Text: ButtonText }) {
     textAlign,
     textProps,
     ...rest
-  } = props;
+  } = propsIn;
   const isNested = import_core.isRSC ? false : (0, import_react.useContext)(import_core.ButtonNestingContext);
-  const mediaActiveProps = (0, import_core.useMediaPropsActive)(props);
-  const size = mediaActiveProps.size || "$4";
+  const propsActive = (0, import_core.useMediaPropsActive)(propsIn);
+  const size = propsActive.size || "$4";
   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 });
   const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
   const spaceSize = (0, import_core.getVariableValue)(iconSize) * scaleSpace;
-  const contents = (0, import_text.wrapChildrenInText)(Text, mediaActiveProps);
+  const contents = (0, import_text.wrapChildrenInText)(Text, propsActive);
   const inner = themedIcon || themedIconAfter ? (0, import_core.spacedChildren)({
     space: spaceSize,
     spaceFlex,
     separator,
-    direction: props.flexDirection === "column" || props.flexDirection === "column-reverse" ? "vertical" : "horizontal",
+    direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
     children: [themedIcon, contents, themedIconAfter]
   }) : contents;
+  const props = {
+    ...propsActive.disabled && {
+      focusable: void 0,
+      focusStyle: {
+        borderColor: "$background"
+      }
+    },
+    ...!isNested && {
+      tag: "span"
+    },
+    ...rest,
+    children: import_core.isRSC ? inner : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ButtonNestingContext.Provider, {
+      value: true,
+      children: inner
+    })
+  };
   return {
     spaceSize,
     isNested,
-    props: {
-      ...props.disabled && {
-        focusable: void 0,
-        focusStyle: {
-          borderColor: "$background"
-        }
-      },
-      ...isNested ? {
-        tag: "span"
-      } : {},
-      ...rest,
-      children: import_core.isRSC ? inner : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ButtonNestingContext.Provider, {
-        value: true,
-        children: inner
-      })
-    }
+    props
   };
 }
 const ButtonComponent = (0, import_react.forwardRef)(function Button(props, ref) {

package/dist/cjs/Button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Button.tsx"],
-  "sourcesContent": ["import {\n  ButtonNestingContext,\n  GetProps,\n  TamaguiElement,\n  ThemeableProps,\n  getVariableValue,\n  isRSC,\n  spacedChildren,\n  styled,\n  themeable,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport { FunctionComponent, forwardRef, useContext } from 'react'\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n  GetProps<typeof ButtonFrame> &\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\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'button',\n  focusable: true,\n  hoverTheme: true,\n  pressTheme: true,\n  backgrounded: true,\n  borderWidth: 1,\n  borderColor: 'transparent',\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n\n  // if we wanted this only when pressable = true, we'd need to merge variants?\n  cursor: 'pointer',\n\n  pressStyle: {\n    borderColor: 'transparent',\n  },\n\n  hoverStyle: {\n    borderColor: 'transparent',\n  },\n\n  focusStyle: {\n    borderColor: '$borderColorFocus',\n  },\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n  color: '$color',\n  userSelect: 'none',\n  cursor: 'pointer',\n  // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n  flexGrow: 0,\n  flexShrink: 1,\n  ellipse: true,\n})\n\nexport function useButton(\n  props: ButtonProps,\n  { Text = ButtonText }: { Text: any } = { Text: ButtonText }\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 = 0.66,\n    separator,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    ...rest\n  } = props\n\n  const isNested = isRSC ? false : useContext(ButtonNestingContext)\n  const mediaActiveProps = useMediaPropsActive(props)\n  const size = mediaActiveProps.size || '$4'\n  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, mediaActiveProps)\n  const inner =\n    themedIcon || themedIconAfter\n      ? spacedChildren({\n          // a bit arbitrary but scaling to font size is necessary so long as button does\n          space: spaceSize,\n          spaceFlex,\n          separator,\n          direction:\n            props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n              ? 'vertical'\n              : 'horizontal',\n          children: [themedIcon, contents, themedIconAfter],\n        })\n      : contents\n\n  return {\n    spaceSize,\n    isNested,\n    props: {\n      ...(props.disabled && {\n        // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n        focusable: undefined,\n        // even with tabIndex unset, it will keep focusStyle on web so disable it here\n        focusStyle: {\n          borderColor: '$background',\n        },\n      }),\n      // fixes SSR issue + DOM nesting issue of not allowing button in button\n      ...(isNested\n        ? {\n            tag: 'span',\n          }\n        : {}),\n      ...rest,\n      children: isRSC ? (\n        inner\n      ) : (\n        <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>\n      ),\n    },\n  }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {\n  const { props: buttonProps } = useButton(props)\n  return <ButtonFrame {...buttonProps} ref={ref} />\n})\n\nexport const buttonStaticConfig = {\n  inlineProps: new Set([\n    // text props go here (can't really optimize them, but we never fully extract button anyway)\n    // may be able to remove this entirely, as the compiler / runtime have gotten better\n    'color',\n    'fontWeight',\n    'fontSize',\n    'fontFamily',\n    'letterSpacing',\n    'textAlign',\n  ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n  themeable(ButtonComponent, ButtonFrame.staticConfig),\n  buttonStaticConfig\n)\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,gBAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiMQ;AAjMR,kBAWO;AACP,uBAA4B;AAC5B,8BAA+B;AAC/B,6BAAiC;AACjC,oBAA+B;AAC/B,kBAAkE;AAClE,mBAA0D;AAiC1D,MAAM,OAAO;AAEN,MAAM,kBAAc,oBAAO,8BAAgB;AAAA,EAChD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EAGf,QAAQ;AAAA,EAER,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAMM,MAAM,iBAAa,oBAAO,yBAAa;AAAA,EAC5C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,QAAQ;AAAA,EAER,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAEM,SAAS,UACd,OACA,EAAE,OAAO,WAAW,IAAmB,EAAE,MAAM,WAAW,GAC1D;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,EACL,IAAI;AAEJ,QAAM,WAAW,oBAAQ,YAAQ,yBAAW,gCAAoB;AAChE,QAAM,uBAAmB,iCAAoB,KAAK;AAClD,QAAM,OAAO,iBAAiB,QAAQ;AACtC,QAAM,YAAY,OAAO,SAAS,WAAW,OAAO,UAAM,8BAAY,IAAI,KAAK;AAC/E,QAAM,oBAAgB,yCAAiB,EAAE,MAAM,UAAU,MAAM,CAAC;AAChE,QAAM,CAAC,YAAY,eAAe,IAAI,CAAC,MAAM,SAAS,EAAE,IAAI,aAAa;AACzE,QAAM,gBAAY,8BAAiB,QAAQ,IAAI;AAC/C,QAAM,eAAW,gCAAmB,MAAM,gBAAgB;AAC1D,QAAM,QACJ,cAAc,sBACV,4BAAe;AAAA,IAEb,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WACE,MAAM,kBAAkB,YAAY,MAAM,kBAAkB,mBACxD,aACA;AAAA,IACN,UAAU,CAAC,YAAY,UAAU,eAAe;AAAA,EAClD,CAAC,IACD;AAEN,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACL,GAAI,MAAM,YAAY;AAAA,QAEpB,WAAW;AAAA,QAEX,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,MACF;AAAA,MAEA,GAAI,WACA;AAAA,QACE,KAAK;AAAA,MACP,IACA,CAAC;AAAA,MACL,GAAG;AAAA,MACH,UAAU,oBACR,QAEA,4CAAC,iCAAqB,UAArB;AAAA,QAA8B,OAAO;AAAA,QAAO;AAAA,OAAM;AAAA,IAEvD;AAAA,EACF;AACF;AAEA,MAAM,sBAAkB,yBAAwC,SAAS,OAAO,OAAO,KAAK;AAC1F,QAAM,EAAE,OAAO,YAAY,IAAI,UAAU,KAAK;AAC9C,SAAO,4CAAC;AAAA,IAAa,GAAG;AAAA,IAAa;AAAA,GAAU;AACjD,CAAC;AAEM,MAAM,qBAAqB;AAAA,EAChC,aAAa,oBAAI,IAAI;AAAA,IAGnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAEO,MAAMA,UAAS,YAAY;AAAA,MAChC,uBAAU,iBAAiB,YAAY,YAAY;AAAA,EACnD;AACF;",
+  "sourcesContent": ["import {\n  ButtonNestingContext,\n  GetProps,\n  TamaguiElement,\n  ThemeableProps,\n  getVariableValue,\n  isRSC,\n  spacedChildren,\n  styled,\n  themeable,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport { FunctionComponent, forwardRef, useContext } from 'react'\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n  GetProps<typeof ButtonFrame> &\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\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'button',\n  focusable: true,\n  hoverTheme: true,\n  pressTheme: true,\n  backgrounded: true,\n  borderWidth: 1,\n  borderColor: 'transparent',\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n\n  // if we wanted this only when pressable = true, we'd need to merge variants?\n  cursor: 'pointer',\n\n  pressStyle: {\n    borderColor: 'transparent',\n  },\n\n  hoverStyle: {\n    borderColor: 'transparent',\n  },\n\n  focusStyle: {\n    borderColor: '$borderColorFocus',\n  },\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n  color: '$color',\n  userSelect: 'none',\n  cursor: 'pointer',\n  // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n  flexGrow: 0,\n  flexShrink: 1,\n  ellipse: true,\n})\n\nexport function useButton(\n  propsIn: ButtonProps,\n  { Text = ButtonText }: { Text: any } = { Text: ButtonText }\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 = 0.66,\n    separator,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    ...rest\n  } = propsIn\n\n  const isNested = isRSC ? false : useContext(ButtonNestingContext)\n  const propsActive = useMediaPropsActive(propsIn)\n  const size = propsActive.size || '$4'\n  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, propsActive)\n  const inner =\n    themedIcon || themedIconAfter\n      ? spacedChildren({\n          // a bit arbitrary but scaling to font size is necessary so long as button does\n          space: spaceSize,\n          spaceFlex,\n          separator,\n          direction:\n            propsActive.flexDirection === 'column' || propsActive.flexDirection === 'column-reverse'\n              ? 'vertical'\n              : 'horizontal',\n          children: [themedIcon, contents, themedIconAfter],\n        })\n      : contents\n\n  const props = {\n    ...(propsActive.disabled && {\n      // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n      focusable: undefined,\n      // even with tabIndex unset, it will keep focusStyle on web so disable it here\n      focusStyle: {\n        borderColor: '$background',\n      },\n    }),\n    // fixes SSR issue + DOM nesting issue of not allowing button in button\n    ...(!isNested && {\n      tag: 'span',\n    }),\n    ...rest,\n    children: isRSC ? (\n      inner\n    ) : (\n      <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>\n    ),\n  }\n\n  return {\n    spaceSize,\n    isNested,\n    props,\n  }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {\n  const { props: buttonProps } = useButton(props)\n  return <ButtonFrame {...buttonProps} ref={ref} />\n})\n\nexport const buttonStaticConfig = {\n  inlineProps: new Set([\n    // text props go here (can't really optimize them, but we never fully extract button anyway)\n    // may be able to remove this entirely, as the compiler / runtime have gotten better\n    'color',\n    'fontWeight',\n    'fontSize',\n    'fontFamily',\n    'letterSpacing',\n    'textAlign',\n  ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n  themeable(ButtonComponent, ButtonFrame.staticConfig),\n  buttonStaticConfig\n)\n"],
+  "mappings": "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",
   "names": ["Button"]
 }

package/dist/esm/Button.js

@@ -67,7 +67,7 @@ const ButtonText = styled(SizableText, {
   flexShrink: 1,
   ellipse: true
 });
-function useButton(props, { Text = ButtonText } = { Text: ButtonText }) {
+function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
   const {
     children,
     icon,
@@ -87,41 +87,42 @@ function useButton(props, { Text = ButtonText } = { Text: ButtonText }) {
     textAlign,
     textProps,
     ...rest
-  } = props;
+  } = propsIn;
   const isNested = isRSC ? false : useContext(ButtonNestingContext);
-  const mediaActiveProps = useMediaPropsActive(props);
-  const size = mediaActiveProps.size || "$4";
+  const propsActive = useMediaPropsActive(propsIn);
+  const size = propsActive.size || "$4";
   const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
   const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
   const spaceSize = getVariableValue(iconSize) * scaleSpace;
-  const contents = wrapChildrenInText(Text, mediaActiveProps);
+  const contents = wrapChildrenInText(Text, propsActive);
   const inner = themedIcon || themedIconAfter ? spacedChildren({
     space: spaceSize,
     spaceFlex,
     separator,
-    direction: props.flexDirection === "column" || props.flexDirection === "column-reverse" ? "vertical" : "horizontal",
+    direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
     children: [themedIcon, contents, themedIconAfter]
   }) : contents;
+  const props = {
+    ...propsActive.disabled && {
+      focusable: void 0,
+      focusStyle: {
+        borderColor: "$background"
+      }
+    },
+    ...!isNested && {
+      tag: "span"
+    },
+    ...rest,
+    children: isRSC ? inner : /* @__PURE__ */ jsx(ButtonNestingContext.Provider, {
+      value: true,
+      children: inner
+    })
+  };
   return {
     spaceSize,
     isNested,
-    props: {
-      ...props.disabled && {
-        focusable: void 0,
-        focusStyle: {
-          borderColor: "$background"
-        }
-      },
-      ...isNested ? {
-        tag: "span"
-      } : {},
-      ...rest,
-      children: isRSC ? inner : /* @__PURE__ */ jsx(ButtonNestingContext.Provider, {
-        value: true,
-        children: inner
-      })
-    }
+    props
   };
 }
 const ButtonComponent = forwardRef(function Button(props, ref) {

package/dist/esm/Button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Button.tsx"],
-  "sourcesContent": ["import {\n  ButtonNestingContext,\n  GetProps,\n  TamaguiElement,\n  ThemeableProps,\n  getVariableValue,\n  isRSC,\n  spacedChildren,\n  styled,\n  themeable,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport { FunctionComponent, forwardRef, useContext } from 'react'\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n  GetProps<typeof ButtonFrame> &\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\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'button',\n  focusable: true,\n  hoverTheme: true,\n  pressTheme: true,\n  backgrounded: true,\n  borderWidth: 1,\n  borderColor: 'transparent',\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n\n  // if we wanted this only when pressable = true, we'd need to merge variants?\n  cursor: 'pointer',\n\n  pressStyle: {\n    borderColor: 'transparent',\n  },\n\n  hoverStyle: {\n    borderColor: 'transparent',\n  },\n\n  focusStyle: {\n    borderColor: '$borderColorFocus',\n  },\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n  color: '$color',\n  userSelect: 'none',\n  cursor: 'pointer',\n  // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n  flexGrow: 0,\n  flexShrink: 1,\n  ellipse: true,\n})\n\nexport function useButton(\n  props: ButtonProps,\n  { Text = ButtonText }: { Text: any } = { Text: ButtonText }\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 = 0.66,\n    separator,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    ...rest\n  } = props\n\n  const isNested = isRSC ? false : useContext(ButtonNestingContext)\n  const mediaActiveProps = useMediaPropsActive(props)\n  const size = mediaActiveProps.size || '$4'\n  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, mediaActiveProps)\n  const inner =\n    themedIcon || themedIconAfter\n      ? spacedChildren({\n          // a bit arbitrary but scaling to font size is necessary so long as button does\n          space: spaceSize,\n          spaceFlex,\n          separator,\n          direction:\n            props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n              ? 'vertical'\n              : 'horizontal',\n          children: [themedIcon, contents, themedIconAfter],\n        })\n      : contents\n\n  return {\n    spaceSize,\n    isNested,\n    props: {\n      ...(props.disabled && {\n        // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n        focusable: undefined,\n        // even with tabIndex unset, it will keep focusStyle on web so disable it here\n        focusStyle: {\n          borderColor: '$background',\n        },\n      }),\n      // fixes SSR issue + DOM nesting issue of not allowing button in button\n      ...(isNested\n        ? {\n            tag: 'span',\n          }\n        : {}),\n      ...rest,\n      children: isRSC ? (\n        inner\n      ) : (\n        <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>\n      ),\n    },\n  }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {\n  const { props: buttonProps } = useButton(props)\n  return <ButtonFrame {...buttonProps} ref={ref} />\n})\n\nexport const buttonStaticConfig = {\n  inlineProps: new Set([\n    // text props go here (can't really optimize them, but we never fully extract button anyway)\n    // may be able to remove this entirely, as the compiler / runtime have gotten better\n    'color',\n    'fontWeight',\n    'fontSize',\n    'fontFamily',\n    'letterSpacing',\n    'textAlign',\n  ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n  themeable(ButtonComponent, ButtonFrame.staticConfig),\n  buttonStaticConfig\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  ButtonNestingContext,\n  GetProps,\n  TamaguiElement,\n  ThemeableProps,\n  getVariableValue,\n  isRSC,\n  spacedChildren,\n  styled,\n  themeable,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport { FunctionComponent, forwardRef, useContext } from 'react'\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n  GetProps<typeof ButtonFrame> &\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\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'button',\n  focusable: true,\n  hoverTheme: true,\n  pressTheme: true,\n  backgrounded: true,\n  borderWidth: 1,\n  borderColor: 'transparent',\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n\n  // if we wanted this only when pressable = true, we'd need to merge variants?\n  cursor: 'pointer',\n\n  pressStyle: {\n    borderColor: 'transparent',\n  },\n\n  hoverStyle: {\n    borderColor: 'transparent',\n  },\n\n  focusStyle: {\n    borderColor: '$borderColorFocus',\n  },\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n  color: '$color',\n  userSelect: 'none',\n  cursor: 'pointer',\n  // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n  flexGrow: 0,\n  flexShrink: 1,\n  ellipse: true,\n})\n\nexport function useButton(\n  propsIn: ButtonProps,\n  { Text = ButtonText }: { Text: any } = { Text: ButtonText }\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 = 0.66,\n    separator,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    ...rest\n  } = propsIn\n\n  const isNested = isRSC ? false : useContext(ButtonNestingContext)\n  const propsActive = useMediaPropsActive(propsIn)\n  const size = propsActive.size || '$4'\n  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, propsActive)\n  const inner =\n    themedIcon || themedIconAfter\n      ? spacedChildren({\n          // a bit arbitrary but scaling to font size is necessary so long as button does\n          space: spaceSize,\n          spaceFlex,\n          separator,\n          direction:\n            propsActive.flexDirection === 'column' || propsActive.flexDirection === 'column-reverse'\n              ? 'vertical'\n              : 'horizontal',\n          children: [themedIcon, contents, themedIconAfter],\n        })\n      : contents\n\n  const props = {\n    ...(propsActive.disabled && {\n      // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n      focusable: undefined,\n      // even with tabIndex unset, it will keep focusStyle on web so disable it here\n      focusStyle: {\n        borderColor: '$background',\n      },\n    }),\n    // fixes SSR issue + DOM nesting issue of not allowing button in button\n    ...(!isNested && {\n      tag: 'span',\n    }),\n    ...rest,\n    children: isRSC ? (\n      inner\n    ) : (\n      <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>\n    ),\n  }\n\n  return {\n    spaceSize,\n    isNested,\n    props,\n  }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {\n  const { props: buttonProps } = useButton(props)\n  return <ButtonFrame {...buttonProps} ref={ref} />\n})\n\nexport const buttonStaticConfig = {\n  inlineProps: new Set([\n    // text props go here (can't really optimize them, but we never fully extract button anyway)\n    // may be able to remove this entirely, as the compiler / runtime have gotten better\n    'color',\n    'fontWeight',\n    'fontSize',\n    'fontFamily',\n    'letterSpacing',\n    'textAlign',\n  ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n  themeable(ButtonComponent, ButtonFrame.staticConfig),\n  buttonStaticConfig\n)\n"],
+  "mappings": "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",
   "names": ["Button"]
 }

package/dist/jsx/Button.js

@@ -66,7 +66,7 @@ const ButtonText = styled(SizableText, {
   flexShrink: 1,
   ellipse: true
 });
-function useButton(props, { Text = ButtonText } = { Text: ButtonText }) {
+function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
   const {
     children,
     icon,
@@ -86,38 +86,39 @@ function useButton(props, { Text = ButtonText } = { Text: ButtonText }) {
     textAlign,
     textProps,
     ...rest
-  } = props;
+  } = propsIn;
   const isNested = isRSC ? false : useContext(ButtonNestingContext);
-  const mediaActiveProps = useMediaPropsActive(props);
-  const size = mediaActiveProps.size || "$4";
+  const propsActive = useMediaPropsActive(propsIn);
+  const size = propsActive.size || "$4";
   const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
   const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
   const spaceSize = getVariableValue(iconSize) * scaleSpace;
-  const contents = wrapChildrenInText(Text, mediaActiveProps);
+  const contents = wrapChildrenInText(Text, propsActive);
   const inner = themedIcon || themedIconAfter ? spacedChildren({
     space: spaceSize,
     spaceFlex,
     separator,
-    direction: props.flexDirection === "column" || props.flexDirection === "column-reverse" ? "vertical" : "horizontal",
+    direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
     children: [themedIcon, contents, themedIconAfter]
   }) : contents;
+  const props = {
+    ...propsActive.disabled && {
+      focusable: void 0,
+      focusStyle: {
+        borderColor: "$background"
+      }
+    },
+    ...!isNested && {
+      tag: "span"
+    },
+    ...rest,
+    children: isRSC ? inner : <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>
+  };
   return {
     spaceSize,
     isNested,
-    props: {
-      ...props.disabled && {
-        focusable: void 0,
-        focusStyle: {
-          borderColor: "$background"
-        }
-      },
-      ...isNested ? {
-        tag: "span"
-      } : {},
-      ...rest,
-      children: isRSC ? inner : <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>
-    }
+    props
   };
 }
 const ButtonComponent = forwardRef(function Button(props, ref) {

package/dist/jsx/Button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Button.tsx"],
-  "sourcesContent": ["import {\n  ButtonNestingContext,\n  GetProps,\n  TamaguiElement,\n  ThemeableProps,\n  getVariableValue,\n  isRSC,\n  spacedChildren,\n  styled,\n  themeable,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport { FunctionComponent, forwardRef, useContext } from 'react'\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n  GetProps<typeof ButtonFrame> &\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\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'button',\n  focusable: true,\n  hoverTheme: true,\n  pressTheme: true,\n  backgrounded: true,\n  borderWidth: 1,\n  borderColor: 'transparent',\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n\n  // if we wanted this only when pressable = true, we'd need to merge variants?\n  cursor: 'pointer',\n\n  pressStyle: {\n    borderColor: 'transparent',\n  },\n\n  hoverStyle: {\n    borderColor: 'transparent',\n  },\n\n  focusStyle: {\n    borderColor: '$borderColorFocus',\n  },\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n  color: '$color',\n  userSelect: 'none',\n  cursor: 'pointer',\n  // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n  flexGrow: 0,\n  flexShrink: 1,\n  ellipse: true,\n})\n\nexport function useButton(\n  props: ButtonProps,\n  { Text = ButtonText }: { Text: any } = { Text: ButtonText }\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 = 0.66,\n    separator,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    ...rest\n  } = props\n\n  const isNested = isRSC ? false : useContext(ButtonNestingContext)\n  const mediaActiveProps = useMediaPropsActive(props)\n  const size = mediaActiveProps.size || '$4'\n  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, mediaActiveProps)\n  const inner =\n    themedIcon || themedIconAfter\n      ? spacedChildren({\n          // a bit arbitrary but scaling to font size is necessary so long as button does\n          space: spaceSize,\n          spaceFlex,\n          separator,\n          direction:\n            props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n              ? 'vertical'\n              : 'horizontal',\n          children: [themedIcon, contents, themedIconAfter],\n        })\n      : contents\n\n  return {\n    spaceSize,\n    isNested,\n    props: {\n      ...(props.disabled && {\n        // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n        focusable: undefined,\n        // even with tabIndex unset, it will keep focusStyle on web so disable it here\n        focusStyle: {\n          borderColor: '$background',\n        },\n      }),\n      // fixes SSR issue + DOM nesting issue of not allowing button in button\n      ...(isNested\n        ? {\n            tag: 'span',\n          }\n        : {}),\n      ...rest,\n      children: isRSC ? (\n        inner\n      ) : (\n        <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>\n      ),\n    },\n  }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {\n  const { props: buttonProps } = useButton(props)\n  return <ButtonFrame {...buttonProps} ref={ref} />\n})\n\nexport const buttonStaticConfig = {\n  inlineProps: new Set([\n    // text props go here (can't really optimize them, but we never fully extract button anyway)\n    // may be able to remove this entirely, as the compiler / runtime have gotten better\n    'color',\n    'fontWeight',\n    'fontSize',\n    'fontFamily',\n    'letterSpacing',\n    'textAlign',\n  ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n  themeable(ButtonComponent, ButtonFrame.staticConfig),\n  buttonStaticConfig\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  ButtonNestingContext,\n  GetProps,\n  TamaguiElement,\n  ThemeableProps,\n  getVariableValue,\n  isRSC,\n  spacedChildren,\n  styled,\n  themeable,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport { FunctionComponent, forwardRef, useContext } from 'react'\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n  GetProps<typeof ButtonFrame> &\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\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'button',\n  focusable: true,\n  hoverTheme: true,\n  pressTheme: true,\n  backgrounded: true,\n  borderWidth: 1,\n  borderColor: 'transparent',\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n\n  // if we wanted this only when pressable = true, we'd need to merge variants?\n  cursor: 'pointer',\n\n  pressStyle: {\n    borderColor: 'transparent',\n  },\n\n  hoverStyle: {\n    borderColor: 'transparent',\n  },\n\n  focusStyle: {\n    borderColor: '$borderColorFocus',\n  },\n\n  variants: {\n    size: {\n      '...size': getButtonSized,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n  color: '$color',\n  userSelect: 'none',\n  cursor: 'pointer',\n  // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n  flexGrow: 0,\n  flexShrink: 1,\n  ellipse: true,\n})\n\nexport function useButton(\n  propsIn: ButtonProps,\n  { Text = ButtonText }: { Text: any } = { Text: ButtonText }\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 = 0.66,\n    separator,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    ...rest\n  } = propsIn\n\n  const isNested = isRSC ? false : useContext(ButtonNestingContext)\n  const propsActive = useMediaPropsActive(propsIn)\n  const size = propsActive.size || '$4'\n  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, propsActive)\n  const inner =\n    themedIcon || themedIconAfter\n      ? spacedChildren({\n          // a bit arbitrary but scaling to font size is necessary so long as button does\n          space: spaceSize,\n          spaceFlex,\n          separator,\n          direction:\n            propsActive.flexDirection === 'column' || propsActive.flexDirection === 'column-reverse'\n              ? 'vertical'\n              : 'horizontal',\n          children: [themedIcon, contents, themedIconAfter],\n        })\n      : contents\n\n  const props = {\n    ...(propsActive.disabled && {\n      // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n      focusable: undefined,\n      // even with tabIndex unset, it will keep focusStyle on web so disable it here\n      focusStyle: {\n        borderColor: '$background',\n      },\n    }),\n    // fixes SSR issue + DOM nesting issue of not allowing button in button\n    ...(!isNested && {\n      tag: 'span',\n    }),\n    ...rest,\n    children: isRSC ? (\n      inner\n    ) : (\n      <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>\n    ),\n  }\n\n  return {\n    spaceSize,\n    isNested,\n    props,\n  }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {\n  const { props: buttonProps } = useButton(props)\n  return <ButtonFrame {...buttonProps} ref={ref} />\n})\n\nexport const buttonStaticConfig = {\n  inlineProps: new Set([\n    // text props go here (can't really optimize them, but we never fully extract button anyway)\n    // may be able to remove this entirely, as the compiler / runtime have gotten better\n    'color',\n    'fontWeight',\n    'fontSize',\n    'fontFamily',\n    'letterSpacing',\n    'textAlign',\n  ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n  themeable(ButtonComponent, ButtonFrame.staticConfig),\n  buttonStaticConfig\n)\n"],
+  "mappings": "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",
   "names": ["Button"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/button",
-  "version": "1.0.1-rc.4",
+  "version": "1.0.1-rc.5",
   "sideEffects": [
     "*.css"
   ],
@@ -28,17 +28,17 @@
     }
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-rc.4",
-    "@tamagui/font-size": "^1.0.1-rc.4",
-    "@tamagui/get-button-sized": "^1.0.1-rc.4",
-    "@tamagui/helpers-tamagui": "^1.0.1-rc.4"
+    "@tamagui/core": "^1.0.1-rc.5",
+    "@tamagui/font-size": "^1.0.1-rc.5",
+    "@tamagui/get-button-sized": "^1.0.1-rc.5",
+    "@tamagui/helpers-tamagui": "^1.0.1-rc.5"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-rc.4",
+    "@tamagui/build": "^1.0.1-rc.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/Button.tsx

@@ -119,7 +119,7 @@ export const ButtonText = styled(SizableText, {
 })
 
 export function useButton(
-  props: ButtonProps,
+  propsIn: ButtonProps,
   { Text = ButtonText }: { Text: any } = { Text: ButtonText }
 ) {
   // careful not to desctructure and re-order props, order is important
@@ -144,16 +144,16 @@ export function useButton(
     textAlign,
     textProps,
     ...rest
-  } = props
+  } = propsIn
 
   const isNested = isRSC ? false : useContext(ButtonNestingContext)
-  const mediaActiveProps = useMediaPropsActive(props)
-  const size = mediaActiveProps.size || '$4'
+  const propsActive = useMediaPropsActive(propsIn)
+  const size = propsActive.size || '$4'
   const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color })
   const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)
   const spaceSize = getVariableValue(iconSize) * scaleSpace
-  const contents = wrapChildrenInText(Text, mediaActiveProps)
+  const contents = wrapChildrenInText(Text, propsActive)
   const inner =
     themedIcon || themedIconAfter
       ? spacedChildren({
@@ -162,38 +162,38 @@ export function useButton(
           spaceFlex,
           separator,
           direction:
-            props.flexDirection === 'column' || props.flexDirection === 'column-reverse'
+            propsActive.flexDirection === 'column' || propsActive.flexDirection === 'column-reverse'
               ? 'vertical'
               : 'horizontal',
           children: [themedIcon, contents, themedIconAfter],
         })
       : contents
 
+  const props = {
+    ...(propsActive.disabled && {
+      // in rnw - false still has keyboard tabIndex, undefined = not actually focusable
+      focusable: undefined,
+      // even with tabIndex unset, it will keep focusStyle on web so disable it here
+      focusStyle: {
+        borderColor: '$background',
+      },
+    }),
+    // fixes SSR issue + DOM nesting issue of not allowing button in button
+    ...(!isNested && {
+      tag: 'span',
+    }),
+    ...rest,
+    children: isRSC ? (
+      inner
+    ) : (
+      <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>
+    ),
+  }
+
   return {
     spaceSize,
     isNested,
-    props: {
-      ...(props.disabled && {
-        // in rnw - false still has keyboard tabIndex, undefined = not actually focusable
-        focusable: undefined,
-        // even with tabIndex unset, it will keep focusStyle on web so disable it here
-        focusStyle: {
-          borderColor: '$background',
-        },
-      }),
-      // fixes SSR issue + DOM nesting issue of not allowing button in button
-      ...(isNested
-        ? {
-            tag: 'span',
-          }
-        : {}),
-      ...rest,
-      children: isRSC ? (
-        inner
-      ) : (
-        <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>
-      ),
-    },
+    props,
   }
 }
 

package/types/Button.d.ts

@@ -137,7 +137,7 @@ export declare const ButtonText: import("@tamagui/core").TamaguiComponent<(Omit<
 } & {
     [x: string]: undefined;
 })>;
-export declare function useButton(props: ButtonProps, { Text }?: {
+export declare function useButton(propsIn: ButtonProps, { Text }?: {
     Text: any;
 }): {
     spaceSize: number;
@@ -180,6 +180,18 @@ export declare function useButton(props: ButtonProps, { Text }?: {
         onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
         onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
         onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerCancel?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerCancelCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerDown?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerUp?: ((event: import("react-native").PointerEvent) => void) | undefined;
+        onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
         accessible?: boolean | undefined;
         accessibilityActions?: readonly Readonly<{
             name: string;
@@ -193,9 +205,11 @@ export declare function useButton(props: ButtonProps, { Text }?: {
         accessibilityHint?: string | undefined;
         accessibilityValue?: import("react-native").AccessibilityValue | undefined;
         onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+        accessibilityLabelledBy?: string | string[] | undefined;
         accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
         importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
         accessibilityElementsHidden?: boolean | undefined;
+        accessibilityLanguage?: string | undefined;
         accessibilityViewIsModal?: boolean | undefined;
         onAccessibilityEscape?: (() => void) | undefined;
         onAccessibilityTap?: (() => void) | undefined;
@@ -240,7 +254,7 @@ export declare function useButton(props: ButtonProps, { Text }?: {
         id?: string | undefined;
         tag?: string | undefined;
         componentName?: string | undefined;
-        forceStyle?: "hover" | "press" | "focus" | undefined;
+        forceStyle?: "focus" | "hover" | "press" | undefined;
         onHoverIn?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onHoverOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onPress?: ((event: import("react-native").GestureResponderEvent) => void) | null | undefined;