@tamagui/core 1.2.4 → 1.2.5

package/dist/esm/index.js

@@ -1,75 +1,161 @@
-export * from "./Tamagui";
-export * from "./createComponent";
-export * from "./createShorthands";
-export * from "./createTheme";
-export * from "./createTamagui";
-export * from "./createFont";
-export * from "./createTokens";
-export * from "./createVariable";
-export * from "./createVariables";
-export * from "./insertFont";
-export * from "./addTheme";
-export * from "./updateTheme";
-export * from "./styled";
-export * from "./types";
-export * from "./setupReactNative";
-import { getConfig, getThemes, getTokens, onConfiguredOnce } from "./config";
-export * from "./constants/constants";
-export * from "./helpers/useShallowSetState";
-export * from "./helpers/getVariantExtras";
-export * from "./helpers/getAnimationDriver";
-export * from "./helpers/getExpandedShorthands";
-export * from "./helpers/getSplitStyles";
-export * from "./helpers/getStylesAtomic";
-export * from "./helpers/pseudoDescriptors";
-export * from "./helpers/mergeProps";
-export * from "./helpers/expandStyles";
-export * from "./helpers/isTamaguiElement";
-export * from "./helpers/isTamaguiComponent";
-export * from "./helpers/matchMedia";
-export * from "./helpers/themeable";
-export * from "./helpers/withStaticProperties";
-export * from "./contexts/ButtonNestingContext";
-export * from "./hooks/useId";
-export * from "./hooks/useIsTouchDevice";
+import { useResponderEvents } from "@tamagui/react-native-use-responder-events";
 import {
-  configureMedia,
-  getMedia,
-  mediaState,
-  useMedia,
-  useMediaPropsActive,
-  mediaObjectToString,
-  mediaQueryConfig
-} from "./hooks/useMedia";
-export * from "./hooks/useTheme";
-export * from "./hooks/useThemeName";
-export * from "./hooks/useSafeRef";
-export * from "./hooks/useStyle";
-export * from "./views/Slot";
-export * from "./views/Stack";
-export * from "./views/Text";
-export * from "./contexts/TextAncestorContext";
-export * from "./views/Theme";
-export * from "./views/ThemeProvider";
-export * from "./views/FontLanguage";
-export * from "./views/TamaguiProvider";
-export * from "@tamagui/use-force-update";
-export * from "@tamagui/use-did-finish-ssr";
-export * from "@tamagui/use-event";
-export * from "@tamagui/compose-refs";
-export * from "@tamagui/helpers";
-export * from "@tamagui/constants";
+  Stack as WebStack,
+  Text as WebText,
+  composeEventHandlers,
+  isRSC,
+  mergeEvent,
+  setupHooks,
+  styled
+} from "@tamagui/web";
+import { useElementLayout } from "./hooks/useElementLayout";
+import { usePlatformMethods } from "./hooks/usePlatformMethods";
+import { usePressability } from "./vendor/Pressability";
+export * from "@tamagui/web";
+const Stack = WebStack;
+const Text = WebText;
+const T = styled(Stack, {
+  backgroundColor: "red",
+  variants: {
+    red: {
+      true: {
+        backgroundColor: "red"
+      }
+    }
+  }
+});
+const T2 = styled(T, {
+  red: true
+});
+setupHooks({
+  getBaseViews() {
+    const native = require("react-native");
+    return {
+      View: native.View || native.default.View,
+      Text: native.Text || native.default.Text
+    };
+  },
+  usePropsTransform(elementType, propsIn, hostRef) {
+    const {
+      // event props
+      onMoveShouldSetResponder,
+      onMoveShouldSetResponderCapture,
+      onResponderEnd,
+      onResponderGrant,
+      onResponderMove,
+      onResponderReject,
+      onResponderRelease,
+      onResponderStart,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onScrollShouldSetResponder,
+      onScrollShouldSetResponderCapture,
+      onSelectionChangeShouldSetResponder,
+      onSelectionChangeShouldSetResponderCapture,
+      onStartShouldSetResponder,
+      onStartShouldSetResponderCapture,
+      // android
+      collapsable,
+      focusable,
+      // deprecated,
+      accessible,
+      accessibilityDisabled,
+      onLayout,
+      hrefAttrs,
+      ...viewProps
+    } = propsIn;
+    if (!isRSC) {
+      usePlatformMethods(hostRef);
+      useElementLayout(hostRef, onLayout);
+      useResponderEvents(hostRef, {
+        onMoveShouldSetResponder,
+        onMoveShouldSetResponderCapture,
+        onResponderEnd,
+        onResponderGrant,
+        onResponderMove,
+        onResponderReject,
+        onResponderRelease,
+        onResponderStart,
+        onResponderTerminate,
+        onResponderTerminationRequest,
+        onScrollShouldSetResponder,
+        onScrollShouldSetResponderCapture,
+        onSelectionChangeShouldSetResponder,
+        onSelectionChangeShouldSetResponderCapture,
+        onStartShouldSetResponder,
+        onStartShouldSetResponderCapture
+      });
+    }
+    if (viewProps.href !== void 0 && hrefAttrs !== void 0) {
+      const { download, rel, target } = hrefAttrs;
+      if (download != null) {
+        viewProps.download = download;
+      }
+      if (rel != null) {
+        viewProps.rel = rel;
+      }
+      if (typeof target === "string") {
+        viewProps.target = target.charAt(0) !== "_" ? `_${target}` : target;
+      }
+    }
+    if (!viewProps.tabIndex) {
+      const _focusable = focusable !== void 0 ? focusable : accessible;
+      const role = viewProps.role;
+      if (_focusable === false) {
+        viewProps.tabIndex = "-1";
+      }
+      if (
+        // These native elements are focusable by default
+        elementType === "a" || elementType === "button" || elementType === "input" || elementType === "select" || elementType === "textarea"
+      ) {
+        if (_focusable === false || accessibilityDisabled === true) {
+          viewProps.tabIndex = "-1";
+        }
+      } else if (
+        // These roles are made focusable by default
+        role === "button" || role === "checkbox" || role === "link" || role === "radio" || role === "textbox" || role === "switch"
+      ) {
+        if (_focusable !== false) {
+          viewProps.tabIndex = "0";
+        }
+      }
+      if (_focusable === true) {
+        viewProps.tabIndex = "0";
+      }
+    }
+    return viewProps;
+  },
+  useEvents(viewProps, events, { pseudos }, setStateShallow) {
+    if (process.env.TAMAGUI_TARGET === "native") {
+      if (!events)
+        return;
+      const attachFocus = !!(pseudos == null ? void 0 : pseudos.focusStyle);
+      if (attachFocus) {
+        viewProps.onFocus = mergeEvent(viewProps.onFocus, () => {
+          setStateShallow({ focus: true });
+        });
+        viewProps.onBlur = mergeEvent(viewProps.onBlur, () => {
+          setStateShallow({ focus: false });
+        });
+      }
+      const pressability = usePressability(
+        events ? { ...events, hitSlop: viewProps.hitSlop } : {}
+      );
+      if (events.onPress) {
+        for (const key in pressability) {
+          const og = viewProps[key];
+          const val = pressability[key];
+          viewProps[key] = og && !dontComposePressabilityKeys[key] ? composeEventHandlers(og, val) : val;
+        }
+      }
+    }
+  }
+});
+const dontComposePressabilityKeys = {
+  onClick: true
+};
 export {
-  configureMedia,
-  getConfig,
-  getMedia,
-  getThemes,
-  getTokens,
-  mediaObjectToString,
-  mediaQueryConfig,
-  mediaState,
-  onConfiguredOnce,
-  useMedia,
-  useMediaPropsActive
+  Stack,
+  Text
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './addTheme'\nexport * from './updateTheme'\nexport * from './styled'\nexport * from './types'\nexport * from './setupReactNative'\n\n// for type portability\nexport type { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getConfig, getThemes, getTokens, onConfiguredOnce } from './config'\n\nexport * from './constants/constants'\n\nexport * from './helpers/useShallowSetState'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getAnimationDriver'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/pseudoDescriptors'\nexport * from './helpers/mergeProps'\nexport * from './helpers/expandStyles'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonNestingContext'\n\nexport * from './hooks/useId'\nexport * from './hooks/useIsTouchDevice'\n\nexport {\n  configureMedia,\n  getMedia,\n  mediaState,\n  useMedia,\n  useMediaPropsActive,\n  mediaObjectToString,\n  mediaQueryConfig,\n} from './hooks/useMedia'\nexport * from './hooks/useTheme'\nexport * from './hooks/useThemeName'\nexport * from './hooks/useSafeRef'\nexport * from './hooks/useStyle'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './contexts/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeProvider'\nexport * from './views/FontLanguage'\nexport * from './views/TamaguiProvider'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/use-did-finish-ssr'\nexport * from '@tamagui/use-event'\nexport * from '@tamagui/compose-refs'\nexport * from '@tamagui/helpers'\nexport * from '@tamagui/constants'\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId,SAAS,WAAW,WAAW,WAAW,wBAAwB;AAElE,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AAEd,cAAc;AACd,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["import { useResponderEvents } from '@tamagui/react-native-use-responder-events'\nimport {\n  StackProps,\n  StackPropsBase,\n  TamaguiComponent,\n  TextProps,\n  TextPropsBase,\n  Stack as WebStack,\n  Text as WebText,\n  composeEventHandlers,\n  isRSC,\n  mergeEvent,\n  setupHooks,\n  styled,\n} from '@tamagui/web'\nimport { RefObject } from 'react'\nimport type { Text as RNText, View as RNView } from 'react-native'\n\nimport { useElementLayout } from './hooks/useElementLayout'\nimport { usePlatformMethods } from './hooks/usePlatformMethods'\nimport type { RNTextProps, RNViewProps } from './reactNativeTypes'\nimport { usePressability } from './vendor/Pressability'\n\n// re-exports all of @tamagui/web just adds hooks\nexport * from '@tamagui/web'\n\n// adds extra types to Stack/Text:\n\nexport const Stack = WebStack as TamaguiComponent<\n  StackProps & RNViewProps,\n  RNView,\n  StackPropsBase & RNViewProps\n>\n\nexport const Text = WebText as TamaguiComponent<\n  TextProps & RNTextProps,\n  RNText,\n  TextPropsBase & RNTextProps\n>\n\nconst T = styled(Stack, {\n  backgroundColor: 'red',\n  variants: {\n    red: {\n      true: {\n        backgroundColor: 'red',\n      },\n    },\n  },\n})\n\nconst T2 = styled(T, {\n  red: true,\n})\n\n// setup internal hooks:\n\nsetupHooks({\n  getBaseViews() {\n    const native = require('react-native')\n    return {\n      View: native.View || native.default.View,\n      Text: native.Text || native.default.Text,\n    }\n  },\n\n  usePropsTransform(elementType, propsIn, hostRef) {\n    // otherwise replicate react-native-web functionality\n    const {\n      // event props\n      onMoveShouldSetResponder,\n      onMoveShouldSetResponderCapture,\n      onResponderEnd,\n      onResponderGrant,\n      onResponderMove,\n      onResponderReject,\n      onResponderRelease,\n      onResponderStart,\n      onResponderTerminate,\n      onResponderTerminationRequest,\n      onScrollShouldSetResponder,\n      onScrollShouldSetResponderCapture,\n      onSelectionChangeShouldSetResponder,\n      onSelectionChangeShouldSetResponderCapture,\n      onStartShouldSetResponder,\n      onStartShouldSetResponderCapture,\n\n      // android\n      collapsable,\n      focusable,\n\n      // deprecated,\n      accessible,\n      accessibilityDisabled,\n\n      onLayout,\n      hrefAttrs,\n\n      ...viewProps\n    } = propsIn\n\n    if (!isRSC) {\n      usePlatformMethods(hostRef as RefObject<Element>)\n      useElementLayout(hostRef as RefObject<Element>, onLayout as any)\n      useResponderEvents(hostRef, {\n        onMoveShouldSetResponder,\n        onMoveShouldSetResponderCapture,\n        onResponderEnd,\n        onResponderGrant,\n        onResponderMove,\n        onResponderReject,\n        onResponderRelease,\n        onResponderStart,\n        onResponderTerminate,\n        onResponderTerminationRequest,\n        onScrollShouldSetResponder,\n        onScrollShouldSetResponderCapture,\n        onSelectionChangeShouldSetResponder,\n        onSelectionChangeShouldSetResponderCapture,\n        onStartShouldSetResponder,\n        onStartShouldSetResponderCapture,\n      } as any)\n    }\n\n    // TODO move into getSplitStyles inital `if (process.env.TAMAGUI_TARGET === 'web')` block\n\n    if (viewProps.href !== undefined && hrefAttrs !== undefined) {\n      const { download, rel, target } = hrefAttrs\n      if (download != null) {\n        viewProps.download = download\n      }\n      if (rel != null) {\n        viewProps.rel = rel\n      }\n      if (typeof target === 'string') {\n        viewProps.target = target.charAt(0) !== '_' ? `_${target}` : target\n      }\n    }\n\n    // FOCUS\n    // \"focusable\" indicates that an element may be a keyboard tab-stop.\n    // ported from RNW: TODO move into getSplitStyles\n    if (!viewProps.tabIndex) {\n      const _focusable = focusable !== undefined ? focusable : accessible\n      const role = viewProps.role\n      if (_focusable === false) {\n        viewProps.tabIndex = '-1'\n      }\n      if (\n        // These native elements are focusable by default\n        elementType === 'a' ||\n        elementType === 'button' ||\n        elementType === 'input' ||\n        elementType === 'select' ||\n        elementType === 'textarea'\n      ) {\n        if (_focusable === false || accessibilityDisabled === true) {\n          viewProps.tabIndex = '-1'\n        }\n      } else if (\n        // These roles are made focusable by default\n        role === 'button' ||\n        role === 'checkbox' ||\n        role === 'link' ||\n        role === 'radio' ||\n        role === 'textbox' ||\n        role === 'switch'\n      ) {\n        if (_focusable !== false) {\n          viewProps.tabIndex = '0'\n        }\n      }\n      // Everything else must explicitly set the prop\n      if (_focusable === true) {\n        viewProps.tabIndex = '0'\n      }\n    }\n\n    return viewProps\n  },\n\n  useEvents(viewProps, events, { pseudos }, setStateShallow) {\n    if (process.env.TAMAGUI_TARGET === 'native') {\n      if (!events) return\n      // add focus events\n      const attachFocus = !!pseudos?.focusStyle\n      if (attachFocus) {\n        viewProps.onFocus = mergeEvent(viewProps.onFocus, () => {\n          setStateShallow({ focus: true })\n        })\n        viewProps.onBlur = mergeEvent(viewProps.onBlur, () => {\n          setStateShallow({ focus: false })\n        })\n      }\n      // use Pressability to get smooth unPress when you press + hold + move out\n      // only ever create once, use .configure() to update later\n      const pressability = usePressability(\n        events ? { ...events, hitSlop: viewProps.hitSlop } : {}\n      )\n      if (events.onPress) {\n        for (const key in pressability) {\n          const og = viewProps[key]\n          const val = pressability[key]\n          viewProps[key] =\n            og && !dontComposePressabilityKeys[key] ? composeEventHandlers(og, val) : val\n        }\n      }\n    }\n  },\n})\n\nconst dontComposePressabilityKeys = {\n  onClick: true,\n}\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AACnC;AAAA,EAME,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AAEnC,SAAS,uBAAuB;AAGhC,cAAc;AAIP,MAAM,QAAQ;AAMd,MAAM,OAAO;AAMpB,MAAM,IAAI,OAAO,OAAO;AAAA,EACtB,iBAAiB;AAAA,EACjB,UAAU;AAAA,IACR,KAAK;AAAA,MACH,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAED,MAAM,KAAK,OAAO,GAAG;AAAA,EACnB,KAAK;AACP,CAAC;AAID,WAAW;AAAA,EACT,eAAe;AACb,UAAM,SAAS,QAAQ,cAAc;AACrC,WAAO;AAAA,MACL,MAAM,OAAO,QAAQ,OAAO,QAAQ;AAAA,MACpC,MAAM,OAAO,QAAQ,OAAO,QAAQ;AAAA,IACtC;AAAA,EACF;AAAA,EAEA,kBAAkB,aAAa,SAAS,SAAS;AAE/C,UAAM;AAAA;AAAA,MAEJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA,GAAG;AAAA,IACL,IAAI;AAEJ,QAAI,CAAC,OAAO;AACV,yBAAmB,OAA6B;AAChD,uBAAiB,SAA+B,QAAe;AAC/D,yBAAmB,SAAS;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAQ;AAAA,IACV;AAIA,QAAI,UAAU,SAAS,UAAa,cAAc,QAAW;AAC3D,YAAM,EAAE,UAAU,KAAK,OAAO,IAAI;AAClC,UAAI,YAAY,MAAM;AACpB,kBAAU,WAAW;AAAA,MACvB;AACA,UAAI,OAAO,MAAM;AACf,kBAAU,MAAM;AAAA,MAClB;AACA,UAAI,OAAO,WAAW,UAAU;AAC9B,kBAAU,SAAS,OAAO,OAAO,CAAC,MAAM,MAAM,IAAI,WAAW;AAAA,MAC/D;AAAA,IACF;AAKA,QAAI,CAAC,UAAU,UAAU;AACvB,YAAM,aAAa,cAAc,SAAY,YAAY;AACzD,YAAM,OAAO,UAAU;AACvB,UAAI,eAAe,OAAO;AACxB,kBAAU,WAAW;AAAA,MACvB;AACA;AAAA;AAAA,QAEE,gBAAgB,OAChB,gBAAgB,YAChB,gBAAgB,WAChB,gBAAgB,YAChB,gBAAgB;AAAA,QAChB;AACA,YAAI,eAAe,SAAS,0BAA0B,MAAM;AAC1D,oBAAU,WAAW;AAAA,QACvB;AAAA,MACF;AAAA;AAAA,QAEE,SAAS,YACT,SAAS,cACT,SAAS,UACT,SAAS,WACT,SAAS,aACT,SAAS;AAAA,QACT;AACA,YAAI,eAAe,OAAO;AACxB,oBAAU,WAAW;AAAA,QACvB;AAAA,MACF;AAEA,UAAI,eAAe,MAAM;AACvB,kBAAU,WAAW;AAAA,MACvB;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,UAAU,WAAW,QAAQ,EAAE,QAAQ,GAAG,iBAAiB;AACzD,QAAI,QAAQ,IAAI,mBAAmB,UAAU;AAC3C,UAAI,CAAC;AAAQ;AAEb,YAAM,cAAc,CAAC,EAAC,mCAAS;AAC/B,UAAI,aAAa;AACf,kBAAU,UAAU,WAAW,UAAU,SAAS,MAAM;AACtD,0BAAgB,EAAE,OAAO,KAAK,CAAC;AAAA,QACjC,CAAC;AACD,kBAAU,SAAS,WAAW,UAAU,QAAQ,MAAM;AACpD,0BAAgB,EAAE,OAAO,MAAM,CAAC;AAAA,QAClC,CAAC;AAAA,MACH;AAGA,YAAM,eAAe;AAAA,QACnB,SAAS,EAAE,GAAG,QAAQ,SAAS,UAAU,QAAQ,IAAI,CAAC;AAAA,MACxD;AACA,UAAI,OAAO,SAAS;AAClB,mBAAW,OAAO,cAAc;AAC9B,gBAAM,KAAK,UAAU,GAAG;AACxB,gBAAM,MAAM,aAAa,GAAG;AAC5B,oBAAU,GAAG,IACX,MAAM,CAAC,4BAA4B,GAAG,IAAI,qBAAqB,IAAI,GAAG,IAAI;AAAA,QAC9E;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAED,MAAM,8BAA8B;AAAA,EAClC,SAAS;AACX;",
   "names": []
 }

