@tamagui/core 1.0.0-alpha.4 → 1.0.0-alpha.8

package/_/views/Animated.js

@@ -1,79 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import React, { 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 /* @__PURE__ */ React.createElement(Stack, {
-    animated,
-    ...props,
-    ...animatedProps
-  }, childrenMemo);
-}, "AnimatedStack");
-export {
-  AnimatedStack
-};
-//# sourceMappingURL=Animated.js.map

package/_/views/Stack.js

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

package/_/views/Text.js

@@ -1,60 +0,0 @@
-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
-};
-//# sourceMappingURL=Text.js.map

package/_/views/TextAncestorContext.js

@@ -1,19 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var _a;
-import React from "react";
-import { rnw } from "../constants/rnw";
-const TextAncestorContext = (_a = rnw) == null ? void 0 : _a.TextAncestorContext;
-const TextAncestorProvider = /* @__PURE__ */ __name((props) => {
-  if (TextAncestorContext) {
-    return /* @__PURE__ */ React.createElement(TextAncestorContext.Provider, {
-      value: false
-    }, props.children);
-  }
-  return props.children;
-}, "TextAncestorProvider");
-export {
-  TextAncestorContext,
-  TextAncestorProvider
-};
-//# sourceMappingURL=TextAncestorContext.js.map

package/_/views/Theme.js

@@ -1,57 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import React, { 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) => {
-  var _a, _b;
-  const parent = useContext(ThemeManagerContext);
-  const themes = useContext(ThemeContext);
-  const [parentName, setParentName] = useState(parent.name || "light");
-  if (!themes) {
-    console.warn("no themes???", props);
-    return props.children;
-  }
-  const name = props.name;
-  const theme = themes[name] || themes[`${name}-${parentName}`];
-  const themeManager = useConstant(() => {
-    const manager = new ThemeManager();
-    if (name) {
-      manager.setActiveTheme(name, themes[name]);
-    }
-    return manager;
-  });
-  useIsomorphicLayoutEffect(() => {
-    themeManager.setActiveTheme(name, theme);
-    return parent.onChangeTheme((next) => {
-      if (next) {
-        themeManager.setActiveTheme(next, themes[next]);
-        setParentName(next);
-      }
-    });
-  }, [themes, name]);
-  if (!name) {
-    return props.children;
-  }
-  const contents = themeManager ? /* @__PURE__ */ React.createElement(ThemeManagerContext.Provider, {
-    value: themeManager
-  }, props.children) : props.children;
-  if (isWeb) {
-    if (props.disableThemeClass) {
-      return contents;
-    }
-    const color = (_b = (_a = themes[name]) == null ? void 0 : _a["color"]) == null ? void 0 : _b["variable"];
-    return /* @__PURE__ */ React.createElement("div", {
-      className: getThemeParentClassName(name),
-      style: { display: "contents", color }
-    }, contents);
-  }
-  return contents;
-}, "Theme");
-export {
-  Theme
-};
-//# sourceMappingURL=Theme.js.map

