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

package/dist/jsx/hooks/useTheme.js

@@ -0,0 +1,98 @@
+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 { isVariable } from "../createVariable";
+import { ThemeContext } from "../views/ThemeContext";
+import { ThemeManagerContext } from "../views/ThemeManagerContext";
+const areEqualSets = /* @__PURE__ */ __name((a, b) => {
+  if (a.size !== b.size)
+    return false;
+  for (const val in a) {
+    if (!b.has(val)) {
+      return false;
+    }
+  }
+  return true;
+}, "areEqualSets");
+const useThemeName = /* @__PURE__ */ __name((opts) => {
+  const parent = useContext(ThemeManagerContext);
+  const [name, setName] = useState(parent.name);
+  useIsomorphicLayoutEffect(() => {
+    return parent.onChangeTheme((next, manager) => {
+      setName((opts == null ? void 0 : opts.parent) ? manager.parentName : next);
+    });
+  }, [parent]);
+  return name || "light";
+}, "useThemeName");
+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 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 = manager.keys.get(st.uuid);
+    if (!cur || !areEqualSets(st.keys, cur)) {
+      manager.track(st.uuid, st.keys);
+    }
+  });
+  useEffect(() => {
+    return manager.onUpdate(state.current.uuid, forceUpdate);
+  }, []);
+  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) {
+        const name = manager.name;
+        if (!name) {
+          return Reflect.get(_, key);
+        }
+        let activeTheme = themes[name];
+        if (!activeTheme) {
+          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") {
+            console.warn(`No theme value "${String(key)}" in`, activeTheme, themes);
+            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 val;
+      }
+    });
+  }, []);
+}, "useTheme");
+export {
+  useDefaultThemeName,
+  useTheme,
+  useThemeName
+};

package/dist/jsx/index.js

@@ -0,0 +1,38 @@
+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 { 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";
+export * from "./helpers/themeable";
+export * from "./helpers/isTamaguiElement";
+export * from "./hooks/useConstant";
+export * from "./hooks/useMedia";
+export * from "./hooks/useTheme";
+export * from "./views/Animated";
+export * from "./views/Stack";
+export * from "./views/Text";
+export * from "./views/Theme";
+export * from "./views/ThemeInverse";
+export * from "./views/ThemeProvider";
+export * from "./views/TextAncestorContext";
+export {
+  createTokens,
+  getHasConfigured,
+  getTamagui,
+  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,14 @@
+export * from "./styled";
+export * from "./createComponent";
+export * from "./createFont";
+export * from "./createTokens";
+export * from "./createTamagui";
+export * from "./constants/constants";
+export * from "./hooks/useMedia";
+export * from "./hooks/useTheme";
+export * from "./helpers/isObj";
+export * from "./helpers/getStylesAtomic";
+export * from "./helpers/getSplitStyles";
+export * from "@tamagui/helpers";
+export * from "./constants/pseudos";
+export * from "./static/postProcessStyles";

package/dist/jsx/styled.js

@@ -0,0 +1,20 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createComponent } from "./createComponent";
+import { extendStaticConfig } from "./helpers/extendStaticConfig";
+function styled(Component, options, staticExtractionOptions) {
+  const staticConfigProps = (() => {
+    if (options) {
+      const { variants, ...defaultProps } = options;
+      return { ...staticExtractionOptions, variants, defaultProps };
+    }
+    return {};
+  })();
+  const config = extendStaticConfig(Component, staticConfigProps);
+  const component = createComponent(config);
+  return component;
+}
+__name(styled, "styled");
+export {
+  styled
+};

package/dist/jsx/tamagui-base.css

@@ -0,0 +1,7 @@
+.tamagui-absolute-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

package/dist/jsx/views/AbsoluteFullscreen.js

@@ -0,0 +1,13 @@
+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
+};

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,11 @@
+import { stackDefaultStyles } from "../constants/constants";
+import { createComponent } from "../createComponent";
+const Stack = createComponent({
+  defaultProps: {
+    ...stackDefaultStyles,
+    flexDirection: "column"
+  }
+});
+export {
+  Stack
+};

package/dist/jsx/views/Text.js

