@tamagui/core 1.0.0-alpha.0 → 1.0.0-alpha.5

package/_/hooks/useTheme.js

@@ -1,94 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-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";
-import { useForceUpdate } from "./useForceUpdate";
-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(() => {
-  const parent = useContext(ThemeManagerContext);
-  const [name, setName] = useState(parent.name);
-  useEffect(() => {
-    return parent.onChangeTheme((next) => {
-      setName((prev) => {
-        if (prev === next)
-          return prev;
-        return next;
-      });
-    });
-  }, [parent]);
-  return name || "light";
-}, "useThemeName");
-const useDefaultThemeName = /* @__PURE__ */ __name(() => {
-  return useContext(ThemeContext)[GET_DEFAULT_THEME];
-}, "useDefaultThemeName");
-const useTheme = /* @__PURE__ */ __name(() => {
-  var _a;
-  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 = (_a = manager.name ? themes[manager.name] : themes.light) != null ? _a : 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
-};
-//# sourceMappingURL=useTheme.js.map

package/_/hooks/useTheme.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { Variable } from '../createVariable'\nimport { ThemeName } from '../types'\nimport { ThemeContext } from '../views/ThemeContext'\nimport { ThemeManagerContext } from '../views/ThemeManagerContext'\nimport { GET_DEFAULT_THEME } from '../views/ThemeProvider'\nimport { useForceUpdate } from './useForceUpdate'\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nconst areEqualSets = (a: Set<string>, b: Set<string>) => {\n  if (a.size !== b.size) return false\n  for (const val in a) {\n    if (!b.has(val)) {\n      return false\n    }\n  }\n  return true\n}\n\nexport const useThemeName = () => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent.name)\n  useEffect(() => {\n    return parent.onChangeTheme((next) => {\n      setName((prev) => {\n        if (prev === next) return prev\n        return next\n      })\n    })\n  }, [parent])\n  return name || 'light'\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)[GET_DEFAULT_THEME] as any as ThemeName\n}\n\nexport const useTheme = () => {\n  const forceUpdate = useForceUpdate()\n  const manager = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext)\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = manager.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      manager.track(st.uuid, st.keys)\n    }\n  })\n\n  useEffect(() => {\n    return manager.onUpdate(state.current.uuid, forceUpdate)\n  }, [])\n\n  const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light\n\n  return useMemo(\n    () => {\n      return new Proxy(theme, {\n        get(_, key: string) {\n          const name = manager.name\n          if (!name) {\n            return Reflect.get(_, key)\n          }\n          let activeTheme = themes[name]\n          if (!activeTheme) {\n            console.error('No theme by name', name, 'only:', themes, 'keeping current theme')\n            activeTheme = theme\n          }\n          const val = activeTheme[key]\n          if (process.env.NODE_ENV === 'development') {\n            if (typeof val === 'undefined') {\n              throw new Error(`No theme value \"${String(key)}\" in: ${Object.keys(activeTheme)}`)\n            }\n          }\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n          }\n          // TODO costly, can make faster (we need name mapping to og name, but val pointing to new val)\n          // console.log('returning new variable', val, key)\n          return new Variable({ val: val.val, name: key })\n        },\n      })\n    },\n    [\n      /* if concurrent mode wanted put manager.name here */\n    ]\n  )\n}\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAQA,MAAM,eAAe,wBAAC,GAAgB,MAAmB;AACvD,MAAI,EAAE,SAAS,EAAE;AAAM,WAAO;AAC9B,aAAW,OAAO,GAAG;AACnB,QAAI,CAAC,EAAE,IAAI,MAAM;AACf,aAAO;AAAA;AAAA;AAGX,SAAO;AAAA,GAPY;AAUd,MAAM,eAAe,6BAAM;AAChC,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,MAAM,WAAW,SAAS,OAAO;AACxC,YAAU,MAAM;AACd,WAAO,OAAO,cAAc,CAAC,SAAS;AACpC,cAAQ,CAAC,SAAS;AAChB,YAAI,SAAS;AAAM,iBAAO;AAC1B,eAAO;AAAA;AAAA;AAAA,KAGV,CAAC;AACJ,SAAO,QAAQ;AAAA,GAXW;AAcrB,MAAM,sBAAsB,6BAAM;AACvC,SAAO,WAAW,cAAc;AAAA,GADC;AAI5B,MAAM,WAAW,6BAAM;AA5C9B;AA6CE,QAAM,cAAc;AACpB,QAAM,UAAU,WAAW;AAC3B,QAAM,SAAS,WAAW;AAC1B,QAAM,QAAQ;AACd,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,MAAM,IAAI;AAAA,MACV,aAAa;AAAA;AAAA;AAGjB,QAAM,QAAQ,cAAc;AAG5B,4BAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,UAAM,MAAM,QAAQ,KAAK,IAAI,GAAG;AAChC,QAAI,CAAC,OAAO,CAAC,aAAa,GAAG,MAAM,MAAM;AACvC,cAAQ,MAAM,GAAG,MAAM,GAAG;AAAA;AAAA;AAI9B,YAAU,MAAM;AACd,WAAO,QAAQ,SAAS,MAAM,QAAQ,MAAM;AAAA,KAC3C;AAEH,QAAM,QAAS,cAAQ,OAAO,OAAO,QAAQ,QAAQ,OAAO,UAA7C,YAAuD,OAAO;AAE7E,SAAO,QACL,MAAM;AACJ,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAa;AAClB,cAAM,OAAO,QAAQ;AACrB,YAAI,CAAC,MAAM;AACT,iBAAO,QAAQ,IAAI,GAAG;AAAA;AAExB,YAAI,cAAc,OAAO;AACzB,YAAI,CAAC,aAAa;AAChB,kBAAQ,MAAM,oBAAoB,MAAM,SAAS,QAAQ;AACzD,wBAAc;AAAA;AAEhB,cAAM,MAAM,YAAY;AACxB,YAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAI,OAAO,QAAQ,aAAa;AAC9B,kBAAM,IAAI,MAAM,mBAAmB,OAAO,aAAa,OAAO,KAAK;AAAA;AAAA;AAGvE,YAAI,MAAM,QAAQ,aAAa;AAC7B,gBAAM,QAAQ,KAAK,IAAI;AAAA;AAIzB,eAAO,IAAI,SAAS,EAAE,KAAK,IAAI,KAAK,MAAM;AAAA;AAAA;AAAA,KAIhD;AAAA,GA1DoB;",
-  "names": []
-}

package/_/index.js

@@ -1,30 +0,0 @@
-export * from "./createComponent";
-export * from "./createShorthands";
-export * from "./createTheme";
-export * from "./createTamagui";
-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/getStylesAtomic";
-export * from "./helpers/matchMedia";
-export * from "./helpers/themeable";
-export * from "./hooks/useConstant";
-export * from "./hooks/useForceUpdate";
-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
-};
-//# sourceMappingURL=index.js.map

package/_/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/index.ts"],
-  "sourcesContent": ["export * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport { createTokens } from './createTokens'\nexport * from './createVariable'\nexport * from './styled'\nexport * from './types'\n\nexport * from './constants/pseudos'\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useForceUpdate'\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './views/Animated'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/TextAncestorContext'\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;",
-  "names": []
-}

package/_/static/postProcessStyles.js

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

package/_/static/postProcessStyles.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/static/postProcessStyles.tsx"],
-  "sourcesContent": ["import { getSplitStyles } from '../helpers/getSplitStyles'\nimport { StaticConfigParsed, TamaguiInternalConfig, ThemeObject } from '../types'\n\n// used only by static extractor\n\nexport const postProcessStyles = (\n  inStyles: any,\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject\n) => {\n  const { style, viewProps, pseudos, classNames } = getSplitStyles(inStyles, staticConfig, theme)\n  // flattening\n  const next = {}\n  for (const s of style) {\n    if (!s) continue\n    Object.assign(next, s)\n  }\n  Object.assign(next, pseudos)\n  return { style: next, viewProps, classNames }\n}\n"],
-  "mappings": ";;AAAA;AAKO,MAAM,oBAAoB,wBAC/B,UACA,cACA,UACG;AACH,QAAM,EAAE,OAAO,WAAW,SAAS,eAAe,eAAe,UAAU,cAAc;AAEzF,QAAM,OAAO;AACb,aAAW,KAAK,OAAO;AACrB,QAAI,CAAC;AAAG;AACR,WAAO,OAAO,MAAM;AAAA;AAEtB,SAAO,OAAO,MAAM;AACpB,SAAO,EAAE,OAAO,MAAM,WAAW;AAAA,GAbF;",
-  "names": []
-}

package/_/static.js

@@ -1,12 +0,0 @@
-export * from "./styled";
-export * from "./createComponent";
-export * from "./createTamagui";
-export * from "./constants/constants";
-export * from "./hooks/useMedia";
-export * from "./hooks/useTheme";
-export * from "./helpers/getStylesAtomic";
-export * from "./helpers/getSplitStyles";
-export * from "@tamagui/helpers";
-export * from "./constants/pseudos";
-export * from "./static/postProcessStyles";
-//# sourceMappingURL=static.js.map

package/_/static.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/static.ts"],
-  "sourcesContent": ["// only stuff that gets extracted or needed by tamagui-static\n\nexport * from './styled'\nexport * from './createComponent'\nexport * from './createTamagui'\nexport * from './constants/constants'\n\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/getSplitStyles'\nexport * from '@tamagui/helpers'\n\nexport * from './constants/pseudos'\n\n// -- below exports are only bundled compile-time --\n\nexport * from './static/postProcessStyles'\n"],
-  "mappings": "AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AAIA;",
-  "names": []
-}

