@tamagui/core 1.0.1-beta.18 → 1.0.1-beta.180

package/dist/cjs/hooks/useConstant.js

@@ -1,8 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -23,13 +23,15 @@ __export(useConstant_exports, {
 module.exports = __toCommonJS(useConstant_exports);
 var import_react = require("react");
 function useConstant(fn) {
+  if (typeof document === "undefined") {
+    return (0, import_react.useMemo)(() => fn(), []);
+  }
   const ref = (0, import_react.useRef)();
   if (!ref.current) {
     ref.current = { v: fn() };
   }
   return ref.current.v;
 }
-__name(useConstant, "useConstant");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useConstant

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useConstant.tsx"],
-  "sourcesContent": ["import { useRef } from 'react'\n\ntype ResultBox<T> = { v: T }\nexport function useConstant<T>(fn: () => T): T {\n  const ref = useRef<ResultBox<T>>()\n  if (!ref.current) {\n    ref.current = { v: fn() }\n  }\n  return ref.current.v\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuB;AAGhB,qBAAwB,IAAgB;AAC7C,QAAM,MAAM,yBAAqB;AACjC,MAAI,CAAC,IAAI,SAAS;AAChB,QAAI,UAAU,EAAE,GAAG,GAAG,EAAE;AAAA,EAC1B;AACA,SAAO,IAAI,QAAQ;AACrB;AANgB;",
+  "sourcesContent": ["import { useMemo, useRef } from 'react'\n\ntype ResultBox<T> = { v: T }\n\nexport function useConstant<T>(fn: () => T): T {\n  // RSC compat\n  if (typeof document === 'undefined') {\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    return useMemo(() => fn(), [])\n  }\n\n  const ref = useRef<ResultBox<T>>()\n\n  if (!ref.current) {\n    ref.current = { v: fn() }\n  }\n\n  return ref.current.v\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAIzB,SAAS,YAAe,IAAgB;AAE7C,MAAI,OAAO,aAAa,aAAa;AAEnC,eAAO,sBAAQ,MAAM,GAAG,GAAG,CAAC,CAAC;AAAA,EAC/B;AAEA,QAAM,UAAM,qBAAqB;AAEjC,MAAI,CAAC,IAAI,SAAS;AAChB,QAAI,UAAU,EAAE,GAAG,GAAG,EAAE;AAAA,EAC1B;AAEA,SAAO,IAAI,QAAQ;AACrB;",
   "names": []
 }

package/dist/cjs/hooks/useId.js

@@ -1,10 +1,8 @@
-var __create = Object.create;
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -17,41 +15,13 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useId_exports = {};
 __export(useId_exports, {
-  useId: () => useId
+  useId: () => import_react.useId
 });
 module.exports = __toCommonJS(useId_exports);
-var React = __toESM(require("react"));
-var import_platform = require("../constants/platform");
-let serverHandoffComplete = false;
-let id = 0;
-function genId() {
-  return ++id;
-}
-__name(genId, "genId");
-function useId(providedId) {
-  if (typeof React.useId === "function") {
-    let id3 = React.useId(providedId);
-    return providedId != null ? providedId : id3;
-  }
-  let initialId = providedId ?? (serverHandoffComplete ? genId() : null);
-  let [id2, setId] = React.useState(initialId);
-  (0, import_platform.useIsomorphicLayoutEffect)(() => {
-    if (id2 === null) {
-      setId(genId());
-    }
-  }, []);
-  React.useEffect(() => {
-    if (serverHandoffComplete === false) {
-      serverHandoffComplete = true;
-    }
-  }, []);
-  return providedId ?? id2 ?? void 0;
-}
-__name(useId, "useId");
+var import_react = require("react");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useId

package/dist/cjs/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": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDA,YAAuB;AAEvB,sBAA0C;AAE1C,IAAI,wBAAwB;AAC5B,IAAI,KAAK;AACT,iBAAiB;AACf,SAAO,EAAE;AACX;AAFS;AAyBT,eAAe,YAAiD;AAI9D,MAAI,OAAO,MAAM,UAAU,YAAY;AAErC,QAAI,MAAK,MAAM,MAAM,UAAU;AAC/B,WAAO,cAAc,OAAO,aAAa;AAAA,EAC3C;AAIA,MAAI,YAAY,cAAe,yBAAwB,MAAM,IAAI;AACjE,MAAI,CAAC,KAAI,SAAS,MAAM,SAAS,SAAS;AAE1C,iDAA0B,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,cAAc,OAAM;AAC7B;AApCS;",
+  "sourcesContent": ["export { useId } from 'react'\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;",
   "names": []
 }

package/dist/cjs/hooks/useIsMounted.js

@@ -1,8 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -21,11 +21,11 @@ __export(useIsMounted_exports, {
   useIsMounted: () => useIsMounted
 });
 module.exports = __toCommonJS(useIsMounted_exports);
-var import_core = require("@tamagui/core");
 var import_react = require("react");
+var import_platform = require("../constants/platform");
 function useIsMounted() {
   const isMounted = (0, import_react.useRef)(false);
-  (0, import_core.useIsomorphicLayoutEffect)(() => {
+  (0, import_platform.useIsomorphicLayoutEffect)(() => {
     isMounted.current = true;
     return () => {
       isMounted.current = false;
@@ -33,7 +33,6 @@ function useIsMounted() {
   }, []);
   return isMounted;
 }
-__name(useIsMounted, "useIsMounted");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useIsMounted

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA0C;AAC1C,mBAAuB;AAEhB,wBAAwB;AAC7B,QAAM,YAAY,yBAAO,KAAK;AAE9B,6CAA0B,MAAM;AAC9B,cAAU,UAAU;AAEpB,WAAO,MAAM;AACX,gBAAU,UAAU;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;AAZgB;",
+  "sourcesContent": ["import { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuB;AAEvB,sBAA0C;AAEnC,SAAS,eAAe;AAC7B,QAAM,gBAAY,qBAAO,KAAK;AAE9B,iDAA0B,MAAM;AAC9B,cAAU,UAAU;AAEpB,WAAO,MAAM;AACX,gBAAU,UAAU;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/hooks/useIsSSR.js

@@ -0,0 +1,46 @@
+"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 useIsSSR_exports = {};
+__export(useIsSSR_exports, {
+  useIsSSR: () => useIsSSR
+});
+module.exports = __toCommonJS(useIsSSR_exports);
+var import_react = require("react");
+var import_platform = require("../constants/platform");
+var import_startTransition = require("../helpers/startTransition");
+const useIsSSR = (props) => {
+  const [val, setVal] = (0, import_react.useState)(true);
+  if (import_platform.isWeb && !import_platform.isServer) {
+    (0, import_platform.useIsomorphicLayoutEffect)(() => {
+      if (props == null ? void 0 : props.immediate) {
+        setVal(false);
+      } else {
+        (0, import_startTransition.startTransition)(() => {
+          setVal(false);
+        });
+      }
+    }, []);
+  }
+  return val;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useIsSSR
+});
+//# sourceMappingURL=useIsSSR.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useIsSSR.tsx"],
+  "sourcesContent": ["import { useState } from 'react'\n\nimport { isServer, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAEzB,sBAA2D;AAC3D,6BAAgC;AAIzB,MAAM,WAAW,CAAC,UAAoC;AAC3D,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,IAAI;AAEnC,MAAI,yBAAS,CAAC,0BAAU;AACtB,mDAA0B,MAAM;AAE9B,UAAI,+BAAO,WAAW;AACpB,eAAO,KAAK;AAAA,MACd,OAAO;AACL,oDAAgB,MAAM;AACpB,iBAAO,KAAK;AAAA,QACd,CAAC;AAAA,MACH;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/cjs/hooks/useIsTouchDevice.js

@@ -1,8 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -23,15 +23,17 @@ __export(useIsTouchDevice_exports, {
 module.exports = __toCommonJS(useIsTouchDevice_exports);
 var import_react = require("react");
 var import_platform = require("../constants/platform");
-const useIsTouchDevice = /* @__PURE__ */ __name(() => {
+const useIsTouchDevice = () => {
   const [touchOnly, setTouchOnly] = (0, import_react.useState)(false);
-  (0, import_platform.useIsomorphicLayoutEffect)(() => {
-    if (import_platform.isTouchDevice) {
-      setTouchOnly(true);
-    }
-  }, []);
+  if (import_platform.isWeb && !import_platform.isServer) {
+    (0, import_platform.useIsomorphicLayoutEffect)(() => {
+      if (import_platform.isTouchable) {
+        setTouchOnly(true);
+      }
+    }, []);
+  }
   return touchOnly;
-}, "useIsTouchDevice");
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useIsTouchDevice

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAEzB,sBAAyD;AAIlD,MAAM,mBAAmB,6BAAM;AACpC,QAAM,CAAC,WAAW,gBAAgB,2BAAS,KAAK;AAEhD,iDAA0B,MAAM;AAC9B,QAAI,+BAAe;AACjB,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT,GAVgC;",
+  "sourcesContent": ["import { useState } from 'react'\n\nimport { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAEzB,sBAAwE;AAIjE,MAAM,mBAAmB,MAAM;AACpC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,MAAI,yBAAS,CAAC,0BAAU;AAGtB,mDAA0B,MAAM;AAC9B,UAAI,6BAAa;AACf,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/hooks/useMedia.js

@@ -1,22 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -34,140 +20,190 @@ var useMedia_exports = {};
 __export(useMedia_exports, {
   addMediaQueryListener: () => addMediaQueryListener,
   configureMedia: () => configureMedia,
+  getInitialMediaState: () => getInitialMediaState,
   getMedia: () => getMedia,
   mediaObjectToString: () => mediaObjectToString,
   mediaQueryConfig: () => mediaQueryConfig,
   mediaState: () => mediaState,
   removeMediaQueryListener: () => removeMediaQueryListener,
-  useMedia: () => useMedia
+  useMedia: () => useMedia,
+  useMediaPropsActive: () => useMediaPropsActive,
+  useMediaQueryListeners: () => useMediaQueryListeners
 });
 module.exports = __toCommonJS(useMedia_exports);
-var import_use_force_update = require("@tamagui/use-force-update");
 var import_react = require("react");
 var import_platform = require("../constants/platform");
 var import_matchMedia = require("../helpers/matchMedia");
-var import_useConstant = require("./useConstant");
-const mediaState = {};
+var import_useSafeRef = require("./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"]
-} = {}) => {
-  if (hasConfigured) {
-    console.warn(`Already configured mediaQueries once (you may have called getMedia() before configureMedia())`);
+};
+const dispose = /* @__PURE__ */ new Set();
+let initialMediaState;
+const configureMedia = (config) => {
+  const { media, mediaQueryDefaultActive } = config;
+  if (!media)
+    return;
+  for (const key in media) {
+    mediaState[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false;
   }
-  if (queries) {
-    Object.assign(mediaQueryConfig, queries);
-    hasConfigured = true;
+  Object.assign(mediaQueryConfig, media);
+  initialMediaState = { ...mediaState };
+  if (config.disableSSR) {
+    setupMediaListeners();
   }
-  for (const key in queries) {
-    const str = mediaObjectToString(queries[key]);
-    const propKey = `$${key}`;
-    try {
-      let update = function() {
-        const next = !!getMatch().matches;
-        if (next === mediaState[propKey])
-          return;
-        mediaState[propKey] = next;
-        const listeners = mediaQueryListeners[propKey];
-        if (listeners == null ? void 0 : listeners.size) {
-          for (const cb of [...listeners]) {
-            cb();
-          }
-        }
-      };
-      __name(update, "update");
-      const getMatch = /* @__PURE__ */ __name(() => (0, import_matchMedia.matchMedia)(str), "getMatch");
-      const match = getMatch();
-      if (!match || typeof match.addListener !== "function") {
-        throw new Error("\u26A0\uFE0F No match (seeing this in RN sometimes)");
+};
+const getInitialMediaState = () => initialMediaState;
+function unlisten() {
+  dispose.forEach((cb) => cb());
+  dispose.clear();
+}
+let configuredKey = "";
+function setupMediaListeners() {
+  const nextKey = JSON.stringify(mediaQueryConfig);
+  if (nextKey === configuredKey) {
+    return;
+  }
+  configuredKey = nextKey;
+  unlisten();
+  for (const key in mediaQueryConfig) {
+    let update2 = function() {
+      const next = !!getMatch().matches;
+      if (next === mediaState[key])
+        return;
+      mediaState[key] = next;
+      const listeners = mediaQueryListeners[key];
+      if (listeners == null ? void 0 : listeners.size) {
+        listeners.forEach((cb) => cb(next));
       }
-      mediaState[propKey] = !!match.matches;
-      match.addListener(update);
-      update();
-    } catch (err) {
-      console.error("Error running media query", str, err.message, err.stack);
-      const isDefaultActive = (defaultActive == null ? void 0 : defaultActive.includes(key)) ?? true;
-      mediaState[propKey] = isDefaultActive;
+    };
+    var update = update2;
+    const str = mediaObjectToString(mediaQueryConfig[key]);
+    const getMatch = () => (0, import_matchMedia.matchMedia)(str);
+    const match = getMatch();
+    if (!match) {
+      throw new Error("\u26A0\uFE0F No match");
     }
+    match.addListener(update2);
+    dispose.add(() => match.removeListener(update2));
+    update2();
   }
-}, "configureMedia");
-const useMedia = /* @__PURE__ */ __name(() => {
-  const forceUpdate = (0, import_use_force_update.useForceUpdate)();
-  const state = (0, import_react.useRef)();
-  if (!state.current) {
-    state.current = {
-      selections: {},
-      nextSelections: {},
-      isUnmounted: false,
-      isRendering: true
-    };
+}
+function useMediaQueryListeners(config) {
+  if (config.disableSSR) {
+    return;
   }
-  state.current.isRendering = true;
-  (0, import_platform.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);
+  (0, import_react.useEffect)(() => {
+    setupMediaListeners();
+    return unlisten;
+  }, []);
+}
+function useMedia() {
+  const [state, setState] = (0, import_react.useState)(initialMediaState || {});
+  const keys = (0, import_useSafeRef.useSafeRef)({});
+  function updateState() {
+    setState((prev) => {
+      for (const key in keys.current) {
+        if (prev[key] !== mediaState[key]) {
+          return { ...mediaState };
+        }
       }
-    }
-  });
+      return prev;
+    });
+  }
   (0, import_platform.useIsomorphicLayoutEffect)(() => {
+    const disposes = Object.keys(keys.current).map(
+      (key) => addMediaQueryListener(key, updateState)
+    );
+    updateState();
     return () => {
-      const st = state.current;
-      st.isUnmounted = true;
-      const allKeys = __spreadValues(__spreadValues({}, st.selections), st.nextSelections);
-      for (const key in allKeys) {
-        removeMediaQueryListener(key, forceUpdate);
-      }
+      disposes.forEach((cb) => cb());
     };
-  }, []);
-  return (0, import_useConstant.useConstant)(() => {
-    const st = state.current;
-    return new Proxy(mediaState, {
-      get(target, key) {
-        if (key[0] !== "$") {
-          key = `$${key}`;
+  });
+  return (0, import_react.useMemo)(
+    () => new Proxy(state, {
+      get(_, key) {
+        if (process.env.NODE_ENV === "development") {
+          if (!initialMediaState) {
+            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 (0, import_react.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;
@@ -183,16 +219,18 @@ function mediaObjectToString(query) {
     return `(${feature}: ${value})`;
   }).join(" and ");
 }
-__name(mediaObjectToString, "mediaObjectToString");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   addMediaQueryListener,
   configureMedia,
+  getInitialMediaState,
   getMedia,
   mediaObjectToString,
   mediaQueryConfig,
   mediaState,
   removeMediaQueryListener,
-  useMedia
+  useMedia,
+  useMediaPropsActive,
+  useMediaQueryListeners
 });
 //# sourceMappingURL=useMedia.js.map