@tamagui/core 1.0.0-alpha.7 → 1.0.0-beta.147

package/dist/jsx/helpers/validate.js

@@ -0,0 +1,62 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const { default: ow } = require("@tamagui/ow/dev-only");
+let Config;
+let Tokens;
+let Font;
+const validateConfig = /* @__PURE__ */ __name((conf) => {
+  if (!conf) {
+    console.warn("no conf?");
+    return;
+  }
+  try {
+    ow(conf, Config);
+  } catch (err) {
+    console.warn("Given config:\n", JSON.stringify(conf, null, 2), err);
+  }
+}, "validateConfig");
+const validateTokens = /* @__PURE__ */ __name((tokens) => {
+  try {
+    ow(tokens, Tokens);
+  } catch (err) {
+    console.warn("Given tokens:\n", JSON.stringify(tokens, null, 2), err);
+  }
+}, "validateTokens");
+const validateFont = /* @__PURE__ */ __name((font) => {
+  try {
+    ow(font, Font);
+  } catch (err) {
+    console.warn("Given font:\n", JSON.stringify(font, null, 2), err);
+  }
+}, "validateFont");
+if (process.env.NODE_ENV === "development") {
+  Config = ow.object.exactShape({
+    defaultTheme: ow.optional.string,
+    disableRootThemeClass: ow.optional.boolean,
+    shorthands: ow.optional.object.valuesOfType(ow.string),
+    themes: ow.object.valuesOfType(ow.object),
+    tokens: ow.object.valuesOfType(ow.object),
+    media: ow.object.valuesOfType(ow.object),
+    animations: ow.object.valuesOfType(ow.object)
+  });
+  Font = ow.object.exactShape({
+    family: ow.string,
+    size: ow.object.nonEmpty.valuesOfType(ow.number),
+    lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
+    weight: ow.object.nonEmpty.valuesOfType(ow.string),
+    letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number)
+  });
+  Tokens = ow.object.exactShape({
+    font: ow.object.valuesOfType(Font),
+    size: ow.object.nonEmpty.valuesOfType(ow.number),
+    space: ow.object.nonEmpty.valuesOfType(ow.number),
+    zIndex: ow.object.nonEmpty.valuesOfType(ow.number),
+    radius: ow.object.nonEmpty.valuesOfType(ow.number),
+    color: ow.object.nonEmpty.valuesOfType(ow.string)
+  });
+}
+export {
+  validateConfig,
+  validateFont,
+  validateTokens
+};

package/dist/jsx/helpers/withStaticProperties.js

@@ -0,0 +1,9 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const withStaticProperties = /* @__PURE__ */ __name(function(component, staticProps) {
+  Object.assign(component, staticProps);
+  return component;
+}, "withStaticProperties");
+export {
+  withStaticProperties
+};

package/dist/jsx/helpers/wrapThemeManagerContext.js

@@ -0,0 +1,10 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { ThemeManagerContext } from "../ThemeManager";
+function wrapThemeManagerContext(children, themeManager) {
+  return themeManager ? <ThemeManagerContext.Provider value={themeManager}>{children}</ThemeManagerContext.Provider> : children;
+}
+__name(wrapThemeManagerContext, "wrapThemeManagerContext");
+export {
+  wrapThemeManagerContext
+};

package/dist/jsx/hooks/useConstant.js

@@ -0,0 +1,14 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useRef } from "react";
+function useConstant(fn) {
+  const ref = useRef();
+  if (!ref.current) {
+    ref.current = { v: fn() };
+  }
+  return ref.current.v;
+}
+__name(useConstant, "useConstant");
+export {
+  useConstant
+};

package/dist/jsx/hooks/useFeatures.js

