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

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.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/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/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/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
+};

package/dist/jsx/views/ThemeReset.js

@@ -0,0 +1,34 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import React, { useContext, useLayoutEffect, useState } from "react";
+import { isWeb } from "../constants/platform";
+import { ThemeManagerContext } from "../ThemeManager";
+import { Theme } from "./Theme";
+React["createElement"];
+const ThemeReset = /* @__PURE__ */ __name((props) => {
+  const themeManager = useContext(ThemeManagerContext);
+  const [name, setName] = useState(null);
+  if (!isWeb || typeof document !== "undefined") {
+    useLayoutEffect(() => {
+      if (!themeManager)
+        return;
+      if (name !== themeManager.parentName) {
+        setName(themeManager.parentName);
+      }
+    }, [themeManager == null ? void 0 : themeManager.parentName]);
+    useLayoutEffect(() => {
+      if (!themeManager)
+        return;
+      return themeManager.onChangeTheme(() => {
+        setName(themeManager.parentName);
+      });
+    }, []);
+  }
+  if (!themeManager || !props.children) {
+    return props.children || null;
+  }
+  return <Theme className="tui-theme-reset" name={name}>{props.children}</Theme>;
+}, "ThemeReset");
+export {
+  ThemeReset
+};

package/package.json

@@ -1,23 +1,28 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-beta.0.204+0834a094",
   "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"
+    "watch": "tamagui-build --watch",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
   },
   "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-beta.0.204+0834a094",
+    "@tamagui/ow": "^0.28.1",
+    "@tamagui/use-debounce": "^1.0.0-beta.0.204+0834a094",
+    "@tamagui/use-force-update": "^1.0.0-beta.0.204+0834a094",
     "react": "*",
     "react-dom": "*"
   },
@@ -25,17 +30,15 @@
     "react-native-web": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.0-alpha.2",
-    "@tamagui/ow": "^0.28.1",
+    "@tamagui/build": "^1.0.0-beta.0.204+0834a094",
     "@types/react": "^17.0.35",
-    "esbuild": "^0.11.20",
-    "typescript": "^4.4.4"
+    "csstype": "^3.0.10",
+    "esbuild": "^0.14.36",
+    "react-native-web": "^0.17.5",
+    "typescript": "^4.5.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "engines": {
-    "node": ">=16"
-  },
-  "gitHead": "13694a98d31535846699004532630788177537e9"
+  "gitHead": "0834a0945f7b958c260d70f207d29a678e11b0ae"
 }

package/types/Tamagui.d.ts

@@ -0,0 +1,30 @@
+import * as Helpers from '@tamagui/helpers';
+import { TamaguiInternalConfig } from './types';
+declare class TamaguiManager {
+    rnw: Record<string, any>;
+    Helpers: typeof Helpers;
+    get config(): TamaguiInternalConfig<import("./types").CreateTokens<import("./types").VariableVal>, {
+        [key: string]: Partial<import("./types").TamaguiBaseTheme> & {
+            [key: string]: import("./types").VariableVal;
+        };
+    }, {}, {
+        [x: string]: {
+            [key: string]: string | number;
+        };
+    }, {
+        [key: string]: string | {
+            [key: string]: any;
+        };
+    }, {
+        [key: string]: import("./types").GenericFont<string | number>;
+    }>;
+    get insertedRules(): unknown[];
+    get allSelectors(): {};
+    get allTransforms(): {};
+    get identifierToValue(): Map<string, any>;
+}
+export declare const Tamagui: TamaguiManager;
+export declare const getValueFromIdentifier: (identifier: string) => any;
+export declare const setIdentifierValue: (identifier: string, value: any) => void;
+export {};
+//# sourceMappingURL=Tamagui.d.ts.map

package/types/Tamagui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tamagui.d.ts","sourceRoot":"","sources":["../src/Tamagui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,kBAAkB,CAAA;AAK3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAI/C,cAAM,cAAc;IAClB,GAAG,sBAAM;IACT,OAAO,iBAAU;IAEjB,IAAI,MAAM;;;;;;;;;;;;;;OAET;IAED,IAAI,aAAa,cAEhB;IAED,IAAI,YAAY,OAEf;IAED,IAAI,aAAa,OAEhB;IAED,IAAI,iBAAiB,qBAEpB;CACF;AAED,eAAO,MAAM,OAAO,gBAAuB,CAAA;AAI3C,eAAO,MAAM,sBAAsB,eAAgB,MAAM,QAExD,CAAA;AAED,eAAO,MAAM,kBAAkB,eAAgB,MAAM,SAAS,GAAG,SAEhE,CAAA"}

package/types/ThemeContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ThemeName, Themes } from './types';
+export declare const ThemeContext: import("react").Context<{
+    themes: Themes;
+    defaultTheme: ThemeName;
+} | null>;
+//# sourceMappingURL=ThemeContext.d.ts.map

package/types/ThemeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../src/ThemeContext.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAE3C,eAAO,MAAM,YAAY;YAA2B,MAAM;kBAAgB,SAAS;SAAgB,CAAA"}