@tamagui/core 1.0.1-beta.196 → 1.0.1-beta.198

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.196",
+  "version": "1.0.1-beta.198",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,16 +28,16 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.196",
-    "@tamagui/constants": "^1.0.1-beta.196",
-    "@tamagui/helpers": "^1.0.1-beta.196",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.196",
-    "@tamagui/react-native-use-pressable": "^1.0.1-beta.196",
-    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.196",
-    "@tamagui/types-react-native": "^1.0.1-beta.196",
-    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.196",
-    "@tamagui/use-event": "^1.0.1-beta.196",
-    "@tamagui/use-force-update": "^1.0.1-beta.196",
+    "@tamagui/compose-refs": "^1.0.1-beta.198",
+    "@tamagui/constants": "^1.0.1-beta.198",
+    "@tamagui/helpers": "^1.0.1-beta.198",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.198",
+    "@tamagui/react-native-use-pressable": "^1.0.1-beta.198",
+    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.198",
+    "@tamagui/types-react-native": "^1.0.1-beta.198",
+    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.198",
+    "@tamagui/use-event": "^1.0.1-beta.198",
+    "@tamagui/use-force-update": "^1.0.1-beta.198",
     "ts-toolbelt": "^9.6.0"
   },
   "peerDependencies": {
@@ -45,7 +45,7 @@
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.196",
+    "@tamagui/build": "^1.0.1-beta.198",
     "@types/node": "^16.11.9",
     "@types/react": "^18.0.15",
     "@types/react-native": "^0.69.2",
@@ -54,7 +54,7 @@
     "react": "*",
     "react-dom": "*",
     "typescript": "^4.7.4",
-    "vitest": "^0.20.3"
+    "vitest": "^0.24.3"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -63,9 +63,13 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
     },
-    "./injectStyles": {
-      "import": "./dist/esm/injectStyles.js",
-      "require": "./dist/cjs/injectStyles.js"
+    "./inject-styles": {
+      "import": "./dist/esm/inject-styles.js",
+      "require": "./dist/cjs/inject-styles.js"
+    },
+    "./react-native": {
+      "import": "./dist/esm/react-native.js",
+      "require": "./dist/cjs/react-native.js"
     }
   },
   "repository": {

package/src/createComponent.tsx

@@ -618,15 +618,15 @@ export function createComponent<
     }
     const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : ''
 
