@tamagui/button 2.7.7 → 3.0.0-beta.643.1

package/dist/jsx/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"file":"index.native.js","names":[],"sources":["jsx/index.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, \"default\"), secondTarget && __copyProps(secondTarget, mod, \"default\"));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar index_exports = {};\nmodule.exports = __toCommonJS(index_exports);\n__reExport(index_exports, require(\"./Button\"), module.exports);\n//# sourceMappingURL=index.js.map\n"],"mappings":";;;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,cAAc,QAAQ,KAAK,kBAAkB,YAAY,QAAQ,KAAK,SAAS,GAAG,gBAAgB,YAAY,cAAc,KAAK,SAAS;AAC9I,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,gBAAgB,CAAC;AACrB,OAAO,UAAU,aAAa,aAAa;AAC3C,WAAW,eAAe,QAAQ,oBAAU,GAAG,OAAO,OAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/button",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.643.1",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "source": "src/index.ts",
   "files": [
@@ -35,19 +35,18 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/config-default": "2.7.7",
-    "@tamagui/core": "2.7.7",
-    "@tamagui/get-button-sized": "2.7.7",
-    "@tamagui/helpers": "2.7.7",
-    "@tamagui/helpers-tamagui": "2.7.7",
-    "@tamagui/spacer": "2.7.7",
-    "@tamagui/stacks": "2.7.7",
-    "@tamagui/text": "2.7.7",
-    "@tamagui/font-size": "2.7.7",
-    "@tamagui/web": "2.7.7"
+    "@tamagui/config-default": "3.0.0-beta.643.1",
+    "@tamagui/core": "3.0.0-beta.643.1",
+    "@tamagui/helpers": "3.0.0-beta.643.1",
+    "@tamagui/helpers-tamagui": "3.0.0-beta.643.1",
+    "@tamagui/spacer": "3.0.0-beta.643.1",
+    "@tamagui/stacks": "3.0.0-beta.643.1",
+    "@tamagui/text": "3.0.0-beta.643.1",
+    "@tamagui/font-size": "3.0.0-beta.643.1",
+    "@tamagui/web": "3.0.0-beta.643.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
+    "@tamagui/build": "3.0.0-beta.643.1",
     "react": ">=19",
     "vitest": "4.0.4"
   },

package/src/Button.tsx

@@ -1,224 +1,109 @@
-import { getFontSize } from '@tamagui/font-size'
-import { getButtonSized } from '@tamagui/get-button-sized'
-import { getIcon, useCurrentColor } from '@tamagui/helpers-tamagui'
-import { ButtonNestingContext, getElevation, themeableVariants } from '@tamagui/stacks'
+import { useGetThemedIcon } from '@tamagui/helpers-tamagui'
+import { ButtonNestingContext } from '@tamagui/stacks'
 import type { TextContextStyles, TextParentStyles } from '@tamagui/text'
-import { SizableText, wrapChildrenInText } from '@tamagui/text'
-import type { GetProps, SizeTokens, Token } from '@tamagui/web'
+import { wrapChildrenInText } from '@tamagui/text'
+import type { GetProps } from '@tamagui/web'
 import {
   createStyledContext,
-  getTokenValue,
+  createStyledHOC,
   styled,
+  Text,
   useProps,
   View,
   withStaticProperties,
 } from '@tamagui/web'
-import type { FunctionComponent, JSX } from 'react'
+import type { FunctionComponent, JSX, ReactNode } from 'react'
 import { useContext } from 'react'
 
-type ButtonVariant = 'outlined'
-
-type ButtonContextStyles = TextContextStyles & {
-  size?: SizeTokens
-  variant?: ButtonVariant
-  elevation?: SizeTokens | number
-}
-
-const context = createStyledContext<ButtonContextStyles>({
-  size: undefined,
-  variant: undefined,
-  color: undefined,
-  elevation: undefined,
-  ellipsis: undefined,
-  fontFamily: undefined,
-  fontSize: undefined,
-  fontStyle: undefined,
-  fontWeight: undefined,
-  letterSpacing: undefined,
-  maxFontSizeMultiplier: undefined,
-  textAlign: undefined,
-})
+const buttonContextKeys = [
+  'color',
+  'ellipsis',
+  'fontFamily',
+  'fontSize',
+  'fontStyle',
+  'fontWeight',
+  'letterSpacing',
+  'maxFontSizeMultiplier',
+  'textAlign',
+] as const
+
+export const ButtonContext = createStyledContext<
+  TextContextStyles,
+  (typeof buttonContextKeys)[number]
+>(
+  {
+    color: undefined,
+    ellipsis: undefined,
+    fontFamily: undefined,
+    fontSize: undefined,
+    fontStyle: undefined,
+    fontWeight: undefined,
+    letterSpacing: undefined,
+    maxFontSizeMultiplier: undefined,
+    textAlign: undefined,
+  },
+  {
+    keys: buttonContextKeys,
+  }
+)
 
