@tamagui/core 1.2.3 → 1.2.5

package/README.md

@@ -1 +1,5 @@
 ## core
+
+Note: most of this logic moved into @tamagui/web
+
+core is a superset of web, it just adds in some react-native props support.

package/dist/cjs/hooks/usePlatformMethods.js

@@ -0,0 +1,48 @@
+"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 usePlatformMethods_exports = {};
+__export(usePlatformMethods_exports, {
+  usePlatformMethods: () => usePlatformMethods
+});
+module.exports = __toCommonJS(usePlatformMethods_exports);
+var import_web = require("@tamagui/web");
+var import_getRect = require("../helpers/getRect");
+var import_useElementLayout = require("./useElementLayout");
+function usePlatformMethods(hostRef) {
+  (0, import_web.useIsomorphicLayoutEffect)(() => {
+    const node = hostRef.current;
+    if (!node)
+      return;
+    node.measure = (callback) => (0, import_useElementLayout.measureLayout)(node, null, callback);
+    node.measureLayout = (relativeToNode, success) => (0, import_useElementLayout.measureLayout)(node, relativeToNode, success);
+    node.measureInWindow = (callback) => {
+      if (!node)
+        return;
+      setTimeout(() => {
+        const { height, left, top, width } = (0, import_getRect.getRect)(node);
+        callback(left, top, width, height);
+      }, 0);
+    };
+  }, [hostRef]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePlatformMethods
+});
+//# sourceMappingURL=usePlatformMethods.js.map

package/dist/cjs/hooks/usePlatformMethods.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/usePlatformMethods.ts"],
+  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/web'\nimport { RefObject } from 'react'\n\nimport { getRect } from '../helpers/getRect'\nimport { measureLayout } from './useElementLayout'\n\n// react native compat (web only)\nexport function usePlatformMethods(hostRef: RefObject<Element>) {\n  useIsomorphicLayoutEffect(() => {\n    const node = hostRef.current\n    if (!node) return\n    // @ts-ignore\n    node.measure = (callback) => measureLayout(node, null, callback)\n    // @ts-ignore\n    node.measureLayout = (relativeToNode, success) =>\n      measureLayout(node as HTMLElement, relativeToNode, success)\n    // @ts-ignore\n    node.measureInWindow = (callback) => {\n      if (!node) return\n      setTimeout(() => {\n        const { height, left, top, width } = getRect(node as HTMLElement)!\n        callback(left, top, width, height)\n      }, 0)\n    }\n  }, [hostRef])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAA0C;AAG1C,qBAAwB;AACxB,8BAA8B;AAGvB,SAAS,mBAAmB,SAA6B;AAC9D,4CAA0B,MAAM;AAC9B,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC;AAAM;AAEX,SAAK,UAAU,CAAC,iBAAa,uCAAc,MAAM,MAAM,QAAQ;AAE/D,SAAK,gBAAgB,CAAC,gBAAgB,gBACpC,uCAAc,MAAqB,gBAAgB,OAAO;AAE5D,SAAK,kBAAkB,CAAC,aAAa;AACnC,UAAI,CAAC;AAAM;AACX,iBAAW,MAAM;AACf,cAAM,EAAE,QAAQ,MAAM,KAAK,MAAM,QAAI,wBAAQ,IAAmB;AAChE,iBAAS,MAAM,KAAK,OAAO,MAAM;AAAA,MACnC,GAAG,CAAC;AAAA,IACN;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AACd;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -19,84 +19,161 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
-  configureMedia: () => import_useMedia.configureMedia,
-  getConfig: () => import_config.getConfig,
-  getMedia: () => import_useMedia.getMedia,
-  getThemes: () => import_config.getThemes,
-  getTokens: () => import_config.getTokens,
-  mediaObjectToString: () => import_useMedia.mediaObjectToString,
-  mediaQueryConfig: () => import_useMedia.mediaQueryConfig,
-  mediaState: () => import_useMedia.mediaState,
-  onConfiguredOnce: () => import_config.onConfiguredOnce,
-  useMedia: () => import_useMedia.useMedia,
-  useMediaPropsActive: () => import_useMedia.useMediaPropsActive
+  Stack: () => Stack,
+  Text: () => Text
 });
 module.exports = __toCommonJS(src_exports);
