@tamagui/button 1.2.3 → 1.2.4

package/dist/cjs/Button.js

@@ -37,28 +37,31 @@ const NAME = "Button";
 const ButtonFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
   name: NAME,
   tag: "button",
-  focusable: true,
-  hoverTheme: true,
-  pressTheme: true,
-  backgrounded: true,
-  borderWidth: 1,
-  borderColor: "transparent",
   justifyContent: "center",
   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"
-  },
-  hoverStyle: {
-    borderColor: "transparent"
-  },
-  focusStyle: {
-    borderColor: "$borderColorFocus"
-  },
   variants: {
+    defaultStyle: {
+      true: {
+        focusable: true,
+        hoverTheme: true,
+        pressTheme: true,
+        backgrounded: true,
+        borderWidth: 1,
+        borderColor: "transparent",
+        pressStyle: {
+          borderColor: "transparent"
+        },
+        hoverStyle: {
+          borderColor: "transparent"
+        },
+        focusStyle: {
+          borderColor: "$borderColorFocus"
+        }
+      }
+    },
     size: {
       "...size": import_get_button_sized.getButtonSized
     },
@@ -80,14 +83,44 @@ const ButtonFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
   }
 });
 const ButtonText = (0, import_core.styled)(import_text.SizableText, {
-  color: "$color",
+  name: "ButtonText",
   userSelect: "none",
   cursor: "pointer",
   // flexGrow 1 leads to inconsistent native style where text pushes to start of view
   flexGrow: 0,
   flexShrink: 1,
-  ellipse: true
+  ellipse: true,
+  variants: {
+    defaultStyle: {
+      true: {
+        color: "$color"
+      }
+    }
+  }
 });
+const ButtonComponent = (0, import_react.forwardRef)(function Button(props, ref) {
+  const {
+    props: { unstyled, ...buttonProps }
+  } = useButton(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonFrame, { defaultStyle: !unstyled, ...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",
+    "fontFamily",
+    "letterSpacing",
+    "textAlign",
+    "unstyled"
+  ])
+};
+const Button2 = ButtonFrame.extractable(
+  (0, import_core.themeable)(ButtonComponent, ButtonFrame.staticConfig),
+  buttonStaticConfig
+);
 function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
   const {
     children,
@@ -117,7 +150,13 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
   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 contents = (0, import_text.wrapChildrenInText)(
+    Text,
+    propsActive,
+    Text === ButtonText ? {
+      defaultStyle: !propsIn.unstyled
+    } : void 0
+  );
   const inner = (0, import_core.spacedChildren)({
     // a bit arbitrary but scaling to font size is necessary so long as button does
     space: spaceSize,
@@ -150,26 +189,6 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
     props
   };
 }
-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 });
-});
-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",
-    "fontFamily",
-    "letterSpacing",
-    "textAlign"
-  ])
-};
-const Button2 = ButtonFrame.extractable(
-  (0, import_core.themeable)(ButtonComponent, ButtonFrame.staticConfig),
-  buttonStaticConfig
-);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,

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 || '$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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",
+  "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     * @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     *\n     */\n    unstyled?: boolean\n  }\n\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'button',\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n\n  variants: {\n    defaultStyle: {\n      true: {\n        focusable: true,\n        hoverTheme: true,\n        pressTheme: true,\n        backgrounded: true,\n        borderWidth: 1,\n        borderColor: 'transparent',\n\n        pressStyle: {\n          borderColor: 'transparent',\n        },\n\n        hoverStyle: {\n          borderColor: 'transparent',\n        },\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\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\nexport const ButtonText = styled(SizableText, {\n  name: 'ButtonText',\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  variants: {\n    defaultStyle: {\n      true: {\n        color: '$color',\n      },\n    },\n  },\n})\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(\n  props,\n  ref\n) {\n  const {\n    props: { unstyled, ...buttonProps },\n  } = useButton(props)\n  return <ButtonFrame defaultStyle={!unstyled} {...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    'unstyled',\n  ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n  themeable(ButtonComponent, ButtonFrame.staticConfig),\n  buttonStaticConfig\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(\n    Text,\n    propsActive,\n    Text === ButtonText\n      ? {\n          defaultStyle: !propsIn.unstyled,\n        }\n      : undefined\n  )\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"],
+  "mappings": "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",
   "names": ["Button"]
 }

package/dist/esm/Button.js

