@tamagui/web 2.7.7 → 3.0.0-beta.1093.1

package/src/styled.tsx

@@ -1,236 +1,260 @@
-import type {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  FormHTMLAttributes,
-  HTMLAttributes,
-  InputHTMLAttributes,
-  LabelHTMLAttributes,
-  SelectHTMLAttributes,
-  TextareaHTMLAttributes,
-} from 'react'
+import { stylePropsInput, stylePropsText } from '@tamagui/helpers'
+
 import { createComponent } from './createComponent'
+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 {
   GetBaseStyles,
   GetNonStyledProps,
+  GetProps,
   GetStaticConfig,
   GetStyledVariants,
-  GetVariantValues,
-  InferStyleProps,
   InferStyledProps,
-  StackStyle,
-  StackStyleBase,
   StaticConfig,
   StaticConfigPublic,
   StylableComponent,
   StyledContext,
+  StyledDynamicFn,
+  StyledDynamicProp,
   TamaDefer,
   TamaguiComponent,
-  TamaguiComponentPropsBase,
-  TextStyle,
-  TextStylePropsBase,
-  ThemeValueByCategory,
   ThemeValueGet,
   VariantDefinitions,
-  VariantSpreadFunction,
 } from './types'
-import type { Text } from './views/Text'
 
 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, 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
-        : GetVariantValues<keyof V[Key]>
+        : V[Key] extends StyledDynamicProp<infer Val>
+          ? Val
+          : GetVariantAcceptedValue<keyof V[Key]>
     }
   : undefined
 
-// ---- 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
-// use StackStyle/TextStyle to get token support (WithThemeShorthandsPseudosMedia)
-type HTMLElementStyleBase<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',
-])
+type GetVariantAcceptedValue<Key> = Key extends 'true' | 'false' ? boolean : Key
 
