@tamagui/button 1.15.13 → 1.15.15

package/dist/jsx/Button.js

@@ -1,3 +1,4 @@
+import { createContextScope } from "@tamagui/create-context";
 import { getFontSize } from "@tamagui/font-size";
 import { getButtonSized } from "@tamagui/get-button-sized";
 import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
@@ -10,12 +11,19 @@ import {
   spacedChildren,
   styled,
   themeable,
-  useMediaPropsActive
+  useMediaPropsActive,
+  withStaticProperties
 } from "@tamagui/web";
-import { forwardRef, useContext } from "react";
-const NAME = "Button";
+import {
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useState
+} from "react";
+const BUTTON_NAME = "Button";
 const ButtonFrame = styled(ThemeableStack, {
-  name: NAME,
+  name: BUTTON_NAME,
   tag: "button",
   variants: {
     unstyled: {
@@ -66,8 +74,9 @@ const ButtonFrame = styled(ThemeableStack, {
     unstyled: false
   }
 });
-const ButtonText = styled(SizableText, {
-  name: "ButtonText",
+const BUTTON_TEXT_NAME = "ButtonText";
+const ButtonTextFrame = styled(SizableText, {
+  name: BUTTON_TEXT_NAME,
   variants: {
     unstyled: {
       false: {
@@ -85,10 +94,48 @@ const ButtonText = styled(SizableText, {
     unstyled: false
   }
 });
-const ButtonComponent = forwardRef(function Button(props, ref) {
-  const { props: buttonProps } = useButton(props);
-  return <ButtonFrame {...buttonProps} ref={ref} />;
-});
+const [createButtonContext, createButtonScope] = createContextScope("Button");
+const [ButtonProvider, useButtonContext] = createButtonContext("Button");
+const ButtonTextComponent = ButtonTextFrame.extractable(
+  forwardRef(
+    (props, ref) => {
+      const context = useButtonContext(BUTTON_TEXT_NAME, props.__scopeButton);
+      useEffect(() => {
+        const unregister = context.registerButtonText();
+        return () => unregister();
+      }, [context.registerButtonText]);
+      return <ButtonTextFrame size={props.size ?? context.size} {...props} ref={ref} />;
+    }
+  )
+);
+const BUTTON_ICON_NAME = "ButtonIcon";
+const ButtonIcon = (props) => {
+  const { children, scaleIcon = 1 } = props;
+  const context = useButtonContext(BUTTON_ICON_NAME, props.__scopeButton);
+  const size = context.size;
+  const color = context.color;
+  const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
+  const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
+  return getThemedIcon(children);
+};
+const ButtonComponent = forwardRef(
+  function Button(props, ref) {
+    const { props: buttonProps } = useButton(props);
+    const [buttonTextCount, setButtonTextCount] = useState(0);
+    const registerButtonText = useCallback(() => {
+      setButtonTextCount((prev) => prev + 1);
+      return () => setButtonTextCount((prev) => prev - 1);
+    }, [setButtonTextCount]);
+    const hasTextComponent = buttonTextCount > 0;
+    return <ButtonProvider
+      scope={props.__scopeButton}
+      color={props.color}
+      hasTextComponent={hasTextComponent}
+      size={props.size ?? "$true"}
+      registerButtonText={registerButtonText}
+    ><ButtonFrame {...hasTextComponent ? props : buttonProps} ref={ref} /></ButtonProvider>;
+  }
+);
 const buttonStaticConfig = {
   inlineProps: /* @__PURE__ */ new Set([
     // text props go here (can't really optimize them, but we never fully extract button anyway)
@@ -103,11 +150,17 @@ const buttonStaticConfig = {
     "unstyled"
   ])
 };
-const Button2 = ButtonFrame.extractable(
-  themeable(ButtonComponent, ButtonFrame.staticConfig),
-  buttonStaticConfig
+const Button2 = withStaticProperties(
+  ButtonFrame.extractable(
+    themeable(ButtonComponent, ButtonFrame.staticConfig),
+    buttonStaticConfig
+  ),
+  {
+    Text: ButtonTextComponent,
+    Icon: ButtonIcon
+  }
 );
-function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
+function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame }) {
   const {
     children,
     icon,
@@ -141,7 +194,7 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
   const contents = wrapChildrenInText(
     Text,
     propsActive,
-    Text === ButtonText ? {
+    Text === ButtonTextFrame ? {
       unstyled
     } : void 0
   );
@@ -167,6 +220,7 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
         borderColor: "$background"
       }
     },
+    unstyled,
     tag,
     ...rest,
     children: isRSC ? inner : <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>
@@ -180,8 +234,9 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
 export {
   Button2 as Button,
   ButtonFrame,
-  ButtonText,
+  ButtonTextFrame as ButtonText,
   buttonStaticConfig,
+  createButtonScope,
   useButton
 };
 //# sourceMappingURL=Button.js.map

package/dist/jsx/Button.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Button.tsx"],
-  "sourcesContent": ["import { 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 {\n  ButtonNestingContext,\n  GetProps,\n  TamaguiElement,\n  ThemeableProps,\n  getVariableValue,\n  isRSC,\n  spacedChildren,\n  styled,\n  themeable,\n  useMediaPropsActive,\n} from '@tamagui/web'\nimport { FunctionComponent, forwardRef, useContext } from 'react'\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n  GetProps<typeof ButtonFrame> &\n  ThemeableProps & {\n    /**\n     * add icon before, passes color and size automatically if Component\n     */\n    icon?: IconProp\n    /**\n     * add icon after, passes color and size automatically if Component\n     */\n    iconAfter?: IconProp\n    /**\n     * adjust icon relative to size\n     *\n     * @default 1\n     */\n    scaleIcon?: number\n    /**\n     * make the spacing elements flex\n     */\n    spaceFlex?: number | boolean\n    /**\n     * adjust internal space relative to icon size\n     */\n    scaleSpace?: number\n    /**\n     *\n     */\n    unstyled?: boolean\n  }\n\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        justifyContent: 'center',\n        alignItems: 'center',\n        flexWrap: 'nowrap',\n        flexDirection: 'row',\n        cursor: 'pointer',\n        focusable: true,\n        hoverTheme: true,\n        pressTheme: true,\n        backgrounded: true,\n        borderWidth: 1,\n        borderColor: 'transparent',\n\n        pressStyle: {\n          borderColor: 'transparent',\n        },\n\n        hoverStyle: {\n          borderColor: 'transparent',\n        },\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n          outlineColor: '$borderColorFocus',\n          outlineStyle: 'solid',\n          outlineWidth: 2,\n        },\n      },\n    },\n\n    size: {\n      '...size': getButtonSized,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport const ButtonText = styled(SizableText, {\n  name: 'ButtonText',\n\n  variants: {\n    unstyled: {\n      false: {\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        color: '$color',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(\n  props,\n  ref\n) {\n  const { props: buttonProps } = useButton(props)\n  return <ButtonFrame {...buttonProps} ref={ref} />\n})\n\nexport const buttonStaticConfig = {\n  inlineProps: new Set([\n    // text props go here (can't really optimize them, but we never fully extract button anyway)\n    // may be able to remove this entirely, as the compiler / runtime have gotten better\n    'color',\n    'fontWeight',\n    'fontSize',\n    'fontFamily',\n    'fontStyle',\n    'letterSpacing',\n    'textAlign',\n    'unstyled',\n  ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n  themeable(ButtonComponent, ButtonFrame.staticConfig),\n  buttonStaticConfig\n)\n\nexport function useButton(\n  propsIn: ButtonProps,\n  { Text = ButtonText }: { Text: any } = { Text: ButtonText }\n) {\n  // careful not to desctructure and re-order props, order is important\n  const {\n    children,\n    icon,\n    iconAfter,\n    noTextWrap,\n    theme: themeName,\n    space,\n    spaceFlex,\n    scaleIcon = 1,\n    scaleSpace = 0.66,\n    separator,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    fontStyle,\n    textAlign,\n    unstyled = false,\n    textProps,\n\n    ...rest\n  } = propsIn\n\n  const isNested = isRSC ? false : useContext(ButtonNestingContext)\n  const propsActive = useMediaPropsActive(propsIn)\n  const size = propsActive.size || '$true'\n  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = propsActive.space ?? getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(\n    Text,\n    propsActive,\n    Text === ButtonText\n      ? {\n          unstyled,\n        }\n      : undefined\n  )\n  const inner = spacedChildren({\n    // a bit arbitrary but scaling to font size is necessary so long as button does\n    space: spaceSize,\n    spaceFlex,\n    separator,\n    direction:\n      propsActive.flexDirection === 'column' ||\n      propsActive.flexDirection === 'column-reverse'\n        ? 'vertical'\n        : 'horizontal',\n    children: [themedIcon, ...contents, themedIconAfter],\n  })\n\n  // fixes SSR issue + DOM nesting issue of not allowing button in button\n  const tag = isNested\n    ? 'span'\n    : // defaults to <a /> when accessibilityRole = link\n    // see https://github.com/tamagui/tamagui/issues/505\n    propsIn.accessibilityRole === 'link'\n    ? 'a'\n    : undefined\n\n  const props = {\n    ...(propsActive.disabled && {\n      // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n      focusable: undefined,\n      // even with tabIndex unset, it will keep focusStyle on web so disable it here\n      focusStyle: {\n        borderColor: '$background',\n      },\n    }),\n    tag,\n    ...rest,\n    children: isRSC ? (\n      inner\n    ) : (\n      <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>\n    ),\n  }\n\n  return {\n    spaceSize,\n    isNested,\n    props,\n  }\n}\n"],
-  "mappings": "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",
+  "mappings": "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",
   "names": ["Button"]
 }

package/dist/jsx/Button.mjs

@@ -1,3 +1,4 @@
+import { createContextScope } from "@tamagui/create-context";
 import { getFontSize } from "@tamagui/font-size";
 import { getButtonSized } from "@tamagui/get-button-sized";
 import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
@@ -10,12 +11,19 @@ import {
   spacedChildren,
   styled,
   themeable,
-  useMediaPropsActive
+  useMediaPropsActive,
+  withStaticProperties
 } from "@tamagui/web";
-import { forwardRef, useContext } from "react";
-const NAME = "Button";
+import {
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useState
+} from "react";
+const BUTTON_NAME = "Button";
 const ButtonFrame = styled(ThemeableStack, {
-  name: NAME,
+  name: BUTTON_NAME,
   tag: "button",
   variants: {
     unstyled: {
@@ -66,8 +74,9 @@ const ButtonFrame = styled(ThemeableStack, {
     unstyled: false
   }
 });
-const ButtonText = styled(SizableText, {
-  name: "ButtonText",
+const BUTTON_TEXT_NAME = "ButtonText";
+const ButtonTextFrame = styled(SizableText, {
+  name: BUTTON_TEXT_NAME,
   variants: {
     unstyled: {
       false: {
@@ -85,10 +94,48 @@ const ButtonText = styled(SizableText, {
     unstyled: false
   }
 });
-const ButtonComponent = forwardRef(function Button(props, ref) {
-  const { props: buttonProps } = useButton(props);
-  return <ButtonFrame {...buttonProps} ref={ref} />;
-});
+const [createButtonContext, createButtonScope] = createContextScope("Button");
+const [ButtonProvider, useButtonContext] = createButtonContext("Button");
+const ButtonTextComponent = ButtonTextFrame.extractable(
+  forwardRef(
+    (props, ref) => {
+      const context = useButtonContext(BUTTON_TEXT_NAME, props.__scopeButton);
+      useEffect(() => {
+        const unregister = context.registerButtonText();
+        return () => unregister();
+      }, [context.registerButtonText]);
+      return <ButtonTextFrame size={props.size ?? context.size} {...props} ref={ref} />;
+    }
+  )
+);
+const BUTTON_ICON_NAME = "ButtonIcon";
+const ButtonIcon = (props) => {
+  const { children, scaleIcon = 1 } = props;
+  const context = useButtonContext(BUTTON_ICON_NAME, props.__scopeButton);
+  const size = context.size;
+  const color = context.color;
+  const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
+  const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
+  return getThemedIcon(children);
+};
+const ButtonComponent = forwardRef(
+  function Button(props, ref) {
+    const { props: buttonProps } = useButton(props);
+    const [buttonTextCount, setButtonTextCount] = useState(0);
+    const registerButtonText = useCallback(() => {
+      setButtonTextCount((prev) => prev + 1);
+      return () => setButtonTextCount((prev) => prev - 1);
+    }, [setButtonTextCount]);
+    const hasTextComponent = buttonTextCount > 0;
+    return <ButtonProvider
+      scope={props.__scopeButton}
+      color={props.color}
+      hasTextComponent={hasTextComponent}
+      size={props.size ?? "$true"}
+      registerButtonText={registerButtonText}
+    ><ButtonFrame {...hasTextComponent ? props : buttonProps} ref={ref} /></ButtonProvider>;
+  }
+);
 const buttonStaticConfig = {
   inlineProps: /* @__PURE__ */ new Set([
     // text props go here (can't really optimize them, but we never fully extract button anyway)
@@ -103,11 +150,17 @@ const buttonStaticConfig = {
     "unstyled"
   ])
 };
-const Button2 = ButtonFrame.extractable(
-  themeable(ButtonComponent, ButtonFrame.staticConfig),
-  buttonStaticConfig
+const Button2 = withStaticProperties(
+  ButtonFrame.extractable(
+    themeable(ButtonComponent, ButtonFrame.staticConfig),
+    buttonStaticConfig
+  ),
+  {
+    Text: ButtonTextComponent,
+    Icon: ButtonIcon
+  }
 );
-function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
+function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame }) {
   const {
     children,
     icon,
@@ -141,7 +194,7 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
   const contents = wrapChildrenInText(
     Text,
     propsActive,
-    Text === ButtonText ? {
+    Text === ButtonTextFrame ? {
       unstyled
     } : void 0
   );
@@ -167,6 +220,7 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
         borderColor: "$background"
       }
     },
+    unstyled,
     tag,
     ...rest,
     children: isRSC ? inner : <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>
@@ -180,8 +234,9 @@ function useButton(propsIn, { Text = ButtonText } = { Text: ButtonText }) {
 export {
   Button2 as Button,
   ButtonFrame,
-  ButtonText,
+  ButtonTextFrame as ButtonText,
   buttonStaticConfig,
+  createButtonScope,
   useButton
 };
 //# sourceMappingURL=Button.mjs.map

package/dist/jsx/Button.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Button.tsx"],
-  "sourcesContent": ["import { 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 {\n  ButtonNestingContext,\n  GetProps,\n  TamaguiElement,\n  ThemeableProps,\n  getVariableValue,\n  isRSC,\n  spacedChildren,\n  styled,\n  themeable,\n  useMediaPropsActive,\n} from '@tamagui/web'\nimport { FunctionComponent, forwardRef, useContext } from 'react'\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &\n  GetProps<typeof ButtonFrame> &\n  ThemeableProps & {\n    /**\n     * add icon before, passes color and size automatically if Component\n     */\n    icon?: IconProp\n    /**\n     * add icon after, passes color and size automatically if Component\n     */\n    iconAfter?: IconProp\n    /**\n     * adjust icon relative to size\n     *\n     * @default 1\n     */\n    scaleIcon?: number\n    /**\n     * make the spacing elements flex\n     */\n    spaceFlex?: number | boolean\n    /**\n     * adjust internal space relative to icon size\n     */\n    scaleSpace?: number\n    /**\n     *\n     */\n    unstyled?: boolean\n  }\n\nconst NAME = 'Button'\n\nexport const ButtonFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        justifyContent: 'center',\n        alignItems: 'center',\n        flexWrap: 'nowrap',\n        flexDirection: 'row',\n        cursor: 'pointer',\n        focusable: true,\n        hoverTheme: true,\n        pressTheme: true,\n        backgrounded: true,\n        borderWidth: 1,\n        borderColor: 'transparent',\n\n        pressStyle: {\n          borderColor: 'transparent',\n        },\n\n        hoverStyle: {\n          borderColor: 'transparent',\n        },\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n          outlineColor: '$borderColorFocus',\n          outlineStyle: 'solid',\n          outlineWidth: 2,\n        },\n      },\n    },\n\n    size: {\n      '...size': getButtonSized,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        pointerEvents: 'none',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport const ButtonText = styled(SizableText, {\n  name: 'ButtonText',\n\n  variants: {\n    unstyled: {\n      false: {\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        color: '$color',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nconst ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(\n  props,\n  ref\n) {\n  const { props: buttonProps } = useButton(props)\n  return <ButtonFrame {...buttonProps} ref={ref} />\n})\n\nexport const buttonStaticConfig = {\n  inlineProps: new Set([\n    // text props go here (can't really optimize them, but we never fully extract button anyway)\n    // may be able to remove this entirely, as the compiler / runtime have gotten better\n    'color',\n    'fontWeight',\n    'fontSize',\n    'fontFamily',\n    'fontStyle',\n    'letterSpacing',\n    'textAlign',\n    'unstyled',\n  ]),\n}\n\nexport const Button = ButtonFrame.extractable(\n  themeable(ButtonComponent, ButtonFrame.staticConfig),\n  buttonStaticConfig\n)\n\nexport function useButton(\n  propsIn: ButtonProps,\n  { Text = ButtonText }: { Text: any } = { Text: ButtonText }\n) {\n  // careful not to desctructure and re-order props, order is important\n  const {\n    children,\n    icon,\n    iconAfter,\n    noTextWrap,\n    theme: themeName,\n    space,\n    spaceFlex,\n    scaleIcon = 1,\n    scaleSpace = 0.66,\n    separator,\n\n    // text props\n    color,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    fontStyle,\n    textAlign,\n    unstyled = false,\n    textProps,\n\n    ...rest\n  } = propsIn\n\n  const isNested = isRSC ? false : useContext(ButtonNestingContext)\n  const propsActive = useMediaPropsActive(propsIn)\n  const size = propsActive.size || '$true'\n  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon\n  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })\n  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)\n  const spaceSize = propsActive.space ?? getVariableValue(iconSize) * scaleSpace\n  const contents = wrapChildrenInText(\n    Text,\n    propsActive,\n    Text === ButtonText\n      ? {\n          unstyled,\n        }\n      : undefined\n  )\n  const inner = spacedChildren({\n    // a bit arbitrary but scaling to font size is necessary so long as button does\n    space: spaceSize,\n    spaceFlex,\n    separator,\n    direction:\n      propsActive.flexDirection === 'column' ||\n      propsActive.flexDirection === 'column-reverse'\n        ? 'vertical'\n        : 'horizontal',\n    children: [themedIcon, ...contents, themedIconAfter],\n  })\n\n  // fixes SSR issue + DOM nesting issue of not allowing button in button\n  const tag = isNested\n    ? 'span'\n    : // defaults to <a /> when accessibilityRole = link\n    // see https://github.com/tamagui/tamagui/issues/505\n    propsIn.accessibilityRole === 'link'\n    ? 'a'\n    : undefined\n\n  const props = {\n    ...(propsActive.disabled && {\n      // in rnw - false still has keyboard tabIndex, undefined = not actually focusable\n      focusable: undefined,\n      // even with tabIndex unset, it will keep focusStyle on web so disable it here\n      focusStyle: {\n        borderColor: '$background',\n      },\n    }),\n    tag,\n    ...rest,\n    children: isRSC ? (\n      inner\n    ) : (\n      <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>\n    ),\n  }\n\n  return {\n    spaceSize,\n    isNested,\n    props,\n  }\n}\n"],
-  "mappings": "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",
+  "mappings": "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",
   "names": ["Button"]
 }

package/dist/jsx/Button.test.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Button.test.tsx"],
-  "sourcesContent": ["process.env.TAMAGUI_TARGET = 'web'\n\nimport { getDefaultTamaguiConfig } from '@tamagui/config-default'\nimport { TamaguiProvider, createTamagui } from '@tamagui/core'\nimport { render } from '@testing-library/react'\nimport { describe, expect, test } from 'vitest'\n\nimport { Button } from '.'\n\nconst conf = createTamagui(getDefaultTamaguiConfig())\n\ndescribe('Button', () => {\n  test(`123`, () => {\n    expect(true).toBeTruthy()\n  })\n\n  // test(`Adapts to a when given accessibilityRole=\"link\"`, async () => {\n  //   const { container } = render(\n  //     <TamaguiProvider config={conf} defaultTheme=\"light\">\n  //       <Button href=\"http://google.com\" accessibilityRole=\"link\" />\n  //     </TamaguiProvider>\n  //   )\n\n  //   expect(container.firstChild).toMatchSnapshot()\n  // })\n})\n"],
   "mappings": "AAAA,QAAQ,IAAI,iBAAiB;AAE7B,SAAS,+BAA+B;AACxC,SAA0B,qBAAqB;AAE/C,SAAS,UAAU,QAAQ,YAAY;AAIvC,MAAM,OAAO,cAAc,wBAAwB,CAAC;AAEpD,SAAS,UAAU,MAAM;AACvB,OAAK,OAAO,MAAM;AAChB,WAAO,IAAI,EAAE,WAAW;AAAA,EAC1B,CAAC;AAWH,CAAC;",
   "names": []
 }

package/dist/jsx/Button.test.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Button.test.tsx"],
-  "sourcesContent": ["process.env.TAMAGUI_TARGET = 'web'\n\nimport { getDefaultTamaguiConfig } from '@tamagui/config-default'\nimport { TamaguiProvider, createTamagui } from '@tamagui/core'\nimport { render } from '@testing-library/react'\nimport { describe, expect, test } from 'vitest'\n\nimport { Button } from '.'\n\nconst conf = createTamagui(getDefaultTamaguiConfig())\n\ndescribe('Button', () => {\n  test(`123`, () => {\n    expect(true).toBeTruthy()\n  })\n\n  // test(`Adapts to a when given accessibilityRole=\"link\"`, async () => {\n  //   const { container } = render(\n  //     <TamaguiProvider config={conf} defaultTheme=\"light\">\n  //       <Button href=\"http://google.com\" accessibilityRole=\"link\" />\n  //     </TamaguiProvider>\n  //   )\n\n  //   expect(container.firstChild).toMatchSnapshot()\n  // })\n})\n"],
   "mappings": "AAAA,QAAQ,IAAI,iBAAiB;AAE7B,SAAS,+BAA+B;AACxC,SAA0B,qBAAqB;AAE/C,SAAS,UAAU,QAAQ,YAAY;AAIvC,MAAM,OAAO,cAAc,wBAAwB,CAAC;AAEpD,SAAS,UAAU,MAAM;AACvB,OAAK,OAAO,MAAM;AAChB,WAAO,IAAI,EAAE,WAAW;AAAA,EAC1B,CAAC;AAWH,CAAC;",
   "names": []
 }

package/dist/jsx/index.js.map

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

package/dist/jsx/index.mjs.map

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

package/package.json

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

package/src/Button.tsx

@@ -1,11 +1,14 @@
+import type { Scope } from '@tamagui/create-context'
+import { createContextScope } from '@tamagui/create-context'
 import { getFontSize } from '@tamagui/font-size'
 import { getButtonSized } from '@tamagui/get-button-sized'
-import { useGetThemedIcon } from '@tamagui/helpers-tamagui'
+import { ColorProp, useCurrentColor, useGetThemedIcon } from '@tamagui/helpers-tamagui'
 import { ThemeableStack } from '@tamagui/stacks'
 import { SizableText, TextParentStyles, wrapChildrenInText } from '@tamagui/text'
 import {
   ButtonNestingContext,
   GetProps,
+  SizeTokens,
   TamaguiElement,
   ThemeableProps,
   getVariableValue,
@@ -14,13 +17,23 @@ import {
   styled,
   themeable,
   useMediaPropsActive,
+  useThemeName,
+  withStaticProperties,
 } from '@tamagui/web'
-import { FunctionComponent, forwardRef, useContext } from 'react'
+import {
+  FunctionComponent,
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 
 type ButtonIconProps = { color?: string; size?: number }
 type IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null
 
-export type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &
+type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &
   GetProps<typeof ButtonFrame> &
   ThemeableProps & {
     /**
@@ -51,10 +64,10 @@ export type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &
     unstyled?: boolean
   }
 
-const NAME = 'Button'
+const BUTTON_NAME = 'Button'
 
-export const ButtonFrame = styled(ThemeableStack, {
-  name: NAME,
+const ButtonFrame = styled(ThemeableStack, {
+  name: BUTTON_NAME,
   tag: 'button',
 
   variants: {
@@ -114,8 +127,9 @@ export const ButtonFrame = styled(ThemeableStack, {
   },
 })
 
-export const ButtonText = styled(SizableText, {
-  name: 'ButtonText',
+const BUTTON_TEXT_NAME = 'ButtonText'
+const ButtonTextFrame = styled(SizableText, {
+  name: BUTTON_TEXT_NAME,
 
   variants: {
     unstyled: {
@@ -136,15 +150,82 @@ export const ButtonText = styled(SizableText, {
   },
 })
 
-const ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(function Button(
-  props,
-  ref
-) {
-  const { props: buttonProps } = useButton(props)
-  return <ButtonFrame {...buttonProps} ref={ref} />
-})
+type ScopedProps<P> = P & { __scopeButton?: Scope }
+const [createButtonContext, createButtonScope] = createContextScope('Button')
+
+type ButtonContextValue = {
+  size: SizeTokens
+  color: ColorProp
+
+  // used to keep backward compat with the new Button.Text api
+  hasTextComponent: boolean
+  registerButtonText: () => () => void
+}
+
+const [ButtonProvider, useButtonContext] =
+  createButtonContext<ButtonContextValue>('Button')
+
+const ButtonTextComponent = ButtonTextFrame.extractable(
+  forwardRef<TamaguiElement, ScopedProps<GetProps<typeof ButtonTextFrame>>>(
+    (props, ref) => {
+      const context = useButtonContext(BUTTON_TEXT_NAME, props.__scopeButton)
+
+      useEffect(() => {
+        const unregister = context.registerButtonText()
+        return () => unregister()
+      }, [context.registerButtonText])
+
+      return <ButtonTextFrame size={props.size ?? context.size} {...props} ref={ref} />
+    }
+  )
+)
+
+const BUTTON_ICON_NAME = 'ButtonIcon'
+
+const ButtonIcon = (
+  props: ScopedProps<{
+    children: React.ReactNode
+    scaleIcon?: number
+  }>
+) => {
+  const { children, scaleIcon = 1 } = props
+  const context = useButtonContext(BUTTON_ICON_NAME, props.__scopeButton)
+
+  const size = context.size
+  const color = context.color
 
-export const buttonStaticConfig = {
+  const iconSize = (typeof size === 'number' ? size * 0.5 : getFontSize(size)) * scaleIcon
+  const getThemedIcon = useGetThemedIcon({ size: iconSize, color })
+  return getThemedIcon(children)
+}
+
+const ButtonComponent = forwardRef<TamaguiElement, ScopedProps<ButtonProps>>(
+  function Button(props, ref) {
+    const { props: buttonProps } = useButton(props)
+    const [buttonTextCount, setButtonTextCount] = useState(0)
+
+    const registerButtonText = useCallback(() => {
+      setButtonTextCount((prev) => prev + 1)
+      return () => setButtonTextCount((prev) => prev - 1)
+    }, [setButtonTextCount])
+
+    const hasTextComponent = buttonTextCount > 0
+
+    return (
+      <ButtonProvider
+        scope={props.__scopeButton}
+        color={props.color}
+        hasTextComponent={hasTextComponent}
+        size={props.size ?? '$true'}
+        registerButtonText={registerButtonText}
+      >
+        <ButtonFrame {...(hasTextComponent ? props : buttonProps)} ref={ref} />
+      </ButtonProvider>
+    )
+  }
+)
+
+const buttonStaticConfig = {
   inlineProps: new Set([
     // text props go here (can't really optimize them, but we never fully extract button anyway)
     // may be able to remove this entirely, as the compiler / runtime have gotten better
@@ -159,14 +240,20 @@ export const buttonStaticConfig = {
   ]),
 }
 
-export const Button = ButtonFrame.extractable(
-  themeable(ButtonComponent, ButtonFrame.staticConfig),
-  buttonStaticConfig
+const Button = withStaticProperties(
+  ButtonFrame.extractable(
+    themeable(ButtonComponent, ButtonFrame.staticConfig),
+    buttonStaticConfig
+  ),
+  {
+    Text: ButtonTextComponent,
+    Icon: ButtonIcon,
+  }
 )
 
-export function useButton(
+function useButton(
   propsIn: ButtonProps,
-  { Text = ButtonText }: { Text: any } = { Text: ButtonText }
+  { Text = ButtonTextFrame }: { Text: any } = { Text: ButtonTextFrame }
 ) {
   // careful not to desctructure and re-order props, order is important
   const {
@@ -205,7 +292,7 @@ export function useButton(
   const contents = wrapChildrenInText(
     Text,
     propsActive,
-    Text === ButtonText
+    Text === ButtonTextFrame
       ? {
           unstyled,
         }
@@ -242,6 +329,7 @@ export function useButton(
         borderColor: '$background',
       },
     }),
+    unstyled,
     tag,
     ...rest,
     children: isRSC ? (
@@ -257,3 +345,16 @@ export function useButton(
     props,
   }
 }
+
+export {
+  createButtonScope,
+  Button,
+
+  // legacy api
+  useButton,
+  buttonStaticConfig,
+  ButtonFrame,
+  ButtonTextFrame as ButtonText,
+}
+
+export type { ButtonProps }