@tamagui/core 1.0.0-alpha.31 → 1.0.0-alpha.38

package/dist/jsx/helpers/isObj.js

@@ -1,6 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-const isObj = /* @__PURE__ */ __name((x) => x && !Array.isArray(x) && typeof x === "object", "isObj");
-export {
-  isObj
-};

package/dist/jsx/helpers/isTamaguiElement.js

@@ -1,9 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { isValidElement } from "react";
-const isTamaguiElement = /* @__PURE__ */ __name((child) => {
-  return isValidElement(child) && !!child.type["staticConfig"]?.parsed;
-}, "isTamaguiElement");
-export {
-  isTamaguiElement
-};

package/dist/jsx/helpers/matchMedia.js

@@ -1,17 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-const matchMedia = typeof window !== "undefined" && window.matchMedia || /* @__PURE__ */ __name(function matchMediaFallback(query) {
-  return {
-    addListener() {
-      if (process.env.NODE_ENV === "development" && !process.env.IS_STATIC && process.env.TAMAGUI_TARGET !== "web") {
-        console.log("warning: matchMedia not loading! Is native picking up .native.js files?");
-      }
-    },
-    removeListener() {
-    },
-    matches: false
-  };
-}, "matchMediaFallback");
-export {
-  matchMedia
-};

package/dist/jsx/helpers/matchMedia.native.js

@@ -1,8 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import MediaQueryList from "@expo/match-media/build/MediaQueryList.js";
-const matchMedia = /* @__PURE__ */ __name((media) => new MediaQueryList(media), "matchMedia");
-globalThis["matchMedia"] = matchMedia;
-export {
-  matchMedia
-};

package/dist/jsx/helpers/themeable.js

@@ -1,23 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import React, { forwardRef } from "react";
-import { Theme } from "../views/Theme";
-import { ThemeInverse } from "../views/ThemeInverse";
-const themeable = /* @__PURE__ */ __name(function graphql(component) {
-  const withThemeComponent = forwardRef(/* @__PURE__ */ __name(function WithTheme({ themeInverse, ...rest }, ref) {
-    const el = React.createElement(component, { ...rest, ref });
-    if (themeInverse) {
-      return <ThemeInverse>{el}</ThemeInverse>;
-    }
-    if (rest.theme) {
-      return <Theme name={rest.theme || null}>{el}</Theme>;
-    }
-    return el;
-  }, "WithTheme"));
-  const withTheme = withThemeComponent;
-  withTheme.displayName = `Themed(${component?.displayName || component?.name || "Anonymous"})`;
-  return withTheme;
-}, "graphql");
-export {
-  themeable
-};

package/dist/jsx/helpers/validate.js

@@ -1,59 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import ow from "@tamagui/ow";
-const validateConfig = /* @__PURE__ */ __name((conf) => {
-  if (!conf) {
-    console.warn("no conf?");
-    return;
-  }
-  try {
-    ow(conf, validConfig);
-  } catch (err) {
-    console.log("Given config:\n", JSON.stringify(conf, null, 2));
-    throw err;
-  }
-}, "validateConfig");
-const validConfig = ow.object.exactShape({
-  defaultTheme: ow.optional.string,
-  disableRootThemeClass: ow.optional.boolean,
-  shorthands: ow.optional.object.valuesOfType(ow.string),
-  themes: ow.object.valuesOfType(ow.object),
-  tokens: ow.object.valuesOfType(ow.object),
-  media: ow.object.valuesOfType(ow.object)
-});
-const validFont = ow.object.exactShape({
-  family: ow.string,
-  size: ow.object.nonEmpty.valuesOfType(ow.number),
-  lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
-  weight: ow.object.nonEmpty.valuesOfType(ow.string),
-  letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number)
-});
-const validTokens = ow.object.exactShape({
-  font: ow.object.valuesOfType(validFont),
-  size: ow.object.nonEmpty.valuesOfType(ow.number),
-  space: ow.object.nonEmpty.valuesOfType(ow.number),
-  zIndex: ow.object.nonEmpty.valuesOfType(ow.number),
-  radius: ow.object.nonEmpty.valuesOfType(ow.number),
-  color: ow.object.nonEmpty.valuesOfType(ow.string)
-});
-const validateTokens = /* @__PURE__ */ __name((tokens) => {
-  try {
-    ow(tokens, validTokens);
-  } catch (err) {
-    console.log("Given tokens:\n", JSON.stringify(tokens, null, 2));
-    throw err;
-  }
-}, "validateTokens");
-const validateFont = /* @__PURE__ */ __name((font) => {
-  try {
-    ow(font, validFont);
-  } catch (err) {
-    console.log("Given font:\n", JSON.stringify(font, null, 2));
-    throw err;
-  }
-}, "validateFont");
-export {
-  validateConfig,
-  validateFont,
-  validateTokens
-};

