@tamagui/core 1.0.0-alpha.6 → 1.0.0-alpha.66

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useFeatures.tsx"],
+  "sourcesContent": ["import React from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'\n\ntype FeatureDefinition = {\n  isEnabled: (props: any) => boolean\n  Component: any\n}\n\nconst createDefinition = ({\n  Component,\n  propNames,\n}: {\n  Component: any\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\n\nexport const useFeatures = (props: any, utils?: { forceUpdate?: Function }) => {\n  if (!featureDefinitions) {\n    featureDefinitions = loadFeatures()\n  }\n  const features: JSX.Element[] = []\n  for (const name in featureDefinitions) {\n    const { isEnabled, Component } = featureDefinitions[name]\n    if (isEnabled(props) && Component) {\n      features.push(<Component key={name} {...props} _utils={utils} />)\n    }\n  }\n  return features\n}\n\nfunction loadFeatures(): Record<string, FeatureDefinition> {\n  return {\n    // TODO\n    // measureLayout: createDefinition({\n    //   Component: (props) => {\n    //     console.log('measure', props)\n    //     return null\n    //   },\n    //   propNames: ['onLayout'],\n    // }),\n\n    // will update the parent whenever media query changes\n    // no need on web, media queries are inserted and run in css\n    ...(!isWeb && {\n      mediaQuery: loadMediaQueryFeature(),\n    }),\n  }\n}\n\nfunction loadMediaQueryFeature() {\n  const mediaPropNames = Object.keys(mediaState)\n\n  return createDefinition({\n    Component: (props: any) => {\n      const keys = mediaPropNames.flatMap((x) => (x in props ? x.slice(1) : []))\n\n      useIsomorphicLayoutEffect(() => {\n        for (const key of keys) {\n          addMediaQueryListener(key, props._utils.forceUpdate)\n        }\n        return () => {\n          for (const key of keys) {\n            removeMediaQueryListener(key, props._utils.forceUpdate)\n          }\n        }\n      }, [keys.join(',')])\n\n      return null\n    },\n    propNames: mediaPropNames,\n  })\n}\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AAOA,MAAM,mBAAmB,wBAAC;AAAA,EACxB;AAAA,EACA;AAAA,MAIwB;AAAA,EACxB,WAAW,CAAC,UAAe,UAAU,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM;AAAA,EAC5D;AAAA,IARuB;AAWzB,IAAI,qBAA+D;AAE5D,MAAM,cAAc,wBAAC,OAAY,UAAuC;AAC7E,MAAI,CAAC,oBAAoB;AACvB,yBAAqB;AAAA;AAEvB,QAAM,WAA0B;AAChC,aAAW,QAAQ,oBAAoB;AACrC,UAAM,EAAE,WAAW,cAAc,mBAAmB;AACpD,QAAI,UAAU,UAAU,WAAW;AACjC,eAAS,KAAK,oCAAC,WAAD;AAAA,QAAW,KAAK;AAAA,WAAU;AAAA,QAAO,QAAQ;AAAA;AAAA;AAAA;AAG3D,SAAO;AAAA,GAXkB;AAc3B,wBAA2D;AACzD,SAAO;AAAA,OAYD,CAAC,SAAS;AAAA,MACZ,YAAY;AAAA;AAAA;AAAA;AAdT;AAmBT,iCAAiC;AAC/B,QAAM,iBAAiB,OAAO,KAAK;AAEnC,SAAO,iBAAiB;AAAA,IACtB,WAAW,CAAC,UAAe;AACzB,YAAM,OAAO,eAAe,QAAQ,CAAC,MAAO,KAAK,QAAQ,EAAE,MAAM,KAAK;AAEtE,gCAA0B,MAAM;AAC9B,mBAAW,OAAO,MAAM;AACtB,gCAAsB,KAAK,MAAM,OAAO;AAAA;AAE1C,eAAO,MAAM;AACX,qBAAW,OAAO,MAAM;AACtB,qCAAyB,KAAK,MAAM,OAAO;AAAA;AAAA;AAAA,SAG9C,CAAC,KAAK,KAAK;AAEd,aAAO;AAAA;AAAA,IAET,WAAW;AAAA;AAAA;AApBN;",
+  "names": []
+}

package/dist/{hooks → esm/hooks}/useMedia.js

@@ -8,23 +8,29 @@ import { useConstant } from "./useConstant";
 const mediaState = {};
 const mediaQueryListeners = {};
 const addMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
-  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set();
+  mediaQueryListeners[key] = mediaQueryListeners[key] || /* @__PURE__ */ new Set();
   mediaQueryListeners[key].add(cb);
 }, "addMediaQueryListener");
 const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
