@tamagui/core 1.0.1-beta.76 → 1.0.1-beta.79

package/dist/jsx/hooks/useTheme.js

@@ -1,164 +0,0 @@
-import { useForceUpdate } from "@tamagui/use-force-update";
-import { useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { getConfig } from "../conf";
-import { isWeb, 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 = (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" && (props == null ? void 0 : props.debug)) {
-              console.log(">>", { themeName, didChangeTheme, name, componentName }, themeManager);
-            }
-            if (!didChangeTheme)
-              return null;
-            return themeManager;
-          }
-          return Reflect.get(_, key);
-        }
-        if (typeof key !== "string" || key === "$typeof") {
-          return Reflect.get(_, key);
-        }
-        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;
-        }
-      }
-    });
-  }, [name, theme, className, didChangeTheme]);
-};
-const GetThemeManager = Symbol("GetThemeManager");
-const getThemeManagerIfChanged = (theme) => {
-  return theme == null ? void 0 : theme[GetThemeManager];
-};
-const useThemeName = (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;
-};
-const useDefaultThemeName = () => {
-  var _a;
-  return (_a = useContext(ThemeContext)) == null ? void 0 : _a.defaultTheme;
-};
-const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
-  const debug = props && props["debug"];
-  const parentManager = useContext(ThemeManagerContext) || emptyManager;
-  const { themes } = useContext(ThemeContext);
-  const reset = (props == null ? void 0 : props.reset) || false;
-  const getThemeProps = { name, componentName, themes, reset };
-  const next = parentManager.getNextTheme(getThemeProps, debug);
-  const forceUpdate = forceUpdateProp || useForceUpdate();
-  const themeManager = useConstant(() => {
-    if (!next)
-      return null;
-    return new ThemeManager(next.name, next.theme, parentManager, reset);
-  });
-  if (!isWeb || typeof document !== "undefined") {
-    useLayoutEffect(() => {
-      if (!themeManager)
-        return;
-      if (next == null ? void 0 : next.name) {
-        themeManager.update(next);
-      }
-      return parentManager.onChangeTheme(() => {
-        const next2 = parentManager.getNextTheme(getThemeProps, 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
-  };
-};
-export {
-  getThemeManagerIfChanged,
-  useChangeThemeEffect,
-  useDefaultThemeName,
-  useTheme,
-  useThemeName
-};

package/dist/jsx/hooks/useUnmountEffect.js

@@ -1,7 +0,0 @@
-import { useEffect } from "react";
-function useUnmountEffect(callback) {
-  return useEffect(() => () => callback(), []);
-}
-export {
-  useUnmountEffect
-};

package/dist/jsx/index.js

@@ -1,64 +0,0 @@
-export * from "./Tamagui";
-export * from "./createComponent";
-export * from "./createShorthands";
-export * from "./createTheme";
-export * from "./createTamagui";
-export * from "./createFont";
-export * from "./createTokens";
-export * from "./createVariable";
-export * from "./createVariables";
-export * from "./insertFont";
-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/calc";
-export * from "./helpers/createShallowUpdate";
-export * from "./helpers/getStackSize";
-export * from "./helpers/getVariantExtras";
-export * from "./helpers/getExpandedShorthands";
-export * from "./helpers/getSize";
-export * from "./helpers/getSplitStyles";
-export * from "./helpers/getStylesAtomic";
-export * from "./helpers/pseudos";
-export * from "./helpers/mergeProps";
-import { expandStyles } from "./helpers/generateAtomicStyles";
-export * from "./helpers/getTextSize";
-export * from "./helpers/isObj";
-export * from "./helpers/isTamaguiElement";
-export * from "./helpers/isTamaguiComponent";
-export * from "./helpers/matchMedia";
-export * from "./helpers/themeable";
-export * from "./helpers/withStaticProperties";
-export * from "./contexts/ButtonInsideButtonContext";
-export * from "./hooks/useConstant";
-export * from "./hooks/useId";
-export * from "./hooks/useIsMounted";
-export * from "./hooks/useIsTouchDevice";
-export * from "./hooks/useMedia";
-export * from "./hooks/usePressable";
-export * from "./hooks/useTheme";
-export * from "./hooks/useUnmountEffect";
-export * from "./views/Slot";
-export * from "./views/Stack";
-export * from "./views/Text";
-export * from "./views/TextAncestorContext";
-export * from "./views/Theme";
-export * from "./views/ThemeInverse";
-export * from "./views/ThemeProvider";
-export * from "./views/ThemeReset";
-export * from "@tamagui/use-force-update";
-export * from "@tamagui/helpers";
-export {
-  RNWTextProps,
-  RNWViewProps,
-  expandStyles,
-  getConfig,
-  getHasConfigured,
-  getThemes,
-  getTokens,
-  onConfiguredOnce
-};

package/dist/jsx/insertFont.js

@@ -1,64 +0,0 @@
-import { isWeb } from "@tamagui/core";
-import { setConfigFont } from "./conf";
-import { createFont } from "./createFont";
-import { createVariables } from "./createVariables";
-import { registerCSSVariable } from "./helpers/registerCSSVariable";
-function insertFont(name, fontIn) {
-  const font = createFont(fontIn);
-  const tokened = createVariables(font, name);
-  const parsed = parseFont(tokened);
-  if (isWeb && typeof document !== "undefined") {
-    const css = registerFontVariables(parsed, true);
-    const style = document.createElement("style");
-    style.innerText = `:root {${css}}`;
-    style.setAttribute("data-tamagui-font", name);
-    document.head.appendChild(style);
-  }
-  setConfigFont(name, tokened, parsed);
-  return parsed;
-}
-function parseFont(definition) {
-  const parsed = {};
-  for (const attrKey in definition) {
-    const attr = definition[attrKey];
-    if (attrKey === "family") {
-      parsed[attrKey] = attr;
-      continue;
-    }
-    parsed[attrKey] = {};
-    for (const key in attr) {
-      let val = attr[key];
-      if (val.val[0] === "$") {
-        val = val.val;
-      }
-      parsed[attrKey][`$${key}`] = val;
-    }
-  }
-  return parsed;
-}
-function registerFontVariables(parsedFont, collect = false) {
-  let vals = "";
-  for (const fkey in parsedFont) {
-    if (fkey === "family") {
-      const val = registerCSSVariable(parsedFont[fkey]);
-      if (collect)
-        vals += val + ";";
-    } else {
-      for (const fskey in parsedFont[fkey]) {
-        const fval = parsedFont[fkey][fskey];
-        if (typeof fval === "string") {
-        } else {
-          const val = registerCSSVariable(parsedFont[fkey][fskey]);
-          if (collect)
-            vals += val + ";";
-        }
-      }
-    }
-  }
-  return vals;
-}
-export {
-  insertFont,
-  parseFont,
-  registerFontVariables
-};

package/dist/jsx/static.js

@@ -1,18 +0,0 @@
-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/generateAtomicStyles";
-export * from "./helpers/pseudos";
-export * from "./helpers/proxyThemeVariables";
-export * from "./helpers/getSplitStyles";
-export * from "@tamagui/helpers";
-export * from "./constants/rnw";
-export * from "./types";

package/dist/jsx/styled.js

@@ -1,49 +0,0 @@
-import { Image, Text, TextInput } from "react-native";
-import { createComponent } from "./createComponent";
-import { RNComponents } from "./helpers/RNComponents";
-function styled(Component, options, staticExtractionOptions) {
-  if (process.env.NODE_ENV === "development") {
-    if (Component["staticConfig"] && Component["staticConfig"].isExtractable) {
-      console.warn(`Warning: Wrapping styled() around an extractable HOC component isn't allowed yet. Support for this is on the roadmap, see: https://github.com/tamagui/tamagui/issues/88.`);
-    }
-  }
-  const staticConfigProps = (() => {
-    var _a;
-    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 reactNativeWebComponent = isReactNativeWeb ? ((_a = Component["staticConfig"]) == null ? void 0 : _a.reactNativeWebComponent) || Component : null;
-      const isTamagui = !isReactNativeWeb && "staticConfig" in Component;
-      const Comp = reactNativeWebComponent || 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,
-        reactNativeWebComponent,
-        isInput,
-        isText,
-        isImage
-      };
-      return conf;
-    }
-    return {};
-  })();
-  const component = createComponent(staticConfigProps, Component);
-  return component;
-}
-export {
-  styled
-};

package/dist/jsx/views/Slot.js

@@ -1,70 +0,0 @@
-import { composeRefs } from "@tamagui/compose-refs";
-import * as React from "react";
-import { isWeb } from "../constants/platform";
-const Slot = React.forwardRef((props, forwardedRef) => {
-  const { children, ...slotProps } = props;
-  return <SlotClone {...slotProps} ref={forwardedRef}>{children}</SlotClone>;
-});
-Slot.displayName = "Slot";
-const SlotClone = React.forwardRef((props, forwardedRef) => {
-  const { children, ...slotProps } = props;
-  if (React.isValidElement(children)) {
-    const childProps = {
-      ...mergeProps(children, slotProps),
-      ref: composeRefs(forwardedRef, children.ref)
-    };
-    return React.cloneElement(children, childProps);
-  }
-  return React.Children.count(children) > 1 ? React.Children.only(null) : null;
-});
-SlotClone.displayName = "SlotClone";
-const Slottable = ({ children }) => {
-  return <>{children}</>;
-};
-const pressMap = isWeb ? {
-  onPress: "onClick",
-  onPressOut: "onMouseUp",
-  onPressIn: "onMouseDown"
-} : {};
-function mergeProps(child, slotProps) {
-  const childProps = child.props;
-  const overrideProps = { ...childProps };
-  const isHTMLChild = typeof child.type === "string";
-  if (isHTMLChild) {
-    for (const key in pressMap) {
-      if (key in slotProps) {
-        slotProps[pressMap[key]] = slotProps[key];
-        delete slotProps[key];
-      }
-    }
-  }
-  for (let propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    if (isHTMLChild && pressMap[propName]) {
-      propName = pressMap[propName];
-      delete overrideProps[propName];
-    }
-    const isHandler = handleRegex.test(propName);
-    if (isHandler) {
-      overrideProps[propName] = mergeEvent(childPropValue, slotPropValue);
-    } else if (propName === "style") {
-      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
-    }
-  }
-  return { ...slotProps, ...overrideProps };
-}
-const handleRegex = /^on[A-Z]/;
-function mergeEvent(a, b) {
-  return (...args) => {
-    a == null ? void 0 : a(...args);
-    b == null ? void 0 : b(...args);
-  };
-}
-export {
-  Slot,
-  Slottable,
-  mergeEvent
-};

package/dist/jsx/views/Stack.js

@@ -1,12 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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: "flex",
-    fontFamily: "System",
-    ...isWeb && {
-      display: "inline",
-      boxSizing: "border-box",
-      wordWrap: "break-word"
-    }
-  },
-  variants: {
-    numberOfLines: {
-      1: isWeb ? ellipseStyle : { numberOfLines: 1 },
-      ":number": (numberOfLines) => isWeb ? numberOfLines >= 1 ? { WebkitLineClamp: numberOfLines } : null : { numberOfLines }
-    },
-    selectable: {
-      true: {
-        userSelect: "text",
-        cursor: "text"
-      },
-      false: {
-        userSelect: "none",
-        cursor: "inherit"
-      }
-    },
-    pressable: {
-      true: {
-        cursor: "pointer"
-      }
-    },
-    ellipse: {
-      true: isWeb ? ellipseStyle : {
-        numberOfLines: 1,
-        lineBreakMode: "clip"
-      }
-    }
-  },
-  deoptProps: new Set(isWeb ? [] : ["ellipse"]),
-  validStyles: {
-    ...validStyles,
-    ...stylePropsTextOnly
-  }
-});
-export {
-  Text
-};

