@tamagui/button 1.0.1-beta.100

package/dist/cjs/Button.js

@@ -0,0 +1,194 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Button_exports = {};
+__export(Button_exports, {
+  Button: () => Button,
+  ButtonFrame: () => ButtonFrame,
+  ButtonText: () => ButtonText
+});
+module.exports = __toCommonJS(Button_exports);
+var import_core = require("@tamagui/core");
+var import_font_size = require("@tamagui/font-size");
+var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
+var import_stacks = require("@tamagui/stacks");
+var import_text = require("@tamagui/text");
+var import_react = __toESM(require("react"));
+import_react.default["createElement"];
+const ButtonFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
+  name: "Button",
+  tag: "button",
+  focusable: true,
+  hoverTheme: true,
+  pressTheme: true,
+  backgrounded: true,
+  borderWidth: 1,
+  borderColor: "transparent",
+  justifyContent: "center",
+  alignItems: "center",
+  flexWrap: "nowrap",
+  flexDirection: "row",
+  cursor: "pointer",
+  pressStyle: {
+    borderColor: "transparent"
+  },
+  hoverStyle: {
+    borderColor: "transparent"
+  },
+  focusStyle: {
+    borderColor: "$borderColorFocus"
+  },
+  variants: {
+    size: {
+      "...size": import_core.getButtonSize
+    },
+    active: {
+      true: {
+        hoverStyle: {
+          backgroundColor: "$background"
+        }
+      }
+    },
+    disabled: {
+      true: {
+        opacity: 0.5,
+        pointerEvents: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const ButtonText = (0, import_core.styled)(import_text.SizableText, {
+  color: "$color",
+  selectable: false,
+  cursor: "inherit",
+  flexGrow: 0,
+  flexShrink: 1,
+  ellipse: true
+});
+const ButtonComponent = (0, import_react.forwardRef)((props, ref) => {
+  const _a = props, {
+    children,
+    icon,
+    iconAfter,
+    noTextWrap,
+    theme: themeName,
+    space,
+    spaceFlex,
+    scaleIcon = 1,
+    scaleSpace = 0.66,
+    separator,
+    color,
+    fontWeight,
+    letterSpacing,
+    fontSize,
+    fontFamily,
+    textAlign,
+    textProps
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "icon",
+    "iconAfter",
+    "noTextWrap",
+    "theme",
+    "space",
+    "spaceFlex",
+    "scaleIcon",
+    "scaleSpace",
+    "separator",
+    "color",
+    "fontWeight",
+    "letterSpacing",
+    "fontSize",
+    "fontFamily",
+    "textAlign",
+    "textProps"
+  ]);
+  const isInsideButton = (0, import_react.useContext)(import_core.ButtonInsideButtonContext);
+  const size = props.size || "$4";
+  const iconSize = (typeof size === "number" ? size * 0.5 : (0, import_font_size.getFontSize)(size)) * scaleIcon;
+  const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color });
+  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
+  const spaceSize = (0, import_core.getVariableValue)(iconSize) * scaleSpace;
+  const contents = (0, import_text.wrapChildrenInText)(ButtonText, props);
+  return /* @__PURE__ */ import_react.default.createElement(ButtonFrame, __spreadValues(__spreadProps(__spreadValues({
+    fontFamily
+  }, isInsideButton && {
+    tag: "span"
+  }), {
+    ref
+  }), rest), /* @__PURE__ */ import_react.default.createElement(import_core.ButtonInsideButtonContext.Provider, {
+    value: true
+  }, themedIcon || themedIconAfter ? (0, import_core.spacedChildren)({
+    space: spaceSize,
+    spaceFlex,
+    separator,
+    direction: props.flexDirection === "column" || props.flexDirection === "column-reverse" ? "vertical" : "horizontal",
+    children: [themedIcon, contents, themedIconAfter]
+  }) : contents));
+});
+const Button = ButtonFrame.extractable((0, import_core.themeable)(ButtonComponent), {
+  inlineProps: /* @__PURE__ */ new Set([
+    "color",
+    "fontWeight",
+    "fontSize",
+    "fontFamily",
+    "letterSpacing",
+    "textAlign"
+  ])
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  ButtonFrame,
+  ButtonText
+});
+//# sourceMappingURL=Button.js.map

