@tamagui/web 3.0.0-beta.924.1 → 3.0.1

package/src/createStyledHOC.tsx

@@ -20,19 +20,20 @@ export function createStyledHOC<
   ParentStaticProperties,
   CustomProps extends object = {},
 >(
-  component: TamaguiComponent<
-    Props,
-    Ref,
-    NonStyledProps,
-    BaseStyles,
-    VariantProps,
-    ParentStaticProperties
-  >,
+  // infer from the stored tuple instead of comparing the expanded call signature.
+  // intersecting hundreds of conditional style props can exceed the union limit.
+  component: {
+    __tama: [Props, Ref, NonStyledProps, BaseStyles, VariantProps, ParentStaticProperties]
+    staticConfig: StaticConfig
+  },
   render: (
-    props: NoInfer<
-      Props extends TamaDefer
-        ? GetFinalProps<NonStyledProps, BaseStyles, VariantProps>
-        : Props
+    props: Omit<
+      NoInfer<
+        Props extends TamaDefer
+          ? GetFinalProps<NonStyledProps, BaseStyles, VariantProps>
+          : Props
+      >,
+      keyof CustomProps
     > &
       CustomProps,
     // always a ref value (null when the caller passed none), so a render
@@ -41,22 +42,20 @@ export function createStyledHOC<
   ) => ReactNode,
   options?: StyledHOCOptions
 ): TamaguiComponent<
-  // with no custom props the wrapper adds nothing to the prop surface, so keep
-  // the base component's deferred props: styled() then composes it through the
-  // same lazy path as any styled component instead of re-expanding a fully
-  // computed prop type (which hits TS2590 "union too complex" downstream)
-  keyof CustomProps extends never
-    ? Props
-    : StyledHOCMergedProps<
-        Props extends TamaDefer
-          ? GetFinalProps<NonStyledProps, BaseStyles, VariantProps>
-          : Props,
-        CustomProps
-      >,
+  // keep deferred parents deferred even when the receiver adds custom props.
+  // their declared owners live in the tuple until a caller needs the props.
+  Props extends TamaDefer
+    ? string extends keyof NonStyledProps
+      ? StyledHOCMergedProps<
+          GetFinalProps<NonStyledProps, BaseStyles, VariantProps>,
+          CustomProps
+        >
+      : TamaDefer
+    : StyledHOCMergedProps<Props, CustomProps>,
   Ref,
-  NonStyledProps & CustomProps,
+  StyledHOCMergedProps<NonStyledProps, CustomProps>,
   BaseStyles,
