@tamagui/button 1.0.1-beta.159 → 1.0.1-beta.162

package/dist/cjs/Button.js

@@ -26,7 +26,9 @@ var Button_exports = {};
 __export(Button_exports, {
   Button: () => Button2,
   ButtonFrame: () => ButtonFrame,
-  ButtonText: () => ButtonText
+  ButtonText: () => ButtonText,
+  buttonStaticConfig: () => buttonStaticConfig,
+  useButton: () => useButton
 });
 module.exports = __toCommonJS(Button_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -90,7 +92,7 @@ const ButtonText = (0, import_core.styled)(import_text.SizableText, {
   flexShrink: 1,
   ellipse: true
 });
-const ButtonComponent = (0, import_react.forwardRef)(function Button(props, ref) {
+function useButton(props, { Text = ButtonText } = { Text: ButtonText }) {
   const {
     children,
     icon,
@@ -117,7 +119,7 @@ const ButtonComponent = (0, import_react.forwardRef)(function Button(props, ref)
   const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
   const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
   const spaceSize = (0, import_core.getVariableValue)(iconSize) * scaleSpace;
-  const contents = (0, import_text.wrapChildrenInText)(ButtonText, props);
+  const contents = (0, import_text.wrapChildrenInText)(Text, props);
   const inner = themedIcon || themedIconAfter ? (0, import_core.spacedChildren)({
     space: spaceSize,
     spaceFlex,
@@ -125,25 +127,35 @@ const ButtonComponent = (0, import_react.forwardRef)(function Button(props, ref)
     direction: props.flexDirection === "column" || props.flexDirection === "column-reverse" ? "vertical" : "horizontal",
     children: [themedIcon, contents, themedIconAfter]
   }) : contents;
+  return {
+    spaceSize,
+    isInsideButton,
+    props: {
+      ...props.disabled && {
+        focusable: void 0,
+        focusStyle: {
+          borderColor: "$background"
+        }
+      },
+      ...isInsideButton && {
+        tag: "span"
+      },
+      ...rest,
+      children: import_core.isRSC ? inner : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ButtonInsideButtonContext.Provider, {
+        value: true,
+        children: inner
+      })
+    }
+  };
+}
+const ButtonComponent = (0, import_react.forwardRef)(function Button(props, ref) {
+  const { props: buttonProps } = useButton(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonFrame, {
-    ...props.disabled && {
-      focusable: void 0,
-      focusStyle: {
-        borderColor: "$background"
-      }
-    },
-    ...isInsideButton && {
-      tag: "span"
-    },
-    ref,
-    ...rest,
-    children: import_core.isRSC ? inner : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ButtonInsideButtonContext.Provider, {
-      value: true,
-      children: inner
-    })
+    ...buttonProps,
+    ref
   });
 });
-const Button2 = ButtonFrame.extractable((0, import_core.themeable)(ButtonComponent), {
+const buttonStaticConfig = {
   inlineProps: /* @__PURE__ */ new Set([
     "color",
     "fontWeight",
@@ -152,11 +164,14 @@ const Button2 = ButtonFrame.extractable((0, import_core.themeable)(ButtonCompone
     "letterSpacing",
     "textAlign"
   ])
-});
+};
+const Button2 = ButtonFrame.extractable((0, import_core.themeable)(ButtonComponent), buttonStaticConfig);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   ButtonFrame,
-  ButtonText
+  ButtonText,
+  buttonStaticConfig,
+  useButton
 });
 //# sourceMappingURL=Button.js.map

package/dist/cjs/Button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Button.tsx"],
-  "sourcesContent": ["import {\n  ButtonInsideButtonContext,\n  GetProps,\n  TamaguiComponent,\n  ThemeableProps,\n  getButtonSize,\n  getVariableValue,\n  isRSC,\n  spacedChildren,\n  styled,\n  themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\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    // add icon before, passes color and size automatically if Component\n    icon?: IconProp\n    // add icon after, passes color and size automatically if Component\n    iconAfter?: IconProp\n    // adjust icon relative to size\n    // default: -1\n    scaleIcon?: number\n    // dont wrap inner contents in a text element\n    noTextWrap?: boolean\n    // make the spacing elements flex\n    spaceFlex?: number | boolean\n    // adjust internal space relative to icon size\n    scaleSpace?: number\n  }\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: 'Button',\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': getButtonSize,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        opacity: 0.375,\n        pointerEvents: 'none',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n  color: '$color',\n  selectable: false,\n  cursor: 'inherit',\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\nconst ButtonComponent = forwardRef(function Button(props: ButtonProps, ref) {\n  // careful not to desctructure and re-order props, order is important\n  const {\n    children,\n    icon,\n    iconAfter,\n    noTextWrap,\n    theme: themeName,\n    space,\n    spaceFlex,\n    scaleIcon = 1,\n    scaleSpace = 0.66,\n    separator,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    ...rest\n  } = props as ButtonProps\n\n  const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n  const size = props.size || '$4'\n  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(ButtonText, props)\n\n  const inner =\n    themedIcon || themedIconAfter\n      ? spacedChildren({\n          // a bit arbitrary but scaling to font size is necessary so long as button does\n          space: spaceSize,\n          spaceFlex,\n          separator,\n          direction:\n            props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n              ? 'vertical'\n              : 'horizontal',\n          children: [themedIcon, contents, themedIconAfter],\n        })\n      : contents\n\n  return (\n    <ButtonFrame\n      {...(props.disabled && {\n        // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n        focusable: undefined,\n        // even with tabIndex unset, it will keep focusStyle on web so disable it here\n        focusStyle: {\n          borderColor: '$background',\n        },\n      })}\n      // fixes SSR issue + DOM nesting issue of not allowing button in button\n      {...(isInsideButton && {\n        tag: 'span',\n      })}\n      ref={ref as any}\n      {...rest}\n    >\n      {isRSC ? (\n        inner\n      ) : (\n        <ButtonInsideButtonContext.Provider value={true}>\n          {inner}\n        </ButtonInsideButtonContext.Provider>\n      )}\n    </ButtonFrame>\n  )\n})\n\nexport const Button: TamaguiComponent<ButtonProps, HTMLButtonElement | View> =\n  ButtonFrame.extractable(themeable(ButtonComponent as any) as any, {\n    inlineProps: new Set([\n      // text props go here (can't really optimize them, but we never fully extract button anyway)\n      'color',\n      'fontWeight',\n      'fontSize',\n      'fontFamily',\n      'letterSpacing',\n      'textAlign',\n    ]),\n  })\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  ButtonInsideButtonContext,\n  GetProps,\n  TamaguiElement,\n  ThemeableProps,\n  getButtonSize,\n  getVariableValue,\n  isRSC,\n  spacedChildren,\n  styled,\n  themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\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    // add icon before, passes color and size automatically if Component\n    icon?: IconProp\n    // add icon after, passes color and size automatically if Component\n    iconAfter?: IconProp\n    // adjust icon relative to size\n    // default: -1\n    scaleIcon?: number\n    // dont wrap inner contents in a text element\n    noTextWrap?: boolean\n    // make the spacing elements flex\n    spaceFlex?: number | boolean\n    // adjust internal space relative to icon size\n    scaleSpace?: number\n  }\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: 'Button',\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': getButtonSize,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        opacity: 0.375,\n        pointerEvents: 'none',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n  color: '$color',\n  selectable: false,\n  cursor: 'inherit',\n  // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n  flexGrow: 0,\n  flexShrink: 1,\n  ellipse: true,\n})\n\nexport function useButton(\n  props: ButtonProps,\n  { Text = ButtonText }: { Text: any } = { Text: ButtonText }\n) {\n  // careful not to desctructure and re-order props, order is important\n  const {\n    children,\n    icon,\n    iconAfter,\n    noTextWrap,\n    theme: themeName,\n    space,\n    spaceFlex,\n    scaleIcon = 1,\n    scaleSpace = 0.66,\n    separator,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    ...rest\n  } = props\n\n  const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n  const size = props.size || '$4'\n  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, props)\n  const inner =\n    themedIcon || themedIconAfter\n      ? spacedChildren({\n          // a bit arbitrary but scaling to font size is necessary so long as button does\n          space: spaceSize,\n          spaceFlex,\n          separator,\n          direction:\n            props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n              ? 'vertical'\n              : 'horizontal',\n          children: [themedIcon, contents, themedIconAfter],\n        })\n      : contents\n\n  return {\n    spaceSize,\n    isInsideButton,\n    props: {\n      ...(props.disabled && {\n        // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n        focusable: undefined,\n        // even with tabIndex unset, it will keep focusStyle on web so disable it here\n        focusStyle: {\n          borderColor: '$background',\n        },\n      }),\n      // fixes SSR issue + DOM nesting issue of not allowing button in button\n      ...(isInsideButton && {\n        tag: 'span',\n      }),\n      ...rest,\n      children: isRSC ? (\n        inner\n      ) : (\n        <ButtonInsideButtonContext.Provider value={true}>\n          {inner}\n        </ButtonInsideButtonContext.Provider>\n      ),\n    },\n  }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {\n  const { props: buttonProps } = useButton(props)\n  return <ButtonFrame {...buttonProps} ref={ref} />\n})\n\nexport const buttonStaticConfig = {\n  inlineProps: new Set([\n    // text props go here (can't really optimize them, but we never fully extract button anyway)\n    // may be able to remove this entirely, as the compiler / runtime have gotten better\n    'color',\n    'fontWeight',\n    'fontSize',\n    'fontFamily',\n    'letterSpacing',\n    'textAlign',\n  ]),\n}\n\nexport const Button = ButtonFrame.extractable(themeable(ButtonComponent), buttonStaticConfig)\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,gBAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqLQ;AArLR,kBAWO;AACP,uBAA4B;AAC5B,6BAAiC;AACjC,oBAA+B;AAC/B,kBAAkE;AAClE,mBAAiE;AAGjE,aAAAC,QAAM;AAuBC,MAAM,kBAAc,oBAAO,8BAAgB;AAAA,EAChD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EAGf,QAAQ;AAAA,EAER,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAMM,MAAM,iBAAa,oBAAO,yBAAa;AAAA,EAC5C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,QAAQ;AAAA,EAER,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAEM,SAAS,UACd,OACA,EAAE,OAAO,WAAW,IAAmB,EAAE,MAAM,WAAW,GAC1D;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,EACL,IAAI;AAEJ,QAAM,iBAAiB,oBAAQ,YAAQ,yBAAW,qCAAyB;AAC3E,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM,YAAY,OAAO,SAAS,WAAW,OAAO,UAAM,8BAAY,IAAI,KAAK;AAC/E,QAAM,oBAAgB,yCAAiB,EAAE,MAAM,UAAU,MAAM,CAAC;AAChE,QAAM,CAAC,YAAY,eAAe,IAAI,CAAC,MAAM,SAAS,EAAE,IAAI,aAAa;AACzE,QAAM,gBAAY,8BAAiB,QAAQ,IAAI;AAC/C,QAAM,eAAW,gCAAmB,MAAM,KAAK;AAC/C,QAAM,QACJ,cAAc,sBACV,4BAAe;AAAA,IAEb,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WACE,MAAM,kBAAkB,YAAY,MAAM,kBAAkB,mBACxD,aACA;AAAA,IACN,UAAU,CAAC,YAAY,UAAU,eAAe;AAAA,EAClD,CAAC,IACD;AAEN,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACL,GAAI,MAAM,YAAY;AAAA,QAEpB,WAAW;AAAA,QAEX,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,MACF;AAAA,MAEA,GAAI,kBAAkB;AAAA,QACpB,KAAK;AAAA,MACP;AAAA,MACA,GAAG;AAAA,MACH,UAAU,oBACR,QAEA,4CAAC,sCAA0B,UAA1B;AAAA,QAAmC,OAAO;AAAA,QACxC;AAAA,OACH;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,MAAM,sBAAkB,yBAAwC,SAAS,OAAO,OAAO,KAAK;AAC1F,QAAM,EAAE,OAAO,YAAY,IAAI,UAAU,KAAK;AAC9C,SAAO,4CAAC;AAAA,IAAa,GAAG;AAAA,IAAa;AAAA,GAAU;AACjD,CAAC;AAEM,MAAM,qBAAqB;AAAA,EAChC,aAAa,oBAAI,IAAI;AAAA,IAGnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAEO,MAAMD,UAAS,YAAY,gBAAY,uBAAU,eAAe,GAAG,kBAAkB;",
   "names": ["Button", "React"]
 }

package/dist/esm/Button.js

@@ -67,7 +67,7 @@ const ButtonText = styled(SizableText, {
   flexShrink: 1,
   ellipse: true
 });
-const ButtonComponent = forwardRef(function Button(props, ref) {
+function useButton(props, { Text = ButtonText } = { Text: ButtonText }) {
   const {
     children,
     icon,
@@ -94,7 +94,7 @@ const ButtonComponent = forwardRef(function Button(props, ref) {
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
   const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
   const spaceSize = getVariableValue(iconSize) * scaleSpace;
-  const contents = wrapChildrenInText(ButtonText, props);
+  const contents = wrapChildrenInText(Text, props);
   const inner = themedIcon || themedIconAfter ? spacedChildren({
     space: spaceSize,
     spaceFlex,
@@ -102,25 +102,35 @@ const ButtonComponent = forwardRef(function Button(props, ref) {
     direction: props.flexDirection === "column" || props.flexDirection === "column-reverse" ? "vertical" : "horizontal",
     children: [themedIcon, contents, themedIconAfter]
   }) : contents;
+  return {
+    spaceSize,
+    isInsideButton,
+    props: {
+      ...props.disabled && {
+        focusable: void 0,
+        focusStyle: {
+          borderColor: "$background"
+        }
+      },
+      ...isInsideButton && {
+        tag: "span"
+      },
+      ...rest,
+      children: isRSC ? inner : /* @__PURE__ */ jsx(ButtonInsideButtonContext.Provider, {
+        value: true,
+        children: inner
+      })
+    }
+  };
+}
+const ButtonComponent = forwardRef(function Button(props, ref) {
+  const { props: buttonProps } = useButton(props);
   return /* @__PURE__ */ jsx(ButtonFrame, {
-    ...props.disabled && {
-      focusable: void 0,
-      focusStyle: {
-        borderColor: "$background"
-      }
-    },
-    ...isInsideButton && {
-      tag: "span"
-    },
-    ref,
-    ...rest,
-    children: isRSC ? inner : /* @__PURE__ */ jsx(ButtonInsideButtonContext.Provider, {
-      value: true,
-      children: inner
-    })
+    ...buttonProps,
+    ref
   });
 });
-const Button2 = ButtonFrame.extractable(themeable(ButtonComponent), {
+const buttonStaticConfig = {
   inlineProps: /* @__PURE__ */ new Set([
     "color",
     "fontWeight",
@@ -129,10 +139,13 @@ const Button2 = ButtonFrame.extractable(themeable(ButtonComponent), {
     "letterSpacing",
     "textAlign"
   ])
-});
+};
+const Button2 = ButtonFrame.extractable(themeable(ButtonComponent), buttonStaticConfig);
 export {
   Button2 as Button,
   ButtonFrame,
-  ButtonText
+  ButtonText,
+  buttonStaticConfig,
+  useButton
 };
 //# sourceMappingURL=Button.js.map

package/dist/esm/Button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Button.tsx"],
-  "sourcesContent": ["import {\n  ButtonInsideButtonContext,\n  GetProps,\n  TamaguiComponent,\n  ThemeableProps,\n  getButtonSize,\n  getVariableValue,\n  isRSC,\n  spacedChildren,\n  styled,\n  themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\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    // add icon before, passes color and size automatically if Component\n    icon?: IconProp\n    // add icon after, passes color and size automatically if Component\n    iconAfter?: IconProp\n    // adjust icon relative to size\n    // default: -1\n    scaleIcon?: number\n    // dont wrap inner contents in a text element\n    noTextWrap?: boolean\n    // make the spacing elements flex\n    spaceFlex?: number | boolean\n    // adjust internal space relative to icon size\n    scaleSpace?: number\n  }\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: 'Button',\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': getButtonSize,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        opacity: 0.375,\n        pointerEvents: 'none',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n  color: '$color',\n  selectable: false,\n  cursor: 'inherit',\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\nconst ButtonComponent = forwardRef(function Button(props: ButtonProps, ref) {\n  // careful not to desctructure and re-order props, order is important\n  const {\n    children,\n    icon,\n    iconAfter,\n    noTextWrap,\n    theme: themeName,\n    space,\n    spaceFlex,\n    scaleIcon = 1,\n    scaleSpace = 0.66,\n    separator,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    ...rest\n  } = props as ButtonProps\n\n  const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n  const size = props.size || '$4'\n  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(ButtonText, props)\n\n  const inner =\n    themedIcon || themedIconAfter\n      ? spacedChildren({\n          // a bit arbitrary but scaling to font size is necessary so long as button does\n          space: spaceSize,\n          spaceFlex,\n          separator,\n          direction:\n            props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n              ? 'vertical'\n              : 'horizontal',\n          children: [themedIcon, contents, themedIconAfter],\n        })\n      : contents\n\n  return (\n    <ButtonFrame\n      {...(props.disabled && {\n        // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n        focusable: undefined,\n        // even with tabIndex unset, it will keep focusStyle on web so disable it here\n        focusStyle: {\n          borderColor: '$background',\n        },\n      })}\n      // fixes SSR issue + DOM nesting issue of not allowing button in button\n      {...(isInsideButton && {\n        tag: 'span',\n      })}\n      ref={ref as any}\n      {...rest}\n    >\n      {isRSC ? (\n        inner\n      ) : (\n        <ButtonInsideButtonContext.Provider value={true}>\n          {inner}\n        </ButtonInsideButtonContext.Provider>\n      )}\n    </ButtonFrame>\n  )\n})\n\nexport const Button: TamaguiComponent<ButtonProps, HTMLButtonElement | View> =\n  ButtonFrame.extractable(themeable(ButtonComponent as any) as any, {\n    inlineProps: new Set([\n      // text props go here (can't really optimize them, but we never fully extract button anyway)\n      'color',\n      'fontWeight',\n      'fontSize',\n      'fontFamily',\n      'letterSpacing',\n      'textAlign',\n    ]),\n  })\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  ButtonInsideButtonContext,\n  GetProps,\n  TamaguiElement,\n  ThemeableProps,\n  getButtonSize,\n  getVariableValue,\n  isRSC,\n  spacedChildren,\n  styled,\n  themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\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    // add icon before, passes color and size automatically if Component\n    icon?: IconProp\n    // add icon after, passes color and size automatically if Component\n    iconAfter?: IconProp\n    // adjust icon relative to size\n    // default: -1\n    scaleIcon?: number\n    // dont wrap inner contents in a text element\n    noTextWrap?: boolean\n    // make the spacing elements flex\n    spaceFlex?: number | boolean\n    // adjust internal space relative to icon size\n    scaleSpace?: number\n  }\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: 'Button',\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': getButtonSize,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        opacity: 0.375,\n        pointerEvents: 'none',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n  color: '$color',\n  selectable: false,\n  cursor: 'inherit',\n  // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n  flexGrow: 0,\n  flexShrink: 1,\n  ellipse: true,\n})\n\nexport function useButton(\n  props: ButtonProps,\n  { Text = ButtonText }: { Text: any } = { Text: ButtonText }\n) {\n  // careful not to desctructure and re-order props, order is important\n  const {\n    children,\n    icon,\n    iconAfter,\n    noTextWrap,\n    theme: themeName,\n    space,\n    spaceFlex,\n    scaleIcon = 1,\n    scaleSpace = 0.66,\n    separator,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    ...rest\n  } = props\n\n  const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n  const size = props.size || '$4'\n  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, props)\n  const inner =\n    themedIcon || themedIconAfter\n      ? spacedChildren({\n          // a bit arbitrary but scaling to font size is necessary so long as button does\n          space: spaceSize,\n          spaceFlex,\n          separator,\n          direction:\n            props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n              ? 'vertical'\n              : 'horizontal',\n          children: [themedIcon, contents, themedIconAfter],\n        })\n      : contents\n\n  return {\n    spaceSize,\n    isInsideButton,\n    props: {\n      ...(props.disabled && {\n        // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n        focusable: undefined,\n        // even with tabIndex unset, it will keep focusStyle on web so disable it here\n        focusStyle: {\n          borderColor: '$background',\n        },\n      }),\n      // fixes SSR issue + DOM nesting issue of not allowing button in button\n      ...(isInsideButton && {\n        tag: 'span',\n      }),\n      ...rest,\n      children: isRSC ? (\n        inner\n      ) : (\n        <ButtonInsideButtonContext.Provider value={true}>\n          {inner}\n        </ButtonInsideButtonContext.Provider>\n      ),\n    },\n  }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {\n  const { props: buttonProps } = useButton(props)\n  return <ButtonFrame {...buttonProps} ref={ref} />\n})\n\nexport const buttonStaticConfig = {\n  inlineProps: new Set([\n    // text props go here (can't really optimize them, but we never fully extract button anyway)\n    // may be able to remove this entirely, as the compiler / runtime have gotten better\n    'color',\n    'fontWeight',\n    'fontSize',\n    'fontFamily',\n    'letterSpacing',\n    'textAlign',\n  ]),\n}\n\nexport const Button = ButtonFrame.extractable(themeable(ButtonComponent), buttonStaticConfig)\n"],
+  "mappings": "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",
   "names": ["Button"]
 }

package/dist/jsx/Button.js

@@ -66,7 +66,7 @@ const ButtonText = styled(SizableText, {
   flexShrink: 1,
   ellipse: true
 });
-const ButtonComponent = forwardRef(function Button(props, ref) {
+function useButton(props, { Text = ButtonText } = { Text: ButtonText }) {
   const {
     children,
     icon,
@@ -93,7 +93,7 @@ const ButtonComponent = forwardRef(function Button(props, ref) {
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
   const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
   const spaceSize = getVariableValue(iconSize) * scaleSpace;
-  const contents = wrapChildrenInText(ButtonText, props);
+  const contents = wrapChildrenInText(Text, props);
   const inner = themedIcon || themedIconAfter ? spacedChildren({
     space: spaceSize,
     spaceFlex,
@@ -101,16 +101,29 @@ const ButtonComponent = forwardRef(function Button(props, ref) {
     direction: props.flexDirection === "column" || props.flexDirection === "column-reverse" ? "vertical" : "horizontal",
     children: [themedIcon, contents, themedIconAfter]
   }) : contents;
-  return <ButtonFrame {...props.disabled && {
-    focusable: void 0,
-    focusStyle: {
-      borderColor: "$background"
+  return {
+    spaceSize,
+    isInsideButton,
+    props: {
+      ...props.disabled && {
+        focusable: void 0,
+        focusStyle: {
+          borderColor: "$background"
+        }
+      },
+      ...isInsideButton && {
+        tag: "span"
+      },
+      ...rest,
+      children: isRSC ? inner : <ButtonInsideButtonContext.Provider value={true}>{inner}</ButtonInsideButtonContext.Provider>
     }
-  }} {...isInsideButton && {
-    tag: "span"
-  }} ref={ref} {...rest}>{isRSC ? inner : <ButtonInsideButtonContext.Provider value={true}>{inner}</ButtonInsideButtonContext.Provider>}</ButtonFrame>;
+  };
+}
+const ButtonComponent = forwardRef(function Button(props, ref) {
+  const { props: buttonProps } = useButton(props);
+  return <ButtonFrame {...buttonProps} ref={ref} />;
 });
-const Button2 = ButtonFrame.extractable(themeable(ButtonComponent), {
+const buttonStaticConfig = {
   inlineProps: /* @__PURE__ */ new Set([
     "color",
     "fontWeight",
@@ -119,10 +132,13 @@ const Button2 = ButtonFrame.extractable(themeable(ButtonComponent), {
     "letterSpacing",
     "textAlign"
   ])
-});
+};
+const Button2 = ButtonFrame.extractable(themeable(ButtonComponent), buttonStaticConfig);
 export {
   Button2 as Button,
   ButtonFrame,
-  ButtonText
+  ButtonText,
+  buttonStaticConfig,
+  useButton
 };
 //# sourceMappingURL=Button.js.map

package/dist/jsx/Button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Button.tsx"],
-  "sourcesContent": ["import {\n  ButtonInsideButtonContext,\n  GetProps,\n  TamaguiComponent,\n  ThemeableProps,\n  getButtonSize,\n  getVariableValue,\n  isRSC,\n  spacedChildren,\n  styled,\n  themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\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    // add icon before, passes color and size automatically if Component\n    icon?: IconProp\n    // add icon after, passes color and size automatically if Component\n    iconAfter?: IconProp\n    // adjust icon relative to size\n    // default: -1\n    scaleIcon?: number\n    // dont wrap inner contents in a text element\n    noTextWrap?: boolean\n    // make the spacing elements flex\n    spaceFlex?: number | boolean\n    // adjust internal space relative to icon size\n    scaleSpace?: number\n  }\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: 'Button',\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': getButtonSize,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        opacity: 0.375,\n        pointerEvents: 'none',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n  color: '$color',\n  selectable: false,\n  cursor: 'inherit',\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\nconst ButtonComponent = forwardRef(function Button(props: ButtonProps, ref) {\n  // careful not to desctructure and re-order props, order is important\n  const {\n    children,\n    icon,\n    iconAfter,\n    noTextWrap,\n    theme: themeName,\n    space,\n    spaceFlex,\n    scaleIcon = 1,\n    scaleSpace = 0.66,\n    separator,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    ...rest\n  } = props as ButtonProps\n\n  const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n  const size = props.size || '$4'\n  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(ButtonText, props)\n\n  const inner =\n    themedIcon || themedIconAfter\n      ? spacedChildren({\n          // a bit arbitrary but scaling to font size is necessary so long as button does\n          space: spaceSize,\n          spaceFlex,\n          separator,\n          direction:\n            props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n              ? 'vertical'\n              : 'horizontal',\n          children: [themedIcon, contents, themedIconAfter],\n        })\n      : contents\n\n  return (\n    <ButtonFrame\n      {...(props.disabled && {\n        // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n        focusable: undefined,\n        // even with tabIndex unset, it will keep focusStyle on web so disable it here\n        focusStyle: {\n          borderColor: '$background',\n        },\n      })}\n      // fixes SSR issue + DOM nesting issue of not allowing button in button\n      {...(isInsideButton && {\n        tag: 'span',\n      })}\n      ref={ref as any}\n      {...rest}\n    >\n      {isRSC ? (\n        inner\n      ) : (\n        <ButtonInsideButtonContext.Provider value={true}>\n          {inner}\n        </ButtonInsideButtonContext.Provider>\n      )}\n    </ButtonFrame>\n  )\n})\n\nexport const Button: TamaguiComponent<ButtonProps, HTMLButtonElement | View> =\n  ButtonFrame.extractable(themeable(ButtonComponent as any) as any, {\n    inlineProps: new Set([\n      // text props go here (can't really optimize them, but we never fully extract button anyway)\n      'color',\n      'fontWeight',\n      'fontSize',\n      'fontFamily',\n      'letterSpacing',\n      'textAlign',\n    ]),\n  })\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  ButtonInsideButtonContext,\n  GetProps,\n  TamaguiElement,\n  ThemeableProps,\n  getButtonSize,\n  getVariableValue,\n  isRSC,\n  spacedChildren,\n  styled,\n  themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, useContext } from 'react'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\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    // add icon before, passes color and size automatically if Component\n    icon?: IconProp\n    // add icon after, passes color and size automatically if Component\n    iconAfter?: IconProp\n    // adjust icon relative to size\n    // default: -1\n    scaleIcon?: number\n    // dont wrap inner contents in a text element\n    noTextWrap?: boolean\n    // make the spacing elements flex\n    spaceFlex?: number | boolean\n    // adjust internal space relative to icon size\n    scaleSpace?: number\n  }\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: 'Button',\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': getButtonSize,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        opacity: 0.375,\n        pointerEvents: 'none',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n  color: '$color',\n  selectable: false,\n  cursor: 'inherit',\n  // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n  flexGrow: 0,\n  flexShrink: 1,\n  ellipse: true,\n})\n\nexport function useButton(\n  props: ButtonProps,\n  { Text = ButtonText }: { Text: any } = { Text: ButtonText }\n) {\n  // careful not to desctructure and re-order props, order is important\n  const {\n    children,\n    icon,\n    iconAfter,\n    noTextWrap,\n    theme: themeName,\n    space,\n    spaceFlex,\n    scaleIcon = 1,\n    scaleSpace = 0.66,\n    separator,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    ...rest\n  } = props\n\n  const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n  const size = props.size || '$4'\n  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(Text, props)\n  const inner =\n    themedIcon || themedIconAfter\n      ? spacedChildren({\n          // a bit arbitrary but scaling to font size is necessary so long as button does\n          space: spaceSize,\n          spaceFlex,\n          separator,\n          direction:\n            props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n              ? 'vertical'\n              : 'horizontal',\n          children: [themedIcon, contents, themedIconAfter],\n        })\n      : contents\n\n  return {\n    spaceSize,\n    isInsideButton,\n    props: {\n      ...(props.disabled && {\n        // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n        focusable: undefined,\n        // even with tabIndex unset, it will keep focusStyle on web so disable it here\n        focusStyle: {\n          borderColor: '$background',\n        },\n      }),\n      // fixes SSR issue + DOM nesting issue of not allowing button in button\n      ...(isInsideButton && {\n        tag: 'span',\n      }),\n      ...rest,\n      children: isRSC ? (\n        inner\n      ) : (\n        <ButtonInsideButtonContext.Provider value={true}>\n          {inner}\n        </ButtonInsideButtonContext.Provider>\n      ),\n    },\n  }\n}\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {\n  const { props: buttonProps } = useButton(props)\n  return <ButtonFrame {...buttonProps} ref={ref} />\n})\n\nexport const buttonStaticConfig = {\n  inlineProps: new Set([\n    // text props go here (can't really optimize them, but we never fully extract button anyway)\n    // may be able to remove this entirely, as the compiler / runtime have gotten better\n    'color',\n    'fontWeight',\n    'fontSize',\n    'fontFamily',\n    'letterSpacing',\n    'textAlign',\n  ]),\n}\n\nexport const Button = ButtonFrame.extractable(themeable(ButtonComponent), buttonStaticConfig)\n"],
+  "mappings": "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",
   "names": ["Button"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/button",
-  "version": "1.0.1-beta.159",
+  "version": "1.0.1-beta.162",
   "sideEffects": [
     "*.css"
   ],
@@ -28,16 +28,16 @@
     }
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.159",
-    "@tamagui/font-size": "^1.0.1-beta.159",
-    "@tamagui/helpers-tamagui": "^1.0.1-beta.159"
+    "@tamagui/core": "^1.0.1-beta.162",
+    "@tamagui/font-size": "^1.0.1-beta.162",
+    "@tamagui/helpers-tamagui": "^1.0.1-beta.162"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.159",
+    "@tamagui/build": "^1.0.1-beta.162",
     "react": "*",
     "react-dom": "*"
   },

package/src/Button.tsx

@@ -1,7 +1,7 @@
 import {
   ButtonInsideButtonContext,
   GetProps,
-  TamaguiComponent,
+  TamaguiElement,
   ThemeableProps,
   getButtonSize,
   getVariableValue,
@@ -15,7 +15,6 @@ import { useGetThemedIcon } from '@tamagui/helpers-tamagui'
 import { ThemeableStack } from '@tamagui/stacks'
 import { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'
 import React, { FunctionComponent, forwardRef, useContext } from 'react'
-import { View } from 'react-native'
 
 // bugfix esbuild strips react jsx: 'preserve'
 React['createElement']
@@ -110,7 +109,10 @@ export const ButtonText = styled(SizableText, {
   ellipse: true,
 })
 
-const ButtonComponent = forwardRef(function Button(props: ButtonProps, ref) {
+export function useButton(
+  props: ButtonProps,
+  { Text = ButtonText }: { Text: any } = { Text: ButtonText }
+) {
   // careful not to desctructure and re-order props, order is important
   const {
     children,
@@ -133,7 +135,7 @@ const ButtonComponent = forwardRef(function Button(props: ButtonProps, ref) {
     textAlign,
     textProps,
     ...rest
-  } = props as ButtonProps
+  } = props
 
   const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)
   const size = props.size || '$4'
@@ -141,8 +143,7 @@ const ButtonComponent = forwardRef(function Button(props: ButtonProps, ref) {
   const getThemedIcon = useGetThemedIcon({ size: iconSize, color })
   const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)
   const spaceSize = getVariableValue(iconSize) * scaleSpace
-  const contents = wrapChildrenInText(ButtonText, props)
-
+  const contents = wrapChildrenInText(Text, props)
   const inner =
     themedIcon || themedIconAfter
       ? spacedChildren({
@@ -158,43 +159,50 @@ const ButtonComponent = forwardRef(function Button(props: ButtonProps, ref) {
         })
       : contents
 
-  return (
-    <ButtonFrame
-      {...(props.disabled && {
+  return {
+    spaceSize,
+    isInsideButton,
+    props: {
+      ...(props.disabled && {
         // in rnw - false still has keyboard tabIndex, undefined = not actually focusable
         focusable: undefined,
         // even with tabIndex unset, it will keep focusStyle on web so disable it here
         focusStyle: {
           borderColor: '$background',
         },
-      })}
+      }),
       // fixes SSR issue + DOM nesting issue of not allowing button in button
-      {...(isInsideButton && {
+      ...(isInsideButton && {
         tag: 'span',
-      })}
-      ref={ref as any}
-      {...rest}
-    >
-      {isRSC ? (
+      }),
+      ...rest,
+      children: isRSC ? (
         inner
       ) : (
         <ButtonInsideButtonContext.Provider value={true}>
           {inner}
         </ButtonInsideButtonContext.Provider>
-      )}
-    </ButtonFrame>
-  )
+      ),
+    },
+  }
+}
+
+const ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(props, ref) {
+  const { props: buttonProps } = useButton(props)
+  return <ButtonFrame {...buttonProps} ref={ref} />
 })
 
-export const Button: TamaguiComponent<ButtonProps, HTMLButtonElement | View> =
-  ButtonFrame.extractable(themeable(ButtonComponent as any) as any, {
-    inlineProps: new Set([
-      // text props go here (can't really optimize them, but we never fully extract button anyway)
-      'color',
-      'fontWeight',
-      'fontSize',
-      'fontFamily',
-      'letterSpacing',
-      'textAlign',
-    ]),
-  })
+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), buttonStaticConfig)

package/types/Button.d.ts

@@ -1,7 +1,6 @@
-import { GetProps, TamaguiComponent, ThemeableProps } from '@tamagui/core';
+import { GetProps, TamaguiElement, ThemeableProps } from '@tamagui/core';
 import { TextParentStyles } from '@tamagui/text';
-import { FunctionComponent } from 'react';
-import { View } from 'react-native';
+import React, { FunctionComponent } from 'react';
 declare type ButtonIconProps = {
     color?: string;
     size?: number;
@@ -15,22 +14,22 @@ export declare type ButtonProps = Omit<TextParentStyles, 'TextComponent'> & GetP
     spaceFlex?: number | boolean;
     scaleSpace?: number;
 };
-export declare const ButtonFrame: 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<{
+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;
     readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
 } & {
-    fontFamily?: unknown;
-    backgrounded?: boolean | undefined;
-    radiused?: boolean | undefined;
-    hoverTheme?: boolean | undefined;
-    pressTheme?: boolean | undefined;
-    focusTheme?: boolean | undefined;
-    circular?: boolean | undefined;
-    padded?: boolean | undefined;
-    elevate?: boolean | undefined;
-    bordered?: number | boolean | undefined;
-    transparent?: boolean | undefined;
-    chromeless?: boolean | "all" | undefined;
+    readonly fontFamily?: unknown;
+    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;
@@ -39,18 +38,18 @@ export declare const ButtonFrame: TamaguiComponent<Omit<import("react-native").V
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
 } & {
-    fontFamily?: unknown;
-    backgrounded?: boolean | undefined;
-    radiused?: boolean | undefined;
-    hoverTheme?: boolean | undefined;
-    pressTheme?: boolean | undefined;
-    focusTheme?: boolean | undefined;
-    circular?: boolean | undefined;
-    padded?: boolean | undefined;
-    elevate?: boolean | undefined;
-    bordered?: number | boolean | undefined;
-    transparent?: boolean | undefined;
-    chromeless?: boolean | "all" | undefined;
+    readonly fontFamily?: unknown;
+    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;
@@ -59,68 +58,469 @@ export declare const ButtonFrame: TamaguiComponent<Omit<import("react-native").V
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
 } & {
-    fontFamily?: unknown;
-    backgrounded?: boolean | undefined;
-    radiused?: boolean | undefined;
-    hoverTheme?: boolean | undefined;
-    pressTheme?: boolean | undefined;
-    focusTheme?: boolean | undefined;
-    circular?: boolean | undefined;
-    padded?: boolean | undefined;
-    elevate?: boolean | undefined;
-    bordered?: number | boolean | undefined;
-    transparent?: boolean | undefined;
-    chromeless?: boolean | "all" | undefined;
+    readonly fontFamily?: unknown;
+    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").TamaguiElement, import("@tamagui/core").StackPropsBase, {
+}>>, TamaguiElement, import("@tamagui/core").StackPropsBase, {
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
 } & {
-    fontFamily?: unknown;
-    backgrounded?: boolean | undefined;
-    radiused?: boolean | undefined;
-    hoverTheme?: boolean | undefined;
-    pressTheme?: boolean | undefined;
-    focusTheme?: boolean | undefined;
-    circular?: boolean | undefined;
-    padded?: boolean | undefined;
-    elevate?: boolean | undefined;
-    bordered?: number | boolean | undefined;
-    transparent?: boolean | undefined;
-    chromeless?: boolean | "all" | undefined;
+    readonly fontFamily?: unknown;
+    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;
 } & {
     readonly size?: import("@tamagui/core").SizeTokens | undefined;
     readonly active?: boolean | undefined;
     readonly disabled?: boolean | undefined;
 }>;
-export declare const ButtonText: 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"> & {
-    size?: import("@tamagui/core").FontSizeTokens | 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"> & {
-    size?: import("@tamagui/core").FontSizeTokens | undefined;
+    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"> & {
-    size?: import("@tamagui/core").FontSizeTokens | undefined;
+    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<{
-    size?: import("@tamagui/core").FontSizeTokens | undefined;
+    readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
 }, string | number> & {
     [x: string]: 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?: import("@tamagui/core").FontSizeTokens | undefined;
+    readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
 }, string | number> & {
     [x: string]: 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?: import("@tamagui/core").FontSizeTokens | undefined;
+    readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
 }, string | number> & {
     [x: string]: undefined;
-}>>), import("@tamagui/core").TamaguiElement, import("@tamagui/core").TextPropsBase, {
-    size?: import("@tamagui/core").FontSizeTokens | undefined;
+}>>), TamaguiElement, import("@tamagui/core").TextPropsBase, {
+    readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
 } | ({
-    size?: import("@tamagui/core").FontSizeTokens | undefined;
+    readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
 } & {
     [x: string]: undefined;
 })>;
-export declare const Button: TamaguiComponent<ButtonProps, HTMLButtonElement | View>;
+export declare function useButton(props: ButtonProps, { Text }?: {
+    Text: any;
+}): {
+    spaceSize: number;
+    isInsideButton: boolean;
+    props: {
+        children: string | number | boolean | any[] | JSX.Element | React.ReactFragment | null | undefined;
+        hitSlop?: import("react-native").Insets | (import("react-native").Insets & number) | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined;
+        removeClippedSubviews?: boolean | undefined;
+        style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+        testID?: string | undefined;
+        nativeID?: string | undefined;
+        collapsable?: boolean | undefined;
+        needsOffscreenAlphaCompositing?: boolean | undefined;
+        renderToHardwareTextureAndroid?: boolean | undefined;
+        focusable?: boolean | undefined;
+        shouldRasterizeIOS?: boolean | undefined;
+        isTVSelectable?: boolean | undefined;
+        hasTVPreferredFocus?: boolean | undefined;
+        tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
+        tvParallaxShiftDistanceX?: number | undefined;
+        tvParallaxShiftDistanceY?: number | undefined;
+        tvParallaxTiltAngle?: number | undefined;
+        tvParallaxMagnification?: number | undefined;
+        onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        accessible?: boolean | undefined;
+        accessibilityActions?: readonly Readonly<{
+            name: string;
+            label?: string | undefined;
+        }>[] | undefined;
+        accessibilityLabel?: string | undefined;
+        accessibilityRole?: "none" | "button" | "link" | "search" | "image" | "keyboardkey" | "text" | "adjustable" | "imagebutton" | "header" | "summary" | "list" | undefined;
+        accessibilityState?: import("react-native").AccessibilityState | undefined;
+        accessibilityHint?: string | undefined;
+        accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+        onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+        accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+        importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+        accessibilityElementsHidden?: boolean | undefined;
+        accessibilityViewIsModal?: boolean | undefined;
+        onAccessibilityEscape?: (() => void) | undefined;
+        onAccessibilityTap?: (() => void) | undefined;
+        onMagicTap?: (() => void) | undefined;
+        accessibilityIgnoresInvertColors?: boolean | undefined;
+        dataSet?: any;
+        target?: any;
+        rel?: any;
+        download?: any;
+        href?: string | undefined;
+        hrefAttrs?: {
+            target?: "top" | "_blank" | "_self" | "_top" | "blank" | "self" | undefined;
+            rel?: string | undefined;
+            download?: boolean | undefined;
+        } | undefined;
+        onMouseDown?: (((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) & ((e: MouseEvent) => any)) | undefined;
+        onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        onMouseEnter?: (((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) & ((e: MouseEvent) => any)) | undefined;
+        onMouseLeave?: (((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) & ((e: MouseEvent) => any)) | undefined;
+        onFocus?: ((event: React.FocusEvent<HTMLDivElement, Element>) => void) | undefined;
+        onScroll?: ((event: React.UIEvent<HTMLDivElement, UIEvent>) => void) | undefined;
+        onScrollShouldSetResponder?: unknown;
+        onScrollShouldSetResponderCapture?: unknown;
+        onSelectionChangeShouldSetResponder?: unknown;
+        onSelectionChangeShouldSetResponderCapture?: unknown;
+        asChild?: boolean | undefined;
+        spaceDirection?: import("@tamagui/core").SpaceDirection | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string;
+        } | undefined;
+        animation?: import("@tamagui/core").AnimationProp | undefined;
+        animateOnly?: string[] | undefined;
+        debug?: import("@tamagui/core").DebugProp | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        themeShallow?: boolean | undefined;
+        id?: string | undefined;
+        tag?: string | undefined;
+        componentName?: string | undefined;
+        forceStyle?: "hover" | "press" | "focus" | undefined;
+        onHoverIn?: ((e: MouseEvent) => any) | undefined;
+        onHoverOut?: ((e: MouseEvent) => any) | undefined;
+        onPress?: ((e: import("react-native").GestureResponderEvent) => any) | undefined;
+        onPressIn?: ((e: import("react-native").GestureResponderEvent) => any) | undefined;
+        onPressOut?: ((e: import("react-native").GestureResponderEvent) => any) | undefined;
+        userSelect?: import("csstype").Property.UserSelect | undefined;
+        cursor?: string | 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").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        borderBottomLeftRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        borderBottomRightRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        borderBottomStartRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        borderBottomWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        borderColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | 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;
+        borderLeftWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        borderRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        borderRightColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
+        borderRightWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | 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").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        borderTopLeftRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        borderTopRightRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        borderTopStartRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        borderTopWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        borderWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        opacity?: number | undefined;
+        alignContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch" | undefined;
+        alignItems?: import("react-native").FlexAlignType | undefined;
+        alignSelf?: "auto" | import("react-native").FlexAlignType | undefined;
+        aspectRatio?: number | undefined;
+        borderEndWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        borderStartWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        bottom?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        end?: string | number | undefined;
+        flex?: number | undefined;
+        flexBasis?: string | number | undefined;
+        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
+        flexGrow?: number | undefined;
+        flexShrink?: number | undefined;
+        flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
+        height?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+        left?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        margin?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        marginBottom?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        marginEnd?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        marginHorizontal?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        marginLeft?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        marginRight?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        marginStart?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        marginTop?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        marginVertical?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | 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;
+        overflow?: "visible" | "hidden" | "scroll" | undefined;
+        padding?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        paddingBottom?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        paddingEnd?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        paddingHorizontal?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        paddingLeft?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        paddingRight?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        paddingStart?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        paddingTop?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        paddingVertical?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        position?: "absolute" | "relative" | undefined;
+        right?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        start?: string | number | undefined;
+        top?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        width?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | 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;
+        shadowOffset?: import("@tamagui/core").ThemeValueFallback | {
+            width: import("@tamagui/core").SpaceTokens;
+            height: import("@tamagui/core").SpaceTokens;
+        } | {
+            width: number;
+            height: number;
+        } | undefined;
+        shadowOpacity?: number | undefined;
+        shadowRadius?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | 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;
+        scaleX?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        scaleY?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        translateX?: number | undefined;
+        translateY?: number | undefined;
+        x?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        y?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        perspective?: number | undefined;
+        scale?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
+        skewX?: string | undefined;
+        skewY?: string | undefined;
+        matrix?: number[] | undefined;
+        rotate?: string | undefined;
+        rotateY?: string | undefined;
+        rotateX?: string | undefined;
+        rotateZ?: string | undefined;
+        contain?: string | undefined;
+        display?: "flex" | "none" | "inherit" | "inline" | "block" | "contents" | "inline-flex" | undefined;
+        elevation?: import("@tamagui/core").SizeTokens | undefined;
+        hoverTheme?: boolean | undefined;
+        pressTheme?: boolean | undefined;
+        focusTheme?: boolean | undefined;
+        circular?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: number | boolean | undefined;
+        transparent?: boolean | undefined;
+        backgrounded?: boolean | undefined;
+        radiused?: boolean | undefined;
+        padded?: boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+        fullscreen?: 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<{
+            readonly fullscreen?: boolean | undefined;
+            readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
+        } & {
+            readonly fontFamily?: unknown;
+            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;
+        }> | null | undefined;
+        pressStyle?: 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 fontFamily?: unknown;
+            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;
+        }> | null | undefined;
+        focusStyle?: 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 fontFamily?: unknown;
+            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;
+        }> | null | undefined;
+        exitStyle?: 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 fontFamily?: unknown;
+            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;
+        }> | null | undefined;
+        enterStyle?: 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 fontFamily?: unknown;
+            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;
+        }> | null | undefined;
+        themeInverse?: 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 fontFamily?: unknown;
+    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 fontFamily?: unknown;
+    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 fontFamily?: unknown;
+    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 & {
+    icon?: IconProp | undefined;
+    iconAfter?: IconProp | undefined;
+    scaleIcon?: number | undefined;
+    noTextWrap?: boolean | undefined;
+    spaceFlex?: number | boolean | undefined;
+    scaleSpace?: number | undefined;
+} & React.RefAttributes<TamaguiElement>, "theme" | "themeInverse"> & {
+    theme?: import("@tamagui/core").ThemeName | null | undefined;
+    themeInverse?: boolean | undefined;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export {};
 //# sourceMappingURL=Button.d.ts.map