@tamagui/core 1.0.1-rc.8 → 1.0.1

package/dist/esm/helpers/themeable.js

@@ -3,7 +3,7 @@ import React, { forwardRef } from "react";
 import { Theme } from "../views/Theme";
 function themeable(component, opts) {
   const withThemeComponent = forwardRef(function WithTheme(props, ref) {
-    const { themeInverse, theme, componentName, reset, ...rest } = props;
+    const { themeInverse, theme, componentName, themeReset, ...rest } = props;
     const element = React.createElement(component, { ...rest, ref });
     return /* @__PURE__ */ jsx(Theme, {
       inverse: themeInverse,
@@ -11,7 +11,7 @@ function themeable(component, opts) {
       name: theme || null,
       "data-themeable": true,
       debug: props.debug,
-      reset: props.reset,
+      reset: props.themeReset,
       children: element
     });
   });

package/dist/esm/helpers/themeable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/themeable.tsx"],
-  "sourcesContent": ["import React, { forwardRef, useId } from 'react'\n\nimport { ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\n\nexport interface ThemeableProps {\n  theme?: ThemeName | null\n  themeInverse?: boolean\n  componentName?: string\n  debug?: boolean | 'verbose'\n  reset?: boolean\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {\n    const { themeInverse, theme, componentName, reset, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n\n    return (\n      <Theme\n        inverse={themeInverse}\n        componentName={componentName || opts?.componentName}\n        name={(theme as any) || null}\n        data-themeable\n        debug={props.debug}\n        reset={props.reset}\n      >\n        {element}\n      </Theme>\n    )\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R\n    : unknown\n}\n"],
-  "mappings": "AAsBM;AAtBN,OAAO,SAAS,kBAAyB;AAGzC,SAAS,aAAa;AAUf,SAAS,UACd,WACA,MACA;AACA,QAAM,qBAAqB,WAAW,SAAS,UAAU,OAAuB,KAAK;AACnF,UAAM,EAAE,cAAc,OAAO,eAAe,UAAU,KAAK,IAAI;AAC/D,UAAM,UAAU,MAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AAEtE,WACE,oBAAC;AAAA,MACC,SAAS;AAAA,MACT,eAAe,kBAAiB,6BAAM;AAAA,MACtC,MAAO,SAAiB;AAAA,MACxB,kBAAc;AAAA,MACd,OAAO,MAAM;AAAA,MACb,OAAO,MAAM;AAAA,MAEZ;AAAA,KACH;AAAA,EAEJ,CAAC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,WACrB,uCAAmB,iBAAgB,uCAAmB,SAAQ;AAGjE,SAAO;AAGT;",
+  "sourcesContent": ["import React, { forwardRef, useId } from 'react'\n\nimport { ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\n\nexport interface ThemeableProps {\n  theme?: ThemeName | null\n  themeInverse?: boolean\n  themeReset?: boolean\n  componentName?: string\n  debug?: boolean | 'verbose'\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {\n    const { themeInverse, theme, componentName, themeReset, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n\n    return (\n      <Theme\n        inverse={themeInverse}\n        componentName={componentName || opts?.componentName}\n        name={(theme as any) || null}\n        data-themeable\n        debug={props.debug}\n        reset={props.themeReset}\n      >\n        {element}\n      </Theme>\n    )\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R\n    : unknown\n}\n"],
+  "mappings": "AAsBM;AAtBN,OAAO,SAAS,kBAAyB;AAGzC,SAAS,aAAa;AAUf,SAAS,UACd,WACA,MACA;AACA,QAAM,qBAAqB,WAAW,SAAS,UAAU,OAAuB,KAAK;AACnF,UAAM,EAAE,cAAc,OAAO,eAAe,eAAe,KAAK,IAAI;AACpE,UAAM,UAAU,MAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AAEtE,WACE,oBAAC;AAAA,MACC,SAAS;AAAA,MACT,eAAe,kBAAiB,6BAAM;AAAA,MACtC,MAAO,SAAiB;AAAA,MACxB,kBAAc;AAAA,MACd,OAAO,MAAM;AAAA,MACb,OAAO,MAAM;AAAA,MAEZ;AAAA,KACH;AAAA,EAEJ,CAAC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,WACrB,uCAAmB,iBAAgB,uCAAmB,SAAQ;AAGjE,SAAO;AAGT;",
   "names": []
 }

package/dist/esm/helpers/wrapThemeManagerContext.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { ThemeManagerContext } from "../ThemeManager";
+function wrapThemeManagerContext(children, themeManager) {
+  return themeManager ? /* @__PURE__ */ React.createElement(ThemeManagerContext.Provider, {
+    value: themeManager
+  }, children) : children;
+}
+export {
+  wrapThemeManagerContext
+};
+//# sourceMappingURL=wrapThemeManagerContext.js.map

package/dist/esm/helpers/wrapThemeManagerContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/wrapThemeManagerContext.tsx"],
+  "sourcesContent": ["import React, { useEffect } from 'react'\n\nimport { ThemeManager, ThemeManagerContext } from '../ThemeManager'\n\nexport function wrapThemeManagerContext(children: any, themeManager?: ThemeManager | null) {\n  return themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>{children}</ThemeManagerContext.Provider>\n  ) : (\n    children\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AAEO,iCAAiC,UAAe,cAAoC;AACzF,SAAO,eACL,oCAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,KAAe,QAAS,IAE7D;AAEJ;",
+  "names": []
+}

package/dist/esm/hooks/useConstant.js

@@ -1,8 +1,5 @@
-import { useMemo, useRef } from "react";
+import { useRef } from "react";
 function useConstant(fn) {
-  if (typeof document === "undefined") {
-    return useMemo(() => fn(), []);
-  }
   const ref = useRef();
   if (!ref.current) {
     ref.current = { v: fn() };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useConstant.tsx"],
-  "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,SAAS,SAAS,cAAc;AAIzB,SAAS,YAAe,IAAgB;AAE7C,MAAI,OAAO,aAAa,aAAa;AAEnC,WAAO,QAAQ,MAAM,GAAG,GAAG,CAAC,CAAC;AAAA,EAC/B;AAEA,QAAM,MAAM,OAAqB;AAEjC,MAAI,CAAC,IAAI,SAAS;AAChB,QAAI,UAAU,EAAE,GAAG,GAAG,EAAE;AAAA,EAC1B;AAEA,SAAO,IAAI,QAAQ;AACrB;",
+  "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;AAGO,qBAAwB,IAAgB;AAC7C,QAAM,MAAM,OAAqB;AACjC,MAAI,CAAC,IAAI,SAAS;AAChB,QAAI,UAAU,EAAE,GAAG,GAAG,EAAE;AAAA,EAC1B;AACA,SAAO,IAAI,QAAQ;AACrB;",
   "names": []
 }

package/dist/esm/hooks/useElementLayout.js

@@ -40,7 +40,7 @@ function useElementLayout(ref, onLayout) {
   const hasLayoutEvent = !!onLayout;
   const onLayoutEvent = useEvent(onLayout || idFn);
   useIsomorphicLayoutEffect(() => {
-    if (!(resizeObserver && hasLayoutEvent))
+    if (!resizeObserver || !hasLayoutEvent)
       return;
     const node = ref.current;
     if (!node)

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useElementLayout.tsx"],
-  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useEvent } from '@tamagui/use-event'\nimport { RefObject } from 'react'\n\nimport { getBoundingClientRect } from '../helpers/getBoundingClientRect'\nimport { getRect } from '../helpers/getRect'\n\nconst LayoutHandlers = new WeakMap<Element, Function>()\n\nexport type LayoutValue = {\n  x: number\n  y: number\n  width: number\n  height: number\n  left: number\n  top: number\n}\n\nexport type LayoutEvent = {\n  nativeEvent: {\n    layout: LayoutValue\n    target: any\n  }\n  timeStamp: number\n}\n\nlet resizeObserver: ResizeObserver | null = null\n\nif (typeof window !== 'undefined' && 'ResizeObserver' in window) {\n  resizeObserver = new ResizeObserver((entries) => {\n    for (const { target } of entries) {\n      const onLayout = LayoutHandlers.get(target)\n      if (typeof onLayout !== 'function') return\n      measureLayout(target as HTMLElement, null, (x, y, width, height, left, top) => {\n        onLayout({\n          nativeEvent: {\n            layout: { x, y, width, height, left, top },\n            target,\n          },\n          timeStamp: Date.now(),\n        })\n      })\n    }\n  })\n}\n\nexport const measureLayout = (\n  node: HTMLElement,\n  relativeTo: HTMLElement | null,\n  callback: Function\n) => {\n  const relativeNode = relativeTo || node?.parentNode\n  if (relativeNode instanceof HTMLElement) {\n    setTimeout(() => {\n      const relativeRect = getBoundingClientRect(relativeNode)!\n      const { height, left, top, width } = getRect(node)!\n      const x = left - relativeRect.left\n      const y = top - relativeRect.top\n      callback(x, y, width, height, left, top)\n    }, 0)\n  }\n}\n\nconst idFn = () => {}\n\nexport function useElementLayout(\n  ref: RefObject<Element>,\n  onLayout?: ((e: LayoutEvent) => void) | null\n) {\n  const hasLayoutEvent = !!onLayout\n  const onLayoutEvent = useEvent(onLayout || idFn)\n\n  // Observing is done in a separate effect to avoid this effect running\n  // when 'onLayout' changes.\n  useIsomorphicLayoutEffect(() => {\n    if (!(resizeObserver && hasLayoutEvent)) return\n    const node = ref.current\n    if (!node) return\n    LayoutHandlers.set(node, onLayoutEvent)\n    resizeObserver.observe(node)\n    return () => {\n      resizeObserver?.unobserve(node)\n    }\n  }, [ref, hasLayoutEvent])\n}\n"],
-  "mappings": "AAAA,SAAS,iCAAiC;AAC1C,SAAS,gBAAgB;AAGzB,SAAS,6BAA6B;AACtC,SAAS,eAAe;AAExB,MAAM,iBAAiB,oBAAI,QAA2B;AAmBtD,IAAI,iBAAwC;AAE5C,IAAI,OAAO,WAAW,eAAe,oBAAoB,QAAQ;AAC/D,mBAAiB,IAAI,eAAe,CAAC,YAAY;AAC/C,eAAW,EAAE,OAAO,KAAK,SAAS;AAChC,YAAM,WAAW,eAAe,IAAI,MAAM;AAC1C,UAAI,OAAO,aAAa;AAAY;AACpC,oBAAc,QAAuB,MAAM,CAAC,GAAG,GAAG,OAAO,QAAQ,MAAM,QAAQ;AAC7E,iBAAS;AAAA,UACP,aAAa;AAAA,YACX,QAAQ,EAAE,GAAG,GAAG,OAAO,QAAQ,MAAM,IAAI;AAAA,YACzC;AAAA,UACF;AAAA,UACA,WAAW,KAAK,IAAI;AAAA,QACtB,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACH;AAEO,MAAM,gBAAgB,CAC3B,MACA,YACA,aACG;AACH,QAAM,eAAe,eAAc,6BAAM;AACzC,MAAI,wBAAwB,aAAa;AACvC,eAAW,MAAM;AACf,YAAM,eAAe,sBAAsB,YAAY;AACvD,YAAM,EAAE,QAAQ,MAAM,KAAK,MAAM,IAAI,QAAQ,IAAI;AACjD,YAAM,IAAI,OAAO,aAAa;AAC9B,YAAM,IAAI,MAAM,aAAa;AAC7B,eAAS,GAAG,GAAG,OAAO,QAAQ,MAAM,GAAG;AAAA,IACzC,GAAG,CAAC;AAAA,EACN;AACF;AAEA,MAAM,OAAO,MAAM;AAAC;AAEb,SAAS,iBACd,KACA,UACA;AACA,QAAM,iBAAiB,CAAC,CAAC;AACzB,QAAM,gBAAgB,SAAS,YAAY,IAAI;AAI/C,4BAA0B,MAAM;AAC9B,QAAI,EAAE,kBAAkB;AAAiB;AACzC,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC;AAAM;AACX,mBAAe,IAAI,MAAM,aAAa;AACtC,mBAAe,QAAQ,IAAI;AAC3B,WAAO,MAAM;AACX,uDAAgB,UAAU;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,KAAK,cAAc,CAAC;AAC1B;",
+  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useEvent } from '@tamagui/use-event'\nimport { RefObject } from 'react'\n\nimport { getBoundingClientRect } from '../helpers/getBoundingClientRect'\nimport { getRect } from '../helpers/getRect'\n\nconst LayoutHandlers = new WeakMap<Element, Function>()\n\nexport type LayoutValue = {\n  x: number\n  y: number\n  width: number\n  height: number\n  left: number\n  top: number\n}\n\nexport type LayoutEvent = {\n  nativeEvent: {\n    layout: LayoutValue\n    target: any\n  }\n  timeStamp: number\n}\n\nlet resizeObserver: ResizeObserver | null = null\n\nif (typeof window !== 'undefined' && 'ResizeObserver' in window) {\n  resizeObserver = new ResizeObserver((entries) => {\n    for (const { target } of entries) {\n      const onLayout = LayoutHandlers.get(target)\n      if (typeof onLayout !== 'function') return\n      measureLayout(target as HTMLElement, null, (x, y, width, height, left, top) => {\n        onLayout({\n          nativeEvent: {\n            layout: { x, y, width, height, left, top },\n            target,\n          },\n          timeStamp: Date.now(),\n        })\n      })\n    }\n  })\n}\n\nexport const measureLayout = (\n  node: HTMLElement,\n  relativeTo: HTMLElement | null,\n  callback: Function\n) => {\n  const relativeNode = relativeTo || node?.parentNode\n  if (relativeNode instanceof HTMLElement) {\n    setTimeout(() => {\n      const relativeRect = getBoundingClientRect(relativeNode)!\n      const { height, left, top, width } = getRect(node)!\n      const x = left - relativeRect.left\n      const y = top - relativeRect.top\n      callback(x, y, width, height, left, top)\n    }, 0)\n  }\n}\n\nconst idFn = () => {}\n\nexport function useElementLayout(\n  ref: RefObject<Element>,\n  onLayout?: ((e: LayoutEvent) => void) | null\n) {\n  const hasLayoutEvent = !!onLayout\n  const onLayoutEvent = useEvent(onLayout || idFn)\n\n  // Observing is done in a separate effect to avoid this effect running\n  // when 'onLayout' changes.\n  useIsomorphicLayoutEffect(() => {\n    if (!resizeObserver || !hasLayoutEvent) return\n    const node = ref.current\n    if (!node) return\n    LayoutHandlers.set(node, onLayoutEvent)\n    resizeObserver.observe(node)\n    return () => {\n      resizeObserver?.unobserve(node)\n    }\n  }, [ref, hasLayoutEvent])\n}\n"],
+  "mappings": "AAAA,SAAS,iCAAiC;AAC1C,SAAS,gBAAgB;AAGzB,SAAS,6BAA6B;AACtC,SAAS,eAAe;AAExB,MAAM,iBAAiB,oBAAI,QAA2B;AAmBtD,IAAI,iBAAwC;AAE5C,IAAI,OAAO,WAAW,eAAe,oBAAoB,QAAQ;AAC/D,mBAAiB,IAAI,eAAe,CAAC,YAAY;AAC/C,eAAW,EAAE,OAAO,KAAK,SAAS;AAChC,YAAM,WAAW,eAAe,IAAI,MAAM;AAC1C,UAAI,OAAO,aAAa;AAAY;AACpC,oBAAc,QAAuB,MAAM,CAAC,GAAG,GAAG,OAAO,QAAQ,MAAM,QAAQ;AAC7E,iBAAS;AAAA,UACP,aAAa;AAAA,YACX,QAAQ,EAAE,GAAG,GAAG,OAAO,QAAQ,MAAM,IAAI;AAAA,YACzC;AAAA,UACF;AAAA,UACA,WAAW,KAAK,IAAI;AAAA,QACtB,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACH;AAEO,MAAM,gBAAgB,CAC3B,MACA,YACA,aACG;AACH,QAAM,eAAe,eAAc,6BAAM;AACzC,MAAI,wBAAwB,aAAa;AACvC,eAAW,MAAM;AACf,YAAM,eAAe,sBAAsB,YAAY;AACvD,YAAM,EAAE,QAAQ,MAAM,KAAK,MAAM,IAAI,QAAQ,IAAI;AACjD,YAAM,IAAI,OAAO,aAAa;AAC9B,YAAM,IAAI,MAAM,aAAa;AAC7B,eAAS,GAAG,GAAG,OAAO,QAAQ,MAAM,GAAG;AAAA,IACzC,GAAG,CAAC;AAAA,EACN;AACF;AAEA,MAAM,OAAO,MAAM;AAAC;AAEb,SAAS,iBACd,KACA,UACA;AACA,QAAM,iBAAiB,CAAC,CAAC;AACzB,QAAM,gBAAgB,SAAS,YAAY,IAAI;AAI/C,4BAA0B,MAAM;AAC9B,QAAI,CAAC,kBAAkB,CAAC;AAAgB;AACxC,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC;AAAM;AACX,mBAAe,IAAI,MAAM,aAAa;AACtC,mBAAe,QAAQ,IAAI;AAC3B,WAAO,MAAM;AACX,uDAAgB,UAAU;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,KAAK,cAAc,CAAC;AAC1B;",
   "names": []
 }

package/dist/esm/hooks/useFeatures.js

@@ -0,0 +1,174 @@
+import React from "react";
+import { getConfig } from "../conf";
+import { useIsomorphicLayoutEffect } from "../constants/platform";
+import { getSubStyle } from "../helpers/getSplitStyles";
+import { addMediaQueryListener, mediaState, removeMediaQueryListener } from "./useMedia";
+const createDefinition = ({
+  Component,
+  propNames
+}) => ({
+  isEnabled: (props) => propNames.some((name) => !!props[name]),
+  Component
+});
+let featureDefinitions = null;
+let tamaguiConfig;
+const useFeatures = (props, utils) => {
+  if (!featureDefinitions) {
+    featureDefinitions = loadFeatures();
+  }
+  const elements = [];
+  const enabled = {};
+  for (const name in featureDefinitions) {
+    const { isEnabled, Component } = featureDefinitions[name];
+    if (isEnabled(props) && Component) {
+      enabled[name] = true;
+      elements.push(/* @__PURE__ */ React.createElement(Component, {
+        key: name,
+        ...props,
+        _utils: utils
+      }));
+    }
+  }
+  return {
+    elements,
+    enabled
+  };
+};
+function loadFeatures() {
+  return {
+    animation: loadAnimationFeature(),
+    mediaQuery: loadMediaQueryFeature()
+  };
+}
+function loadAnimationFeature() {
+  tamaguiConfig = tamaguiConfig || getConfig();
+  return createDefinition({
+    Component: ({ _utils, ...props }) => {
+      const {
+        state,
+        useAnimations,
+        pseudos,
+        style: inStyle,
+        setStateShallow,
+        staticConfig,
+        theme,
+        onDidAnimate
+      } = _utils;
+      if (!useAnimations) {
+        console.error("no useAnimations hook provided");
+        return null;
+      }
+      const propsWithAnimation = props;
+      const res = useAnimations(propsWithAnimation, {
+        state,
+        pseudos,
+        onDidAnimate,
+        staticConfig,
+        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
+          var _a, _b, _c, _d;
+          const style = inStyle || {};
+          const enterStyle = isEntering ? enterVariant && ((_a = staticConfig.variants) == null ? void 0 : _a[enterVariant]["true"]) ? getSubStyle("", (_b = staticConfig.variants) == null ? void 0 : _b[enterVariant]["true"], staticConfig, theme, props, state, tamaguiConfig) || pseudos.enterStyle : pseudos.enterStyle : null;
+          const exitStyle = isExiting ? exitVariant && ((_c = staticConfig.variants) == null ? void 0 : _c[exitVariant]["true"]) ? getSubStyle("", (_d = staticConfig.variants) == null ? void 0 : _d[exitVariant]["true"], staticConfig, theme, props, state, tamaguiConfig) || pseudos.exitStyle : pseudos.exitStyle : null;
+          ensureBaseHasDefaults(style, enterStyle, pseudos.hoverStyle, pseudos.focusStyle, pseudos.pressStyle, pseudos.pressStyle);
+          enterStyle && merge(style, enterStyle);
+          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle);
+          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle);
+          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle);
+          exitStyle && merge(style, exitStyle);
+          return style;
+        }
+      });
+      useIsomorphicLayoutEffect(() => {
+        setStateShallow({
+          animation: res
+        });
+      }, [res]);
+      return null;
+    },
+    propNames: ["animation"]
+  });
+}
+const defaults = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  opacity: 1,
+  translateX: 0,
+  translateY: 0,
+  skew: 0,
+  skewX: 0,
+  skewY: 0,
+  scale: 1,
+  rotate: "0deg",
+  rotateY: "0deg",
+  rotateX: "0deg"
+};
+function ensureBaseHasDefaults(base, ...pseudos) {
+  for (const pseudo of pseudos) {
+    if (!pseudo)
+      continue;
+    for (const key in pseudo) {
+      const val = pseudo[key];
+      if (key === "transform") {
+        for (const t of val) {
+          const tkey = Object.keys(t)[0];
+          const defaultVal = defaults[tkey];
+          const tDefaultVal = { [tkey]: defaultVal };
+          if (!base.transform) {
+            base.transform = [tDefaultVal];
+          } else {
+            if (!base.transform.find((x) => x[tkey])) {
+              base.transform.push(tDefaultVal);
+            }
+          }
+        }
+      } else {
+        if (!(key in base)) {
+          base[key] = defaults[key];
+        }
+      }
+    }
+  }
+}
+function merge(base, next) {
+  if (!next.transform || !base.transform) {
+    Object.assign(base, next);
+    return;
+  }
+  const { transform, ...rest } = next;
+  Object.assign(base, rest);
+  for (const t of transform) {
+    const key = Object.keys(t)[0];
+    const existing = base.transform.find((x) => key in x);
+    if (existing) {
+      existing[key] = t[key];
+    } else {
+      base.transform.push(t);
+    }
+  }
+}
+function loadMediaQueryFeature() {
+  const mediaPropNames = Object.keys(mediaState);
+  return createDefinition({
+    Component: (props) => {
+      const mediaKeys = mediaPropNames.filter((x) => x in props);
+      useIsomorphicLayoutEffect(() => {
+        for (const key of mediaKeys) {
+          addMediaQueryListener(key, props._utils.forceUpdate);
+        }
+        return () => {
+          for (const key of mediaKeys) {
+            removeMediaQueryListener(key, props._utils.forceUpdate);
+          }
+        };
+      }, [mediaKeys.join(",")]);
+      return null;
+    },
+    propNames: mediaPropNames
+  });
+}
+export {
+  useFeatures
+};
+//# sourceMappingURL=useFeatures.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useFeatures.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { RefObject } from 'react'\nimport { View, ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getSubStyle } from '../helpers/getSplitStyles'\nimport {\n  PseudoStyles,\n  SplitStyleState,\n  StaticConfigParsed,\n  TamaguiComponentState,\n  TamaguiInternalConfig,\n  UseAnimationHook,\n  UseAnimationProps,\n} from '../types'\nimport { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'\n\ntype FeatureDefinition = {\n  isEnabled: (props: any) => boolean\n  Component: any\n}\n\ntype FeatureUtils = {\n  forceUpdate: Function\n  state: SplitStyleState\n  setStateShallow: (next: Partial<TamaguiComponentState>) => void\n  useAnimations?: UseAnimationHook\n  pseudos: PseudoStyles\n  style: ViewStyle | null | undefined\n  staticConfig: StaticConfigParsed\n  theme: any\n  onDidAnimate?: () => void\n  hostRef: RefObject<HTMLElement | View>\n}\n\nconst createDefinition = ({\n  Component,\n  propNames,\n}: {\n  Component: (props: { _utils: FeatureUtils; [key: string]: any }) => void\n  propNames: string[]\n}): FeatureDefinition => ({\n  isEnabled: (props: any) => propNames.some((name) => !!props[name]),\n  Component,\n})\n\nlet featureDefinitions: Record<string, FeatureDefinition> | null = null\nlet tamaguiConfig: TamaguiInternalConfig\n\ntype FeatureKeys = keyof ReturnType<typeof loadFeatures>\n\nexport const useFeatures = (props: any, utils?: FeatureUtils) => {\n  if (!featureDefinitions) {\n    featureDefinitions = loadFeatures()\n  }\n  const elements: JSX.Element[] = []\n  const enabled: { [key in FeatureKeys]?: boolean } = {}\n  for (const name in featureDefinitions) {\n    const { isEnabled, Component } = featureDefinitions[name]\n    if (isEnabled(props) && Component) {\n      enabled[name] = true\n      elements.push(<Component key={name} {...props} _utils={utils} />)\n    }\n  }\n  return {\n    elements,\n    enabled,\n  }\n}\n\nfunction loadFeatures() {\n  return {\n    // loads animations and sets state with the results\n    animation: loadAnimationFeature(),\n\n    // will update the parent whenever media query changes\n    // no need on web, media queries are inserted and run in css\n    mediaQuery: loadMediaQueryFeature(),\n  } as const\n}\n\nfunction loadAnimationFeature() {\n  tamaguiConfig = tamaguiConfig || getConfig()\n\n  return createDefinition({\n    Component: ({ _utils, ...props }) => {\n      const {\n        state,\n        useAnimations,\n        pseudos,\n        style: inStyle,\n        setStateShallow,\n        staticConfig,\n        theme,\n        onDidAnimate,\n      } = _utils\n\n      if (!useAnimations) {\n        console.error('no useAnimations hook provided')\n        return null\n      }\n\n      // we always have .animation set\n      const propsWithAnimation = props as UseAnimationProps\n\n      const res = useAnimations(propsWithAnimation, {\n        state,\n        pseudos,\n        onDidAnimate,\n        staticConfig,\n        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {\n          // we have to merge such that transforms keys all exist\n          const style = inStyle || {}\n\n          const enterStyle = isEntering\n            ? enterVariant && staticConfig.variants?.[enterVariant]['true']\n              ? getSubStyle(\n                  '',\n                  staticConfig.variants?.[enterVariant]['true'],\n                  staticConfig,\n                  theme,\n                  props,\n                  state,\n                  tamaguiConfig\n                ) || pseudos.enterStyle\n              : null || pseudos.enterStyle\n            : null\n\n          const exitStyle = isExiting\n            ? exitVariant && staticConfig.variants?.[exitVariant]['true']\n              ? getSubStyle(\n                  '',\n                  staticConfig.variants?.[exitVariant]['true'],\n                  staticConfig,\n                  theme,\n                  props,\n                  state,\n                  tamaguiConfig\n                ) || pseudos.exitStyle\n              : null || pseudos.exitStyle\n            : null\n\n          // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style\n          // no animation will run! this is really confusing. this will look at all variants,\n          // and fill in base styles if they don't exist. eg:\n          // input:\n          //   base: {}\n          //   hoverStyle: { scale: 2 }\n          //   enterStyle: { x: 100 }\n          // output:\n          //   base: { x: 0, scale: 1 }\n          ensureBaseHasDefaults(\n            style,\n            enterStyle,\n            pseudos.hoverStyle,\n            pseudos.focusStyle,\n            pseudos.pressStyle,\n            pseudos.pressStyle\n          )\n\n          enterStyle && merge(style, enterStyle)\n          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)\n          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)\n          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)\n          exitStyle && merge(style, exitStyle)\n\n          return style\n        },\n        //, delay\n      })\n\n      useIsomorphicLayoutEffect(() => {\n        setStateShallow({\n          animation: res,\n        })\n      }, [res])\n\n      return null\n    },\n    propNames: ['animation'],\n  })\n}\n\nconst defaults = {\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  opacity: 1,\n  translateX: 0,\n  translateY: 0,\n  skew: 0,\n  skewX: 0,\n  skewY: 0,\n  scale: 1,\n  rotate: '0deg',\n  rotateY: '0deg',\n  rotateX: '0deg',\n}\n\nfunction ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {\n  for (const pseudo of pseudos) {\n    if (!pseudo) continue\n    for (const key in pseudo) {\n      const val = pseudo[key]\n      if (key === 'transform') {\n        for (const t of val) {\n          const tkey = Object.keys(t)[0]\n          const defaultVal = defaults[tkey]\n          const tDefaultVal = { [tkey]: defaultVal } as any\n          if (!base.transform) {\n            base.transform = [tDefaultVal]\n          } else {\n            if (!base.transform.find((x) => x[tkey])) {\n              base.transform.push(tDefaultVal)\n            }\n          }\n        }\n      } else {\n        if (!(key in base)) {\n          base[key] = defaults[key]\n        }\n      }\n    }\n  }\n}\n\nfunction merge(base: ViewStyle, next: ViewStyle) {\n  if (!next.transform || !base.transform) {\n    Object.assign(base, next)\n    return\n  }\n  const { transform, ...rest } = next\n  Object.assign(base, rest)\n  for (const t of transform) {\n    const key = Object.keys(t)[0]\n    const existing = base.transform.find((x) => key in x)\n    if (existing) {\n      existing[key] = t[key]\n    } else {\n      base.transform.push(t)\n    }\n  }\n}\n\nfunction loadMediaQueryFeature() {\n  const mediaPropNames = Object.keys(mediaState)\n\n  return createDefinition({\n    Component: (props: any) => {\n      const mediaKeys = mediaPropNames.filter((x) => x in props)\n\n      useIsomorphicLayoutEffect(() => {\n        for (const key of mediaKeys) {\n          addMediaQueryListener(key, props._utils.forceUpdate)\n        }\n        return () => {\n          for (const key of mediaKeys) {\n            removeMediaQueryListener(key, props._utils.forceUpdate)\n          }\n        }\n      }, [mediaKeys.join(',')])\n\n      return null\n    },\n    propNames: mediaPropNames,\n  })\n}\n\n// TODO\n// measureLayout: createDefinition({\n//   Component: (props) => {\n//     console.log('measure', props)\n//     return null\n//   },\n//   propNames: ['onLayout'],\n// }),\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/hooks/useIsMounted.ts"],
   "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,SAAS,cAAc;AAEvB,SAAS,iCAAiC;AAEnC,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;",
