@tamagui/button 1.0.1-beta.193 → 1.0.1-beta.195

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -34,6 +34,7 @@ module.exports = __toCommonJS(Button_exports);
34
34
  var import_jsx_runtime = require("react/jsx-runtime");
35
35
  var import_core = require("@tamagui/core");
36
36
  var import_font_size = require("@tamagui/font-size");
37
+ var import_get_button_sized = require("@tamagui/get-button-sized");
37
38
  var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
38
39
  var import_stacks = require("@tamagui/stacks");
39
40
  var import_text = require("@tamagui/text");
@@ -64,7 +65,7 @@ const ButtonFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
64
65
  },
65
66
  variants: {
66
67
  size: {
67
- "...size": import_core.getButtonSize
68
+ "...size": import_get_button_sized.getButtonSized
68
69
  },
69
70
  active: {
70
71
  true: {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Button.tsx"],
4
- "sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\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 /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n }\n\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 userSelect: 'none',\n cursor: 'pointer',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport function useButton(\n props: ButtonProps,\n { Text = ButtonText }: { Text: any } = { Text: ButtonText }\n) {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 0.66,\n separator,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n ...rest\n } = props\n\n const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.size || '$4'\n const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapChildrenInText(Text, mediaActiveProps)\n const inner =\n themedIcon || themedIconAfter\n ? spacedChildren({\n // a bit arbitrary but scaling to font size is necessary so long as button does\n space: spaceSize,\n spaceFlex,\n separator,\n direction:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents\n\n return {\n spaceSize,\n 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"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport 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 /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n }\n\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': getButtonSized,\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 userSelect: 'none',\n cursor: 'pointer',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport function useButton(\n props: ButtonProps,\n { Text = ButtonText }: { Text: any } = { Text: ButtonText }\n) {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 0.66,\n separator,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n ...rest\n } = props\n\n const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.size || '$4'\n const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapChildrenInText(Text, mediaActiveProps)\n const inner =\n themedIcon || themedIconAfter\n ? spacedChildren({\n // a bit arbitrary but scaling to font size is necessary so long as button does\n space: spaceSize,\n spaceFlex,\n separator,\n direction:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents\n\n return {\n spaceSize,\n 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"],
5
+ "mappings": "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",
6
6
  "names": ["Button", "React"]
7
7
  }
@@ -1,7 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import {
3
3
  ButtonInsideButtonContext,
4
- getButtonSize,
5
4
  getVariableValue,
6
5
  isRSC,
7
6
  spacedChildren,
@@ -10,6 +9,7 @@ import {
10
9
  useMediaPropsActive
11
10
  } from "@tamagui/core";
12
11
  import { getFontSize } from "@tamagui/font-size";
12
+ import { getButtonSized } from "@tamagui/get-button-sized";
13
13
  import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
14
14
  import { ThemeableStack } from "@tamagui/stacks";
15
15
  import { SizableText, wrapChildrenInText } from "@tamagui/text";
@@ -40,7 +40,7 @@ const ButtonFrame = styled(ThemeableStack, {
40
40
  },
41
41
  variants: {
42
42
  size: {
43
- "...size": getButtonSize
43
+ "...size": getButtonSized
44
44
  },
45
45
  active: {
46
46
  true: {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Button.tsx"],
4
- "sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\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 /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n }\n\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 userSelect: 'none',\n cursor: 'pointer',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport function useButton(\n props: ButtonProps,\n { Text = ButtonText }: { Text: any } = { Text: ButtonText }\n) {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 0.66,\n separator,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n ...rest\n } = props\n\n const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.size || '$4'\n const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapChildrenInText(Text, mediaActiveProps)\n const inner =\n themedIcon || themedIconAfter\n ? spacedChildren({\n // a bit arbitrary but scaling to font size is necessary so long as button does\n space: spaceSize,\n spaceFlex,\n separator,\n direction:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents\n\n return {\n spaceSize,\n 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"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport 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 /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n }\n\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': getButtonSized,\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 userSelect: 'none',\n cursor: 'pointer',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport function useButton(\n props: ButtonProps,\n { Text = ButtonText }: { Text: any } = { Text: ButtonText }\n) {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 0.66,\n separator,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n ...rest\n } = props\n\n const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.size || '$4'\n const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapChildrenInText(Text, mediaActiveProps)\n const inner =\n themedIcon || themedIconAfter\n ? spacedChildren({\n // a bit arbitrary but scaling to font size is necessary so long as button does\n space: spaceSize,\n spaceFlex,\n separator,\n direction:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents\n\n return {\n spaceSize,\n 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"],
5
+ "mappings": "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",
6
6
  "names": ["Button"]
7
7
  }
@@ -1,6 +1,5 @@
1
1
  import {
2
2
  ButtonInsideButtonContext,
3
- getButtonSize,
4
3
  getVariableValue,
5
4
  isRSC,
6
5
  spacedChildren,
@@ -9,6 +8,7 @@ import {
9
8
  useMediaPropsActive
10
9
  } from "@tamagui/core";
11
10
  import { getFontSize } from "@tamagui/font-size";
11
+ import { getButtonSized } from "@tamagui/get-button-sized";
12
12
  import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
13
13
  import { ThemeableStack } from "@tamagui/stacks";
14
14
  import { SizableText, wrapChildrenInText } from "@tamagui/text";
@@ -39,7 +39,7 @@ const ButtonFrame = styled(ThemeableStack, {
39
39
  },
40
40
  variants: {
41
41
  size: {
42
- "...size": getButtonSize
42
+ "...size": getButtonSized
43
43
  },
44
44
  active: {
45
45
  true: {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Button.tsx"],
4
- "sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getButtonSize,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\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 /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n }\n\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 userSelect: 'none',\n cursor: 'pointer',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport function useButton(\n props: ButtonProps,\n { Text = ButtonText }: { Text: any } = { Text: ButtonText }\n) {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 0.66,\n separator,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n ...rest\n } = props\n\n const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.size || '$4'\n const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapChildrenInText(Text, mediaActiveProps)\n const inner =\n themedIcon || themedIconAfter\n ? spacedChildren({\n // a bit arbitrary but scaling to font size is necessary so long as button does\n space: spaceSize,\n spaceFlex,\n separator,\n direction:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents\n\n return {\n spaceSize,\n 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"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import {\n ButtonInsideButtonContext,\n GetProps,\n TamaguiElement,\n ThemeableProps,\n getVariableValue,\n isRSC,\n spacedChildren,\n styled,\n themeable,\n useMediaPropsActive,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'\nimport 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 /**\n * add icon before, passes color and size automatically if Component\n */\n icon?: IconProp\n /**\n * add icon after, passes color and size automatically if Component\n */\n iconAfter?: IconProp\n /**\n * adjust icon relative to size\n */\n /**\n * default: -1\n */\n scaleIcon?: number\n /**\n * make the spacing elements flex\n */\n spaceFlex?: number | boolean\n /**\n * adjust internal space relative to icon size\n */\n scaleSpace?: number\n }\n\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': getButtonSized,\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 userSelect: 'none',\n cursor: 'pointer',\n // flexGrow 1 leads to inconsistent native style where text pushes to start of view\n flexGrow: 0,\n flexShrink: 1,\n ellipse: true,\n})\n\nexport function useButton(\n props: ButtonProps,\n { Text = ButtonText }: { Text: any } = { Text: ButtonText }\n) {\n // careful not to desctructure and re-order props, order is important\n const {\n children,\n icon,\n iconAfter,\n noTextWrap,\n theme: themeName,\n space,\n spaceFlex,\n scaleIcon = 1,\n scaleSpace = 0.66,\n separator,\n\n // text props\n color,\n fontWeight,\n letterSpacing,\n fontSize,\n fontFamily,\n textAlign,\n textProps,\n ...rest\n } = props\n\n const isInsideButton = isRSC ? false : useContext(ButtonInsideButtonContext)\n const mediaActiveProps = useMediaPropsActive(props)\n const size = mediaActiveProps.size || '$4'\n const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n const spaceSize = getVariableValue(iconSize) * scaleSpace\n const contents = wrapChildrenInText(Text, mediaActiveProps)\n const inner =\n themedIcon || themedIconAfter\n ? spacedChildren({\n // a bit arbitrary but scaling to font size is necessary so long as button does\n space: spaceSize,\n spaceFlex,\n separator,\n direction:\n props.flexDirection === 'column' || props.flexDirection === 'column-reverse'\n ? 'vertical'\n : 'horizontal',\n children: [themedIcon, contents, themedIconAfter],\n })\n : contents\n\n return {\n spaceSize,\n 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"],
5
+ "mappings": "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",
6
6
  "names": ["Button"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/button",
3
- "version": "1.0.1-beta.193",
3
+ "version": "1.0.1-beta.195",
4
4
  "sideEffects": [
5
5
  "*.css"
6
6
  ],
@@ -28,16 +28,17 @@
28
28
  }
29
29
  },
30
30
  "dependencies": {
31
- "@tamagui/core": "^1.0.1-beta.193",
32
- "@tamagui/font-size": "^1.0.1-beta.193",
33
- "@tamagui/helpers-tamagui": "^1.0.1-beta.193"
31
+ "@tamagui/core": "^1.0.1-beta.195",
32
+ "@tamagui/font-size": "^1.0.1-beta.195",
33
+ "@tamagui/get-button-sized": "^1.0.1-beta.195",
34
+ "@tamagui/helpers-tamagui": "^1.0.1-beta.195"
34
35
  },
35
36
  "peerDependencies": {
36
37
  "react": "*",
37
38
  "react-dom": "*"
38
39
  },
39
40
  "devDependencies": {
40
- "@tamagui/build": "^1.0.1-beta.193",
41
+ "@tamagui/build": "^1.0.1-beta.195",
41
42
  "react": "*",
42
43
  "react-dom": "*"
43
44
  },
package/src/Button.tsx CHANGED
@@ -3,7 +3,6 @@ import {
3
3
  GetProps,
4
4
  TamaguiElement,
5
5
  ThemeableProps,
6
- getButtonSize,
7
6
  getVariableValue,
8
7
  isRSC,
9
8
  spacedChildren,
@@ -12,6 +11,7 @@ import {
12
11
  useMediaPropsActive,
13
12
  } from '@tamagui/core'
14
13
  import { getFontSize } from '@tamagui/font-size'
14
+ import { getButtonSized } from '@tamagui/get-button-sized'
15
15
  import { useGetThemedIcon } from '@tamagui/helpers-tamagui'
16
16
  import { ThemeableStack } from '@tamagui/stacks'
17
17
  import { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'
@@ -82,7 +82,7 @@ export const ButtonFrame = styled(ThemeableStack, {
82
82
 
83
83
  variants: {
84
84
  size: {
85
- '...size': getButtonSize,
85
+ '...size': getButtonSized,
86
86
  },
87
87
 
88
88
  active: {
package/types/Button.d.ts CHANGED
@@ -31,7 +31,7 @@ export declare type ButtonProps = Omit<TextParentStyles, 'TextComponent'> & GetP
31
31
  */
32
32
  scaleSpace?: number;
33
33
  };
34
- 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<{
34
+ export declare const ButtonFrame: import("@tamagui/core").TamaguiComponent<Omit<import("@tamagui/types-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<{
35
35
  readonly fullscreen?: boolean | undefined;
36
36
  readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
37
37
  } & {
@@ -51,7 +51,7 @@ export declare const ButtonFrame: import("@tamagui/core").TamaguiComponent<Omit<
51
51
  readonly size?: import("@tamagui/core").SizeTokens | undefined;
52
52
  readonly active?: boolean | undefined;
53
53
  readonly disabled?: boolean | undefined;
54
- } & 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<{
54
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-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<{
55
55
  readonly fullscreen?: boolean | undefined;
56
56
  readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
57
57
  } & {
@@ -71,7 +71,7 @@ export declare const ButtonFrame: import("@tamagui/core").TamaguiComponent<Omit<
71
71
  readonly size?: import("@tamagui/core").SizeTokens | undefined;
72
72
  readonly active?: boolean | undefined;
73
73
  readonly disabled?: boolean | undefined;
74
- }>> & 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<{
74
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-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<{
75
75
  readonly fullscreen?: boolean | undefined;
76
76
  readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
77
77
  } & {
@@ -112,21 +112,21 @@ export declare const ButtonFrame: import("@tamagui/core").TamaguiComponent<Omit<
112
112
  readonly active?: boolean | undefined;
113
113
  readonly disabled?: boolean | undefined;
114
114
  }>;
115
- 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"> & {
115
+ export declare const ButtonText: import("@tamagui/core").TamaguiComponent<(Omit<import("@tamagui/types-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"> & {
116
116
  readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
117
- } & 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"> & {
117
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-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"> & {
118
118
  readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
119
- }>> & 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"> & {
119
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-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"> & {
120
120
  readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
121
- }>>) | (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<{
121
+ }>>) | (Omit<import("@tamagui/types-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<{
122
122
  readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
123
123
  }, string | number> & {
124
124
  [x: string]: undefined;
125
- } & 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<{
125
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-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<{
126
126
  readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
127
127
  }, string | number> & {
128
128
  [x: string]: undefined;
129
- }>> & 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<{
129
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-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<{
130
130
  readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
131
131
  }, string | number> & {
132
132
  [x: string]: undefined;
@@ -144,11 +144,11 @@ export declare function useButton(props: ButtonProps, { Text }?: {
144
144
  isInsideButton: boolean;
145
145
  props: {
146
146
  children: string | number | boolean | any[] | JSX.Element | React.ReactFragment | null | undefined;
147
- hitSlop?: import("react-native").Insets | (import("react-native").Insets & number) | undefined;
148
- onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
147
+ hitSlop?: import("@tamagui/types-react-native").Insets | (import("@tamagui/types-react-native").Insets & number) | undefined;
148
+ onLayout?: ((event: import("@tamagui/types-react-native").LayoutChangeEvent) => void) | undefined;
149
149
  pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined;
150
150
  removeClippedSubviews?: boolean | undefined;
151
- style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
151
+ style?: import("@tamagui/types-react-native").StyleProp<import("@tamagui/types-react-native").ViewStyle>;
152
152
  testID?: string | undefined;
153
153
  nativeID?: string | undefined;
154
154
  collapsable?: boolean | undefined;
@@ -158,42 +158,59 @@ export declare function useButton(props: ButtonProps, { Text }?: {
158
158
  shouldRasterizeIOS?: boolean | undefined;
159
159
  isTVSelectable?: boolean | undefined;
160
160
  hasTVPreferredFocus?: boolean | undefined;
161
- tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
161
+ tvParallaxProperties?: import("@tamagui/types-react-native").TVParallaxProperties | undefined;
162
162
  tvParallaxShiftDistanceX?: number | undefined;
163
163
  tvParallaxShiftDistanceY?: number | undefined;
164
164
  tvParallaxTiltAngle?: number | undefined;
165
165
  tvParallaxMagnification?: number | undefined;
166
- onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
167
- onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
168
- onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
169
- onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
170
- onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
171
- onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
172
- onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
173
- onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
174
- onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
175
- onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
176
- onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
177
- onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
178
- onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
179
- onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
180
- onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
181
- onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
182
- onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
166
+ onStartShouldSetResponder?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => boolean) | undefined;
167
+ onMoveShouldSetResponder?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => boolean) | undefined;
168
+ onResponderEnd?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => void) | undefined;
169
+ onResponderGrant?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => void) | undefined;
170
+ onResponderReject?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => void) | undefined;
171
+ onResponderMove?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => void) | undefined;
172
+ onResponderRelease?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => void) | undefined;
173
+ onResponderStart?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => void) | undefined;
174
+ onResponderTerminationRequest?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => boolean) | undefined;
175
+ onResponderTerminate?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => void) | undefined;
176
+ onStartShouldSetResponderCapture?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => boolean) | undefined;
177
+ onMoveShouldSetResponderCapture?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => boolean) | undefined;
178
+ onTouchStart?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => void) | undefined;
179
+ onTouchMove?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => void) | undefined;
180
+ onTouchEnd?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => void) | undefined;
181
+ onTouchCancel?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => void) | undefined;
182
+ onTouchEndCapture?: ((event: import("@tamagui/types-react-native").GestureResponderEvent) => void) | undefined;
183
+ onPointerEnter?: ((event: import("@tamagui/types-react-native").PointerEvent) => void) | undefined;
184
+ onPointerEnterCapture?: ((event: import("@tamagui/types-react-native").PointerEvent) => void) | undefined;
185
+ onPointerLeave?: ((event: import("@tamagui/types-react-native").PointerEvent) => void) | undefined;
186
+ onPointerLeaveCapture?: ((event: import("@tamagui/types-react-native").PointerEvent) => void) | undefined;
187
+ onPointerMove?: ((event: import("@tamagui/types-react-native").PointerEvent) => void) | undefined;
188
+ onPointerMoveCapture?: ((event: import("@tamagui/types-react-native").PointerEvent) => void) | undefined;
189
+ onPointerCancel?: ((event: import("@tamagui/types-react-native").PointerEvent) => void) | undefined;
190
+ onPointerCancelCapture?: ((event: import("@tamagui/types-react-native").PointerEvent) => void) | undefined;
191
+ onPointerDown?: ((event: import("@tamagui/types-react-native").PointerEvent) => void) | undefined;
192
+ onPointerDownCapture?: ((event: import("@tamagui/types-react-native").PointerEvent) => void) | undefined;
193
+ onPointerUp?: ((event: import("@tamagui/types-react-native").PointerEvent) => void) | undefined;
194
+ onPointerUpCapture?: ((event: import("@tamagui/types-react-native").PointerEvent) => void) | undefined;
183
195
  accessible?: boolean | undefined;
184
196
  accessibilityActions?: readonly Readonly<{
185
197
  name: string;
186
198
  label?: string | undefined;
187
199
  }>[] | undefined;
188
200
  accessibilityLabel?: string | undefined;
201
+ /**
202
+ * add icon after, passes color and size automatically if Component
203
+ */
189
204
  accessibilityRole?: "none" | "button" | "link" | "search" | "image" | "keyboardkey" | "text" | "adjustable" | "imagebutton" | "header" | "summary" | "list" | undefined;
190
- accessibilityState?: import("react-native").AccessibilityState | undefined;
205
+ accessibilityState?: import("@tamagui/types-react-native").AccessibilityState | undefined;
191
206
  accessibilityHint?: string | undefined;
192
- accessibilityValue?: import("react-native").AccessibilityValue | undefined;
193
- onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
207
+ accessibilityValue?: import("@tamagui/types-react-native").AccessibilityValue | undefined;
208
+ onAccessibilityAction?: ((event: import("@tamagui/types-react-native").AccessibilityActionEvent) => void) | undefined;
209
+ accessibilityLabelledBy?: string | string[] | undefined;
194
210
  accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
195
211
  importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
196
212
  accessibilityElementsHidden?: boolean | undefined;
213
+ accessibilityLanguage?: string | undefined;
197
214
  accessibilityViewIsModal?: boolean | undefined;
198
215
  onAccessibilityEscape?: (() => void) | undefined;
199
216
  onAccessibilityTap?: (() => void) | undefined;
@@ -207,9 +224,6 @@ export declare function useButton(props: ButtonProps, { Text }?: {
207
224
  hrefAttrs?: {
208
225
  target?: "top" | "_blank" | "_self" | "_top" | "blank" | "self" | undefined;
209
226
  rel?: string | undefined;
210
- /**
211
- * make the spacing elements flex
212
- */
213
227
  download?: boolean | undefined;
214
228
  } | undefined;
215
229
  onMouseDown?: (((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) & ((e: MouseEvent) => any)) | undefined;
@@ -224,6 +238,9 @@ export declare function useButton(props: ButtonProps, { Text }?: {
224
238
  onSelectionChangeShouldSetResponderCapture?: unknown;
225
239
  asChild?: boolean | undefined;
226
240
  spaceDirection?: import("@tamagui/core").SpaceDirection | undefined;
241
+ /**
242
+ * default: -1
243
+ */
227
244
  dangerouslySetInnerHTML?: {
228
245
  __html: string;
229
246
  } | undefined;
@@ -231,7 +248,7 @@ export declare function useButton(props: ButtonProps, { Text }?: {
231
248
  animateOnly?: string[] | undefined;
232
249
  debug?: import("@tamagui/core").DebugProp | undefined;
233
250
  disabled?: boolean | undefined; /**
234
- * make the spacing elements flex
251
+ * adjust internal space relative to icon size
235
252
  */
236
253
  className?: string | undefined;
237
254
  themeShallow?: boolean | undefined;
@@ -241,26 +258,26 @@ export declare function useButton(props: ButtonProps, { Text }?: {
241
258
  forceStyle?: "hover" | "press" | "focus" | undefined;
242
259
  onHoverIn?: ((e: MouseEvent) => any) | undefined;
243
260
  onHoverOut?: ((e: MouseEvent) => any) | undefined;
244
- onPress?: ((e: import("react-native").GestureResponderEvent) => any) | undefined;
245
- onPressIn?: ((e: import("react-native").GestureResponderEvent) => any) | undefined;
246
- onPressOut?: ((e: import("react-native").GestureResponderEvent) => any) | undefined;
247
- backgroundColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
248
- borderBottomColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
261
+ onPress?: ((e: import("@tamagui/types-react-native").GestureResponderEvent) => any) | undefined;
262
+ onPressIn?: ((e: import("@tamagui/types-react-native").GestureResponderEvent) => any) | undefined;
263
+ onPressOut?: ((e: import("@tamagui/types-react-native").GestureResponderEvent) => any) | undefined;
264
+ backgroundColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("@tamagui/types-react-native").OpaqueColorValue | undefined;
265
+ borderBottomColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("@tamagui/types-react-native").OpaqueColorValue | undefined;
249
266
  borderBottomEndRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
250
267
  borderBottomLeftRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
251
268
  borderBottomRightRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
252
269
  borderBottomStartRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
253
270
  borderBottomWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
254
- borderColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
255
- borderEndColor?: import("react-native").ColorValue | undefined;
256
- borderLeftColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
271
+ borderColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("@tamagui/types-react-native").OpaqueColorValue | undefined;
272
+ borderEndColor?: import("@tamagui/types-react-native").ColorValue | undefined;
273
+ borderLeftColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("@tamagui/types-react-native").OpaqueColorValue | undefined;
257
274
  borderLeftWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
258
275
  borderRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
259
- borderRightColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
276
+ borderRightColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("@tamagui/types-react-native").OpaqueColorValue | undefined;
260
277
  borderRightWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
261
- borderStartColor?: import("react-native").ColorValue | undefined;
278
+ borderStartColor?: import("@tamagui/types-react-native").ColorValue | undefined;
262
279
  borderStyle?: "solid" | "dotted" | "dashed" | undefined;
263
- borderTopColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
280
+ borderTopColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("@tamagui/types-react-native").OpaqueColorValue | undefined;
264
281
  borderTopEndRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
265
282
  borderTopLeftRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
266
283
  borderTopRightRadius?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
@@ -269,8 +286,8 @@ export declare function useButton(props: ButtonProps, { Text }?: {
269
286
  borderWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
270
287
  opacity?: number | undefined;
271
288
  alignContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch" | undefined;
272
- alignItems?: import("react-native").FlexAlignType | undefined;
273
- alignSelf?: "auto" | import("react-native").FlexAlignType | undefined;
289
+ alignItems?: import("@tamagui/types-react-native").FlexAlignType | undefined;
290
+ alignSelf?: "auto" | import("@tamagui/types-react-native").FlexAlignType | undefined;
274
291
  aspectRatio?: number | undefined;
275
292
  borderEndWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
276
293
  borderStartWidth?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
@@ -315,7 +332,7 @@ export declare function useButton(props: ButtonProps, { Text }?: {
315
332
  width?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
316
333
  zIndex?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ZIndexTokens | undefined;
317
334
  direction?: "inherit" | "ltr" | "rtl" | undefined;
318
- shadowColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("react-native").OpaqueColorValue | undefined;
335
+ shadowColor?: import("@tamagui/core").ThemeValueFallback | import("@tamagui/core").ColorTokens | import("@tamagui/types-react-native").OpaqueColorValue | undefined;
319
336
  shadowOffset?: import("@tamagui/core").ThemeValueFallback | {
320
337
  width: import("@tamagui/core").SpaceTokens;
321
338
  height: import("@tamagui/core").SpaceTokens;
@@ -325,7 +342,7 @@ export declare function useButton(props: ButtonProps, { Text }?: {
325
342
  } | undefined;
326
343
  shadowOpacity?: number | undefined;
327
344
  shadowRadius?: import("@tamagui/core").SizeTokens | import("@tamagui/core").ThemeValueFallback | undefined;
328
- 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;
345
+ transform?: (import("@tamagui/types-react-native").PerpectiveTransform | import("@tamagui/types-react-native").RotateTransform | import("@tamagui/types-react-native").RotateXTransform | import("@tamagui/types-react-native").RotateYTransform | import("@tamagui/types-react-native").RotateZTransform | import("@tamagui/types-react-native").ScaleTransform | import("@tamagui/types-react-native").ScaleXTransform | import("@tamagui/types-react-native").ScaleYTransform | import("@tamagui/types-react-native").TranslateXTransform | import("@tamagui/types-react-native").TranslateYTransform | import("@tamagui/types-react-native").SkewXTransform | import("@tamagui/types-react-native").SkewYTransform | import("@tamagui/types-react-native").MatrixTransform)[] | undefined;
329
346
  transformMatrix?: number[] | undefined;
330
347
  rotation?: number | undefined;
331
348
  scaleX?: import("@tamagui/core").SpaceTokens | import("@tamagui/core").ThemeValueFallback | undefined;
@@ -362,7 +379,7 @@ export declare function useButton(props: ButtonProps, { Text }?: {
362
379
  fullscreen?: boolean | undefined;
363
380
  size?: import("@tamagui/core").SizeTokens | undefined;
364
381
  active?: boolean | undefined;
365
- 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<{
382
+ hoverStyle?: Partial<Omit<import("@tamagui/types-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<{
366
383
  readonly fullscreen?: boolean | undefined;
367
384
  readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
368
385
  } & {
@@ -383,7 +400,7 @@ export declare function useButton(props: ButtonProps, { Text }?: {
383
400
  readonly active?: boolean | undefined;
384
401
  readonly disabled?: boolean | undefined;
385
402
  }> | null | undefined;
386
- 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<{
403
+ pressStyle?: Partial<Omit<import("@tamagui/types-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<{
387
404
  readonly fullscreen?: boolean | undefined;
388
405
  readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
389
406
  } & {
@@ -404,7 +421,7 @@ export declare function useButton(props: ButtonProps, { Text }?: {
404
421
  readonly active?: boolean | undefined;
405
422
  readonly disabled?: boolean | undefined;
406
423
  }> | null | undefined;
407
- 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<{
424
+ focusStyle?: Partial<Omit<import("@tamagui/types-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<{
408
425
  readonly fullscreen?: boolean | undefined;
409
426
  readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
410
427
  } & {
@@ -425,7 +442,7 @@ export declare function useButton(props: ButtonProps, { Text }?: {
425
442
  readonly active?: boolean | undefined;
426
443
  readonly disabled?: boolean | undefined;
427
444
  }> | null | undefined;
428
- 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<{
445
+ exitStyle?: Partial<Omit<import("@tamagui/types-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<{
429
446
  readonly fullscreen?: boolean | undefined;
430
447
  readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
431
448
  } & {
@@ -446,7 +463,7 @@ export declare function useButton(props: ButtonProps, { Text }?: {
446
463
  readonly active?: boolean | undefined;
447
464
  readonly disabled?: boolean | undefined;
448
465
  }> | null | undefined;
449
- 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<{
466
+ enterStyle?: Partial<Omit<import("@tamagui/types-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<{
450
467
  readonly fullscreen?: boolean | undefined;
451
468
  readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
452
469
  } & {
@@ -473,7 +490,7 @@ export declare function useButton(props: ButtonProps, { Text }?: {
473
490
  export declare const buttonStaticConfig: {
474
491
  inlineProps: Set<string>;
475
492
  };
476
- 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<{
493
+ export declare const Button: (props: Omit<Omit<TextParentStyles, "TextComponent"> & Omit<import("@tamagui/types-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<{
477
494
  readonly fullscreen?: boolean | undefined;
478
495
  readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
479
496
  } & {
@@ -493,7 +510,7 @@ export declare const Button: (props: Omit<Omit<TextParentStyles, "TextComponent"
493
510
  readonly size?: import("@tamagui/core").SizeTokens | undefined;
494
511
  readonly active?: boolean | undefined;
495
512
  readonly disabled?: boolean | undefined;
496
- } & 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<{
513
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-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<{
497
514
  readonly fullscreen?: boolean | undefined;
498
515
  readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
499
516
  } & {
@@ -513,7 +530,7 @@ export declare const Button: (props: Omit<Omit<TextParentStyles, "TextComponent"
513
530
  readonly size?: import("@tamagui/core").SizeTokens | undefined;
514
531
  readonly active?: boolean | undefined;
515
532
  readonly disabled?: boolean | undefined;
516
- }>> & 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<{
533
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-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<{
517
534
  readonly fullscreen?: boolean | undefined;
518
535
  readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
519
536
  } & {