@tamagui/web 3.0.0-beta.807.1 → 3.0.0-beta.881.1

package/src/styled.tsx

@@ -1,77 +1,53 @@
-import type {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  FormHTMLAttributes,
-  HTMLAttributes,
-  InputHTMLAttributes,
-  LabelHTMLAttributes,
-  SelectHTMLAttributes,
-  TextareaHTMLAttributes,
-} from 'react'
+import { stylePropsInput, stylePropsText } from '@tamagui/helpers'
+
 import { createComponent } from './createComponent'
-import {
-  componentDisplayName,
-  setComponentDisplayName,
-} from './helpers/componentDisplayName'
+import { componentDisplayName } from './helpers/componentDisplayName'
 import { mergeVariants } from './helpers/mergeVariants'
+import { resolveVariantStyle } from './helpers/resolveVariantStyle'
+import { styledDynamic } from './helpers/styledDynamic'
 import type { FrontendComponent, StyleFrontend } from './helpers/styleFrontend'
 import { warnOnce } from './helpers/warnOnce'
 import type { GetRef } from './interfaces/GetRef'
 import { getReactNativeConfig } from './setupReactNative'
 import type {
-  CompoundVariantDefinition,
   GetBaseStyles,
   GetNonStyledProps,
   GetProps,
   GetStaticConfig,
   GetStyledVariants,
-  InferStyleProps,
   InferStyledProps,
-  StackStyle,
-  StackStyleBase,
   StaticConfig,
   StaticConfigPublic,
   StylableComponent,
   StyledContext,
+  StyledDynamicFn,
+  StyledDynamicProp,
   TamaDefer,
   TamaguiComponent,
-  TamaguiComponentPropsBase,
-  TextStyle,
-  TextStylePropsBase,
-  ThemeValueByCategory,
   ThemeValueGet,
   VariantDefinitions,
-  VariantResolverKey,
-  VariantResolverValue,
-  VariantSpreadFunction,
 } from './types'
-import type { Text } from './views/Text'
-
-export { createVariantResolver } from './types'
 
 type AreVariantsUndefined<Variants> =
   // because we pass in the Generic variants which for some reason has this :)
   Required<Variants> extends { _isEmpty: 1 } ? true : false
 
-// these stay strict (exact branch keys): defaultVariants, options roots,
-// compound matchers, and the stored component variants all use them, so typos
-// there remain type errors. the conditional flat forms (clause strings and
+// these stay strict (exact branch keys): defaultVariants, options roots, and
+// the stored component variants all use them, so typos there remain type errors. the conditional flat forms (clause strings and
 // objects) widen only at the final public props, in WithThemeAndShorthands
 type GetVariantAcceptedValues<V> = V extends object
   ? {
-      [Key in keyof V]?: V[Key] extends VariantSpreadFunction<any, infer Val>
+      // the fn carrier check runs first: the bare carrier's phantom is
+      // optional, so it would match a fn too and infer unknown
+      [Key in keyof V]?: V[Key] extends StyledDynamicFn<infer Val, any>
         ? Val
-        : GetVariantAcceptedValue<keyof V[Key]>
+        : V[Key] extends StyledDynamicProp<infer Val>
+          ? Val
+          : GetVariantAcceptedValue<keyof V[Key]>
     }
   : undefined
 
-type GetVariantAcceptedValue<Key> = Key extends 'true' | 'false'
-  ? boolean
-  : Key extends string
-    ? VariantResolverKey<Key> extends never
-      ? Key
-      : VariantResolverValue<Key>
-    : Key
+type GetVariantAcceptedValue<Key> = Key extends 'true' | 'false' ? boolean : Key
 
 type NoInferLocal<T> = [T][T extends any ? 0 : never]
 type IsAny<T> = 0 extends 1 & T ? true : false
@@ -109,18 +85,6 @@ export type StyledOptions<
     ContextPropKeys,
     keyof GetStyledContextAllProps<Context> & string
   >[]
