@tamagui/button 1.1.7 → 1.1.9

package/dist/cjs/Button.js

@@ -47,6 +47,7 @@ const ButtonFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
   alignItems: "center",
   flexWrap: "nowrap",
   flexDirection: "row",
+  // if we wanted this only when pressable = true, we'd need to merge variants?
   cursor: "pointer",
   pressStyle: {
     borderColor: "transparent"
@@ -82,6 +83,7 @@ const ButtonText = (0, import_core.styled)(import_text.SizableText, {
   color: "$color",
   userSelect: "none",
   cursor: "pointer",
+  // flexGrow 1 leads to inconsistent native style where text pushes to start of view
   flexGrow: 0,
   flexShrink: 1,
   ellipse: true
@@ -98,6 +100,7 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
     scaleIcon = 1,
     scaleSpace = 0.66,
     separator,
+    // text props
     color,
     fontWeight,
     letterSpacing,
@@ -109,33 +112,37 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
   } = propsIn;
   const isNested = import_core.isRSC ? false : (0, import_react.useContext)(import_core.ButtonNestingContext);
   const propsActive = (0, import_core.useMediaPropsActive)(propsIn);
-  const size = propsActive.size || "$4";
+  const size = propsActive.size || "$true";
   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 = propsActive.space ?? (0, import_core.getVariableValue)(iconSize) * scaleSpace;
   const contents = (0, import_text.wrapChildrenInText)(Text, propsActive);
   const inner = (0, import_core.spacedChildren)({
+    // a bit arbitrary but scaling to font size is necessary so long as button does
     space: spaceSize,
     spaceFlex,
     separator,
     direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
     children: [themedIcon, ...contents, themedIconAfter]
   });
-  const tag = isNested ? "span" : propsIn.accessibilityRole === "link" ? "a" : void 0;
+  const tag = isNested ? "span" : (
+    // defaults to <a /> when accessibilityRole = link
+    // see https://github.com/tamagui/tamagui/issues/505
+    propsIn.accessibilityRole === "link" ? "a" : void 0
+  );
   const props = {
     ...propsActive.disabled && {
+      // in rnw - false still has keyboard tabIndex, undefined = not actually focusable
       focusable: void 0,
+      // even with tabIndex unset, it will keep focusStyle on web so disable it here
       focusStyle: {
         borderColor: "$background"
       }
     },
     tag,
     ...rest,
-    children: import_core.isRSC ? inner : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ButtonNestingContext.Provider, {
-      value: true,
-      children: inner
-    })
+    children: import_core.isRSC ? inner : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ButtonNestingContext.Provider, { value: true, children: inner })
   };
   return {
     spaceSize,
@@ -145,13 +152,12 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
 }
 const ButtonComponent = (0, import_react.forwardRef)(function Button(props, ref) {
   const { props: buttonProps } = useButton(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonFrame, {
-    ...buttonProps,
-    ref
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonFrame, { ...buttonProps, ref });
 });
 const buttonStaticConfig = {
   inlineProps: /* @__PURE__ */ new Set([
+    // text props go here (can't really optimize them, but we never fully extract button anyway)
+    // may be able to remove this entirely, as the compiler / runtime have gotten better
     "color",
     "fontWeight",
     "fontSize",

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: '$true',\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 = propsActive.space ?? getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, propsActive)\n  const inner = 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' ||\n      propsActive.flexDirection === 'column-reverse'\n        ? 'vertical'\n        : 'horizontal',\n    children: [themedIcon, ...contents, themedIconAfter],\n  })\n\n  // fixes SSR issue + DOM nesting issue of not allowing button in button\n  const tag = isNested\n    ? 'span'\n    : // defaults to <a /> when accessibilityRole = link\n    // see https://github.com/tamagui/tamagui/issues/505\n    propsIn.accessibilityRole === 'link'\n    ? 'a'\n    : undefined\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    tag,\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(\n  props,\n  ref\n) {\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: '$true',\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 || '$true'\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 = propsActive.space ?? getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, propsActive)\n  const inner = 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' ||\n      propsActive.flexDirection === 'column-reverse'\n        ? 'vertical'\n        : 'horizontal',\n    children: [themedIcon, ...contents, themedIconAfter],\n  })\n\n  // fixes SSR issue + DOM nesting issue of not allowing button in button\n  const tag = isNested\n    ? 'span'\n    : // defaults to <a /> when accessibilityRole = link\n    // see https://github.com/tamagui/tamagui/issues/505\n    propsIn.accessibilityRole === 'link'\n    ? 'a'\n    : undefined\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    tag,\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(\n  props,\n  ref\n) {\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

@@ -28,6 +28,7 @@ const ButtonFrame = styled(ThemeableStack, {
   alignItems: "center",
   flexWrap: "nowrap",
   flexDirection: "row",
+  // if we wanted this only when pressable = true, we'd need to merge variants?
   cursor: "pointer",
   pressStyle: {
     borderColor: "transparent"
@@ -63,6 +64,7 @@ const ButtonText = styled(SizableText, {
   color: "$color",
   userSelect: "none",
   cursor: "pointer",
+  // flexGrow 1 leads to inconsistent native style where text pushes to start of view
   flexGrow: 0,
   flexShrink: 1,
   ellipse: true
@@ -79,6 +81,7 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
     scaleIcon = 1,
     scaleSpace = 0.66,
     separator,
+    // text props
     color,
     fontWeight,
     letterSpacing,
@@ -90,33 +93,37 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
   } = propsIn;
   const isNested = isRSC ? false : useContext(ButtonNestingContext);
   const propsActive = useMediaPropsActive(propsIn);
-  const size = propsActive.size || "$4";
+  const size = propsActive.size || "$true";
   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 = propsActive.space ?? getVariableValue(iconSize) * scaleSpace;
   const contents = wrapChildrenInText(Text, propsActive);
   const inner = spacedChildren({
+    // a bit arbitrary but scaling to font size is necessary so long as button does
     space: spaceSize,
     spaceFlex,
     separator,
     direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
     children: [themedIcon, ...contents, themedIconAfter]
   });
-  const tag = isNested ? "span" : propsIn.accessibilityRole === "link" ? "a" : void 0;
+  const tag = isNested ? "span" : (
+    // defaults to <a /> when accessibilityRole = link
+    // see https://github.com/tamagui/tamagui/issues/505
+    propsIn.accessibilityRole === "link" ? "a" : void 0
+  );
   const props = {
     ...propsActive.disabled && {
+      // in rnw - false still has keyboard tabIndex, undefined = not actually focusable
       focusable: void 0,
+      // even with tabIndex unset, it will keep focusStyle on web so disable it here
       focusStyle: {
         borderColor: "$background"
       }
     },
     tag,
     ...rest,
-    children: isRSC ? inner : /* @__PURE__ */ jsx(ButtonNestingContext.Provider, {
-      value: true,
-      children: inner
-    })
+    children: isRSC ? inner : /* @__PURE__ */ jsx(ButtonNestingContext.Provider, { value: true, children: inner })
   };
   return {
     spaceSize,
@@ -126,13 +133,12 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
 }
 const ButtonComponent = forwardRef(function Button(props, ref) {
   const { props: buttonProps } = useButton(props);
-  return /* @__PURE__ */ jsx(ButtonFrame, {
-    ...buttonProps,
-    ref
-  });
+  return /* @__PURE__ */ jsx(ButtonFrame, { ...buttonProps, ref });
 });
 const buttonStaticConfig = {
   inlineProps: /* @__PURE__ */ new Set([
+    // text props go here (can't really optimize them, but we never fully extract button anyway)
+    // may be able to remove this entirely, as the compiler / runtime have gotten better
     "color",
     "fontWeight",
     "fontSize",

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: '$true',\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 = propsActive.space ?? getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, propsActive)\n  const inner = 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' ||\n      propsActive.flexDirection === 'column-reverse'\n        ? 'vertical'\n        : 'horizontal',\n    children: [themedIcon, ...contents, themedIconAfter],\n  })\n\n  // fixes SSR issue + DOM nesting issue of not allowing button in button\n  const tag = isNested\n    ? 'span'\n    : // defaults to <a /> when accessibilityRole = link\n    // see https://github.com/tamagui/tamagui/issues/505\n    propsIn.accessibilityRole === 'link'\n    ? 'a'\n    : undefined\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    tag,\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(\n  props,\n  ref\n) {\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": "AAgMM;AAhMN;AAAA,EACE;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,aAA+B,0BAA0B;AAClE,SAA4B,YAAY,kBAAkB;AAiC1D,MAAM,OAAO;AAEN,MAAM,cAAc,OAAO,gBAAgB;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,aAAa,OAAO,aAAa;AAAA,EAC5C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,QAAQ;AAAA,EAER,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAEM,SAAS,UACd,SACA,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,QAAQ,QAAQ,WAAW,oBAAoB;AAChE,QAAM,cAAc,oBAAoB,OAAO;AAC/C,QAAM,OAAO,YAAY,QAAQ;AACjC,QAAM,YAAY,OAAO,SAAS,WAAW,OAAO,MAAM,YAAY,IAAI,KAAK;AAC/E,QAAM,gBAAgB,iBAAiB,EAAE,MAAM,UAAU,MAAM,CAAC;AAChE,QAAM,CAAC,YAAY,eAAe,IAAI,CAAC,MAAM,SAAS,EAAE,IAAI,aAAa;AACzE,QAAM,YAAY,YAAY,SAAS,iBAAiB,QAAQ,IAAI;AACpE,QAAM,WAAW,mBAAmB,MAAM,WAAW;AACrD,QAAM,QAAQ,eAAe;AAAA,IAE3B,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WACE,YAAY,kBAAkB,YAC9B,YAAY,kBAAkB,mBAC1B,aACA;AAAA,IACN,UAAU,CAAC,YAAY,GAAG,UAAU,eAAe;AAAA,EACrD,CAAC;AAGD,QAAM,MAAM,WACR,SAGF,QAAQ,sBAAsB,SAC5B,MACA;AAEJ,QAAM,QAAQ;AAAA,IACZ,GAAI,YAAY,YAAY;AAAA,MAE1B,WAAW;AAAA,MAEX,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH,UAAU,QACR,QAEA,oBAAC,qBAAqB,UAArB;AAAA,MAA8B,OAAO;AAAA,MAAO;AAAA,KAAM;AAAA,EAEvD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEA,MAAM,kBAAkB,WAAwC,SAAS,OACvE,OACA,KACA;AACA,QAAM,EAAE,OAAO,YAAY,IAAI,UAAU,KAAK;AAC9C,SAAO,oBAAC;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,EAChC,UAAU,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: '$true',\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 || '$true'\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 = propsActive.space ?? getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, propsActive)\n  const inner = 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' ||\n      propsActive.flexDirection === 'column-reverse'\n        ? 'vertical'\n        : 'horizontal',\n    children: [themedIcon, ...contents, themedIconAfter],\n  })\n\n  // fixes SSR issue + DOM nesting issue of not allowing button in button\n  const tag = isNested\n    ? 'span'\n    : // defaults to <a /> when accessibilityRole = link\n    // see https://github.com/tamagui/tamagui/issues/505\n    propsIn.accessibilityRole === 'link'\n    ? 'a'\n    : undefined\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    tag,\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(\n  props,\n  ref\n) {\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

@@ -27,6 +27,7 @@ const ButtonFrame = styled(ThemeableStack, {
   alignItems: "center",
   flexWrap: "nowrap",
   flexDirection: "row",
+  // if we wanted this only when pressable = true, we'd need to merge variants?
   cursor: "pointer",
   pressStyle: {
     borderColor: "transparent"
@@ -62,6 +63,7 @@ const ButtonText = styled(SizableText, {
   color: "$color",
   userSelect: "none",
   cursor: "pointer",
+  // flexGrow 1 leads to inconsistent native style where text pushes to start of view
   flexGrow: 0,
   flexShrink: 1,
   ellipse: true
@@ -78,6 +80,7 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
     scaleIcon = 1,
     scaleSpace = 0.66,
     separator,
+    // text props
     color,
     fontWeight,
     letterSpacing,
@@ -89,23 +92,30 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
   } = propsIn;
   const isNested = isRSC ? false : useContext(ButtonNestingContext);
   const propsActive = useMediaPropsActive(propsIn);
-  const size = propsActive.size || "$4";
+  const size = propsActive.size || "$true";
   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 = propsActive.space ?? getVariableValue(iconSize) * scaleSpace;
   const contents = wrapChildrenInText(Text, propsActive);
   const inner = spacedChildren({
+    // a bit arbitrary but scaling to font size is necessary so long as button does
     space: spaceSize,
     spaceFlex,
     separator,
     direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
     children: [themedIcon, ...contents, themedIconAfter]
   });
-  const tag = isNested ? "span" : propsIn.accessibilityRole === "link" ? "a" : void 0;
+  const tag = isNested ? "span" : (
+    // defaults to <a /> when accessibilityRole = link
+    // see https://github.com/tamagui/tamagui/issues/505
+    propsIn.accessibilityRole === "link" ? "a" : void 0
+  );
   const props = {
     ...propsActive.disabled && {
+      // in rnw - false still has keyboard tabIndex, undefined = not actually focusable
       focusable: void 0,
+      // even with tabIndex unset, it will keep focusStyle on web so disable it here
       focusStyle: {
         borderColor: "$background"
       }
@@ -126,6 +136,8 @@ const ButtonComponent = forwardRef(function Button(props, ref) {
 });
 const buttonStaticConfig = {
   inlineProps: /* @__PURE__ */ new Set([
+    // text props go here (can't really optimize them, but we never fully extract button anyway)
+    // may be able to remove this entirely, as the compiler / runtime have gotten better
     "color",
     "fontWeight",
     "fontSize",

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: '$true',\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 = propsActive.space ?? getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, propsActive)\n  const inner = 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' ||\n      propsActive.flexDirection === 'column-reverse'\n        ? 'vertical'\n        : 'horizontal',\n    children: [themedIcon, ...contents, themedIconAfter],\n  })\n\n  // fixes SSR issue + DOM nesting issue of not allowing button in button\n  const tag = isNested\n    ? 'span'\n    : // defaults to <a /> when accessibilityRole = link\n    // see https://github.com/tamagui/tamagui/issues/505\n    propsIn.accessibilityRole === 'link'\n    ? 'a'\n    : undefined\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    tag,\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(\n  props,\n  ref\n) {\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,EACE;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,aAA+B,0BAA0B;AAClE,SAA4B,YAAY,kBAAkB;AAiC1D,MAAM,OAAO;AAEN,MAAM,cAAc,OAAO,gBAAgB;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,aAAa,OAAO,aAAa;AAAA,EAC5C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,QAAQ;AAAA,EAER,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAEM,SAAS,UACd,SACA,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,QAAQ,QAAQ,WAAW,oBAAoB;AAChE,QAAM,cAAc,oBAAoB,OAAO;AAC/C,QAAM,OAAO,YAAY,QAAQ;AACjC,QAAM,YAAY,OAAO,SAAS,WAAW,OAAO,MAAM,YAAY,IAAI,KAAK;AAC/E,QAAM,gBAAgB,iBAAiB,EAAE,MAAM,UAAU,MAAM,CAAC;AAChE,QAAM,CAAC,YAAY,eAAe,IAAI,CAAC,MAAM,SAAS,EAAE,IAAI,aAAa;AACzE,QAAM,YAAY,YAAY,SAAS,iBAAiB,QAAQ,IAAI;AACpE,QAAM,WAAW,mBAAmB,MAAM,WAAW;AACrD,QAAM,QAAQ,eAAe;AAAA,IAE3B,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WACE,YAAY,kBAAkB,YAC9B,YAAY,kBAAkB,mBAC1B,aACA;AAAA,IACN,UAAU,CAAC,YAAY,GAAG,UAAU,eAAe;AAAA,EACrD,CAAC;AAGD,QAAM,MAAM,WACR,SAGF,QAAQ,sBAAsB,SAC5B,MACA;AAEJ,QAAM,QAAQ;AAAA,IACZ,GAAI,YAAY,YAAY;AAAA,MAE1B,WAAW;AAAA,MAEX,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH,UAAU,QACR,QAEA,CAAC,qBAAqB,SAAS,OAAO,OAAO,MAAM,EAAlD,qBAAqB;AAAA,EAE1B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEA,MAAM,kBAAkB,WAAwC,SAAS,OACvE,OACA,KACA;AACA,QAAM,EAAE,OAAO,YAAY,IAAI,UAAU,KAAK;AAC9C,SAAO,CAAC,gBAAgB,aAAa,KAAK,KAAK;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,EAChC,UAAU,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: '$true',\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 || '$true'\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 = propsActive.space ?? getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, propsActive)\n  const inner = 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' ||\n      propsActive.flexDirection === 'column-reverse'\n        ? 'vertical'\n        : 'horizontal',\n    children: [themedIcon, ...contents, themedIconAfter],\n  })\n\n  // fixes SSR issue + DOM nesting issue of not allowing button in button\n  const tag = isNested\n    ? 'span'\n    : // defaults to <a /> when accessibilityRole = link\n    // see https://github.com/tamagui/tamagui/issues/505\n    propsIn.accessibilityRole === 'link'\n    ? 'a'\n    : undefined\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    tag,\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(\n  props,\n  ref\n) {\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.1.7",
+  "version": "1.1.9",
   "sideEffects": [
     "*.css"
   ],
@@ -29,17 +29,17 @@
     }
   },
   "dependencies": {
-    "@tamagui/core": "^1.1.7",
-    "@tamagui/font-size": "^1.1.7",
-    "@tamagui/get-button-sized": "^1.1.7",
-    "@tamagui/helpers-tamagui": "^1.1.7"
+    "@tamagui/core": "^1.1.9",
+    "@tamagui/font-size": "^1.1.9",
+    "@tamagui/get-button-sized": "^1.1.9",
+    "@tamagui/helpers-tamagui": "^1.1.9"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.1.7",
+    "@tamagui/build": "^1.1.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vitest": "^0.26.3"

package/src/Button.tsx

@@ -148,7 +148,7 @@ export function useButton(
 
   const isNested = isRSC ? false : useContext(ButtonNestingContext)
   const propsActive = useMediaPropsActive(propsIn)
-  const size = propsActive.size || '$4'
+  const size = propsActive.size || '$true'
   const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color })
   const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)