@@ -0,0 +1,167 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useIsomorphicLayoutEffect } from "../constants/platform";
+import { getSubStyle } from "../helpers/getSplitStyles";
+import { addMediaQueryListener, mediaState, removeMediaQueryListener } from "./useMedia";
+const createDefinition = /* @__PURE__ */ __name(({
+  Component,
+  propNames
+}) => ({
+  isEnabled: (props) => propNames.some((name) => !!props[name]),
+  Component
+}), "createDefinition");
+let featureDefinitions = null;
+const useFeatures = /* @__PURE__ */ __name((props, utils) => {
+  if (!featureDefinitions) {
+    featureDefinitions = loadFeatures();
+  }
+  const features = [];
+  for (const name in featureDefinitions) {
+    const { isEnabled, Component } = featureDefinitions[name];
+    if (isEnabled(props) && Component) {
+      features.push(<Component key={name} {...props} _utils={utils} />);
+    }
+  }
+  return features;
+}, "useFeatures");
+function loadFeatures() {
+  return {
+    animation: loadAnimationFeature(),
+    mediaQuery: loadMediaQueryFeature()
+  };
+}
+__name(loadFeatures, "loadFeatures");
+function loadAnimationFeature() {
+  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({ isEntering, exitVariant, enterVariant } = {}) {
+          var _a, _b, _c, _d;
+          const style = inStyle || {};
+          const enterStyle = isEntering === true || state.mounted === false ? enterVariant && ((_a = staticConfig.variants) == null ? void 0 : _a[enterVariant]["true"]) ? getSubStyle((_b = staticConfig.variants) == null ? void 0 : _b[enterVariant]["true"], staticConfig, theme, props, state) || pseudos.enterStyle : pseudos.enterStyle : null;
+          const exitStyle = isEntering === false ? exitVariant && ((_c = staticConfig.variants) == null ? void 0 : _c[exitVariant]["true"]) ? getSubStyle((_d = staticConfig.variants) == null ? void 0 : _d[exitVariant]["true"], staticConfig, theme, props, state) || 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"]
+  });
+}
+__name(loadAnimationFeature, "loadAnimationFeature");
+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];
+        }
+      }
+    }
+  }
+}
+__name(ensureBaseHasDefaults, "ensureBaseHasDefaults");
+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);
+    }
+  }
+}
+__name(merge, "merge");
+function loadMediaQueryFeature() {
+  const mediaPropNames = Object.keys(mediaState);
+  return createDefinition({
+    Component: (props) => {
+      const keys = mediaPropNames.filter((x) => x in props);
+      useIsomorphicLayoutEffect(() => {
+        for (const key of keys) {
+          addMediaQueryListener(key, props._utils.forceUpdate);
+        }
+        return () => {
+          for (const key of keys) {
+            removeMediaQueryListener(key, props._utils.forceUpdate);
+          }
+        };
+      }, [keys.join(",")]);
+      return null;
+    },
+    propNames: mediaPropNames
+  });
+}
+__name(loadMediaQueryFeature, "loadMediaQueryFeature");
+export {
+  useFeatures
+};

package/dist/jsx/hooks/useIsMounted.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useIsomorphicLayoutEffect } from "@tamagui/core";
+import { useRef } from "react";
+function useIsMounted() {
+  const isMounted = useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  return isMounted;
+}
+__name(useIsMounted, "useIsMounted");
+export {
+  useIsMounted
+};

package/dist/jsx/hooks/useIsTouchDevice.js

@@ -0,0 +1,16 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useEffect, useState } from "react";
+import { isTouchDevice } from "../constants/platform";
+const useIsTouchDevice = /* @__PURE__ */ __name(() => {
+  const [touchOnly, setTouchOnly] = useState(false);
+  if (isTouchDevice) {
+    useEffect(() => {
+      setTouchOnly(true);
+    }, []);
+  }
+  return touchOnly;
+}, "useIsTouchDevice");
+export {
+  useIsTouchDevice
+};

package/dist/jsx/hooks/useMedia.js