-__reExport(src_exports, require("./Tamagui"), module.exports);
-__reExport(src_exports, require("./createComponent"), module.exports);
-__reExport(src_exports, require("./createShorthands"), module.exports);
-__reExport(src_exports, require("./createTheme"), module.exports);
-__reExport(src_exports, require("./createTamagui"), module.exports);
-__reExport(src_exports, require("./createFont"), module.exports);
-__reExport(src_exports, require("./createTokens"), module.exports);
-__reExport(src_exports, require("./createVariable"), module.exports);
-__reExport(src_exports, require("./createVariables"), module.exports);
-__reExport(src_exports, require("./insertFont"), module.exports);
-__reExport(src_exports, require("./addTheme"), module.exports);
-__reExport(src_exports, require("./updateTheme"), module.exports);
-__reExport(src_exports, require("./styled"), module.exports);
-__reExport(src_exports, require("./types"), module.exports);
-__reExport(src_exports, require("./setupReactNative"), module.exports);
-var import_config = require("./config");
-__reExport(src_exports, require("./constants/constants"), module.exports);
-__reExport(src_exports, require("./helpers/useShallowSetState"), module.exports);
-__reExport(src_exports, require("./helpers/getVariantExtras"), module.exports);
-__reExport(src_exports, require("./helpers/getAnimationDriver"), module.exports);
-__reExport(src_exports, require("./helpers/getExpandedShorthands"), module.exports);
-__reExport(src_exports, require("./helpers/getSplitStyles"), module.exports);
-__reExport(src_exports, require("./helpers/getStylesAtomic"), module.exports);
-__reExport(src_exports, require("./helpers/pseudoDescriptors"), module.exports);
-__reExport(src_exports, require("./helpers/mergeProps"), module.exports);
-__reExport(src_exports, require("./helpers/expandStyles"), module.exports);
-__reExport(src_exports, require("./helpers/isTamaguiElement"), module.exports);
-__reExport(src_exports, require("./helpers/isTamaguiComponent"), module.exports);
-__reExport(src_exports, require("./helpers/matchMedia"), module.exports);
-__reExport(src_exports, require("./helpers/themeable"), module.exports);
-__reExport(src_exports, require("./helpers/withStaticProperties"), module.exports);
-__reExport(src_exports, require("./contexts/ButtonNestingContext"), module.exports);
-__reExport(src_exports, require("./hooks/useId"), module.exports);
-__reExport(src_exports, require("./hooks/useIsTouchDevice"), module.exports);
-var import_useMedia = require("./hooks/useMedia");
-__reExport(src_exports, require("./hooks/useTheme"), module.exports);
-__reExport(src_exports, require("./hooks/useThemeName"), module.exports);
-__reExport(src_exports, require("./hooks/useSafeRef"), module.exports);
-__reExport(src_exports, require("./hooks/useStyle"), module.exports);
-__reExport(src_exports, require("./views/Slot"), module.exports);
-__reExport(src_exports, require("./views/Stack"), module.exports);
-__reExport(src_exports, require("./views/Text"), module.exports);
-__reExport(src_exports, require("./contexts/TextAncestorContext"), module.exports);
-__reExport(src_exports, require("./views/Theme"), module.exports);
-__reExport(src_exports, require("./views/ThemeProvider"), module.exports);
-__reExport(src_exports, require("./views/FontLanguage"), module.exports);
-__reExport(src_exports, require("./views/TamaguiProvider"), module.exports);
-__reExport(src_exports, require("@tamagui/use-force-update"), module.exports);
-__reExport(src_exports, require("@tamagui/use-did-finish-ssr"), module.exports);
-__reExport(src_exports, require("@tamagui/use-event"), module.exports);
-__reExport(src_exports, require("@tamagui/compose-refs"), module.exports);
-__reExport(src_exports, require("@tamagui/helpers"), module.exports);
-__reExport(src_exports, require("@tamagui/constants"), module.exports);
+var import_react_native_use_responder_events = require("@tamagui/react-native-use-responder-events");
+var import_web = require("@tamagui/web");
+var import_useElementLayout = require("./hooks/useElementLayout");
+var import_usePlatformMethods = require("./hooks/usePlatformMethods");
+var import_Pressability = require("./vendor/Pressability");
+__reExport(src_exports, require("@tamagui/web"), module.exports);
+const Stack = import_web.Stack;
+const Text = import_web.Text;
+const T = (0, import_web.styled)(Stack, {
+  backgroundColor: "red",
+  variants: {
+    red: {
+      true: {
+        backgroundColor: "red"
+      }
+    }
+  }
+});
+const T2 = (0, import_web.styled)(T, {
+  red: true
+});
+(0, import_web.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 (!import_web.isRSC) {
+      (0, import_usePlatformMethods.usePlatformMethods)(hostRef);
+      (0, import_useElementLayout.useElementLayout)(hostRef, onLayout);
+      (0, import_react_native_use_responder_events.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 = (0, import_web.mergeEvent)(viewProps.onFocus, () => {
+          setStateShallow({ focus: true });
+        });
+        viewProps.onBlur = (0, import_web.mergeEvent)(viewProps.onBlur, () => {
+          setStateShallow({ focus: false });
+        });
+      }
+      const pressability = (0, import_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] ? (0, import_web.composeEventHandlers)(og, val) : val;
+        }
+      }
+    }
+  }
+});
+const dontComposePressabilityKeys = {
+  onClick: true
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  configureMedia,
-  getConfig,
-  getMedia,
-  getThemes,
-  getTokens,
-  mediaObjectToString,
-  mediaQueryConfig,
-  mediaState,
-  onConfiguredOnce,
-  useMedia,
-  useMediaPropsActive
+  Stack,
+  Text
 });
 //# sourceMappingURL=index.js.map

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,sBAAd;AACA,wBAAc,8BADd;AAEA,wBAAc,+BAFd;AAGA,wBAAc,0BAHd;AAIA,wBAAc,4BAJd;AAKA,wBAAc,yBALd;AAMA,wBAAc,2BANd;AAOA,wBAAc,6BAPd;AAQA,wBAAc,8BARd;AASA,wBAAc,yBATd;AAUA,wBAAc,uBAVd;AAWA,wBAAc,0BAXd;AAYA,wBAAc,qBAZd;AAaA,wBAAc,oBAbd;AAcA,wBAAc,+BAdd;AAkBA,oBAAkE;AAElE,wBAAc,kCApBd;AAsBA,wBAAc,yCAtBd;AAuBA,wBAAc,uCAvBd;AAwBA,wBAAc,yCAxBd;AAyBA,wBAAc,4CAzBd;AA0BA,wBAAc,qCA1Bd;AA2BA,wBAAc,sCA3Bd;AA4BA,wBAAc,wCA5Bd;AA6BA,wBAAc,iCA7Bd;AA8BA,wBAAc,mCA9Bd;AA+BA,wBAAc,uCA/Bd;AAgCA,wBAAc,yCAhCd;AAiCA,wBAAc,iCAjCd;AAkCA,wBAAc,gCAlCd;AAmCA,wBAAc,2CAnCd;AAqCA,wBAAc,4CArCd;AAuCA,wBAAc,0BAvCd;AAwCA,wBAAc,qCAxCd;AA0CA,sBAQO;AACP,wBAAc,6BAnDd;AAoDA,wBAAc,iCApDd;AAqDA,wBAAc,+BArDd;AAsDA,wBAAc,6BAtDd;AAwDA,wBAAc,yBAxDd;AAyDA,wBAAc,0BAzDd;AA0DA,wBAAc,yBA1Dd;AA2DA,wBAAc,2CA3Dd;AA4DA,wBAAc,0BA5Dd;AA6DA,wBAAc,kCA7Dd;AA8DA,wBAAc,iCA9Dd;AA+DA,wBAAc,oCA/Dd;AAiEA,wBAAc,sCAjEd;AAkEA,wBAAc,wCAlEd;AAmEA,wBAAc,+BAnEd;AAoEA,wBAAc,kCApEd;AAqEA,wBAAc,6BArEd;AAsEA,wBAAc,+BAtEd;",
-  "names": []
+  "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": "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",
+  "names": ["WebStack", "WebText"]
 }