-  mediaQueryListeners[key].delete(cb);
+  var _a;
+  (_a = mediaQueryListeners[key]) == null ? void 0 : _a.delete(cb);
 }, "removeMediaQueryListener");
 let conf = null;
 const mediaQueryConfig = new Proxy({}, {
   get(target, key) {
+    if (key === "$$typeof") {
+      return Reflect.get(target, key);
+    }
     if (!conf) {
-      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`);
+      console.warn("Tamagui: accessing media query before init");
+      return null;
     }
     return Reflect.get(conf, key);
   },
   ownKeys() {
     if (!conf) {
-      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`);
+      console.warn("Tamagui: accessing media query before init");
+      return [];
     }
     return Object.keys(conf);
   },
@@ -45,6 +51,7 @@ const configureMedia = /* @__PURE__ */ __name(({
   queries,
   defaultActive = ["sm", "xs"]
 } = {}) => {
+  var _a;
   if (conf) {
     console.warn(`Already configured mediaQueries once (you may have called getMedia() before configureMedia())`);
   }
@@ -66,7 +73,7 @@ const configureMedia = /* @__PURE__ */ __name(({
           return;
         mediaState[key] = next;
         const listeners = mediaQueryListeners[key];
-        if (listeners?.size) {
+        if (listeners == null ? void 0 : listeners.size) {
           for (const cb of [...listeners]) {
             cb();
           }
@@ -74,7 +81,7 @@ const configureMedia = /* @__PURE__ */ __name(({
       });
     } catch (err) {
       console.error("Error running media query", str, err.message, err.stack);
-      const isDefaultActive = defaultActive?.includes(key) ?? true;
+      const isDefaultActive = (_a = defaultActive == null ? void 0 : defaultActive.includes(key)) != null ? _a : true;
       mediaState[key] = isDefaultActive;
     }
   }

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useMedia.tsx"],
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  ConfigureMediaQueryOptions,\n  MediaQueries,\n  MediaQueryObject,\n  MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in keyof MediaQueryState]: boolean } = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n  mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n  mediaQueryListeners[key]?.delete(cb)\n}\n\nlet conf: MediaQueries | null = null\n\nexport const mediaQueryConfig = new Proxy<MediaQueries>({} as any, {\n  get(target, key) {\n    if (key === '$$typeof') {\n      return Reflect.get(target, key)\n    }\n    if (!conf) {\n      console.warn('Tamagui: accessing media query before init')\n      return null\n    }\n    return Reflect.get(conf, key)\n  },\n  ownKeys() {\n    if (!conf) {\n      console.warn('Tamagui: accessing media query before init')\n      return []\n    }\n    return Object.keys(conf)\n  },\n  getOwnPropertyDescriptor() {\n    return {\n      enumerable: true,\n      configurable: true,\n    }\n  },\n})\n\nexport const getMedia = () => {\n  if (!conf) {\n    throw new Error(`not configured yet`)\n  }\n  return mediaState\n}\n\nexport const configureMedia = ({\n  queries,\n  defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n  if (conf) {\n    console.warn(\n      `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n    )\n  }\n\n  if (queries) {\n    conf = queries\n  }\n\n  // setup\n  for (const key in queries) {\n    const str = mediaObjectToString(queries[key])\n    try {\n      const getMatch = () => matchMedia(str)\n      const match = getMatch()\n      if (!match || typeof match.addListener !== 'function') {\n        // caught below\n        throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n      }\n      mediaState[key] = !!match.matches\n      match.addListener(() => {\n        const next = !!getMatch().matches\n        if (next === mediaState[key]) return\n        mediaState[key] = next\n        const listeners = mediaQueryListeners[key]\n        if (listeners?.size) {\n          for (const cb of [...listeners]) {\n            cb()\n          }\n        }\n      })\n    } catch (err: any) {\n      console.error('Error running media query', str, err.message, err.stack)\n      const isDefaultActive = defaultActive?.includes(key as any) ?? true\n      mediaState[key] = isDefaultActive\n    }\n  }\n}\n\ntype UseMediaState = {\n  selections: { [key: string]: boolean }\n  nextSelections: { [key: string]: boolean }\n  isRendering: boolean\n  isUnmounted: boolean\n}\n\nexport const useMedia = () => {\n  const forceUpdate = useForceUpdate()\n  const state = useRef() as React.MutableRefObject<UseMediaState>\n  if (!state.current) {\n    state.current = {\n      selections: {},\n      nextSelections: {},\n      isUnmounted: false,\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    // delete old\n    for (const key in st.selections) {\n      if (!(key in st.nextSelections)) {\n        removeMediaQueryListener(key, forceUpdate)\n      }\n    }\n    // add new\n    for (const key in st.nextSelections) {\n      if (!(key in st.selections)) {\n        addMediaQueryListener(key, forceUpdate)\n      }\n    }\n  })\n\n  // unmount\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      const st = state.current\n      st.isUnmounted = true\n      const allKeys = {\n        ...st.selections,\n        ...st.nextSelections,\n      }\n      for (const key in allKeys) {\n        removeMediaQueryListener(key, forceUpdate)\n      }\n    }\n  }, [])\n\n  return useConstant(() => {\n    const st = state.current\n    return new Proxy(mediaState, {\n      get(target, key: string) {\n        if (!(key in mediaState)) {\n          return Reflect.get(target, key)\n        }\n        if (!st.isUnmounted) {\n          if (st.isRendering) {\n            st.nextSelections[key] = true\n          }\n        }\n        if (key in mediaState) {\n          return mediaState[key]\n        }\n        return Reflect.get(mediaState, key)\n      },\n    })\n  })\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/{hooks → esm/hooks}/usePressable.js

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

package/dist/{hooks → esm/hooks}/usePressable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/hooks/usePressable.tsx"],
+  "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;AAEA,MAAM,eAAe,YAAY,UAAU;AAEpC,MAAM,eAAe,wBAAC,UAA0B;AACrD,QAAM,MAAM,aAAa;AACzB,QAAM,EAAE,UAAU,UAAU,mBAAmB,IAAI;AACnD,SAAO,CAAC,gBAAgB;AAAA,GAHE;",
+  "mappings": ";;AAAA;AAAA;AAEA,MAAM,eAAe,6CAAY,YAAZ,mBAAsB;AAEpC,MAAM,eAAe,wBAAC,UAA0B;AACrD,QAAM,MAAM,aAAa;AACzB,QAAM,EAAE,UAAU,UAAU,mBAAmB,IAAI;AACnD,SAAO,CAAC,gBAAgB;AAAA,GAHE;",
   "names": []
 }

package/dist/{hooks → esm/hooks}/useTheme.js

@@ -2,11 +2,11 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { useForceUpdate } from "@tamagui/use-force-update";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { GET_DEFAULT_THEME } from "../constants/constants";
 import { useIsomorphicLayoutEffect } from "../constants/platform";
-import { Variable } from "../createVariable";
+import { isVariable } from "../createVariable";
 import { ThemeContext } from "../views/ThemeContext";
 import { ThemeManagerContext } from "../views/ThemeManagerContext";
-import { GET_DEFAULT_THEME } from "../views/ThemeProvider";
 const areEqualSets = /* @__PURE__ */ __name((a, b) => {
   if (a.size !== b.size)
     return false;
@@ -17,16 +17,12 @@ const areEqualSets = /* @__PURE__ */ __name((a, b) => {
   }
   return true;
 }, "areEqualSets");
-const useThemeName = /* @__PURE__ */ __name(() => {
+const useThemeName = /* @__PURE__ */ __name((opts) => {
   const parent = useContext(ThemeManagerContext);
   const [name, setName] = useState(parent.name);
-  useEffect(() => {
-    return parent.onChangeTheme((next) => {
-      setName((prev) => {
-        if (prev === next)
-          return prev;
-        return next;
-      });
+  useIsomorphicLayoutEffect(() => {
+    return parent.onChangeTheme((next, manager) => {
+      setName((opts == null ? void 0 : opts.parent) ? manager.parentName : next);
     });
   }, [parent]);
   return name || "light";
@@ -35,14 +31,15 @@ const useDefaultThemeName = /* @__PURE__ */ __name(() => {
   return useContext(ThemeContext)[GET_DEFAULT_THEME];
 }, "useDefaultThemeName");
 const useTheme = /* @__PURE__ */ __name(() => {
+  var _a, _b;
   const forceUpdate = useForceUpdate();
   const manager = useContext(ThemeManagerContext);
-  const themes = useContext(ThemeContext);
+  const themes = useContext(ThemeContext) || {};
   const state = useRef();
   if (!state.current) {
     state.current = {
       uuid: {},
-      keys: new Set(),
+      keys: /* @__PURE__ */ new Set(),
       isRendering: true
     };
   }
@@ -58,7 +55,7 @@ const useTheme = /* @__PURE__ */ __name(() => {
   useEffect(() => {
     return manager.onUpdate(state.current.uuid, forceUpdate);
   }, []);
-  const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light;
+  const theme = (_b = (_a = manager.name ? themes[manager.name] : themes.light) != null ? _a : themes.light) != null ? _b : {};
   return useMemo(() => {
     return new Proxy(theme, {
       get(_, key) {
@@ -68,19 +65,28 @@ const useTheme = /* @__PURE__ */ __name(() => {
         }
         let activeTheme = themes[name];
         if (!activeTheme) {
-          console.error("No theme by name", name, "only:", themes, "keeping current theme");
+          if (process.env.NODE_ENV !== "test") {
+            console.error("No theme by name", name, "only:", themes, "keeping current theme");
+          }
           activeTheme = theme;
         }
         const val = activeTheme[key];
         if (process.env.NODE_ENV === "development") {
           if (typeof val === "undefined") {
-            throw new Error(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`);
+            console.warn(`No theme value "${String(key)}" in`, activeTheme);
+            return null;
+          }
+          if (!isVariable(val)) {
+            console.warn("Non variable!", val);
+          }
+          if (val.name !== key) {
+            console.warn("Non-matching name for variable to key", key, val.name);
           }
         }
         if (state.current.isRendering) {
           state.current.keys.add(key);
         }
-        return new Variable({ val: val.val, name: key });
+        return val;
       }
     });
   }, []);

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useTheme.tsx"],
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { GET_DEFAULT_THEME } from '../constants/constants'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { isVariable } from '../createVariable'\nimport { ThemeName, ThemeObject } from '../types'\nimport { ThemeContext } from '../views/ThemeContext'\nimport { ThemeManagerContext } from '../views/ThemeManagerContext'\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nconst areEqualSets = (a: Set<string>, b: Set<string>) => {\n  if (a.size !== b.size) return false\n  for (const val in a) {\n    if (!b.has(val)) {\n      return false\n    }\n  }\n  return true\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent.name)\n\n  useIsomorphicLayoutEffect(() => {\n    return parent.onChangeTheme((next, manager) => {\n      setName(opts?.parent ? manager.parentName : next)\n    })\n  }, [parent])\n\n  return name || 'light'\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)[GET_DEFAULT_THEME] as any as ThemeName\n}\n\nexport const useTheme = (): ThemeObject => {\n  const forceUpdate = useForceUpdate()\n  const manager = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext) || {}\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = manager.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      manager.track(st.uuid, st.keys)\n    }\n  })\n\n  useEffect(() => {\n    return manager.onUpdate(state.current.uuid, forceUpdate)\n  }, [])\n\n  const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light ?? {}\n\n  return useMemo(\n    () => {\n      return new Proxy(theme, {\n        get(_, key: string) {\n          const name = manager.name\n          if (!name) {\n            return Reflect.get(_, key)\n          }\n          let activeTheme = themes[name]\n          if (!activeTheme) {\n            if (process.env.NODE_ENV !== 'test') {\n              console.error('No theme by name', name, 'only:', themes, 'keeping current theme')\n            }\n            activeTheme = theme\n          }\n          const val = activeTheme[key]\n          if (process.env.NODE_ENV === 'development') {\n            if (typeof val === 'undefined') {\n              console.warn(`No theme value \"${String(key)}\" in`, activeTheme)\n              return null\n            }\n            if (!isVariable(val)) {\n              console.warn('Non variable!', val)\n            }\n            if (val.name !== key) {\n              console.warn('Non-matching name for variable to key', key, val.name)\n            }\n          }\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n          }\n          return val\n        },\n      })\n    },\n    [\n      /* if concurrent mode wanted put manager.name here */\n    ]\n  )\n}\n"],
+  "mappings": ";;AAAA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAQA,MAAM,eAAe,wBAAC,GAAgB,MAAmB;AACvD,MAAI,EAAE,SAAS,EAAE;AAAM,WAAO;AAC9B,aAAW,OAAO,GAAG;AACnB,QAAI,CAAC,EAAE,IAAI,MAAM;AACf,aAAO;AAAA;AAAA;AAGX,SAAO;AAAA,GAPY;AAUd,MAAM,eAAe,wBAAC,SAA6B;AACxD,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,MAAM,WAAW,SAAS,OAAO;AAExC,4BAA0B,MAAM;AAC9B,WAAO,OAAO,cAAc,CAAC,MAAM,YAAY;AAC7C,cAAQ,8BAAM,UAAS,QAAQ,aAAa;AAAA;AAAA,KAE7C,CAAC;AAEJ,SAAO,QAAQ;AAAA,GAVW;AAarB,MAAM,sBAAsB,6BAAM;AACvC,SAAO,WAAW,cAAc;AAAA,GADC;AAI5B,MAAM,WAAW,6BAAmB;AA3C3C;AA4CE,QAAM,cAAc;AACpB,QAAM,UAAU,WAAW;AAC3B,QAAM,SAAS,WAAW,iBAAiB;AAE3C,QAAM,QAAQ;AACd,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,MAAM,oBAAI;AAAA,MACV,aAAa;AAAA;AAAA;AAGjB,QAAM,QAAQ,cAAc;AAG5B,4BAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,UAAM,MAAM,QAAQ,KAAK,IAAI,GAAG;AAChC,QAAI,CAAC,OAAO,CAAC,aAAa,GAAG,MAAM,MAAM;AACvC,cAAQ,MAAM,GAAG,MAAM,GAAG;AAAA;AAAA;AAI9B,YAAU,MAAM;AACd,WAAO,QAAQ,SAAS,MAAM,QAAQ,MAAM;AAAA,KAC3C;AAEH,QAAM,QAAS,oBAAQ,OAAO,OAAO,QAAQ,QAAQ,OAAO,UAA7C,YAAuD,OAAO,UAA9D,YAAuE;AAEtF,SAAO,QACL,MAAM;AACJ,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAa;AAClB,cAAM,OAAO,QAAQ;AACrB,YAAI,CAAC,MAAM;AACT,iBAAO,QAAQ,IAAI,GAAG;AAAA;AAExB,YAAI,cAAc,OAAO;AACzB,YAAI,CAAC,aAAa;AAChB,cAAI,QAAQ,IAAI,aAAa,QAAQ;AACnC,oBAAQ,MAAM,oBAAoB,MAAM,SAAS,QAAQ;AAAA;AAE3D,wBAAc;AAAA;AAEhB,cAAM,MAAM,YAAY;AACxB,YAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAI,OAAO,QAAQ,aAAa;AAC9B,oBAAQ,KAAK,mBAAmB,OAAO,YAAY;AACnD,mBAAO;AAAA;AAET,cAAI,CAAC,WAAW,MAAM;AACpB,oBAAQ,KAAK,iBAAiB;AAAA;AAEhC,cAAI,IAAI,SAAS,KAAK;AACpB,oBAAQ,KAAK,yCAAyC,KAAK,IAAI;AAAA;AAAA;AAGnE,YAAI,MAAM,QAAQ,aAAa;AAC7B,gBAAM,QAAQ,KAAK,IAAI;AAAA;AAEzB,eAAO;AAAA;AAAA;AAAA,KAIb;AAAA,GAlEoB;",
+  "names": []
+}