package/_/views/Theme.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/views/Theme.tsx"],
-  "sourcesContent": ["import React, { useContext, useState } from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getThemeParentClassName } from '../createTamagui'\nimport { useConstant } from '../hooks/useConstant'\nimport { ThemeName, Themes } from '../types'\nimport { ThemeContext } from './ThemeContext'\nimport { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'\n\nexport type ThemeProps = {\n  disableThemeClass?: boolean\n  name: ThemeName | null\n  children?: any\n}\n\nexport const Theme = (props: ThemeProps) => {\n  const parent = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext)\n  const [parentName, setParentName] = useState(parent.name || 'light')\n  if (!themes) {\n    console.warn('no themes???', props)\n    return props.children\n  }\n  const name = props.name as string\n  const theme = themes[name] || themes[`${name}-${parentName}`]\n  const themeManager = useConstant<ThemeManager>(() => {\n    const manager = new ThemeManager()\n    if (name) {\n      manager.setActiveTheme(name, themes[name])\n    }\n    return manager\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    themeManager.setActiveTheme(name, theme)\n    return parent.onChangeTheme((next) => {\n      if (next) {\n        themeManager.setActiveTheme(next, themes[next])\n        setParentName(next)\n      }\n    })\n  }, [themes, name])\n\n  if (!name) {\n    return props.children\n  }\n\n  const contents = themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {props.children}\n    </ThemeManagerContext.Provider>\n  ) : (\n    props.children\n  )\n\n  if (isWeb) {\n    if (props.disableThemeClass) {\n      return contents\n    }\n    const color = themes[name]?.['color']?.['variable']\n    return (\n      <div\n        className={getThemeParentClassName(name)}\n        // in order to provide currentColor, set color by default\n        style={{ display: 'contents', color }}\n      >\n        {contents}\n      </div>\n    )\n  }\n\n  return contents\n}\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAQO,MAAM,QAAQ,wBAAC,UAAsB;AAf5C;AAgBE,QAAM,SAAS,WAAW;AAC1B,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO,QAAQ;AAC5D,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,gBAAgB;AAC7B,WAAO,MAAM;AAAA;AAEf,QAAM,OAAO,MAAM;AACnB,QAAM,QAAQ,OAAO,SAAS,OAAO,GAAG,QAAQ;AAChD,QAAM,eAAe,YAA0B,MAAM;AACnD,UAAM,UAAU,IAAI;AACpB,QAAI,MAAM;AACR,cAAQ,eAAe,MAAM,OAAO;AAAA;AAEtC,WAAO;AAAA;AAGT,4BAA0B,MAAM;AAC9B,iBAAa,eAAe,MAAM;AAClC,WAAO,OAAO,cAAc,CAAC,SAAS;AACpC,UAAI,MAAM;AACR,qBAAa,eAAe,MAAM,OAAO;AACzC,sBAAc;AAAA;AAAA;AAAA,KAGjB,CAAC,QAAQ;AAEZ,MAAI,CAAC,MAAM;AACT,WAAO,MAAM;AAAA;AAGf,QAAM,WAAW,eACf,oCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KAClC,MAAM,YAGT,MAAM;AAGR,MAAI,OAAO;AACT,QAAI,MAAM,mBAAmB;AAC3B,aAAO;AAAA;AAET,UAAM,QAAQ,mBAAO,UAAP,mBAAe,aAAf,mBAA0B;AACxC,WACE,oCAAC,OAAD;AAAA,MACE,WAAW,wBAAwB;AAAA,MAEnC,OAAO,EAAE,SAAS,YAAY;AAAA,OAE7B;AAAA;AAKP,SAAO;AAAA,GAxDY;",
-  "names": []
-}

package/_/views/ThemeContext.js

@@ -1,6 +0,0 @@
-import { createContext } from "react";
-const ThemeContext = createContext(null);
-export {
-  ThemeContext
-};
-//# sourceMappingURL=ThemeContext.js.map

package/_/views/ThemeInverse.js

@@ -1,27 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import React from "react";
-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;
-  console.log("todo fixme invert", { themeName, defaultTheme, next: name });
-  return /* @__PURE__ */ React.createElement(Theme, {
-    name
-  }, props.children);
-}, "ThemeInverse");
-export {
-  ThemeInverse,
-  setThemeInversions
-};
-//# sourceMappingURL=ThemeInverse.js.map

package/_/views/ThemeManagerContext.js

