@tamagui/web 2.7.7 → 3.0.0-beta.1097.1

package/src/helpers/themeable.tsx

@@ -1,104 +0,0 @@
-import React from 'react'
-
-import type { StaticConfig, ThemeableProps, ThemeProps } from '../types'
-import { Theme } from '../views/Theme'
-import { getDefaultProps } from './getDefaultProps'
-
-export function themeable<ComponentType extends (props: any) => any>(
-  Component: ComponentType,
-  staticConfig: Partial<StaticConfig>,
-  optimize = false
-) {
-  const withThemeComponent = React.forwardRef(function WithTheme(
-    props: ThemeableProps,
-    ref
-  ) {
-    'use no memo'
-
-    const userDefaults = getDefaultProps(staticConfig, props.componentName)
-    const defaultTheme = userDefaults?.theme
-    const defaultResetTheme = userDefaults?.themeReset
-    const { theme, componentName, themeReset, ...rest } = props
-
-    let overriddenContextProps: object | undefined
-    const context = staticConfig?.context
-    if (context) {
-      for (const key in context.props) {
-        const val = props[key]
-        if (val !== undefined) {
-          overriddenContextProps = overriddenContextProps || {}
-          overriddenContextProps[key] = val
-        }
-      }
-    }
-
-    const element = (
-      // @ts-expect-error its ok
-      <Component ref={ref} {...rest} data-disable-theme />
-    )
-
-    // we filter out the props here, why?
-    // Theme internally avoids wrapping <span /> unless 'theme' in props
-    // reason for this is to avoid wrapping every single component with span
-    // *if* ever it themes once, it leaves the span, to avoid reparenting
-    // its expected if users want to avoid re-parenting, they keep the theme prop
-    // and just set it to null. but we need to "respect" that here by filtering
-    // one example of a bug caused by not doing this is in <Select native> on web
-    // where it renders to an <option />, and then Theme would wrap a <span /> in that
-    // which is not allowed in HTML and causes hydration errors / logs
-    let filteredProps: Partial<ThemeProps> | null = null
-
-    const compName = componentName || staticConfig?.componentName
-    if (compName) {
-      filteredProps = filteredProps || {}
-      filteredProps.componentName = compName
-    }
-    if ('debug' in props) {
-      filteredProps = filteredProps || {}
-      filteredProps.debug = props.debug
-    }
-    if ('theme' in props || defaultTheme) {
-      filteredProps = filteredProps || {}
-      filteredProps.name = 'theme' in props ? props.theme : defaultTheme
-    }
-    if ('themeReset' in props || defaultResetTheme) {
-      filteredProps = filteredProps || {}
-      filteredProps.reset = 'themeReset' in props ? themeReset : defaultResetTheme
-    }
-
-    if (optimize && !filteredProps) {
-      // optimize by avoiding theme! this can re-parent but we should just document that to avoid performance
-      // in cases where you remove/add themes, just keep a theme={x ? '' : null} pattern
-      return element
-    }
-
-    let contents = (
-      <Theme disable-child-theme {...filteredProps}>
-        {element}
-      </Theme>
-    )
-
-    if (context) {
-      const Provider = context.Provider
-      const contextValue = React.useContext(context)
-      contents = (
-        <Provider {...contextValue} {...overriddenContextProps}>
-          {contents}
-        </Provider>
-      )
-    }
-
-    return contents
-  })
-
-  const withTheme: any = withThemeComponent
-  withTheme.displayName = `Themed(${
-    (Component as any)?.displayName || (Component as any)?.name || 'Anonymous'
-  })`
-
-  type FinalComponentType = ComponentType extends (props: infer P) => infer R
-    ? (props: Omit<P, 'theme'> & ThemeableProps) => R
-    : unknown
-
-  return withTheme as FinalComponentType
-}

package/src/helpers/useRenderElement.tsx