package/dist/{index.js → esm/index.js}

@@ -7,10 +7,12 @@ import { createTokens } from "./createTokens";
 export * from "./createVariable";
 export * from "./styled";
 export * from "./types";
+import { getHasConfigured, getTamagui, getThemes, getTokens, onConfiguredOnce } from "./conf";
 export * from "./constants/pseudos";
 export * from "./constants/constants";
 export * from "./constants/platform";
 export * from "./constants/rnw";
+export * from "./helpers/getThemeParentClassName";
 export * from "./helpers/isObj";
 export * from "./helpers/getStylesAtomic";
 export * from "./helpers/matchMedia";
@@ -27,6 +29,11 @@ export * from "./views/ThemeInverse";
 export * from "./views/ThemeProvider";
 export * from "./views/TextAncestorContext";
 export {
-  createTokens
+  createTokens,
+  getHasConfigured,
+  getTamagui,
+  getThemes,
+  getTokens,
+  onConfiguredOnce
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport { createTokens } from './createTokens'\nexport * from './createVariable'\nexport * from './styled'\nexport * from './types'\nexport { getHasConfigured, getTamagui, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/pseudos'\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/getThemeParentClassName'\nexport * from './helpers/isObj'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/isTamaguiElement'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './views/Animated'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/TextAncestorContext'\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;",
+  "names": []
+}

package/dist/{static → esm/static}/postProcessStyles.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/static/postProcessStyles.tsx"],
+  "sources": ["../../../src/static/postProcessStyles.tsx"],
   "sourcesContent": ["import { getSplitStyles } from '../helpers/getSplitStyles'\nimport { StaticConfigParsed, TamaguiInternalConfig, ThemeObject } from '../types'\n\n// used only by static extractor\n\nexport const postProcessStyles = (\n  inStyles: any,\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject\n) => {\n  const { style, viewProps, pseudos, classNames } = getSplitStyles(inStyles, staticConfig, theme)\n  // flattening\n  const next = {}\n  for (const s of style) {\n    if (!s) continue\n    Object.assign(next, s)\n  }\n  Object.assign(next, pseudos)\n  return { style: next, viewProps, classNames }\n}\n"],
   "mappings": ";;AAAA;AAKO,MAAM,oBAAoB,wBAC/B,UACA,cACA,UACG;AACH,QAAM,EAAE,OAAO,WAAW,SAAS,eAAe,eAAe,UAAU,cAAc;AAEzF,QAAM,OAAO;AACb,aAAW,KAAK,OAAO;AACrB,QAAI,CAAC;AAAG;AACR,WAAO,OAAO,MAAM;AAAA;AAEtB,SAAO,OAAO,MAAM;AACpB,SAAO,EAAE,OAAO,MAAM,WAAW;AAAA,GAbF;",
   "names": []

package/dist/{static.js.map → esm/static.js.map}

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../src/static.ts"],
+  "sources": ["../../src/static.ts"],
   "sourcesContent": ["// only stuff that gets extracted or needed by tamagui-static\n\nexport * from './styled'\nexport * from './createComponent'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createTamagui'\nexport * from './constants/constants'\n\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './helpers/isObj'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/getSplitStyles'\nexport * from '@tamagui/helpers'\n\nexport * from './constants/pseudos'\n\n// -- below exports are only bundled compile-time --\n\nexport * from './static/postProcessStyles'\n"],
   "mappings": "AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAIA;",
   "names": []

package/dist/esm/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styled.ts"],
+  "sourcesContent": ["import * as React from 'react'\n\nimport { createComponent } from './createComponent'\nimport { extendStaticConfig } from './helpers/extendStaticConfig'\nimport {\n  MediaProps,\n  PseudoProps,\n  StaticComponent,\n  StaticConfig,\n  TamaguiConfig,\n  Themes,\n  Tokens,\n} from './types'\n\nexport function styled<\n  Props,\n  ParentComponent extends StaticComponent | React.Component<any>,\n  Variants extends GetVariants<GetProps<ParentComponent>>\n>(\n  Component: ParentComponent,\n  options?: GetProps<ParentComponent> & {\n    variants?: Variants\n  },\n  staticExtractionOptions?: StaticConfig\n) {\n  const staticConfigProps: StaticConfig = (() => {\n    if (options) {\n      const { variants, ...defaultProps } = options\n      return { ...staticExtractionOptions, variants, defaultProps }\n    }\n    return {}\n  })()\n  const config = extendStaticConfig(Component, staticConfigProps)\n  const component = createComponent(config!) // error is good here its on init\n\n  type VariantProps = GetVariantProps<Variants>\n  type ParentProps = Props extends Object ? Props : GetProps<ParentComponent>\n\n  return component as StaticComponent<\n    // if not options/variants passed just styled(Text):\n    keyof VariantProps extends never\n      ? ParentProps\n      : // if options passed: styled(Text, { ... })\n        Omit<ParentProps, keyof VariantProps> &\n          VariantProps &\n          MediaProps<VariantProps> &\n          PseudoProps<VariantProps>,\n    void\n  >\n}\n\n// type ParentVariants = A extends StaticComponent<any, infer Variants> ? Variants : {}\n\nexport type GetProps<A> = A extends StaticComponent<infer Props>\n  ? Props\n  : A extends React.Component<infer Props>\n  ? Props\n  : A extends (props: infer Props) => any\n  ? Props\n  : {}\n\nexport type GetVariants<Props> = void | {\n  [key: string]: {\n    [key: string]:\n      | Partial<Props>\n      | ((\n          val: any,\n          config: {\n            tokens: TamaguiConfig['tokens']\n            theme: Themes extends { [key: string]: infer B } ? B : unknown\n            props: Props\n          }\n        ) => Partial<Props>)\n  }\n}\n\nexport type GetVariantProps<Variants> = Variants extends void\n  ? {}\n  : {\n      // ensure variants actually defined\n      [Key in keyof Variants]?: keyof Variants[Key] extends `...${infer VariantSpread}`\n        ? VariantSpread extends keyof Tokens\n          ? keyof Tokens[VariantSpread] extends string | number\n            ? `$${keyof Tokens[VariantSpread]}` | null\n            : unknown\n          : unknown\n        : keyof Variants[Key] extends 'true'\n        ? boolean | null\n        : keyof Exclude<Variants[Key], undefined>\n    }\n\n// type X = { ok: 1 }\n// type Y = { okk: 2; ok: 3 }\n// type Z = X & Y\n// type Z2 = Z\n\n// TODO get name\n// const displayName = `styled(Component)`\n// Object.defineProperty(component, 'name', {\n//   value: displayName,\n//   writable: false,\n// })\n"],
+  "mappings": ";;AAEA;AACA;AAWO,gBAKL,WACA,SAGA,yBACA;AACA,QAAM,oBAAmC,OAAM;AAC7C,QAAI,SAAS;AACX,YAAM,EAAE,aAAa,iBAAiB;AACtC,aAAO,KAAK,yBAAyB,UAAU;AAAA;AAEjD,WAAO;AAAA;AAET,QAAM,SAAS,mBAAmB,WAAW;AAC7C,QAAM,YAAY,gBAAgB;AAKlC,SAAO;AAAA;AAxBO;",
+  "names": []
+}