@@ -0,0 +1,59 @@
+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({
+  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"
+      },
+      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,63 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useContext, useState } from "react";
+import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
+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("Error, no themes in context", props);
+    return props.children;
+  }
+  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, theme: themes[name], parentName });
+    }
+    return manager;
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!themeManager) {
+      return;
+    }
+    if (name) {
+      themeManager.setActiveTheme({ name, theme, parentName });
+    }
+    return parent.onChangeTheme((next) => {
+      if (next) {
+        themeManager.setActiveTheme({ name: next, theme: themes[next], parentName });
+        setParentName(next);
+      }
+    });
+  }, [themes, name, parentName]);
+  if (!name || !theme) {
+    return props.children;
+  }
+  const contents = themeManager ? <ThemeManagerContext.Provider value={themeManager}>{props.children}</ThemeManagerContext.Provider> : props.children;
+  if (isWeb) {
+    if (props.disableThemeClass) {
+      return contents;
+    }
+    if (name) {
+      const color = (_b = (_a = themes[name]) == null ? void 0 : _a["color"]) == null ? void 0 : _b["variable"];
+      return <div className={getThemeParentClassName(props.name)} style={{ display: "contents", color }}>{contents}</div>;
+    }
+  }
+  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,39 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useMemo } from "react";
+import { getHasConfigured } from "../conf";
+import { GET_DEFAULT_THEME } from "../constants/constants";
+import { useIsomorphicLayoutEffect } from "../constants/platform";
+import { getThemeParentClassName } from "../helpers/getThemeParentClassName";
+import { Theme } from "./Theme";
+import { ThemeContext } from "./ThemeContext";
+const ThemeProvider = /* @__PURE__ */ __name((props) => {
+  if (!getHasConfigured()) {
+    throw new Error(`Missing configureThemes() call, add to your root file`);
+  }
+  useIsomorphicLayoutEffect(() => {
+    if (props.disableRootThemeClass) {
+      return;
+    }
+    if (typeof document !== "undefined") {
+      const cns = getThemeParentClassName(`${props.defaultTheme}`).split(" ");
+      cns.forEach((cn) => document.body.classList.add(cn));
+      return () => {
+        cns.forEach((cn) => document.body.classList.remove(cn));
+      };
+    }
+  }, []);
+  const themeContext = useMemo(() => {
+    return new Proxy(props.themes, {
+      get(target, key) {
+        if (key === GET_DEFAULT_THEME)
+          return props.defaultTheme;
+        return Reflect.get(target, key);
+      }
+    });
+  }, [props.themes]);
+  return <ThemeContext.Provider value={themeContext}><Theme name={props.defaultTheme} disableThemeClass={props.disableRootThemeClass}>{props.children}</Theme></ThemeContext.Provider>;
+}, "ThemeProvider");
+export {
+  ThemeProvider
+};

package/package.json

@@ -1,23 +1,26 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.62",
   "source": "src/index.ts",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "typings": "types.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "typings": "types",
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
     "build": "tamagui-build",
     "watch": "tamagui-build --watch"
   },
   "files": [
-    "types.d.ts",
-    "dist",
-    "src"
+    "types",
+    "dist"
   ],
   "dependencies": {
-    "@tamagui/helpers": "^1.0.0-alpha.5",
-    "@tamagui/use-debounce": "^1.0.0-alpha.6",
-    "@tamagui/use-force-update": "^1.0.0-alpha.5",
+    "@tamagui/helpers": "^1.0.0-alpha.58",
+    "@tamagui/ow": "^0.28.1",
+    "@tamagui/use-debounce": "^1.0.0-alpha.58",
+    "@tamagui/use-force-update": "^1.0.0-alpha.58",
     "react": "*",
     "react-dom": "*"
   },
@@ -25,16 +28,15 @@
     "react-native-web": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.0-alpha.2",
+    "@tamagui/build": "^1.0.0-alpha.58",
     "@types/react": "^17.0.35",
-    "esbuild": "^0.11.20",
-    "typescript": "^4.4.4"
+    "csstype": "^3.0.10",
+    "esbuild": "^0.13.12",
+    "react-native-web": "^0.17.5",
+    "typescript": "^4.5.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "engines": {
-    "node": ">=16"
-  },
-  "gitHead": "18a942d7a08109c8f5b8692a2adb20c69d56a7e1"
+  "gitHead": "76f3b735226bdb7feffb53e3c8e3fd34392b6a10"
 }