@@ -1,73 +0,0 @@
-import type React from 'react'
-import { cloneElement, createElement, isValidElement } from 'react'
-import { composeRefs } from '@tamagui/compose-refs'
-import type { TamaguiComponentState } from '../types'
-import { mergeSlotStyleProps } from './mergeSlotStyleProps'
-
-export type RenderProp<Props = Record<string, any>> =
-  | string
-  | React.ReactElement
-  | ((props: Props, state: TamaguiComponentState) => React.ReactElement)
-
-/**
- * Evaluates a render prop and returns the element to render.
- *
- * @param render - The render prop (tag string, JSX element, or function)
- * @param props - Props to pass to the rendered element (including ref)
- * @param state - Component state for render functions
- * @param defaultElement - Fallback element if render prop is not provided
- */
-export function evaluateRenderProp(
-  render: RenderProp | undefined,
-  props: Record<string, any>,
-  state: TamaguiComponentState,
-  defaultElement: React.ReactElement<any>
-): React.ReactElement {
-  if (!render) {
-    return defaultElement
-  }
-
-  const defaultChildren = defaultElement.props.children
-
-  // String tag - swap element type, reuse props from defaultElement
-  if (typeof render === 'string') {
-    // on native, ignore lowercase tags (html/jsx elements like "div", "span")
-    if (
-      process.env.TAMAGUI_TARGET === 'native' &&
-      render[0] === render[0].toLowerCase()
-    ) {
-      return defaultElement
-    }
-    return createElement(render, props, defaultChildren)
-  }
-
-  // Render function - call with props and state
-  if (typeof render === 'function') {
-    return render(props, state)
-  }
-
-  // JSX element - clone with merged props
-  if (isValidElement(render)) {
-    const renderProps = render.props as Record<string, any>
-    const renderRef = renderProps?.ref
-
-    // Fast path: no props to merge
-    if (!renderProps || Object.keys(renderProps).length === 0) {
-      if (renderRef) {
-        return cloneElement(
-          render,
-          { ...props, ref: composeRefs(props.ref, renderRef) } as any,
-          defaultChildren
-        )
-      }
-      return cloneElement(render, props as any, defaultChildren)
-    }
-
-    // Merge props (component props as base, render props as overlay)
-    const merged = mergeSlotStyleProps({ ...props }, renderProps)
-    const children = renderProps.children ?? defaultChildren
-    return cloneElement(render, merged as any, children)
-  }
-
-  return defaultElement
-}

package/src/hooks/useProps.tsx