@@ -18,28 +18,31 @@ const NAME = "Button";
 const ButtonFrame = styled(ThemeableStack, {
   name: NAME,
   tag: "button",
-  focusable: true,
-  hoverTheme: true,
-  pressTheme: true,
-  backgrounded: true,
-  borderWidth: 1,
-  borderColor: "transparent",
   justifyContent: "center",
   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"
-  },
-  hoverStyle: {
-    borderColor: "transparent"
-  },
-  focusStyle: {
-    borderColor: "$borderColorFocus"
-  },
   variants: {
+    defaultStyle: {
+      true: {
+        focusable: true,
+        hoverTheme: true,
+        pressTheme: true,
+        backgrounded: true,
+        borderWidth: 1,
+        borderColor: "transparent",
+        pressStyle: {
+          borderColor: "transparent"
+        },
+        hoverStyle: {
+          borderColor: "transparent"
+        },
+        focusStyle: {
+          borderColor: "$borderColorFocus"
+        }
+      }
+    },
     size: {
       "...size": getButtonSized
     },
@@ -61,14 +64,44 @@ const ButtonFrame = styled(ThemeableStack, {
   }
 });
 const ButtonText = styled(SizableText, {
-  color: "$color",
+  name: "ButtonText",
   userSelect: "none",
   cursor: "pointer",
   // flexGrow 1 leads to inconsistent native style where text pushes to start of view
   flexGrow: 0,
   flexShrink: 1,
-  ellipse: true
+  ellipse: true,
+  variants: {
+    defaultStyle: {
+      true: {
+        color: "$color"
+      }
+    }
+  }
 });
+const ButtonComponent = forwardRef(function Button(props, ref) {
+  const {
+    props: { unstyled, ...buttonProps }
+  } = useButton(props);
+  return /* @__PURE__ */ jsx(ButtonFrame, { defaultStyle: !unstyled, ...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",
+    "fontFamily",
+    "letterSpacing",
+    "textAlign",
+    "unstyled"
+  ])
+};
+const Button2 = ButtonFrame.extractable(
+  themeable(ButtonComponent, ButtonFrame.staticConfig),
+  buttonStaticConfig
+);
 function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
   const {
     children,
@@ -98,7 +131,13 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
   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 contents = wrapChildrenInText(
+    Text,
+    propsActive,
+    Text === ButtonText ? {
+      defaultStyle: !propsIn.unstyled
+    } : void 0
+  );
   const inner = spacedChildren({
     // a bit arbitrary but scaling to font size is necessary so long as button does
     space: spaceSize,
@@ -131,26 +170,6 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
     props
   };
 }
-const ButtonComponent = forwardRef(function Button(props, ref) {
-  const { props: buttonProps } = useButton(props);
-  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",
-    "fontFamily",
-    "letterSpacing",
-    "textAlign"
-  ])
-};
-const Button2 = ButtonFrame.extractable(
-  themeable(ButtonComponent, ButtonFrame.staticConfig),
-  buttonStaticConfig
-);
 export {
   Button2 as Button,
   ButtonFrame,

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 || '$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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",
+  "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     * @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     *\n     */\n    unstyled?: boolean\n  }\n\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'button',\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n\n  variants: {\n    defaultStyle: {\n      true: {\n        focusable: true,\n        hoverTheme: true,\n        pressTheme: true,\n        backgrounded: true,\n        borderWidth: 1,\n        borderColor: 'transparent',\n\n        pressStyle: {\n          borderColor: 'transparent',\n        },\n\n        hoverStyle: {\n          borderColor: 'transparent',\n        },\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\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\nexport const ButtonText = styled(SizableText, {\n  name: 'ButtonText',\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  variants: {\n    defaultStyle: {\n      true: {\n        color: '$color',\n      },\n    },\n  },\n})\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(\n  props,\n  ref\n) {\n  const {\n    props: { unstyled, ...buttonProps },\n  } = useButton(props)\n  return <ButtonFrame defaultStyle={!unstyled} {...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    'unstyled',\n  ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n  themeable(ButtonComponent, ButtonFrame.staticConfig),\n  buttonStaticConfig\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(\n    Text,\n    propsActive,\n    Text === ButtonText\n      ? {\n          defaultStyle: !propsIn.unstyled,\n        }\n      : undefined\n  )\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"],
+  "mappings": "AAyIS;AAzIT;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;AAoC1D,MAAM,OAAO;AAEN,MAAM,cAAc,OAAO,gBAAgB;AAAA,EAChD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EACf,QAAQ;AAAA,EAER,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,MAAM;AAAA,QACJ,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QAEb,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,QAEA,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,QAEA,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAAA,IAEA,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;AAEM,MAAM,aAAa,OAAO,aAAa;AAAA,EAC5C,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AAAA;AAAA,EAER,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,EAET,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,MAAM;AAAA,QACJ,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAED,MAAM,kBAAkB,WAAwC,SAAS,OACvE,OACA,KACA;AACA,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,GAAG,YAAY;AAAA,EACpC,IAAI,UAAU,KAAK;AACnB,SAAO,oBAAC,eAAY,cAAc,CAAC,UAAW,GAAG,aAAa,KAAU;AAC1E,CAAC;AAEM,MAAM,qBAAqB;AAAA,EAChC,aAAa,oBAAI,IAAI;AAAA;AAAA;AAAA,IAGnB;AAAA,IACA;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;AAEO,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;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;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;AAAA,IACf;AAAA,IACA;AAAA,IACA,SAAS,aACL;AAAA,MACE,cAAc,CAAC,QAAQ;AAAA,IACzB,IACA;AAAA,EACN;AACA,QAAM,QAAQ,eAAe;AAAA;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;AAAA;AAAA;AAAA,IAGF,QAAQ,sBAAsB,SAC5B,MACA;AAAA;AAEJ,QAAM,QAAQ;AAAA,IACZ,GAAI,YAAY,YAAY;AAAA;AAAA,MAE1B,WAAW;AAAA;AAAA,MAEX,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH,UAAU,QACR,QAEA,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,MAAO,iBAAM;AAAA,EAEvD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": ["Button"]
 }

package/dist/jsx/Button.js

@@ -17,28 +17,31 @@ const NAME = "Button";
 const ButtonFrame = styled(ThemeableStack, {
   name: NAME,
   tag: "button",
-  focusable: true,
-  hoverTheme: true,
-  pressTheme: true,
-  backgrounded: true,
-  borderWidth: 1,
-  borderColor: "transparent",
   justifyContent: "center",
   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"
-  },
-  hoverStyle: {
-    borderColor: "transparent"
-  },
-  focusStyle: {
-    borderColor: "$borderColorFocus"
-  },
   variants: {
+    defaultStyle: {
+      true: {
+        focusable: true,
+        hoverTheme: true,
+        pressTheme: true,
+        backgrounded: true,
+        borderWidth: 1,
+        borderColor: "transparent",
+        pressStyle: {
+          borderColor: "transparent"
+        },
+        hoverStyle: {
+          borderColor: "transparent"
+        },
+        focusStyle: {
+          borderColor: "$borderColorFocus"
+        }
+      }
+    },
     size: {
       "...size": getButtonSized
     },
@@ -60,14 +63,44 @@ const ButtonFrame = styled(ThemeableStack, {
   }
 });
 const ButtonText = styled(SizableText, {
-  color: "$color",
+  name: "ButtonText",
   userSelect: "none",
   cursor: "pointer",
   // flexGrow 1 leads to inconsistent native style where text pushes to start of view
   flexGrow: 0,
   flexShrink: 1,
-  ellipse: true
+  ellipse: true,
+  variants: {
+    defaultStyle: {
+      true: {
+        color: "$color"
+      }
+    }
+  }
 });
+const ButtonComponent = forwardRef(function Button(props, ref) {
+  const {
+    props: { unstyled, ...buttonProps }
+  } = useButton(props);
+  return <ButtonFrame defaultStyle={!unstyled} {...buttonProps} ref={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",
+    "fontFamily",
+    "letterSpacing",
+    "textAlign",
+    "unstyled"
+  ])
+};
+const Button2 = ButtonFrame.extractable(
+  themeable(ButtonComponent, ButtonFrame.staticConfig),
+  buttonStaticConfig
+);
 function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
   const {
     children,
@@ -97,7 +130,13 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
   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 contents = wrapChildrenInText(
+    Text,
+    propsActive,
+    Text === ButtonText ? {
+      defaultStyle: !propsIn.unstyled
+    } : void 0
+  );
   const inner = spacedChildren({
     // a bit arbitrary but scaling to font size is necessary so long as button does
     space: spaceSize,
@@ -130,26 +169,6 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
     props
   };
 }
-const ButtonComponent = forwardRef(function Button(props, ref) {
-  const { props: buttonProps } = useButton(props);
-  return <ButtonFrame {...buttonProps} ref={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",
-    "fontFamily",
-    "letterSpacing",
-    "textAlign"
-  ])
-};
-const Button2 = ButtonFrame.extractable(
-  themeable(ButtonComponent, ButtonFrame.staticConfig),
-  buttonStaticConfig
-);
 export {
   Button2 as Button,
   ButtonFrame,

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 || '$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": "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;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;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;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;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;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;AAAA;AAAA;AAAA,IAGF,QAAQ,sBAAsB,SAC5B,MACA;AAAA;AAEJ,QAAM,QAAQ;AAAA,IACZ,GAAI,YAAY,YAAY;AAAA;AAAA,MAE1B,WAAW;AAAA;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;AAAA;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     * @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     *\n     */\n    unstyled?: boolean\n  }\n\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'button',\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  flexDirection: 'row',\n  cursor: 'pointer',\n\n  variants: {\n    defaultStyle: {\n      true: {\n        focusable: true,\n        hoverTheme: true,\n        pressTheme: true,\n        backgrounded: true,\n        borderWidth: 1,\n        borderColor: 'transparent',\n\n        pressStyle: {\n          borderColor: 'transparent',\n        },\n\n        hoverStyle: {\n          borderColor: 'transparent',\n        },\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\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\nexport const ButtonText = styled(SizableText, {\n  name: 'ButtonText',\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  variants: {\n    defaultStyle: {\n      true: {\n        color: '$color',\n      },\n    },\n  },\n})\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(\n  props,\n  ref\n) {\n  const {\n    props: { unstyled, ...buttonProps },\n  } = useButton(props)\n  return <ButtonFrame defaultStyle={!unstyled} {...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    'unstyled',\n  ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n  themeable(ButtonComponent, ButtonFrame.staticConfig),\n  buttonStaticConfig\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(\n    Text,\n    propsActive,\n    Text === ButtonText\n      ? {\n          defaultStyle: !propsIn.unstyled,\n        }\n      : undefined\n  )\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"],
+  "mappings": "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",
   "names": ["Button"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/button",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "sideEffects": [
     "*.css"
   ],
@@ -29,17 +29,17 @@
     }
   },
   "dependencies": {
-    "@tamagui/core": "^1.2.3",
-    "@tamagui/font-size": "^1.2.3",
-    "@tamagui/get-button-sized": "^1.2.3",
-    "@tamagui/helpers-tamagui": "^1.2.3"
+    "@tamagui/core": "^1.2.4",
+    "@tamagui/font-size": "^1.2.4",
+    "@tamagui/get-button-sized": "^1.2.4",
+    "@tamagui/helpers-tamagui": "^1.2.4"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.2.3",
+    "@tamagui/build": "^1.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vitest": "^0.26.3"

package/src/Button.tsx

@@ -33,9 +33,8 @@ export type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &
     iconAfter?: IconProp
     /**
      * adjust icon relative to size
-     */
-    /**
-     * default: -1
+     *
+     * @default 1
      */
     scaleIcon?: number
     /**
@@ -46,6 +45,10 @@ export type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &
      * adjust internal space relative to icon size
      */
     scaleSpace?: number
+    /**
+     *
+     */
+    unstyled?: boolean
   }
 
 const NAME = 'Button'
@@ -53,33 +56,36 @@ const NAME = 'Button'
 export const ButtonFrame = styled(ThemeableStack, {
   name: NAME,
   tag: 'button',
-  focusable: true,
-  hoverTheme: true,
-  pressTheme: true,
-  backgrounded: true,
-  borderWidth: 1,
-  borderColor: 'transparent',
   justifyContent: 'center',
   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',
-  },
+  variants: {
+    defaultStyle: {
+      true: {
+        focusable: true,
+        hoverTheme: true,
+        pressTheme: true,
+        backgrounded: true,
+        borderWidth: 1,
+        borderColor: 'transparent',
+
+        pressStyle: {
+          borderColor: 'transparent',
+        },
 
-  hoverStyle: {
-    borderColor: 'transparent',
-  },
+        hoverStyle: {
+          borderColor: 'transparent',
+        },
 
-  focusStyle: {
-    borderColor: '$borderColorFocus',
-  },
+        focusStyle: {
+          borderColor: '$borderColorFocus',
+        },
+      },
+    },
 
-  variants: {
     size: {
       '...size': getButtonSized,
     },
@@ -104,20 +110,53 @@ export const ButtonFrame = styled(ThemeableStack, {
   },
 })
 
-// see TODO breaking types
-// type x = GetProps<typeof ButtonFrame>
-// type y = x['size']
-
 export const ButtonText = styled(SizableText, {
-  color: '$color',
+  name: 'ButtonText',
   userSelect: 'none',
   cursor: 'pointer',
   // flexGrow 1 leads to inconsistent native style where text pushes to start of view
   flexGrow: 0,
   flexShrink: 1,
   ellipse: true,
+
+  variants: {
+    defaultStyle: {
+      true: {
+        color: '$color',
+      },
+    },
+  },
+})
+
+const ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(
+  props,
+  ref
+) {
+  const {
+    props: { unstyled, ...buttonProps },
+  } = useButton(props)
+  return <ButtonFrame defaultStyle={!unstyled} {...buttonProps} ref={ref} />
 })
 
+export const buttonStaticConfig = {
+  inlineProps: 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',
+    'fontFamily',
+    'letterSpacing',
+    'textAlign',
+    'unstyled',
+  ]),
+}
+
+export const Button = ButtonFrame.extractable(
+  themeable(ButtonComponent, ButtonFrame.staticConfig),
+  buttonStaticConfig
+)
+
 export function useButton(
   propsIn: ButtonProps,
   { Text = ButtonText }: { Text: any } = { Text: ButtonText }
@@ -153,7 +192,15 @@ export function useButton(
   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 contents = wrapChildrenInText(
+    Text,
+    propsActive,
+    Text === ButtonText
+      ? {
+          defaultStyle: !propsIn.unstyled,
+        }
+      : undefined
+  )
   const inner = spacedChildren({
     // a bit arbitrary but scaling to font size is necessary so long as button does
     space: spaceSize,
@@ -200,29 +247,3 @@ export function useButton(
     props,
   }
 }
-
-const ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(
-  props,
-  ref
-) {
-  const { props: buttonProps } = useButton(props)
-  return <ButtonFrame {...buttonProps} ref={ref} />
-})
-
-export const buttonStaticConfig = {
-  inlineProps: 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',
-    'fontFamily',
-    'letterSpacing',
-    'textAlign',
-  ]),
-}
-
-export const Button = ButtonFrame.extractable(
-  themeable(ButtonComponent, ButtonFrame.staticConfig),
-  buttonStaticConfig
-)

package/types/Button.d.ts

@@ -17,9 +17,8 @@ export type ButtonProps = Omit<TextParentStyles, 'TextComponent'> & GetProps<typ
     iconAfter?: IconProp;
     /**
      * adjust icon relative to size
-     */
-    /**
-     * default: -1
+     *
+     * @default 1
      */
     scaleIcon?: number;
     /**
@@ -30,6 +29,10 @@ export type ButtonProps = Omit<TextParentStyles, 'TextComponent'> & GetProps<typ
      * adjust internal space relative to icon size
      */
     scaleSpace?: number;
+    /**
+     *
+     */
+    unstyled?: boolean;
 };
 export declare const ButtonFrame: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
     readonly fullscreen?: boolean | undefined;