@@ -0,0 +1,155 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useForceUpdate } from "@tamagui/use-force-update";
+import { useRef } from "react";
+import { useIsomorphicLayoutEffect } from "../constants/platform";
+import { matchMedia } from "../helpers/matchMedia";
+import { useConstant } from "./useConstant";
+const mediaState = {};
+const mediaQueryListeners = {};
+const addMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
+  mediaQueryListeners[key] = mediaQueryListeners[key] || /* @__PURE__ */ new Set();
+  mediaQueryListeners[key].add(cb);
+}, "addMediaQueryListener");
+const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
+  var _a;
+  (_a = mediaQueryListeners[key]) == null ? void 0 : _a.delete(cb);
+}, "removeMediaQueryListener");
+let hasConfigured = false;
+const mediaQueryConfig = {};
+const getMedia = /* @__PURE__ */ __name(() => {
+  return mediaState;
+}, "getMedia");
+const configureMedia = /* @__PURE__ */ __name(({
+  queries,
+  defaultActive = ["sm", "xs"]
+} = {}) => {
+  var _a;
+  if (hasConfigured) {
+    console.warn(`Already configured mediaQueries once (you may have called getMedia() before configureMedia())`);
+  }
+  if (queries) {
+    Object.assign(mediaQueryConfig, queries);
+    hasConfigured = true;
+  }
+  for (const key in queries) {
+    const str = mediaObjectToString(queries[key]);
+    const propKey = `$${key}`;
+    try {
+      let update = function() {
+        const next = !!getMatch().matches;
+        if (next === mediaState[propKey])
+          return;
+        mediaState[propKey] = next;
+        const listeners = mediaQueryListeners[propKey];
+        if (listeners == null ? void 0 : listeners.size) {
+          for (const cb of [...listeners]) {
+            cb();
+          }
+        }
+      };
+      __name(update, "update");
+      const getMatch = /* @__PURE__ */ __name(() => matchMedia(str), "getMatch");
+      const match = getMatch();
+      if (!match || typeof match.addListener !== "function") {
+        throw new Error("\u26A0\uFE0F No match (seeing this in RN sometimes)");
+      }
+      mediaState[propKey] = !!match.matches;
+      match.addListener(update);
+      update();
+    } catch (err) {
+      console.error("Error running media query", str, err.message, err.stack);
+      const isDefaultActive = (_a = defaultActive == null ? void 0 : defaultActive.includes(key)) != null ? _a : true;
+      mediaState[propKey] = isDefaultActive;
+    }
+  }
+}, "configureMedia");
+const useMedia = /* @__PURE__ */ __name(() => {
+  const forceUpdate = useForceUpdate();
+  const state = useRef();
+  if (!state.current) {
+    state.current = {
+      selections: {},
+      nextSelections: {},
+      isUnmounted: false,
+      isRendering: true
+    };
+  }
+  state.current.isRendering = true;
+  useIsomorphicLayoutEffect(() => {
+    const st = state.current;
+    st.isRendering = false;
+    for (const key in st.selections) {
+      if (!(key in st.nextSelections)) {
+        removeMediaQueryListener(key, forceUpdate);
+      }
+    }
+    for (const key in st.nextSelections) {
+      if (!(key in st.selections)) {
+        addMediaQueryListener(key, forceUpdate);
+      }
+    }
+  });
+  useIsomorphicLayoutEffect(() => {
+    return () => {
+      const st = state.current;
+      st.isUnmounted = true;
+      const allKeys = {
+        ...st.selections,
+        ...st.nextSelections
+      };
+      for (const key in allKeys) {
+        removeMediaQueryListener(key, forceUpdate);
+      }
+    };
+  }, []);
+  return useConstant(() => {
+    const st = state.current;
+    return new Proxy(mediaState, {
+      get(target, key) {
+        if (!(key in mediaState)) {
+          return Reflect.get(target, key);
+        }
+        if (!st.isUnmounted) {
+          if (st.isRendering) {
+            st.nextSelections[key] = true;
+          }
+        }
+        if (key in mediaState) {
+          return mediaState[key];
+        }
+        return Reflect.get(mediaState, key);
+      }
+    });
+  });
+}, "useMedia");
+function camelToHyphen(str) {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();
+}
+__name(camelToHyphen, "camelToHyphen");
+function mediaObjectToString(query) {
+  if (typeof query === "string") {
+    return query;
+  }
+  return Object.entries(query).map(([feature, value]) => {
+    feature = camelToHyphen(feature);
+    if (typeof value === "string") {
+      return `(${feature}: ${value})`;
+    }
+    if (typeof value === "number" && /[height|width]$/.test(feature)) {
+      value = `${value}px`;
+    }
+    return `(${feature}: ${value})`;
+  }).join(" and ");
+}
+__name(mediaObjectToString, "mediaObjectToString");
+export {
+  addMediaQueryListener,
+  configureMedia,
+  getMedia,
+  mediaObjectToString,
+  mediaQueryConfig,
+  mediaState,
+  removeMediaQueryListener,
+  useMedia
+};

package/dist/jsx/hooks/usePressable.js

@@ -0,0 +1,13 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var _a, _b;
+import { Pressable } from "react-native";
+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;
+  return [pressableProps, style];
+}, "usePressable");
+export {
+  usePressable
+};

package/dist/jsx/hooks/useTheme.js