-  compoundVariants?: readonly CompoundVariantDefinition<
-    NoInferLocal<
-      GetCompoundVariantMatchProps<
-        ParentComponent,
-        StyledConfig,
-        Variants,
-        Context,
-        ContextPropKeys
-      >
-    >,
-    Partial<InferStyleProps<ParentComponent, StyledConfig>>
-  >[]
   render?: string | React.ReactElement
 }
 
@@ -154,33 +118,6 @@ type GetStyledContextVariantProps<
   Keys extends string,
 > = Omit<GetStyledContextProps<Context, Keys>, keyof GetProps<ParentComponent>>
 
-type GetCompoundVariantMatchProps<
-  ParentComponent extends StylableComponent,
-  StyledConfig extends StaticConfigPublic,
-  Variants extends VariantDefinitions<ParentComponent, StyledConfig>,
-  Context,
-  ContextPropKeys extends string,
-> = Omit<StyledMergedVariants<ParentComponent, StyledConfig, Variants>, '_isEmpty'> &
-  GetStyledContextProps<Context, ContextPropKeys>
-
-type StyledCustomTokenProps<
-  ParentComponent extends StylableComponent,
-  StyledConfig extends StaticConfigPublic,
-  ParentStylesBase extends object,
-  Accepted = StyledConfig['accept'],
-> =
-  Accepted extends Record<string, any>
-    ? {
-        [Key in keyof Accepted]?:
-          | (Key extends keyof ParentStylesBase ? ParentStylesBase[Key] : never)
-          | (Accepted[Key] extends 'style'
-              ? Partial<InferStyleProps<ParentComponent, StyledConfig>>
-              : Accepted[Key] extends 'textStyle'
-                ? Partial<InferStyleProps<typeof Text, StyledConfig>>
-                : ThemeValueByCategory<Accepted[Key]>)
-      }
-    : {}
-
 type StyledMergedVariants<
   ParentComponent extends StylableComponent,
   StyledConfig extends StaticConfigPublic,
@@ -217,15 +154,7 @@ type StyledComponentResult<
   TamaDefer,
   GetRef<ParentComponent>,
   GetNonStyledProps<ParentComponent>,
-  StyledConfig['accept'] extends Record<string, any>
-    ? ParentStylesBase &
-        StyledCustomTokenProps<
-          ParentComponent,
-          StyledConfig,
-          ParentStylesBase,
-          StyledConfig['accept']
-        >
-    : ParentStylesBase,
+  ParentStylesBase,
   StyledVariantsWithContext<
     StyledMergedVariants<ParentComponent, StyledConfig, Variants>,
     GetStyledContextVariantProps<ParentComponent, Context, ContextPropKeys>
@@ -233,181 +162,14 @@ type StyledComponentResult<
   GetStaticConfig<ParentComponent, StyledConfig>
 >
 
