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

package/dist/jsx/hooks/useTheme.js

@@ -0,0 +1,177 @@
+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 (process.env.NODE_ENV === "development") {
+              if (props["debug"]) {
+                console.log("did change", { themeName, didChangeTheme, name, componentName }, themeManager == null ? void 0 : themeManager.parentName);
+              }
+            }
+            if (!didChangeTheme) {
+              return null;
+            }
+            return themeManager;
+          }
+          return Reflect.get(_, key);
+        }
+        if (typeof key !== "string" || key === "$typeof") {
+          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 (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
+};

package/dist/jsx/index.js

@@ -0,0 +1,51 @@
+export * from "./Tamagui";
+export * from "./createComponent";
+export * from "./createShorthands";
+export * from "./createTheme";
+export * from "./createTamagui";
+export * from "./createFont";
+import { createTokens } from "./createTokens";
+export * from "./createVariable";
+export * from "./styled";
+export * from "./types";
+import { RNWTextProps, RNWViewProps } from "./types-rnw";
+import { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from "./conf";
+export * from "./constants/constants";
+export * from "./constants/platform";
+export * from "./constants/rnw";
+export * from "./helpers/getExpandedShorthands";
+export * from "./helpers/getSize";
+export * from "./helpers/getSplitStyles";
+export * from "./helpers/getStylesAtomic";
+export * from "./helpers/isObj";
+export * from "./helpers/isTamaguiElement";
+export * from "./helpers/matchMedia";
+export * from "./helpers/themeable";
+export * from "./helpers/withStaticProperties";
+export * from "./contexts/ButtonInsideButtonContext";
+export * from "./hooks/useIsTouchDevice";
+export * from "./hooks/useConstant";
+export * from "./hooks/usePressable";
+export * from "./hooks/useMedia";
+export * from "./hooks/useTheme";
+export * from "./hooks/useIsMounted";
+export * from "./hooks/useUnmountEffect";
+export * from "@tamagui/use-force-update";
+export * from "./views/Stack";
+export * from "./views/Text";
+export * from "./views/Theme";
+export * from "./views/ThemeReset";
+export * from "./views/ThemeInverse";
+export * from "./views/ThemeProvider";
+export * from "./views/TextAncestorContext";
+export * from "@tamagui/helpers";
+export {
+  RNWTextProps,
+  RNWViewProps,
+  createTokens,
+  getConfig,
+  getHasConfigured,
+  getThemes,
+  getTokens,
+  onConfiguredOnce
+};

package/dist/jsx/static/postProcessStyles.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getSplitStyles } from "../helpers/getSplitStyles";
+const postProcessStyles = /* @__PURE__ */ __name((inStyles, staticConfig, theme) => {
+  const { style, viewProps, pseudos, classNames } = getSplitStyles(inStyles, staticConfig, theme);
+  const next = {};
+  for (const s of style) {
+    if (!s)
+      continue;
+    Object.assign(next, s);
+  }
+  Object.assign(next, pseudos);
+  return { style: next, viewProps, classNames };
+}, "postProcessStyles");
+export {
+  postProcessStyles
+};

package/dist/jsx/static.js

@@ -0,0 +1,16 @@
+export * from "./styled";
+export * from "./createComponent";
+export * from "./createFont";
+export * from "./createTokens";
+export * from "./createTamagui";
+export * from "./createVariable";
+export * from "./constants/constants";
+export * from "./hooks/useMedia";
+export * from "./hooks/useTheme";
+export * from "./helpers/isObj";
+export * from "./helpers/getStylesAtomic";
+export * from "./helpers/proxyThemeVariables";
+export * from "./helpers/getSplitStyles";
+export * from "@tamagui/helpers";
+export * from "./constants/rnw";
+export * from "./types";

package/dist/jsx/styled.js

@@ -0,0 +1,44 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Image, Text, TextInput } from "react-native";
+import { createComponent } from "./createComponent";
+import { RNComponents } from "./helpers/RNComponents";
+function styled(Component, options, staticExtractionOptions) {
+  const staticConfigProps = (() => {
+    if (options) {
+      const { variants, name, defaultVariants, ...defaultProps } = options;
+      if (defaultVariants) {
+        Object.assign(defaultProps, defaultVariants);
+      }
+      const isReactNativeWeb = "staticConfig" in Component ? Component.staticConfig.isReactNativeWeb : RNComponents.has(Component);
+      const isTamagui = !isReactNativeWeb && "staticConfig" in Component;
+      const Comp = Component;
+      const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false));
+      const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false));
+      const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false));
+      const conf = {
+        ...staticExtractionOptions,
+        ...!isTamagui && {
+          Component: Comp
+        },
+        isTamagui,
+        variants,
+        defaultProps,
+        defaultVariants,
+        componentName: name,
+        isReactNativeWeb,
+        isInput,
+        isText,
+        isImage
+      };
+      return conf;
+    }
+    return {};
+  })();
+  const component = createComponent(staticConfigProps, Component);
+  return component;
+}
+__name(styled, "styled");
+export {
+  styled
+};