package/dist/cjs/Button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Button.tsx"],
+  "sourcesContent": ["import {\n  ButtonInsideButtonContext,\n  GetProps,\n  TamaguiComponent,\n  ThemeableProps,\n  getButtonSize,\n  getVariableValue,\n  spacedChildren,\n  styled,\n  themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, 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.5,\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((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 = 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  return (\n    <ButtonFrame\n      fontFamily={fontFamily}\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      <ButtonInsideButtonContext.Provider value={true}>\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      </ButtonInsideButtonContext.Provider>\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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",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./Button"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Button'\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;",
+  "names": []
+}

package/dist/esm/Button.js

@@ -0,0 +1,175 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import {
+  ButtonInsideButtonContext,
+  getButtonSize,
+  getVariableValue,
+  spacedChildren,
+  styled,
+  themeable
+} from "@tamagui/core";
+import { getFontSize } from "@tamagui/font-size";
+import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
+import { ThemeableStack } from "@tamagui/stacks";
+import { SizableText, wrapChildrenInText } from "@tamagui/text";
+import React, { forwardRef, useContext } from "react";
+React["createElement"];
+const ButtonFrame = styled(ThemeableStack, {
+  name: "Button",
+  tag: "button",
+  focusable: true,
+  hoverTheme: true,
+  pressTheme: true,
+  backgrounded: true,
+  borderWidth: 1,
+  borderColor: "transparent",
+  justifyContent: "center",
+  alignItems: "center",
+  flexWrap: "nowrap",
+  flexDirection: "row",
+  cursor: "pointer",
+  pressStyle: {
+    borderColor: "transparent"
+  },
+  hoverStyle: {
+    borderColor: "transparent"
+  },
+  focusStyle: {
+    borderColor: "$borderColorFocus"
+  },
+  variants: {
+    size: {
+      "...size": getButtonSize
+    },
+    active: {
+      true: {
+        hoverStyle: {
+          backgroundColor: "$background"
+        }
+      }
+    },
+    disabled: {
+      true: {
+        opacity: 0.5,
+        pointerEvents: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const ButtonText = styled(SizableText, {
+  color: "$color",
+  selectable: false,
+  cursor: "inherit",
+  flexGrow: 0,
+  flexShrink: 1,
+  ellipse: true
+});
+const ButtonComponent = forwardRef((props, ref) => {
+  const _a = props, {
+    children,
+    icon,
+    iconAfter,
+    noTextWrap,
+    theme: themeName,
+    space,
+    spaceFlex,
+    scaleIcon = 1,
+    scaleSpace = 0.66,
+    separator,
+    color,
+    fontWeight,
+    letterSpacing,
+    fontSize,
+    fontFamily,
+    textAlign,
+    textProps
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "icon",
+    "iconAfter",
+    "noTextWrap",
+    "theme",
+    "space",
+    "spaceFlex",
+    "scaleIcon",
+    "scaleSpace",
+    "separator",
+    "color",
+    "fontWeight",
+    "letterSpacing",
+    "fontSize",
+    "fontFamily",
+    "textAlign",
+    "textProps"
+  ]);
+  const isInsideButton = useContext(ButtonInsideButtonContext);
+  const size = props.size || "$4";
+  const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
+  const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
+  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
+  const spaceSize = getVariableValue(iconSize) * scaleSpace;
+  const contents = wrapChildrenInText(ButtonText, props);
+  return /* @__PURE__ */ React.createElement(ButtonFrame, __spreadValues(__spreadProps(__spreadValues({
+    fontFamily
+  }, isInsideButton && {
+    tag: "span"
+  }), {
+    ref
+  }), rest), /* @__PURE__ */ React.createElement(ButtonInsideButtonContext.Provider, {
+    value: true
+  }, themedIcon || themedIconAfter ? spacedChildren({
+    space: spaceSize,
+    spaceFlex,
+    separator,
+    direction: props.flexDirection === "column" || props.flexDirection === "column-reverse" ? "vertical" : "horizontal",
+    children: [themedIcon, contents, themedIconAfter]
+  }) : contents));
+});
+const Button = ButtonFrame.extractable(themeable(ButtonComponent), {
+  inlineProps: /* @__PURE__ */ new Set([
+    "color",
+    "fontWeight",
+    "fontSize",
+    "fontFamily",
+    "letterSpacing",
+    "textAlign"
+  ])
+});
+export {
+  Button,
+  ButtonFrame,
+  ButtonText
+};
+//# sourceMappingURL=Button.js.map

package/dist/esm/Button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Button.tsx"],
+  "sourcesContent": ["import {\n  ButtonInsideButtonContext,\n  GetProps,\n  TamaguiComponent,\n  ThemeableProps,\n  getButtonSize,\n  getVariableValue,\n  spacedChildren,\n  styled,\n  themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, 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.5,\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((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 = 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  return (\n    <ButtonFrame\n      fontFamily={fontFamily}\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      <ButtonInsideButtonContext.Provider value={true}>\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      </ButtonInsideButtonContext.Provider>\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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",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from "./Button";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Button'\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/jsx/Button.js

@@ -0,0 +1,121 @@
+import {
+  ButtonInsideButtonContext,
+  getButtonSize,
+  getVariableValue,
+  spacedChildren,
+  styled,
+  themeable
+} from "@tamagui/core";
+import { getFontSize } from "@tamagui/font-size";
+import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
+import { ThemeableStack } from "@tamagui/stacks";
+import { SizableText, wrapChildrenInText } from "@tamagui/text";
+import React, { forwardRef, useContext } from "react";
+React["createElement"];
+const ButtonFrame = styled(ThemeableStack, {
+  name: "Button",
+  tag: "button",
+  focusable: true,
+  hoverTheme: true,
+  pressTheme: true,
+  backgrounded: true,
+  borderWidth: 1,
+  borderColor: "transparent",
+  justifyContent: "center",
+  alignItems: "center",
+  flexWrap: "nowrap",
+  flexDirection: "row",
+  cursor: "pointer",
+  pressStyle: {
+    borderColor: "transparent"
+  },
+  hoverStyle: {
+    borderColor: "transparent"
+  },
+  focusStyle: {
+    borderColor: "$borderColorFocus"
+  },
+  variants: {
+    size: {
+      "...size": getButtonSize
+    },
+    active: {
+      true: {
+        hoverStyle: {
+          backgroundColor: "$background"
+        }
+      }
+    },
+    disabled: {
+      true: {
+        opacity: 0.5,
+        pointerEvents: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const ButtonText = styled(SizableText, {
+  color: "$color",
+  selectable: false,
+  cursor: "inherit",
+  flexGrow: 0,
+  flexShrink: 1,
+  ellipse: true
+});
+const ButtonComponent = forwardRef((props, ref) => {
+  const {
+    children,
+    icon,
+    iconAfter,
+    noTextWrap,
+    theme: themeName,
+    space,
+    spaceFlex,
+    scaleIcon = 1,
+    scaleSpace = 0.66,
+    separator,
+    color,
+    fontWeight,
+    letterSpacing,
+    fontSize,
+    fontFamily,
+    textAlign,
+    textProps,
+    ...rest
+  } = props;
+  const isInsideButton = useContext(ButtonInsideButtonContext);
+  const size = props.size || "$4";
+  const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
+  const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
+  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
+  const spaceSize = getVariableValue(iconSize) * scaleSpace;
+  const contents = wrapChildrenInText(ButtonText, props);
+  return <ButtonFrame fontFamily={fontFamily} {...isInsideButton && {
+    tag: "span"
+  }} ref={ref} {...rest}><ButtonInsideButtonContext.Provider value={true}>{themedIcon || themedIconAfter ? spacedChildren({
+    space: spaceSize,
+    spaceFlex,
+    separator,
+    direction: props.flexDirection === "column" || props.flexDirection === "column-reverse" ? "vertical" : "horizontal",
+    children: [themedIcon, contents, themedIconAfter]
+  }) : contents}</ButtonInsideButtonContext.Provider></ButtonFrame>;
+});
+const Button = ButtonFrame.extractable(themeable(ButtonComponent), {
+  inlineProps: /* @__PURE__ */ new Set([
+    "color",
+    "fontWeight",
+    "fontSize",
+    "fontFamily",
+    "letterSpacing",
+    "textAlign"
+  ])
+});
+export {
+  Button,
+  ButtonFrame,
+  ButtonText
+};
+//# sourceMappingURL=Button.js.map

package/dist/jsx/Button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Button.tsx"],
+  "sourcesContent": ["import {\n  ButtonInsideButtonContext,\n  GetProps,\n  TamaguiComponent,\n  ThemeableProps,\n  getButtonSize,\n  getVariableValue,\n  spacedChildren,\n  styled,\n  themeable,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, 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.5,\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((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 = 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  return (\n    <ButtonFrame\n      fontFamily={fontFamily}\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      <ButtonInsideButtonContext.Provider value={true}>\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      </ButtonInsideButtonContext.Provider>\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": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AACA;AACA;AACA;AACA;AAIA,MAAM;AAuBC,MAAM,cAAc,OAAO,gBAAgB;AAAA,EAChD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EAGf,QAAQ;AAAA,EAER,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAMM,MAAM,aAAa,OAAO,aAAa;AAAA,EAC5C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,QAAQ;AAAA,EAER,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,CAAC;AAED,MAAM,kBAAkB,WAAW,CAAC,OAAoB,QAAQ;AAE9D,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,MACD;AAEJ,QAAM,iBAAiB,WAAW,yBAAyB;AAC3D,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM,WAAY,QAAO,SAAS,WAAW,OAAO,MAAM,YAAY,IAAI,KAAK;AAC/E,QAAM,gBAAgB,iBAAiB,EAAE,MAAM,UAAU,MAAM,CAAC;AAChE,QAAM,CAAC,YAAY,mBAAmB,CAAC,MAAM,SAAS,EAAE,IAAI,aAAa;AACzE,QAAM,YAAY,iBAAiB,QAAQ,IAAI;AAC/C,QAAM,WAAW,mBAAmB,YAAY,KAAK;AAErD,SACE,CAAC,YACC,YAAY,gBAEP,kBAAkB;AAAA,IACrB,KAAK;AAAA,EACP,GACA,KAAK,SACD,MAEJ,CAAC,0BAA0B,SAAS,OAAO,OACxC,cAAc,kBACX,eAAe;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,SACN,EAdC,0BAA0B,SAe7B,EAxBC;AA0BL,CAAC;AAEM,MAAM,SACX,YAAY,YAAY,UAAU,eAAsB,GAAU;AAAA,EAChE,aAAa,oBAAI,IAAI;AAAA,IAEnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH,CAAC;",
+  "names": []
+}

package/dist/jsx/index.js

@@ -0,0 +1,2 @@
+export * from "./Button";
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Button'\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@tamagui/button",
+  "version": "1.0.1-beta.100",
+  "sideEffects": [
+    "*.css"
+  ],
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch"
+  },
+  "dependencies": {
+    "@tamagui/core": "^1.0.1-beta.100",
+    "@tamagui/font-size": "^1.0.1-beta.100",
+    "@tamagui/helpers-tamagui": "^1.0.1-beta.100"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.1-beta.100",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14"
+}

package/src/Button.tsx

@@ -0,0 +1,185 @@
+import {
+  ButtonInsideButtonContext,
+  GetProps,
+  TamaguiComponent,
+  ThemeableProps,
+  getButtonSize,
+  getVariableValue,
+  spacedChildren,
+  styled,
+  themeable,
+} from '@tamagui/core'
+import { getFontSize } from '@tamagui/font-size'
+import { TextParentStyles, useGetThemedIcon } from '@tamagui/helpers-tamagui'
+import { ThemeableStack } from '@tamagui/stacks'
+import { SizableText, wrapChildrenInText } from '@tamagui/text'
+import React, { FunctionComponent, forwardRef, useContext } from 'react'
+import { View } from 'react-native'
+
+// bugfix esbuild strips react jsx: 'preserve'
+React['createElement']
+
+type ButtonIconProps = { color?: string; size?: number }
+type IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null
+
+export type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &
+  GetProps<typeof ButtonFrame> &
+  ThemeableProps & {
+    // add icon before, passes color and size automatically if Component
+    icon?: IconProp
+    // add icon after, passes color and size automatically if Component
+    iconAfter?: IconProp
+    // adjust icon relative to size
+    // default: -1
+    scaleIcon?: number
+    // dont wrap inner contents in a text element
+    noTextWrap?: boolean
+    // make the spacing elements flex
+    spaceFlex?: number | boolean
+    // adjust internal space relative to icon size
+    scaleSpace?: number
+  }
+
+export const ButtonFrame = styled(ThemeableStack, {
+  name: 'Button',
+  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: {
+    size: {
+      '...size': getButtonSize,
+    },
+
+    active: {
+      true: {
+        hoverStyle: {
+          backgroundColor: '$background',
+        },
+      },
+    },
+
+    disabled: {
+      true: {
+        opacity: 0.5,
+        pointerEvents: 'none',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    size: '$4',
+  },
+})
+
+// see TODO breaking types
+// type x = GetProps<typeof ButtonFrame>
+// type y = x['size']
+
+export const ButtonText = styled(SizableText, {
+  color: '$color',
+  selectable: false,
+  cursor: 'inherit',
+  // flexGrow 1 leads to inconsistent native style where text pushes to start of view
+  flexGrow: 0,
+  flexShrink: 1,
+  ellipse: true,
+})
+
+const ButtonComponent = forwardRef((props: ButtonProps, ref) => {
+  // careful not to desctructure and re-order props, order is important
+  const {
+    children,
+    icon,
+    iconAfter,
+    noTextWrap,
+    theme: themeName,
+    space,
+    spaceFlex,
+    scaleIcon = 1,
+    scaleSpace = 0.66,
+    separator,
+
+    // text props
+    color,
+    fontWeight,
+    letterSpacing,
+    fontSize,
+    fontFamily,
+    textAlign,
+    textProps,
+    ...rest
+  } = props as ButtonProps
+
+  const isInsideButton = useContext(ButtonInsideButtonContext)
+  const size = props.size || '$4'
+  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon
+  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })
+  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)
+  const spaceSize = getVariableValue(iconSize) * scaleSpace
+  const contents = wrapChildrenInText(ButtonText, props)
+
+  return (
+    <ButtonFrame
+      fontFamily={fontFamily}
+      // fixes SSR issue + DOM nesting issue of not allowing button in button
+      {...(isInsideButton && {
+        tag: 'span',
+      })}
+      ref={ref as any}
+      {...rest}
+    >
+      <ButtonInsideButtonContext.Provider value={true}>
+        {themedIcon || themedIconAfter
+          ? spacedChildren({
+              // a bit arbitrary but scaling to font size is necessary so long as button does
+              space: spaceSize,
+              spaceFlex,
+              separator,
+              direction:
+                props.flexDirection === 'column' || props.flexDirection === 'column-reverse'
+                  ? 'vertical'
+                  : 'horizontal',
+              children: [themedIcon, contents, themedIconAfter],
+            })
+          : contents}
+      </ButtonInsideButtonContext.Provider>
+    </ButtonFrame>
+  )
+})
+
+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',
+    ]),
+  })

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Button'

package/types/Button.d.ts

@@ -0,0 +1,124 @@
+import { GetProps, TamaguiComponent, ThemeableProps } from '@tamagui/core';
+import { TextParentStyles } from '@tamagui/helpers-tamagui';
+import { FunctionComponent } from 'react';
+import { View } from 'react-native';
+declare type ButtonIconProps = {
+    color?: string;
+    size?: number;
+};
+declare type IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null;
+export declare type ButtonProps = Omit<TextParentStyles, 'TextComponent'> & GetProps<typeof ButtonFrame> & ThemeableProps & {
+    icon?: IconProp;
+    iconAfter?: IconProp;
+    scaleIcon?: number;
+    noTextWrap?: boolean;
+    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<{
+    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 | 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;
+} & {
+    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 | 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;
+} & {
+    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 | undefined;
+}, "disabled" | "size" | "active"> & {
+    readonly size?: import("@tamagui/core").SizeTokens | undefined;
+    readonly active?: boolean | undefined;
+    readonly disabled?: boolean | undefined;
+}>>, any, 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 | 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;
+} & 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;
+}>> & 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;
+}>>) | (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;
+}, 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;
+}, 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;
+}, string | number> & {
+    [x: string]: undefined;
+}>>), any, import("@tamagui/core").TextPropsBase, {
+    size?: import("@tamagui/core").FontSizeTokens | undefined;
+} & ({} | {
+    [x: string]: undefined;
+})>;
+export declare const Button: TamaguiComponent<ButtonProps, HTMLButtonElement | View>;
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/types/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,QAAQ,EACR,gBAAgB,EAChB,cAAc,EAMf,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,gBAAgB,EAAoB,MAAM,0BAA0B,CAAA;AAG7E,OAAc,EAAE,iBAAiB,EAA0B,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAKnC,aAAK,eAAe,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AACxD,aAAK,QAAQ,GAAG,GAAG,CAAC,OAAO,GAAG,iBAAiB,CAAC,eAAe,CAAC,GAAG,IAAI,CAAA;AAEvE,oBAAY,WAAW,GAAG,IAAI,CAAC,gBAAgB,EAAE,eAAe,CAAC,GAC/D,QAAQ,CAAC,OAAO,WAAW,CAAC,GAC5B,cAAc,GAAG;IAEf,IAAI,CAAC,EAAE,QAAQ,CAAA;IAEf,SAAS,CAAC,EAAE,QAAQ,CAAA;IAGpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAE5B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDtB,CAAA;AAMF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;GAQrB,CAAA;AAgEF,eAAO,MAAM,MAAM,EAAE,gBAAgB,CAAC,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAWvE,CAAA"}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}