@@ -1,158 +0,0 @@
-import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import React from 'react'
-import { getConfig } from '../config'
-import { ComponentContext } from '../contexts/ComponentContext'
-import { GroupContext } from '../contexts/GroupContext'
-import { useSplitStyles } from '../helpers/getSplitStyles'
-import { subscribeToContextGroup } from '../helpers/subscribeToContextGroup'
-import type { SplitStyleProps, StaticConfig, ThemeParsed, UseMediaState } from '../types'
-import type { ViewProps, ViewStyle } from '../views/View'
-import { View } from '../views/View'
-import { useComponentState } from './useComponentState'
-import { mediaState } from '../helpers/mediaState'
-import { useMedia } from './useMedia'
-import { useThemeWithState } from './useTheme'
-
-type UsePropsOptions = Pick<
-  SplitStyleProps,
-  'noExpand' | 'noNormalize' | 'noClass' | 'resolveValues'
-> & {
-  disableExpandShorthands?: boolean
-  forComponent?: { staticConfig: StaticConfig }
-  noClass?: boolean
-
-  /**
-   * Disable watching for media queries
-   */
-  noMedia?: boolean
-}
-
-export type PropsWithoutMediaStyles<A> = {
-  // remove all media
-  [Key in keyof A as Key extends `$${string}` ? never : Key]?: A[Key]
-}
-
-type PropsLikeObject = (ViewProps & Record<string, any>) | object
-type StyleLikeObject = (ViewStyle & Record<string, any>) | object
-
-/**
- * Returns props and style as a single object, expanding and merging shorthands and media queries.
- *
- * Use sparingly, it will loop props and trigger re-render on all media queries you access.
- *
- * */
-export function useProps<A extends PropsLikeObject>(
-  props: A,
-  opts?: UsePropsOptions
-): PropsWithoutMediaStyles<A> {
-  const [propsOut, styleOut] = usePropsAndStyle(props, {
-    ...opts,
-    noExpand: true,
-    noNormalize: true,
-    resolveValues: 'none',
-  })
-  return {
-    ...propsOut,
-    ...styleOut,
-  }
-}
-
-/**
- * Returns only style values fully resolved and flattened with merged media queries and shorthands with all theme and token values resolved.
- *
- * Use sparingly, it will loop props and trigger re-render on all media queries you access.
- *
- * */
-export function useStyle<A extends StyleLikeObject>(
-  props: A,
-  opts?: UsePropsOptions
-): PropsWithoutMediaStyles<A> {
-  return usePropsAndStyle(props, opts)[1] || {}
-}
-
-/**
- * Returns [props, styles, theme, media] fully resolved and flattened with merged media queries and shorthands with all theme and token values resolved.
- *
- * Use sparingly, it will loop props and trigger re-render on all media queries you access.
- *
- * */
-export function usePropsAndStyle<A extends PropsLikeObject>(
-  props: A,
-  opts?: UsePropsOptions
-): [PropsWithoutMediaStyles<A>, PropsWithoutMediaStyles<A>, ThemeParsed, UseMediaState] {
-  const staticConfig = opts?.forComponent?.staticConfig ?? View.staticConfig
-  const [theme, themeState] = useThemeWithState({
-    componentName: staticConfig.componentName,
-    name: 'theme' in props ? props.theme : undefined,
-    needsUpdate() {
-      return true
-    },
-  })
-  const componentContext = React.useContext(ComponentContext)
-  const groupContext = React.useContext(GroupContext)
-  const { state, disabled, setStateShallow } = useComponentState(
-    props,
-    componentContext.animationDriver,
-    staticConfig,
-    getConfig()
-  )
-
-  const mediaStateNow = opts?.noMedia
-    ? // not safe to use mediaState but really marginal to hit this
-      mediaState
-    : useMedia()
-
-  const splitStyles = useSplitStyles(
-    props,
-    staticConfig,
-    theme,
-    themeState?.name || '',
-    state,
-    {
-      isAnimated: false,
-      mediaState: mediaStateNow,
-      noSkip: true,
-      noMergeStyle: true,
-      noClass: true,
-      resolveValues: 'auto',
-      ...opts,
-    },
-    null,
-    componentContext,
-    groupContext
-  )
-
-  const { mediaGroups, pseudoGroups } = splitStyles || {}
-
-  useIsomorphicLayoutEffect(() => {
-    if (disabled) {
-      return
-    }
-
-    if (state.unmounted) {
-      setStateShallow({ unmounted: false })
-      return
-    }
-
-    if (groupContext) {
-      return subscribeToContextGroup({
-        groupContext,
-        setStateShallow,
-        mediaGroups,
-        pseudoGroups,
-      })
-    }
-  }, [
-    disabled,
-    groupContext,
-    pseudoGroups ? Object.keys([...pseudoGroups]).join('') : 0,
-    mediaGroups ? Object.keys([...mediaGroups]).join('') : 0,
-  ])
-
-  return [
-    splitStyles?.viewProps || {},
-    splitStyles?.style || {},
-    theme,
-    mediaState,
-  ] as any
-}

package/src/opacityModifier.test-d.ts