package/dist/esm/tamagui-base.css

@@ -0,0 +1,11 @@
+.tamagui-absolute-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.reset-appearance {
+  -webkit-appearance: none;
+}
+/*# sourceMappingURL=tamagui-base.css.map */

package/dist/esm/tamagui-base.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tamagui-base.css"],
+  "sourcesContent": [".tamagui-absolute-fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n\n.reset-appearance {\n  -webkit-appearance: none;\n}\n"],
+  "mappings": "AAAA;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;",
+  "names": []
+}

package/dist/esm/views/AbsoluteFullscreen.js

@@ -0,0 +1,14 @@
+import { styled } from "../styled";
+import { Stack } from "./Stack";
+const AbsoluteFullscreen = styled(Stack, {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+});
+globalThis["TamaguiAbsoluteFullscreen"] = AbsoluteFullscreen;
+export {
+  AbsoluteFullscreen
+};
+//# sourceMappingURL=AbsoluteFullscreen.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/AbsoluteFullscreen.tsx"],
+  "sourcesContent": ["import { styled } from '../styled'\nimport { Stack } from './Stack'\n\nexport const AbsoluteFullscreen = styled(Stack, {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n})\n\nglobalThis['TamaguiAbsoluteFullscreen'] = AbsoluteFullscreen\n"],
+  "mappings": "AAAA;AACA;AAEO,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA;AAGV,WAAW,+BAA+B;",
+  "names": []
+}

