@tamagui/core 1.0.1-rc.7 → 1.0.1-rc.9

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": "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",
   "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": []
+}

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/hooks/useUnmountEffect.ts"],
   "sourcesContent": ["import { useEffect } from 'react'\n\nexport function useUnmountEffect(callback: () => void) {\n  return useEffect(() => () => callback(), [])\n}\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAEnB,SAAS,iBAAiB,UAAsB;AACrD,SAAO,UAAU,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC;AAC7C;",
+  "mappings": "AAAA;AAEO,0BAA0B,UAAsB;AACrD,SAAO,UAAU,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC;AAC7C;",
   "names": []
 }

package/dist/esm/styled.js

@@ -1,6 +1,18 @@
+import { stylePropsAll } from "@tamagui/helpers";
 import { createComponent } from "./createComponent";
 import { ReactNativeStaticConfigs } from "./setupReactNative";
 function styled(Component, options, staticExtractionOptions) {
+  if (process.env.NODE_ENV === "development") {
+    if (options == null ? void 0 : options.variants) {
+      for (const key in options.variants) {
+        if (key in stylePropsAll) {
+          console.error(
+            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`
+          );
+        }
+      }
+    }
+  }
   const staticConfigProps = (() => {
     const parentStaticConfig = "staticConfig" in Component ? Component.staticConfig : null;
     if (options) {

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { createComponent } from './createComponent'\nimport { ReactNativeStaticConfigs } from './setupReactNative'\nimport {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\n// can't infer from styled(<YStack />) which would be nice\n// * excessively deep type instantiation\n\ntype GetBaseProps<A extends StylableComponent> =\n  // A extends TamaguiReactElement\n  //   ? GetBaseProps<A['type']> :\n  A extends TamaguiComponent<any, any, infer P> ? P : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> =\n  // A extends TamaguiReactElement\n  //   ? GetVariantProps<A['type']>\n  //   :\n  A extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // allows passing styled(<H1 bc=\"red\" />)\n  // but to get types right would be tricky\n  // if (isValidElement(Component) && isTamaguiComponent(Component.type)) {\n  //   const props = Component.props\n  //   if (props && typeof props === 'object') {\n  //     Component = Component.type as any\n  //     options = options ? ({ ...props, ...options } as any) : props\n  //   }\n  // }\n\n  const staticConfigProps = (() => {\n    const parentStaticConfig =\n      'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n      const isReactNative = Boolean(\n        ReactNativeStaticConfigs.has(Component) ||\n          ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n          parentStaticConfig?.isReactNative ||\n          staticExtractionOptions?.isReactNative\n      )\n      const isTamagui = !isReactNative && !!parentStaticConfig\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n    return {}\n  })()\n\n  const component = createComponent(staticConfigProps, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAoClC,SAAS,OAId,WAEA,SAOA,yBACA;AAWA,QAAM,qBAAqB,MAAM;AAC/B,UAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAE3E,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,WACf;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,gBAAgB;AAAA,QACpB,yBAAyB,IAAI,SAAS,KACpC,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB,mBACpB,mEAAyB;AAAA,MAC7B;AACA,YAAM,YAAY,CAAC,iBAAiB,CAAC,CAAC;AAEtC,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AACL,YAAM,aAAc,iBAAiB,yBAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AAqC9D,SAAO;AACT;",
+  "sourcesContent": ["import { stylePropsAll, validStyles } from '@tamagui/helpers'\n\nimport { createComponent } from './createComponent'\nimport { ReactNativeStaticConfigs } from './setupReactNative'\nimport {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\n// can't infer from styled(<YStack />) which would be nice\n// * excessively deep type instantiation\n\ntype GetBaseProps<A extends StylableComponent> =\n  // A extends TamaguiReactElement\n  //   ? GetBaseProps<A['type']> :\n  A extends TamaguiComponent<any, any, infer P> ? P : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> =\n  // A extends TamaguiReactElement\n  //   ? GetVariantProps<A['type']>\n  //   :\n  A extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // allows passing styled(<H1 bc=\"red\" />)\n  // but to get types right would be tricky\n  // if (isValidElement(Component) && isTamaguiComponent(Component.type)) {\n  //   const props = Component.props\n  //   if (props && typeof props === 'object') {\n  //     Component = Component.type as any\n  //     options = options ? ({ ...props, ...options } as any) : props\n  //   }\n  // }\n\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV === 'development') {\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`\n          )\n        }\n      }\n    }\n  }\n\n  const staticConfigProps = (() => {\n    const parentStaticConfig =\n      'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n      const isReactNative = Boolean(\n        ReactNativeStaticConfigs.has(Component) ||\n          ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n          parentStaticConfig?.isReactNative ||\n          staticExtractionOptions?.isReactNative\n      )\n      const isTamagui = !isReactNative && !!parentStaticConfig\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n    return {}\n  })()\n\n  const component = createComponent(staticConfigProps, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
+  "mappings": "AAAA,SAAS,qBAAkC;AAE3C,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAoClC,SAAS,OAId,WAEA,SAOA,yBACA;AAYA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,eAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAC/B,UAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAE3E,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,WACf;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,gBAAgB;AAAA,QACpB,yBAAyB,IAAI,SAAS,KACpC,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB,mBACpB,mEAAyB;AAAA,MAC7B;AACA,YAAM,YAAY,CAAC,iBAAiB,CAAC,CAAC;AAEtC,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AACL,YAAM,aAAc,iBAAiB,yBAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AAqC9D,SAAO;AACT;",
   "names": []
 }

package/dist/esm/views/TextAncestorContext.js

@@ -0,0 +1,15 @@
+import { TextAncestorContext as RNWTextAncestorContext } from "@tamagui/rnw";
+import React, { createContext } from "react";
+const FallbackNativeContext = createContext(false);
+const TextAncestorContext = RNWTextAncestorContext ?? FallbackNativeContext;
+const TextAncestorProvider = (props) => {
+  return /* @__PURE__ */ React.createElement(TextAncestorContext.Provider, {
+    value: false
+  }, props.children);
+};
+export {
+  FallbackNativeContext,
+  TextAncestorContext,
+  TextAncestorProvider
+};
+//# sourceMappingURL=TextAncestorContext.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/TextAncestorContext.tsx"],
+  "sourcesContent": ["import { TextAncestorContext as RNWTextAncestorContext } from '@tamagui/rnw'\nimport React, { createContext } from 'react'\n\nexport const FallbackNativeContext = createContext(false)\n\nexport const TextAncestorContext = RNWTextAncestorContext ?? FallbackNativeContext\n\nexport const TextAncestorProvider = (props) => {\n  return <TextAncestorContext.Provider value={false}>{props.children}</TextAncestorContext.Provider>\n}\n"],
+  "mappings": "AAAA;AACA;AAEO,MAAM,wBAAwB,cAAc,KAAK;AAEjD,MAAM,sBAAsB,0BAA0B;AAEtD,MAAM,uBAAuB,CAAC,UAAU;AAC7C,SAAO,oCAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,KAAQ,MAAM,QAAS;AACrE;",
+  "names": []
+}

package/dist/esm/views/ThemeInverse.js

@@ -1,32 +1,27 @@
-import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import React, { useState } from "react";
 import { useIsomorphicLayoutEffect } from "../constants/platform";
 import { useDefaultThemeName, useThemeName } from "../hooks/useTheme";
 import { Theme } from "./Theme";
-const ThemeInverse = ({
-  children,
-  disable
-}) => {
+let inversions = {
+  light: "dark",
+  dark: "light"
+};
+function setThemeInversions(next) {
+  inversions = next;
+}
+const ThemeInverse = (props) => {
   const themeName = useThemeName();
   const defaultTheme = useDefaultThemeName();
   const [name, setName] = useState(null);
   useIsomorphicLayoutEffect(() => {
-    if (themeName.startsWith("dark")) {
-      setName("light");
-    }
-    if (themeName.startsWith("light")) {
-      setName("dark");
-    }
+    setName(inversions[themeName] || inversions[defaultTheme || ""] || null);
   }, [defaultTheme, themeName]);
-  if (disable) {
-    return children;
-  }
-  return /* @__PURE__ */ jsx(Theme, {
-    name,
-    children
-  });
+  return /* @__PURE__ */ React.createElement(Theme, {
+    name
+  }, props.children);
 };
 export {
-  ThemeInverse
+  ThemeInverse,
+  setThemeInversions
 };
 //# sourceMappingURL=ThemeInverse.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeInverse.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\nexport const ThemeInverse = ({\n  children,\n  disable,\n}: {\n  children: React.ReactNode\n  disable?: boolean\n}) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  // ssr\n  useIsomorphicLayoutEffect(() => {\n    if (themeName.startsWith('dark')) {\n      setName('light')\n    }\n    if (themeName.startsWith('light')) {\n      setName('dark')\n    }\n  }, [defaultTheme, themeName])\n\n  if (disable) {\n    return children as JSX.Element\n  }\n\n  return <Theme name={name}>{children}</Theme>\n}\n"],
-  "mappings": "AA+BS;AA/BT,SAAgB,gBAAgB;AAEhC,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,aAAa;AAEf,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,YAAY,aAAa;AAC/B,QAAM,eAAe,oBAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAGpD,4BAA0B,MAAM;AAC9B,QAAI,UAAU,WAAW,MAAM,GAAG;AAChC,cAAQ,OAAO;AAAA,IACjB;AACA,QAAI,UAAU,WAAW,OAAO,GAAG;AACjC,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC;AAAA,IAAM;AAAA,IAAa;AAAA,GAAS;AACtC;",
+  "sourcesContent": ["import React, { useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\ntype StringRecord = { [key: string]: string }\n\nlet inversions: StringRecord = {\n  light: 'dark',\n  dark: 'light',\n}\n\nexport function setThemeInversions(next: StringRecord) {\n  inversions = next\n}\n\nexport const ThemeInverse = (props: { children: any }) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  // ssr\n  useIsomorphicLayoutEffect(() => {\n    setName(inversions[themeName] || inversions[defaultTheme || ''] || null)\n  }, [defaultTheme, themeName])\n\n  return <Theme name={name}>{props.children}</Theme>\n}\n"],
+  "mappings": "AAAA;AAEA;AACA;AACA;AAIA,IAAI,aAA2B;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR;AAEO,4BAA4B,MAAoB;AACrD,eAAa;AACf;AAEO,MAAM,eAAe,CAAC,UAA6B;AACxD,QAAM,YAAY,aAAa;AAC/B,QAAM,eAAe,oBAAoB;AACzC,QAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;AAGpD,4BAA0B,MAAM;AAC9B,YAAQ,WAAW,cAAc,WAAW,gBAAgB,OAAO,IAAI;AAAA,EACzE,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,SAAO,oCAAC;AAAA,IAAM;AAAA,KAAa,MAAM,QAAS;AAC5C;",
   "names": []
 }

package/dist/esm/views/ThemeReset.js

@@ -1,7 +1,6 @@
-import { jsx } from "react/jsx-runtime";
 import React, { useContext, useLayoutEffect, useState } from "react";
 import { isWeb } from "../constants/platform";
-import { ThemeManagerContext } from "../helpers/ThemeManager";
+import { ThemeManagerContext } from "../ThemeManager";
 import { Theme } from "./Theme";
 React["createElement"];
 const ThemeReset = (props) => {
@@ -26,12 +25,11 @@ const ThemeReset = (props) => {
   if (!themeManager || !props.children) {
     return props.children || null;
   }
-  return /* @__PURE__ */ jsx(Theme, {
+  return /* @__PURE__ */ React.createElement(Theme, {
     className: "tui-theme-reset",
     reset: true,
-    name,
-    children: props.children
-  });
+    name
+  }, props.children);
 };
 export {
   ThemeReset

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeReset.tsx"],
-  "sourcesContent": ["import React, { useContext, useLayoutEffect, useState } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { ThemeManagerContext } from '../helpers/ThemeManager'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\n// resets the theme to the parent theme\nexport const ThemeReset = (props: { children?: any }) => {\n  const themeManager = useContext(ThemeManagerContext)\n  const [name, setName] = useState<string | null>(null)\n\n  // this component doesn't work with SSR, so must run only client side\n  // we could at least prevent more flickering by having the ssr head script\n  // that changes to dark initially also go through and change all of these\n  if (!isWeb || typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (name !== themeManager.parentName) {\n        setName(themeManager.parentName)\n      }\n    }, [themeManager?.parentName])\n\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      return themeManager.onChangeTheme(() => {\n        setName(themeManager.parentName)\n      })\n    }, [])\n  }\n\n  if (!themeManager || !props.children) {\n    return props.children || null\n  }\n\n  return (\n    <Theme className=\"tui-theme-reset\" reset name={name}>\n      {props.children}\n    </Theme>\n  )\n}\n"],
-  "mappings": "AAsCI;AAtCJ,OAAO,SAAS,YAAY,iBAAiB,gBAAgB;AAE7D,SAAS,aAAa;AACtB,SAAS,2BAA2B;AACpC,SAAS,aAAa;AAGtB,MAAM;AAGC,MAAM,aAAa,CAAC,UAA8B;AACvD,QAAM,eAAe,WAAW,mBAAmB;AACnD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAKpD,MAAI,CAAC,SAAS,OAAO,aAAa,aAAa;AAC7C,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,UAAI,SAAS,aAAa,YAAY;AACpC,gBAAQ,aAAa,UAAU;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,6CAAc,UAAU,CAAC;AAE7B,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,aAAO,aAAa,cAAc,MAAM;AACtC,gBAAQ,aAAa,UAAU;AAAA,MACjC,CAAC;AAAA,IACH,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,MAAI,CAAC,gBAAgB,CAAC,MAAM,UAAU;AACpC,WAAO,MAAM,YAAY;AAAA,EAC3B;AAEA,SACE,oBAAC;AAAA,IAAM,WAAU;AAAA,IAAkB,OAAK;AAAA,IAAC;AAAA,IACtC,gBAAM;AAAA,GACT;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useLayoutEffect, useState } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { ThemeManagerContext } from '../ThemeManager'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\n// resets the theme to the parent theme\nexport const ThemeReset = (props: { children?: any }) => {\n  const themeManager = useContext(ThemeManagerContext)\n  const [name, setName] = useState<string | null>(null)\n\n  // this component doesn't work with SSR, so must run only client side\n  // we could at least prevent more flickering by having the ssr head script\n  // that changes to dark initially also go through and change all of these\n  if (!isWeb || typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (name !== themeManager.parentName) {\n        setName(themeManager.parentName)\n      }\n    }, [themeManager?.parentName])\n\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      return themeManager.onChangeTheme(() => {\n        setName(themeManager.parentName)\n      })\n    }, [])\n  }\n\n  if (!themeManager || !props.children) {\n    return props.children || null\n  }\n\n  return (\n    <Theme className=\"tui-theme-reset\" reset name={name}>\n      {props.children}\n    </Theme>\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AACA;AACA;AAGA,MAAM;AAGC,MAAM,aAAa,CAAC,UAA8B;AACvD,QAAM,eAAe,WAAW,mBAAmB;AACnD,QAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;AAKpD,MAAI,CAAC,SAAS,OAAO,aAAa,aAAa;AAC7C,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,UAAI,SAAS,aAAa,YAAY;AACpC,gBAAQ,aAAa,UAAU;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,6CAAc,UAAU,CAAC;AAE7B,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,aAAO,aAAa,cAAc,MAAM;AACtC,gBAAQ,aAAa,UAAU;AAAA,MACjC,CAAC;AAAA,IACH,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,MAAI,CAAC,gBAAgB,CAAC,MAAM,UAAU;AACpC,WAAO,MAAM,YAAY;AAAA,EAC3B;AAEA,SACE,oCAAC;AAAA,IAAM,WAAU;AAAA,IAAkB,OAAK;AAAA,IAAC;AAAA,KACtC,MAAM,QACT;AAEJ;",
   "names": []
 }