package/dist/jsx/tamagui-base.css

@@ -0,0 +1,10 @@
+.tamagui-absolute-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.reset-appearance {
+  -webkit-appearance: none;
+}

package/dist/jsx/views/Animated.js

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useMemo } from "react";
+import {
+  Animated
+} from "react-native";
+import { useIsomorphicLayoutEffect } from "../constants/platform";
+import { useConstant } from "../hooks/useConstant";
+import { Stack } from "./Stack";
+const defaultAnimation = {
+  from: {
+    opacity: 0,
+    translateY: 12
+  },
+  to: {
+    opacity: 1,
+    translateY: 0
+  }
+};
+const styleKeys = {
+  opacity: true,
+  backgroundColor: true,
+  borderColor: true
+};
+const AnimatedStack = /* @__PURE__ */ __name(({
+  animateState = "in",
+  animation = defaultAnimation,
+  velocity = 6,
+  children,
+  animated,
+  ...props
+}) => {
+  const driver = useConstant(() => {
+    return new Animated.Value(0);
+  });
+  const animatedProps = useMemo(() => {
+    if (!animated) {
+      return null;
+    }
+    const styleProps = {};
+    const transform = [];
+    for (const key in animation.from) {
+      const fromVal = animation.from[key];
+      const toVal = animation.to[key];
+      const interpolatedVal = driver.interpolate({
+        inputRange: [0, 1],
+        outputRange: [fromVal, toVal]
+      });
+      if (styleKeys[key]) {
+        styleProps[key] = interpolatedVal;
+      } else {
+        transform.push({
+          [key]: interpolatedVal
+        });
+      }
+    }
+    return { transform, ...styleProps };
+  }, [animated, animateState]);
+  useIsomorphicLayoutEffect(() => {
+    if (!animated) {
+      return;
+    }
+    Animated.spring(driver, {
+      useNativeDriver: true,
+      velocity,
+      toValue: animateState === "in" ? 1 : 0
+    }).start();
+  }, [animated, animateState]);
+  const childrenMemo = useMemo(() => children, [children]);
+  return <Stack animated={animated} {...props} {...animatedProps}>{childrenMemo}</Stack>;
+}, "AnimatedStack");
+export {
+  AnimatedStack
+};

package/dist/jsx/views/Stack.js

@@ -0,0 +1,12 @@
+import { stackDefaultStyles } from "../constants/constants";
+import { createComponent } from "../createComponent";
+const Stack = createComponent({
+  componentName: "Stack",
+  defaultProps: {
+    ...stackDefaultStyles,
+    flexDirection: "column"
+  }
+});
+export {
+  Stack
+};

package/dist/jsx/views/Text.js

@@ -0,0 +1,61 @@
+import { stylePropsTextOnly, validStyles } from "@tamagui/helpers";
+import { isWeb } from "../constants/platform";
+import { createComponent } from "../createComponent";
+const ellipseStyle = {
+  maxWidth: "100%",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+const Text = createComponent({
+  componentName: "Text",
+  isText: true,
+  defaultProps: {
+    display: isWeb ? "inline" : "flex",
+    boxSizing: "border-box",
+    fontFamily: "System",
+    wordWrap: "break-word"
+  },
+  variants: {
+    numberOfLines: {
+      1: ellipseStyle,
+      ":number": (lines) => lines > 1 ? { WebkitLineClamp: 1 } : null
+    },
+    selectable: {
+      true: {
+        userSelect: "text",
+        cursor: "text"
+      },
+      false: {
+        userSelect: "none"
+      }
+    },
+    pressable: {
+      true: {
+        cursor: "pointer"
+      }
+    },
+    ellipse: {
+      true: isWeb ? ellipseStyle : {
+        numberOfLines: 1,
+        lineBreakMode: "clip"
+      }
+    }
+  },
+  deoptProps: new Set(isWeb ? [] : ["ellipse"]),
+  validStyles: {
+    ...validStyles,
+    ...stylePropsTextOnly,
+    ...isWeb && {
+      userSelect: true,
+      textOverflow: true,
+      whiteSpace: true,
+      wordWrap: true,
+      selectable: true,
+      cursor: true
+    }
+  }
+});
+export {
+  Text
+};

package/dist/jsx/views/TextAncestorContext.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var _a, _b;
+import { 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 <TextAncestorContext.Provider value={false}>{props.children}</TextAncestorContext.Provider>;
+}, "TextAncestorProvider");
+export {
+  FallbackNativeContext,
+  TextAncestorContext,
+  TextAncestorProvider
+};

package/dist/jsx/views/Theme.js