package/dist/cjs/{types.js → reactNativeTypes.js}

@@ -12,6 +12,6 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var types_exports = {};
-module.exports = __toCommonJS(types_exports);
-//# sourceMappingURL=types.js.map
+var reactNativeTypes_exports = {};
+module.exports = __toCommonJS(reactNativeTypes_exports);
+//# sourceMappingURL=reactNativeTypes.js.map

package/dist/cjs/reactNativeTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/reactNativeTypes.ts"],
+  "sourcesContent": ["import type { GestureResponderHandlers, LayoutChangeEvent } from 'react-native'\n\n// The following list is sourced from:\n// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/types/styles.js#L76\ntype RNWCursorValue =\n  | 'alias'\n  | 'all-scroll'\n  | 'auto'\n  | 'cell'\n  | 'context-menu'\n  | 'copy'\n  | 'crosshair'\n  | 'default'\n  | 'grab'\n  | 'grabbing'\n  | 'help'\n  | 'pointer'\n  | 'progress'\n  | 'wait'\n  | 'text'\n  | 'vertical-text'\n  | 'move'\n  | 'none'\n  | 'no-drop'\n  | 'not-allowed'\n  | 'zoom-in'\n  | 'zoom-out'\n  | 'col-resize'\n  | 'e-resize'\n  | 'ew-resize'\n  | 'n-resize'\n  | 'ne-resize'\n  | 'ns-resize'\n  | 'nw-resize'\n  | 'row-resize'\n  | 's-resize'\n  | 'se-resize'\n  | 'sw-resize'\n  | 'w-resize'\n  | 'nesw-resize'\n  | 'nwse-resize'\n\n// This list is the combination of the following two lists:\n// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js#L10\n// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L12\n// Plus the single hard-coded value \"label\" from here:\n// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L36\ntype RNWWebAccessibilityRole =\n  | 'adjustable'\n  | 'article'\n  | 'banner'\n  | 'blockquote'\n  | 'button'\n  | 'code'\n  | 'complementary'\n  | 'contentinfo'\n  | 'deletion'\n  | 'emphasis'\n  | 'figure'\n  | 'form'\n  | 'header'\n  | 'image'\n  | 'imagebutton'\n  | 'insertion'\n  | 'keyboardkey'\n  | 'label'\n  | 'link'\n  | 'list'\n  | 'listitem'\n  | 'main'\n  | 'navigation'\n  | 'none'\n  | 'region'\n  | 'search'\n  | 'strong'\n  | 'summary'\n  | 'text'\n\ntype OnLayout = ((event: LayoutChangeEvent) => void) | undefined\n\ntype RNExtraProps = {\n  dataSet?: Record<string, string | number | undefined | null>\n  onScrollShouldSetResponder?: unknown\n  onScrollShouldSetResponderCapture?: unknown\n  onSelectionChangeShouldSetResponder?: unknown\n  onSelectionChangeShouldSetResponderCapture?: unknown\n  onLayout?: OnLayout\n  href?: string\n  hrefAttrs?: {\n    target?: '_blank' | '_self' | '_top' | 'blank' | 'self' | 'top'\n    rel?: string\n    download?: boolean\n  }\n}\n\nexport interface RNViewProps extends GestureResponderHandlers, RNExtraProps {\n  rel?: any\n  download?: any\n}\n\nexport interface RNTextProps extends RNExtraProps {\n  dir?: 'ltr' | 'rtl' | 'auto'\n  focusable?: boolean\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/hooks/usePlatformMethods.js

@@ -0,0 +1,24 @@
+import { useIsomorphicLayoutEffect } from "@tamagui/web";
+import { getRect } from "../helpers/getRect";
+import { measureLayout } from "./useElementLayout";
+function usePlatformMethods(hostRef) {
+  useIsomorphicLayoutEffect(() => {
+    const node = hostRef.current;
+    if (!node)
+      return;
+    node.measure = (callback) => measureLayout(node, null, callback);
+    node.measureLayout = (relativeToNode, success) => measureLayout(node, relativeToNode, success);
+    node.measureInWindow = (callback) => {
+      if (!node)
+        return;
+      setTimeout(() => {
+        const { height, left, top, width } = getRect(node);
+        callback(left, top, width, height);
+      }, 0);
+    };
+  }, [hostRef]);
+}
+export {
+  usePlatformMethods
+};
+//# sourceMappingURL=usePlatformMethods.js.map

package/dist/esm/hooks/usePlatformMethods.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/usePlatformMethods.ts"],
+  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/web'\nimport { RefObject } from 'react'\n\nimport { getRect } from '../helpers/getRect'\nimport { measureLayout } from './useElementLayout'\n\n// react native compat (web only)\nexport function usePlatformMethods(hostRef: RefObject<Element>) {\n  useIsomorphicLayoutEffect(() => {\n    const node = hostRef.current\n    if (!node) return\n    // @ts-ignore\n    node.measure = (callback) => measureLayout(node, null, callback)\n    // @ts-ignore\n    node.measureLayout = (relativeToNode, success) =>\n      measureLayout(node as HTMLElement, relativeToNode, success)\n    // @ts-ignore\n    node.measureInWindow = (callback) => {\n      if (!node) return\n      setTimeout(() => {\n        const { height, left, top, width } = getRect(node as HTMLElement)!\n        callback(left, top, width, height)\n      }, 0)\n    }\n  }, [hostRef])\n}\n"],
+  "mappings": "AAAA,SAAS,iCAAiC;AAG1C,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAGvB,SAAS,mBAAmB,SAA6B;AAC9D,4BAA0B,MAAM;AAC9B,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC;AAAM;AAEX,SAAK,UAAU,CAAC,aAAa,cAAc,MAAM,MAAM,QAAQ;AAE/D,SAAK,gBAAgB,CAAC,gBAAgB,YACpC,cAAc,MAAqB,gBAAgB,OAAO;AAE5D,SAAK,kBAAkB,CAAC,aAAa;AACnC,UAAI,CAAC;AAAM;AACX,iBAAW,MAAM;AACf,cAAM,EAAE,QAAQ,MAAM,KAAK,MAAM,IAAI,QAAQ,IAAmB;AAChE,iBAAS,MAAM,KAAK,OAAO,MAAM;AAAA,MACnC,GAAG,CAAC;AAAA,IACN;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AACd;",
+  "names": []
+}