@tamagui/core 1.0.1-beta.46 → 1.0.1-beta.49

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types'\nimport { Stack } from './views/Stack'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n  name?: string\n  variants?: VariantDefinitions<ParentComponent> | undefined\n  defaultVariants?: { [key: string]: any }\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  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  const staticConfigProps = (() => {\n    if (options) {\n      const { variants, name, defaultVariants, ...defaultProps } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n      const isReactNativeWeb =\n        'staticConfig' in Component\n          ? Component.staticConfig.isReactNativeWeb\n          : RNComponents.has(Component)\n      const reactNativeWebComponent = isReactNativeWeb\n        ? Component['staticConfig']?.reactNativeWebComponent || Component\n        : null\n      const isTamagui = !isReactNativeWeb && 'staticConfig' in Component\n      const Comp = reactNativeWebComponent || (Component as any)\n      const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false))\n      const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false))\n      const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false))\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        isTamagui,\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        isReactNativeWeb,\n        // for nesting multiple levels of rnw styled() need keep use the OG component\n        reactNativeWebComponent,\n        isInput,\n        isText,\n        isImage,\n      }\n\n      return conf\n    }\n    return {}\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  type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>\n    ? P\n    : GetProps<ParentComponent>\n  type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\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  return component as TamaguiComponent<\n    Props,\n    // TODO infer ref\n    any,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n}\n\n// breaking...\n// TODO see core/types.ts bug\n\n// export const XStack = styled(Stack, {\n//   variants: {\n//     horizontal: {\n//       true: {\n//         // flexDirection: 'row',\n//         width: 0,\n//       },\n//     },\n//   },\n// })\n\n// const Separator = styled(Stack, {\n//   variants: {\n//     vertical: {\n//       true: {\n//         flexDirection: 'row',\n//       },\n//     },\n//   },\n//            <--- have to add as const to get working???\n// })\n\n// type props = GetProps<typeof XStack>\n// type variants = typeof XStack extends TamaguiComponent<any, infer Variants> ? Variants : never\n// type variants2 = typeof Separator extends TamaguiComponent<any, infer Variants> ? Variants : never\n\n// const x = <XStack horizontal />\n// const x2 = <Separator vertical />\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AAqBO,gBAIL,WAEA,SAMA,yBACA;AACA,QAAM,oBAAqB,OAAM;AAtCnC;AAuCI,QAAI,SAAS;AACX,YAAM,EAAE,UAAU,MAAM,oBAAoB,iBAAiB;AAC7D,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,mBACJ,kBAAkB,YACd,UAAU,aAAa,mBACvB,aAAa,IAAI,SAAS;AAChC,YAAM,0BAA0B,mBAC5B,iBAAU,oBAAV,mBAA2B,4BAA2B,YACtD;AACJ,YAAM,YAAY,CAAC,oBAAoB,kBAAkB;AACzD,YAAM,OAAO,2BAA4B;AACzC,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,QAAQ;AAC1E,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,YAAY;AAC9E,YAAM,SAAS,CAAC,CAAE,cAAa,UAAW,EAAC,YAAY,WAAW,SAAS,OAAO;AAElF,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AA4B9D,SAAO;AAOT;AA7FgB;",
+  "sourcesContent": ["import { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n  name?: string\n  variants?: VariantDefinitions<ParentComponent> | undefined\n  defaultVariants?: { [key: string]: any }\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  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // for now wrapping a styled() around an extractable() HOC (like Button) isn't allowed\n  if (process.env.NODE_ENV === 'development') {\n    if (Component['staticConfig'] && Component['staticConfig'].isExtractable) {\n      console.warn(\n        `Warning: Wrapping styled() around an extractable HOC component isn't allowed yet. Support for this is on the roadmap, see: https://github.com/tamagui/tamagui/issues/88.`\n      )\n      // return (props) => {\n      //   // @ts-ignore\n      //   return <Component {...options} {...props} />\n      // }\n    }\n  }\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const { variants, name, defaultVariants, ...defaultProps } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n      const isReactNativeWeb =\n        'staticConfig' in Component\n          ? Component.staticConfig.isReactNativeWeb\n          : RNComponents.has(Component)\n      const reactNativeWebComponent = isReactNativeWeb\n        ? Component['staticConfig']?.reactNativeWebComponent || Component\n        : null\n      const isTamagui = !isReactNativeWeb && 'staticConfig' in Component\n      const Comp = reactNativeWebComponent || (Component as any)\n      const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false))\n      const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false))\n      const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false))\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        isTamagui,\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        isReactNativeWeb,\n        // for nesting multiple levels of rnw styled() need keep use the OG component\n        reactNativeWebComponent,\n        isInput,\n        isText,\n        isImage,\n      }\n\n      return conf\n    }\n    return {}\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  type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>\n    ? P\n    : GetProps<ParentComponent>\n  type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\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  return component as TamaguiComponent<\n    Props,\n    // TODO infer ref\n    any,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n}\n\n// breaking...\n// TODO see core/types.ts bug\n\n// export const XStack = styled(Stack, {\n//   variants: {\n//     horizontal: {\n//       true: {\n//         // flexDirection: 'row',\n//         width: 0,\n//       },\n//     },\n//   },\n// })\n\n// const Separator = styled(Stack, {\n//   variants: {\n//     vertical: {\n//       true: {\n//         flexDirection: 'row',\n//       },\n//     },\n//   },\n//            <--- have to add as const to get working???\n// })\n\n// type props = GetProps<typeof XStack>\n// type variants = typeof XStack extends TamaguiComponent<any, infer Variants> ? Variants : never\n// type variants2 = typeof Separator extends TamaguiComponent<any, infer Variants> ? Variants : never\n\n// const x = <XStack horizontal />\n// const x2 = <Separator vertical />\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AAoBO,gBAIL,WAEA,SAMA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,UAAU,mBAAmB,UAAU,gBAAgB,eAAe;AACxE,cAAQ,KACN,0KACF;AAAA,IAKF;AAAA,EACF;AAEA,QAAM,oBAAqB,OAAM;AAlDnC;AAmDI,QAAI,SAAS;AACX,YAAM,EAAE,UAAU,MAAM,oBAAoB,iBAAiB;AAC7D,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,mBACJ,kBAAkB,YACd,UAAU,aAAa,mBACvB,aAAa,IAAI,SAAS;AAChC,YAAM,0BAA0B,mBAC5B,iBAAU,oBAAV,mBAA2B,4BAA2B,YACtD;AACJ,YAAM,YAAY,CAAC,oBAAoB,kBAAkB;AACzD,YAAM,OAAO,2BAA4B;AACzC,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,QAAQ;AAC1E,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,YAAY;AAC9E,YAAM,SAAS,CAAC,CAAE,cAAa,UAAW,EAAC,YAAY,WAAW,SAAS,OAAO;AAElF,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AA4B9D,SAAO;AAOT;AA1GgB;",
   "names": []
 }

