@tamagui/core 1.0.1-beta.19 → 1.0.1-beta.190

package/dist/esm/hooks/useId.js

@@ -1,34 +1,4 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import * as React from "react";
-import { useIsomorphicLayoutEffect } from "../constants/platform";
-let serverHandoffComplete = false;
-let id = 0;
-function genId() {
-  return ++id;
-}
-__name(genId, "genId");
-function useId(providedId) {
-  var _a;
-  if (typeof React.useId === "function") {
-    let id3 = React.useId(providedId);
-    return providedId != null ? providedId : id3;
-  }
-  let initialId = providedId != null ? providedId : serverHandoffComplete ? genId() : null;
-  let [id2, setId] = React.useState(initialId);
-  useIsomorphicLayoutEffect(() => {
-    if (id2 === null) {
-      setId(genId());
-    }
-  }, []);
-  React.useEffect(() => {
-    if (serverHandoffComplete === false) {
-      serverHandoffComplete = true;
-    }
-  }, []);
-  return (_a = providedId != null ? providedId : id2) != null ? _a : void 0;
-}
-__name(useId, "useId");
+import { useId } from "react";
 export {
   useId
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useId.tsx"],
-  "sourcesContent": ["/*\n * Welcome to @reach/auto-id!\n\n * Let's see if we can make sense of why this hook exists and its\n * implementation.\n *\n * Some background:\n *   1. Accessibility APIs rely heavily on element IDs\n *   2. Requiring developers to put IDs on every element in Reach UI is both\n *      cumbersome and error-prone\n *   3. With a component model, we can generate IDs for them!\n *\n * Solution 1: Generate random IDs.\n *\n * This works great as long as you don't server render your app. When React (in\n * the client) tries to reuse the markup from the server, the IDs won't match\n * and React will then recreate the entire DOM tree.\n *\n * Solution 2: Increment an integer\n *\n * This sounds great. Since we're rendering the exact same tree on the server\n * and client, we can increment a counter and get a deterministic result between\n * client and server. Also, JS integers can go up to nine-quadrillion. I'm\n * pretty sure the tab will be closed before an app never needs\n * 10 quadrillion IDs!\n *\n * Problem solved, right?\n *\n * Ah, but there's a catch! React's concurrent rendering makes this approach\n * non-deterministic. While the client and server will end up with the same\n * elements in the end, depending on suspense boundaries (and possibly some user\n * input during the initial render) the incrementing integers won't always match\n * up.\n *\n * Solution 3: Don't use IDs at all on the server; patch after first render.\n *\n * What we've done here is solution 2 with some tricks. With this approach, the\n * ID returned is an empty string on the first render. This way the server and\n * client have the same markup no matter how wild the concurrent rendering may\n * have gotten.\n *\n * After the render, we patch up the components with an incremented ID. This\n * causes a double render on any components with `useId`. Shouldn't be a problem\n * since the components using this hook should be small, and we're only updating\n * the ID attribute on the DOM, nothing big is happening.\n *\n * It doesn't have to be an incremented number, though--we could do generate\n * random strings instead, but incrementing a number is probably the cheapest\n * thing we can do.\n *\n * Additionally, we only do this patchup on the very first client render ever.\n * Any calls to `useId` that happen dynamically in the client will be\n * populated immediately with a value. So, we only get the double render after\n * server hydration and never again, SO BACK OFF ALRIGHT?\n */\n\nimport * as React from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\n\nlet serverHandoffComplete = false\nlet id = 0\nfunction genId() {\n  return ++id\n}\n\n/* eslint-disable react-hooks/rules-of-hooks */\n\n/**\n * useId\n *\n * Autogenerate IDs to facilitate WAI-ARIA and server rendering.\n *\n * Note: The returned ID will initially be `null` and will update after a\n * component mounts. Users may need to supply their own ID if they need\n * consistent values for SSR.\n *\n * @see Docs https://reach.tech/auto-id\n */\nfunction useId(idFromProps: string): string\nfunction useId(idFromProps: number): number\nfunction useId(idFromProps: string | number): string | number\nfunction useId(idFromProps: string | undefined | null): string | undefined\nfunction useId(idFromProps: number | undefined | null): number | undefined\nfunction useId(idFromProps: string | number | undefined | null): string | number | undefined\nfunction useId(): string | undefined\n\nfunction useId(providedId?: number | string | undefined | null) {\n  // TODO: Remove error flag when updating internal deps to React 18. None of\n  // our tricks will play well with concurrent rendering anyway.\n  // @ts-expect-error\n  if (typeof React.useId === 'function') {\n    // @ts-expect-error\n    let id = React.useId(providedId)\n    return providedId != null ? providedId : id\n  }\n\n  // If this instance isn't part of the initial render, we don't have to do the\n  // double render/patch-up dance. We can just generate the ID and return it.\n  let initialId = providedId ?? (serverHandoffComplete ? genId() : null)\n  let [id, setId] = React.useState(initialId)\n\n  useIsomorphicLayoutEffect(() => {\n    if (id === null) {\n      // Patch the ID after render. We do this in `useLayoutEffect` to avoid any\n      // rendering flicker, though it'll make the first render slower (unlikely\n      // to matter, but you're welcome to measure your app and let us know if\n      // it's a problem).\n      setId(genId())\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  React.useEffect(() => {\n    if (serverHandoffComplete === false) {\n      // Flag all future uses of `useId` to skip the update dance. This is in\n      // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't\n      // accidentally bail out of the patch-up dance prematurely.\n      serverHandoffComplete = true\n    }\n  }, [])\n\n  return providedId ?? id ?? undefined\n}\n\nexport { useId }\n"],
-  "mappings": ";;AAwDA;AAEA;AAEA,IAAI,wBAAwB;AAC5B,IAAI,KAAK;AACT,iBAAiB;AACf,SAAO,EAAE;AACX;AAFS;AAyBT,eAAe,YAAiD;AAvFhE;AA2FE,MAAI,OAAO,MAAM,UAAU,YAAY;AAErC,QAAI,MAAK,MAAM,MAAM,UAAU;AAC/B,WAAO,cAAc,OAAO,aAAa;AAAA,EAC3C;AAIA,MAAI,YAAY,kCAAe,wBAAwB,MAAM,IAAI;AACjE,MAAI,CAAC,KAAI,SAAS,MAAM,SAAS,SAAS;AAE1C,4BAA0B,MAAM;AAC9B,QAAI,QAAO,MAAM;AAKf,YAAM,MAAM,CAAC;AAAA,IACf;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,MAAM;AACpB,QAAI,0BAA0B,OAAO;AAInC,8BAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,wCAAc,QAAd,YAAoB;AAC7B;AApCS;",
+  "sourcesContent": ["export { useId } from 'react'\n"],
+  "mappings": "AAAA,SAAS,aAAa;",
   "names": []
 }

