@tamagui/web 1.8.5 → 1.9.0

package/dist/cjs/styled.js

@@ -72,7 +72,7 @@ function styled(Component, options, staticExtractionOptions) {
         variants,
         defaultProps,
         defaultVariants,
-        componentName: name,
+        componentName: name || (parentStaticConfig == null ? void 0 : parentStaticConfig.componentName),
         isReactNative,
         isText,
         acceptsClassName,

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!Component) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n  const isTamagui = !!parentStaticConfig\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA8B;AAG9B,6BAAgC;AAChC,8BAAyC;AAuClC,SAAS,OAId,WAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,WAAW;AACd,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,8BAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAM,YAAY,CAAC,CAAC;AAEpB,QAAM,gBAAgB;AAAA,IACpB,iDAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,iDAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AAEL,YAAM,aAAc,iBAAiB,iDAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,gBAAY,wCAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
+  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!Component) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n  const isTamagui = !!parentStaticConfig\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name || parentStaticConfig?.componentName,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA8B;AAG9B,6BAAgC;AAChC,8BAAyC;AAuClC,SAAS,OAId,WAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,WAAW;AACd,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,8BAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAM,YAAY,CAAC,CAAC;AAEpB,QAAM,gBAAgB;AAAA,IACpB,iDAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,iDAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AAEL,YAAM,aAAc,iBAAiB,iDAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,SAAQ,yDAAoB;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,gBAAY,wCAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
   "names": []
 }

package/dist/esm/styled.js

@@ -49,7 +49,7 @@ function styled(Component, options, staticExtractionOptions) {
         variants,
         defaultProps,
         defaultVariants,
-        componentName: name,
+        componentName: name || (parentStaticConfig == null ? void 0 : parentStaticConfig.componentName),
         isReactNative,
         isText,
         acceptsClassName,

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!Component) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n  const isTamagui = !!parentStaticConfig\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAuClC,SAAS,OAId,WAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,WAAW;AACd,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,eAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAM,YAAY,CAAC,CAAC;AAEpB,QAAM,gBAAgB;AAAA,IACpB,yBAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AAEL,YAAM,aAAc,iBAAiB,yBAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,YAAY,gBAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
+  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!Component) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n  const isTamagui = !!parentStaticConfig\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name || parentStaticConfig?.componentName,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAuClC,SAAS,OAId,WAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,WAAW;AACd,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,eAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAM,YAAY,CAAC,CAAC;AAEpB,QAAM,gBAAgB;AAAA,IACpB,yBAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AAEL,YAAM,aAAc,iBAAiB,yBAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,SAAQ,yDAAoB;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,YAAY,gBAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
   "names": []
 }

package/dist/esm/styled.mjs

@@ -49,7 +49,7 @@ function styled(Component, options, staticExtractionOptions) {
         variants,
         defaultProps,
         defaultVariants,
-        componentName: name,
+        componentName: name || (parentStaticConfig == null ? void 0 : parentStaticConfig.componentName),
         isReactNative,
         isText,
         acceptsClassName,

package/dist/esm/styled.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!Component) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n  const isTamagui = !!parentStaticConfig\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAuClC,SAAS,OAId,WAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,WAAW;AACd,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,eAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAM,YAAY,CAAC,CAAC;AAEpB,QAAM,gBAAgB;AAAA,IACpB,yBAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AAEL,YAAM,aAAc,iBAAiB,yBAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,YAAY,gBAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
+  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!Component) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n  const isTamagui = !!parentStaticConfig\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name || parentStaticConfig?.componentName,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAuClC,SAAS,OAId,WAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,WAAW;AACd,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,eAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAM,YAAY,CAAC,CAAC;AAEpB,QAAM,gBAAgB;AAAA,IACpB,yBAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AAEL,YAAM,aAAc,iBAAiB,yBAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,SAAQ,yDAAoB;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,YAAY,gBAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.8.5",
+  "version": "1.9.0",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,19 +27,19 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.8.5",
-    "@tamagui/constants": "1.8.5",
-    "@tamagui/helpers": "1.8.5",
-    "@tamagui/normalize-css-color": "1.8.5",
-    "@tamagui/use-did-finish-ssr": "1.8.5",
-    "@tamagui/use-event": "1.8.5",
-    "@tamagui/use-force-update": "1.8.5"
+    "@tamagui/compose-refs": "1.9.0",
+    "@tamagui/constants": "1.9.0",
+    "@tamagui/helpers": "1.9.0",
+    "@tamagui/normalize-css-color": "1.9.0",
+    "@tamagui/use-did-finish-ssr": "1.9.0",
+    "@tamagui/use-event": "1.9.0",
+    "@tamagui/use-force-update": "1.9.0"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.8.5",
+    "@tamagui/build": "1.9.0",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/styled.tsx

@@ -117,7 +117,7 @@ export function styled<
         variants,
         defaultProps,
         defaultVariants,
-        componentName: name,
+        componentName: name || parentStaticConfig?.componentName,
         isReactNative,
         isText,
         acceptsClassName,