+  "mappings": "AAAA;AAEA;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;",
   "names": []
 }

package/dist/esm/hooks/useIsSSR.js

@@ -1,17 +1,13 @@
-import { useState } from "react";
-import { isServer, isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
+import { useEffect, useState } from "react";
+import { isSSR, isWeb } from "../constants/platform";
 import { startTransition } from "../helpers/startTransition";
-const useIsSSR = (props) => {
-  const [val, setVal] = useState(true);
-  useIsomorphicLayoutEffect(() => {
-    if (isWeb && !isServer) {
-      if (props == null ? void 0 : props.immediate) {
+const useIsSSR = () => {
+  const [val, setVal] = useState(isSSR);
+  useEffect(() => {
+    if (isWeb && !isSSR) {
+      startTransition(() => {
         setVal(false);
-      } else {
-        startTransition(() => {
-          setVal(false);
-        });
-      }
+      });
     }
   }, []);
   return val;

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

@@ -1,7 +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  useIsomorphicLayoutEffect(() => {\n    if (isWeb && !isServer) {\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,gBAAgB;AAEzB,SAAS,UAAU,OAAO,iCAAiC;AAC3D,SAAS,uBAAuB;AAIzB,MAAM,WAAW,CAAC,UAAoC;AAC3D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,IAAI;AAEnC,4BAA0B,MAAM;AAC9B,QAAI,SAAS,CAAC,UAAU;AAEtB,UAAI,+BAAO,WAAW;AACpB,eAAO,KAAK;AAAA,MACd,OAAO;AACL,wBAAgB,MAAM;AACpB,iBAAO,KAAK;AAAA,QACd,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;",
+  "sourcesContent": ["import { useEffect, useState } from 'react'\n\nimport { isSSR, isWeb } from '../constants/platform'\nimport { startTransition } from '../helpers/startTransition'\n\n// because any change before first useEffect causes hydration / mismatch issues\n\nexport const useIsSSR = () => {\n  const [val, setVal] = useState(isSSR)\n\n  useEffect(() => {\n    if (isWeb && !isSSR) {\n      startTransition(() => {\n        setVal(false)\n      })\n    }\n  }, [])\n\n  return val\n}\n"],
+  "mappings": "AAAA;AAEA;AACA;AAIO,MAAM,WAAW,MAAM;AAC5B,QAAM,CAAC,KAAK,UAAU,SAAS,KAAK;AAEpC,YAAU,MAAM;AACd,QAAI,SAAS,CAAC,OAAO;AACnB,sBAAgB,MAAM;AACpB,eAAO,KAAK;AAAA,MACd,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;",
   "names": []
 }

package/dist/esm/hooks/useMedia.js

@@ -16,6 +16,7 @@ const mediaState = process.env.NODE_ENV === "development" ? createProxy(
 ) : {};
 const mediaQueryConfig = {};
 const getMedia = () => mediaState;
+const mediaKeysWithAndWithout$ = /* @__PURE__ */ new Set();
 let initState;
 const getInitialMediaState = () => {
   return (getConfig().disableSSR ? mediaState : initState) || {};
@@ -34,6 +35,8 @@ const configureMedia = (config) => {
     return;
   for (const key in media) {
     mediaState[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false;
+    mediaKeysWithAndWithout$.add(key);
+    mediaKeysWithAndWithout$.add(`$${key}`);
   }
   Object.assign(mediaQueryConfig, media);
   initState = { ...mediaState };
@@ -204,6 +207,7 @@ export {
   getMedia,
   getMediaImportanceIfMoreImportant,
   getMediaKeyImportance,
+  mediaKeysWithAndWithout$,
   mediaObjectToString,
   mediaQueryConfig,
   mediaState,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useMedia.tsx"],
-  "sourcesContent": ["import { useEffect, useMemo, useSyncExternalStore } from 'react'\n\nimport { getConfig } from '../config'\nimport { createProxy } from '../helpers/createProxy'\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 only safeguard\n  process.env.NODE_ENV === 'development'\n    ? createProxy(\n        {},\n        {\n          get(target, key) {\n            if (\n              typeof key === 'string' &&\n              key[0] === '$' &&\n              // dont error on $$typeof\n              key[1] !== '$'\n            ) {\n              throw new Error(`Access mediaState should not use \"$\": ${key}`)\n            }\n            return Reflect.get(target, key)\n          },\n        }\n      )\n    : ({} as any)\n\nexport const mediaQueryConfig: MediaQueries = {}\nexport const getMedia = () => mediaState\n\n// for SSR capture it at time of startup\nlet initState: MediaQueryState\nexport const getInitialMediaState = () => {\n  return (getConfig().disableSSR ? mediaState : initState) || {}\n}\n\nlet mediaKeysOrdered: string[]\nexport const getMediaKeyImportance = (key: string) => {\n  if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n    throw new Error('use short key')\n  }\n  // + 2 because we set base usedKeys=1 in getSplitStyles and all media go above 1\n  return mediaKeysOrdered.indexOf(key) + 2\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  initState = { ...mediaState }\n  updateCurrentState()\n  mediaKeysOrdered = Object.keys(media)\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) return\n  configuredKey = nextKey\n\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(() => {\n      match.removeListener(update)\n    })\n\n    update()\n\n    function update() {\n      const next = !!getMatch().matches\n      if (next === mediaState[key]) return\n      mediaState[key] = next\n      updateCurrentState()\n    }\n  }\n}\n\nexport function useMediaListeners(config: TamaguiInternalConfig) {\n  if (config.disableSSR) return\n  useEffect(() => {\n    setupMediaListeners()\n  }, [])\n}\n\nconst currentStateListeners = new Set<any>()\nfunction updateCurrentState() {\n  currentStateListeners.forEach((cb) => cb(mediaState))\n}\nfunction subscribe(subscriber: any) {\n  currentStateListeners.add(subscriber)\n  return () => currentStateListeners.delete(subscriber)\n}\n\ntype MediaKeysState = {\n  [key: string]: any\n}\n\ntype UseMediaState = {\n  [key in MediaQueryKey]: boolean\n}\n\nconst shouldUpdate = new WeakMap<any, boolean>()\nexport function setMediaShouldUpdate(ref: any, val: boolean) {\n  return shouldUpdate.set(ref, val)\n}\n\ntype UseMediaInternalState = { prev: MediaKeysState; next: MediaKeysState }\nconst empty = {}\nlet initialUseState: UseMediaInternalState\n\nexport function useMedia(): UseMediaState {\n  // setup once\n  initialUseState ||= {\n    prev: initState,\n    next: empty,\n  }\n\n  const keys = useSafeRef<UseMediaInternalState>(initialUseState)\n  const state = useSyncExternalStore<MediaQueryState>(\n    subscribe,\n    () => {\n      const curState = keys.current\n      const preventUpdate = arguments[0] && shouldUpdate.get(arguments[0]) !== true\n      if (preventUpdate) {\n        return curState.prev\n      }\n\n      let didUpdate = false\n\n      // ensure we keep the minimal object of only used keys\n      const next = {}\n\n      for (const key in curState.next) {\n        const val = mediaState[key]\n        if (curState.prev[key] !== val) {\n          didUpdate = true\n        }\n        next[key] = val\n      }\n\n      if (!didUpdate) {\n        return curState.prev\n      }\n\n      keys.current = { next, prev: next }\n      return next\n    },\n    () => initState\n  )\n\n  return useMemo(() => {\n    return new Proxy(state === empty ? initState : state, {\n      get(_, key: string) {\n        if (!(key in keys.current.next)) {\n          keys.current.next[key] = true\n          keys.current = { ...keys.current }\n        }\n        return Reflect.get(state, key)\n      },\n    })\n  }, [state])\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 next = {} as A\n    const importancesUsed = {}\n    const propNames = Object.keys(props)\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 mediaKey = key.slice(1)\n        if (!media[mediaKey]) continue\n        if (val && typeof val === 'object') {\n          const subKeys = Object.keys(val)\n          for (let j = subKeys.length; j--; j >= 0) {\n            const subKey = subKeys[j]\n            mergeMediaByImportance(next, mediaKey, subKey, val[subKey], importancesUsed)\n          }\n        }\n      } else {\n        mergeMediaByImportance(next, '', key, val, importancesUsed)\n      }\n    }\n\n    return next\n  }, [media, props])\n}\n\nexport const getMediaImportanceIfMoreImportant = (\n  mediaKey: string,\n  key: string,\n  importancesUsed: Record<string, number>\n) => {\n  const importance = getMediaKeyImportance(mediaKey)\n  return !importancesUsed[key] || importance > importancesUsed[key] ? importance : null\n}\n\nexport function mergeMediaByImportance(\n  onto: Record<string, any>,\n  mediaKey: string,\n  key: string,\n  value: any,\n  importancesUsed: Record<string, number>\n) {\n  const importance = getMediaImportanceIfMoreImportant(mediaKey, key, importancesUsed)\n  if (importance === null) {\n    return false\n  }\n  importancesUsed[key] = importance\n  onto[key] = value\n  return true\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 { useEffect, useMemo, useSyncExternalStore } from 'react'\n\nimport { getConfig } from '../config'\nimport { createProxy } from '../helpers/createProxy'\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 only safeguard\n  process.env.NODE_ENV === 'development'\n    ? createProxy(\n        {},\n        {\n          get(target, key) {\n            if (\n              typeof key === 'string' &&\n              key[0] === '$' &&\n              // dont error on $$typeof\n              key[1] !== '$'\n            ) {\n              throw new Error(`Access mediaState should not use \"$\": ${key}`)\n            }\n            return Reflect.get(target, key)\n          },\n        }\n      )\n    : ({} as any)\n\nexport const mediaQueryConfig: MediaQueries = {}\nexport const getMedia = () => mediaState\nexport const mediaKeysWithAndWithout$ = new Set<string>()\n\n// for SSR capture it at time of startup\nlet initState: MediaQueryState\nexport const getInitialMediaState = () => {\n  return (getConfig().disableSSR ? mediaState : initState) || {}\n}\n\nlet mediaKeysOrdered: string[]\nexport const getMediaKeyImportance = (key: string) => {\n  if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n    throw new Error('use short key')\n  }\n  // + 2 because we set base usedKeys=1 in getSplitStyles and all media go above 1\n  return mediaKeysOrdered.indexOf(key) + 2\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    mediaKeysWithAndWithout$.add(key)\n    mediaKeysWithAndWithout$.add(`$${key}`)\n  }\n  Object.assign(mediaQueryConfig, media)\n  initState = { ...mediaState }\n  updateCurrentState()\n  mediaKeysOrdered = Object.keys(media)\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) return\n  configuredKey = nextKey\n\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(() => {\n      match.removeListener(update)\n    })\n\n    update()\n\n    function update() {\n      const next = !!getMatch().matches\n      if (next === mediaState[key]) return\n      mediaState[key] = next\n      updateCurrentState()\n    }\n  }\n}\n\nexport function useMediaListeners(config: TamaguiInternalConfig) {\n  if (config.disableSSR) return\n  useEffect(() => {\n    setupMediaListeners()\n  }, [])\n}\n\nconst currentStateListeners = new Set<any>()\nfunction updateCurrentState() {\n  currentStateListeners.forEach((cb) => cb(mediaState))\n}\nfunction subscribe(subscriber: any) {\n  currentStateListeners.add(subscriber)\n  return () => currentStateListeners.delete(subscriber)\n}\n\ntype MediaKeysState = {\n  [key: string]: any\n}\n\ntype UseMediaState = {\n  [key in MediaQueryKey]: boolean\n}\n\nconst shouldUpdate = new WeakMap<any, boolean>()\nexport function setMediaShouldUpdate(ref: any, val: boolean) {\n  return shouldUpdate.set(ref, val)\n}\n\ntype UseMediaInternalState = { prev: MediaKeysState; next: MediaKeysState }\nconst empty = {}\nlet initialUseState: UseMediaInternalState\n\nexport function useMedia(): UseMediaState {\n  // setup once\n  initialUseState ||= {\n    prev: initState,\n    next: empty,\n  }\n\n  const keys = useSafeRef<UseMediaInternalState>(initialUseState)\n  const state = useSyncExternalStore<MediaQueryState>(\n    subscribe,\n    () => {\n      const curState = keys.current\n      const preventUpdate = arguments[0] && shouldUpdate.get(arguments[0]) !== true\n      if (preventUpdate) {\n        return curState.prev\n      }\n\n      let didUpdate = false\n\n      // ensure we keep the minimal object of only used keys\n      const next = {}\n\n      for (const key in curState.next) {\n        const val = mediaState[key]\n        if (curState.prev[key] !== val) {\n          didUpdate = true\n        }\n        next[key] = val\n      }\n\n      if (!didUpdate) {\n        return curState.prev\n      }\n\n      keys.current = { next, prev: next }\n      return next\n    },\n    () => initState\n  )\n\n  return useMemo(() => {\n    return new Proxy(state === empty ? initState : state, {\n      get(_, key: string) {\n        if (!(key in keys.current.next)) {\n          keys.current.next[key] = true\n          keys.current = { ...keys.current }\n        }\n        return Reflect.get(state, key)\n      },\n    })\n  }, [state])\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 next = {} as A\n    const importancesUsed = {}\n    const propNames = Object.keys(props)\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 mediaKey = key.slice(1)\n        if (!media[mediaKey]) continue\n        if (val && typeof val === 'object') {\n          const subKeys = Object.keys(val)\n          for (let j = subKeys.length; j--; j >= 0) {\n            const subKey = subKeys[j]\n            mergeMediaByImportance(next, mediaKey, subKey, val[subKey], importancesUsed)\n          }\n        }\n      } else {\n        mergeMediaByImportance(next, '', key, val, importancesUsed)\n      }\n    }\n\n    return next\n  }, [media, props])\n}\n\nexport const getMediaImportanceIfMoreImportant = (\n  mediaKey: string,\n  key: string,\n  importancesUsed: Record<string, number>\n) => {\n  const importance = getMediaKeyImportance(mediaKey)\n  return !importancesUsed[key] || importance > importancesUsed[key] ? importance : null\n}\n\nexport function mergeMediaByImportance(\n  onto: Record<string, any>,\n  mediaKey: string,\n  key: string,\n  value: any,\n  importancesUsed: Record<string, number>\n) {\n  const importance = getMediaImportanceIfMoreImportant(mediaKey, key, importancesUsed)\n  if (importance === null) {\n    return false\n  }\n  importancesUsed[key] = importance\n  onto[key] = value\n  return true\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": "AAAA,SAAS,WAAW,SAAS,4BAA4B;AAEzD,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAQ3B,SAAS,kBAAkB;AAEpB,MAAM,aAEX,QAAQ,IAAI,aAAa,gBACrB;AAAA,EACE,CAAC;AAAA,EACD;AAAA,IACE,IAAI,QAAQ,KAAK;AACf,UACE,OAAO,QAAQ,YACf,IAAI,OAAO,OAEX,IAAI,OAAO,KACX;AACA,cAAM,IAAI,MAAM,yCAAyC,KAAK;AAAA,MAChE;AACA,aAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,IAChC;AAAA,EACF;AACF,IACC,CAAC;AAED,MAAM,mBAAiC,CAAC;AACxC,MAAM,WAAW,MAAM;AACvB,MAAM,2BAA2B,oBAAI,IAAY;AAGxD,IAAI;AACG,MAAM,uBAAuB,MAAM;AACxC,UAAQ,UAAU,EAAE,aAAa,aAAa,cAAc,CAAC;AAC/D;AAEA,IAAI;AACG,MAAM,wBAAwB,CAAC,QAAgB;AACpD,MAAI,QAAQ,IAAI,aAAa,iBAAiB,IAAI,OAAO,KAAK;AAC5D,UAAM,IAAI,MAAM,eAAe;AAAA,EACjC;AAEA,SAAO,iBAAiB,QAAQ,GAAG,IAAI;AACzC;AAEA,MAAM,UAAU,oBAAI,IAAc;AAE3B,MAAM,iBAAiB,CAAC,WAAkC;AAC/D,QAAM,EAAE,OAAO,wBAAwB,IAAI;AAC3C,MAAI,CAAC;AAAO;AACZ,aAAW,OAAO,OAAO;AACvB,eAAW,QAAO,mEAA0B,SAAQ;AACpD,6BAAyB,IAAI,GAAG;AAChC,6BAAyB,IAAI,IAAI,KAAK;AAAA,EACxC;AACA,SAAO,OAAO,kBAAkB,KAAK;AACrC,cAAY,EAAE,GAAG,WAAW;AAC5B,qBAAmB;AACnB,qBAAmB,OAAO,KAAK,KAAK;AACpC,MAAI,OAAO,YAAY;AACrB,wBAAoB;AAAA,EACtB;AACF;AAEA,SAAS,WAAW;AAClB,UAAQ,QAAQ,CAAC,OAAO,GAAG,CAAC;AAC5B,UAAQ,MAAM;AAChB;AAOA,IAAI,gBAAgB;AACpB,SAAS,sBAAsB;AAE7B,QAAM,UAAU,KAAK,UAAU,gBAAgB;AAC/C,MAAI,YAAY;AAAe;AAC/B,kBAAgB;AAGhB,WAAS;AAET,aAAW,OAAO,kBAAkB;AAelC,QAASA,UAAT,WAAkB;AAChB,YAAM,OAAO,CAAC,CAAC,SAAS,EAAE;AAC1B,UAAI,SAAS,WAAW;AAAM;AAC9B,iBAAW,OAAO;AAClB,yBAAmB;AAAA,IACrB;AALS,iBAAAA;AAdT,UAAM,MAAM,oBAAoB,iBAAiB,IAAI;AACrD,UAAM,WAAW,MAAM,WAAW,GAAG;AACrC,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,OAAO;AACV,YAAM,IAAI,MAAM,uBAAa;AAAA,IAC/B;AAEA,UAAM,YAAYA,OAAM;AACxB,YAAQ,IAAI,MAAM;AAChB,YAAM,eAAeA,OAAM;AAAA,IAC7B,CAAC;AAED,IAAAA,QAAO;AAAA,EAQT;AACF;AAEO,SAAS,kBAAkB,QAA+B;AAC/D,MAAI,OAAO;AAAY;AACvB,YAAU,MAAM;AACd,wBAAoB;AAAA,EACtB,GAAG,CAAC,CAAC;AACP;AAEA,MAAM,wBAAwB,oBAAI,IAAS;AAC3C,SAAS,qBAAqB;AAC5B,wBAAsB,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC;AACtD;AACA,SAAS,UAAU,YAAiB;AAClC,wBAAsB,IAAI,UAAU;AACpC,SAAO,MAAM,sBAAsB,OAAO,UAAU;AACtD;AAUA,MAAM,eAAe,oBAAI,QAAsB;AACxC,SAAS,qBAAqB,KAAU,KAAc;AAC3D,SAAO,aAAa,IAAI,KAAK,GAAG;AAClC;AAGA,MAAM,QAAQ,CAAC;AACf,IAAI;AAEG,SAAS,WAA0B;AAExC,sBAAoB;AAAA,IAClB,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAEA,QAAM,OAAO,WAAkC,eAAe;AAC9D,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA,MAAM;AACJ,YAAM,WAAW,KAAK;AACtB,YAAM,gBAAgB,UAAU,MAAM,aAAa,IAAI,UAAU,EAAE,MAAM;AACzE,UAAI,eAAe;AACjB,eAAO,SAAS;AAAA,MAClB;AAEA,UAAI,YAAY;AAGhB,YAAM,OAAO,CAAC;AAEd,iBAAW,OAAO,SAAS,MAAM;AAC/B,cAAM,MAAM,WAAW;AACvB,YAAI,SAAS,KAAK,SAAS,KAAK;AAC9B,sBAAY;AAAA,QACd;AACA,aAAK,OAAO;AAAA,MACd;AAEA,UAAI,CAAC,WAAW;AACd,eAAO,SAAS;AAAA,MAClB;AAEA,WAAK,UAAU,EAAE,MAAM,MAAM,KAAK;AAClC,aAAO;AAAA,IACT;AAAA,IACA,MAAM;AAAA,EACR;AAEA,SAAO,QAAQ,MAAM;AACnB,WAAO,IAAI,MAAM,UAAU,QAAQ,YAAY,OAAO;AAAA,MACpD,IAAI,GAAG,KAAa;AAClB,YAAI,EAAE,OAAO,KAAK,QAAQ,OAAO;AAC/B,eAAK,QAAQ,KAAK,OAAO;AACzB,eAAK,UAAU,EAAE,GAAG,KAAK,QAAQ;AAAA,QACnC;AACA,eAAO,QAAQ,IAAI,OAAO,GAAG;AAAA,MAC/B;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,KAAK,CAAC;AACZ;AASO,SAAS,oBACd,OAIA;AACA,QAAM,QAAQ,SAAS;AAEvB,SAAO,QAAQ,MAAM;AACnB,UAAM,OAAO,CAAC;AACd,UAAM,kBAAkB,CAAC;AACzB,UAAM,YAAY,OAAO,KAAK,KAAK;AAEnC,aAAS,IAAI,UAAU,SAAS,GAAG,KAAK,GAAG,KAAK;AAC9C,YAAM,MAAM,UAAU;AACtB,YAAM,MAAM,MAAM;AAClB,UAAI,IAAI,OAAO,KAAK;AAClB,cAAM,WAAW,IAAI,MAAM,CAAC;AAC5B,YAAI,CAAC,MAAM;AAAW;AACtB,YAAI,OAAO,OAAO,QAAQ,UAAU;AAClC,gBAAM,UAAU,OAAO,KAAK,GAAG;AAC/B,mBAAS,IAAI,QAAQ,QAAQ,KAAK,KAAK,GAAG;AACxC,kBAAM,SAAS,QAAQ;AACvB,mCAAuB,MAAM,UAAU,QAAQ,IAAI,SAAS,eAAe;AAAA,UAC7E;AAAA,QACF;AAAA,MACF,OAAO;AACL,+BAAuB,MAAM,IAAI,KAAK,KAAK,eAAe;AAAA,MAC5D;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,KAAK,CAAC;AACnB;AAEO,MAAM,oCAAoC,CAC/C,UACA,KACA,oBACG;AACH,QAAM,aAAa,sBAAsB,QAAQ;AACjD,SAAO,CAAC,gBAAgB,QAAQ,aAAa,gBAAgB,OAAO,aAAa;AACnF;AAEO,SAAS,uBACd,MACA,UACA,KACA,OACA,iBACA;AACA,QAAM,aAAa,kCAAkC,UAAU,KAAK,eAAe;AACnF,MAAI,eAAe,MAAM;AACvB,WAAO;AAAA,EACT;AACA,kBAAgB,OAAO;AACvB,OAAK,OAAO;AACZ,SAAO;AACT;AAEA,SAAS,cAAc,KAAa;AAClC,SAAO,IAAI,QAAQ,UAAU,CAAC,MAAM,IAAI,EAAE,YAAY,GAAG,EAAE,YAAY;AACzE;AAEO,SAAS,oBAAoB,OAAkC;AACpE,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO,OAAO,QAAQ,KAAK,EACxB,IAAI,CAAC,CAAC,SAAS,KAAK,MAAM;AACzB,cAAU,cAAc,OAAO;AAC/B,QAAI,OAAO,UAAU,UAAU;AAC7B,aAAO,IAAI,YAAY;AAAA,IACzB;AACA,QAAI,OAAO,UAAU,YAAY,kBAAkB,KAAK,OAAO,GAAG;AAChE,cAAQ,GAAG;AAAA,IACb;AACA,WAAO,IAAI,YAAY;AAAA,EACzB,CAAC,EACA,KAAK,OAAO;AACjB;",
   "names": ["update"]
 }

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,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;",
+  "mappings": "AAAA;AAAA;AAEA,MAAM,eAAe,6CAAY,YAAZ,mBAAsB;AAEpC,MAAM,eAAe,CAAC,UAA0B;AACrD,QAAM,MAAM,aAAa,KAAK;AAC9B,QAAM,EAAE,UAAU,UAAU,mBAAmB,IAAI;AACnD,SAAO,CAAC,gBAAgB,KAAK;AAC/B;",
   "names": []
 }

package/dist/esm/hooks/usePrevious.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}