package/_/styled.js

@@ -1,21 +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) {
-  const staticConfigProps = (() => {
-    if (options) {
-      const { variants, ...defaultProps } = options;
-      return { variants, defaultProps };
-    }
-    return {};
-  })();
-  const config = extendStaticConfig(Component, staticConfigProps);
-  const component = createComponent(config);
-  return component;
-}
-__name(styled, "styled");
-export {
-  styled
-};
-//# sourceMappingURL=styled.js.map

package/_/styled.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/styled.ts"],
-  "sourcesContent": ["import React from 'react'\n\nimport { createComponent } from './createComponent'\nimport { extendStaticConfig } from './helpers/extendStaticConfig'\nimport { StaticComponent, TamaguiConfig, Themes, Tokens } from './types'\n\nexport type GetProps<A> = A extends StaticComponent<infer Props>\n  ? Props\n  : A extends React.Component<infer Props>\n  ? Props\n  : {}\n\nexport function styled<\n  A extends StaticComponent | React.Component<any>,\n  StyledVariants extends void | {\n    [key: string]: {\n      [key: string]:\n        | Partial<GetProps<A>>\n        | ((\n            val: any,\n            config: {\n              tokens: TamaguiConfig['tokens']\n              theme: Themes extends { [key: string]: infer B } ? B : unknown\n            }\n          ) => Partial<GetProps<A>>)\n    }\n  }\n>(\n  Component: A,\n  options?: GetProps<A> & {\n    variants?: StyledVariants\n  }\n) {\n  const staticConfigProps = (() => {\n    if (options) {\n      const { variants, ...defaultProps } = options\n      return { variants, defaultProps }\n    }\n    return {}\n  })()\n  const config = extendStaticConfig(Component, staticConfigProps)\n  const component = createComponent(config!) // error is good here its on init\n\n  // type ParentVariants = A extends StaticComponent<any, infer Variants> ? Variants : {}\n\n  type VariantProps = StyledVariants extends void\n    ? {}\n    : {\n        // ensure variants actually defined\n        [Key in keyof StyledVariants]?: keyof StyledVariants[Key] extends `...${infer VariantSpread}`\n          ? VariantSpread extends keyof Tokens\n            ? keyof Tokens[VariantSpread] extends string | number\n              ? `$${keyof Tokens[VariantSpread]}`\n              : unknown\n            : unknown\n          : keyof StyledVariants[Key] extends 'true'\n          ? boolean\n          : keyof StyledVariants[Key]\n      }\n\n  return component as StaticComponent<\n    GetProps<A> & VariantProps\n    // adding this one causes infinite type recursion after a couple styled() exntesions\n    // VariantProps\n    // typeof config,\n    // ParentVariants\n  >\n}\n\n// TODO get name\n// const displayName = `styled(Component)`\n// Object.defineProperty(component, 'name', {\n//   value: displayName,\n//   writable: false,\n// })\n"],
-  "mappings": ";;AAEA;AACA;AASO,gBAgBL,WACA,SAGA;AACA,QAAM,oBAAqB,OAAM;AAC/B,QAAI,SAAS;AACX,YAAM,EAAE,aAAa,iBAAiB;AACtC,aAAO,EAAE,UAAU;AAAA;AAErB,WAAO;AAAA;AAET,QAAM,SAAS,mBAAmB,WAAW;AAC7C,QAAM,YAAY,gBAAgB;AAmBlC,SAAO;AAAA;AAhDO;",
-  "names": []
-}

