@tamagui/core 1.0.1-beta.138 → 1.0.1-beta.141

package/dist/esm/hooks/useMedia.js

@@ -1,13 +1,13 @@
-import { useForceUpdate } from "@tamagui/use-force-update";
-import { useEffect, useRef } from "react";
+import { useMemo, useState } from "react";
 import { useIsomorphicLayoutEffect } from "../constants/platform";
 import { matchMedia } from "../helpers/matchMedia";
-import { useConstant } from "./useConstant";
+import { useSafeRef } from "./useSafeRef";
 const mediaState = {};
 const mediaQueryListeners = {};
 function addMediaQueryListener(key, cb) {
   mediaQueryListeners[key] = mediaQueryListeners[key] || /* @__PURE__ */ new Set();
   mediaQueryListeners[key].add(cb);
+  return () => removeMediaQueryListener(key, cb);
 }
 function removeMediaQueryListener(key, cb) {
   var _a;
@@ -18,114 +18,95 @@ const getMedia = () => {
   return mediaState;
 };
 const dispose = /* @__PURE__ */ new Set();
+let initialMediaState;
 const configureMedia = ({
   queries,
-  defaultActive = ["sm", "xs"]
+  defaultActive = {}
 } = {}) => {
   if (!queries)
     return;
-  if (mediaQueryConfig) {
-    if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {
-      return;
+  if (initialMediaState) {
+    if (process.env.NODE_ENV === "development") {
+      if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {
+        return;
+      }
     }
-    dispose.forEach((cb) => cb());
-    dispose.clear();
+    setupMediaListeners();
   }
   Object.assign(mediaQueryConfig, queries);
   for (const key in queries) {
-    const str = mediaObjectToString(queries[key]);
-    const propKey = `$${key}`;
-    try {
-      let update2 = 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();
-          }
+    mediaState[key] = defaultActive[key] || false;
+  }
+  initialMediaState = { ...mediaState };
+};
+function unlisten() {
+  dispose.forEach((cb) => cb());
+  dispose.clear();
+}
+function setupMediaListeners() {
+  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) {
+        for (const cb of [...listeners]) {
+          cb();
         }
-      };
-      var update = update2;
-      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)");
       }
-      mediaState[propKey] = !!match.matches;
-      match.addListener(update2);
-      dispose.add(() => match.removeListener(update2));
-      update2();
-    } 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 = () => matchMedia(str);
+    const match = getMatch();
+    if (!match) {
+      throw new Error("\u26A0\uFE0F No match");
     }
+    match.addListener(update2);
+    dispose.add(() => match.removeListener(update2));
+    update2();
   }
-};
+}
+function useMediaQueryListeners() {
+  useIsomorphicLayoutEffect(() => {
+    setupMediaListeners();
+    return unlisten;
+  }, []);
+}
 function useMedia() {
-  const forceUpdate = useForceUpdate();
-  const state = useRef();
-  if (!state.current) {
-    state.current = {
-      selections: {},
-      nextSelections: {},
-      isUnmounted: false,
-      isRendering: true
-    };
+  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;
+    });
   }
-  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);
-      }
+    const listeners = [];
+    for (const key in keys.current) {
+      listeners.push(addMediaQueryListener(key, updateState));
     }
-  });
-  useEffect(() => {
+    updateState();
     return () => {
-      const st = state.current;
-      st.isUnmounted = true;
-      const allKeys = {
-        ...st.selections,
-        ...st.nextSelections
-      };
-      for (const key in allKeys) {
-        removeMediaQueryListener(key, forceUpdate);
-      }
+      listeners.forEach((cb) => cb());
     };
-  }, []);
-  return useConstant(() => {
-    const st = state.current;
-    return new Proxy(mediaState, {
-      get(target, key) {
-        if (key[0] !== "$") {
-          key = `$${key}`;
-        }
-        if (!(key in mediaState)) {
-          return Reflect.get(target, key);
-        }
-        if (!st.isUnmounted) {
-          if (st.isRendering) {
-            st.nextSelections[key] = true;
-          }
-        }
-        if (key in mediaState) {
-          return mediaState[key];
-        }
-        return Reflect.get(mediaState, key);
-      }
-    });
   });