@@ -0,0 +1,171 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useForceUpdate } from "@tamagui/use-force-update";
+import { useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { getConfig } from "../conf";
+import { useIsomorphicLayoutEffect } from "../constants/platform";
+import { areEqualSets } from "../helpers/areEqualSets";
+import { ThemeContext } from "../ThemeContext";
+import { ThemeManager, ThemeManagerContext, emptyManager } from "../ThemeManager";
+import { useConstant } from "./useConstant";
+const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceUpdate) => {
+  const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(themeName, componentName, props, forceUpdate);
+  if (process.env.NODE_ENV === "development") {
+    if ((props == null ? void 0 : props["debug"]) === "verbose") {
+      console.log("  \xBB useTheme", { themeName, componentName, name, className });
+    }
+  }
+  const state = useRef();
+  if (!state.current) {
+    state.current = {
+      uuid: {},
+      keys: /* @__PURE__ */ new Set(),
+      isRendering: true
+    };
+  }
+  state.current.isRendering = true;
+  useIsomorphicLayoutEffect(() => {
+    const st = state.current;
+    st.isRendering = false;
+    const cur = themeManager == null ? void 0 : themeManager.keys.get(st.uuid);
+    if (!cur || !areEqualSets(st.keys, cur)) {
+      themeManager == null ? void 0 : themeManager.track(st.uuid, st.keys);
+    }
+  });
+  return useMemo(() => {
+    if (!theme) {
+      if (process.env.NODE_ENV === "development") {
+        console.warn("No theme", { themeName, theme, componentName, className });
+      }
+      return themes[getConfig().defaultTheme || "light"];
+    }
+    return new Proxy(theme, {
+      has(_, key) {
+        if (typeof key === "string") {
+          if (key[0] === "$") {
+            key = key.slice(1);
+          }
+        }
+        return Reflect.has(theme, key);
+      },
+      get(_, key) {
+        if (!name || key === "__proto__" || typeof key === "symbol") {
+          if (key === GetThemeManager) {
+            if (!didChangeTheme) {
+              return null;
+            }
+            return themeManager;
+          }
+          return Reflect.get(_, key);
+        }
+        if (process.env.NODE_ENV === "development") {
+          if (key === "__state") {
+            return state.current;
+          }
+        }
+        if (key === "name") {
+          return name;
+        }
+        if (key === "className") {
+          return className;
+        }
+        if (!themeManager) {
+          console.error("No themeManager");
+          return;
+        }
+        if (typeof key === "string") {
+          if (key[0] === "$") {
+            key = key.slice(1);
+          }
+          const val = themeManager.getValue(key);
+          if (val) {
+            if (state.current.isRendering) {
+              state.current.keys.add(key);
+              if (process.env.NODE_ENV === "development") {
+                if ((props == null ? void 0 : props["debug"]) === "verbose") {
+                  console.log("  \xBB tracking theme key", key);
+                }
+              }
+            }
+            return val;
+          }
+          if (process.env.NODE_ENV === "development") {
+            console.log(`No theme value "${String(key)}" in ${name}`);
+          }
+        }
+        return Reflect.get(_, key);
+      }
+    });
+  }, [name, theme, className, didChangeTheme]);
+}, "useTheme");
+const GetThemeManager = Symbol("GetThemeManager");
+const getThemeManagerIfChanged = /* @__PURE__ */ __name((theme) => {
+  return theme == null ? void 0 : theme[GetThemeManager];
+}, "getThemeManagerIfChanged");
+const useThemeName = /* @__PURE__ */ __name((opts) => {
+  const parent = useContext(ThemeManagerContext);
+  const [name, setName] = useState((parent == null ? void 0 : parent.name) || "");
+  useIsomorphicLayoutEffect(() => {
+    if (!parent)
+      return;
+    return parent.onChangeTheme((next, manager) => {
+      const name2 = (opts == null ? void 0 : opts.parent) ? manager.parentName || next : next;
+      if (!name2)
+        return;
+      setName(name2);
+    });
+  }, [parent]);
+  return name;
+}, "useThemeName");
+const useDefaultThemeName = /* @__PURE__ */ __name(() => {
+  var _a;
+  return (_a = useContext(ThemeContext)) == null ? void 0 : _a.defaultTheme;
+}, "useDefaultThemeName");
+const useChangeThemeEffect = /* @__PURE__ */ __name((name, componentName, props, forceUpdateProp) => {
+  const debug = props && props["debug"];
+  const parentManager = useContext(ThemeManagerContext) || emptyManager;
+  const { themes } = useContext(ThemeContext);
+  const next = parentManager.getNextTheme({ name, componentName, themes }, props);
+  const forceUpdate = forceUpdateProp || useForceUpdate();
+  const themeManager = useConstant(() => {
+    if (!next) {
+      return null;
+    }
+    return new ThemeManager(next.name, next.theme, parentManager);
+  });
+  if (typeof document !== "undefined") {
+    useLayoutEffect(() => {
+      if (!themeManager)
+        return;
+      if (next == null ? void 0 : next.name) {
+        themeManager.update(next);
+      }
+      return parentManager.onChangeTheme(() => {
+        const next2 = parentManager.getNextTheme({ name, componentName, themes }, debug);
+        if (!next2)
+          return;
+        if (themeManager.update(next2)) {
+          forceUpdate();
+        }
+      });
+    }, [themes, name, componentName, debug, next == null ? void 0 : next.name]);
+  }
+  const didChangeTheme = next && parentManager && next.name !== parentManager.fullName;
+  return {
+    ...parentManager && {
+      name: parentManager.name,
+      theme: parentManager.theme
+    },
+    ...next,
+    didChangeTheme,
+    themes,
+    themeManager
+  };
+}, "useChangeThemeEffect");
+export {
+  getThemeManagerIfChanged,
+  useChangeThemeEffect,
+  useDefaultThemeName,
+  useTheme,
+  useThemeName
+};

package/dist/jsx/hooks/useUnmountEffect.js

@@ -0,0 +1,10 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useEffect } from "react";
+function useUnmountEffect(callback) {
+  return useEffect(() => () => callback(), []);
+}
+__name(useUnmountEffect, "useUnmountEffect");
+export {
+  useUnmountEffect
+};