@@ -46,7 +49,8 @@ export declare const ButtonFrame: import("@tamagui/core").TamaguiComponent<Omit<
     readonly bordered?: number | boolean | undefined;
     readonly transparent?: boolean | undefined;
     readonly chromeless?: boolean | "all" | undefined;
-}, "disabled" | "size" | "active"> & {
+}, "disabled" | "size" | "defaultStyle" | "active"> & {
+    readonly defaultStyle?: boolean | undefined;
     readonly size?: import("@tamagui/core").SizeTokens | undefined;
     readonly active?: boolean | undefined;
     readonly disabled?: boolean | undefined;
@@ -65,7 +69,8 @@ export declare const ButtonFrame: import("@tamagui/core").TamaguiComponent<Omit<
     readonly bordered?: number | boolean | undefined;
     readonly transparent?: boolean | undefined;
     readonly chromeless?: boolean | "all" | undefined;
-}, "disabled" | "size" | "active"> & {
+}, "disabled" | "size" | "defaultStyle" | "active"> & {
+    readonly defaultStyle?: boolean | undefined;
     readonly size?: import("@tamagui/core").SizeTokens | undefined;
     readonly active?: boolean | undefined;
     readonly disabled?: boolean | undefined;
@@ -84,7 +89,8 @@ export declare const ButtonFrame: import("@tamagui/core").TamaguiComponent<Omit<
     readonly bordered?: number | boolean | undefined;
     readonly transparent?: boolean | undefined;
     readonly chromeless?: boolean | "all" | undefined;
-}, "disabled" | "size" | "active"> & {
+}, "disabled" | "size" | "defaultStyle" | "active"> & {
+    readonly defaultStyle?: boolean | undefined;
     readonly size?: import("@tamagui/core").SizeTokens | undefined;
     readonly active?: boolean | undefined;
     readonly disabled?: boolean | undefined;
@@ -104,35 +110,119 @@ export declare const ButtonFrame: import("@tamagui/core").TamaguiComponent<Omit<
     readonly transparent?: boolean | undefined;
     readonly chromeless?: boolean | "all" | undefined;
 } & {
+    readonly defaultStyle?: boolean | undefined;
     readonly size?: import("@tamagui/core").SizeTokens | undefined;
     readonly active?: boolean | undefined;
     readonly disabled?: boolean | undefined;
 }>;