package/dist/esm/views/AbsoluteFullscreen.native.js

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

package/dist/esm/views/AbsoluteFullscreen.native.js.map

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

package/dist/{views → esm/views}/Animated.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/views/Animated.tsx"],
+  "sources": ["../../../src/views/Animated.tsx"],
   "sourcesContent": ["import React, { useMemo } from 'react'\nimport {\n  Animated,\n  PerpectiveTransform,\n  RotateTransform,\n  RotateXTransform,\n  RotateYTransform,\n  RotateZTransform,\n  ScaleTransform,\n  ScaleXTransform,\n  ScaleYTransform,\n  SkewXTransform,\n  SkewYTransform,\n  TranslateXTransform,\n  TranslateYTransform,\n} from 'react-native'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { useConstant } from '../hooks/useConstant'\nimport { StackProps } from '../types'\nimport { Stack } from './Stack'\n\nconst defaultAnimation = {\n  from: {\n    opacity: 0,\n    translateY: 12,\n  },\n  to: {\n    opacity: 1,\n    translateY: 0,\n  },\n}\n\ntype AnimatableProps = Partial<\n  Pick<StackProps, 'backgroundColor' | 'borderColor' | 'opacity'> &\n    PerpectiveTransform &\n    RotateTransform &\n    RotateXTransform &\n    RotateYTransform &\n    RotateZTransform &\n    ScaleTransform &\n    ScaleXTransform &\n    ScaleYTransform &\n    TranslateXTransform &\n    TranslateYTransform &\n    SkewXTransform &\n    SkewYTransform\n>\n\nconst styleKeys = {\n  opacity: true,\n  backgroundColor: true,\n  borderColor: true,\n}\n\nexport type AnimatedStackProps = StackProps & {\n  animateState?: 'in' | 'out'\n  velocity?: number\n  animation?: {\n    from: AnimatableProps\n    to: AnimatableProps\n  }\n}\n\nexport const AnimatedStack = ({\n  animateState = 'in',\n  animation = defaultAnimation,\n  velocity = 6,\n  children,\n  animated,\n  ...props\n}: AnimatedStackProps) => {\n  const driver = useConstant(() => {\n    return new Animated.Value(0)\n  })\n\n  const animatedProps = useMemo(() => {\n    if (!animated) {\n      return null\n    }\n\n    const styleProps = {}\n    const transform: any = []\n\n    for (const key in animation.from) {\n      const fromVal = animation.from[key]\n      const toVal = animation.to[key]\n      const interpolatedVal = driver.interpolate({\n        inputRange: [0, 1],\n        outputRange: [fromVal, toVal],\n      })\n      if (styleKeys[key]) {\n        styleProps[key] = interpolatedVal\n      } else {\n        transform.push({\n          [key]: interpolatedVal,\n        })\n      }\n    }\n    return { transform, ...styleProps }\n  }, [animated, animateState])\n\n  useIsomorphicLayoutEffect(() => {\n    if (!animated) {\n      return\n    }\n    Animated.spring(driver, {\n      useNativeDriver: true,\n      velocity,\n      toValue: animateState === 'in' ? 1 : 0,\n    }).start()\n  }, [animated, animateState])\n\n  const childrenMemo = useMemo(() => children, [children])\n\n  return (\n    <Stack animated={animated} {...props} {...animatedProps}>\n      {childrenMemo}\n    </Stack>\n  )\n}\n"],
   "mappings": ";;AAAA;AACA;AAAA;AAAA;AAgBA;AACA;AAEA;AAEA,MAAM,mBAAmB;AAAA,EACvB,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA;AAAA,EAEd,IAAI;AAAA,IACF,SAAS;AAAA,IACT,YAAY;AAAA;AAAA;AAoBhB,MAAM,YAAY;AAAA,EAChB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,aAAa;AAAA;AAYR,MAAM,gBAAgB,wBAAC;AAAA,EAC5B,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA;AAAA,KACG;AAAA,MACqB;AACxB,QAAM,SAAS,YAAY,MAAM;AAC/B,WAAO,IAAI,SAAS,MAAM;AAAA;AAG5B,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,CAAC,UAAU;AACb,aAAO;AAAA;AAGT,UAAM,aAAa;AACnB,UAAM,YAAiB;AAEvB,eAAW,OAAO,UAAU,MAAM;AAChC,YAAM,UAAU,UAAU,KAAK;AAC/B,YAAM,QAAQ,UAAU,GAAG;AAC3B,YAAM,kBAAkB,OAAO,YAAY;AAAA,QACzC,YAAY,CAAC,GAAG;AAAA,QAChB,aAAa,CAAC,SAAS;AAAA;AAEzB,UAAI,UAAU,MAAM;AAClB,mBAAW,OAAO;AAAA,aACb;AACL,kBAAU,KAAK;AAAA,WACZ,MAAM;AAAA;AAAA;AAAA;AAIb,WAAO,EAAE,cAAc;AAAA,KACtB,CAAC,UAAU;AAEd,4BAA0B,MAAM;AAC9B,QAAI,CAAC,UAAU;AACb;AAAA;AAEF,aAAS,OAAO,QAAQ;AAAA,MACtB,iBAAiB;AAAA,MACjB;AAAA,MACA,SAAS,iBAAiB,OAAO,IAAI;AAAA,OACpC;AAAA,KACF,CAAC,UAAU;AAEd,QAAM,eAAe,QAAQ,MAAM,UAAU,CAAC;AAE9C,SACE,oCAAC,OAAD;AAAA,IAAO;AAAA,OAAwB;AAAA,OAAW;AAAA,KACvC;AAAA,GArDsB;",
   "names": []