package/dist/jsx/hooks/useConstant.js

@@ -1,14 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { useRef } from "react";
-function useConstant(fn) {
-  const ref = useRef();
-  if (!ref.current) {
-    ref.current = { v: fn() };
-  }
-  return ref.current.v;
-}
-__name(useConstant, "useConstant");
-export {
-  useConstant
-};

package/dist/jsx/hooks/useFeatures.js

@@ -1,57 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
-import { addMediaQueryListener, mediaState, removeMediaQueryListener } from "./useMedia";
-const createDefinition = /* @__PURE__ */ __name(({
-  Component,
-  propNames
-}) => ({
-  isEnabled: (props) => propNames.some((name) => !!props[name]),
-  Component
-}), "createDefinition");
-let featureDefinitions = null;
-const useFeatures = /* @__PURE__ */ __name((props, utils) => {
-  if (!featureDefinitions) {
-    featureDefinitions = loadFeatures();
-  }
-  const features = [];
-  for (const name in featureDefinitions) {
-    const { isEnabled, Component } = featureDefinitions[name];
-    if (isEnabled(props) && Component) {
-      features.push(<Component key={name} {...props} _utils={utils} />);
-    }
-  }
-  return features;
-}, "useFeatures");
-function loadFeatures() {
-  return {
-    ...!isWeb && {
-      mediaQuery: loadMediaQueryFeature()
-    }
-  };
-}
-__name(loadFeatures, "loadFeatures");
-function loadMediaQueryFeature() {
-  const mediaPropNames = Object.keys(mediaState);
-  return createDefinition({
-    Component: (props) => {
-      const keys = mediaPropNames.flatMap((x) => x in props ? x.slice(1) : []);
-      useIsomorphicLayoutEffect(() => {
-        for (const key of keys) {
-          addMediaQueryListener(key, props._utils.forceUpdate);
-        }
-        return () => {
-          for (const key of keys) {
-            removeMediaQueryListener(key, props._utils.forceUpdate);
-          }
-        };
-      }, [keys.join(",")]);
-      return null;
-    },
-    propNames: mediaPropNames
-  });
-}
-__name(loadMediaQueryFeature, "loadMediaQueryFeature");
-export {
-  useFeatures
-};

package/dist/jsx/hooks/useMedia.js