package/dist/esm/hooks/useIsMounted.js

@@ -1,6 +1,4 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { useIsomorphicLayoutEffect } from "@tamagui/core";
+import { useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { useRef } from "react";
 function useIsMounted() {
   const isMounted = useRef(false);
@@ -12,7 +10,6 @@ function useIsMounted() {
   }, []);
   return isMounted;
 }
-__name(useIsMounted, "useIsMounted");
 export {
   useIsMounted
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useIsMounted.ts"],
-  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/core'\nimport { useRef } from 'react'\n\nexport function useIsMounted() {\n  const isMounted = useRef(false)\n\n  useIsomorphicLayoutEffect(() => {\n    isMounted.current = true\n\n    return () => {\n      isMounted.current = false\n    }\n  }, [])\n\n  return isMounted\n}\n"],
-  "mappings": ";;AAAA;AACA;AAEO,wBAAwB;AAC7B,QAAM,YAAY,OAAO,KAAK;AAE9B,4BAA0B,MAAM;AAC9B,cAAU,UAAU;AAEpB,WAAO,MAAM;AACX,gBAAU,UAAU;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;AAZgB;",
+  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useRef } from 'react'\n\nexport function useIsMounted() {\n  const isMounted = useRef(false)\n\n  useIsomorphicLayoutEffect(() => {\n    isMounted.current = true\n\n    return () => {\n      isMounted.current = false\n    }\n  }, [])\n\n  return isMounted\n}\n"],
+  "mappings": "AAAA,SAAS,iCAAiC;AAC1C,SAAS,cAAc;AAEhB,SAAS,eAAe;AAC7B,QAAM,YAAY,OAAO,KAAK;AAE9B,4BAA0B,MAAM;AAC9B,cAAU,UAAU;AAEpB,WAAO,MAAM;AACX,gBAAU,UAAU;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;",
   "names": []
 }

package/dist/esm/hooks/useIsSSR.js

