@tamagui/core 1.0.0-alpha.11 → 1.0.0-alpha.12

package/dist/jsx/hooks/useTheme.js

@@ -0,0 +1,88 @@
+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 { useIsomorphicLayoutEffect } from "../constants/platform";
+import { Variable } from "../createVariable";
+import { ThemeContext } from "../views/ThemeContext";
+import { ThemeManagerContext } from "../views/ThemeManagerContext";
+import { GET_DEFAULT_THEME } from "../views/ThemeProvider";
+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?.parent ? manager.parentName : next);
+    });
+  }, [parent]);
+  return name || "light";
+}, "useThemeName");
+const useDefaultThemeName = /* @__PURE__ */ __name(() => {
+  return useContext(ThemeContext)[GET_DEFAULT_THEME];
+}, "useDefaultThemeName");
+const useTheme = /* @__PURE__ */ __name(() => {
+  const forceUpdate = useForceUpdate();
+  const manager = useContext(ThemeManagerContext);
+  const themes = useContext(ThemeContext);
+  const state = useRef();
+  if (!state.current) {
+    state.current = {
+      uuid: {},
+      keys: 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 = (manager.name ? themes[manager.name] : themes.light) ?? themes.light;
+  return useMemo(() => {
+    return new Proxy(theme, {
+      get(_, key) {
+        const name = manager.name;
+        if (!name) {
+          return Reflect.get(_, key);
+        }
+        let activeTheme = themes[name];
+        if (!activeTheme) {
+          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") {
+            throw new Error(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`);
+          }
+        }
+        if (state.current.isRendering) {
+          state.current.keys.add(key);
+        }
+        return new Variable({ val: val.val, name: key });
+      }
+    });
+  }, []);
+}, "useTheme");
+export {
+  useDefaultThemeName,
+  useTheme,
+  useThemeName
+};

package/dist/jsx/index.js

@@ -0,0 +1,31 @@
+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";
+export * from "./constants/pseudos";
+export * from "./constants/constants";
+export * from "./constants/platform";
+export * from "./constants/rnw";
+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
+};

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/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 { isWeb } from "../constants/platform";
+import { createComponent } from "../createComponent";
+import { stylePropsTextOnly, validStyles } from "../static";
+const ellipseStyle = {
+  maxWidth: "100%",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+const Text = createComponent({
+  isText: true,
+  defaultProps: {
+    display: isWeb ? "inline" : "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,14 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { rnw } from "../constants/rnw";
+const TextAncestorContext = rnw?.TextAncestorContext;
+const TextAncestorProvider = /* @__PURE__ */ __name((props) => {
+  if (TextAncestorContext) {
+    return <TextAncestorContext.Provider value={false}>{props.children}</TextAncestorContext.Provider>;
+  }
+  return props.children;
+}, "TextAncestorProvider");
+export {
+  TextAncestorContext,
+  TextAncestorProvider
+};

package/dist/jsx/views/Theme.js

@@ -0,0 +1,62 @@
+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 "../createTamagui";
+import { useConstant } from "../hooks/useConstant";
+import { ThemeContext } from "./ThemeContext";
+import { ThemeManager, ThemeManagerContext } from "./ThemeManagerContext";
+const Theme = /* @__PURE__ */ __name((props) => {
+  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 = themes[name]?.["color"]?.["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,60 @@
+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 = new Map();
+    this.listeners = new Map();
+    this.themeListeners = 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() {
+    if (!this.name) {
+      this.keys.clear();
+    }
+    for (const [uuid, keys] of this.keys.entries()) {
+      if (keys.size) {
+        this.listeners.get(uuid)?.();
+      }
+    }
+    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 { useIsomorphicLayoutEffect } from "../constants/platform";
+import { getHasConfigured, getThemeParentClassName } from "../createTamagui";
+import { Theme } from "./Theme";
+import { ThemeContext } from "./ThemeContext";
+const GET_DEFAULT_THEME = "___TGUI";
+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 {
+  GET_DEFAULT_THEME,
+  ThemeProvider
+};

package/package.json

@@ -1,25 +1,24 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.12",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist",
-  "typings": "types.d.ts",
+  "typings": "types",
   "scripts": {
-    "build": "tamagui-build --separate",
-    "watch": "tamagui-build --separate --watch"
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch"
   },
   "files": [
-    "_",
-    "types.d.ts",
+    "types",
     "dist",
     "src"
   ],
   "dependencies": {
-    "@tamagui/helpers": "^1.0.0-alpha.8",
+    "@tamagui/helpers": "^1.0.0-alpha.12",
     "@tamagui/ow": "^0.28.1",
-    "@tamagui/use-debounce": "^1.0.0-alpha.8",
-    "@tamagui/use-force-update": "^1.0.0-alpha.8",
+    "@tamagui/use-debounce": "^1.0.0-alpha.12",
+    "@tamagui/use-force-update": "^1.0.0-alpha.12",
     "react": "*",
     "react-dom": "*"
   },
@@ -27,7 +26,7 @@
     "react-native-web": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.0-alpha.8",
+    "@tamagui/build": "^1.0.0-alpha.12",
     "@types/react": "^17.0.35",
     "esbuild": "^0.11.20",
     "typescript": "^4.4.4"
@@ -38,5 +37,5 @@
   "engines": {
     "node": ">=16"
   },
-  "gitHead": "23209099ee7f37baf2597a9dcded9345ba294fe4"
+  "gitHead": "d50261a4e08d2212395af4f2d8f49555fc780c3e"
 }

package/src/createComponent.tsx

@@ -241,7 +241,7 @@ export function createComponent<A extends Object = DefaultProps>(
           ]
         : [defaultsClassName, props.className, classNames, stylesClassNames]
 
-      // @ts-expect-error
+      // @ts-ignore we are optimizing using arguments
       const className = concatClassName(...classList)
       if (process.env.NODE_ENV === 'development') {
         if (props['debug']) {

package/src/types.tsx

@@ -225,7 +225,7 @@ export type WithThemeValues<T extends object> = {
 type WithShorthands<StyleProps> = {
   [Key in keyof Shorthands]?: Shorthands[Key] extends keyof StyleProps
     ? StyleProps[Shorthands[Key]] | null
-    : {}
+    : undefined
 }
 
 //
@@ -263,11 +263,11 @@ type WebOnlyStyleProps = {
   pointerEvents?: ViewProps['pointerEvents']
 }
 
-type StackStyleProps = WithThemeShorthandsPseudosAndMedia<
-  Omit<ViewStyle, 'display' | 'backfaceVisibility' | 'elevation'> &
-    TransformStyleProps &
-    WebOnlyStyleProps
->
+export type StackStylePropsBase = Omit<ViewStyle, 'display' | 'backfaceVisibility' | 'elevation'> &
+  TransformStyleProps &
+  WebOnlyStyleProps
+
+export type StackStyleProps = WithThemeShorthandsPseudosAndMedia<StackStylePropsBase>
 
 export type StackProps = Omit<RNWInternalProps, 'children'> &
   Omit<ViewProps, 'display' | 'children'> &

package/src/views/Text.tsx

@@ -1,6 +1,7 @@
+import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'
+
 import { isWeb } from '../constants/platform'
 import { createComponent } from '../createComponent'
-import { stylePropsTextOnly, validStyles } from '../static'
 import { TextProps } from '../types'
 
 const ellipseStyle = {

package/types/constants/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const stackDefaultStyles: {
+    display?: string | undefined;
+    flexBasis?: string | undefined;
+    boxSizing?: string | undefined;
+    alignItems: string;
+    flexShrink: number;
+};
+//# sourceMappingURL=constants.d.ts.map

package/types/constants/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB;;;;;;CAS9B,CAAA"}

package/types/constants/platform.d.ts

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+export declare const isWeb: boolean;
+export declare const isSSR: boolean;
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
+export declare const isChrome: boolean;
+export declare const supportsTouchWeb: boolean;
+export declare const isTouchDevice: boolean;
+export declare const isWebIOS: boolean;
+//# sourceMappingURL=platform.d.ts.map

package/types/constants/platform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../../src/constants/platform.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAA;AAGlD,eAAO,MAAM,KAAK,SAAuE,CAAA;AACzF,eAAO,MAAM,KAAK,SAAyC,CAAA;AAC3D,eAAO,MAAM,yBAAyB,kBAAsC,CAAA;AAC5E,eAAO,MAAM,QAAQ,SAA+E,CAAA;AACpG,eAAO,MAAM,gBAAgB,SAA4D,CAAA;AACzF,eAAO,MAAM,aAAa,SAA6B,CAAA;AACvD,eAAO,MAAM,QAAQ,SAKA,CAAA"}

package/types/constants/pseudos.d.ts

@@ -0,0 +1,15 @@
+export declare const pseudos: {
+    focusStyle: {
+        name: string;
+        priority: number;
+    };
+    pressStyle: {
+        name: string;
+        priority: number;
+    };
+    hoverStyle: {
+        name: string;
+        priority: number;
+    };
+};
+//# sourceMappingURL=pseudos.d.ts.map