@@ -1,172 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { useForceUpdate } from "@tamagui/use-force-update";
-import { useRef } from "react";
-import { useIsomorphicLayoutEffect } from "../constants/platform";
-import { matchMedia } from "../helpers/matchMedia";
-import { useConstant } from "./useConstant";
-const mediaState = {};
-const mediaQueryListeners = {};
-const addMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
-  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set();
-  mediaQueryListeners[key].add(cb);
-}, "addMediaQueryListener");
-const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
-  mediaQueryListeners[key]?.delete(cb);
-}, "removeMediaQueryListener");
-let conf = null;
-const mediaQueryConfig = new Proxy({}, {
-  get(target, key) {
-    if (!conf) {
-      console.warn("Warning: accessing media query before init");
-      return null;
-    }
-    return Reflect.get(conf, key);
-  },
-  ownKeys() {
-    if (!conf) {
-      console.warn("Warning: accessing media query before init");
-      return [];
-    }
-    return Object.keys(conf);
-  },
-  getOwnPropertyDescriptor() {
-    return {
-      enumerable: true,
-      configurable: true
-    };
-  }
-});
-const getMedia = /* @__PURE__ */ __name(() => {
-  if (!conf) {
-    throw new Error(`not configured yet`);
-  }
-  return mediaState;
-}, "getMedia");
-const configureMedia = /* @__PURE__ */ __name(({
-  queries,
-  defaultActive = ["sm", "xs"]
-} = {}) => {
-  if (conf) {
-    console.warn(`Already configured mediaQueries once (you may have called getMedia() before configureMedia())`);
-  }
-  if (queries) {
-    conf = queries;
-  }
-  for (const key in queries) {
-    const str = mediaObjectToString(queries[key]);
-    try {
-      const getMatch = /* @__PURE__ */ __name(() => matchMedia(str), "getMatch");
-      const match = getMatch();
-      if (!match || typeof match.addListener !== "function") {
-        throw new Error("\u26A0\uFE0F No match (seeing this in RN sometimes)");
-      }
-      mediaState[key] = !!match.matches;
-      match.addListener(() => {
-        const next = !!getMatch().matches;
-        if (next === mediaState[key])
-          return;
-        mediaState[key] = next;
-        const listeners = mediaQueryListeners[key];
-        if (listeners?.size) {
-          for (const cb of [...listeners]) {
-            cb();
-          }
-        }
-      });
-    } catch (err) {
-      console.error("Error running media query", str, err.message, err.stack);
-      const isDefaultActive = defaultActive?.includes(key) ?? true;
-      mediaState[key] = isDefaultActive;
-    }
-  }
-}, "configureMedia");
-const useMedia = /* @__PURE__ */ __name(() => {
-  const forceUpdate = useForceUpdate();
-  const state = useRef();
-  if (!state.current) {
-    state.current = {
-      selections: {},
-      nextSelections: {},
-      isUnmounted: false,
-      isRendering: true
-    };
-  }
-  state.current.isRendering = true;
-  useIsomorphicLayoutEffect(() => {
-    const st = state.current;
-    st.isRendering = false;
-    for (const key in st.selections) {
-      if (!(key in st.nextSelections)) {
-        removeMediaQueryListener(key, forceUpdate);
-      }
-    }
-    for (const key in st.nextSelections) {
-      if (!(key in st.selections)) {
-        addMediaQueryListener(key, forceUpdate);
-      }
-    }
-  });
-  useIsomorphicLayoutEffect(() => {
-    return () => {
-      const st = state.current;
-      st.isUnmounted = true;
-      const allKeys = {
-        ...st.selections,
-        ...st.nextSelections
-      };
-      for (const key in allKeys) {
-        removeMediaQueryListener(key, forceUpdate);
-      }
-    };
-  }, []);
-  return useConstant(() => {
-    const st = state.current;
-    return new Proxy(mediaState, {
-      get(target, key) {
-        if (!(key in mediaState)) {
-          return Reflect.get(target, key);
-        }
-        if (!st.isUnmounted) {
-          if (st.isRendering) {
-            st.nextSelections[key] = true;
-          }
-        }
-        if (key in mediaState) {
-          return mediaState[key];
-        }
-        return Reflect.get(mediaState, key);
-      }
-    });
-  });
-}, "useMedia");
-function camelToHyphen(str) {
-  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();
-}
-__name(camelToHyphen, "camelToHyphen");
-function mediaObjectToString(query) {
-  if (typeof query === "string") {
-    return query;
-  }
-  return Object.entries(query).map(([feature, value]) => {
-    feature = camelToHyphen(feature);
-    if (typeof value === "string") {
-      return `(${feature}: ${value})`;
-    }
-    if (typeof value === "number" && /[height|width]$/.test(feature)) {
-      value = `${value}px`;
-    }
-    return `(${feature}: ${value})`;
-  }).join(" and ");
-}
-__name(mediaObjectToString, "mediaObjectToString");
-export {
-  addMediaQueryListener,
-  configureMedia,
-  getMedia,
-  mediaObjectToString,
-  mediaQueryConfig,
-  mediaState,
-  removeMediaQueryListener,
-  useMedia
-};

package/dist/jsx/hooks/usePressable.js

@@ -1,12 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { Pressable } from "react-native";
-const getPressable = Pressable?.["type"]?.["render"];
-const usePressable = /* @__PURE__ */ __name((props) => {
-  const out = getPressable(props);
-  const { children, style, ...pressableProps } = out.props;
-  return [pressableProps, style];
-}, "usePressable");
-export {
-  usePressable
-};

package/dist/jsx/hooks/useTheme.js

@@ -1,95 +0,0 @@
-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") {
-            console.warn(`No theme value "${String(key)}" in`, activeTheme, themes);
-            return null;
-          }
-          if (!(val instanceof Variable)) {
-            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

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

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

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

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

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

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