@@ -0,0 +1,22 @@
+import { isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { useState } from "react";
+import { startTransition } from "../helpers/startTransition";
+const useIsSSR = (props) => {
+  const [val, setVal] = useState(true);
+  if (isWeb && !isServer) {
+    useIsomorphicLayoutEffect(() => {
+      if (props == null ? void 0 : props.immediate) {
+        setVal(false);
+      } else {
+        startTransition(() => {
+          setVal(false);
+        });
+      }
+    }, []);
+  }
+  return val;
+};
+export {
+  useIsSSR
+};
+//# sourceMappingURL=useIsSSR.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useIsSSR.tsx"],
+  "sourcesContent": ["import { isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useState } from 'react'\n\nimport { startTransition } from '../helpers/startTransition'\n\n// because any change before first useEffect causes hydration / mismatch issues\n\nexport const useIsSSR = (props?: { immediate?: boolean }) => {\n  const [val, setVal] = useState(true)\n\n  if (isWeb && !isServer) {\n    useIsomorphicLayoutEffect(() => {\n      // could also have a global tamagui `config.immediateSSRTransition`\n      if (props?.immediate) {\n        setVal(false)\n      } else {\n        startTransition(() => {\n          setVal(false)\n        })\n      }\n    }, [])\n  }\n\n  return val\n}\n"],
+  "mappings": "AAAA,SAAS,UAAU,OAAO,iCAAiC;AAC3D,SAAS,gBAAgB;AAEzB,SAAS,uBAAuB;AAIzB,MAAM,WAAW,CAAC,UAAoC;AAC3D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,IAAI;AAEnC,MAAI,SAAS,CAAC,UAAU;AACtB,8BAA0B,MAAM;AAE9B,UAAI,+BAAO,WAAW;AACpB,eAAO,KAAK;AAAA,MACd,OAAO;AACL,wBAAgB,MAAM;AACpB,iBAAO,KAAK;AAAA,QACd,CAAC;AAAA,MACH;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/hooks/useIsTouchDevice.js

@@ -1,16 +1,16 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { useState } from "react";
-import { isTouchDevice, useIsomorphicLayoutEffect } from "../constants/platform";
-const useIsTouchDevice = /* @__PURE__ */ __name(() => {
+const useIsTouchDevice = () => {
   const [touchOnly, setTouchOnly] = useState(false);
-  useIsomorphicLayoutEffect(() => {
-    if (isTouchDevice) {
-      setTouchOnly(true);
-    }
-  }, []);
+  if (isWeb && !isServer) {
+    useIsomorphicLayoutEffect(() => {
+      if (isTouchable) {
+        setTouchOnly(true);
+      }
+    }, []);
+  }
   return touchOnly;
-}, "useIsTouchDevice");
+};
 export {
   useIsTouchDevice
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useIsTouchDevice.tsx"],
-  "sourcesContent": ["import { useState } from 'react'\n\nimport { isTouchDevice, useIsomorphicLayoutEffect } from '../constants/platform'\n\n// ssr friendly\n\nexport const useIsTouchDevice = () => {\n  const [touchOnly, setTouchOnly] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    if (isTouchDevice) {\n      setTouchOnly(true)\n    }\n  }, [])\n\n  return touchOnly\n}\n"],
-  "mappings": ";;AAAA;AAEA;AAIO,MAAM,mBAAmB,6BAAM;AACpC,QAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;AAEhD,4BAA0B,MAAM;AAC9B,QAAI,eAAe;AACjB,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT,GAVgC;",
+  "sourcesContent": ["import { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useState } from 'react'\n\n// ssr friendly\n\nexport const useIsTouchDevice = () => {\n  const [touchOnly, setTouchOnly] = useState(false)\n\n  if (isWeb && !isServer) {\n    // only ever false on web SSR (env), so run effect conditionally\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useIsomorphicLayoutEffect(() => {\n      if (isTouchable) {\n        setTouchOnly(true)\n      }\n    }, [])\n  }\n\n  return touchOnly\n}\n"],
+  "mappings": "AAAA,SAAS,UAAU,aAAa,OAAO,iCAAiC;AACxE,SAAS,gBAAgB;AAIlB,MAAM,mBAAmB,MAAM;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,MAAI,SAAS,CAAC,UAAU;AAGtB,8BAA0B,MAAM;AAC9B,UAAI,aAAa;AACf,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/hooks/useMedia.js

@@ -1,135 +1,187 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { useForceUpdate } from "@tamagui/use-force-update";
-import { useRef } from "react";
-import { useIsomorphicLayoutEffect } from "../constants/platform";
+import { useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { startTransition, useEffect, useMemo, useState } from "react";
+import { getConfig } from "../config";
 import { matchMedia } from "../helpers/matchMedia";
-import { useConstant } from "./useConstant";
-const mediaState = {};
+import { useSafeRef } from "./useSafeRef";
+const mediaState = process.env.NODE_ENV === "development" ? new Proxy(
+  {},
+  {
+    get(target, key) {
+      if (typeof key === "string" && key[0] === "$") {
+        throw new Error(`Access of mediaState should never include $`);
+      }
+      return Reflect.get(target, key);
+    }
+  }
+) : {};
 const mediaQueryListeners = {};
-const addMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
+function addMediaQueryListener(key, cb) {
+  if (process.env.NODE_ENV === "development" && key[0] === "$") {
+    console.warn(`Warning, listening to media queries shouldn't use the "$" prefix`);
+  }
   mediaQueryListeners[key] = mediaQueryListeners[key] || /* @__PURE__ */ new Set();
   mediaQueryListeners[key].add(cb);
-}, "addMediaQueryListener");
-const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
+  return () => removeMediaQueryListener(key, cb);
+}
+function removeMediaQueryListener(key, cb) {
   var _a;
   (_a = mediaQueryListeners[key]) == null ? void 0 : _a.delete(cb);
-}, "removeMediaQueryListener");
-let hasConfigured = false;
+}
 const mediaQueryConfig = {};
