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

package/dist/jsx/helpers/matchMedia.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const matchMedia = typeof window !== "undefined" && window.matchMedia || /* @__PURE__ */ __name(function matchMediaFallback(query) {
+  return {
+    addListener() {
+      if (process.env.NODE_ENV === "development" && !process.env.IS_STATIC && process.env.TAMAGUI_TARGET !== "web") {
+        console.log("warning: matchMedia not loading! Is native picking up .native.js files?");
+      }
+    },
+    removeListener() {
+    },
+    matches: false
+  };
+}, "matchMediaFallback");
+export {
+  matchMedia
+};

package/dist/jsx/helpers/matchMedia.native.js

@@ -0,0 +1,8 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import MediaQueryList from "@expo/match-media/build/MediaQueryList.js";
+const matchMedia = /* @__PURE__ */ __name((media) => new MediaQueryList(media), "matchMedia");
+globalThis["matchMedia"] = matchMedia;
+export {
+  matchMedia
+};

package/dist/jsx/helpers/proxyThemeVariables.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function proxyThemeVariables(obj) {
+  return new Proxy(obj, {
+    has(target, key) {
+      return Reflect.has(target, removeStarting$(key));
+    },
+    get(target, key) {
+      return Reflect.get(target, removeStarting$(key));
+    }
+  });
+}
+__name(proxyThemeVariables, "proxyThemeVariables");
+const removeStarting$ = /* @__PURE__ */ __name((str) => typeof str === "string" && str[0] === "$" ? str.slice(1) : str, "removeStarting$");
+export {
+  proxyThemeVariables
+};

package/dist/jsx/helpers/themeable.js

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import React, { forwardRef } from "react";
+import { Theme } from "../views/Theme";
+import { ThemeInverse } from "../views/ThemeInverse";
+function themeable(component, opts) {
+  const withThemeComponent = forwardRef(/* @__PURE__ */ __name(function WithTheme({ themeInverse, theme, ...rest }, ref) {
+    const element = React.createElement(component, { ...rest, ref });
+    if (themeInverse) {
+      return <ThemeInverse>{element}</ThemeInverse>;
+    }
+    if (theme || opts) {
+      return <Theme componentName={opts == null ? void 0 : opts.componentName} name={theme || null}>{element}</Theme>;
+    }
+    return element;
+  }, "WithTheme"));
+  const withTheme = withThemeComponent;
+  withTheme.displayName = `Themed(${(component == null ? void 0 : component.displayName) || (component == null ? void 0 : component.name) || "Anonymous"})`;
+  return withTheme;
+}
+__name(themeable, "themeable");
+export {
+  themeable
+};

package/dist/jsx/helpers/validate.js

@@ -0,0 +1,75 @@
+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 FontRequired;
+let FontOptional;
+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 {
+    const { style, transform, color, ...required } = font;
+    ow(required, FontRequired);
+    ow({ style, transform, color }, FontOptional);
+  } catch (err) {
+    console.warn("Given font:\n", JSON.stringify(font, null, 2), err);
+  }
+}, "validateFont");
+if (process.env.NODE_ENV === "development") {
+  const fontReq = {
+    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)
+  };
+  const fontOpt = {
+    style: ow.optional.object.valuesOfType(ow.string),
+    transform: ow.optional.object.valuesOfType(ow.string),
+    color: ow.optional.object.valuesOfType(ow.string)
+  };
+  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),
+    fonts: ow.object.valuesOfType(ow.object.partialShape({
+      ...fontReq,
+      ...fontOpt
+    }))
+  });
+  FontRequired = ow.object.exactShape(fontReq);
+  FontOptional = ow.object.partialShape(fontOpt);
+  Tokens = ow.object.exactShape({
+    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,159 @@
+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)) {
+        console.log("lsiten", key);
+        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[0] !== "$") {
+          key = `$${key}`;
+        }
+        if (!(key in mediaState)) {
+          return Reflect.get(target, key);
+        }
+        if (!st.isUnmounted) {
+          if (st.isRendering) {
+            st.nextSelections[key] = true;
+          }
+        }
+        if (key in mediaState) {
+          return mediaState[key];
+        }
+        return Reflect.get(mediaState, key);
+      }
+    });
+  });
+}, "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
+};