-export declare const ButtonText: import("@tamagui/core").TamaguiComponent<(Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{}, "size"> & {
-    readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
-} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{}, "size"> & {
-    readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
-}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{}, "size"> & {
+export declare const ButtonText: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
     readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
-}>>) | (Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
-    readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
-}, string | number> & {
-    [x: string]: undefined;
+}, "defaultStyle"> & {
+    defaultStyle?: boolean | undefined;
 } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
     readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
-}, string | number> & {
-    [x: string]: undefined;
+}, "defaultStyle"> & {
+    defaultStyle?: boolean | undefined;
 }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
     readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
-}, string | number> & {
-    [x: string]: undefined;
-}>>), TamaguiElement, import("@tamagui/core").TextPropsBase, {
-    readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
-} | ({
+}, "defaultStyle"> & {
+    defaultStyle?: boolean | undefined;
+}>>, TamaguiElement, import("@tamagui/core").TextPropsBase, {
     readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
 } & {
-    [x: string]: undefined;
-})>;
+    defaultStyle?: boolean | undefined;
+}>;
+export declare const buttonStaticConfig: {
+    inlineProps: Set<string>;
+};
+export declare const Button: (props: Omit<Omit<TextParentStyles, "TextComponent"> & Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
+} & {
+    readonly backgrounded?: boolean | undefined;
+    readonly radiused?: boolean | undefined;
+    readonly hoverTheme?: boolean | undefined;
+    readonly pressTheme?: boolean | undefined;
+    readonly focusTheme?: boolean | undefined;
+    readonly circular?: boolean | undefined;
+    readonly padded?: boolean | undefined;
+    readonly elevate?: boolean | undefined;
+    readonly bordered?: number | boolean | undefined;
+    readonly transparent?: boolean | undefined;
+    readonly chromeless?: boolean | "all" | undefined;
+}, "disabled" | "size" | "defaultStyle" | "active"> & {
+    readonly defaultStyle?: boolean | undefined;
+    readonly size?: import("@tamagui/core").SizeTokens | undefined;
+    readonly active?: boolean | undefined;
+    readonly disabled?: boolean | undefined;
+} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
+} & {
+    readonly backgrounded?: boolean | undefined;
+    readonly radiused?: boolean | undefined;
+    readonly hoverTheme?: boolean | undefined;
+    readonly pressTheme?: boolean | undefined;
+    readonly focusTheme?: boolean | undefined;
+    readonly circular?: boolean | undefined;
+    readonly padded?: boolean | undefined;
+    readonly elevate?: boolean | undefined;
+    readonly bordered?: number | boolean | undefined;
+    readonly transparent?: boolean | undefined;
+    readonly chromeless?: boolean | "all" | undefined;
+}, "disabled" | "size" | "defaultStyle" | "active"> & {
+    readonly defaultStyle?: boolean | undefined;
+    readonly size?: import("@tamagui/core").SizeTokens | undefined;
+    readonly active?: boolean | undefined;
+    readonly disabled?: boolean | undefined;
+}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
+} & {
+    readonly backgrounded?: boolean | undefined;
+    readonly radiused?: boolean | undefined;
+    readonly hoverTheme?: boolean | undefined;
+    readonly pressTheme?: boolean | undefined;
+    readonly focusTheme?: boolean | undefined;
+    readonly circular?: boolean | undefined;
+    readonly padded?: boolean | undefined;
+    readonly elevate?: boolean | undefined;
+    readonly bordered?: number | boolean | undefined;
+    readonly transparent?: boolean | undefined;
+    readonly chromeless?: boolean | "all" | undefined;
+}, "disabled" | "size" | "defaultStyle" | "active"> & {
+    readonly defaultStyle?: boolean | undefined;
+    readonly size?: import("@tamagui/core").SizeTokens | undefined;
+    readonly active?: boolean | undefined;
+    readonly disabled?: boolean | undefined;
+}>> & ThemeableProps & {
+    /**
+     * add icon before, passes color and size automatically if Component
+     */
+    icon?: IconProp | undefined;
+    /**
+     * add icon after, passes color and size automatically if Component
+     */
+    iconAfter?: IconProp | undefined;
+    /**
+     * adjust icon relative to size
+     *
+     * @default 1
+     */
+    scaleIcon?: number | undefined;
+    /**
+     * make the spacing elements flex
+     */
+    spaceFlex?: number | boolean | undefined;
+    /**
+     * adjust internal space relative to icon size
+     */
+    scaleSpace?: number | undefined;
+    /**
+     *
+     */
+    unstyled?: boolean | undefined;
+} & import("react").RefAttributes<TamaguiElement>, "theme" | "themeInverse"> & ThemeableProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export declare function useButton(propsIn: ButtonProps, { Text }?: {
     Text: any;
 }): {
@@ -196,6 +286,8 @@ export declare function useButton(propsIn: ButtonProps, { Text }?: {
         accessibilityLabel?: string | undefined;
         accessibilityRole?: "none" | "button" | "link" | "search" | "image" | "keyboardkey" | "text" | "adjustable" | "imagebutton" | "header" | "summary" | "list" | undefined; /**
          * adjust icon relative to size
+         *
+         * @default 1
          */
         accessibilityState?: import("react-native").AccessibilityState | undefined;
         accessibilityHint?: string | undefined;
@@ -215,14 +307,9 @@ export declare function useButton(propsIn: ButtonProps, { Text }?: {
         target?: any;
         rel?: any;
         download?: any;
-        /**
-         * default: -1
-         */
         href?: string | undefined;
         hrefAttrs?: {
-            target?: "top" | "_blank" | "_self" | "_top" | "blank" | "self" | undefined; /**
-             * make the spacing elements flex
-             */
+            target?: "top" | "_blank" | "_self" | "_top" | "blank" | "self" | undefined;
             rel?: string | undefined;
             download?: boolean | undefined;
         } | undefined;
@@ -241,7 +328,9 @@ export declare function useButton(propsIn: ButtonProps, { Text }?: {
         dangerouslySetInnerHTML?: {
             __html: string;
         } | undefined;
-        animation?: import("@tamagui/core").AnimationProp | null | undefined;
+        animation?: import("@tamagui/core").AnimationProp | null | undefined; /**
+         * adjust internal space relative to icon size
+         */
         animateOnly?: string[] | undefined;
         debug?: boolean | "verbose" | undefined;
         disabled?: boolean | undefined;
@@ -256,27 +345,27 @@ export declare function useButton(propsIn: ButtonProps, { Text }?: {
         onPress?: ((event: import("react-native").GestureResponderEvent) => void) | null | undefined;
         onPressIn?: ((event: import("react-native").GestureResponderEvent) => void) | null | undefined;
         onPressOut?: ((event: import("react-native").GestureResponderEvent) => void) | null | undefined;
-        backgroundColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
-        borderBottomColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
-        borderBottomEndRadius?: import("@tamagui/core").RadiusTokens | import("@tamagui/core").ThemeValueFallback | undefined;
-        borderBottomLeftRadius?: import("@tamagui/core").RadiusTokens | import("@tamagui/core").ThemeValueFallback | undefined;
-        borderBottomRightRadius?: import("@tamagui/core").RadiusTokens | import("@tamagui/core").ThemeValueFallback | undefined;
-        borderBottomStartRadius?: import("@tamagui/core").RadiusTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        backgroundColor?: import("@tamagui/core").ColorTokens | import("@tamagui/core").ThemeValueFallback | import("react-native").OpaqueColorValue | undefined;
+        borderBottomColor?: import("@tamagui/core").ColorTokens | import("@tamagui/core").ThemeValueFallback | import("react-native").OpaqueColorValue | undefined;
+        borderBottomEndRadius?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").RadiusTokens | undefined;
+        borderBottomLeftRadius?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").RadiusTokens | undefined;
+        borderBottomRightRadius?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").RadiusTokens | undefined;
+        borderBottomStartRadius?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").RadiusTokens | undefined;
         borderBottomWidth?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SpaceTokens | undefined;
-        borderColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
+        borderColor?: import("@tamagui/core").ColorTokens | import("@tamagui/core").ThemeValueFallback | import("react-native").OpaqueColorValue | undefined;
         borderEndColor?: import("react-native").ColorValue | undefined;
-        borderLeftColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
+        borderLeftColor?: import("@tamagui/core").ColorTokens | import("@tamagui/core").ThemeValueFallback | import("react-native").OpaqueColorValue | undefined;
         borderLeftWidth?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SpaceTokens | undefined;
-        borderRadius?: import("@tamagui/core").RadiusTokens | import("@tamagui/core").ThemeValueFallback | undefined;
-        borderRightColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
+        borderRadius?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").RadiusTokens | undefined;
+        borderRightColor?: import("@tamagui/core").ColorTokens | import("@tamagui/core").ThemeValueFallback | import("react-native").OpaqueColorValue | undefined;
         borderRightWidth?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SpaceTokens | undefined;
         borderStartColor?: import("react-native").ColorValue | undefined;
         borderStyle?: "solid" | "dotted" | "dashed" | undefined;
-        borderTopColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
-        borderTopEndRadius?: import("@tamagui/core").RadiusTokens | import("@tamagui/core").ThemeValueFallback | undefined;
-        borderTopLeftRadius?: import("@tamagui/core").RadiusTokens | import("@tamagui/core").ThemeValueFallback | undefined;
-        borderTopRightRadius?: import("@tamagui/core").RadiusTokens | import("@tamagui/core").ThemeValueFallback | undefined;
-        borderTopStartRadius?: import("@tamagui/core").RadiusTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        borderTopColor?: import("@tamagui/core").ColorTokens | import("@tamagui/core").ThemeValueFallback | import("react-native").OpaqueColorValue | undefined;
+        borderTopEndRadius?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").RadiusTokens | undefined;
+        borderTopLeftRadius?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").RadiusTokens | undefined;
+        borderTopRightRadius?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").RadiusTokens | undefined;
+        borderTopStartRadius?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").RadiusTokens | undefined;
         borderTopWidth?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SpaceTokens | undefined;
         borderWidth?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SpaceTokens | undefined;
         opacity?: number | undefined;
@@ -294,7 +383,7 @@ export declare function useButton(propsIn: ButtonProps, { Text }?: {
         flexGrow?: number | undefined;
         flexShrink?: number | undefined;
         flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        height?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        height?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SizeTokens | undefined;
         justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
         left?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SpaceTokens | undefined;
         margin?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SpaceTokens | undefined;
@@ -306,10 +395,10 @@ export declare function useButton(propsIn: ButtonProps, { Text }?: {
         marginStart?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SpaceTokens | undefined;
         marginTop?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SpaceTokens | undefined;
         marginVertical?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SpaceTokens | undefined;
-        maxHeight?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
-        maxWidth?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
-        minHeight?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
-        minWidth?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        maxHeight?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SizeTokens | undefined;
+        maxWidth?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SizeTokens | undefined;
+        minHeight?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SizeTokens | undefined;
+        minWidth?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SizeTokens | undefined;
         overflow?: "visible" | "hidden" | "scroll" | undefined;
         padding?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SpaceTokens | undefined;
         paddingBottom?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SpaceTokens | undefined;
@@ -324,10 +413,10 @@ export declare function useButton(propsIn: ButtonProps, { Text }?: {
         right?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SpaceTokens | undefined;
         start?: string | number | undefined;
         top?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SpaceTokens | undefined;
-        width?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        width?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SizeTokens | undefined;
         zIndex?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ZIndexTokens | undefined;
         direction?: "inherit" | "ltr" | "rtl" | undefined;
-        shadowColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
+        shadowColor?: import("@tamagui/core").ColorTokens | import("@tamagui/core").ThemeValueFallback | import("react-native").OpaqueColorValue | undefined;
         shadowOffset?: import("@tamagui/core").ThemeValueFallback | {
             width: import("@tamagui/core").SpaceTokens;
             height: import("@tamagui/core").SpaceTokens;
@@ -336,7 +425,7 @@ export declare function useButton(propsIn: ButtonProps, { Text }?: {
             height: number;
         } | undefined;
         shadowOpacity?: number | undefined;
-        shadowRadius?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        shadowRadius?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").SizeTokens | undefined;
         transform?: (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;
         transformMatrix?: number[] | undefined;
         rotation?: number | undefined;
@@ -378,6 +467,7 @@ export declare function useButton(propsIn: ButtonProps, { Text }?: {
         padded?: boolean | undefined;
         chromeless?: boolean | "all" | undefined;
         fullscreen?: boolean | undefined;
+        defaultStyle?: boolean | undefined;
         size?: import("@tamagui/core").SizeTokens | undefined;
         active?: boolean | undefined;
         hoverStyle?: Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
@@ -395,7 +485,8 @@ export declare function useButton(propsIn: ButtonProps, { Text }?: {
             readonly bordered?: number | boolean | undefined;
             readonly transparent?: boolean | undefined;
             readonly chromeless?: boolean | "all" | undefined;
-        }, "disabled" | "size" | "active"> & {
+        }, "disabled" | "size" | "defaultStyle" | "active"> & {
+            readonly defaultStyle?: boolean | undefined;
             readonly size?: import("@tamagui/core").SizeTokens | undefined;
             readonly active?: boolean | undefined;
             readonly disabled?: boolean | undefined;
@@ -415,7 +506,8 @@ export declare function useButton(propsIn: ButtonProps, { Text }?: {
             readonly bordered?: number | boolean | undefined;
             readonly transparent?: boolean | undefined;
             readonly chromeless?: boolean | "all" | undefined;
-        }, "disabled" | "size" | "active"> & {
+        }, "disabled" | "size" | "defaultStyle" | "active"> & {
+            readonly defaultStyle?: boolean | undefined;
             readonly size?: import("@tamagui/core").SizeTokens | undefined;
             readonly active?: boolean | undefined;
             readonly disabled?: boolean | undefined;
@@ -435,7 +527,8 @@ export declare function useButton(propsIn: ButtonProps, { Text }?: {
             readonly bordered?: number | boolean | undefined;
             readonly transparent?: boolean | undefined;
             readonly chromeless?: boolean | "all" | undefined;
-        }, "disabled" | "size" | "active"> & {
+        }, "disabled" | "size" | "defaultStyle" | "active"> & {
+            readonly defaultStyle?: boolean | undefined;
             readonly size?: import("@tamagui/core").SizeTokens | undefined;
             readonly active?: boolean | undefined;
             readonly disabled?: boolean | undefined;
@@ -455,7 +548,8 @@ export declare function useButton(propsIn: ButtonProps, { Text }?: {
             readonly bordered?: number | boolean | undefined;
             readonly transparent?: boolean | undefined;
             readonly chromeless?: boolean | "all" | undefined;
-        }, "disabled" | "size" | "active"> & {
+        }, "disabled" | "size" | "defaultStyle" | "active"> & {
+            readonly defaultStyle?: boolean | undefined;
             readonly size?: import("@tamagui/core").SizeTokens | undefined;
             readonly active?: boolean | undefined;
             readonly disabled?: boolean | undefined;
@@ -475,99 +569,19 @@ export declare function useButton(propsIn: ButtonProps, { Text }?: {
             readonly bordered?: number | boolean | undefined;
             readonly transparent?: boolean | undefined;
             readonly chromeless?: boolean | "all" | undefined;
-        }, "disabled" | "size" | "active"> & {
+        }, "disabled" | "size" | "defaultStyle" | "active"> & {
+            readonly defaultStyle?: boolean | undefined;
             readonly size?: import("@tamagui/core").SizeTokens | undefined;
             readonly active?: boolean | undefined;
             readonly disabled?: boolean | undefined;
         }> | null | undefined;
         themeInverse?: boolean | undefined;
         themeReset?: boolean | undefined;
+        /**
+         *
+         */
+        unstyled?: boolean | undefined;
     };
 };
-export declare const buttonStaticConfig: {
-    inlineProps: Set<string>;
-};
-export declare const Button: (props: Omit<Omit<TextParentStyles, "TextComponent"> & Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
-    readonly fullscreen?: boolean | undefined;
-    readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
-} & {
-    readonly backgrounded?: boolean | undefined;
-    readonly radiused?: boolean | undefined;
-    readonly hoverTheme?: boolean | undefined;
-    readonly pressTheme?: boolean | undefined;
-    readonly focusTheme?: boolean | undefined;
-    readonly circular?: boolean | undefined;
-    readonly padded?: boolean | undefined;
-    readonly elevate?: boolean | undefined;
-    readonly bordered?: number | boolean | undefined;
-    readonly transparent?: boolean | undefined;
-    readonly chromeless?: boolean | "all" | undefined;
-}, "disabled" | "size" | "active"> & {
-    readonly size?: import("@tamagui/core").SizeTokens | undefined;
-    readonly active?: boolean | undefined;
-    readonly disabled?: boolean | undefined;
-} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
-    readonly fullscreen?: boolean | undefined;
-    readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
-} & {
-    readonly backgrounded?: boolean | undefined;
-    readonly radiused?: boolean | undefined;
-    readonly hoverTheme?: boolean | undefined;
-    readonly pressTheme?: boolean | undefined;
-    readonly focusTheme?: boolean | undefined;
-    readonly circular?: boolean | undefined;
-    readonly padded?: boolean | undefined;
-    readonly elevate?: boolean | undefined;
-    readonly bordered?: number | boolean | undefined;
-    readonly transparent?: boolean | undefined;
-    readonly chromeless?: boolean | "all" | undefined;
-}, "disabled" | "size" | "active"> & {
-    readonly size?: import("@tamagui/core").SizeTokens | undefined;
-    readonly active?: boolean | undefined;
-    readonly disabled?: boolean | undefined;
-}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
-    readonly fullscreen?: boolean | undefined;
-    readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
-} & {
-    readonly backgrounded?: boolean | undefined;
-    readonly radiused?: boolean | undefined;
-    readonly hoverTheme?: boolean | undefined;
-    readonly pressTheme?: boolean | undefined;
-    readonly focusTheme?: boolean | undefined;
-    readonly circular?: boolean | undefined;
-    readonly padded?: boolean | undefined;
-    readonly elevate?: boolean | undefined;
-    readonly bordered?: number | boolean | undefined;
-    readonly transparent?: boolean | undefined;
-    readonly chromeless?: boolean | "all" | undefined;
-}, "disabled" | "size" | "active"> & {
-    readonly size?: import("@tamagui/core").SizeTokens | undefined;
-    readonly active?: boolean | undefined;
-    readonly disabled?: boolean | undefined;
-}>> & ThemeableProps & {
-    /**
-     * add icon before, passes color and size automatically if Component
-     */
-    icon?: IconProp | undefined;
-    /**
-     * add icon after, passes color and size automatically if Component
-     */
-    iconAfter?: IconProp | undefined;
-    /**
-     * adjust icon relative to size
-     */
-    /**
-     * default: -1
-     */
-    scaleIcon?: number | undefined;
-    /**
-     * make the spacing elements flex
-     */
-    spaceFlex?: number | boolean | undefined;
-    /**
-     * adjust internal space relative to icon size
-     */
-    scaleSpace?: number | undefined;
-} & import("react").RefAttributes<TamaguiElement>, "theme" | "themeInverse"> & ThemeableProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export {};
 //# sourceMappingURL=Button.d.ts.map

package/types/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,QAAQ,EACR,cAAc,EACd,cAAc,EAOf,MAAM,eAAe,CAAA;AAKtB,OAAO,EAAe,gBAAgB,EAAsB,MAAM,eAAe,CAAA;AACjF,OAAO,EAAE,iBAAiB,EAA0B,MAAM,OAAO,CAAA;AAEjE,KAAK,eAAe,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AACxD,KAAK,QAAQ,GAAG,GAAG,CAAC,OAAO,GAAG,iBAAiB,CAAC,eAAe,CAAC,GAAG,IAAI,CAAA;AAEvE,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,EAAE,eAAe,CAAC,GAC/D,QAAQ,CAAC,OAAO,WAAW,CAAC,GAC5B,cAAc,GAAG;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB;;OAEG;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAIH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDtB,CAAA;AAMF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;GAQrB,CAAA;AAEF,wBAAgB,SAAS,CACvB,OAAO,EAAE,WAAW,EACpB,EAAE,IAAiB,EAAE,GAAE;IAAE,IAAI,EAAE,GAAG,CAAA;CAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iLAzFzD;;WAEG;;;;;;;;;;;;;;;;;;;QACH;;WAEG;;;yFAEH;;eAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+JN;AAUD,eAAO,MAAM,kBAAkB;;CAW9B,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAvMf;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;IACH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;+LAqLN,CAAA"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,QAAQ,EACR,cAAc,EACd,cAAc,EAOf,MAAM,eAAe,CAAA;AAKtB,OAAO,EAAe,gBAAgB,EAAsB,MAAM,eAAe,CAAA;AACjF,OAAO,EAAE,iBAAiB,EAA0B,MAAM,OAAO,CAAA;AAEjE,KAAK,eAAe,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AACxD,KAAK,QAAQ,GAAG,GAAG,CAAC,OAAO,GAAG,iBAAiB,CAAC,eAAe,CAAC,GAAG,IAAI,CAAA;AAEvE,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,EAAE,eAAe,CAAC,GAC/D,QAAQ,CAAC,OAAO,WAAW,CAAC,GAC5B,cAAc,GAAG;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAIH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDtB,CAAA;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;EAgBrB,CAAA;AAYF,eAAO,MAAM,kBAAkB;;CAY9B,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAjIf;;OAEG;;IAEH;;OAEG;;IAEH;;;;OAIG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;+LA4GN,CAAA;AAED,wBAAgB,SAAS,CACvB,OAAO,EAAE,WAAW,EACpB,EAAE,IAAiB,EAAE,GAAE;IAAE,IAAI,EAAE,GAAG,CAAA;CAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iLAhIzD;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8EAMH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAEH;;WAEG;;;EAuMN"}