package/dist/{views → esm/views}/Stack.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/views/Stack.tsx"],
+  "sources": ["../../../src/views/Stack.tsx"],
   "sourcesContent": ["import { stackDefaultStyles } from '../constants/constants'\nimport { createComponent } from '../createComponent'\nimport { StackProps } from '../types'\n\nexport const Stack = createComponent<StackProps>({\n  defaultProps: {\n    ...stackDefaultStyles,\n    flexDirection: 'column',\n  },\n})\n\n// test types\n// export const YStack = styled(Stack, {\n//   flexDirection: 'column',\n// })\n// // test types\n// const x00 = <Stack missing={0} /> // should err\n// const x0 = <YStack missing={0} /> // should err\n// const x1 = (props: StackProps) => <YStack {...props} />\n// type ys = typeof YStack\n// type ysv = ys extends StaticComponent<any, infer V> ? V : unknown\n"],
   "mappings": "AAAA;AACA;AAGO,MAAM,QAAQ,gBAA4B;AAAA,EAC/C,cAAc;AAAA,OACT;AAAA,IACH,eAAe;AAAA;AAAA;",
   "names": []

package/dist/{views → esm/views}/Text.js

@@ -1,6 +1,6 @@
+import { stylePropsTextOnly, validStyles } from "@tamagui/helpers";
 import { isWeb } from "../constants/platform";
 import { createComponent } from "../createComponent";