-const getMedia = /* @__PURE__ */ __name(() => {
+const getMedia = () => {
   return mediaState;
-}, "getMedia");
-const configureMedia = /* @__PURE__ */ __name(({
-  queries,
-  defaultActive = ["sm", "xs"]
-} = {}) => {
-  var _a;
-  if (hasConfigured) {
-    console.warn(`Already configured mediaQueries once (you may have called getMedia() before configureMedia())`);
+};
+let currentMediaState;
+let initialMediaState;
+const getInitialMediaState = () => {
+  if (getConfig().disableSSR) {
+    return currentMediaState || {};
+  }
+  return initialMediaState || {};
+};
+const dispose = /* @__PURE__ */ new Set();
+const configureMedia = (config) => {
+  const { media, mediaQueryDefaultActive } = config;
+  if (!media)
+    return;
+  for (const key in media) {
+    mediaState[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false;
+  }
+  Object.assign(mediaQueryConfig, media);
+  currentMediaState = { ...mediaState };
+  initialMediaState = currentMediaState;
+  if (config.disableSSR) {
+    setupMediaListeners();
   }
-  if (queries) {
-    Object.assign(mediaQueryConfig, queries);
-    hasConfigured = true;
+};
+function unlisten() {
+  dispose.forEach((cb) => cb());
+  dispose.clear();
+}
+let configuredKey = "";
+function setupMediaListeners() {
+  const nextKey = JSON.stringify(mediaQueryConfig);
+  if (nextKey === configuredKey) {
+    return;
   }
-  for (const key in queries) {
-    const str = mediaObjectToString(queries[key]);
-    const propKey = `$${key}`;
-    try {
-      let update = function() {
+  configuredKey = nextKey;
+  unlisten();
+  startTransition(() => {
+    for (const key in mediaQueryConfig) {
+      let update2 = function() {
         const next = !!getMatch().matches;
-        if (next === mediaState[propKey])
+        if (next === mediaState[key])
           return;
-        mediaState[propKey] = next;
-        const listeners = mediaQueryListeners[propKey];
+        mediaState[key] = next;
+        currentMediaState = { ...mediaState };
+        const listeners = mediaQueryListeners[key];
         if (listeners == null ? void 0 : listeners.size) {
-          for (const cb of [...listeners]) {
-            cb();
-          }
+          listeners.forEach((cb) => cb(next));
         }
       };
-      __name(update, "update");
-      const getMatch = /* @__PURE__ */ __name(() => matchMedia(str), "getMatch");
+      var update = update2;
+      const str = mediaObjectToString(mediaQueryConfig[key]);
+      const getMatch = () => matchMedia(str);
       const match = getMatch();
-      if (!match || typeof match.addListener !== "function") {
-        throw new Error("\u26A0\uFE0F No match (seeing this in RN sometimes)");
+      if (!match) {
+        throw new Error("\u26A0\uFE0F No match");
       }
-      mediaState[propKey] = !!match.matches;
-      match.addListener(update);
-      update();
-    } catch (err) {
-      console.error("Error running media query", str, err.message, err.stack);
-      const isDefaultActive = (_a = defaultActive == null ? void 0 : defaultActive.includes(key)) != null ? _a : true;
-      mediaState[propKey] = isDefaultActive;
+      match.addListener(update2);
+      dispose.add(() => match.removeListener(update2));
+      update2();
     }
+  });
+}
+function useMediaQueryListeners(config) {
+  if (config.disableSSR) {
+    return;
   }
-}, "configureMedia");
-const useMedia = /* @__PURE__ */ __name(() => {
-  const forceUpdate = useForceUpdate();
-  const state = useRef();
-  if (!state.current) {
-    state.current = {
-      selections: {},
-      nextSelections: {},
-      isUnmounted: false,
-      isRendering: true
-    };
-  }
-  state.current.isRendering = true;
-  useIsomorphicLayoutEffect(() => {
-    const st = state.current;
-    st.isRendering = false;
-    for (const key in st.selections) {
-      if (!(key in st.nextSelections)) {
-        removeMediaQueryListener(key, forceUpdate);
-      }
-    }
-    for (const key in st.nextSelections) {
-      if (!(key in st.selections)) {
-        addMediaQueryListener(key, forceUpdate);
+  useEffect(() => {
+    setupMediaListeners();
+    return unlisten;
+  }, []);
+}
+function useMedia() {
+  const [state, setState] = useState(initialMediaState || {});
+  const keys = useSafeRef({});
+  function updateState() {
+    setState((prev) => {
+      for (const key in keys.current) {
+        if (prev[key] !== mediaState[key]) {
+          return { ...mediaState };
+        }
       }
-    }
-  });
+      return prev;
+    });
+  }
   useIsomorphicLayoutEffect(() => {
+    const disposes = Object.keys(keys.current).map(
+      (key) => addMediaQueryListener(key, updateState)
+    );
+    updateState();
     return () => {
-      const st = state.current;
-      st.isUnmounted = true;
-      const allKeys = {
-        ...st.selections,
-        ...st.nextSelections
-      };
-      for (const key in allKeys) {
-        removeMediaQueryListener(key, forceUpdate);
-      }
+      disposes.forEach((cb) => cb());
     };
-  }, []);
-  return useConstant(() => {
-    const st = state.current;
-    return new Proxy(mediaState, {
-      get(target, key) {
-        if (key[0] !== "$") {
-          key = `$${key}`;
+  });
+  return useMemo(
+    () => new Proxy(state, {
+      get(_, key) {
+        if (process.env.NODE_ENV === "development") {
+          if (!currentMediaState) {
+            throw new Error(
+              `To use useMedia() you must pass in media configuration to createTamagui, none was found.`
+            );
+          }
         }
-        if (!(key in mediaState)) {
-          return Reflect.get(target, key);
+        if (!keys.current[key]) {
+          keys.current[key] = true;
         }
-        if (!st.isUnmounted) {
-          if (st.isRendering) {
-            st.nextSelections[key] = true;
-          }
+        return Reflect.get(state, key);
+      }
+    }),
+    [state, keys]
+  );
+}
+function useMediaPropsActive(props) {
+  const media = useMedia();
+  return useMemo(() => {
+    const evaluated = {};
+    const lastSetImportanceForKey = {};
+    const propNames = Object.keys(props);
+    const mediaKeysOrdered = Object.keys(getMedia());
+    function update(k, v, importance = 0) {
+      if (lastSetImportanceForKey[k] > importance) {
+        return;
+      }
+      lastSetImportanceForKey[k] = importance;
+      evaluated[k] = v;
+    }
+    for (let i = propNames.length - 1; i >= 0; i--) {
+      const key = propNames[i];
+      const val = props[key];
+      if (key[0] === "$") {
+        const shortKey = key.slice(1);
+        if (!media[shortKey]) {
+          continue;
         }
-        if (key in mediaState) {
-          return mediaState[key];
+        if (val && typeof val === "object") {
+          const subPropNames = Object.keys(val);
+          const mediaImportance = mediaKeysOrdered.indexOf(shortKey);
+          for (let j = subPropNames.length; j--; j >= 0) {
+            const skey = subPropNames[j];
+            update(skey, val[skey], mediaImportance);
+          }
         }
-        return Reflect.get(mediaState, key);
+      } else {
+        update(key, val);
       }
-    });
-  });
-}, "useMedia");
+    }
+    return evaluated;
+  }, [media, props]);
+}
 function camelToHyphen(str) {
   return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();
 }
-__name(camelToHyphen, "camelToHyphen");
 function mediaObjectToString(query) {
   if (typeof query === "string") {
     return query;
@@ -145,15 +197,17 @@ function mediaObjectToString(query) {
     return `(${feature}: ${value})`;
   }).join(" and ");
 }
-__name(mediaObjectToString, "mediaObjectToString");
 export {
   addMediaQueryListener,
   configureMedia,
+  getInitialMediaState,
   getMedia,
   mediaObjectToString,
   mediaQueryConfig,
   mediaState,
   removeMediaQueryListener,
-  useMedia
+  useMedia,
+  useMediaPropsActive,
+  useMediaQueryListeners
 };
 //# sourceMappingURL=useMedia.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useMedia.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  ConfigureMediaQueryOptions,\n  MediaQueries,\n  MediaQueryKey,\n  MediaQueryObject,\n  MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: MediaQueryState = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n  mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n  mediaQueryListeners[key]?.delete(cb)\n}\n\nlet hasConfigured = false\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n  return mediaState\n}\n\nexport const configureMedia = ({\n  queries,\n  defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n  if (hasConfigured) {\n    console.warn(\n      `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n    )\n  }\n\n  if (queries) {\n    Object.assign(mediaQueryConfig, queries)\n    hasConfigured = true\n  }\n\n  // setup\n  for (const key in queries) {\n    const str = mediaObjectToString(queries[key])\n    const propKey = `$${key}`\n    try {\n      const getMatch = () => matchMedia(str)\n      const match = getMatch()\n      if (!match || typeof match.addListener !== 'function') {\n        // caught below\n        throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n      }\n      mediaState[propKey] = !!match.matches\n      match.addListener(update)\n\n      function update() {\n        const next = !!getMatch().matches\n        if (next === mediaState[propKey]) return\n        mediaState[propKey] = next\n        const listeners = mediaQueryListeners[propKey]\n        if (listeners?.size) {\n          for (const cb of [...listeners]) {\n            cb()\n          }\n        }\n      }\n\n      update()\n    } catch (err: any) {\n      console.error('Error running media query', str, err.message, err.stack)\n      const isDefaultActive = defaultActive?.includes(key as any) ?? true\n      mediaState[propKey] = isDefaultActive\n    }\n  }\n}\n\ntype UseMediaState = {\n  selections: { [key: string]: boolean }\n  nextSelections: { [key: string]: boolean }\n  isRendering: boolean\n  isUnmounted: boolean\n}\n\nexport const useMedia = () => {\n  const forceUpdate = useForceUpdate()\n  const state = useRef() as React.MutableRefObject<UseMediaState>\n  if (!state.current) {\n    state.current = {\n      selections: {},\n      nextSelections: {},\n      isUnmounted: false,\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    // delete old\n    for (const key in st.selections) {\n      if (!(key in st.nextSelections)) {\n        removeMediaQueryListener(key, forceUpdate)\n      }\n    }\n    // add new\n    for (const key in st.nextSelections) {\n      if (!(key in st.selections)) {\n        addMediaQueryListener(key, forceUpdate)\n      }\n    }\n  })\n\n  // unmount\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      const st = state.current\n      st.isUnmounted = true\n      const allKeys = {\n        ...st.selections,\n        ...st.nextSelections,\n      }\n      for (const key in allKeys) {\n        removeMediaQueryListener(key, forceUpdate)\n      }\n    }\n  }, [])\n\n  return useConstant(() => {\n    const st = state.current\n    return new Proxy(\n      mediaState as {\n        [key in MediaQueryKey]: boolean\n      },\n      {\n        get(target, key: string) {\n          if (key[0] !== '$') {\n            key = `$${key}`\n          }\n          if (!(key in mediaState)) {\n            return Reflect.get(target, key)\n          }\n          if (!st.isUnmounted) {\n            if (st.isRendering) {\n              st.nextSelections[key] = true\n            }\n          }\n          if (key in mediaState) {\n            return mediaState[key]\n          }\n          return Reflect.get(mediaState, key)\n        },\n      }\n    )\n  })\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { startTransition, useEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  MediaQueries,\n  MediaQueryKey,\n  MediaQueryObject,\n  MediaQueryState,\n  TamaguiInternalConfig,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState =\n  // development time safeguard\n  process.env.NODE_ENV === 'development'\n    ? new Proxy(\n        {},\n        {\n          get(target, key) {\n            if (typeof key === 'string' && key[0] === '$') {\n              throw new Error(`Access of mediaState should never include $`)\n            }\n            return Reflect.get(target, key)\n          },\n        }\n      )\n    : ({} as any)\n\ntype MediaListener = (next: boolean) => void\n\nconst mediaQueryListeners: { [key: string]: Set<MediaListener> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n    // eslint-disable-next-line no-console\n    console.warn(`Warning, listening to media queries shouldn't use the \"$\" prefix`)\n  }\n  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n  mediaQueryListeners[key].add(cb)\n  return () => removeMediaQueryListener(key, cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  mediaQueryListeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n  return mediaState\n}\n\n// for SSR capture it at time of startup\nlet currentMediaState: MediaQueryState | null\nlet initialMediaState: MediaQueryState | null\n\nexport const getInitialMediaState = () => {\n  if (getConfig().disableSSR) {\n    return currentMediaState || {}\n  }\n  return initialMediaState || {}\n}\n\nconst dispose = new Set<Function>()\n\nexport const configureMedia = (config: TamaguiInternalConfig) => {\n  const { media, mediaQueryDefaultActive } = config\n  if (!media) return\n  for (const key in media) {\n    mediaState[key] = mediaQueryDefaultActive?.[key] || false\n  }\n  Object.assign(mediaQueryConfig, media)\n  currentMediaState = { ...mediaState }\n  initialMediaState = currentMediaState\n  if (config.disableSSR) {\n    setupMediaListeners()\n  }\n}\n\nfunction unlisten() {\n  dispose.forEach((cb) => cb())\n  dispose.clear()\n}\n\n/**\n * Note: This should *not* set the state on the first render!\n * Because to avoid hydration issues SSR must match the server\n * *and then* re-render with the actual media query state.\n */\nlet configuredKey = ''\nfunction setupMediaListeners() {\n  // avoid setting up more than once per config\n  const nextKey = JSON.stringify(mediaQueryConfig)\n  if (nextKey === configuredKey) {\n    return\n  }\n  configuredKey = nextKey\n\n  // hmr, undo existing before re-binding\n  unlisten()\n\n  // theoretically this should make media reactions smoother but potentially delayed?\n  // but i believe consistent, so that's a nicer default (we'll see)\n  startTransition(() => {\n    for (const key in mediaQueryConfig) {\n      const str = mediaObjectToString(mediaQueryConfig[key])\n      const getMatch = () => matchMedia(str)\n      const match = getMatch()\n      if (!match) {\n        throw new Error('\u26A0\uFE0F No match')\n      }\n      // react native needs these deprecated apis for now\n      match.addListener(update)\n      dispose.add(() => match.removeListener(update))\n\n      update()\n\n      function update() {\n        const next = !!getMatch().matches\n        if (next === mediaState[key]) return\n        mediaState[key] = next\n        currentMediaState = { ...mediaState }\n        const listeners = mediaQueryListeners[key]\n        if (listeners?.size) {\n          listeners.forEach((cb) => cb(next))\n        }\n      }\n    }\n  })\n}\n\nexport function useMediaQueryListeners(config: TamaguiInternalConfig) {\n  if (config.disableSSR) {\n    return\n  }\n  useEffect(() => {\n    setupMediaListeners()\n    return unlisten\n  }, [])\n}\n\nexport function useMedia(): {\n  [key in MediaQueryKey]: boolean\n} {\n  const [state, setState] = useState<MediaQueryState>(initialMediaState || {})\n  const keys = useSafeRef({} as Record<string, boolean>)\n\n  function updateState() {\n    setState((prev) => {\n      for (const key in keys.current) {\n        if (prev[key] !== mediaState[key]) {\n          return { ...mediaState }\n        }\n      }\n      return prev\n    })\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    const disposes: Function[] = Object.keys(keys.current).map((key) =>\n      addMediaQueryListener(key, updateState)\n    )\n    updateState()\n    return () => {\n      disposes.forEach((cb) => cb())\n    }\n  })\n\n  return useMemo(\n    () =>\n      new Proxy(state, {\n        get(_, key: string) {\n          if (process.env.NODE_ENV === 'development') {\n            if (!currentMediaState) {\n              throw new Error(\n                `To use useMedia() you must pass in media configuration to createTamagui, none was found.`\n              )\n            }\n          }\n          if (!keys.current[key]) {\n            keys.current[key] = true\n          }\n          return Reflect.get(state, key)\n        },\n      }),\n    [state, keys]\n  )\n}\n\n/**\n * Useful for more complex components that need access to the currently active props,\n * accounting for the currently active media queries.\n *\n * Use sparingly, is will loop props and trigger re-render on all media queries.\n *\n * */\nexport function useMediaPropsActive<A extends Object>(\n  props: A\n): {\n  // remove all media\n  [Key in keyof A extends `$${string}` ? never : keyof A]?: A[Key]\n} {\n  const media = useMedia()\n\n  return useMemo(() => {\n    const evaluated = {} as A\n    const lastSetImportanceForKey = {}\n    const propNames = Object.keys(props)\n    const mediaKeysOrdered = Object.keys(getMedia())\n\n    function update(k: string, v: any, importance = 0) {\n      if (lastSetImportanceForKey[k] > importance) {\n        return\n      }\n      lastSetImportanceForKey[k] = importance\n      evaluated[k] = v\n    }\n\n    for (let i = propNames.length - 1; i >= 0; i--) {\n      const key = propNames[i]\n      const val = props[key]\n      if (key[0] === '$') {\n        const shortKey = key.slice(1)\n        if (!media[shortKey]) {\n          continue\n        }\n        if (val && typeof val === 'object') {\n          const subPropNames = Object.keys(val)\n          const mediaImportance = mediaKeysOrdered.indexOf(shortKey)\n          for (let j = subPropNames.length; j--; j >= 0) {\n            const skey = subPropNames[j]\n            update(skey, val[skey], mediaImportance)\n          }\n        }\n      } else {\n        update(key, val)\n      }\n    }\n\n    return evaluated\n  }, [media, props])\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
+  "mappings": "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",
+  "names": ["update"]
 }

package/dist/esm/hooks/usePressable.js

@@ -1,13 +1,11 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var _a, _b;
 import { Pressable } from "react-native";
 const getPressable = (_b = (_a = Pressable) == null ? void 0 : _a["type"]) == null ? void 0 : _b["render"];
-const usePressable = /* @__PURE__ */ __name((props) => {
+const usePressable = (props) => {
   const out = getPressable(props);
   const { children, style, ...pressableProps } = out.props;
   return [pressableProps, style];
-}, "usePressable");
+};
 export {
   usePressable
 };

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/hooks/usePressable.tsx"],
   "sourcesContent": ["import { Pressable, PressableProps } from 'react-native'\n\nconst getPressable = Pressable?.['type']?.['render']\n\nexport const usePressable = (props: PressableProps) => {\n  const out = getPressable(props)\n  const { children, style, ...pressableProps } = out.props\n  return [pressableProps, style] as const\n}\n"],
-  "mappings": ";;AAAA;AAAA;AAEA,MAAM,eAAe,6CAAY,YAAZ,mBAAsB;AAEpC,MAAM,eAAe,wBAAC,UAA0B;AACrD,QAAM,MAAM,aAAa,KAAK;AAC9B,QAAM,EAAE,UAAU,UAAU,mBAAmB,IAAI;AACnD,SAAO,CAAC,gBAAgB,KAAK;AAC/B,GAJ4B;",
+  "mappings": "AAAA;AAAA,SAAS,iBAAiC;AAE1C,MAAM,gBAAe,4CAAY,YAAZ,mBAAsB;AAEpC,MAAM,eAAe,CAAC,UAA0B;AACrD,QAAM,MAAM,aAAa,KAAK;AAC9B,QAAM,EAAE,UAAU,UAAU,eAAe,IAAI,IAAI;AACnD,SAAO,CAAC,gBAAgB,KAAK;AAC/B;",
   "names": []
 }

package/dist/esm/hooks/useSafeRef.js

@@ -0,0 +1,36 @@
+import { useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { useRef } from "react";
+const useSafeRef = (initialValue) => {
+  const rawRef = useRef();
+  const raw = rawRef.current ?? (rawRef.current = {
+    isRendering: true,
+    comittedValue: initialValue,
+    currentValue: initialValue,
+    ref: {
+      get current() {
+        if (raw.isRendering) {
+          return raw.currentValue;
+        } else {
+          return raw.comittedValue;
+        }
+      },
+      set current(v) {
+        if (!raw.isRendering) {
+          raw.comittedValue = v;
+        }
+        raw.currentValue = v;
+      }
+    }
+  });
+  raw.isRendering = true;
+  Promise.resolve().then(() => raw.isRendering = false);
+  raw.currentValue = raw.comittedValue;
+  useIsomorphicLayoutEffect(() => {
+    raw.comittedValue = raw.currentValue;
+  });
+  return raw.ref;
+};
+export {
+  useSafeRef
+};
+//# sourceMappingURL=useSafeRef.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useSafeRef.ts"],
+  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useRef } from 'react'\n\n// dai-shi \uD83D\uDE4F\n// https://dev.to/uhyo_/a-concurrent-mode-safe-version-of-useref-1325\n\ntype Raw<T> = {\n  isRendering: boolean\n  comittedValue: T\n  currentValue: T\n  ref: { current: T }\n}\n\nexport const useSafeRef = <T>(initialValue: T) => {\n  const rawRef = useRef<Raw<T>>()\n\n  const raw: Raw<T> =\n    rawRef.current ??\n    (rawRef.current = {\n      isRendering: true,\n      comittedValue: initialValue,\n      currentValue: initialValue,\n      ref: {\n        get current() {\n          if (raw.isRendering) {\n            return raw.currentValue\n          } else {\n            return raw.comittedValue\n          }\n        },\n        set current(v) {\n          if (!raw.isRendering) {\n            raw.comittedValue = v\n          }\n          raw.currentValue = v\n        },\n      },\n    })\n\n  raw.isRendering = true\n  Promise.resolve().then(() => (raw.isRendering = false))\n  raw.currentValue = raw.comittedValue\n\n  useIsomorphicLayoutEffect(() => {\n    raw.comittedValue = raw.currentValue\n  })\n\n  return raw.ref\n}\n"],
+  "mappings": "AAAA,SAAS,iCAAiC;AAC1C,SAAS,cAAc;AAYhB,MAAM,aAAa,CAAI,iBAAoB;AAChD,QAAM,SAAS,OAAe;AAE9B,QAAM,MACJ,OAAO,YACN,OAAO,UAAU;AAAA,IAChB,aAAa;AAAA,IACb,eAAe;AAAA,IACf,cAAc;AAAA,IACd,KAAK;AAAA,MACH,IAAI,UAAU;AACZ,YAAI,IAAI,aAAa;AACnB,iBAAO,IAAI;AAAA,QACb,OAAO;AACL,iBAAO,IAAI;AAAA,QACb;AAAA,MACF;AAAA,MACA,IAAI,QAAQ,GAAG;AACb,YAAI,CAAC,IAAI,aAAa;AACpB,cAAI,gBAAgB;AAAA,QACtB;AACA,YAAI,eAAe;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAEF,MAAI,cAAc;AAClB,UAAQ,QAAQ,EAAE,KAAK,MAAO,IAAI,cAAc,KAAM;AACtD,MAAI,eAAe,IAAI;AAEvB,4BAA0B,MAAM;AAC9B,QAAI,gBAAgB,IAAI;AAAA,EAC1B,CAAC;AAED,SAAO,IAAI;AACb;",
+  "names": []
+}

package/dist/esm/hooks/useServerHooks.js

@@ -0,0 +1,11 @@
+import { isRSC } from "@tamagui/constants";
+import { useRef, useState } from "react";
+const useServerState = isRSC ? (val) => [val, idFn] : useState;
+const useServerRef = isRSC ? (val) => ({ current: val }) : useRef;
+const idFn = () => {
+};
+export {
+  useServerRef,
+  useServerState
+};
+//# sourceMappingURL=useServerHooks.js.map