-/**
- * 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<HTMLElementStyleBase<Tag>> & {
-    name?: string
-    variants?: Variants
-    defaultVariants?: GetVariantAcceptedValues<NonNullable<Variants>>
-    context?: StyledContext
-  }
-) {
-  type StyleBase = HTMLElementStyleBase<Tag>
-  type HTMLProps = HTMLElementSpecificProps<Tag>
-  type VariantProps = Variants extends undefined
+type NoInferLocal<T> = [T][T extends any ? 0 : never]
+type IsAny<T> = 0 extends 1 & T ? true : false
+
+type GetStyledOptionsAcceptedProps<
+  ParentComponent extends StylableComponent,
+  StyledConfig extends StaticConfigPublic,
+  Variants extends VariantDefinitions<ParentComponent, StyledConfig>,
+  Context,
+  ContextPropKeys extends string,
+> = Partial<InferStyledProps<ParentComponent, StyledConfig>> &
+  (AreVariantsUndefined<Variants> extends true
     ? {}
-    : AreVariantsUndefined<NonNullable<Variants>> extends true
+    : Partial<GetVariantAcceptedValues<Variants>>) &
+  GetStyledContextProps<Context, ContextPropKeys>
+
+export type StyledOptions<
+  ParentComponent extends StylableComponent,
+  StyledConfig extends StaticConfigPublic,
+  Variants extends VariantDefinitions<ParentComponent, StyledConfig>,
+  Context extends StyledContext<any> | undefined = undefined,
+  ContextPropKeys extends string = GetStyledContextDefaultKeys<Context>,
+> = GetStyledOptionsAcceptedProps<
+  ParentComponent,
+  StyledConfig,
+  Variants,
+  Context,
+  ContextPropKeys
+> & {
+  displayName?: string
+  variants?: Variants | undefined
+  defaultVariants?: NoInferLocal<GetVariantAcceptedValues<NonNullable<Variants>>>
+  context?: Context
+  contextProps?: readonly Extract<
+    ContextPropKeys,
+    keyof GetStyledContextAllProps<Context> & string
+  >[]
+  render?: string | React.ReactElement
+}
+
+type GetStyledContextAllProps<Context> =
+  Context extends StyledContext<infer Props>
+    ? IsAny<Props> extends true
       ? {}
-      : GetVariantAcceptedValues<NonNullable<Variants>>
-
-  const isText = textLikeElements.has(tag)
-  const { variants, name, defaultVariants, context, ...defaultProps } = options || {}
-
-  const conf: Partial<StaticConfig> = {
-    Component: tag as any,
-    variants: variants as any,
-    defaultProps: defaultProps as any,
-    defaultVariants,
-    componentName: name,
-    isReactNative: false,
-    isText,
-    acceptsClassName: true,
-    context,
-  }
+      : Partial<Props>
+    : {}
+
+type GetStyledContextDefaultKeys<Context> =
+  Context extends StyledContext<infer Props, infer Keys>
+    ? IsAny<Props> extends true
+      ? never
+      : Extract<Keys, keyof Props & string>
+    : never
+
+type GetStyledContextProps<
+  Context,
+  Keys extends string = GetStyledContextDefaultKeys<Context>,
+> =
+  Context extends StyledContext<infer Props>
+    ? IsAny<Props> extends true
+      ? {}
+      : Partial<Pick<Props, Extract<Keys, keyof Props & string>>>
+    : {}
 
-  if (defaultProps['children'] || context) {
-    conf.neverFlatten = true
-  }
+type GetStyledContextVariantProps<
+  ParentComponent extends StylableComponent,
+  Context,
+  Keys extends string,
+> = Omit<GetStyledContextProps<Context, Keys>, keyof GetProps<ParentComponent>>
 
-  const component = createComponent(conf)
+type StyledMergedVariants<
+  ParentComponent extends StylableComponent,
+  StyledConfig extends StaticConfigPublic,
+  Variants extends VariantDefinitions<ParentComponent, StyledConfig>,
+  ParentVariants = GetStyledVariants<ParentComponent>,
+  OurVariantProps = GetVariantAcceptedValues<Variants>,
+> =
+  AreVariantsUndefined<Variants> extends true
+    ? ParentVariants
+    : AreVariantsUndefined<ParentVariants> extends true
+      ? Omit<OurVariantProps, '_isEmpty'>
+      : {
+          [Key in Exclude<keyof ParentVariants | keyof OurVariantProps, '_isEmpty'>]?:
+            | (Key extends keyof ParentVariants ? ParentVariants[Key] : undefined)
+            | (Key extends keyof OurVariantProps ? OurVariantProps[Key] : undefined)
+        }
 
-  return component as any as TamaguiComponent<
-    TamaDefer,
-    HTMLElementTagNameMap[Tag],
-    TamaguiComponentPropsBase & HTMLProps,
-    StyleBase,
-    VariantProps,
-    {}
-  >
-}
+type StyledVariantsWithContext<Variants, ContextProps> = keyof ContextProps extends never
+  ? Variants
+  : {
+      [Key in keyof Variants | keyof ContextProps]?:
+        | (Key extends keyof Variants ? Variants[Key] : never)
+        | (Key extends keyof ContextProps ? ContextProps[Key] : never)
+    }
+
+type StyledComponentResult<
+  ParentComponent extends StylableComponent,
+  StyledConfig extends StaticConfigPublic,
+  Variants extends VariantDefinitions<ParentComponent, StyledConfig>,
+  Context extends StyledContext<any> | undefined = undefined,
+  ContextPropKeys extends string = GetStyledContextDefaultKeys<Context>,
+  ParentStylesBase extends object = GetBaseStyles<ParentComponent, StyledConfig>,
+> = TamaguiComponent<
+  TamaDefer,
+  GetRef<ParentComponent>,
+  GetNonStyledProps<ParentComponent>,
+  ParentStylesBase,
+  StyledVariantsWithContext<
+    StyledMergedVariants<ParentComponent, StyledConfig, Variants>,
+    GetStyledContextVariantProps<ParentComponent, Context, ContextPropKeys>
+  >,
+  GetStaticConfig<ParentComponent, StyledConfig>
+>
 
 /**
  * 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 the implementation through
+ * `createFrontendStyled`.
  */
-function styled<
+function styledFn<
   ParentComponent extends StylableComponent,
   StyledConfig extends StaticConfigPublic,
   Variants extends VariantDefinitions<ParentComponent, StyledConfig>,