-import { stylePropsTextOnly, validStyles } from "../static";
 const ellipseStyle = {
   maxWidth: "100%",
   overflow: "hidden",
@@ -10,7 +10,7 @@ const ellipseStyle = {
 const Text = createComponent({
   isText: true,
   defaultProps: {
-    display: isWeb ? "inline" : "inline-flex",
+    display: isWeb ? "inline" : "flex",
     boxSizing: "border-box",
     fontFamily: "System",
     wordWrap: "break-word"

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/Text.tsx"],
+  "sourcesContent": ["import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\n\nimport { isWeb } from '../constants/platform'\nimport { createComponent } from '../createComponent'\nimport { TextProps } from '../types'\n\nconst ellipseStyle = {\n  maxWidth: '100%',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps>({\n  isText: true,\n  defaultProps: {\n    display: isWeb ? 'inline' : 'flex',\n    boxSizing: 'border-box',\n    fontFamily: 'System',\n    wordWrap: 'break-word',\n  },\n  variants: {\n    numberOfLines: {\n      1: ellipseStyle,\n      // TODO imply fn, test 1, could do types `>1` `<2`\n      '[number]': (lines) => (lines > 1 ? { WebkitLineClamp: 1 } : null),\n    },\n\n    selectable: {\n      true: {\n        userSelect: 'text',\n      },\n      false: {\n        userSelect: 'none',\n      },\n    },\n\n    pressable: {\n      true: {\n        cursor: 'pointer',\n      },\n    },\n\n    ellipse: {\n      true: isWeb\n        ? ellipseStyle\n        : {\n            numberOfLines: 1,\n            lineBreakMode: 'clip',\n          },\n    },\n  },\n  deoptProps: new Set(isWeb ? [] : ['ellipse']),\n  validStyles: {\n    ...validStyles,\n    ...stylePropsTextOnly,\n    ...(isWeb && {\n      userSelect: true,\n      textOverflow: true,\n      whiteSpace: true,\n      wordWrap: true,\n      selectable: true,\n      cursor: true,\n    }),\n  },\n})\n"],
+  "mappings": "AAAA;AAEA;AACA;AAGA,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAAA;AAGP,MAAM,OAAO,gBAA2B;AAAA,EAC7C,QAAQ;AAAA,EACR,cAAc;AAAA,IACZ,SAAS,QAAQ,WAAW;AAAA,IAC5B,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA;AAAA,EAEZ,UAAU;AAAA,IACR,eAAe;AAAA,MACb,GAAG;AAAA,MAEH,YAAY,CAAC,UAAW,QAAQ,IAAI,EAAE,iBAAiB,MAAM;AAAA;AAAA,IAG/D,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA;AAAA,MAEd,OAAO;AAAA,QACL,YAAY;AAAA;AAAA;AAAA,IAIhB,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ;AAAA;AAAA;AAAA,IAIZ,SAAS;AAAA,MACP,MAAM,QACF,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA;AAAA;AAAA;AAAA,EAIzB,YAAY,IAAI,IAAI,QAAQ,KAAK,CAAC;AAAA,EAClC,aAAa;AAAA,OACR;AAAA,OACA;AAAA,OACC,SAAS;AAAA,MACX,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/views/TextAncestorContext.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var _a, _b;
+import React, { createContext } from "react";
+import { rnw } from "../constants/rnw";
+const FallbackNativeContext = createContext(false);
+const TextAncestorContext = (_b = (_a = rnw) == null ? void 0 : _a.TextAncestorContext) != null ? _b : FallbackNativeContext;
+const TextAncestorProvider = /* @__PURE__ */ __name((props) => {
+  return /* @__PURE__ */ React.createElement(TextAncestorContext.Provider, {
+    value: false
+  }, props.children);
+}, "TextAncestorProvider");
+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 React, { createContext } from 'react'\n\nimport { rnw } from '../constants/rnw'\n\nexport const FallbackNativeContext = createContext(false)\n\nexport const TextAncestorContext = rnw?.TextAncestorContext ?? FallbackNativeContext\n\nexport const TextAncestorProvider = (props) => {\n  return <TextAncestorContext.Provider value={false}>{props.children}</TextAncestorContext.Provider>\n}\n"],
+  "mappings": ";;AAAA;AAAA;AAEA;AAEO,MAAM,wBAAwB,cAAc;AAE5C,MAAM,sBAAsB,uCAAK,wBAAL,YAA4B;AAExD,MAAM,uBAAuB,wBAAC,UAAU;AAC7C,SAAO,oCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KAAQ,MAAM;AAAA,GADxB;",
+  "names": []
+}

package/dist/{views → esm/views}/Theme.js

@@ -2,28 +2,30 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import React, { useContext, useState } from "react";
 import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
-import { getThemeParentClassName } from "../createTamagui";
+import { getThemeParentClassName } from "../helpers/getThemeParentClassName";
 import { useConstant } from "../hooks/useConstant";
 import { ThemeContext } from "./ThemeContext";
 import { ThemeManager, ThemeManagerContext } from "./ThemeManagerContext";
 const Theme = /* @__PURE__ */ __name((props) => {
+  var _a, _b;
   const parent = useContext(ThemeManagerContext);
   const themes = useContext(ThemeContext);
   const [parentName, setParentName] = useState(parent.name || "light");
   if (!themes) {
-    console.warn("no themes???", props);
+    console.warn("Error, no themes in context", props);
     return props.children;
   }
-  const name = props.name;
-  const activeName = !name ? null : name in themes ? name : `${name}-${parentName}`;
-  const theme = activeName ? themes[activeName] : null;
+  const nextNameParent = `${props.name}-${parentName}`;
+  const nextNameParentParent = `${props.name}-${parent.parentName}`;
+  const name = !props.name ? null : props.name in themes ? props.name : nextNameParent in themes ? nextNameParent : nextNameParentParent in themes ? nextNameParentParent : null;
+  const theme = name ? themes[name] : null;
   const themeManager = useConstant(() => {
     if (!theme) {
       return null;
     }
     const manager = new ThemeManager();
     if (name) {
-      manager.setActiveTheme(name, themes[name]);
+      manager.setActiveTheme({ name, theme: themes[name], parentName });
     }
     return manager;
   });
@@ -31,14 +33,16 @@ const Theme = /* @__PURE__ */ __name((props) => {
     if (!themeManager) {
       return;
     }
-    themeManager.setActiveTheme(activeName, theme);
+    if (name) {
+      themeManager.setActiveTheme({ name, theme, parentName });
+    }
     return parent.onChangeTheme((next) => {
       if (next) {
-        themeManager.setActiveTheme(next, themes[next]);
+        themeManager.setActiveTheme({ name: next, theme: themes[next], parentName });
         setParentName(next);
       }
     });
-  }, [themes, activeName]);
+  }, [themes, name, parentName]);
   if (!name || !theme) {
     return props.children;
   }
@@ -49,11 +53,13 @@ const Theme = /* @__PURE__ */ __name((props) => {
     if (props.disableThemeClass) {
       return contents;
     }
-    const color = themes[name]?.["color"]?.["variable"];
-    return /* @__PURE__ */ React.createElement("div", {
-      className: getThemeParentClassName(name),
-      style: { display: "contents", color }
-    }, contents);
+    if (name) {
+      const color = (_b = (_a = themes[name]) == null ? void 0 : _a["color"]) == null ? void 0 : _b["variable"];
+      return /* @__PURE__ */ React.createElement("div", {
+        className: getThemeParentClassName(props.name),
+        style: { display: "contents", color }
+      }, contents);
+    }
   }
   return contents;
 }, "Theme");

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/Theme.tsx"],
+  "sourcesContent": ["import React, { useContext, useState } from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getThemeParentClassName } from '../helpers/getThemeParentClassName'\nimport { useConstant } from '../hooks/useConstant'\nimport { ThemeName } from '../types'\nimport { ThemeContext } from './ThemeContext'\nimport { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'\n\nexport type ThemeProps = {\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  children?: any\n}\n\nexport const Theme = (props: ThemeProps) => {\n  const parent = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext)\n  const [parentName, setParentName] = useState(parent.name || 'light')\n  if (!themes) {\n    console.warn('Error, no themes in context', props)\n    return props.children\n  }\n\n  const nextNameParent = `${props.name}-${parentName}`\n  const nextNameParentParent = `${props.name}-${parent.parentName}`\n  const name = !props.name\n    ? null\n    : props.name in themes\n    ? props.name\n    : nextNameParent in themes\n    ? nextNameParent\n    : nextNameParentParent in themes\n    ? nextNameParentParent\n    : null\n  const theme = name ? themes[name] : null\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!theme) {\n      return null\n    }\n    const manager = new ThemeManager()\n    if (name) {\n      manager.setActiveTheme({ name, theme: themes[name], parentName })\n    }\n    return manager\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    if (!themeManager) {\n      return\n    }\n    if (name) {\n      themeManager.setActiveTheme({ name, theme, parentName })\n    }\n    return parent.onChangeTheme((next) => {\n      if (next) {\n        themeManager.setActiveTheme({ name: next, theme: themes[next], parentName })\n        setParentName(next)\n      }\n    })\n  }, [themes, name, parentName])\n\n  if (!name || !theme) {\n    return props.children\n  }\n\n  const contents = themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {props.children}\n    </ThemeManagerContext.Provider>\n  ) : (\n    props.children\n  )\n\n  if (isWeb) {\n    if (props.disableThemeClass) {\n      return contents\n    }\n    if (name) {\n      const color = themes[name]?.['color']?.['variable']\n      return (\n        <div\n          className={getThemeParentClassName(props.name)}\n          // in order to provide currentColor, set color by default\n          style={{ display: 'contents', color }}\n        >\n          {contents}\n        </div>\n      )\n    }\n  }\n\n  return contents\n}\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAQO,MAAM,QAAQ,wBAAC,UAAsB;AAf5C;AAgBE,QAAM,SAAS,WAAW;AAC1B,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO,QAAQ;AAC5D,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,+BAA+B;AAC5C,WAAO,MAAM;AAAA;AAGf,QAAM,iBAAiB,GAAG,MAAM,QAAQ;AACxC,QAAM,uBAAuB,GAAG,MAAM,QAAQ,OAAO;AACrD,QAAM,OAAO,CAAC,MAAM,OAChB,OACA,MAAM,QAAQ,SACd,MAAM,OACN,kBAAkB,SAClB,iBACA,wBAAwB,SACxB,uBACA;AACJ,QAAM,QAAQ,OAAO,OAAO,QAAQ;AACpC,QAAM,eAAe,YAAiC,MAAM;AAC1D,QAAI,CAAC,OAAO;AACV,aAAO;AAAA;AAET,UAAM,UAAU,IAAI;AACpB,QAAI,MAAM;AACR,cAAQ,eAAe,EAAE,MAAM,OAAO,OAAO,OAAO;AAAA;AAEtD,WAAO;AAAA;AAGT,4BAA0B,MAAM;AAC9B,QAAI,CAAC,cAAc;AACjB;AAAA;AAEF,QAAI,MAAM;AACR,mBAAa,eAAe,EAAE,MAAM,OAAO;AAAA;AAE7C,WAAO,OAAO,cAAc,CAAC,SAAS;AACpC,UAAI,MAAM;AACR,qBAAa,eAAe,EAAE,MAAM,MAAM,OAAO,OAAO,OAAO;AAC/D,sBAAc;AAAA;AAAA;AAAA,KAGjB,CAAC,QAAQ,MAAM;AAElB,MAAI,CAAC,QAAQ,CAAC,OAAO;AACnB,WAAO,MAAM;AAAA;AAGf,QAAM,WAAW,eACf,oCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KAClC,MAAM,YAGT,MAAM;AAGR,MAAI,OAAO;AACT,QAAI,MAAM,mBAAmB;AAC3B,aAAO;AAAA;AAET,QAAI,MAAM;AACR,YAAM,QAAQ,mBAAO,UAAP,mBAAe,aAAf,mBAA0B;AACxC,aACE,oCAAC,OAAD;AAAA,QACE,WAAW,wBAAwB,MAAM;AAAA,QAEzC,OAAO,EAAE,SAAS,YAAY;AAAA,SAE7B;AAAA;AAAA;AAMT,SAAO;AAAA,GA7EY;",
+  "names": []
+}

package/dist/{views → esm/views}/ThemeContext.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/views/ThemeContext.tsx"],
+  "sources": ["../../../src/views/ThemeContext.tsx"],
   "sourcesContent": ["import { createContext } from 'react'\n\nimport { Themes } from '../types'\n\nexport const ThemeContext = createContext<Themes>(null as any)\n"],
   "mappings": "AAAA;AAIO,MAAM,eAAe,cAAsB;",
   "names": []

package/dist/{views → esm/views}/ThemeInverse.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/views/ThemeInverse.tsx"],
+  "sources": ["../../../src/views/ThemeInverse.tsx"],
   "sourcesContent": ["import React from 'react'\n\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 = inversions[themeName] || inversions[defaultTheme] || null\n  return <Theme name={name}>{props.children}</Theme>\n}\n"],
   "mappings": ";;AAAA;AAEA;AACA;AAIA,IAAI,aAA2B;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AAAA;AAGD,4BAA4B,MAAoB;AACrD,eAAa;AAAA;AADC;AAIT,MAAM,eAAe,wBAAC,UAA6B;AACxD,QAAM,YAAY;AAClB,QAAM,eAAe;AACrB,QAAM,OAAO,WAAW,cAAc,WAAW,iBAAiB;AAClE,SAAO,oCAAC,OAAD;AAAA,IAAO;AAAA,KAAa,MAAM;AAAA,GAJP;",
   "names": []