-  VariantProps,
+  keyof CustomProps extends never ? VariantProps : Omit<VariantProps, keyof CustomProps>,
   ParentStaticProperties
 > {
   const staticConfig = component.staticConfig

package/src/createTamagui.ts

@@ -3,6 +3,7 @@ import type { DeepVariableObject } from './createVariables'
 import { createVariables } from './createVariables'
 import { defaultAnimationDriver } from './helpers/defaultAnimationDriver'
 import { resolveAnimationDriver } from './helpers/resolveAnimationDriver'
+import { defaultSizing } from './helpers/resolveSizing'
 import {
   buildCSSRuleSets,
   createFontCSS,
@@ -13,7 +14,11 @@ import {
 } from './helpers/createDesignSystem'
 import { scanAllSheets } from './helpers/insertStyleRule'
 import { proxyThemesToParents } from './helpers/proxyThemeToParents'
-import { ensureThemeVariable } from './helpers/themes'
+import {
+  copyAuthoredThemeScheme,
+  ensureThemeVariable,
+  getAuthoredThemeScheme,
+} from './helpers/themes'
 import { mergeConfigVariablesIntoTheme } from './helpers/configVariables'
 import { configureMedia } from './hooks/useMedia'
 import { parseFont, registerFontVariables } from './insertFont'
@@ -50,13 +55,34 @@ const reservedCssIdentsLower: ReadonlySet<string> = new Set([
   'currentcolor',
 ])
 
-function shouldTokenCategoryHaveUnits(category: string): boolean {
-  // From TokenCategories type: 'color' | 'space' | 'size' | 'radius' | 'zIndex'
-  // These are the only predefined categories that should get px units
-  const UNIT_CATEGORIES = new Set(['size', 'space', 'radius'])
+// every built-in category whose values are bare numbers standing for a CSS
+// length. a unitless length is invalid CSS outside quirks mode, so the browser
+// drops the whole declaration: `width:var(--c-width-10)` against
+// `--c-width-10:40` leaves the element at auto width, silently. the tailwind
+// coverage work added the width/inline-size/flex-basis/outline/perspective
+// scales without adding them here, which made every one of those tokens a no-op
+// on web.
+// zIndex is unitless by definition, and color/boxShadow hold strings (which
+// variableToCSS passes through untouched), so none of them belong here. custom
+// categories still default to unitless.
+const UNIT_CATEGORIES: ReadonlySet<string> = new Set([
+  'size',
+  'space',
+  'radius',
+  'width',
+  'minWidth',
+  'maxWidth',
+  'inlineSize',
+  'minInlineSize',
+  'maxInlineSize',
+  'flexBasis',
+  'borderWidth',
+  'outlineWidth',
+  'outlineOffset',
+  'perspective',
+])
 
-  // Only add px to predefined dimensional categories
-  // Custom categories (like 'opacity', 'customWidth') default to unitless
+function shouldTokenCategoryHaveUnits(category: string): boolean {
   return UNIT_CATEGORIES.has(category)
 }
 
@@ -211,11 +237,8 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
 
     const themesIn = configIn.themes as ThemesLikeObject
     const dedupedThemes =
-      foundThemes ??
-      getThemesDeduped(themesIn, tokens.color, configIn.variables, {
-        tokensParsed,
-      })
-    const themes = proxyThemesToParents(dedupedThemes)
+      foundThemes ?? getThemesDeduped(themesIn, tokensParsed, configIn.variables)
+    const themes = proxyThemesToParents(dedupedThemes, Object.keys(themesIn))
 
     return {
       themes,
@@ -268,6 +291,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     animations: resolvedDriver ?? defaultAnimationDriver,
     animationDrivers,
     settings: settingsIn,
+    sizing: { ...defaultSizing, ...configIn.sizing },
     tokens: tokens as any,
     // vite made this into a function if it wasn't set
     shorthands,
@@ -308,11 +332,8 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
 // dedupes the themes if given them via JS config
 function getThemesDeduped(
   themes: ThemesLikeObject,
-  colorTokens?: Record<string, any>,
-  variables?: CreateTamaguiProps['variables'],
-  variablesCtx?: {
-    tokensParsed: TokensParsed
-  }
+  tokensParsed: TokensParsed,
+  variables?: CreateTamaguiProps['variables']
 ): DedupedThemes {
   const dedupedThemes: DedupedThemes = []
   const existing = new Map<string, DedupedTheme>()
@@ -329,11 +350,12 @@ function getThemesDeduped(
     const rawTheme = themes[themeName]
 
     // dont force referential equality but may need something more consistent than JSON.stringify
-    const key = JSON.stringify(rawTheme)
+    const scheme = getAuthoredThemeScheme(rawTheme)
+    const key = JSON.stringify(rawTheme) + scheme
 
     // if existing, avoid
-    if (existing.has(key)) {
-      const e = existing.get(key)!
+    const e = existing.get(key)
+    if (e) {
       e.names.push(themeName)
       continue
     }
@@ -341,7 +363,7 @@ function getThemesDeduped(
     // ensure each theme object unique for dedupe
     // is ThemeParsed because we call ensureThemeVariable
     // color tokens are spread first as fallbacks, theme values take precedence
-    const theme = { ...colorTokens, ...rawTheme } as any as ThemeParsed
+    const theme = { ...tokensParsed.color, ...rawTheme } as any as ThemeParsed
 
     // parse into variables
     for (const key in theme) {
@@ -349,16 +371,13 @@ function getThemesDeduped(
       ensureThemeVariable(theme, key)
     }
 
+    copyAuthoredThemeScheme(theme, rawTheme)
+
     // custom variables merge into base themes only; sub-themes inherit them
     // via proxyThemesToParents (native) and the CSS cascade (web), so a
     // a ThemeUpdate patch survives sub-theme switches below it
-    if (variables && variablesCtx && !themeName.includes('_')) {
-      mergeConfigVariablesIntoTheme(
-        theme as any,
-        themeName,
-        variables,
-        variablesCtx.tokensParsed
-      )
+    if (variables && !themeName.includes('_')) {
+      mergeConfigVariablesIntoTheme(theme as any, themeName, variables, tokensParsed)
     }
 
     // set deduped

package/src/dom/contract.ts

@@ -7,6 +7,7 @@ import type {
   DOMKeyEvent,
 } from '@tamagui/dom'
 import type { ReactNode, Ref } from 'react'
+import type { NativeTextMetrics } from '../helpers/nativeTextMetrics'
 
 /**
  * What the compiler emits for a DOM element on native.
@@ -30,7 +31,9 @@ import type { ReactNode, Ref } from 'react'
 /**
  * Props already resolved by the compiler and forwarded to the native host.
  */
-export type ResolvedNativeProps = Readonly<Record<string, unknown>>
+export type ResolvedNativeProps = Readonly<Record<string, unknown>> & {
+  __textMetrics?: NativeTextMetrics
+}
 
 export type DOMViewProps = ResolvedNativeProps & {
   children?: ReactNode

package/src/dom/html.native.tsx

@@ -14,6 +14,7 @@ import type {
   StrictDOMVoidProps,
 } from '@tamagui/dom'
 
+import { stylePropsInput } from '@tamagui/helpers'
 import { createComponent } from '../createComponent'
 import type {
   StackNonStyleProps,
@@ -170,6 +171,12 @@ const domValidStyles = {
   ...textStaticConfig.validStyles,
 }
 
+/** text-entry tags also lower the input color styles to TextInput props */
+const domInputValidStyles = {
+  ...domValidStyles,
+  ...stylePropsInput,
+}
+
 /**
  * `StaticConfig.Component` is typed for Tamagui components, and the DOM
  * primitives are plain function components; the compiler injects them the
@@ -194,6 +201,7 @@ const a = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -215,6 +223,7 @@ const article = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -243,6 +252,7 @@ const aside = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -271,6 +281,7 @@ const b = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -293,6 +304,7 @@ const bdi = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -314,6 +326,7 @@ const bdo = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -335,6 +348,7 @@ const blockquote = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -363,6 +377,7 @@ const br = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -384,6 +399,7 @@ const button = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -406,6 +422,7 @@ const code = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -428,6 +445,7 @@ const del = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -450,6 +468,7 @@ const div = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -478,6 +497,7 @@ const em = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -500,6 +520,7 @@ const fieldset = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -528,6 +549,7 @@ const footer = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -556,6 +578,7 @@ const form = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -584,6 +607,7 @@ const h1 = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -614,6 +638,7 @@ const h2 = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -644,6 +669,7 @@ const h3 = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -674,6 +700,7 @@ const h4 = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -704,6 +731,7 @@ const h5 = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -734,6 +762,7 @@ const h6 = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -764,6 +793,7 @@ const header = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -792,6 +822,7 @@ const hr = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -822,6 +853,7 @@ const i = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -844,6 +876,7 @@ const img = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMImage),
     defaultProps: {
@@ -864,7 +897,8 @@ const input = domTag(
     TextStylePropsBase
   >({
     ...textStaticConfig,
-    validStyles: domValidStyles,
+    validStyles: domInputValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMTextInput),
     isInput: true,
@@ -888,6 +922,7 @@ const ins = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -910,6 +945,7 @@ const kbd = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -932,6 +968,7 @@ const label = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -953,6 +990,7 @@ const li = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -981,6 +1019,7 @@ const main = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -1009,6 +1048,7 @@ const mark = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -1032,6 +1072,7 @@ const nav = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -1060,6 +1101,7 @@ const ol = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -1098,6 +1140,7 @@ const p = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -1126,6 +1169,7 @@ const pre = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -1155,6 +1199,7 @@ const s = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -1177,6 +1222,7 @@ const section = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {
@@ -1210,6 +1256,7 @@ const span = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -1231,6 +1278,7 @@ const strong = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -1253,6 +1301,7 @@ const sub = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -1274,6 +1323,7 @@ const sup = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -1294,7 +1344,8 @@ const textarea = domTag(
     TextStylePropsBase
   >({
     ...textStaticConfig,
-    validStyles: domValidStyles,
+    validStyles: domInputValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMTextInput),
     isInput: true,
@@ -1319,6 +1370,7 @@ const u = domTag(
   >({
     ...textStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMText),
     defaultProps: {
@@ -1341,6 +1393,7 @@ const ul = domTag(
   >({
     ...viewStaticConfig,
     validStyles: domValidStyles,
+    isDOM: true,
     neverSkipProps: domEventProps,
     Component: primitive(DOMView),
     defaultProps: {