+  return useMemo(() => new Proxy(state, {
+    get(_, key) {
+      if (!keys.current[key]) {
+        keys.current = { ...keys.current, [key]: true };
+      }
+      return Reflect.get(state, key);
+    }
+  }), [state, keys]);
 }
 function camelToHyphen(str) {
   return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();
@@ -153,6 +134,7 @@ export {
   mediaQueryConfig,
   mediaState,
   removeMediaQueryListener,
-  useMedia
+  useMedia,
+  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 { useEffect, 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 function addMediaQueryListener(key: MediaQueryKey, cb: any) {\n  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n  mediaQueryListeners[key].add(cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: any) {\n  mediaQueryListeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n  return mediaState\n}\n\nconst dispose = new Set<Function>()\n\nexport const configureMedia = ({\n  queries,\n  defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n  if (!queries) return\n  // support hot reload\n  if (mediaQueryConfig) {\n    if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {\n      // hmr avoid update\n      return\n    }\n    dispose.forEach((cb) => cb())\n    dispose.clear()\n  }\n\n  Object.assign(mediaQueryConfig, queries)\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      // note this deprecated api works with polyfills we use now\n      match.addListener(update)\n      dispose.add(() => match.removeListener(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 function useMedia(): {\n  [key in MediaQueryKey]: boolean\n} {\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  useEffect(() => {\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(mediaState, {\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\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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",
+  "sourcesContent": ["import { useMemo, useState } 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 { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: any) {\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: any) {\n  mediaQueryListeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n  return mediaState\n}\n\nconst dispose = new Set<Function>()\n\n// for SSR capture it at time of startup\nlet initialMediaState: MediaQueryState | null\n\nexport const configureMedia = ({\n  queries,\n  defaultActive = {},\n}: ConfigureMediaQueryOptions = {}) => {\n  if (!queries) return\n\n  // support hot reload\n  if (initialMediaState) {\n    if (process.env.NODE_ENV === 'development') {\n      if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {\n        // hmr avoid update\n        return\n      }\n    }\n    setupMediaListeners()\n  }\n\n  Object.assign(mediaQueryConfig, queries)\n  // start in the initial state\n  for (const key in queries) {\n    mediaState[key] = defaultActive[key] || false\n  }\n  initialMediaState = { ...mediaState }\n}\n\nfunction unlisten() {\n  dispose.forEach((cb) => cb())\n  dispose.clear()\n}\n\nfunction setupMediaListeners() {\n  // hmr, undo existing before re-binding\n  unlisten()\n\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    update()\n\n    function update() {\n      const next = !!getMatch().matches\n      if (next === mediaState[key]) return\n      mediaState[key] = next\n      const listeners = mediaQueryListeners[key]\n      if (listeners?.size) {\n        for (const cb of [...listeners]) {\n          cb()\n        }\n      }\n    }\n  }\n}\n\nexport function useMediaQueryListeners() {\n  useIsomorphicLayoutEffect(() => {\n    setupMediaListeners()\n    return unlisten\n  }, [])\n}\n\nexport function useMedia(): {\n  [key in MediaQueryKey]: boolean\n} {\n  const [state, setState] = useState(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 listeners: Function[] = []\n    for (const key in keys.current) {\n      listeners.push(addMediaQueryListener(key, updateState))\n    }\n    updateState()\n    return () => {\n      listeners.forEach((cb) => cb())\n    }\n  })\n\n  return useMemo(\n    () =>\n      new Proxy(state, {\n        get(_, key: string) {\n          if (!keys.current[key]) {\n            keys.current = { ...keys.current, [key]: true }\n          }\n          return Reflect.get(state, key)\n        },\n      }),\n    [state, keys]\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": []
 }

package/dist/esm/hooks/useSafeRef.js

@@ -0,0 +1,36 @@
+import { useRef } from "react";
+import { useIsomorphicLayoutEffect } from "../constants/platform";
+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 { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\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;AAEA;AAYO,MAAM,aAAa,CAAI,iBAAoB;AAChD,QAAM,SAAS,OAAe;AAE9B,QAAM,MACJ,OAAO,WACN,QAAO,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/useTheme.js

@@ -1,7 +1,7 @@
 import { useForceUpdate } from "@tamagui/use-force-update";
 import { useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { getConfig } from "../conf";
-import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
+import { isSSR, useIsomorphicLayoutEffect } from "../constants/platform";
 import { ThemeContext } from "../contexts/ThemeContext";
 import { areEqualSets } from "../helpers/areEqualSets";
 import {
@@ -38,9 +38,9 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
   const debugProp = props && props["debug"];
   if (!theme) {
     if (process.env.NODE_ENV === "development") {
-      console.warn("No theme", { themeName, theme, componentName, className });
+      console.warn("No theme with name", themeName);
     }
-    return themes[getConfig().defaultTheme || Object.keys(themes)[0]];
+    return themes[getConfig().defaultTheme || "light"];
   }
   return useMemo(() => {
     return new Proxy(theme, {
@@ -121,11 +121,9 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
   const next = parentManager.getNextTheme(getThemeProps, debug);
   const forceUpdate = forceUpdateProp || useForceUpdate();
   const themeManager = useConstant(() => {
-    if (!next)
-      return null;
     return new ThemeManager(next.name, next.theme, parentManager, reset);
   });
-  if (!isWeb || typeof document !== "undefined") {
+  if (!isSSR) {
     useLayoutEffect(() => {
       if (!themeManager)
         return;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport {\n  GetNextThemeProps,\n  ThemeManager,\n  ThemeManagerContext,\n  emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      console.log('  \uD83D\uDD39 useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\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    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  const debugProp = props && props['debug']\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn('No theme', { themeName, theme, componentName, className })\n    }\n    return themes[getConfig().defaultTheme || Object.keys(themes)[0]]\n  }\n\n  return useMemo(() => {\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (key === GetThemeUnwrapped) {\n          return theme\n        }\n        if (key === GetThemeManager) {\n          return themeManager\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        // auto convert variables to plain\n        if (key[0] === '$') {\n          key = key.slice(1)\n        }\n        if (state.current.isRendering && !state.current.keys.has(key)) {\n          state.current.keys.add(key)\n          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n            console.log('  \uD83D\uDD38 tracking theme', key)\n          }\n        }\n        return themeManager.getValue(key)\n      },\n    })\n  }, [name, theme, componentName, className, debugProp])\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) return null\n    return new ThemeManager(next.name, next.theme, parentManager, reset)\n  })\n\n  // if not SSR\n  if (!isWeb || typeof document !== 'undefined') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useLayoutEffect(() => {\n      if (!themeManager) return\n\n      activeThemeManagers.add(themeManager)\n\n      if (next?.name) {\n        themeManager.update(next)\n      }\n\n      const disposeParentOnChange = parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        disposeParentOnChange()\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    themes,\n    themeManager,\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { isSSR, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport {\n  GetNextThemeProps,\n  ThemeManager,\n  ThemeManagerContext,\n  emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      // eslint-disable-next-line no-console\n      console.log('  \uD83D\uDD39 useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\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    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  const debugProp = props && props['debug']\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      // eslint-disable-next-line no-console\n      console.warn('No theme with name', themeName)\n    }\n    return themes[getConfig().defaultTheme || 'light']\n  }\n\n  return useMemo(() => {\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (key === GetThemeUnwrapped) {\n          return theme\n        }\n        if (key === GetThemeManager) {\n          return themeManager\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        // auto convert variables to plain\n        if (key[0] === '$') {\n          key = key.slice(1)\n        }\n        if (state.current.isRendering && !state.current.keys.has(key)) {\n          state.current.keys.add(key)\n          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n            console.log('  \uD83D\uDD38 tracking theme', key)\n          }\n        }\n        return themeManager.getValue(key)\n      },\n    })\n  }, [name, theme, componentName, className, debugProp])\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    // if (!next) return null\n    // RSC test\n    // if (typeof document === 'undefined') return null\n    return new ThemeManager(next.name, next.theme, parentManager, reset)\n  })\n\n  // if not SSR\n  if (!isSSR) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useLayoutEffect(() => {\n      if (!themeManager) return\n\n      activeThemeManagers.add(themeManager)\n\n      if (next?.name) {\n        themeManager.update(next)\n      }\n\n      const disposeParentOnChange = parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        disposeParentOnChange()\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    themes,\n    themeManager,\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/index.js

@@ -40,11 +40,21 @@ export * from "./hooks/useConstant";
 export * from "./hooks/useId";
 export * from "./hooks/useIsMounted";
 export * from "./hooks/useIsTouchDevice";
-export * from "./hooks/useMedia";
+import {
+  configureMedia,
+  getMedia,
+  mediaState,
+  useMedia,
+  mediaObjectToString,
+  addMediaQueryListener,
+  removeMediaQueryListener,
+  mediaQueryConfig
+} from "./hooks/useMedia";
 export * from "./hooks/usePressable";
 export * from "./hooks/useTheme";
 export * from "./hooks/useIsSSR";
 export * from "./hooks/useUnmountEffect";
+export * from "./hooks/useSafeRef";
 export * from "./views/Slot";
 export * from "./views/Stack";
 export * from "./views/Text";
@@ -54,17 +64,26 @@ export * from "./views/ThemeInverse";
 export * from "./views/ThemeProvider";
 export * from "./views/ThemeReset";
 export * from "./views/FontLanguage";
+export * from "./views/TamaguiProvider";
 export * from "@tamagui/use-force-update";
 export * from "@tamagui/use-event";
 export * from "@tamagui/helpers";
 export {
   TextAncestorContext,
   TextAncestorProvider,
+  addMediaQueryListener,
+  configureMedia,
   createDOMProps,
   getConfig,
   getHasConfigured,
+  getMedia,
   getThemes,
   getTokens,
-  onConfiguredOnce
+  mediaObjectToString,
+  mediaQueryConfig,
+  mediaState,
+  onConfiguredOnce,
+  removeMediaQueryListener,
+  useMedia
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './addTheme'\nexport * from './updateTheme'\nexport * from './styled'\nexport * from './types'\n\n// for type portability\nexport type { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport { createDOMProps } from '@tamagui/rnw'\n\nexport * from './helpers/calc'\nexport * from './helpers/createShallowUpdate'\nexport * from './helpers/getStackSize'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/pseudoDescriptors'\nexport * from './helpers/mergeProps'\nexport * from './helpers/expandStyles'\nexport * from './helpers/getFont'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/startTransition'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport * from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useIsSSR'\nexport * from './hooks/useUnmountEffect'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport { TextAncestorProvider, TextAncestorContext } from './contexts/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\nexport * from './views/FontLanguage'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/use-event'\nexport * from '@tamagui/helpers'\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;",
+  "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'\n\n// for type portability\nexport type { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport { createDOMProps } from '@tamagui/rnw'\n\nexport * from './helpers/calc'\nexport * from './helpers/createShallowUpdate'\nexport * from './helpers/getStackSize'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/pseudoDescriptors'\nexport * from './helpers/mergeProps'\nexport * from './helpers/expandStyles'\nexport * from './helpers/getFont'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/startTransition'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport {\n  configureMedia,\n  getMedia,\n  mediaState,\n  useMedia,\n  mediaObjectToString,\n  addMediaQueryListener,\n  removeMediaQueryListener,\n  mediaQueryConfig,\n} from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useIsSSR'\nexport * from './hooks/useUnmountEffect'\nexport * from './hooks/useSafeRef'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport { TextAncestorProvider, TextAncestorContext } from './contexts/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\nexport * from './views/FontLanguage'\nexport * from './views/TamaguiProvider'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/use-event'\nexport * from '@tamagui/helpers'\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;",
   "names": []
 }

package/dist/esm/insertFont.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/insertFont.ts"],
-  "sourcesContent": ["import { setConfigFont } from './conf'\nimport { createFont } from './createFont'\nimport { Variable } from './createVariable'\nimport { DeepVariableObject, createVariables } from './createVariables'\nimport { registerCSSVariable, variableToCSS } from './helpers/registerCSSVariable'\nimport { GenericFont } from './types'\n\n/**\n * Runtime dynamic insert font\n */\nexport function insertFont<A extends GenericFont>(name: string, fontIn: A): DeepVariableObject<A> {\n  const font = createFont(fontIn)\n  const tokened = createVariables(font, name) as GenericFont\n  const parsed = parseFont(tokened) as DeepVariableObject<A>\n  if (process.env.TAMAGUI_TARGET === 'web' && typeof document !== 'undefined') {\n    const fontVars = registerFontVariables(parsed)\n    const style = document.createElement('style')\n    style.innerText = `:root .font_${name} {${fontVars.join(';')}}`\n    style.setAttribute('data-tamagui-font', name)\n    document.head.appendChild(style)\n  }\n  setConfigFont(name, tokened, parsed)\n  return parsed\n}\n\nexport function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A> {\n  const parsed: any = {}\n  for (const attrKey in definition) {\n    const attr = definition[attrKey]\n    if (attrKey === 'family') {\n      parsed[attrKey] = attr\n      continue\n    }\n    parsed[attrKey] = {}\n    for (const key in attr) {\n      let val = attr[key] as any as Variable\n      // is a theme reference\n      if (val.val?.[0] === '$') {\n        val = val.val\n      }\n      parsed[attrKey][`$${key}`] = val\n    }\n  }\n  return parsed\n}\n\nexport function registerFontVariables(parsedFont: any) {\n  const response: string[] = []\n\n  for (const fkey in parsedFont) {\n    if (fkey === 'family') {\n      const val = parsedFont[fkey] as Variable\n      registerCSSVariable(val)\n      response.push(variableToCSS(val))\n    } else {\n      for (const fskey in parsedFont[fkey]) {\n        const fval = parsedFont[fkey][fskey]\n        if (typeof fval === 'string') {\n          // no need to add its a theme reference like \"$borderColor\"\n        } else {\n          const val = parsedFont[fkey][fskey] as Variable\n          registerCSSVariable(val)\n          response.push(variableToCSS(val))\n        }\n      }\n    }\n  }\n  return response\n}\n"],
+  "sourcesContent": ["import { setConfigFont } from './conf'\nimport { createFont } from './createFont'\nimport { Variable } from './createVariable'\nimport { DeepVariableObject, createVariables } from './createVariables'\nimport { registerCSSVariable, variableToCSS } from './helpers/registerCSSVariable'\nimport { GenericFont } from './types'\n\n/**\n * Runtime dynamic insert font\n */\nexport function insertFont<A extends GenericFont>(name: string, fontIn: A): DeepVariableObject<A> {\n  const font = createFont(fontIn)\n  const tokened = createVariables(font, name) as GenericFont\n  const parsed = parseFont(tokened) as DeepVariableObject<A>\n  if (process.env.TAMAGUI_TARGET === 'web' && typeof document !== 'undefined') {\n    const fontVars = registerFontVariables(parsed)\n    const style = document.createElement('style')\n    style.innerText = `:root .font_${name} {${fontVars.join(';')}}`\n    style.setAttribute('data-tamagui-font', name)\n    document.head.appendChild(style)\n  }\n  setConfigFont(name, tokened, parsed)\n  return parsed\n}\n\nexport function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A> {\n  const parsed: any = {}\n  for (const attrKey in definition) {\n    const attr = definition[attrKey]\n    if (attrKey === 'family') {\n      parsed[attrKey] = attr\n      continue\n    }\n    parsed[attrKey] = {}\n    for (const key in attr) {\n      let val = attr[key] as any\n      // is a theme reference\n      if (val.val?.[0] === '$') {\n        val = val.val\n      }\n      parsed[attrKey][`$${key}`] = val\n    }\n  }\n  return parsed\n}\n\nexport function registerFontVariables(parsedFont: any) {\n  const response: string[] = []\n\n  for (const fkey in parsedFont) {\n    if (fkey === 'family') {\n      const val = parsedFont[fkey] as Variable\n      registerCSSVariable(val)\n      response.push(variableToCSS(val))\n    } else {\n      for (const fskey in parsedFont[fkey]) {\n        const fval = parsedFont[fkey][fskey]\n        if (typeof fval === 'string') {\n          // no need to add its a theme reference like \"$borderColor\"\n        } else {\n          const val = parsedFont[fkey][fskey] as Variable\n          registerCSSVariable(val)\n          response.push(variableToCSS(val))\n        }\n      }\n    }\n  }\n  return response\n}\n"],
   "mappings": "AAAA;AACA;AAEA;AACA;AAMO,oBAA2C,MAAc,QAAkC;AAChG,QAAM,OAAO,WAAW,MAAM;AAC9B,QAAM,UAAU,gBAAgB,MAAM,IAAI;AAC1C,QAAM,SAAS,UAAU,OAAO;AAChC,MAAI,QAAQ,IAAI,mBAAmB,SAAS,OAAO,aAAa,aAAa;AAC3E,UAAM,WAAW,sBAAsB,MAAM;AAC7C,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,YAAY,eAAe,SAAS,SAAS,KAAK,GAAG;AAC3D,UAAM,aAAa,qBAAqB,IAAI;AAC5C,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC;AACA,gBAAc,MAAM,SAAS,MAAM;AACnC,SAAO;AACT;AAEO,mBAA0C,YAAsC;AAzBvF;AA0BE,QAAM,SAAc,CAAC;AACrB,aAAW,WAAW,YAAY;AAChC,UAAM,OAAO,WAAW;AACxB,QAAI,YAAY,UAAU;AACxB,aAAO,WAAW;AAClB;AAAA,IACF;AACA,WAAO,WAAW,CAAC;AACnB,eAAW,OAAO,MAAM;AACtB,UAAI,MAAM,KAAK;AAEf,UAAI,WAAI,QAAJ,mBAAU,QAAO,KAAK;AACxB,cAAM,IAAI;AAAA,MACZ;AACA,aAAO,SAAS,IAAI,SAAS;AAAA,IAC/B;AAAA,EACF;AACA,SAAO;AACT;AAEO,+BAA+B,YAAiB;AACrD,QAAM,WAAqB,CAAC;AAE5B,aAAW,QAAQ,YAAY;AAC7B,QAAI,SAAS,UAAU;AACrB,YAAM,MAAM,WAAW;AACvB,0BAAoB,GAAG;AACvB,eAAS,KAAK,cAAc,GAAG,CAAC;AAAA,IAClC,OAAO;AACL,iBAAW,SAAS,WAAW,OAAO;AACpC,cAAM,OAAO,WAAW,MAAM;AAC9B,YAAI,OAAO,SAAS,UAAU;AAAA,QAE9B,OAAO;AACL,gBAAM,MAAM,WAAW,MAAM;AAC7B,8BAAoB,GAAG;AACvB,mBAAS,KAAK,cAAc,GAAG,CAAC;AAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/views/Slot.js

@@ -31,7 +31,7 @@ const SlotClone = React.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
   if (React.isValidElement(children)) {
     const childProps = {
-      ...mergeProps(children, slotProps),
+      ...mergeSlotProps(children, slotProps),
       ref: composeRefs(forwardedRef, children.ref)
     };
     return React.cloneElement(children, childProps);
@@ -50,7 +50,7 @@ const pressMap = isWeb ? {
   onPressOut: "onMouseUp",
   onPressIn: "onMouseDown"
 } : {};
-function mergeProps(child, slotProps) {
+function mergeSlotProps(child, slotProps) {
   const childProps = child.props;
   const overrideProps = { ...childProps };
   const isHTMLChild = typeof child.type === "string";

package/dist/esm/views/Slot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Slot.tsx"],
-  "sourcesContent": ["// via radix\n\nimport { composeRefs } from '@tamagui/compose-refs'\nimport * as React from 'react'\n\nimport { isWeb } from '../constants/platform'\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\nexport type SlotProps = {\n  children?: React.ReactNode\n}\n\nexport const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n  const childrenArray = React.Children.toArray(children)\n  const slottable = childrenArray.find(isSlottable)\n\n  if (slottable) {\n    // the new element to render is the one passed as a child of `Slottable`\n    const newElement = slottable.props.children as React.ReactNode\n\n    const newChildren = childrenArray.map((child) => {\n      if (child === slottable) {\n        // because the new element will be the one rendered, we are only interested\n        // in grabbing its children (`newElement.props.children`)\n        if (React.Children.count(newElement) > 1) return React.Children.only(null)\n        return React.isValidElement(newElement)\n          ? (newElement.props.children as React.ReactNode)\n          : null\n      } else {\n        return child\n      }\n    })\n\n    return (\n      <SlotClone {...slotProps} ref={forwardedRef}>\n        {React.isValidElement(newElement)\n          ? React.cloneElement(newElement, undefined, newChildren)\n          : null}\n      </SlotClone>\n    )\n  }\n\n  return (\n    <SlotClone {...slotProps} ref={forwardedRef}>\n      {children}\n    </SlotClone>\n  )\n})\n\nSlot.displayName = 'Slot'\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n  children: React.ReactNode\n}\n\nconst SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n\n  if (React.isValidElement(children)) {\n    const childProps = {\n      ...mergeProps(children, slotProps),\n      ref: composeRefs(forwardedRef, (children as any).ref),\n    }\n    return React.cloneElement(children, childProps)\n  }\n\n  return React.Children.count(children) > 1 ? React.Children.only(null) : null\n})\n\nSlotClone.displayName = 'SlotClone'\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Slottable = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement {\n  return React.isValidElement(child) && child.type === Slottable\n}\n\nconst pressMap = isWeb\n  ? {\n      onPress: 'onClick',\n      onPressOut: 'onMouseUp',\n      onPressIn: 'onMouseDown',\n    }\n  : {}\n\nfunction mergeProps(child: any, slotProps: AnyProps) {\n  const childProps = child.props\n\n  // all child props should override\n  const overrideProps = { ...childProps }\n  const isHTMLChild = typeof child.type === 'string'\n\n  if (isHTMLChild) {\n    for (const key in pressMap) {\n      if (key in slotProps) {\n        slotProps[pressMap[key]] = slotProps[key]\n        delete slotProps[key]\n      }\n    }\n  }\n\n  for (let propName in childProps) {\n    const slotPropValue = slotProps[propName]\n    const childPropValue = childProps[propName]\n\n    if (isHTMLChild && pressMap[propName]) {\n      propName = pressMap[propName]\n      delete overrideProps[propName]\n    }\n\n    const isHandler = handleRegex.test(propName)\n    // if it's a handler, modify the override by composing the base handler\n    if (isHandler) {\n      overrideProps[propName] = mergeEvent(childPropValue, slotPropValue)\n    }\n    // if it's `style`, we merge them\n    else if (propName === 'style') {\n      overrideProps[propName] = { ...slotPropValue, ...childPropValue }\n    } else if (propName === 'className') {\n      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ')\n    }\n  }\n\n  return { ...slotProps, ...overrideProps }\n}\n\nconst handleRegex = /^on[A-Z]/\n\nexport function mergeEvent(a?: Function, b?: Function) {\n  return (...args: unknown[]) => {\n    a?.(...args)\n    b?.(...args)\n  }\n}\n"],
-  "mappings": "AAEA;AACA;AAEA;AAUO,MAAM,OAAO,MAAM,WAAmC,CAAC,OAAO,iBAAiB;AACpF,QAAM,EAAE,aAAa,cAAc;AACnC,QAAM,gBAAgB,MAAM,SAAS,QAAQ,QAAQ;AACrD,QAAM,YAAY,cAAc,KAAK,WAAW;AAEhD,MAAI,WAAW;AAEb,UAAM,aAAa,UAAU,MAAM;AAEnC,UAAM,cAAc,cAAc,IAAI,CAAC,UAAU;AAC/C,UAAI,UAAU,WAAW;AAGvB,YAAI,MAAM,SAAS,MAAM,UAAU,IAAI;AAAG,iBAAO,MAAM,SAAS,KAAK,IAAI;AACzE,eAAO,MAAM,eAAe,UAAU,IACjC,WAAW,MAAM,WAClB;AAAA,MACN,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAED,WACE,oCAAC;AAAA,MAAW,GAAG;AAAA,MAAW,KAAK;AAAA,OAC5B,MAAM,eAAe,UAAU,IAC5B,MAAM,aAAa,YAAY,QAAW,WAAW,IACrD,IACN;AAAA,EAEJ;AAEA,SACE,oCAAC;AAAA,IAAW,GAAG;AAAA,IAAW,KAAK;AAAA,KAC5B,QACH;AAEJ,CAAC;AAED,KAAK,cAAc;AAUnB,MAAM,YAAY,MAAM,WAAgC,CAAC,OAAO,iBAAiB;AAC/E,QAAM,EAAE,aAAa,cAAc;AAEnC,MAAI,MAAM,eAAe,QAAQ,GAAG;AAClC,UAAM,aAAa;AAAA,MACjB,GAAG,WAAW,UAAU,SAAS;AAAA,MACjC,KAAK,YAAY,cAAe,SAAiB,GAAG;AAAA,IACtD;AACA,WAAO,MAAM,aAAa,UAAU,UAAU;AAAA,EAChD;AAEA,SAAO,MAAM,SAAS,MAAM,QAAQ,IAAI,IAAI,MAAM,SAAS,KAAK,IAAI,IAAI;AAC1E,CAAC;AAED,UAAU,cAAc;AAMjB,MAAM,YAAY,CAAC,EAAE,eAA8C;AACxE,SAAO,0DAAG,QAAS;AACrB;AAMA,qBAAqB,OAAqD;AACxE,SAAO,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS;AACvD;AAEA,MAAM,WAAW,QACb;AAAA,EACE,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,WAAW;AACb,IACA,CAAC;AAEL,oBAAoB,OAAY,WAAqB;AACnD,QAAM,aAAa,MAAM;AAGzB,QAAM,gBAAgB,EAAE,GAAG,WAAW;AACtC,QAAM,cAAc,OAAO,MAAM,SAAS;AAE1C,MAAI,aAAa;AACf,eAAW,OAAO,UAAU;AAC1B,UAAI,OAAO,WAAW;AACpB,kBAAU,SAAS,QAAQ,UAAU;AACrC,eAAO,UAAU;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAEA,WAAS,YAAY,YAAY;AAC/B,UAAM,gBAAgB,UAAU;AAChC,UAAM,iBAAiB,WAAW;AAElC,QAAI,eAAe,SAAS,WAAW;AACrC,iBAAW,SAAS;AACpB,aAAO,cAAc;AAAA,IACvB;AAEA,UAAM,YAAY,YAAY,KAAK,QAAQ;AAE3C,QAAI,WAAW;AACb,oBAAc,YAAY,WAAW,gBAAgB,aAAa;AAAA,IACpE,WAES,aAAa,SAAS;AAC7B,oBAAc,YAAY,EAAE,GAAG,eAAe,GAAG,eAAe;AAAA,IAClE,WAAW,aAAa,aAAa;AACnC,oBAAc,YAAY,CAAC,eAAe,cAAc,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IACpF;AAAA,EACF;AAEA,SAAO,EAAE,GAAG,WAAW,GAAG,cAAc;AAC1C;AAEA,MAAM,cAAc;AAEb,oBAAoB,GAAc,GAAc;AACrD,SAAO,IAAI,SAAoB;AAC7B,2BAAI,GAAG;AACP,2BAAI,GAAG;AAAA,EACT;AACF;",
+  "sourcesContent": ["// via radix\n\nimport { composeRefs } from '@tamagui/compose-refs'\nimport * as React from 'react'\n\nimport { isWeb } from '../constants/platform'\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\nexport type SlotProps = {\n  children?: React.ReactNode\n}\n\nexport const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n  const childrenArray = React.Children.toArray(children)\n  const slottable = childrenArray.find(isSlottable)\n\n  if (slottable) {\n    // the new element to render is the one passed as a child of `Slottable`\n    const newElement = slottable.props.children as React.ReactNode\n\n    const newChildren = childrenArray.map((child) => {\n      if (child === slottable) {\n        // because the new element will be the one rendered, we are only interested\n        // in grabbing its children (`newElement.props.children`)\n        if (React.Children.count(newElement) > 1) return React.Children.only(null)\n        return React.isValidElement(newElement)\n          ? (newElement.props.children as React.ReactNode)\n          : null\n      } else {\n        return child\n      }\n    })\n\n    return (\n      <SlotClone {...slotProps} ref={forwardedRef}>\n        {React.isValidElement(newElement)\n          ? React.cloneElement(newElement, undefined, newChildren)\n          : null}\n      </SlotClone>\n    )\n  }\n\n  return (\n    <SlotClone {...slotProps} ref={forwardedRef}>\n      {children}\n    </SlotClone>\n  )\n})\n\nSlot.displayName = 'Slot'\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n  children: React.ReactNode\n}\n\nconst SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n\n  if (React.isValidElement(children)) {\n    const childProps = {\n      ...mergeSlotProps(children, slotProps),\n      ref: composeRefs(forwardedRef, (children as any).ref),\n    }\n    return React.cloneElement(children, childProps)\n  }\n\n  return React.Children.count(children) > 1 ? React.Children.only(null) : null\n})\n\nSlotClone.displayName = 'SlotClone'\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Slottable = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement {\n  return React.isValidElement(child) && child.type === Slottable\n}\n\nconst pressMap = isWeb\n  ? {\n      onPress: 'onClick',\n      onPressOut: 'onMouseUp',\n      onPressIn: 'onMouseDown',\n    }\n  : {}\n\nfunction mergeSlotProps(child: any, slotProps: AnyProps) {\n  const childProps = child.props\n\n  // all child props should override\n  const overrideProps = { ...childProps }\n  const isHTMLChild = typeof child.type === 'string'\n\n  if (isHTMLChild) {\n    for (const key in pressMap) {\n      if (key in slotProps) {\n        slotProps[pressMap[key]] = slotProps[key]\n        delete slotProps[key]\n      }\n    }\n  }\n\n  for (let propName in childProps) {\n    const slotPropValue = slotProps[propName]\n    const childPropValue = childProps[propName]\n\n    if (isHTMLChild && pressMap[propName]) {\n      propName = pressMap[propName]\n      delete overrideProps[propName]\n    }\n\n    const isHandler = handleRegex.test(propName)\n    // if it's a handler, modify the override by composing the base handler\n    if (isHandler) {\n      overrideProps[propName] = mergeEvent(childPropValue, slotPropValue)\n    }\n    // if it's `style`, we merge them\n    else if (propName === 'style') {\n      overrideProps[propName] = { ...slotPropValue, ...childPropValue }\n    } else if (propName === 'className') {\n      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ')\n    }\n  }\n\n  return { ...slotProps, ...overrideProps }\n}\n\nconst handleRegex = /^on[A-Z]/\n\nexport function mergeEvent(a?: Function, b?: Function) {\n  return (...args: unknown[]) => {\n    a?.(...args)\n    b?.(...args)\n  }\n}\n"],
+  "mappings": "AAEA;AACA;AAEA;AAUO,MAAM,OAAO,MAAM,WAAmC,CAAC,OAAO,iBAAiB;AACpF,QAAM,EAAE,aAAa,cAAc;AACnC,QAAM,gBAAgB,MAAM,SAAS,QAAQ,QAAQ;AACrD,QAAM,YAAY,cAAc,KAAK,WAAW;AAEhD,MAAI,WAAW;AAEb,UAAM,aAAa,UAAU,MAAM;AAEnC,UAAM,cAAc,cAAc,IAAI,CAAC,UAAU;AAC/C,UAAI,UAAU,WAAW;AAGvB,YAAI,MAAM,SAAS,MAAM,UAAU,IAAI;AAAG,iBAAO,MAAM,SAAS,KAAK,IAAI;AACzE,eAAO,MAAM,eAAe,UAAU,IACjC,WAAW,MAAM,WAClB;AAAA,MACN,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAED,WACE,oCAAC;AAAA,MAAW,GAAG;AAAA,MAAW,KAAK;AAAA,OAC5B,MAAM,eAAe,UAAU,IAC5B,MAAM,aAAa,YAAY,QAAW,WAAW,IACrD,IACN;AAAA,EAEJ;AAEA,SACE,oCAAC;AAAA,IAAW,GAAG;AAAA,IAAW,KAAK;AAAA,KAC5B,QACH;AAEJ,CAAC;AAED,KAAK,cAAc;AAUnB,MAAM,YAAY,MAAM,WAAgC,CAAC,OAAO,iBAAiB;AAC/E,QAAM,EAAE,aAAa,cAAc;AAEnC,MAAI,MAAM,eAAe,QAAQ,GAAG;AAClC,UAAM,aAAa;AAAA,MACjB,GAAG,eAAe,UAAU,SAAS;AAAA,MACrC,KAAK,YAAY,cAAe,SAAiB,GAAG;AAAA,IACtD;AACA,WAAO,MAAM,aAAa,UAAU,UAAU;AAAA,EAChD;AAEA,SAAO,MAAM,SAAS,MAAM,QAAQ,IAAI,IAAI,MAAM,SAAS,KAAK,IAAI,IAAI;AAC1E,CAAC;AAED,UAAU,cAAc;AAMjB,MAAM,YAAY,CAAC,EAAE,eAA8C;AACxE,SAAO,0DAAG,QAAS;AACrB;AAMA,qBAAqB,OAAqD;AACxE,SAAO,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS;AACvD;AAEA,MAAM,WAAW,QACb;AAAA,EACE,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,WAAW;AACb,IACA,CAAC;AAEL,wBAAwB,OAAY,WAAqB;AACvD,QAAM,aAAa,MAAM;AAGzB,QAAM,gBAAgB,EAAE,GAAG,WAAW;AACtC,QAAM,cAAc,OAAO,MAAM,SAAS;AAE1C,MAAI,aAAa;AACf,eAAW,OAAO,UAAU;AAC1B,UAAI,OAAO,WAAW;AACpB,kBAAU,SAAS,QAAQ,UAAU;AACrC,eAAO,UAAU;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAEA,WAAS,YAAY,YAAY;AAC/B,UAAM,gBAAgB,UAAU;AAChC,UAAM,iBAAiB,WAAW;AAElC,QAAI,eAAe,SAAS,WAAW;AACrC,iBAAW,SAAS;AACpB,aAAO,cAAc;AAAA,IACvB;AAEA,UAAM,YAAY,YAAY,KAAK,QAAQ;AAE3C,QAAI,WAAW;AACb,oBAAc,YAAY,WAAW,gBAAgB,aAAa;AAAA,IACpE,WAES,aAAa,SAAS;AAC7B,oBAAc,YAAY,EAAE,GAAG,eAAe,GAAG,eAAe;AAAA,IAClE,WAAW,aAAa,aAAa;AACnC,oBAAc,YAAY,CAAC,eAAe,cAAc,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IACpF;AAAA,EACF;AAEA,SAAO,EAAE,GAAG,WAAW,GAAG,cAAc;AAC1C;AAEA,MAAM,cAAc;AAEb,oBAAoB,GAAc,GAAc;AACrD,SAAO,IAAI,SAAoB;AAC7B,2BAAI,GAAG;AACP,2BAAI,GAAG;AAAA,EACT;AACF;",
   "names": []
 }