+    const classList = [
+      componentName ? componentClassName : '',
+      fontFamilyClassName,
+      theme.className,
+      classNames ? Object.values(classNames).join(' ') : '',
+    ]
+    const className = classList.join(' ')
+
     if (process.env.TAMAGUI_TARGET === 'web') {
-      const classList = [
-        componentName ? componentClassName : '',
-        fontFamilyClassName,
-        theme.className,
-        classNames ? Object.values(classNames).join(' ') : '',
-      ]
-
-      const className = classList.join(' ')
       const style = animationStyles ?? splitStyles.style
 
       if (isAnimatedReactNativeWeb) {
@@ -884,17 +884,20 @@ export function createComponent<
     content = createElement(elementType, viewProps, childEls)
 
     if (process.env.TAMAGUI_TARGET === 'web') {
-      if (events) {
+      if (events || isAnimatedReactNativeWeb) {
         content = (
           <span
             style={styleDisplayContents}
-            onMouseEnter={events.onMouseEnter}
-            onMouseLeave={events.onMouseLeave}
-            onClick={events.onPress}
-            onMouseDown={events.onPressIn}
-            onMouseUp={events.onPressOut}
-            onTouchStart={events.onPressIn}
-            onTouchEnd={events.onPressOut}
+            className={isAnimatedReactNativeWeb ? className : undefined}
+            {...(events && {
+              onMouseEnter: events.onMouseEnter,
+              onMouseLeave: events.onMouseLeave,
+              onClick: events.onPress,
+              onMouseDown: events.onPressIn,
+              onMouseUp: events.onPressOut,
+              onTouchStart: events.onPressIn,
+              onTouchEnd: events.onPressOut,
+            })}
           >
             {content}
           </span>
@@ -928,7 +931,7 @@ export function createComponent<
         if (typeof window !== 'undefined') {
           // prettier-ignore
           // eslint-disable-next-line no-console
-          console.log({ state, shouldProvideThemeManager, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, defaultNativeStyle, initialSplitStyles, ...(typeof window !== 'undefined' ? { theme, themeClassName:  theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null) })
+          console.log({ state, shouldProvideThemeManager, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, defaultNativeStyle, initialSplitStyles, ...(typeof window !== 'undefined' ? { theme, themeClassName:  theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null) })
         }
         // eslint-disable-next-line no-console
         console.groupEnd()

package/src/index.ts

@@ -12,6 +12,7 @@ export * from './addTheme'
 export * from './updateTheme'
 export * from './styled'
 export * from './types'
+export * from './setupReactNative'
 
 // for type portability
 export type { RNWTextProps, RNWViewProps } from './types-rnw'

package/src/setupReactNative.ts

@@ -0,0 +1,9 @@
+let rn
+
+export function getReactNative() {
+  return rn
+}
+
+export function setupReactNative(_) {
+  rn = _
+}

package/src/styled.tsx

@@ -1,5 +1,6 @@
 import { getConfig } from './config'
 import { createComponent } from './createComponent'
+import { getReactNative } from './setupReactNative'
 import {
   GetProps,
   GetVariantValues,
@@ -34,6 +35,8 @@ type GetVariantProps<A extends StylableComponent> =
   //   :
   A extends TamaguiComponent<any, any, any, infer V> ? V : {}
 
+let RNComponentConfigs: WeakMap<any, Partial<StaticConfig>> | null = null
+
 export function styled<
   ParentComponent extends StylableComponent,
   Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void
@@ -59,6 +62,21 @@ export function styled<
   //   }
   // }
 
+  const RN = getReactNative()
+  if (RN && typeof RN === 'object' && !RNComponentConfigs) {
+    RNComponentConfigs = new WeakMap()
+    for (const key in RN) {
+      const val = RN[key]
+      if (!val) continue
+      if (key[0].toLowerCase() === key[0]) continue
+      RNComponentConfigs.set(val, {
+        isReactNative: true,
+        isText: key === 'Text' || key === 'TextInput',
+        inlineProps: key === 'Image' ? new Set(['src', 'width', 'height']) : undefined,
+      })
+    }
+  }
+
   const staticConfigProps = (() => {
     const parentStaticConfig =
       'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null
@@ -87,13 +105,17 @@ export function styled<
         Object.assign(defaultProps, defaultVariants)
       }
       const isReactNative = Boolean(
-        parentStaticConfig?.isReactNative || staticExtractionOptions?.isReactNative
+        (RNComponentConfigs &&
+          (RNComponentConfigs.has(Component) ||
+            RNComponentConfigs.has(parentStaticConfig?.Component))) ||
+          parentStaticConfig?.isReactNative ||
+          staticExtractionOptions?.isReactNative
       )
-      const reactNativeWebComponent = isReactNative
-        ? parentStaticConfig?.reactNativeWebComponent || Component
-        : null
       const isTamagui = !isReactNative && !!parentStaticConfig
-      const Comp = reactNativeWebComponent || (Component as any)
+
+      const Comp = isReactNative ? parentStaticConfig?.Component || Component : (Component as any)
+      const nativeConf = (isReactNative && RNComponentConfigs?.get(Comp)) || null
+
       const isText = Boolean(staticExtractionOptions?.isText || parentStaticConfig?.isText)
       const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)
 
@@ -109,10 +131,9 @@ export function styled<
         defaultVariants,
         componentName: name,
         isReactNative,
-        // for nesting multiple levels of rnw styled() need keep use the OG component
-        reactNativeWebComponent,
         isText,
         acceptsClassName,
+        ...nativeConf,
       }
 
       // TODO compiler doesn't have logic to include children, de-opt (see EnsureFlexed for test usage)

package/src/types.tsx

@@ -794,11 +794,6 @@ export type StaticConfig = StaticConfigPublic & {
    */
   defaultVariants?: { [key: string]: any }
 
-  /**
-   * Used internally to keep reference to the original rnw component
-   */
-  reactNativeWebComponent?: any
-
   /**
    * Memoize the component
    */

package/src/views/Text.tsx

@@ -26,6 +26,8 @@ export const Text = createComponent<TextProps, TextView, TextPropsBase>({
     }),
   },
 
+  inlineWhenUnflattened: new Set(['fontFamily']),
+
   variants: {
     ...(isWeb && {
       numberOfLines: {

package/types/index.d.ts

@@ -12,6 +12,7 @@ export * from './addTheme';
 export * from './updateTheme';
 export * from './styled';
 export * from './types';
+export * from './setupReactNative';
 export type { RNWTextProps, RNWViewProps } from './types-rnw';
 export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config';
 export * from './constants/constants';

package/types/inject-styles.d.ts

@@ -0,0 +1,7 @@
+interface InjectStylesOptions {
+    filePath: string;
+    css: string;
+}
+export declare const injectStyles: ({ filePath, css }: InjectStylesOptions) => void;
+export {};
+//# sourceMappingURL=inject-styles.d.ts.map

package/types/react-native.d.ts

@@ -0,0 +1,8 @@
+/**
+ * `@tamagui/core/react-native`
+ *
+ * Only import for easier React Native detection
+ *
+ */
+export {};
+//# sourceMappingURL=react-native.d.ts.map

package/types/setupReactNative.d.ts

@@ -0,0 +1,3 @@
+export declare function getReactNative(): any;
+export declare function setupReactNative(_: any): void;
+//# sourceMappingURL=setupReactNative.d.ts.map

package/types/types.d.ts

@@ -468,10 +468,6 @@ export declare type StaticConfig = StaticConfigPublic & {
     defaultVariants?: {
         [key: string]: any;
     };
-    /**
-     * Used internally to keep reference to the original rnw component
-     */
-    reactNativeWebComponent?: any;
     /**
      * Memoize the component
      */

package/dist/cjs/helpers/assignNativePropsToWeb.js

@@ -1,188 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var assignNativePropsToWeb_exports = {};
-__export(assignNativePropsToWeb_exports, {
-  assignNativePropsToWeb: () => assignNativePropsToWeb
-});
-module.exports = __toCommonJS(assignNativePropsToWeb_exports);
-var import_createComponent = require("../createComponent");
-function assignNativePropsToWeb(elementType, viewProps, nativeProps) {
-  if (!viewProps.role && nativeProps.accessibilityRole) {
-    if (nativeProps.accessibilityRole === "none") {
-      viewProps.role = "presentation";
-    } else {
-      const webRole = import_createComponent.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"] = (0, import_createComponent.processIDRefList)(nativeProps.accessibilityControls);
-  }
-  if (nativeProps.accessibilityCurrent != null) {
-    viewProps["aria-current"] = nativeProps.accessibilityCurrent;
-  }
-  if (nativeProps.accessibilityDescribedBy != null) {
-    viewProps["aria-describedby"] = (0, import_createComponent.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"] = (0, import_createComponent.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"] = (0, import_createComponent.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"] = (0, import_createComponent.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;
-  }
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  assignNativePropsToWeb
-});
-//# sourceMappingURL=assignNativePropsToWeb.js.map

package/dist/cjs/helpers/assignNativePropsToWeb.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/helpers/assignNativePropsToWeb.tsx"],
-  "sourcesContent": ["import { accessibilityRoleToWebRole, processIDRefList } from '../createComponent'\n\n// adapted from react-native-web\n\nexport function assignNativePropsToWeb(elementType: string, viewProps: any, nativeProps: any) {\n  if (!viewProps.role && nativeProps.accessibilityRole) {\n    if (nativeProps.accessibilityRole === 'none') {\n      viewProps.role = 'presentation'\n    } else {\n      const webRole = accessibilityRoleToWebRole[nativeProps.accessibilityRole]\n      if (webRole != null) {\n        viewProps.role = webRole || nativeProps.accessibilityRole\n      }\n    }\n  }\n\n  if (nativeProps.accessibilityActiveDescendant != null) {\n    viewProps['aria-activedescendant'] = nativeProps.accessibilityActiveDescendant\n  }\n  if (nativeProps.accessibilityAtomic != null) {\n    viewProps['aria-atomic'] = nativeProps.accessibilityAtomic\n  }\n  if (nativeProps.accessibilityAutoComplete != null) {\n    viewProps['aria-autocomplete'] = nativeProps.accessibilityAutoComplete\n  }\n  if (nativeProps.accessibilityBusy != null) {\n    viewProps['aria-busy'] = nativeProps.accessibilityBusy\n  }\n  if (nativeProps.accessibilityChecked != null) {\n    viewProps['aria-checked'] = nativeProps.accessibilityChecked\n  }\n  if (nativeProps.accessibilityColumnCount != null) {\n    viewProps['aria-colcount'] = nativeProps.accessibilityColumnCount\n  }\n  if (nativeProps.accessibilityColumnIndex != null) {\n    viewProps['aria-colindex'] = nativeProps.accessibilityColumnIndex\n  }\n  if (nativeProps.accessibilityColumnSpan != null) {\n    viewProps['aria-colspan'] = nativeProps.accessibilityColumnSpan\n  }\n  if (nativeProps.accessibilityControls != null) {\n    viewProps['aria-controls'] = processIDRefList(nativeProps.accessibilityControls)\n  }\n  if (nativeProps.accessibilityCurrent != null) {\n    viewProps['aria-current'] = nativeProps.accessibilityCurrent\n  }\n  if (nativeProps.accessibilityDescribedBy != null) {\n    viewProps['aria-describedby'] = processIDRefList(nativeProps.accessibilityDescribedBy)\n  }\n  if (nativeProps.accessibilityDetails != null) {\n    viewProps['aria-details'] = nativeProps.accessibilityDetails\n  }\n  if (nativeProps.disabled === true) {\n    viewProps['aria-disabled'] = true\n    // Enhance with native semantics\n    if (\n      elementType === 'button' ||\n      elementType === 'form' ||\n      elementType === 'input' ||\n      elementType === 'select' ||\n      elementType === 'textarea'\n    ) {\n      viewProps.disabled = true\n    }\n  }\n  if (nativeProps.accessibilityErrorMessage != null) {\n    viewProps['aria-errormessage'] = nativeProps.accessibilityErrorMessage\n  }\n  if (nativeProps.accessibilityExpanded != null) {\n    viewProps['aria-expanded'] = nativeProps.accessibilityExpanded\n  }\n  if (nativeProps.accessibilityFlowTo != null) {\n    viewProps['aria-flowto'] = processIDRefList(nativeProps.accessibilityFlowTo)\n  }\n  if (nativeProps.accessibilityHasPopup != null) {\n    viewProps['aria-haspopup'] = nativeProps.accessibilityHasPopup\n  }\n  if (nativeProps.accessibilityHidden === true) {\n    viewProps['aria-hidden'] = nativeProps.accessibilityHidden\n  }\n  if (nativeProps.accessibilityInvalid != null) {\n    viewProps['aria-invalid'] = nativeProps.accessibilityInvalid\n  }\n  if (\n    nativeProps.accessibilityKeyShortcuts != null &&\n    Array.isArray(nativeProps.accessibilityKeyShortcuts)\n  ) {\n    viewProps['aria-keyshortcuts'] = nativeProps.accessibilityKeyShortcuts.join(' ')\n  }\n  if (nativeProps.accessibilityLabel != null) {\n    viewProps['aria-label'] = nativeProps.accessibilityLabel\n  }\n  if (nativeProps.accessibilityLabelledBy != null) {\n    viewProps['aria-labelledby'] = processIDRefList(nativeProps.accessibilityLabelledBy)\n  }\n  if (nativeProps.accessibilityLevel != null) {\n    viewProps['aria-level'] = nativeProps.accessibilityLevel\n  }\n  if (nativeProps.accessibilityLiveRegion != null) {\n    viewProps['aria-live'] =\n      nativeProps.accessibilityLiveRegion === 'none' ? 'off' : nativeProps.accessibilityLiveRegion\n  }\n  if (nativeProps.accessibilityModal != null) {\n    viewProps['aria-modal'] = nativeProps.accessibilityModal\n  }\n  if (nativeProps.accessibilityMultiline != null) {\n    viewProps['aria-multiline'] = nativeProps.accessibilityMultiline\n  }\n  if (nativeProps.accessibilityMultiSelectable != null) {\n    viewProps['aria-multiselectable'] = nativeProps.accessibilityMultiSelectable\n  }\n  if (nativeProps.accessibilityOrientation != null) {\n    viewProps['aria-orientation'] = nativeProps.accessibilityOrientation\n  }\n  if (nativeProps.accessibilityOwns != null) {\n    viewProps['aria-owns'] = processIDRefList(nativeProps.accessibilityOwns)\n  }\n  if (nativeProps.accessibilityPlaceholder != null) {\n    viewProps['aria-placeholder'] = nativeProps.accessibilityPlaceholder\n  }\n  if (nativeProps.accessibilityPosInSet != null) {\n    viewProps['aria-posinset'] = nativeProps.accessibilityPosInSet\n  }\n  if (nativeProps.accessibilityPressed != null) {\n    viewProps['aria-pressed'] = nativeProps.accessibilityPressed\n  }\n  if (nativeProps.accessibilityReadOnly != null) {\n    viewProps['aria-readonly'] = nativeProps.accessibilityReadOnly\n    // Enhance with native semantics\n    if (elementType === 'input' || elementType === 'select' || elementType === 'textarea') {\n      viewProps.readOnly = true\n    }\n  }\n  if (nativeProps.accessibilityRequired != null) {\n    viewProps['aria-required'] = nativeProps.accessibilityRequired\n    // Enhance with native semantics\n    if (elementType === 'input' || elementType === 'select' || elementType === 'textarea') {\n      viewProps.required = true\n    }\n  }\n  if (nativeProps.accessibilityRoleDescription != null) {\n    viewProps['aria-roledescription'] = nativeProps.accessibilityRoleDescription\n  }\n  if (nativeProps.accessibilityRowCount != null) {\n    viewProps['aria-rowcount'] = nativeProps.accessibilityRowCount\n  }\n  if (nativeProps.accessibilityRowIndex != null) {\n    viewProps['aria-rowindex'] = nativeProps.accessibilityRowIndex\n  }\n  if (nativeProps.accessibilityRowSpan != null) {\n    viewProps['aria-rowspan'] = nativeProps.accessibilityRowSpan\n  }\n  if (nativeProps.accessibilitySelected != null) {\n    viewProps['aria-selected'] = nativeProps.accessibilitySelected\n  }\n  if (nativeProps.accessibilitySetSize != null) {\n    viewProps['aria-setsize'] = nativeProps.accessibilitySetSize\n  }\n  if (nativeProps.accessibilitySort != null) {\n    viewProps['aria-sort'] = nativeProps.accessibilitySort\n  }\n  if (nativeProps.accessibilityValueMax != null) {\n    viewProps['aria-valuemax'] = nativeProps.accessibilityValueMax\n  }\n  if (nativeProps.accessibilityValueMin != null) {\n    viewProps['aria-valuemin'] = nativeProps.accessibilityValueMin\n  }\n  if (nativeProps.accessibilityValueNow != null) {\n    viewProps['aria-valuenow'] = nativeProps.accessibilityValueNow\n  }\n  if (nativeProps.accessibilityValueText != null) {\n    viewProps['aria-valuetext'] = nativeProps.accessibilityValueText\n  }\n\n  if (nativeProps.nativeID) {\n    viewProps.id = nativeProps.nativeID\n  }\n}\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/cjs/helpers/calc.js

@@ -1,71 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var calc_exports = {};
-__export(calc_exports, {
-  calc: () => calc
-});
-module.exports = __toCommonJS(calc_exports);
-var import_constants = require("@tamagui/constants");
-var import_createVariable = require("../createVariable");
-const operators = {
-  "+": (a, b) => a + b,
-  "-": (a, b) => a - b,
-  "/": (a, b) => a / b,
-  "*": (a, b) => a * b
-};
-const calc = (...valuesAndOperators) => {
-  if (import_constants.isWeb) {
-    let res2 = "calc(";
-    for (const cur of valuesAndOperators) {
-      if (operators[cur]) {
-        res2 += " " + cur + " ";
-      } else {
-        res2 += convertToVariableOrNumber(cur);
-      }
-    }
-    return res2 + ")";
-  }
-  let res = 0;
-  let nextOp = null;
-  for (const cur of valuesAndOperators) {
-    if (operators[cur]) {
-      nextOp = operators[cur];
-    } else {
-      if (nextOp) {
-        res = nextOp(res, cur);
-        nextOp = null;
-      } else {
-        res = +cur;
-      }
-    }
-  }
-  return res;
-};
-const convertToVariableOrNumber = (v) => {
-  const varOrVal = (0, import_createVariable.getVariableVariable)(v);
-  if (typeof varOrVal === "number") {
-    return `${varOrVal}px`;
-  }
-  return varOrVal;
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  calc
-});
-//# sourceMappingURL=calc.js.map

package/dist/cjs/helpers/calc.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/helpers/calc.ts"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\n\nimport { getVariableVariable } from '../createVariable'\nimport { FontLineHeightTokens, FontSizeTokens, SizeTokens, SpaceTokens } from '../types'\n\n// unused code - not exported\n\n/**\n * Simple calc() that handles native + web\n *   on web: outputs a calc() string\n *   on native: outputs a plain number\n */\n\nexport type CalcVal =\n  | string\n  | number\n  | SizeTokens\n  | SpaceTokens\n  | FontSizeTokens\n  | FontLineHeightTokens\n\nconst operators = {\n  '+': (a: number, b: number) => a + b,\n  '-': (a: number, b: number) => a - b,\n  '/': (a: number, b: number) => a / b,\n  '*': (a: number, b: number) => a * b,\n}\n\ntype Operator = keyof typeof operators\n\nexport const calc = (...valuesAndOperators: (CalcVal | Operator)[]) => {\n  if (isWeb) {\n    let res = 'calc('\n    for (const cur of valuesAndOperators) {\n      if (operators[cur as any]) {\n        // spaces are significant\n        res += ' ' + cur + ' '\n      } else {\n        res += convertToVariableOrNumber(cur)\n      }\n    }\n    return res + ')'\n  }\n\n  let res = 0\n  let nextOp: any = null\n  for (const cur of valuesAndOperators) {\n    if (operators[cur as any]) {\n      nextOp = operators[cur as any]\n    } else {\n      if (nextOp) {\n        res = nextOp(res, cur)\n        nextOp = null\n      } else {\n        res = +cur\n      }\n    }\n  }\n  return res\n}\n\nconst convertToVariableOrNumber = (v: any) => {\n  const varOrVal = getVariableVariable(v)\n  if (typeof varOrVal === 'number') {\n    return `${varOrVal}px`\n  }\n  return varOrVal\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAsB;AAEtB,4BAAoC;AAmBpC,MAAM,YAAY;AAAA,EAChB,KAAK,CAAC,GAAW,MAAc,IAAI;AAAA,EACnC,KAAK,CAAC,GAAW,MAAc,IAAI;AAAA,EACnC,KAAK,CAAC,GAAW,MAAc,IAAI;AAAA,EACnC,KAAK,CAAC,GAAW,MAAc,IAAI;AACrC;AAIO,MAAM,OAAO,IAAI,uBAA+C;AACrE,MAAI,wBAAO;AACT,QAAIA,OAAM;AACV,eAAW,OAAO,oBAAoB;AACpC,UAAI,UAAU,MAAa;AAEzB,QAAAA,QAAO,MAAM,MAAM;AAAA,MACrB,OAAO;AACL,QAAAA,QAAO,0BAA0B,GAAG;AAAA,MACtC;AAAA,IACF;AACA,WAAOA,OAAM;AAAA,EACf;AAEA,MAAI,MAAM;AACV,MAAI,SAAc;AAClB,aAAW,OAAO,oBAAoB;AACpC,QAAI,UAAU,MAAa;AACzB,eAAS,UAAU;AAAA,IACrB,OAAO;AACL,UAAI,QAAQ;AACV,cAAM,OAAO,KAAK,GAAG;AACrB,iBAAS;AAAA,MACX,OAAO;AACL,cAAM,CAAC;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAEA,MAAM,4BAA4B,CAAC,MAAW;AAC5C,QAAM,eAAW,2CAAoB,CAAC;AACtC,MAAI,OAAO,aAAa,UAAU;AAChC,WAAO,GAAG;AAAA,EACZ;AACA,SAAO;AACT;",
-  "names": ["res"]
-}