@@ -0,0 +1,31 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import React, { memo, useMemo } from "react";
+import { isWeb } from "../constants/platform";
+import { wrapThemeManagerContext } from "../helpers/wrapThemeManagerContext";
+import { useChangeThemeEffect } from "../hooks/useTheme";
+React["createElement"];
+const Theme = memo(/* @__PURE__ */ __name(function Theme2(props) {
+  var _a, _b;
+  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(props.name, props.componentName, props);
+  if (!themes || !name || !theme) {
+    if (name && !theme && process.env.NODE_ENV === "development") {
+      console.warn(`No theme found by name ${name}`);
+    }
+    return props.children;
+  }
+  const contents = useMemo(() => wrapThemeManagerContext(props.children, themeManager), [props.children, themeManager]);
+  if (isWeb) {
+    return <span className={[
+      `tui_Theme`,
+      ...!props.disableThemeClass ? [props.className, className].filter(Boolean) : []
+    ].join(" ")} style={{
+      display: "contents",
+      color: (_b = (_a = themes[name]) == null ? void 0 : _a.color) == null ? void 0 : _b.toString()
+    }}>{contents}</span>;
+  }
+  return contents;
+}, "Theme"));
+export {
+  Theme
+};

package/dist/jsx/views/ThemeContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const ThemeContext = createContext(null);
+export {
+  ThemeContext
+};

package/dist/jsx/views/ThemeInverse.js

@@ -0,0 +1,22 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useDefaultThemeName, useThemeName } from "../hooks/useTheme";
+import { Theme } from "./Theme";
+let inversions = {
+  light: "dark",
+  dark: "light"
+};
+function setThemeInversions(next) {
+  inversions = next;
+}
+__name(setThemeInversions, "setThemeInversions");
+const ThemeInverse = /* @__PURE__ */ __name((props) => {
+  const themeName = useThemeName();
+  const defaultTheme = useDefaultThemeName();
+  const name = inversions[themeName] || inversions[defaultTheme || ""] || null;
+  return <Theme name={name}>{props.children}</Theme>;
+}, "ThemeInverse");
+export {
+  ThemeInverse,
+  setThemeInversions
+};

package/dist/jsx/views/ThemeManagerContext.js

@@ -0,0 +1,61 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createContext } from "react";
+class ThemeManager {
+  constructor() {
+    this.name = "light";
+    this.parentName = null;
+    this.keys = /* @__PURE__ */ new Map();
+    this.listeners = /* @__PURE__ */ new Map();
+    this.themeListeners = /* @__PURE__ */ new Set();
+    this.theme = null;
+  }
+  setActiveTheme({
+    name,
+    theme,
+    parentName
+  }) {
+    if (name === this.name)
+      return;
+    this.name = name;
+    this.theme = theme;
+    this.parentName = parentName || null;
+    this.update();
+  }
+  track(uuid, keys) {
+    if (!this.name)
+      return;
+    this.keys.set(uuid, keys);
+  }
+  update() {
+    var _a;
+    if (!this.name) {
+      this.keys.clear();
+    }
+    for (const [uuid, keys] of this.keys.entries()) {
+      if (keys.size) {
+        (_a = this.listeners.get(uuid)) == null ? void 0 : _a();
+      }
+    }
+    this.themeListeners.forEach((cb) => cb(this.name, this));
+  }
+  onChangeTheme(cb) {
+    this.themeListeners.add(cb);
+    return () => {
+      this.themeListeners.delete(cb);
+    };
+  }
+  onUpdate(uuid, cb) {
+    this.listeners.set(uuid, cb);
+    return () => {
+      this.listeners.delete(uuid);
+      this.keys.delete(uuid);
+    };
+  }
+}
+__name(ThemeManager, "ThemeManager");
+const ThemeManagerContext = createContext(new ThemeManager());
+export {
+  ThemeManager,
+  ThemeManagerContext
+};

package/dist/jsx/views/ThemeProvider.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import React, { useLayoutEffect, useMemo } from "react";
+import { getHasConfigured } from "../conf";
+import { THEME_CLASSNAME_PREFIX } from "../constants/constants";
+import { ThemeContext } from "../ThemeContext";
+import { Theme } from "./Theme";
+React["createElement"];
+const ThemeProvider = /* @__PURE__ */ __name((props) => {
+  if (!getHasConfigured()) {
+    throw new Error(`Missing configureThemes() call, add to your root file`);
+  }
+  if (typeof document !== "undefined") {
+    useLayoutEffect(() => {
+      if (props.disableRootThemeClass) {
+        return;
+      }
+      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`;
+      document.body.classList.add(cn);
+      return () => {
+        document.body.classList.remove(cn);
+      };
+    }, [props.disableRootThemeClass]);
+  }
+  const themeContext = useMemo(() => {
+    return {
+      themes: props.themes,
+      defaultTheme: props.defaultTheme
+    };
+  }, [props.themes]);
+  return <ThemeContext.Provider value={themeContext}><Theme className={props.className} name={props.defaultTheme} disableThemeClass={props.disableRootThemeClass}>{props.children}</Theme></ThemeContext.Provider>;
+}, "ThemeProvider");
+export {
+  ThemeProvider
+};