package/dist/esm/reactNativeTypes.js

@@ -0,0 +1 @@
+//# sourceMappingURL=reactNativeTypes.js.map

package/package.json

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

package/src/hooks/usePlatformMethods.ts

@@ -0,0 +1,26 @@
+import { useIsomorphicLayoutEffect } from '@tamagui/web'
+import { RefObject } from 'react'
+
+import { getRect } from '../helpers/getRect'
+import { measureLayout } from './useElementLayout'
+
+// react native compat (web only)
+export function usePlatformMethods(hostRef: RefObject<Element>) {
+  useIsomorphicLayoutEffect(() => {
+    const node = hostRef.current
+    if (!node) return
+    // @ts-ignore
+    node.measure = (callback) => measureLayout(node, null, callback)
+    // @ts-ignore
+    node.measureLayout = (relativeToNode, success) =>
+      measureLayout(node as HTMLElement, relativeToNode, success)
+    // @ts-ignore
+    node.measureInWindow = (callback) => {
+      if (!node) return
+      setTimeout(() => {
+        const { height, left, top, width } = getRect(node as HTMLElement)!
+        callback(left, top, width, height)
+      }, 0)
+    }
+  }, [hostRef])
+}

package/src/index.ts

@@ -1,71 +1,214 @@
-export * from './Tamagui'
-export * from './createComponent'
-export * from './createShorthands'
-export * from './createTheme'
-export * from './createTamagui'
-export * from './createFont'
-export * from './createTokens'
-export * from './createVariable'
-export * from './createVariables'
-export * from './insertFont'
-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'
-export { getConfig, getThemes, getTokens, onConfiguredOnce } from './config'
-
-export * from './constants/constants'
-
-export * from './helpers/useShallowSetState'
-export * from './helpers/getVariantExtras'
-export * from './helpers/getAnimationDriver'
-export * from './helpers/getExpandedShorthands'
-export * from './helpers/getSplitStyles'
-export * from './helpers/getStylesAtomic'
-export * from './helpers/pseudoDescriptors'
-export * from './helpers/mergeProps'
-export * from './helpers/expandStyles'
-export * from './helpers/isTamaguiElement'
-export * from './helpers/isTamaguiComponent'
-export * from './helpers/matchMedia'
-export * from './helpers/themeable'
-export * from './helpers/withStaticProperties'
-
-export * from './contexts/ButtonNestingContext'
-
-export * from './hooks/useId'
-export * from './hooks/useIsTouchDevice'
-
-export {
-  configureMedia,
-  getMedia,
-  mediaState,
-  useMedia,
-  useMediaPropsActive,
-  mediaObjectToString,
-  mediaQueryConfig,
-} from './hooks/useMedia'
-export * from './hooks/useTheme'
-export * from './hooks/useThemeName'
-export * from './hooks/useSafeRef'
-export * from './hooks/useStyle'
-
-export * from './views/Slot'
-export * from './views/Stack'
-export * from './views/Text'
-export * from './contexts/TextAncestorContext'
-export * from './views/Theme'
-export * from './views/ThemeProvider'
-export * from './views/FontLanguage'
-export * from './views/TamaguiProvider'
-
-export * from '@tamagui/use-force-update'
-export * from '@tamagui/use-did-finish-ssr'
-export * from '@tamagui/use-event'
-export * from '@tamagui/compose-refs'
-export * from '@tamagui/helpers'
-export * from '@tamagui/constants'
+import { useResponderEvents } from '@tamagui/react-native-use-responder-events'
+import {
+  StackProps,
+  StackPropsBase,
+  TamaguiComponent,
+  TextProps,
+  TextPropsBase,
+  Stack as WebStack,
+  Text as WebText,
+  composeEventHandlers,
+  isRSC,
+  mergeEvent,
+  setupHooks,
+  styled,
+} from '@tamagui/web'
+import { RefObject } from 'react'
+import type { Text as RNText, View as RNView } from 'react-native'
+
+import { useElementLayout } from './hooks/useElementLayout'
+import { usePlatformMethods } from './hooks/usePlatformMethods'
+import type { RNTextProps, RNViewProps } from './reactNativeTypes'
+import { usePressability } from './vendor/Pressability'
+
+// re-exports all of @tamagui/web just adds hooks
+export * from '@tamagui/web'
+
+// adds extra types to Stack/Text:
+
+export const Stack = WebStack as TamaguiComponent<
+  StackProps & RNViewProps,
+  RNView,
+  StackPropsBase & RNViewProps
+>
+
+export const Text = WebText as TamaguiComponent<
+  TextProps & RNTextProps,
+  RNText,
+  TextPropsBase & RNTextProps
+>
+
+const T = styled(Stack, {
+  backgroundColor: 'red',
+  variants: {
+    red: {
+      true: {
+        backgroundColor: 'red',
+      },
+    },
+  },
+})
+
+const T2 = styled(T, {
+  red: true,
+})
+
+// setup internal hooks:
+
+setupHooks({
+  getBaseViews() {
+    const native = require('react-native')
+    return {
+      View: native.View || native.default.View,
+      Text: native.Text || native.default.Text,
+    }
+  },
+
+  usePropsTransform(elementType, propsIn, hostRef) {
+    // otherwise replicate react-native-web functionality
+    const {
+      // event props
+      onMoveShouldSetResponder,
+      onMoveShouldSetResponderCapture,
+      onResponderEnd,
+      onResponderGrant,
+      onResponderMove,
+      onResponderReject,
+      onResponderRelease,
+      onResponderStart,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onScrollShouldSetResponder,
+      onScrollShouldSetResponderCapture,
+      onSelectionChangeShouldSetResponder,
+      onSelectionChangeShouldSetResponderCapture,
+      onStartShouldSetResponder,
+      onStartShouldSetResponderCapture,
+
+      // android
+      collapsable,
+      focusable,
+
+      // deprecated,
+      accessible,
+      accessibilityDisabled,
+
+      onLayout,
+      hrefAttrs,
+
+      ...viewProps
+    } = propsIn
+
+    if (!isRSC) {
+      usePlatformMethods(hostRef as RefObject<Element>)
+      useElementLayout(hostRef as RefObject<Element>, onLayout as any)
+      useResponderEvents(hostRef, {
+        onMoveShouldSetResponder,
+        onMoveShouldSetResponderCapture,
+        onResponderEnd,
+        onResponderGrant,
+        onResponderMove,
+        onResponderReject,
+        onResponderRelease,
+        onResponderStart,
+        onResponderTerminate,
+        onResponderTerminationRequest,
+        onScrollShouldSetResponder,
+        onScrollShouldSetResponderCapture,
+        onSelectionChangeShouldSetResponder,
+        onSelectionChangeShouldSetResponderCapture,
+        onStartShouldSetResponder,
+        onStartShouldSetResponderCapture,
+      } as any)
+    }
+
+    // TODO move into getSplitStyles inital `if (process.env.TAMAGUI_TARGET === 'web')` block
+
+    if (viewProps.href !== undefined && hrefAttrs !== undefined) {
+      const { download, rel, target } = hrefAttrs
+      if (download != null) {
+        viewProps.download = download
+      }
+      if (rel != null) {
+        viewProps.rel = rel
+      }
+      if (typeof target === 'string') {
+        viewProps.target = target.charAt(0) !== '_' ? `_${target}` : target
+      }
+    }
+
+    // FOCUS
+    // "focusable" indicates that an element may be a keyboard tab-stop.
+    // ported from RNW: TODO move into getSplitStyles
+    if (!viewProps.tabIndex) {
+      const _focusable = focusable !== undefined ? focusable : accessible
+      const role = viewProps.role
+      if (_focusable === false) {
+        viewProps.tabIndex = '-1'
+      }
+      if (
+        // These native elements are focusable by default
+        elementType === 'a' ||
+        elementType === 'button' ||
+        elementType === 'input' ||
+        elementType === 'select' ||
+        elementType === 'textarea'
+      ) {
+        if (_focusable === false || accessibilityDisabled === true) {
+          viewProps.tabIndex = '-1'
+        }
+      } else if (
+        // These roles are made focusable by default
+        role === 'button' ||
+        role === 'checkbox' ||
+        role === 'link' ||
+        role === 'radio' ||
+        role === 'textbox' ||
+        role === 'switch'
+      ) {
+        if (_focusable !== false) {
+          viewProps.tabIndex = '0'
+        }
+      }
+      // Everything else must explicitly set the prop
+      if (_focusable === true) {
+        viewProps.tabIndex = '0'
+      }
+    }
+
+    return viewProps
+  },
+
+  useEvents(viewProps, events, { pseudos }, setStateShallow) {
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      if (!events) return
+      // add focus events
+      const attachFocus = !!pseudos?.focusStyle
+      if (attachFocus) {
+        viewProps.onFocus = mergeEvent(viewProps.onFocus, () => {
+          setStateShallow({ focus: true })
+        })
+        viewProps.onBlur = mergeEvent(viewProps.onBlur, () => {
+          setStateShallow({ focus: false })
+        })
+      }
+      // use Pressability to get smooth unPress when you press + hold + move out
+      // only ever create once, use .configure() to update later
+      const pressability = usePressability(
+        events ? { ...events, hitSlop: viewProps.hitSlop } : {}
+      )
+      if (events.onPress) {
+        for (const key in pressability) {
+          const og = viewProps[key]
+          const val = pressability[key]
+          viewProps[key] =
+            og && !dontComposePressabilityKeys[key] ? composeEventHandlers(og, val) : val
+        }
+      }
+    }
+  },
+})
+
+const dontComposePressabilityKeys = {
+  onClick: true,
+}