-// ---- HTML element support for styledHtml('tagName') ----
-
-// text-like elements use TextStylePropsBase
-type TextLikeElements =
-  | 'a'
-  | 'abbr'
-  | 'b'
-  | 'bdi'
-  | 'bdo'
-  | 'cite'
-  | 'code'
-  | 'data'
-  | 'del'
-  | 'dfn'
-  | 'em'
-  | 'i'
-  | 'ins'
-  | 'kbd'
-  | 'label'
-  | 'mark'
-  | 'q'
-  | 's'
-  | 'samp'
-  | 'small'
-  | 'span'
-  | 'strong'
-  | 'sub'
-  | 'sup'
-  | 'time'
-  | 'u'
-  | 'var'
-
-// props that conflict with tamagui style props
-type ConflictingHTMLProps =
-  | 'color'
-  | 'display'
-  | 'height'
-  | 'width'
-  | 'size'
-  | 'left'
-  | 'right'
-  | 'top'
-  | 'bottom'
-  | 'translate'
-  | 'content'
-
-// map HTML tag to its specific attributes
-type HTMLElementSpecificProps<T extends keyof HTMLElementTagNameMap> = T extends 'a'
-  ? Omit<AnchorHTMLAttributes<HTMLAnchorElement>, ConflictingHTMLProps>
-  : T extends 'button'
-    ? Omit<ButtonHTMLAttributes<HTMLButtonElement>, ConflictingHTMLProps>
-    : T extends 'input'
-      ? Omit<InputHTMLAttributes<HTMLInputElement>, ConflictingHTMLProps>
-      : T extends 'select'
-        ? Omit<SelectHTMLAttributes<HTMLSelectElement>, ConflictingHTMLProps>
-        : T extends 'textarea'
-          ? Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, ConflictingHTMLProps>
-          : T extends 'form'
-            ? Omit<FormHTMLAttributes<HTMLFormElement>, ConflictingHTMLProps>
-            : T extends 'label'
-              ? Omit<LabelHTMLAttributes<HTMLLabelElement>, ConflictingHTMLProps>
-              : Omit<HTMLAttributes<HTMLElement>, ConflictingHTMLProps>
-
-// base style props based on element type. the BASE type feeds TamaguiComponent,
-// whose GetFinalProps applies WithThemeAndShorthands itself — passing the
-// already-wrapped TextStyle/StackStyle there wraps twice, which the flat object
-// value form turns into a type-explosion. authored options still use the
-// wrapped form so tokens and clauses typecheck in the definition
-type HTMLElementStyleBase<T extends keyof HTMLElementTagNameMap> =
-  T extends TextLikeElements ? TextStylePropsBase : StackStyleBase
-type HTMLElementStyle<T extends keyof HTMLElementTagNameMap> = T extends TextLikeElements
-  ? TextStyle
-  : StackStyle
-
-// runtime check for text-like elements
-const textLikeElements = new Set<string>([
-  'a',
-  'abbr',
-  'b',
-  'bdi',
-  'bdo',
-  'cite',
-  'code',
-  'data',
-  'del',
-  'dfn',
-  'em',
-  'i',
-  'ins',
-  'kbd',
-  'label',
-  'mark',
-  'q',
-  's',
-  'samp',
-  'small',
-  'span',
-  'strong',
-  'sub',
-  'sup',
-  'time',
-  'u',
-  'var',
-])
-
-/**
- * styledHtml() for HTML element tags like 'a', 'button', 'div', etc.
- * Automatically provides element-specific props (href for anchors, type for buttons, etc.)
- *
- * @example
- * const StyledAnchor = styledHtml('a', {
- *   color: 'blue10',
- *   textDecorationLine: 'underline',
- * })
- * // StyledAnchor now accepts `href` prop with proper typing
- * <StyledAnchor href="/path">Link</StyledAnchor>
- */
-export function styledHtml<
-  Tag extends keyof HTMLElementTagNameMap,
-  Variants extends VariantDefinitions<any, any> | undefined = undefined,
->(
-  tag: Tag,
-  options?: Partial<HTMLElementStyle<Tag>> & {
-    displayName?: string
-    variants?: Variants
-    defaultVariants?: GetVariantAcceptedValues<NonNullable<Variants>>
-    context?: StyledContext
-  }
-) {
-  type StyleBase = HTMLElementStyleBase<Tag>
-  type HTMLProps = HTMLElementSpecificProps<Tag>
-  type VariantProps = Variants extends undefined
-    ? {}
-    : AreVariantsUndefined<NonNullable<Variants>> extends true
-      ? {}
-      : GetVariantAcceptedValues<NonNullable<Variants>>
-
-  const isText = textLikeElements.has(tag)
-  const { variants, displayName, defaultVariants, context, ...defaultProps } =
-    options || {}
-
-  const conf: Partial<StaticConfig> = {
-    Component: tag as any,
-    variants: variants as any,
-    defaultProps: defaultProps as any,
-    defaultVariants,
-    isText,
-    acceptsClassName: true,
-    context,
-  }
-
-  if (defaultProps['children'] || context) {
-    conf.neverFlatten = true
-  }
-
-  const component = setComponentDisplayName(createComponent(conf), displayName)
-
-  return component as any as TamaguiComponent<
-    TamaDefer,
-    HTMLElementTagNameMap[Tag],
-    TamaguiComponentPropsBase & HTMLProps,
-    StyleBase,
-    VariantProps,
-    {}
-  >
-}
-
 /**
  * styled() for creating Tamagui components from other components.
  *
  * Core's public overload is object-only. The class-string form belongs to
- * `@tamagui/tailwind`, which reaches this implementation through
+ * `@tamagui/tailwind`, which reaches the implementation through
  * `createFrontendStyled`.
  */