@@ -1,56 +0,0 @@
-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.keys = new Map();
-    this.listeners = new Map();
-    this.callbacks = new Set();
-    this.theme = null;
-  }
-  setActiveTheme(name, theme) {
-    if (name === this.name)
-      return;
-    this.name = name;
-    this.theme = theme;
-    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.callbacks.forEach((cb) => cb(this.name));
-  }
-  onChangeTheme(cb) {
-    this.callbacks.add(cb);
-    return () => {
-      this.callbacks.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
-};
-//# sourceMappingURL=ThemeManagerContext.js.map

package/_/views/ThemeManagerContext.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/views/ThemeManagerContext.tsx"],
-  "sourcesContent": ["import { createContext } from 'react'\n\nexport class ThemeManager {\n  name: string | null = 'light'\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  callbacks = new Set<Function>()\n  theme = null\n\n  setActiveTheme(name: string | null, theme?: any) {\n    if (name === this.name) return\n    this.name = name\n    this.theme = theme\n    this.update()\n  }\n\n  track(uuid: any, keys: Set<string>) {\n    if (!this.name) return\n    this.keys.set(uuid, keys)\n  }\n\n  update() {\n    if (!this.name) {\n      this.keys.clear()\n    }\n    for (const [uuid, keys] of this.keys.entries()) {\n      if (keys.size) {\n        this.listeners.get(uuid)?.()\n      }\n    }\n    this.callbacks.forEach((cb) => cb(this.name))\n  }\n\n  onChangeTheme(cb: (name: string | null) => void) {\n    this.callbacks.add(cb)\n    return () => {\n      this.callbacks.delete(cb)\n    }\n  }\n\n  onUpdate(uuid: any, cb: Function) {\n    this.listeners.set(uuid, cb)\n    return () => {\n      this.listeners.delete(uuid)\n      this.keys.delete(uuid)\n    }\n  }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager>(new ThemeManager())\n"],
-  "mappings": ";;AAAA;AAEO,mBAAmB;AAAA,EAAnB,cAFP;AAGE,gBAAsB;AACtB,gBAAO,IAAI;AACX,qBAAY,IAAI;AAChB,qBAAY,IAAI;AAChB,iBAAQ;AAAA;AAAA,EAER,eAAe,MAAqB,OAAa;AAC/C,QAAI,SAAS,KAAK;AAAM;AACxB,SAAK,OAAO;AACZ,SAAK,QAAQ;AACb,SAAK;AAAA;AAAA,EAGP,MAAM,MAAW,MAAmB;AAClC,QAAI,CAAC,KAAK;AAAM;AAChB,SAAK,KAAK,IAAI,MAAM;AAAA;AAAA,EAGtB,SAAS;AArBX;AAsBI,QAAI,CAAC,KAAK,MAAM;AACd,WAAK,KAAK;AAAA;AAEZ,eAAW,CAAC,MAAM,SAAS,KAAK,KAAK,WAAW;AAC9C,UAAI,KAAK,MAAM;AACb,mBAAK,UAAU,IAAI,UAAnB;AAAA;AAAA;AAGJ,SAAK,UAAU,QAAQ,CAAC,OAAO,GAAG,KAAK;AAAA;AAAA,EAGzC,cAAc,IAAmC;AAC/C,SAAK,UAAU,IAAI;AACnB,WAAO,MAAM;AACX,WAAK,UAAU,OAAO;AAAA;AAAA;AAAA,EAI1B,SAAS,MAAW,IAAc;AAChC,SAAK,UAAU,IAAI,MAAM;AACzB,WAAO,MAAM;AACX,WAAK,UAAU,OAAO;AACtB,WAAK,KAAK,OAAO;AAAA;AAAA;AAAA;AA1ChB;AA+CA,MAAM,sBAAsB,cAA4B,IAAI;",
-  "names": []
-}

package/_/views/ThemeProvider.js

@@ -1,45 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import React, { 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 /* @__PURE__ */ React.createElement(ThemeContext.Provider, {
-    value: themeContext
-  }, /* @__PURE__ */ React.createElement(Theme, {
-    name: props.defaultTheme,
-    disableThemeClass: props.disableRootThemeClass
-  }, props.children));
-}, "ThemeProvider");
-export {
-  GET_DEFAULT_THEME,
-  ThemeProvider
-};
-//# sourceMappingURL=ThemeProvider.js.map

package/src/views/SafeAreaProvider.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import { Platform } from 'react-native'
-import {
-  Metrics,
-  SafeAreaProvider as RNSafeAreaProvider,
-  initialWindowMetrics as defaultInitialWindowMetrics,
-} from 'react-native-safe-area-context'
-
-let defaultMetrics: Metrics | null = null
-
-export const SafeAreaProvider = ({
-  initialWindowMetrics,
-  children,
-}: {
-  children?: any
-  initialWindowMetrics?: any
-}) => {
-  if (!initialWindowMetrics && !defaultMetrics) {
-    defaultMetrics = Platform.select({
-      web: {
-        frame: { x: 0, y: 0, width: 0, height: 0 },
-        insets: { top: 0, left: 0, right: 0, bottom: 0 },
-      },
-      default: defaultInitialWindowMetrics,
-    })
-  }
-
-  return (
-    <RNSafeAreaProvider initialMetrics={initialWindowMetrics ?? defaultMetrics}>
-      {children}
-    </RNSafeAreaProvider>
-  )
-}

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../../tsconfig",
-  "compilerOptions": {
-    "rootDir": "../..",
-    "jsx": "preserve"
-  },
-  "include": ["src"]
-}