+  Context extends StyledContext<any> | undefined = undefined,
+  ContextPropKeys extends string = GetStyledContextDefaultKeys<Context>,
 >(
   ComponentIn: ParentComponent,
-  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues
-  options?: Partial<InferStyledProps<ParentComponent, StyledConfig>> & {
-    name?: string
-    variants?: Variants | undefined
-    defaultVariants?: GetVariantAcceptedValues<Variants>
-    context?: StyledContext
-    render?: string | React.ReactElement
-  },
+  options?: StyledOptions<
+    ParentComponent,
+    StyledConfig,
+    Variants,
+    Context,
+    ContextPropKeys
+  >,
   config?: StyledConfig
+): StyledComponentResult<
+  ParentComponent,
+  StyledConfig,
+  Variants,
+  Context,
+  ContextPropKeys
+>
+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
+ * global setting.
+ */
+export function createFrontendStyled(
+  frontend: StyleFrontend
+): (
+  ComponentIn: any,
+  optionsOrBaseClassName?: any,
+  configOrOptions?: any,
+  maybeConfig?: any
+) => FrontendComponent {
+  return (ComponentIn, optionsOrBaseClassName, configOrOptions, maybeConfig) =>
+    styledImpl(
+      frontend,
+      ComponentIn,
+      optionsOrBaseClassName,
+      configOrOptions,
+      maybeConfig
+    ) as any
+}
+
+function styledImpl<
+  ParentComponent extends StylableComponent,
+  StyledConfig extends StaticConfigPublic,
+  Variants extends VariantDefinitions<ParentComponent, StyledConfig>,
+  Context extends StyledContext<any> | undefined,
+  ContextPropKeys extends string,
+>(
+  // undefined keeps whatever the parent static config already carries, so a
+  // styled() chain never switches frontends halfway
+  frontend: StyleFrontend | undefined,
+  ComponentIn: ParentComponent,
+  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues
+  optionsOrBaseClassName?:
+    | StyledOptions<ParentComponent, StyledConfig, Variants, Context, ContextPropKeys>
+    | string,
+  configOrOptions?:
+    | StyledOptions<ParentComponent, StyledConfig, Variants, Context, ContextPropKeys>
+    | StyledConfig,
+  maybeConfig?: StyledConfig
 ) {
+  const hasBaseClassName = typeof optionsOrBaseClassName === 'string'
+  const baseClassName = hasBaseClassName ? optionsOrBaseClassName : undefined
+  const optionsIn = (hasBaseClassName ? configOrOptions : optionsOrBaseClassName) as
+    | StyledOptions<ParentComponent, StyledConfig, Variants, Context, ContextPropKeys>
+    | undefined
+  const config = (hasBaseClassName ? maybeConfig : configOrOptions) as
+    | StyledConfig
+    | undefined
+  const options = optionsIn
+  const displayName = options?.displayName
+
   // do type stuff at top for easier readability
 
   // get parent props without pseudos and medias so we can rebuild both with new variants
@@ -252,20 +276,6 @@ function styled<
               | (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:
@@ -280,25 +290,45 @@ function styled<
     TamaDefer,
     GetRef<ParentComponent>,
     ParentNonStyledProps,
-    Accepted extends Record<string, any>
-      ? ParentStylesBase & CustomTokenProps
-      : ParentStylesBase,
-    MergedVariants,
+    ParentStylesBase,
+    StyledVariantsWithContext<
+      MergedVariants,
+      GetStyledContextVariantProps<ParentComponent, Context, ContextPropKeys>
+    >,
     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
 
+  const requestedReactNativeInterop = Boolean(
+    config?.isReactNative || parentStaticConfig?.isReactNative
+  )
+
+  if (
+    process.env.TAMAGUI_TARGET !== 'native' &&
+    process.env.NODE_ENV === 'development' &&
+    requestedReactNativeInterop
+  ) {
+    warnOnce(
+      'isReactNative-web-removed',
+      'The isReactNative styled-component option is native-only in Tamagui v3. React Native Web hosts on web are no longer adapted; use a component that accepts className, data-* attributes, and DOM events.'
+    )
+  }
+
+  const isReactNative =
+    process.env.TAMAGUI_TARGET === 'native' &&
+    Boolean(config?.isReactNative || parentStaticConfig?.isReactNative)
+
   const isPlainStyledComponent =
-    !!parentStaticConfig &&
-    !(parentStaticConfig.isReactNative || parentStaticConfig.isHOC)
+    !!parentStaticConfig && !(isReactNative || parentStaticConfig.isHOC)
 
   const isNonStyledHOC = parentStaticConfig?.isHOC && !parentStaticConfig?.isStyledHOC
 
@@ -307,19 +337,29 @@ function styled<
       ? ComponentIn
       : parentStaticConfig?.Component || ComponentIn
 
-  const reactNativeConfig = !parentStaticConfig
-    ? getReactNativeConfig(Component)
-    : undefined
+  const reactNativeConfig =
+    process.env.TAMAGUI_TARGET === 'native' && !parentStaticConfig
+      ? getReactNativeConfig(Component)
+      : undefined
 
-  const isReactNative = Boolean(
-    reactNativeConfig || config?.isReactNative || parentStaticConfig?.isReactNative
-  )
+  const resolvedIsReactNative = Boolean(reactNativeConfig || isReactNative)
 
   const staticConfigProps = (() => {
-    let { variants, name, defaultVariants, context, ...defaultProps } = options || {}
+    let {
+      variants,
+      displayName: _displayName,
+      defaultVariants,
+      context,
+      contextProps,
+      ...defaultProps
+    } = (options || {}) as Record<string, any>
 
     let parentDefaultVariants
     let parentDefaultProps
+    const mergedBaseClassName =
+      parentStaticConfig?.baseClassName && baseClassName
+        ? `${parentStaticConfig.baseClassName} ${baseClassName}`
+        : baseClassName || parentStaticConfig?.baseClassName
 
     if (parentStaticConfig) {
       const avoid = parentStaticConfig.isHOC && !parentStaticConfig.isStyledHOC
@@ -344,12 +384,16 @@ function styled<
           }
         }
         if (parentStaticConfig.variants) {
-          // @ts-expect-error
           variants = mergeVariants(parentStaticConfig.variants, variants)
         }
       }
     }
 
+    const mergedContext = context || parentStaticConfig?.context
+    const mergedContextProps = context
+      ? contextProps
+      : contextProps || parentStaticConfig?.contextProps
+
     // applies everything in the right order! order is important
     if (parentDefaultProps || defaultVariants || parentDefaultVariants) {
       defaultProps = {
@@ -360,20 +404,20 @@ function styled<
       }
     }
 
-    if (parentStaticConfig?.isHOC) {
-      // if HOC we map name => componentName as we have a difference in how we name prop vs styled() there
-      if (name) {
-        // @ts-ignore
-        defaultProps.componentName = name
-      }
-    }
-
+    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 ??
       (isPlainStyledComponent ||
-        isReactNative ||
+        resolvedIsReactNative ||
         (parentStaticConfig?.isHOC && parentStaticConfig?.acceptsClassName))
 
     const conf: Partial<StaticConfig> = {
@@ -382,22 +426,34 @@ function styled<
       ...(!isPlainStyledComponent && {
         Component,
       }),
-      // @ts-expect-error
       variants,
+      baseClassName: mergedBaseClassName,
       defaultProps,
       defaultVariants,
-      componentName: name || parentStaticConfig?.componentName,
-      isReactNative,
+      ...(process.env.TAMAGUI_TARGET === 'native' && {
+        isReactNative: resolvedIsReactNative,
+      }),
       isText,
+      isInput,
+      validStyles,
       acceptsClassName,
-      context,
+      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
     }
 
     // bail on non className views as well
-    if (defaultProps['children'] || !acceptsClassName || context) {
+    if (defaultProps['children'] || !acceptsClassName || mergedContext) {
       conf.neverFlatten = true
     }
 
@@ -417,186 +473,4 @@ function styled<
   return component as any as StyledComponent
 }
 
-// sanity check types:
-
-// type YP = GetProps<typeof InputFrame>
-// type x = YP['onChangeText']
-// type x2 = YP['size']
-// const X = <InputFrame placeholder="red" hoverStyle={{}} />
-
-// import { Stack } from './views/Stack'
-// const X = styled(Stack, {
-//   variants: {
-//     size: {
-//       '...size': (val) => {
-//         return {
-//           pointerEvents: 'auto'
-//         }
-//       }
-//     },
-//     disabled: {
-//       true: {
-//         alignContent: 'center',
-//         opacity: 0.5,
-//         pointerEvents: 'none',
-//       },
-//     },
-//   } as const
-// })
-
-// const TestStyleable = X.styleable<{ abc: 123 }>((props) => {
-//   return null
-// })
-
-// // type variants = GetStyledVariants<typeof X>
-// const y = <X disabled size="$10" />
-
-// sanity check more complex types:
-
-// import { Paragraph } from '../../text/src/Paragraph'
-// import { Text } from './views/Text'
-// import { getFontSized } from '../../get-font-sized/src'
-// import { SizableText } from '../../text/src/SizableText'
-// const Text1 = styled(Text, {
-//   name: 'SizableText',
-//   fontFamily: '$body',
-
-//   variants: {
-//     size: getFontSized,
-//   } as const,
-
-//   defaultVariants: {
-//     size: '$true',
-//   },
-// })
-
-// const Test2 = styled(Text1, {
-//   render: 'p',
-//   userSelect: 'auto',
-//   color: '$color',
-// })
-
-// const Test3 = styled(Test2, {
-//   render: 'p',
-//   userSelect: 'auto',
-//   color: '$color',
-
-//   variants: {
-//     ork: {
-//       true: {}
-//     }
-//   }
-// })
-
-// const Test = styled(Paragraph, {
-//   render: 'p',
-//   userSelect: 'auto',
-//   color: '$color',
-
-//   variants: {
-//     someting: {
-//       true: {},
-//     },
-//   } as const,
-// })
-
-// type X = typeof Paragraph
-// type Props1 = GetProps<typeof Paragraph>
-// type z = typeof Text1
-// type ParentV = GetVariantProps<typeof Text1>
-// type Props = GetProps<typeof Test>
-
-// const y = <Test someting>sadad</Test>
-// const z = <Test3 someting="$true" ork>sadad</Test3>
-
-//
-// merges variant types properly:
-
-// const OneVariant = styled(Stack, {
-//   variants: {
-//     variant: {
-//       test: { backgroundColor: 'gray' },
-//     },
-//   } as const,
-// })
-// const Second = styled(Stack, {
-//   variants: {
-//     variant: {
-//       simple: { backgroundColor: 'gray' },
-//       colorful: { backgroundColor: 'violet' },
-//     },
-//   } as const,
-// })
-// const TwoVariant = styled(OneVariant, {
-//   variants: {
-//     variant: {
-//       simple: { backgroundColor: 'gray' },
-//       colorful: { backgroundColor: 'violet' },
-//     },
-//   } as const,
-// })
-
-// type X = typeof OneVariant extends TamaguiComponent<any, any, any, infer V> ? V : any
-// type V = typeof Second extends TamaguiComponent<any, any, any, infer V> ? V : any
-
-// type V2 = VariantDefinitions<typeof OneVariant>
-
-// type R = typeof TwoVariant extends TamaguiComponent<any, any, any, infer V> ? V : any
-
-// type Keys = keyof X | keyof V
-// type Z = {
-//   [Key in Keys]: V[Key] | X[Key]
-// }
-
-// const a: Z = {
-//   variant: 'colorful',
-// }
-// const b: Z = {
-//   variant: 'simple',
-// }
-// const c: Z = {
-//   variant: 'invalid',
-// }
-
-// const y = <TwoVariant variant="colorful" />
-
-// ---- styled.a, styled.div, styled.button, etc. API ----
-
-type StyledHtmlFactory<Tag extends keyof HTMLElementTagNameMap> = <
-  Variants extends VariantDefinitions<any, any> | undefined = undefined,
->(
-  options?: Partial<HTMLElementStyleBase<Tag>> & {
-    name?: 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 }