-function styled<
+function styledFn<
   ParentComponent extends StylableComponent,
   StyledConfig extends StaticConfigPublic,
   Variants extends VariantDefinitions<ParentComponent, StyledConfig>,
@@ -430,10 +192,15 @@ function styled<
   Context,
   ContextPropKeys
 >
-function styled(...args: any[]) {
+function styledFn(...args: any[]) {
   return (styledImpl as any)(undefined, ...args)
 }
 
+const styled = Object.assign(styledFn, {
+  /** see styledDynamic: value/prop carriers usable as `variants` entries */
+  dynamic: styledDynamic,
+})
+
 /**
  * Builds a `styled()` bound to one frontend descriptor. Components it creates carry
  * that descriptor immutably, so behavior follows import provenance instead of any
@@ -509,20 +276,6 @@ function styledImpl<
               | (Key extends keyof OurVariantProps ? OurVariantProps[Key] : undefined)
           }
 
-  type Accepted = StyledConfig['accept']
-  type CustomTokenProps =
-    Accepted extends Record<string, any>
-      ? {
-          [Key in keyof Accepted]?:
-            | (Key extends keyof ParentStylesBase ? ParentStylesBase[Key] : never)
-            | (Accepted[Key] extends 'style'
-                ? Partial<InferStyleProps<ParentComponent, StyledConfig>>
-                : Accepted[Key] extends 'textStyle'
-                  ? Partial<InferStyleProps<typeof Text, StyledConfig>>
-                  : ThemeValueByCategory<Accepted[Key]>)
-        }
-      : {}
-
   /**
    * de-opting a bit of type niceness because were hitting depth issues too soon
    * before we had:
@@ -537,9 +290,7 @@ function styledImpl<
     TamaDefer,
     GetRef<ParentComponent>,
     ParentNonStyledProps,
-    Accepted extends Record<string, any>
-      ? ParentStylesBase & CustomTokenProps
-      : ParentStylesBase,
+    ParentStylesBase,
     StyledVariantsWithContext<
       MergedVariants,
       GetStyledContextVariantProps<ParentComponent, Context, ContextPropKeys>
@@ -547,11 +298,12 @@ function styledImpl<
     GetStaticConfig<ParentComponent, StyledConfig>
   >
 
-  // validate not using a variant over an existing valid style
-  if (process.env.NODE_ENV !== 'production') {
-    if (!ComponentIn) {
-      throw new Error(`No component given to styled()`)
-    }
+  if (!ComponentIn) {
+    throw new Error(
+      process.env.NODE_ENV === 'development'
+        ? 'No component given to styled()'
+        : '❌ Error 006'
+    )
   }
 
   const parentStaticConfig = ComponentIn['staticConfig'] as StaticConfig | undefined
@@ -599,13 +351,11 @@ function styledImpl<
       defaultVariants,
       context,
       contextProps,
-      compoundVariants,
       ...defaultProps
     } = (options || {}) as Record<string, any>
 
     let parentDefaultVariants
     let parentDefaultProps
-    let parentCompoundVariants
     const mergedBaseClassName =
       parentStaticConfig?.baseClassName && baseClassName
         ? `${parentStaticConfig.baseClassName} ${baseClassName}`
@@ -636,14 +386,9 @@ function styledImpl<
         if (parentStaticConfig.variants) {
           variants = mergeVariants(parentStaticConfig.variants, variants)
         }
-        parentCompoundVariants = parentStaticConfig.compoundVariants
       }
     }
 
-    const mergedCompoundVariants =
-      parentCompoundVariants || compoundVariants
-        ? [...(parentCompoundVariants || []), ...(compoundVariants || [])]
-        : undefined
     const mergedContext = context || parentStaticConfig?.context
     const mergedContextProps = context
       ? contextProps
@@ -659,7 +404,15 @@ function styledImpl<
       }
     }
 
+    const isInput = Boolean(config?.isInput || parentStaticConfig?.isInput)
     const isText = Boolean(config?.isText || parentStaticConfig?.isText)
+    const validStyles =
+      config?.validStyles ||
+      (config?.isInput
+        ? stylePropsInput
+        : config?.isText
+          ? stylePropsText
+          : parentStaticConfig?.validStyles)
 
     const acceptsClassName =
       config?.acceptsClassName ??
@@ -674,7 +427,6 @@ function styledImpl<
         Component,
       }),
       variants,
-      compoundVariants: mergedCompoundVariants,
       baseClassName: mergedBaseClassName,
       defaultProps,
       defaultVariants,
@@ -682,15 +434,19 @@ function styledImpl<
         isReactNative: resolvedIsReactNative,
       }),
       isText,
+      isInput,
+      validStyles,
       acceptsClassName,
       context: mergedContext,
       contextProps: mergedContextProps,
       ...reactNativeConfig,
       isStyledHOC: Boolean(parentStaticConfig?.isHOC),
       parentStaticConfig,
+      displayName: displayName || (ComponentIn as any)[componentDisplayName],
       // only an explicitly bound frontend overrides the one inherited from the parent
       ...(frontend && { styleFrontend: frontend }),
     }
+    ;(conf as any).variantStyleResolver = resolveVariantStyle
 
     if (process.env.TAMAGUI_TARGET !== 'native') {
       delete conf.isReactNative
@@ -704,10 +460,7 @@ function styledImpl<
     return conf
   })()
 
-  const component = setComponentDisplayName(
-    createComponent(staticConfigProps || {}),
-    displayName || (ComponentIn as any)[componentDisplayName]
-  )
+  const component = createComponent(staticConfigProps || {})
 
   for (const key in ComponentIn) {
     // dont inherit propTypes
@@ -720,43 +473,4 @@ function styledImpl<
   return component as any as StyledComponent
 }
 
-// ---- styled.a, styled.div, styled.button, etc. API ----
-
-type StyledHtmlFactory<Tag extends keyof HTMLElementTagNameMap> = <
-  Variants extends VariantDefinitions<any, any> | undefined = undefined,
->(
-  options?: Partial<HTMLElementStyle<Tag>> & {
-    displayName?: string
-    variants?: Variants
-    defaultVariants?: GetVariantAcceptedValues<NonNullable<Variants>>
-    context?: StyledContext
-  }
-) => TamaguiComponent<
-  TamaDefer,
-  HTMLElementTagNameMap[Tag],
-  TamaguiComponentPropsBase & HTMLElementSpecificProps<Tag>,
-  HTMLElementStyleBase<Tag>,
-  Variants extends undefined
-    ? {}
-    : AreVariantsUndefined<NonNullable<Variants>> extends true
-      ? {}
-      : GetVariantAcceptedValues<NonNullable<Variants>>,
-  {}
->
-
-type StyledHtmlFactories = {
-  [K in keyof HTMLElementTagNameMap]: StyledHtmlFactory<K>
-}
-
-// use a proxy to make styled.a(), styled.div() etc work
-const styledExport = new Proxy(styled as typeof styled & StyledHtmlFactories, {
-  get(target, prop: string) {
-    if (prop in target) {
-      return (target as any)[prop]
-    }
-    // return factory for HTML elements
-    return (options: any) => styledHtml(prop as keyof HTMLElementTagNameMap, options)
-  },
-})
-
-export { styledExport as styled }
+export { styled }