-const Frame = styled(View, {
-  context,
-  name: 'Button',
+export const ButtonFrame = styled(View, {
+  context: ButtonContext,
+  displayName: 'ButtonFrame',
   role: 'button',
   render: <button type="button" />,
   tabIndex: 0,
+  alignItems: 'center',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  justifyContent: 'center',
 
   variants: {
-    unstyled: {
-      true: {
-        // reset browser <button> defaults
-        outlineWidth: 0,
-        borderWidth: 0,
-        backgroundColor: 'transparent',
-      },
-      false: {
-        size: '$true',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexWrap: 'nowrap',
-        flexDirection: 'row',
-        backgroundColor: '$background',
-        borderWidth: 1,
-        borderColor: 'transparent',
-
-        '$platform-web': {
-          cursor: 'pointer',
-        },
-
-        hoverStyle: {
-          backgroundColor: '$backgroundHover',
-          borderColor: '$borderColorHover',
-        },
-
-        pressStyle: {
-          backgroundColor: '$backgroundPress',
-          borderColor: '$borderColorHover',
-        },
-
-        focusVisibleStyle: {
-          outlineColor: '$outlineColor',
-          outlineStyle: 'solid',
-          outlineWidth: 2,
-        },
-      },
-    },
-
-    variant: {
-      outlined:
-        process.env.TAMAGUI_HEADLESS === '1'
-          ? {}
-          : {
-              backgroundColor: 'transparent',
-              borderWidth: 1,
-              borderColor: '$borderColor',
-
-              hoverStyle: {
-                backgroundColor: 'transparent',
-                borderColor: '$borderColorHover',
-              },
-
-              pressStyle: {
-                backgroundColor: 'transparent',
-                borderColor: '$borderColorPress',
-              },
-            },
-    },
-
-    circular: themeableVariants.circular,
-
-    chromeless: themeableVariants.chromeless,
-
-    size: {
-      '...size': (val, extras) => {
-        const buttonStyle = getButtonSized(val, extras)
-        const gap = getTokenValue(val as Token)
-        return {
-          ...buttonStyle,
-          gap,
-        }
-      },
-      ':number': (val, extras) => {
-        const buttonStyle = getButtonSized(val, extras)
-        const gap = val * 0.4
-        return {
-          ...buttonStyle,
-          gap,
-        }
-      },
-    },
-
-    elevation: {
-      '...size': getElevation,
-      ':number': getElevation,
-    },
-
     disabled: {
       true: {
         pointerEvents: 'none',
-        // @ts-ignore
-        'aria-disabled': true,
       },
     },
   } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
 })
 
-const Text = styled(SizableText, {
-  context,
-
-  variants: {
-    unstyled: {
-      false: {
-        userSelect: 'none',
-        // flexGrow 1 leads to inconsistent native style where text pushes to start of view
-        flexGrow: 0,
-        flexShrink: 1,
-        ellipsis: true,
-        color: '$color',
-
-        '$platform-web': {
-          cursor: 'pointer',
-        },
-      },
-    },
-  } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
+export const ButtonText = styled(Text, {
+  context: ButtonContext,
+  displayName: 'ButtonText',
+  // flexGrow 1 pushes text to the start of its parent on native
+  flexGrow: 0,
+  flexShrink: 1,
 })
 
-const Icon = (props: {
-  children: React.ReactNode
+export type ButtonIconProps = {
+  children: ReactNode
+  color?: TextContextStyles['color']
   scaleIcon?: number
-  size?: SizeTokens
-}) => {
-  const { children, scaleIcon = 1, size } = props
-  const styledContext = context.useStyledContext()
-  if (!styledContext) {
-    throw new Error('Button.Icon must be used within a Button')
-  }
-
-  const sizeToken = size ?? styledContext.size
-  const iconColorProp =
-    styledContext.color === 'unset' || typeof styledContext.color === 'number'
-      ? undefined
-      : styledContext.color
-  const iconColor = useCurrentColor(iconColorProp)
-
-  const iconSize =
-    (typeof sizeToken === 'number' ? sizeToken * 0.5 : getFontSize(sizeToken as Token)) *
-    scaleIcon
+  size?: number
+}
 
-  return getIcon(children, {
-    size: iconSize,
-    color: iconColor,
+export const ButtonIcon = ({ children, color, scaleIcon = 1, size }: ButtonIconProps) => {
+  const styledContext = ButtonContext.useStyledContext()
+  const iconColor = color ?? styledContext?.color
+  const getThemedIcon = useGetThemedIcon({
+    color: iconColor === 'unset' || typeof iconColor === 'number' ? undefined : iconColor,
+    size: size === undefined ? undefined : size * scaleIcon,
   })
-}
 
-export const ButtonContext = createStyledContext<{
-  size?: SizeTokens
-  variant?: ButtonVariant
-  color?: ButtonContextStyles['color']
-}>({
-  size: undefined,
-  variant: undefined,
-  color: undefined,
-})
+  return getThemedIcon(children)
+}
 
-type IconProp = JSX.Element | FunctionComponent<{ color?: any; size?: any }> | null
+type ButtonIconInput =
+  | JSX.Element
+  | FunctionComponent<{ color?: any; size?: any }>
+  | ((props: { color?: any; size?: any }) => ReactNode)
+  | null
 
-type ButtonExtraProps = TextParentStyles & {
-  icon?: IconProp
-  iconAfter?: IconProp
+export type ButtonBehaviorProps = TextParentStyles & {
+  icon?: ButtonIconInput
+  iconAfter?: ButtonIconInput
+  iconSize?: number
   scaleIcon?: number
-  iconSize?: SizeTokens
 
   // native button html props
   type?: 'submit' | 'reset' | 'button'
@@ -232,132 +117,189 @@ type ButtonExtraProps = TextParentStyles & {
   value?: string | readonly string[] | number
 }
 
-const ButtonComponent = Frame.styleable<ButtonExtraProps>((propsIn, ref) => {
-  const isNested = useContext(ButtonNestingContext)
+export type UseButtonOptions = {
+  Text?: any
+  iconColor?: TextContextStyles['color']
+  iconSize?: number
+  textProps?: Record<string, unknown>
+}
 
-  // Process props through useProps to expand shorthands (like br -> borderRadius)
+const buttonInternalPropNames = [
+  'children',
+  'color',
+  'disabled',
+  'ellipsis',
+  'fontFamily',
+  'fontSize',
+  'fontStyle',
+  'fontWeight',
+  'icon',
+  'iconAfter',
+  'iconSize',
+  'letterSpacing',
+  'maxFontSizeMultiplier',
+  'noTextWrap',
+  'render',
+  'scaleIcon',
+  'textAlign',
+  'textProps',
+] as const
+
+export function useButton<Props extends ButtonBehaviorProps>(
+  propsIn: Props,
+  {
+    Text = ButtonText,
+    iconColor: iconColorOption,
+    iconSize: iconSizeOption,
+    textProps: textPropsOption,
+  }: UseButtonOptions = {}
+) {
+  const isNested = useContext(ButtonNestingContext)
+  const styledContext = ButtonContext.useStyledContext()
   const processedProps = useProps(propsIn, {
     noNormalize: true,
     noExpand: true,
-  })
+  }) as Props & {
+    accessibilityRole?: string
+    children?: ReactNode
+    color?: TextContextStyles['color']
+    disabled?: boolean
+    render?: unknown
+    role?: string
+    size?: unknown
+  }
 
   const {
     children,
-    iconSize,
-    icon,
-    iconAfter,
-    scaleIcon = 1,
-    noTextWrap,
-    textProps,
     color,
+    disabled,
     ellipsis,
     fontFamily,
     fontSize,
     fontStyle,
     fontWeight,
+    icon,
+    iconAfter,
+    iconSize,
     letterSpacing,
     maxFontSizeMultiplier,
+    noTextWrap,
+    render,
+    scaleIcon = 1,
     textAlign,
-    ...props
+    textProps,
   } = processedProps
 
-  const size = propsIn.size || (propsIn.unstyled ? undefined : '$true')
-
-  const styledContext = context.useStyledContext()
-  const contextColor = color ?? propsIn.color ?? styledContext?.color
-  const iconColorProp =
-    contextColor === 'unset' || typeof contextColor === 'number'
-      ? undefined
-      : contextColor
-  const iconColor = useCurrentColor(iconColorProp)
-  const finalSize = iconSize ?? size ?? styledContext?.size
-  const iconSizeNumber =
-    (typeof finalSize === 'number' ? finalSize * 0.5 : getFontSize(finalSize as Token)) *
-    scaleIcon
+  // useProps resolves styles for the component running the hook. This behavior
+  // HOC renders a styled frame, so its frame styles must keep the raw flat
+  // programs for the frame's own hover/press/focus state and merge pass.
+  const frameProps = { ...propsIn }
+  for (const key of buttonInternalPropNames) {
+    delete (frameProps as Record<string, any>)[key]
+  }
 
-  const [themedIcon, themedIconAfter] = [icon, iconAfter].map((icon) => {
-    if (!icon) return null
-    return getIcon(icon, {
-      size: iconSizeNumber,
-      color: iconColor,
-      // No marginLeft or marginRight needed - spacing is handled by the gap property in Frame's size variants
-    })
+  const contextColor = color ?? styledContext?.color
+  const iconColor = iconColorOption ?? contextColor
+  const resolvedIconSize = iconSize ?? iconSizeOption
+  const getThemedIcon = useGetThemedIcon({
+    color: iconColor === 'unset' || typeof iconColor === 'number' ? undefined : iconColor,
+    size: resolvedIconSize === undefined ? undefined : resolvedIconSize * scaleIcon,
+  })
+  const [themedIcon, themedIconAfter] = [icon, iconAfter].map((item) => {
+    return item ? getThemedIcon(item) : null
   })
 
+  const textContext: TextContextStyles = {
+    color: contextColor,
+    ellipsis: ellipsis ?? styledContext?.ellipsis,
+    fontFamily: fontFamily ?? styledContext?.fontFamily,
+    fontSize: fontSize ?? styledContext?.fontSize,
+    fontStyle: fontStyle ?? styledContext?.fontStyle,
+    fontWeight: fontWeight ?? styledContext?.fontWeight,
+    letterSpacing: letterSpacing ?? styledContext?.letterSpacing,
+    maxFontSizeMultiplier: maxFontSizeMultiplier ?? styledContext?.maxFontSizeMultiplier,
+    textAlign: textAlign ?? styledContext?.textAlign,
+  }
   const wrappedChildren = wrapChildrenInText(
     Text,
     {
       children,
-      color: contextColor,
-      ellipsis: ellipsis ?? propsIn.ellipsis ?? styledContext?.ellipsis,
-      fontFamily: fontFamily ?? propsIn.fontFamily ?? styledContext?.fontFamily,
-      fontSize: fontSize ?? propsIn.fontSize ?? styledContext?.fontSize,
-      fontStyle: fontStyle ?? propsIn.fontStyle ?? styledContext?.fontStyle,
-      fontWeight: fontWeight ?? propsIn.fontWeight ?? styledContext?.fontWeight,
-      letterSpacing:
-        letterSpacing ?? propsIn.letterSpacing ?? styledContext?.letterSpacing,
-      maxFontSizeMultiplier:
-        maxFontSizeMultiplier ??
-        propsIn.maxFontSizeMultiplier ??
-        styledContext?.maxFontSizeMultiplier,
-      noTextWrap: noTextWrap ?? propsIn.noTextWrap,
-      textAlign: textAlign ?? propsIn.textAlign ?? styledContext?.textAlign,
-      textProps: textProps ?? propsIn.textProps,
+      ...textContext,
+      noTextWrap,
+      textProps,
     },
     {
-      unstyled: process.env.TAMAGUI_HEADLESS === '1',
-      size: finalSize ?? styledContext?.size,
+      ...textPropsOption,
+      ...(processedProps.size === undefined ? null : { size: processedProps.size }),
     }
   )
-
-  const textContext: TextContextStyles = {
-    color: contextColor,
-    ellipsis: ellipsis ?? propsIn.ellipsis ?? styledContext?.ellipsis,
-    fontFamily: fontFamily ?? propsIn.fontFamily ?? styledContext?.fontFamily,
-    fontSize: fontSize ?? propsIn.fontSize ?? styledContext?.fontSize,
-    fontStyle: fontStyle ?? propsIn.fontStyle ?? styledContext?.fontStyle,
-    fontWeight: fontWeight ?? propsIn.fontWeight ?? styledContext?.fontWeight,
-    letterSpacing: letterSpacing ?? propsIn.letterSpacing ?? styledContext?.letterSpacing,
-    maxFontSizeMultiplier:
-      maxFontSizeMultiplier ??
-      propsIn.maxFontSizeMultiplier ??
-      styledContext?.maxFontSizeMultiplier,
-    textAlign: textAlign ?? propsIn.textAlign ?? styledContext?.textAlign,
-  }
-
-  const buttonContext: ButtonContextStyles = {
-    ...styledContext,
-    ...textContext,
-    size: props.size ?? propsIn.size ?? styledContext?.size,
-    variant: props.variant ?? propsIn.variant ?? styledContext?.variant,
-    elevation: props.elevation ?? propsIn.elevation ?? styledContext?.elevation,
-  }
-
-  return (
-    <ButtonNestingContext.Provider value={true}>
-      <context.Provider {...buttonContext}>
-        <Frame
-          ref={ref}
-          {...props}
-          {...(isNested && { render: 'span' })}
-          // pass resolved size to circular variant when no explicit size provided
-          {...(props.circular && !propsIn.size && { size })}
-          tabIndex={0}
-        >
+  const resolvedRender =
+    render ??
+    (isNested ? (
+      'span'
+    ) : processedProps.accessibilityRole === 'link' || processedProps.role === 'link' ? (
+      'a'
+    ) : disabled ? (
+      <button type="button" disabled />
+    ) : undefined)
+
+  const props = {
+    ...frameProps,
+    ...(disabled && {
+      'aria-disabled': true,
+      disabled: true,
+      tabIndex: -1,
+    }),
+    ...(resolvedRender === undefined ? null : { render: resolvedRender }),
+    ...(isNested && {
+      // a nested Button is a presentation part, not a control: strip the
+      // interactive semantics so we never place a focusable role=button (with
+      // its own press/keyboard handlers) inside the outer native <button>. that
+      // nesting is invalid html, adds an extra focus stop, and bubbles
+      // activation to the outer control. resolvedRender already makes it a span.
+      role: 'none',
+      tabIndex: -1,
+      'aria-disabled': undefined,
+      disabled: undefined,
+      onPress: undefined,
+      onPressIn: undefined,
+      onPressOut: undefined,
+      onLongPress: undefined,
+      onClick: undefined,
+      onKeyDown: undefined,
+      onKeyUp: undefined,
+    }),
+    children: (
+      <ButtonNestingContext.Provider value={true}>
+        <ButtonContext.Provider {...textContext}>
           {themedIcon}
           {wrappedChildren}
           {themedIconAfter}
-        </Frame>
-      </context.Provider>
-    </ButtonNestingContext.Provider>
-  )
-})
+        </ButtonContext.Provider>
+      </ButtonNestingContext.Provider>
+    ),
+  } as Props
+
+  return {
+    isNested,
+    props,
+  }
+}
+
+const ButtonComponent = createStyledHOC(
+  ButtonFrame,
+  function Button(props: ButtonBehaviorProps, ref) {
+    const { props: buttonProps } = useButton(props)
+
+    return <ButtonFrame ref={ref} {...buttonProps} />
+  }
+)
 
 export const Button = withStaticProperties(ButtonComponent, {
-  Apply: context.Provider,
-  Frame,
-  Text,
-  Icon,
+  Apply: ButtonContext.Provider,
+  Frame: ButtonFrame,
+  Icon: ButtonIcon,
+  Text: ButtonText,
 })
 
 export type ButtonProps = GetProps<typeof ButtonComponent>