package/_/types.js

@@ -1 +0,0 @@
-//# sourceMappingURL=types.js.map

package/_/types.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

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/Animated.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/views/Animated.tsx"],
-  "sourcesContent": ["import React, { useMemo } from 'react'\nimport {\n  Animated,\n  PerpectiveTransform,\n  RotateTransform,\n  RotateXTransform,\n  RotateYTransform,\n  RotateZTransform,\n  ScaleTransform,\n  ScaleXTransform,\n  ScaleYTransform,\n  SkewXTransform,\n  SkewYTransform,\n  TranslateXTransform,\n  TranslateYTransform,\n} from 'react-native'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { useConstant } from '../hooks/useConstant'\nimport { StackProps } from '../types'\nimport { Stack } from './Stack'\n\nconst defaultAnimation = {\n  from: {\n    opacity: 0,\n    translateY: 12,\n  },\n  to: {\n    opacity: 1,\n    translateY: 0,\n  },\n}\n\ntype AnimatableProps = Partial<\n  Pick<StackProps, 'backgroundColor' | 'borderColor' | 'opacity'> &\n    PerpectiveTransform &\n    RotateTransform &\n    RotateXTransform &\n    RotateYTransform &\n    RotateZTransform &\n    ScaleTransform &\n    ScaleXTransform &\n    ScaleYTransform &\n    TranslateXTransform &\n    TranslateYTransform &\n    SkewXTransform &\n    SkewYTransform\n>\n\nconst styleKeys = {\n  opacity: true,\n  backgroundColor: true,\n  borderColor: true,\n}\n\nexport type AnimatedStackProps = StackProps & {\n  animateState?: 'in' | 'out'\n  velocity?: number\n  animation?: {\n    from: AnimatableProps\n    to: AnimatableProps\n  }\n}\n\nexport const AnimatedStack = ({\n  animateState = 'in',\n  animation = defaultAnimation,\n  velocity = 6,\n  children,\n  animated,\n  ...props\n}: AnimatedStackProps) => {\n  const driver = useConstant(() => {\n    return new Animated.Value(0)\n  })\n\n  const animatedProps = useMemo(() => {\n    if (!animated) {\n      return null\n    }\n\n    const styleProps = {}\n    const transform: any = []\n\n    for (const key in animation.from) {\n      const fromVal = animation.from[key]\n      const toVal = animation.to[key]\n      const interpolatedVal = driver.interpolate({\n        inputRange: [0, 1],\n        outputRange: [fromVal, toVal],\n      })\n      if (styleKeys[key]) {\n        styleProps[key] = interpolatedVal\n      } else {\n        transform.push({\n          [key]: interpolatedVal,\n        })\n      }\n    }\n    return { transform, ...styleProps }\n  }, [animated, animateState])\n\n  useIsomorphicLayoutEffect(() => {\n    if (!animated) {\n      return\n    }\n    Animated.spring(driver, {\n      useNativeDriver: true,\n      velocity,\n      toValue: animateState === 'in' ? 1 : 0,\n    }).start()\n  }, [animated, animateState])\n\n  const childrenMemo = useMemo(() => children, [children])\n\n  return (\n    <Stack animated={animated} {...props} {...animatedProps}>\n      {childrenMemo}\n    </Stack>\n  )\n}\n"],
-  "mappings": ";;AAAA;AACA;AAAA;AAAA;AAgBA;AACA;AAEA;AAEA,MAAM,mBAAmB;AAAA,EACvB,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA;AAAA,EAEd,IAAI;AAAA,IACF,SAAS;AAAA,IACT,YAAY;AAAA;AAAA;AAoBhB,MAAM,YAAY;AAAA,EAChB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,aAAa;AAAA;AAYR,MAAM,gBAAgB,wBAAC;AAAA,EAC5B,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA;AAAA,KACG;AAAA,MACqB;AACxB,QAAM,SAAS,YAAY,MAAM;AAC/B,WAAO,IAAI,SAAS,MAAM;AAAA;AAG5B,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,CAAC,UAAU;AACb,aAAO;AAAA;AAGT,UAAM,aAAa;AACnB,UAAM,YAAiB;AAEvB,eAAW,OAAO,UAAU,MAAM;AAChC,YAAM,UAAU,UAAU,KAAK;AAC/B,YAAM,QAAQ,UAAU,GAAG;AAC3B,YAAM,kBAAkB,OAAO,YAAY;AAAA,QACzC,YAAY,CAAC,GAAG;AAAA,QAChB,aAAa,CAAC,SAAS;AAAA;AAEzB,UAAI,UAAU,MAAM;AAClB,mBAAW,OAAO;AAAA,aACb;AACL,kBAAU,KAAK;AAAA,WACZ,MAAM;AAAA;AAAA;AAAA;AAIb,WAAO,EAAE,cAAc;AAAA,KACtB,CAAC,UAAU;AAEd,4BAA0B,MAAM;AAC9B,QAAI,CAAC,UAAU;AACb;AAAA;AAEF,aAAS,OAAO,QAAQ;AAAA,MACtB,iBAAiB;AAAA,MACjB;AAAA,MACA,SAAS,iBAAiB,OAAO,IAAI;AAAA,OACpC;AAAA,KACF,CAAC,UAAU;AAEd,QAAM,eAAe,QAAQ,MAAM,UAAU,CAAC;AAE9C,SACE,oCAAC,OAAD;AAAA,IAAO;AAAA,OAAwB;AAAA,OAAW;AAAA,KACvC;AAAA,GArDsB;",
-  "names": []
-}

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/Stack.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/views/Stack.tsx"],
-  "sourcesContent": ["import { stackDefaultStyles } from '../constants/constants'\nimport { createComponent } from '../createComponent'\nimport { StackProps } from '../types'\n\nexport const Stack = createComponent<StackProps>({\n  defaultProps: {\n    ...stackDefaultStyles,\n    flexDirection: 'column',\n  },\n})\n\n// test types\n// export const YStack = styled(Stack, {\n//   flexDirection: 'column',\n// })\n// // test types\n// const x00 = <Stack missing={0} /> // should err\n// const x0 = <YStack missing={0} /> // should err\n// const x1 = (props: StackProps) => <YStack {...props} />\n// type ys = typeof YStack\n// type ysv = ys extends StaticComponent<any, infer V> ? V : unknown\n"],
-  "mappings": "AAAA;AACA;AAGO,MAAM,QAAQ,gBAA4B;AAAA,EAC/C,cAAc;AAAA,OACT;AAAA,IACH,eAAe;AAAA;AAAA;",
-  "names": []
-}

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/Text.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/views/Text.tsx"],
-  "sourcesContent": ["import { isWeb } from '../constants/platform'\nimport { createComponent } from '../createComponent'\nimport { stylePropsTextOnly, validStyles } from '../static'\nimport { TextProps } from '../types'\n\nconst ellipseStyle = {\n  maxWidth: '100%',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps>({\n  isText: true,\n  defaultProps: {\n    display: isWeb ? 'inline' : 'inline-flex',\n    boxSizing: 'border-box',\n    fontFamily: 'System',\n    wordWrap: 'break-word',\n  },\n  variants: {\n    numberOfLines: {\n      1: ellipseStyle,\n      // TODO imply fn, test 1, could do types `>1` `<2`\n      '[number]': (lines) => (lines > 1 ? { WebkitLineClamp: 1 } : null),\n    },\n\n    selectable: {\n      true: {\n        userSelect: 'text',\n      },\n      false: {\n        userSelect: 'none',\n      },\n    },\n\n    pressable: {\n      true: {\n        cursor: 'pointer',\n      },\n    },\n\n    ellipse: {\n      true: isWeb\n        ? ellipseStyle\n        : {\n            numberOfLines: 1,\n            lineBreakMode: 'clip',\n          },\n    },\n  },\n  // TODO document\n  deoptProps: new Set(isWeb ? [] : ['ellipse']),\n  validStyles: {\n    ...validStyles,\n    ...stylePropsTextOnly,\n    ...(isWeb && {\n      userSelect: true,\n      textOverflow: true,\n      whiteSpace: true,\n      wordWrap: true,\n      selectable: true,\n      cursor: true,\n    }),\n  },\n})\n"],
-  "mappings": "AAAA;AACA;AACA;AAGA,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAAA;AAGP,MAAM,OAAO,gBAA2B;AAAA,EAC7C,QAAQ;AAAA,EACR,cAAc;AAAA,IACZ,SAAS,QAAQ,WAAW;AAAA,IAC5B,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA;AAAA,EAEZ,UAAU;AAAA,IACR,eAAe;AAAA,MACb,GAAG;AAAA,MAEH,YAAY,CAAC,UAAW,QAAQ,IAAI,EAAE,iBAAiB,MAAM;AAAA;AAAA,IAG/D,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA;AAAA,MAEd,OAAO;AAAA,QACL,YAAY;AAAA;AAAA;AAAA,IAIhB,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ;AAAA;AAAA;AAAA,IAIZ,SAAS;AAAA,MACP,MAAM,QACF,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA;AAAA;AAAA;AAAA,EAKzB,YAAY,IAAI,IAAI,QAAQ,KAAK,CAAC;AAAA,EAClC,aAAa;AAAA,OACR;AAAA,OACA;AAAA,OACC,SAAS;AAAA,MACX,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ;AAAA;AAAA;AAAA;",
-  "names": []
-}

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/TextAncestorContext.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/views/TextAncestorContext.tsx"],
-  "sourcesContent": ["import React from 'react'\n\nimport { rnw } from '../constants/rnw'\n\nexport const TextAncestorContext = rnw?.TextAncestorContext\n\nexport const TextAncestorProvider = (props) => {\n  if (TextAncestorContext) {\n    return <TextAncestorContext.Provider value={false}>{props.children}</TextAncestorContext.Provider>\n  }\n  return props.children\n}\n"],
-  "mappings": ";;AAAA;AAAA;AAEA;AAEO,MAAM,sBAAsB,iCAAK;AAEjC,MAAM,uBAAuB,wBAAC,UAAU;AAC7C,MAAI,qBAAqB;AACvB,WAAO,oCAAC,oBAAoB,UAArB;AAAA,MAA8B,OAAO;AAAA,OAAQ,MAAM;AAAA;AAE5D,SAAO,MAAM;AAAA,GAJqB;",
-  "names": []
-}

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/ThemeContext.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/views/ThemeContext.tsx"],
-  "sourcesContent": ["import { createContext } from 'react'\n\nimport { Themes } from '../types'\n\nexport const ThemeContext = createContext<Themes>(null as any)\n"],
-  "mappings": "AAAA;AAIO,MAAM,eAAe,cAAsB;",
-  "names": []
-}

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/ThemeInverse.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/views/ThemeInverse.tsx"],
-  "sourcesContent": ["import React from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\ntype StringRecord = { [key: string]: string }\n\nlet inversions: StringRecord = {\n  light: 'dark',\n  dark: 'light',\n}\n\nexport function setThemeInversions(next: StringRecord) {\n  inversions = next\n}\n\nexport const ThemeInverse = (props: { children: any }) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const name = inversions[themeName] || inversions[defaultTheme] || null\n  console.log('todo fixme invert', { themeName, defaultTheme, next: name })\n  return <Theme name={name}>{props.children}</Theme>\n}\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AAIA,IAAI,aAA2B;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AAAA;AAGD,4BAA4B,MAAoB;AACrD,eAAa;AAAA;AADC;AAIT,MAAM,eAAe,wBAAC,UAA6B;AACxD,QAAM,YAAY;AAClB,QAAM,eAAe;AACrB,QAAM,OAAO,WAAW,cAAc,WAAW,iBAAiB;AAClE,UAAQ,IAAI,qBAAqB,EAAE,WAAW,cAAc,MAAM;AAClE,SAAO,oCAAC,OAAD;AAAA,IAAO;AAAA,KAAa,MAAM;AAAA,GALP;",
-  "names": []
-}