package/dist/jsx/views/TextAncestorContext.js

@@ -1,13 +0,0 @@
-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 = (props) => {
-  return <TextAncestorContext.Provider value={false}>{props.children}</TextAncestorContext.Provider>;
-};
-export {
-  FallbackNativeContext,
-  TextAncestorContext,
-  TextAncestorProvider
-};

package/dist/jsx/views/Theme.js

@@ -1,27 +0,0 @@
-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(function Theme2(props) {
-  var _a, _b;
-  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(props.name, props.componentName, props);
-  const missingTheme = !themes || !name || !theme;
-  const contents = useMemo(() => missingTheme ? null : wrapThemeManagerContext(props.children, themeManager), [props.children, themeManager]);
-  if (missingTheme) {
-    if (name && !theme && process.env.NODE_ENV === "development") {
-      console.warn(`No theme found by name ${name}`);
-    }
-    return props.children;
-  }
-  if (isWeb) {
-    return <span className={(!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;
-});
-export {
-  Theme
-};

package/dist/jsx/views/ThemeInverse.js

@@ -1,24 +0,0 @@
-import { useState } from "react";
-import { useIsomorphicLayoutEffect } from "../constants/platform";
-import { useDefaultThemeName, useThemeName } from "../hooks/useTheme";
-import { Theme } from "./Theme";
-let inversions = {
-  light: "dark",
-  dark: "light"
-};
-function setThemeInversions(next) {
-  inversions = next;
-}
-const ThemeInverse = (props) => {
-  const themeName = useThemeName();
-  const defaultTheme = useDefaultThemeName();
-  const [name, setName] = useState(null);
-  useIsomorphicLayoutEffect(() => {
-    setName(inversions[themeName] || inversions[defaultTheme || ""] || null);
-  }, [defaultTheme, themeName]);
-  return <Theme name={name}>{props.children}</Theme>;
-};
-export {
-  ThemeInverse,
-  setThemeInversions
-};

package/dist/jsx/views/ThemeProvider.js

@@ -1,34 +0,0 @@
-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 = (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}`;
-      const target = props.themeClassNameOnRoot ? document.documentElement : document.body;
-      target.classList.add(cn);
-      return () => {
-        target.classList.remove(cn);
-      };
-    }, [props.defaultTheme, 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>;
-};
-export {
-  ThemeProvider
-};

package/dist/jsx/views/ThemeReset.js

@@ -1,32 +0,0 @@
-import React, { useContext, useLayoutEffect, useState } from "react";
-import { isWeb } from "../constants/platform";
-import { ThemeManagerContext } from "../ThemeManager";
-import { Theme } from "./Theme";
-React["createElement"];
-const ThemeReset = (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" reset name={name}>{props.children}</Theme>;
-};
-export {
-  ThemeReset
-};

package/types/helpers/pseudos.d.ts

@@ -1,16 +0,0 @@
-export declare const pseudoDescriptors: {
-    readonly hoverStyle: {
-        readonly name: "hover";
-        readonly priority: 1;
-    };
-    readonly pressStyle: {
-        readonly name: "active";
-        readonly priority: 2;
-    };
-    readonly focusStyle: {
-        readonly name: "focus";
-        readonly priority: 3;
-    };
-};
-export declare type PseudoDescriptor = typeof pseudoDescriptors[keyof typeof pseudoDescriptors];
-//# sourceMappingURL=pseudos.d.ts.map

package/types/helpers/pseudos.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pseudos.d.ts","sourceRoot":"","sources":["../../src/helpers/pseudos.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAapB,CAAA;AAEV,oBAAY,gBAAgB,GAAG,OAAO,iBAAiB,CAAC,MAAM,OAAO,iBAAiB,CAAC,CAAA"}