@@ -1,65 +0,0 @@
-/**
- * type tests for the opacity modifier syntax (e.g., $color/50)
- *
- * the runtime already supports this syntax in getTokenForKey, but the types
- * were not accepting it. these tests verify that color tokens with opacity
- * modifiers are now type-safe.
- */
-
-import { expectTypeOf, describe, test } from 'vitest'
-import type { ColorTokens, FontColorTokens, GetThemeValueForKey } from './types'
-
-type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
-type ColorTokenKey = `color${Digit}${Digit}${Digit}`
-
-describe('opacity modifier types', () => {
-  test('ColorTokens accepts opacity modifier syntax', () => {
-    // should accept token with opacity modifier
-    const colorWithOpacity: ColorTokens = '$color/50'
-    const colorWithFullOpacity: ColorTokens = '$color/100'
-    const colorWithLowOpacity: ColorTokens = '$color/10'
-
-    // should still accept regular tokens
-    const regularToken: ColorTokens = '$color'
-    const colorName: ColorTokens = 'red'
-
-    expectTypeOf(colorWithOpacity).toMatchTypeOf<ColorTokens>()
-    expectTypeOf(colorWithFullOpacity).toMatchTypeOf<ColorTokens>()
-    expectTypeOf(colorWithLowOpacity).toMatchTypeOf<ColorTokens>()
-    expectTypeOf(regularToken).toMatchTypeOf<ColorTokens>()
-    expectTypeOf(colorName).toMatchTypeOf<ColorTokens>()
-  })
-
-  test('FontColorTokens accepts opacity modifier syntax', () => {
-    const fontColorNumber: FontColorTokens = 42
-    const fontColorWithOpacity: FontColorTokens = '$bodyColor/50'
-
-    expectTypeOf(fontColorNumber).toMatchTypeOf<FontColorTokens>()
-    expectTypeOf(fontColorWithOpacity).toMatchTypeOf<FontColorTokens>()
-    expectTypeOf<number>().toMatchTypeOf<FontColorTokens>()
-  })
-
-  test('opacity modifier requires token prefix', () => {
-    const validOpacity: ColorTokens = '$color/75'
-    expectTypeOf(validOpacity).toMatchTypeOf<ColorTokens>()
-
-    // @ts-expect-error opacity modifiers only apply to token-like values.
-    const cssColorWithOpacity: ColorTokens = 'red/75'
-    expectTypeOf(cssColorWithOpacity).toMatchTypeOf<ColorTokens>()
-  })
-
-  test('color props accept opacity without expanding large token unions', () => {
-    type LargeColorTokens = `$${ColorTokenKey}` | ColorTokens
-
-    const colorToken: LargeColorTokens = '$color123'
-    const colorTokenWithOpacity: LargeColorTokens = '$color123/50'
-    const propColorTokenWithOpacity: GetThemeValueForKey<'backgroundColor'> =
-      '$color123/50'
-
-    expectTypeOf(colorToken).toMatchTypeOf<LargeColorTokens>()
-    expectTypeOf(colorTokenWithOpacity).toMatchTypeOf<LargeColorTokens>()
-    expectTypeOf(propColorTokenWithOpacity).toMatchTypeOf<
-      GetThemeValueForKey<'backgroundColor'>
-    >()
-  })
-})

package/src/styledHtml.test-d.ts