package/dist/esm/views/Slot.js

@@ -2,6 +2,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { composeRefs } from "@tamagui/compose-refs";
 import * as React from "react";
+import { isWeb } from "../constants/platform";
 const Slot = React.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
   return /* @__PURE__ */ React.createElement(SlotClone, {
@@ -25,15 +26,11 @@ SlotClone.displayName = "SlotClone";
 const Slottable = /* @__PURE__ */ __name(({ children }) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 }, "Slottable");
-function isSlottable(child) {
-  return React.isValidElement(child);
-}
-__name(isSlottable, "isSlottable");
-const pressMap = {
+const pressMap = isWeb ? {
   onPress: "onClick",
-  onPressOut: "onMouseOut",
-  onPressIn: "onMouseIn"
-};
+  onPressOut: "onMouseUp",
+  onPressIn: "onMouseDown"
+} : {};
 function mergeProps(child, slotProps) {
   const childProps = child.props;
   const overrideProps = { ...childProps };

package/dist/esm/views/Slot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Slot.tsx"],
-  "sourcesContent": ["// via radix\n\nimport { composeRefs } from '@tamagui/compose-refs'\nimport * as React from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\nexport type SlotProps = {\n  children?: React.ReactNode\n}\n\nexport const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n  return (\n    <SlotClone {...slotProps} ref={forwardedRef}>\n      {children}\n    </SlotClone>\n  )\n})\n\nSlot.displayName = 'Slot'\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n  children: React.ReactNode\n}\n\nconst SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n\n  if (React.isValidElement(children)) {\n    const childProps = {\n      ...mergeProps(children, slotProps),\n      ref: composeRefs(forwardedRef, (children as any).ref),\n    }\n    return React.cloneElement(children, childProps)\n  }\n\n  return React.Children.count(children) > 1 ? React.Children.only(null) : null\n})\n\nSlotClone.displayName = 'SlotClone'\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Slottable = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement {\n  return React.isValidElement(child)\n}\n\nconst pressMap = {\n  onPress: 'onClick',\n  onPressOut: 'onMouseOut',\n  onPressIn: 'onMouseIn',\n}\n\nfunction mergeProps(child: any, slotProps: AnyProps) {\n  const childProps = child.props\n\n  // all child props should override\n  const overrideProps = { ...childProps }\n\n  const isHTMLChild = typeof child.type === 'string'\n\n  if (isHTMLChild) {\n    for (const key in pressMap) {\n      if (key in slotProps) {\n        slotProps[pressMap[key]] = slotProps[key]\n        delete slotProps[key]\n      }\n    }\n  }\n\n  for (let propName in childProps) {\n    const slotPropValue = slotProps[propName]\n    const childPropValue = childProps[propName]\n\n    if (isHTMLChild && pressMap[propName]) {\n      propName = pressMap[propName]\n      delete overrideProps[propName]\n    }\n\n    const isHandler = /^on[A-Z]/.test(propName)\n    // if it's a handler, modify the override by composing the base handler\n    if (isHandler) {\n      overrideProps[propName] = (...args: unknown[]) => {\n        childPropValue?.(...args)\n        slotPropValue?.(...args)\n      }\n    }\n    // if it's `style`, we merge them\n    else if (propName === 'style') {\n      overrideProps[propName] = { ...slotPropValue, ...childPropValue }\n    } else if (propName === 'className') {\n      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ')\n    }\n  }\n\n  return { ...slotProps, ...overrideProps }\n}\n"],
-  "mappings": ";;AAEA;AACA;AAUO,MAAM,OAAO,MAAM,WAAmC,CAAC,OAAO,iBAAiB;AACpF,QAAM,EAAE,aAAa,cAAc;AACnC,SACE,oCAAC;AAAA,IAAW,GAAG;AAAA,IAAW,KAAK;AAAA,KAC5B,QACH;AAEJ,CAAC;AAED,KAAK,cAAc;AAUnB,MAAM,YAAY,MAAM,WAAgC,CAAC,OAAO,iBAAiB;AAC/E,QAAM,EAAE,aAAa,cAAc;AAEnC,MAAI,MAAM,eAAe,QAAQ,GAAG;AAClC,UAAM,aAAa;AAAA,MACjB,GAAG,WAAW,UAAU,SAAS;AAAA,MACjC,KAAK,YAAY,cAAe,SAAiB,GAAG;AAAA,IACtD;AACA,WAAO,MAAM,aAAa,UAAU,UAAU;AAAA,EAChD;AAEA,SAAO,MAAM,SAAS,MAAM,QAAQ,IAAI,IAAI,MAAM,SAAS,KAAK,IAAI,IAAI;AAC1E,CAAC;AAED,UAAU,cAAc;AAMjB,MAAM,YAAY,wBAAC,EAAE,eAA8C;AACxE,SAAO,0DAAG,QAAS;AACrB,GAFyB;AAQzB,qBAAqB,OAAqD;AACxE,SAAO,MAAM,eAAe,KAAK;AACnC;AAFS;AAIT,MAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,WAAW;AACb;AAEA,oBAAoB,OAAY,WAAqB;AACnD,QAAM,aAAa,MAAM;AAGzB,QAAM,gBAAgB,EAAE,GAAG,WAAW;AAEtC,QAAM,cAAc,OAAO,MAAM,SAAS;AAE1C,MAAI,aAAa;AACf,eAAW,OAAO,UAAU;AAC1B,UAAI,OAAO,WAAW;AACpB,kBAAU,SAAS,QAAQ,UAAU;AACrC,eAAO,UAAU;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAEA,WAAS,YAAY,YAAY;AAC/B,UAAM,gBAAgB,UAAU;AAChC,UAAM,iBAAiB,WAAW;AAElC,QAAI,eAAe,SAAS,WAAW;AACrC,iBAAW,SAAS;AACpB,aAAO,cAAc;AAAA,IACvB;AAEA,UAAM,YAAY,WAAW,KAAK,QAAQ;AAE1C,QAAI,WAAW;AACb,oBAAc,YAAY,IAAI,SAAoB;AAChD,yDAAiB,GAAG;AACpB,uDAAgB,GAAG;AAAA,MACrB;AAAA,IACF,WAES,aAAa,SAAS;AAC7B,oBAAc,YAAY,EAAE,GAAG,eAAe,GAAG,eAAe;AAAA,IAClE,WAAW,aAAa,aAAa;AACnC,oBAAc,YAAY,CAAC,eAAe,cAAc,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IACpF;AAAA,EACF;AAEA,SAAO,EAAE,GAAG,WAAW,GAAG,cAAc;AAC1C;AA3CS;",
+  "sourcesContent": ["// via radix\n\nimport { composeRefs } from '@tamagui/compose-refs'\nimport * as React from 'react'\n\nimport { isWeb } from '../constants/platform'\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\nexport type SlotProps = {\n  children?: React.ReactNode\n}\n\nexport const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n  return (\n    <SlotClone {...slotProps} ref={forwardedRef}>\n      {children}\n    </SlotClone>\n  )\n})\n\nSlot.displayName = 'Slot'\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n  children: React.ReactNode\n}\n\nconst SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n\n  if (React.isValidElement(children)) {\n    const childProps = {\n      ...mergeProps(children, slotProps),\n      ref: composeRefs(forwardedRef, (children as any).ref),\n    }\n    return React.cloneElement(children, childProps)\n  }\n\n  return React.Children.count(children) > 1 ? React.Children.only(null) : null\n})\n\nSlotClone.displayName = 'SlotClone'\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Slottable = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>\n\n// function isSlottable(child: React.ReactNode): child is React.ReactElement {\n//   return React.isValidElement(child)\n// }\n\nconst pressMap = isWeb\n  ? {\n      onPress: 'onClick',\n      onPressOut: 'onMouseUp',\n      onPressIn: 'onMouseDown',\n    }\n  : {}\n\nfunction mergeProps(child: any, slotProps: AnyProps) {\n  const childProps = child.props\n\n  // all child props should override\n  const overrideProps = { ...childProps }\n\n  const isHTMLChild = typeof child.type === 'string'\n\n  if (isHTMLChild) {\n    for (const key in pressMap) {\n      if (key in slotProps) {\n        slotProps[pressMap[key]] = slotProps[key]\n        delete slotProps[key]\n      }\n    }\n  }\n\n  for (let propName in childProps) {\n    const slotPropValue = slotProps[propName]\n    const childPropValue = childProps[propName]\n\n    if (isHTMLChild && pressMap[propName]) {\n      propName = pressMap[propName]\n      delete overrideProps[propName]\n    }\n\n    const isHandler = /^on[A-Z]/.test(propName)\n    // if it's a handler, modify the override by composing the base handler\n    if (isHandler) {\n      overrideProps[propName] = (...args: unknown[]) => {\n        childPropValue?.(...args)\n        slotPropValue?.(...args)\n      }\n    }\n    // if it's `style`, we merge them\n    else if (propName === 'style') {\n      overrideProps[propName] = { ...slotPropValue, ...childPropValue }\n    } else if (propName === 'className') {\n      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ')\n    }\n  }\n\n  return { ...slotProps, ...overrideProps }\n}\n"],
+  "mappings": ";;AAEA;AACA;AAEA;AAUO,MAAM,OAAO,MAAM,WAAmC,CAAC,OAAO,iBAAiB;AACpF,QAAM,EAAE,aAAa,cAAc;AACnC,SACE,oCAAC;AAAA,IAAW,GAAG;AAAA,IAAW,KAAK;AAAA,KAC5B,QACH;AAEJ,CAAC;AAED,KAAK,cAAc;AAUnB,MAAM,YAAY,MAAM,WAAgC,CAAC,OAAO,iBAAiB;AAC/E,QAAM,EAAE,aAAa,cAAc;AAEnC,MAAI,MAAM,eAAe,QAAQ,GAAG;AAClC,UAAM,aAAa;AAAA,MACjB,GAAG,WAAW,UAAU,SAAS;AAAA,MACjC,KAAK,YAAY,cAAe,SAAiB,GAAG;AAAA,IACtD;AACA,WAAO,MAAM,aAAa,UAAU,UAAU;AAAA,EAChD;AAEA,SAAO,MAAM,SAAS,MAAM,QAAQ,IAAI,IAAI,MAAM,SAAS,KAAK,IAAI,IAAI;AAC1E,CAAC;AAED,UAAU,cAAc;AAMjB,MAAM,YAAY,wBAAC,EAAE,eAA8C;AACxE,SAAO,0DAAG,QAAS;AACrB,GAFyB;AAYzB,MAAM,WAAW,QACb;AAAA,EACE,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,WAAW;AACb,IACA,CAAC;AAEL,oBAAoB,OAAY,WAAqB;AACnD,QAAM,aAAa,MAAM;AAGzB,QAAM,gBAAgB,EAAE,GAAG,WAAW;AAEtC,QAAM,cAAc,OAAO,MAAM,SAAS;AAE1C,MAAI,aAAa;AACf,eAAW,OAAO,UAAU;AAC1B,UAAI,OAAO,WAAW;AACpB,kBAAU,SAAS,QAAQ,UAAU;AACrC,eAAO,UAAU;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAEA,WAAS,YAAY,YAAY;AAC/B,UAAM,gBAAgB,UAAU;AAChC,UAAM,iBAAiB,WAAW;AAElC,QAAI,eAAe,SAAS,WAAW;AACrC,iBAAW,SAAS;AACpB,aAAO,cAAc;AAAA,IACvB;AAEA,UAAM,YAAY,WAAW,KAAK,QAAQ;AAE1C,QAAI,WAAW;AACb,oBAAc,YAAY,IAAI,SAAoB;AAChD,yDAAiB,GAAG;AACpB,uDAAgB,GAAG;AAAA,MACrB;AAAA,IACF,WAES,aAAa,SAAS;AAC7B,oBAAc,YAAY,EAAE,GAAG,eAAe,GAAG,eAAe;AAAA,IAClE,WAAW,aAAa,aAAa;AACnC,oBAAc,YAAY,CAAC,eAAe,cAAc,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IACpF;AAAA,EACF;AAEA,SAAO,EAAE,GAAG,WAAW,GAAG,cAAc;AAC1C;AA3CS;",
   "names": []
 }

package/dist/esm/views/Theme.js

@@ -8,13 +8,14 @@ React["createElement"];
 const Theme = memo(/* @__PURE__ */ __name(function Theme2(props) {
   var _a, _b;
   const { name, theme, themeManager, themes, className } = useChangeThemeEffect(props.name, props.componentName, props);
-  if (!themes || !name || !theme) {
+  const missingTheme = !themes || !name || !theme;
+  const contents = useMemo(() => missingTheme ? null : wrapThemeManagerContext(props.children, themeManager), [props.children, themeManager]);
+  if (missingTheme) {
     if (name && !theme && process.env.NODE_ENV === "development") {
       console.warn(`No theme found by name ${name}`);
     }
     return props.children;
   }
-  const contents = useMemo(() => wrapThemeManagerContext(props.children, themeManager), [props.children, themeManager]);
   if (isWeb) {
     return /* @__PURE__ */ React.createElement("span", {
       className: [

package/dist/esm/views/Theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { wrapThemeManagerContext } from '../helpers/wrapThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../hooks/useTheme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    props.componentName,\n    props\n  )\n\n  if (!themes || !name || !theme) {\n    if (name && !theme && process.env.NODE_ENV === 'development') {\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(\n    () => wrapThemeManagerContext(props.children, themeManager),\n    [props.children, themeManager]\n  )\n\n  if (isWeb) {\n    return (\n      <span\n        className={[\n          `tui_Theme`,\n          ...(!props.disableThemeClass ? [props.className, className].filter(Boolean) : []),\n        ].join(' ')}\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: themes[name]?.color?.toString(),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n})\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AACA;AAIA,MAAM;AAEC,MAAM,QAAQ,KAAK,uCAAe,OAAmB;AAV5D;AAWE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,qBACvD,MAAM,MACN,MAAM,eACN,KACF;AAEA,MAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO;AAC9B,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAC5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAIA,QAAM,WAAW,QACf,MAAM,wBAAwB,MAAM,UAAU,YAAY,GAC1D,CAAC,MAAM,UAAU,YAAY,CAC/B;AAEA,MAAI,OAAO;AACT,WACE,oCAAC;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,GAAI,CAAC,MAAM,oBAAoB,CAAC,MAAM,WAAW,SAAS,EAAE,OAAO,OAAO,IAAI,CAAC;AAAA,MACjF,EAAE,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,GAxC0B,QAwCzB;",
+  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { wrapThemeManagerContext } from '../helpers/wrapThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../hooks/useTheme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    props.componentName,\n    props\n  )\n\n  const missingTheme = !themes || !name || !theme\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(\n    () => (missingTheme ? null : wrapThemeManagerContext(props.children, themeManager)),\n    [props.children, themeManager]\n  )\n\n  if (missingTheme) {\n    if (name && !theme && process.env.NODE_ENV === 'development') {\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  if (isWeb) {\n    return (\n      <span\n        className={[\n          `tui_Theme`,\n          ...(!props.disableThemeClass ? [props.className, className].filter(Boolean) : []),\n        ].join(' ')}\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: themes[name]?.color?.toString(),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n})\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AACA;AAIA,MAAM;AAEC,MAAM,QAAQ,KAAK,uCAAe,OAAmB;AAV5D;AAWE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,qBACvD,MAAM,MACN,MAAM,eACN,KACF;AAEA,QAAM,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;AAI1C,QAAM,WAAW,QACf,MAAO,eAAe,OAAO,wBAAwB,MAAM,UAAU,YAAY,GACjF,CAAC,MAAM,UAAU,YAAY,CAC/B;AAEA,MAAI,cAAc;AAChB,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAC5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,OAAO;AACT,WACE,oCAAC;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,GAAI,CAAC,MAAM,oBAAoB,CAAC,MAAM,WAAW,SAAS,EAAE,OAAO,OAAO,IAAI,CAAC;AAAA,MACjF,EAAE,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,GA1C0B,QA0CzB;",
   "names": []
 }

package/dist/jsx/Tamagui.js

@@ -34,6 +34,9 @@ const getValueFromIdentifier = /* @__PURE__ */ __name((identifier) => {
 const setIdentifierValue = /* @__PURE__ */ __name((identifier, value) => {
   identifierToValue.set(identifier, value);
 }, "setIdentifierValue");
+if (!globalThis["Tamagui"]) {
+  globalThis["Tamagui"] = Tamagui;
+}
 export {
   Tamagui,
   getValueFromIdentifier,

package/dist/jsx/conf.js

@@ -1,6 +1,5 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { Tamagui } from "./Tamagui";
 let conf;
 const setConfig = /* @__PURE__ */ __name((next) => {
   conf = next;
@@ -20,9 +19,6 @@ const onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
   } else {
     configListeners.add(cb);
   }
-  if (!globalThis["Tamagui"]) {
-    globalThis["Tamagui"] = Tamagui;
-  }
 }, "onConfiguredOnce");
 export {
   configListeners,

package/dist/jsx/createComponent.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { stylePropsView } from "@tamagui/helpers";
+import { stylePropsView, validStyles } from "@tamagui/helpers";
 import { useForceUpdate } from "@tamagui/use-force-update";
 import React, {
   Children,
@@ -244,164 +244,7 @@ function createComponent(configIn, ParentComponent) {
         ...webProps
       } = nonTamaguiProps;
       viewProps = webProps;
-      if (!viewProps.role && accessibilityRole) {
-        if (accessibilityRole === "none") {
-          viewProps.role = "presentation";
-        } else {
-          const webRole = accessibilityRoleToWebRole[accessibilityRole];
-          if (webRole != null) {
-            viewProps.role = webRole || accessibilityRole;
-          }
-        }
-      }
-      const role = viewProps.role;
-      if (accessibilityActiveDescendant != null) {
-        viewProps["aria-activedescendant"] = accessibilityActiveDescendant;
-      }
-      if (accessibilityAtomic != null) {
-        viewProps["aria-atomic"] = accessibilityAtomic;
-      }
-      if (accessibilityAutoComplete != null) {
-        viewProps["aria-autocomplete"] = accessibilityAutoComplete;
-      }
-      if (accessibilityBusy != null) {
-        viewProps["aria-busy"] = accessibilityBusy;
-      }
-      if (accessibilityChecked != null) {
-        viewProps["aria-checked"] = accessibilityChecked;
-      }
-      if (accessibilityColumnCount != null) {
-        viewProps["aria-colcount"] = accessibilityColumnCount;
-      }
-      if (accessibilityColumnIndex != null) {
-        viewProps["aria-colindex"] = accessibilityColumnIndex;
-      }
-      if (accessibilityColumnSpan != null) {
-        viewProps["aria-colspan"] = accessibilityColumnSpan;
-      }
-      if (accessibilityControls != null) {
-        viewProps["aria-controls"] = processIDRefList(accessibilityControls);
-      }
-      if (accessibilityCurrent != null) {
-        viewProps["aria-current"] = accessibilityCurrent;
-      }
-      if (accessibilityDescribedBy != null) {
-        viewProps["aria-describedby"] = processIDRefList(accessibilityDescribedBy);
-      }
-      if (accessibilityDetails != null) {
-        viewProps["aria-details"] = accessibilityDetails;
-      }
-      if (disabled === true) {
-        viewProps["aria-disabled"] = true;
-        if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") {
-          viewProps.disabled = true;
-        }
-      }
-      if (accessibilityErrorMessage != null) {
-        viewProps["aria-errormessage"] = accessibilityErrorMessage;
-      }
-      if (accessibilityExpanded != null) {
-        viewProps["aria-expanded"] = accessibilityExpanded;
-      }
-      if (accessibilityFlowTo != null) {
-        viewProps["aria-flowto"] = processIDRefList(accessibilityFlowTo);
-      }
-      if (accessibilityHasPopup != null) {
-        viewProps["aria-haspopup"] = accessibilityHasPopup;
-      }
-      if (accessibilityHidden === true) {
-        viewProps["aria-hidden"] = accessibilityHidden;
-      }
-      if (accessibilityInvalid != null) {
-        viewProps["aria-invalid"] = accessibilityInvalid;
-      }
-      if (accessibilityKeyShortcuts != null && Array.isArray(accessibilityKeyShortcuts)) {
-        viewProps["aria-keyshortcuts"] = accessibilityKeyShortcuts.join(" ");
-      }
-      if (accessibilityLabel != null) {
-        viewProps["aria-label"] = accessibilityLabel;
-      }
-      if (accessibilityLabelledBy != null) {
-        viewProps["aria-labelledby"] = processIDRefList(accessibilityLabelledBy);
-      }
-      if (accessibilityLevel != null) {
-        viewProps["aria-level"] = accessibilityLevel;
-      }
-      if (accessibilityLiveRegion != null) {
-        viewProps["aria-live"] = accessibilityLiveRegion === "none" ? "off" : accessibilityLiveRegion;
-      }
-      if (accessibilityModal != null) {
-        viewProps["aria-modal"] = accessibilityModal;
-      }
-      if (accessibilityMultiline != null) {
-        viewProps["aria-multiline"] = accessibilityMultiline;
-      }
-      if (accessibilityMultiSelectable != null) {
-        viewProps["aria-multiselectable"] = accessibilityMultiSelectable;
-      }
-      if (accessibilityOrientation != null) {
-        viewProps["aria-orientation"] = accessibilityOrientation;
-      }
-      if (accessibilityOwns != null) {
-        viewProps["aria-owns"] = processIDRefList(accessibilityOwns);
-      }
-      if (accessibilityPlaceholder != null) {
-        viewProps["aria-placeholder"] = accessibilityPlaceholder;
-      }
-      if (accessibilityPosInSet != null) {
-        viewProps["aria-posinset"] = accessibilityPosInSet;
-      }
-      if (accessibilityPressed != null) {
-        viewProps["aria-pressed"] = accessibilityPressed;
-      }
-      if (accessibilityReadOnly != null) {
-        viewProps["aria-readonly"] = accessibilityReadOnly;
-        if (elementType === "input" || elementType === "select" || elementType === "textarea") {
-          viewProps.readOnly = true;
-        }
-      }
-      if (accessibilityRequired != null) {
-        viewProps["aria-required"] = accessibilityRequired;
-        if (elementType === "input" || elementType === "select" || elementType === "textarea") {
-          viewProps.required = true;
-        }
-      }
-      if (accessibilityRoleDescription != null) {
-        viewProps["aria-roledescription"] = accessibilityRoleDescription;
-      }
-      if (accessibilityRowCount != null) {
-        viewProps["aria-rowcount"] = accessibilityRowCount;
-      }
-      if (accessibilityRowIndex != null) {
-        viewProps["aria-rowindex"] = accessibilityRowIndex;
-      }
-      if (accessibilityRowSpan != null) {
-        viewProps["aria-rowspan"] = accessibilityRowSpan;
-      }
-      if (accessibilitySelected != null) {
-        viewProps["aria-selected"] = accessibilitySelected;
-      }
-      if (accessibilitySetSize != null) {
-        viewProps["aria-setsize"] = accessibilitySetSize;
-      }
-      if (accessibilitySort != null) {
-        viewProps["aria-sort"] = accessibilitySort;
-      }
-      if (accessibilityValueMax != null) {
-        viewProps["aria-valuemax"] = accessibilityValueMax;
-      }
-      if (accessibilityValueMin != null) {
-        viewProps["aria-valuemin"] = accessibilityValueMin;
-      }
-      if (accessibilityValueNow != null) {
-        viewProps["aria-valuenow"] = accessibilityValueNow;
-      }
-      if (accessibilityValueText != null) {
-        viewProps["aria-valuetext"] = accessibilityValueText;
-      }
-      if (nativeID) {
-        viewProps.id = nativeID;
-      }
+      assignNativePropsToWeb(elementType, viewProps, nonTamaguiProps);
       if (!asChild) {
         rnw.useElementLayout(hostRef, onLayout);
         rnw.useResponderEvents(hostRef, {
@@ -444,6 +287,7 @@ function createComponent(configIn, ParentComponent) {
           viewProps.target = target.charAt(0) !== "_" ? "_" + target : target;
         }
       }
+      const role = viewProps.role;
       const _focusable = focusable != null ? focusable : accessible;
       if (_focusable === false) {
         viewProps.tabIndex = "-1";
@@ -717,10 +561,10 @@ function createComponent(configIn, ParentComponent) {
       ...initialSplitStyles.viewProps
     };
     defaultNativeStyle = {};
-    const validStyles = staticConfig.validStyles || stylePropsView;
+    const validStyles2 = staticConfig.validStyles || stylePropsView;
     for (const key in staticConfig.defaultProps) {
       const val = staticConfig.defaultProps[key];
-      if (typeof val === "string" && val[0] === "$" || !validStyles[key]) {
+      if (typeof val === "string" && val[0] === "$" || !validStyles2[key]) {
         defaults[key] = val;
       } else {
         defaultNativeStyle[key] = val;
@@ -748,18 +592,16 @@ function createComponent(configIn, ParentComponent) {
   if (configIn.memo) {
     res = memo(res);
   }
-  res["staticConfig"] = {
+  res.staticConfig = {
     validStyles: staticConfig.validStyles || stylePropsView,
     ...staticConfig
   };
-  if (process.env.NODE_ENV === "development") {
-    res["whyDidYouRender"] = true;
-  }
-  res["extractable"] = (Component, conf) => {
-    Component["staticConfig"] = extendStaticConfig({
+  res.extractable = (Component, conf) => {
+    Component.staticConfig = extendStaticConfig({
       Component,
       ...conf,
       neverFlatten: true,
+      isExtractable: true,
       defaultProps: {
         ...Component.defaultProps,
         ...conf == null ? void 0 : conf.defaultProps
@@ -777,6 +619,7 @@ Unspaced["isUnspaced"] = true;
 const Spacer = createComponent({
   memo: true,
   componentName: "Spacer",
+  validStyles,
   defaultProps: {
     ...stackDefaultStyles,
     size: true
@@ -797,7 +640,7 @@ const Spacer = createComponent({
     },
     flex: {
       true: {
-        flex: 1
+        flexGrow: 1
       }
     },
     direction: {
@@ -912,10 +755,171 @@ const accessibilityRoleToWebRole = {
   summary: "region",
   text: null
 };
+function assignNativePropsToWeb(elementType, viewProps, nativeProps) {
+  if (!viewProps.role && nativeProps.accessibilityRole) {
+    if (nativeProps.accessibilityRole === "none") {
+      viewProps.role = "presentation";
+    } else {
+      const webRole = accessibilityRoleToWebRole[nativeProps.accessibilityRole];
+      if (webRole != null) {
+        viewProps.role = webRole || nativeProps.accessibilityRole;
+      }
+    }
+  }
+  if (nativeProps.accessibilityActiveDescendant != null) {
+    viewProps["aria-activedescendant"] = nativeProps.accessibilityActiveDescendant;
+  }
+  if (nativeProps.accessibilityAtomic != null) {
+    viewProps["aria-atomic"] = nativeProps.accessibilityAtomic;
+  }
+  if (nativeProps.accessibilityAutoComplete != null) {
+    viewProps["aria-autocomplete"] = nativeProps.accessibilityAutoComplete;
+  }
+  if (nativeProps.accessibilityBusy != null) {
+    viewProps["aria-busy"] = nativeProps.accessibilityBusy;
+  }
+  if (nativeProps.accessibilityChecked != null) {
+    viewProps["aria-checked"] = nativeProps.accessibilityChecked;
+  }
+  if (nativeProps.accessibilityColumnCount != null) {
+    viewProps["aria-colcount"] = nativeProps.accessibilityColumnCount;
+  }
+  if (nativeProps.accessibilityColumnIndex != null) {
+    viewProps["aria-colindex"] = nativeProps.accessibilityColumnIndex;
+  }
+  if (nativeProps.accessibilityColumnSpan != null) {
+    viewProps["aria-colspan"] = nativeProps.accessibilityColumnSpan;
+  }
+  if (nativeProps.accessibilityControls != null) {
+    viewProps["aria-controls"] = processIDRefList(nativeProps.accessibilityControls);
+  }
+  if (nativeProps.accessibilityCurrent != null) {
+    viewProps["aria-current"] = nativeProps.accessibilityCurrent;
+  }
+  if (nativeProps.accessibilityDescribedBy != null) {
+    viewProps["aria-describedby"] = processIDRefList(nativeProps.accessibilityDescribedBy);
+  }
+  if (nativeProps.accessibilityDetails != null) {
+    viewProps["aria-details"] = nativeProps.accessibilityDetails;
+  }
+  if (nativeProps.disabled === true) {
+    viewProps["aria-disabled"] = true;
+    if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") {
+      viewProps.disabled = true;
+    }
+  }
+  if (nativeProps.accessibilityErrorMessage != null) {
+    viewProps["aria-errormessage"] = nativeProps.accessibilityErrorMessage;
+  }
+  if (nativeProps.accessibilityExpanded != null) {
+    viewProps["aria-expanded"] = nativeProps.accessibilityExpanded;
+  }
+  if (nativeProps.accessibilityFlowTo != null) {
+    viewProps["aria-flowto"] = processIDRefList(nativeProps.accessibilityFlowTo);
+  }
+  if (nativeProps.accessibilityHasPopup != null) {
+    viewProps["aria-haspopup"] = nativeProps.accessibilityHasPopup;
+  }
+  if (nativeProps.accessibilityHidden === true) {
+    viewProps["aria-hidden"] = nativeProps.accessibilityHidden;
+  }
+  if (nativeProps.accessibilityInvalid != null) {
+    viewProps["aria-invalid"] = nativeProps.accessibilityInvalid;
+  }
+  if (nativeProps.accessibilityKeyShortcuts != null && Array.isArray(nativeProps.accessibilityKeyShortcuts)) {
+    viewProps["aria-keyshortcuts"] = nativeProps.accessibilityKeyShortcuts.join(" ");
+  }
+  if (nativeProps.accessibilityLabel != null) {
+    viewProps["aria-label"] = nativeProps.accessibilityLabel;
+  }
+  if (nativeProps.accessibilityLabelledBy != null) {
+    viewProps["aria-labelledby"] = processIDRefList(nativeProps.accessibilityLabelledBy);
+  }
+  if (nativeProps.accessibilityLevel != null) {
+    viewProps["aria-level"] = nativeProps.accessibilityLevel;
+  }
+  if (nativeProps.accessibilityLiveRegion != null) {
+    viewProps["aria-live"] = nativeProps.accessibilityLiveRegion === "none" ? "off" : nativeProps.accessibilityLiveRegion;
+  }
+  if (nativeProps.accessibilityModal != null) {
+    viewProps["aria-modal"] = nativeProps.accessibilityModal;
+  }
+  if (nativeProps.accessibilityMultiline != null) {
+    viewProps["aria-multiline"] = nativeProps.accessibilityMultiline;
+  }
+  if (nativeProps.accessibilityMultiSelectable != null) {
+    viewProps["aria-multiselectable"] = nativeProps.accessibilityMultiSelectable;
+  }
+  if (nativeProps.accessibilityOrientation != null) {
+    viewProps["aria-orientation"] = nativeProps.accessibilityOrientation;
+  }
+  if (nativeProps.accessibilityOwns != null) {
+    viewProps["aria-owns"] = processIDRefList(nativeProps.accessibilityOwns);
+  }
+  if (nativeProps.accessibilityPlaceholder != null) {
+    viewProps["aria-placeholder"] = nativeProps.accessibilityPlaceholder;
+  }
+  if (nativeProps.accessibilityPosInSet != null) {
+    viewProps["aria-posinset"] = nativeProps.accessibilityPosInSet;
+  }
+  if (nativeProps.accessibilityPressed != null) {
+    viewProps["aria-pressed"] = nativeProps.accessibilityPressed;
+  }
+  if (nativeProps.accessibilityReadOnly != null) {
+    viewProps["aria-readonly"] = nativeProps.accessibilityReadOnly;
+    if (elementType === "input" || elementType === "select" || elementType === "textarea") {
+      viewProps.readOnly = true;
+    }
+  }
+  if (nativeProps.accessibilityRequired != null) {
+    viewProps["aria-required"] = nativeProps.accessibilityRequired;
+    if (elementType === "input" || elementType === "select" || elementType === "textarea") {
+      viewProps.required = true;
+    }
+  }
+  if (nativeProps.accessibilityRoleDescription != null) {
+    viewProps["aria-roledescription"] = nativeProps.accessibilityRoleDescription;
+  }
+  if (nativeProps.accessibilityRowCount != null) {
+    viewProps["aria-rowcount"] = nativeProps.accessibilityRowCount;
+  }
+  if (nativeProps.accessibilityRowIndex != null) {
+    viewProps["aria-rowindex"] = nativeProps.accessibilityRowIndex;
+  }
+  if (nativeProps.accessibilityRowSpan != null) {
+    viewProps["aria-rowspan"] = nativeProps.accessibilityRowSpan;
+  }
+  if (nativeProps.accessibilitySelected != null) {
+    viewProps["aria-selected"] = nativeProps.accessibilitySelected;
+  }
+  if (nativeProps.accessibilitySetSize != null) {
+    viewProps["aria-setsize"] = nativeProps.accessibilitySetSize;
+  }
+  if (nativeProps.accessibilitySort != null) {
+    viewProps["aria-sort"] = nativeProps.accessibilitySort;
+  }
+  if (nativeProps.accessibilityValueMax != null) {
+    viewProps["aria-valuemax"] = nativeProps.accessibilityValueMax;
+  }
+  if (nativeProps.accessibilityValueMin != null) {
+    viewProps["aria-valuemin"] = nativeProps.accessibilityValueMin;
+  }
+  if (nativeProps.accessibilityValueNow != null) {
+    viewProps["aria-valuenow"] = nativeProps.accessibilityValueNow;
+  }
+  if (nativeProps.accessibilityValueText != null) {
+    viewProps["aria-valuetext"] = nativeProps.accessibilityValueText;
+  }
+  if (nativeProps.nativeID) {
+    viewProps.id = nativeProps.nativeID;
+  }
+}
+__name(assignNativePropsToWeb, "assignNativePropsToWeb");
 export {
   AbsoluteFill,
   Spacer,
   Unspaced,
+  assignNativePropsToWeb,
   createComponent,
   mouseUps,
   spacedChildren