@tamagui/button 1.27.1 → 1.27.3

package/package.json

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

package/dist/esm/Button.mjs

@@ -1,237 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-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 { ThemeableStack } from "@tamagui/stacks";
-import { SizableText, wrapChildrenInText } from "@tamagui/text";
-import {
-  ButtonNestingContext,
-  getVariableValue,
-  isRSC,
-  spacedChildren,
-  styled,
-  useProps,
-  withStaticProperties
-} from "@tamagui/web";
-import {
-  forwardRef,
-  useCallback,
-  useContext,
-  useEffect,
-  useState
-} from "react";
-const BUTTON_NAME = "Button";
-const ButtonFrame = styled(ThemeableStack, {
-  name: BUTTON_NAME,
-  tag: "button",
-  focusable: true,
-  variants: {
-    unstyled: {
-      false: {
-        size: "$true",
-        justifyContent: "center",
-        alignItems: "center",
-        flexWrap: "nowrap",
-        flexDirection: "row",
-        cursor: "pointer",
-        hoverTheme: true,
-        pressTheme: true,
-        backgrounded: true,
-        borderWidth: 1,
-        borderColor: "transparent",
-        pressStyle: {
-          borderColor: "transparent"
-        },
-        hoverStyle: {
-          borderColor: "transparent"
-        },
-        focusStyle: {
-          borderColor: "$borderColorFocus",
-          outlineColor: "$borderColorFocus",
-          outlineStyle: "solid",
-          outlineWidth: 2
-        }
-      }
-    },
-    size: {
-      "...size": getButtonSized
-    },
-    active: {
-      true: {
-        hoverStyle: {
-          backgroundColor: "$background"
-        }
-      }
-    },
-    disabled: {
-      true: {
-        pointerEvents: "none"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: false
-  }
-});
-const BUTTON_TEXT_NAME = "ButtonText";
-const ButtonTextFrame = styled(SizableText, {
-  name: BUTTON_TEXT_NAME,
-  variants: {
-    unstyled: {
-      false: {
-        userSelect: "none",
-        cursor: "pointer",
-        // flexGrow 1 leads to inconsistent native style where text pushes to start of view
-        flexGrow: 0,
-        flexShrink: 1,
-        ellipse: true,
-        color: "$color"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: false
-  }
-});
-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 /* @__PURE__ */ jsx(ButtonTextFrame, { size: props.size ?? context.size, ...props, 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 = ButtonFrame.styleable(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 /* @__PURE__ */ jsx(
-    ButtonProvider,
-    {
-      scope: props.__scopeButton,
-      color: props.color,
-      hasTextComponent,
-      size: props.size ?? "$true",
-      registerButtonText,
-      children: /* @__PURE__ */ jsx(ButtonFrame, { ...hasTextComponent ? props : buttonProps, ref })
-    }
-  );
-});
-const buttonStaticConfig = {
-  inlineProps: /* @__PURE__ */ new Set([
-    // text props go here (can't really optimize them, but we never fully extract button anyway)
-    // may be able to remove this entirely, as the compiler / runtime have gotten better
-    "color",
-    "fontWeight",
-    "fontSize",
-    "fontFamily",
-    "fontStyle",
-    "letterSpacing",
-    "textAlign",
-    "unstyled"
-  ])
-};
-const Button2 = withStaticProperties(ButtonComponent, {
-  Text: ButtonTextComponent,
-  Icon: ButtonIcon
-});
-function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame }) {
-  const {
-    children,
-    icon,
-    iconAfter,
-    noTextWrap,
-    theme: themeName,
-    space,
-    spaceFlex,
-    scaleIcon = 1,
-    scaleSpace = 0.66,
-    separator,
-    // text props
-    color,
-    fontWeight,
-    letterSpacing,
-    fontSize,
-    fontFamily,
-    fontStyle,
-    textAlign,
-    textProps,
-    ...rest
-  } = propsIn;
-  const hasUnstyled = typeof propsIn.unstyled !== "undefined";
-  const isNested = isRSC ? false : useContext(ButtonNestingContext);
-  const propsActive = useProps(propsIn);
-  const size = propsActive.size || "$true";
-  const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
-  const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
-  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
-  const spaceSize = propsActive.space ?? getVariableValue(iconSize) * scaleSpace;
-  const contents = wrapChildrenInText(
-    Text,
-    propsActive,
-    Text === ButtonTextFrame && hasUnstyled ? {
-      unstyled: propsIn.unstyled
-    } : void 0
-  );
-  const inner = spacedChildren({
-    // a bit arbitrary but scaling to font size is necessary so long as button does
-    space: spaceSize,
-    spaceFlex,
-    separator,
-    direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
-    children: [themedIcon, ...contents, themedIconAfter]
-  });
-  const tag = isNested ? "span" : (
-    // defaults to <a /> when accessibilityRole = link
-    // see https://github.com/tamagui/tamagui/issues/505
-    propsIn.accessibilityRole === "link" ? "a" : void 0
-  );
-  const props = {
-    ...propsActive.disabled && {
-      // in rnw - false still has keyboard tabIndex, undefined = not actually focusable
-      focusable: void 0,
-      // even with tabIndex unset, it will keep focusStyle on web so disable it here
-      focusStyle: {
-        borderColor: "$background"
-      }
-    },
-    tag,
-    ...rest,
-    children: isRSC ? inner : /* @__PURE__ */ jsx(ButtonNestingContext.Provider, { value: true, children: inner })
-  };
-  return {
-    spaceSize,
-    isNested,
-    props
-  };
-}
-export {
-  Button2 as Button,
-  ButtonFrame,
-  ButtonTextFrame as ButtonText,
-  buttonStaticConfig,
-  createButtonScope,
-  useButton
-};
-//# sourceMappingURL=Button.mjs.map

package/dist/esm/Button.test.mjs

@@ -1,11 +0,0 @@
-process.env.TAMAGUI_TARGET = "web";
-import { getDefaultTamaguiConfig } from "@tamagui/config-default";
-import { createTamagui } from "@tamagui/core";
-import { describe, expect, test } from "vitest";
-const conf = createTamagui(getDefaultTamaguiConfig());
-describe("Button", () => {
-  test(`123`, () => {
-    expect(true).toBeTruthy();
-  });
-});
-//# sourceMappingURL=Button.test.mjs.map

package/dist/esm/index.mjs

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

package/dist/jsx/base.mjs

@@ -1,5 +0,0 @@
-import { Button } from "./Button";
-export {
-  Button
-};
-//# sourceMappingURL=base.mjs.map

package/dist/jsx/themed.mjs

@@ -1,232 +0,0 @@
-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 { wrapChildrenInText } from "@tamagui/text";
-import {
-  ButtonNestingContext,
-  getConfig,
-  getVariableValue,
-  isRSC,
-  spacedChildren,
-  styled,
-  useMediaPropsActive,
-  withStaticProperties
-} from "@tamagui/web";
-import { useCallback, useContext, useEffect, useState } from "react";
-import {
-  BUTTON_ICON_NAME,
-  BUTTON_NAME,
-  BUTTON_TEXT_NAME,
-  Button as BaseButton
-} from "./Button";
-const ButtonFrame = styled(BaseButton, {
-  name: BUTTON_NAME,
-  variants: {
-    unstyled: {
-      false: {
-        size: "$true",
-        justifyContent: "center",
-        alignItems: "center",
-        flexWrap: "nowrap",
-        flexDirection: "row",
-        cursor: "pointer",
-        hoverTheme: true,
-        pressTheme: true,
-        backgrounded: true,
-        borderWidth: 1,
-        borderColor: "$borderColor",
-        pressStyle: {
-          borderColor: "$borderColorPress"
-        },
-        focusStyle: {
-          outlineColor: "$borderColorFocus",
-          outlineStyle: "solid",
-          outlineWidth: 2
-        }
-      }
-    },
-    size: {
-      "...size": getButtonSized
-    },
-    active: {
-      true: {
-        hoverStyle: {
-          backgroundColor: "$background"
-        }
-      }
-    },
-    disabled: {
-      true: {
-        pointerEvents: "none"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: false
-  }
-});
-const [createButtonContext, createButtonScope] = createContextScope(BUTTON_NAME);
-const [ButtonProvider, useButtonContext] = createButtonContext("Button");
-const ButtonTextFrame = styled(BaseButton.Text, {
-  name: BUTTON_TEXT_NAME,
-  variants: {
-    unstyled: {
-      false: {
-        userSelect: "none",
-        cursor: "pointer",
-        // flexGrow 1 leads to inconsistent native style where text pushes to start of view
-        flexGrow: 0,
-        flexShrink: 1,
-        ellipse: true,
-        color: "$color"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: false
-  }
-});
-const ButtonText = ButtonTextFrame.styleable(
-  (props, ref) => {
-    const context = useButtonContext(BUTTON_TEXT_NAME, props.__scopeButton);
-    useEffect(() => {
-      const unregister = context.registerButtonText();
-      return () => unregister();
-    }, [context.registerButtonText]);
-    return <ButtonTextFrame ref={ref} color={context.color} size={context.size} {...props}>{props.children}</ButtonTextFrame>;
-  }
-);
-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 = ButtonFrame.styleable(
-  (props, ref) => {
-    const buttonApi = props.forceButtonApi ?? getConfig().buttonApi ?? "mixed";
-    const { props: buttonProps } = useButton(props);
-    const [buttonTextCount, setButtonTextCount] = useState(0);
-    const registerButtonText = useCallback(() => {
-      if (buttonApi === "simple") {
-        console.warn(
-          "You are using Button.Text with simple button API. Either remove Button.Text or use either `buttonApi: composable` or `mixed` in your tamagui config."
-        );
-      }
-      if (buttonApi === "composable")
-        return () => {
-        };
-      setButtonTextCount((prev) => prev + 1);
-      return () => setButtonTextCount((prev) => prev - 1);
-    }, [setButtonTextCount]);
-    const usesComposableApi = buttonApi === "composable" || buttonApi === "mixed" && buttonTextCount > 0;
-    return <ButtonProvider
-      scope={props.__scopeButton}
-      size={props.size ?? "$true"}
-      color={props.color}
-      usesComposableApi={usesComposableApi}
-      registerButtonText={registerButtonText}
-    ><ButtonFrame unstyled={props.unstyled ?? false} ref={ref} {...buttonProps} /></ButtonProvider>;
-  }
-);
-const Button = withStaticProperties(ButtonComponent, {
-  Text: ButtonText,
-  Icon: ButtonIcon
-});
-function useButton(propsIn, { Text = ButtonTextFrame } = { Text: ButtonTextFrame }) {
-  const {
-    children,
-    icon,
-    iconAfter,
-    noTextWrap,
-    theme: themeName,
-    space,
-    spaceFlex,
-    scaleIcon = 1,
-    scaleSpace = 0.66,
-    separator,
-    // text props
-    color,
-    fontWeight,
-    letterSpacing,
-    fontSize,
-    fontFamily,
-    fontStyle,
-    textAlign,
-    unstyled = false,
-    textProps,
-    ...rest
-  } = propsIn;
-  const isNested = isRSC ? false : useContext(ButtonNestingContext);
-  const propsActive = useMediaPropsActive(propsIn);
-  const size = propsActive.size || "$true";
-  const iconSize = (typeof size === "number" ? size * 0.5 : getFontSize(size)) * scaleIcon;
-  const getThemedIcon = useGetThemedIcon({ size: iconSize, color });
-  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon);
-  const spaceSize = propsActive.space ?? getVariableValue(iconSize) * scaleSpace;
-  const contents = wrapChildrenInText(
-    Text,
-    propsActive,
-    Text === ButtonTextFrame ? {
-      unstyled
-    } : void 0
-  );
-  const inner = spacedChildren({
-    // a bit arbitrary but scaling to font size is necessary so long as button does
-    space: spaceSize,
-    spaceFlex,
-    separator,
-    direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
-    children: [themedIcon, ...contents, themedIconAfter]
-  });
-  const tag = isNested ? "span" : (
-    // defaults to <a /> when accessibilityRole = link
-    // see https://github.com/tamagui/tamagui/issues/505
-    propsIn.accessibilityRole === "link" ? "a" : void 0
-  );
-  const props = {
-    ...propsActive.disabled && {
-      // in rnw - false still has keyboard tabIndex, undefined = not actually focusable
-      focusable: void 0,
-      // even with tabIndex unset, it will keep focusStyle on web so disable it here
-      focusStyle: {
-        borderColor: "$background"
-      }
-    },
-    tag,
-    ...rest,
-    children: isRSC ? inner : <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>
-  };
-  return {
-    spaceSize,
-    isNested,
-    props
-  };
-}
-const buttonStaticConfig = {
-  inlineProps: /* @__PURE__ */ new Set([
-    // text props go here (can't really optimize them, but we never fully extract button anyway)
-    // may be able to remove this entirely, as the compiler / runtime have gotten better
-    "color",
-    "fontWeight",
-    "fontSize",
-    "fontFamily",
-    "fontStyle",
-    "letterSpacing",
-    "textAlign",
-    "unstyled"
-  ])
-};
-export {
-  Button,
-  ButtonFrame,
-  ButtonTextFrame as ButtonText,
-  buttonStaticConfig,
-  createButtonScope,
-  useButton
-};
-//# sourceMappingURL=themed.mjs.map