@@ -1,286 +0,0 @@
-/**
- * Type tests for styled.a(), styled.button(), etc. API.
- *
- * These tests ensure type-safe inference for:
- * 1. HTML element-specific attributes (href for anchors, type for buttons, etc.)
- * 2. Style props based on element type (TextStyle for text-like, StackStyle for others)
- * 3. Variants support
- * 4. Standard HTML attributes like data-testid
- *
- * Run with: bun run test:types or vitest typecheck
- */
-
-import { expectTypeOf, describe, test } from 'vitest'
-import { styled, styledHtml } from './styled'
-import type { GetProps } from './types'
-
-// =============================================================================
-// Test: styled.a() types
-// =============================================================================
-
-describe('styled.a() types', () => {
-  const StyledAnchor = styled.a({
-    color: '$blue10',
-  })
-
-  type AnchorProps = GetProps<typeof StyledAnchor>
-
-  test('styled.a() accepts href prop', () => {
-    expectTypeOf<AnchorProps>().toHaveProperty('href')
-    expectTypeOf<AnchorProps['href']>().toMatchTypeOf<string | undefined>()
-  })
-
-  test('styled.a() accepts target prop', () => {
-    expectTypeOf<AnchorProps>().toHaveProperty('target')
-  })
-
-  test('styled.a() accepts rel prop', () => {
-    expectTypeOf<AnchorProps>().toHaveProperty('rel')
-  })
-
-  test('styled.a() accepts text style props', () => {
-    // text-like elements should accept text style props
-    expectTypeOf<AnchorProps>().toHaveProperty('color')
-    expectTypeOf<AnchorProps>().toHaveProperty('fontSize')
-    expectTypeOf<AnchorProps>().toHaveProperty('fontWeight')
-    expectTypeOf<AnchorProps>().toHaveProperty('textDecorationLine')
-  })
-})
-
-// =============================================================================
-// Test: styled.button() types
-// =============================================================================
-
-describe('styled.button() types', () => {
-  const StyledButton = styled.button({
-    padding: '$4',
-  })
-
-  type ButtonProps = GetProps<typeof StyledButton>
-
-  test('styled.button() accepts type prop', () => {
-    expectTypeOf<ButtonProps>().toHaveProperty('type')
-  })
-
-  test('styled.button() accepts disabled prop', () => {
-    expectTypeOf<ButtonProps>().toHaveProperty('disabled')
-  })
-
-  test('styled.button() accepts onClick prop', () => {
-    expectTypeOf<ButtonProps>().toHaveProperty('onClick')
-  })
-
-  test('styled.button() accepts stack style props', () => {
-    // non-text elements should accept stack style props
-    expectTypeOf<ButtonProps>().toHaveProperty('padding')
-    expectTypeOf<ButtonProps>().toHaveProperty('backgroundColor')
-    expectTypeOf<ButtonProps>().toHaveProperty('borderRadius')
-  })
-})
-
-// =============================================================================
-// Test: styled.input() types
-// =============================================================================
-
-describe('styled.input() types', () => {
-  const StyledInput = styled.input({
-    padding: '$2',
-  })
-
-  type InputProps = GetProps<typeof StyledInput>
-
-  test('styled.input() accepts type prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('type')
-  })
-
-  test('styled.input() accepts placeholder prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('placeholder')
-  })
-
-  test('styled.input() accepts maxLength prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('maxLength')
-  })
-
-  test('styled.input() accepts value prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('value')
-  })
-
-  test('styled.input() accepts onChange prop', () => {
-    expectTypeOf<InputProps>().toHaveProperty('onChange')
-  })
-})
-
-// =============================================================================
-// Test: styled.form() types
-// =============================================================================
-
-describe('styled.form() types', () => {
-  const StyledForm = styled.form({
-    gap: '$3',
-  })
-
-  type FormProps = GetProps<typeof StyledForm>
-
-  test('styled.form() accepts action prop', () => {
-    expectTypeOf<FormProps>().toHaveProperty('action')
-  })
-
-  test('styled.form() accepts method prop', () => {
-    expectTypeOf<FormProps>().toHaveProperty('method')
-  })
-
-  test('styled.form() accepts onSubmit prop', () => {
-    expectTypeOf<FormProps>().toHaveProperty('onSubmit')
-  })
-})
-
-// =============================================================================
-// Test: styled.label() types
-// =============================================================================
-
-describe('styled.label() types', () => {
-  const StyledLabel = styled.label({
-    fontSize: '$3',
-  })
-
-  type LabelProps = GetProps<typeof StyledLabel>
-
-  test('styled.label() accepts htmlFor prop', () => {
-    expectTypeOf<LabelProps>().toHaveProperty('htmlFor')
-  })
-})
-
-// =============================================================================
-// Test: styled.div() types (stack-like element)
-// =============================================================================
-
-describe('styled.div() types', () => {
-  const StyledDiv = styled.div({
-    padding: '$4',
-  })
-
-  type DivProps = GetProps<typeof StyledDiv>
-
-  test('styled.div() accepts stack style props', () => {
-    expectTypeOf<DivProps>().toHaveProperty('padding')
-    expectTypeOf<DivProps>().toHaveProperty('margin')
-    expectTypeOf<DivProps>().toHaveProperty('flex')
-    expectTypeOf<DivProps>().toHaveProperty('backgroundColor')
-  })
-})
-
-// =============================================================================
-// Test: styled.span() types (text-like element)
-// =============================================================================
-
-describe('styled.span() types', () => {
-  const StyledSpan = styled.span({
-    color: '$color',
-  })
-
-  type SpanProps = GetProps<typeof StyledSpan>
-
-  test('styled.span() accepts text style props', () => {
-    expectTypeOf<SpanProps>().toHaveProperty('color')
-    expectTypeOf<SpanProps>().toHaveProperty('fontSize')
-    expectTypeOf<SpanProps>().toHaveProperty('fontWeight')
-    expectTypeOf<SpanProps>().toHaveProperty('lineHeight')
-  })
-})
-
-// =============================================================================
-// Test: variants support
-// =============================================================================
-
-describe('styled.element() with variants', () => {
-  const StyledAnchorWithVariants = styled.a({
-    color: '$blue10',
-
-    variants: {
-      size: {
-        small: { fontSize: '$2' },
-        large: { fontSize: '$6' },
-      },
-      underline: {
-        true: { textDecorationLine: 'underline' },
-        false: { textDecorationLine: 'none' },
-      },
-    } as const,
-
-    defaultVariants: {
-      underline: true,
-    },
-  })
-
-  type VariantProps = GetProps<typeof StyledAnchorWithVariants>
-
-  test('styled.a() with variants accepts size variant', () => {
-    expectTypeOf<VariantProps>().toHaveProperty('size')
-  })
-
-  test('styled.a() with variants accepts underline variant', () => {
-    expectTypeOf<VariantProps>().toHaveProperty('underline')
-  })
-
-  test('styled.a() with variants still accepts href', () => {
-    expectTypeOf<VariantProps>().toHaveProperty('href')
-  })
-})
-
-// =============================================================================
-// Test: styledHtml() function (alternative API)
-// =============================================================================
-
-describe('styledHtml() function', () => {
-  const StyledAnchor = styledHtml('a', {
-    color: '$blue10',
-  })
-
-  type AnchorProps = GetProps<typeof StyledAnchor>
-
-  test('styledHtml("a") accepts href prop', () => {
-    expectTypeOf<AnchorProps>().toHaveProperty('href')
-  })
-})
-
-// =============================================================================
-// Test: semantic elements
-// =============================================================================
-
-describe('semantic HTML elements', () => {
-  test('styled.nav() creates nav element component', () => {
-    const StyledNav = styled.nav({ padding: '$2' })
-    type NavProps = GetProps<typeof StyledNav>
-    expectTypeOf<NavProps>().toHaveProperty('padding')
-  })
-
-  test('styled.main() creates main element component', () => {
-    const StyledMain = styled.main({ flex: 1 })
-    type MainProps = GetProps<typeof StyledMain>
-    expectTypeOf<MainProps>().toHaveProperty('flex')
-  })
-
-  test('styled.section() creates section element component', () => {
-    const StyledSection = styled.section({ padding: '$3' })
-    type SectionProps = GetProps<typeof StyledSection>
-    expectTypeOf<SectionProps>().toHaveProperty('padding')
-  })
-
-  test('styled.article() creates article element component', () => {
-    const StyledArticle = styled.article({ padding: '$3' })
-    type ArticleProps = GetProps<typeof StyledArticle>
-    expectTypeOf<ArticleProps>().toHaveProperty('padding')
-  })
-
-  test('styled.header() creates header element component', () => {
-    const StyledHeader = styled.header({ padding: '$2' })
-    type HeaderProps = GetProps<typeof StyledHeader>
-    expectTypeOf<HeaderProps>().toHaveProperty('padding')
-  })
-
-  test('styled.footer() creates footer element component', () => {
-    const StyledFooter = styled.footer({ padding: '$2' })
-    type FooterProps = GetProps<typeof StyledFooter>
-    expectTypeOf<FooterProps>().toHaveProperty('padding')
-  })
-})