@tamagui/core 1.0.0-alpha.0

package/dist/styled.js

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

package/dist/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/styled.ts"],
+  "sourcesContent": ["import React from 'react'\n\nimport { createComponent } from './createComponent'\nimport { extendStaticConfig } from './helpers/extendStaticConfig'\nimport { MediaProps, StaticComponent, StaticConfig, TamaguiConfig, Themes, Tokens } from './types'\n\nexport function styled<\n  ParentComponent extends StaticComponent | React.Component<any>,\n  Variants extends GetVariants<ParentComponent>\n>(\n  Component: ParentComponent,\n  options?: GetProps<ParentComponent> & {\n    variants?: Variants\n  },\n  staticExtractionOptions?: StaticConfig\n) {\n  const staticConfigProps: StaticConfig = (() => {\n    if (options) {\n      const { variants, ...defaultProps } = options\n      return { ...staticExtractionOptions, 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  type VariantProps = GetVariantProps<Variants>\n  return component as StaticComponent<\n    Omit<GetProps<ParentComponent>, keyof VariantProps> & VariantProps & MediaProps<VariantProps>\n    // leave this out it was causing infinite recursion type issues\n    // VariantProps\n  >\n}\n\n// type ParentVariants = A extends StaticComponent<any, infer Variants> ? Variants : {}\n\nexport type GetProps<A> = A extends StaticComponent<infer Props>\n  ? Props\n  : A extends React.Component<infer Props>\n  ? Props\n  : {}\n\nexport type GetVariants<ParentComponent extends StaticComponent | React.Component<any>> = void | {\n  [key: string]: {\n    [key: string]:\n      | Partial<GetProps<ParentComponent>>\n      | ((\n          val: any,\n          config: {\n            tokens: TamaguiConfig['tokens']\n            theme: Themes extends { [key: string]: infer B } ? B : unknown\n            props: GetProps<ParentComponent>\n          }\n        ) => Partial<GetProps<ParentComponent>>)\n  }\n}\n\nexport type GetVariantProps<Variants> = Variants extends void\n  ? {}\n  : {\n      // ensure variants actually defined\n      [Key in keyof Variants]?: keyof Variants[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 Variants[Key] extends 'true'\n        ? boolean\n        : keyof Exclude<Variants[Key], undefined>\n    }\n\n// type X = { ok: 1 }\n// type Y = { okk: 2; ok: 3 }\n// type Z = X & Y\n// type Z2 = Z\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;AAGO,gBAIL,WACA,SAGA,yBACA;AACA,QAAM,oBAAmC,OAAM;AAC7C,QAAI,SAAS;AACX,YAAM,EAAE,aAAa,iBAAiB;AACtC,aAAO,KAAK,yBAAyB,UAAU;AAAA;AAEjD,WAAO;AAAA;AAET,QAAM,SAAS,mBAAmB,WAAW;AAC7C,QAAM,YAAY,gBAAgB;AAElC,SAAO;AAAA;AApBO;",
+  "names": []
+}

package/dist/types.js

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

package/dist/types.js.map

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

package/dist/views/Animated.js

@@ -0,0 +1,79 @@
+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/dist/views/Animated.js.map

@@ -0,0 +1,7 @@
+{
+  "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/dist/views/SafeAreaProvider.js

@@ -0,0 +1,30 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import React from "react";
+import { Platform } from "react-native";
+import {
+  SafeAreaProvider as RNSafeAreaProvider,
+  initialWindowMetrics as defaultInitialWindowMetrics
+} from "react-native-safe-area-context";
+let defaultMetrics = null;
+const SafeAreaProvider = /* @__PURE__ */ __name(({
+  initialWindowMetrics,
+  children
+}) => {
+  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 /* @__PURE__ */ React.createElement(RNSafeAreaProvider, {
+    initialMetrics: initialWindowMetrics ?? defaultMetrics
+  }, children);
+}, "SafeAreaProvider");
+export {
+  SafeAreaProvider
+};
+//# sourceMappingURL=SafeAreaProvider.js.map

package/dist/views/SafeAreaProvider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/views/SafeAreaProvider.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Platform } from 'react-native'\nimport {\n  Metrics,\n  SafeAreaProvider as RNSafeAreaProvider,\n  initialWindowMetrics as defaultInitialWindowMetrics,\n} from 'react-native-safe-area-context'\n\nlet defaultMetrics: Metrics | null = null\n\nexport const SafeAreaProvider = ({\n  initialWindowMetrics,\n  children,\n}: {\n  children?: any\n  initialWindowMetrics?: any\n}) => {\n  if (!initialWindowMetrics && !defaultMetrics) {\n    defaultMetrics = Platform.select({\n      web: {\n        frame: { x: 0, y: 0, width: 0, height: 0 },\n        insets: { top: 0, left: 0, right: 0, bottom: 0 },\n      },\n      default: defaultInitialWindowMetrics,\n    })\n  }\n\n  return (\n    <RNSafeAreaProvider initialMetrics={initialWindowMetrics ?? defaultMetrics}>\n      {children}\n    </RNSafeAreaProvider>\n  )\n}\n"],
+  "mappings": ";;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAMA,IAAI,iBAAiC;AAE9B,MAAM,mBAAmB,wBAAC;AAAA,EAC/B;AAAA,EACA;AAAA,MAII;AACJ,MAAI,CAAC,wBAAwB,CAAC,gBAAgB;AAC5C,qBAAiB,SAAS,OAAO;AAAA,MAC/B,KAAK;AAAA,QACH,OAAO,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,GAAG,QAAQ;AAAA,QACvC,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;AAAA;AAAA,MAE/C,SAAS;AAAA;AAAA;AAIb,SACE,oCAAC,oBAAD;AAAA,IAAoB,gBAAgB,wBAAwB;AAAA,KACzD;AAAA,GAnByB;",
+  "names": []
+}

package/dist/views/Stack.js

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

package/dist/views/Stack.js.map

@@ -0,0 +1,7 @@
+{
+  "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/dist/views/Text.js

@@ -0,0 +1,60 @@
+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/dist/views/Text.js.map

@@ -0,0 +1,7 @@
+{
+  "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/dist/views/TextAncestorContext.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import React from "react";
+import { rnw } from "../constants/rnw";
+const TextAncestorContext = rnw?.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/dist/views/TextAncestorContext.js.map

@@ -0,0 +1,7 @@
+{
+  "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;AAEA;AAEO,MAAM,sBAAsB,KAAK;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/dist/views/Theme.js

@@ -0,0 +1,56 @@
+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) => {
+  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 = themes[name]?.["color"]?.["variable"];
+    return /* @__PURE__ */ React.createElement("div", {
+      className: getThemeParentClassName(name),
+      style: { display: "contents", color }
+    }, contents);
+  }
+  return contents;
+}, "Theme");
+export {
+  Theme
+};
+//# sourceMappingURL=Theme.js.map

package/dist/views/Theme.js.map

@@ -0,0 +1,7 @@
+{
+  "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;AAC1C,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,OAAO,QAAQ,WAAW;AACxC,WACE,oCAAC,OAAD;AAAA,MACE,WAAW,wBAAwB;AAAA,MAEnC,OAAO,EAAE,SAAS,YAAY;AAAA,OAE7B;AAAA;AAKP,SAAO;AAAA,GAxDY;",
+  "names": []
+}

package/dist/views/ThemeContext.js

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

package/dist/views/ThemeContext.js.map

@@ -0,0 +1,7 @@
+{
+  "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/dist/views/ThemeInverse.js

@@ -0,0 +1,27 @@
+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/dist/views/ThemeInverse.js.map

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

package/dist/views/ThemeManagerContext.js

@@ -0,0 +1,55 @@
+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() {
+    if (!this.name) {
+      this.keys.clear();
+    }
+    for (const [uuid, keys] of this.keys.entries()) {
+      if (keys.size) {
+        this.listeners.get(uuid)?.();
+      }
+    }
+    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/dist/views/ThemeManagerContext.js.map

@@ -0,0 +1,7 @@
+{
+  "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;AACP,QAAI,CAAC,KAAK,MAAM;AACd,WAAK,KAAK;AAAA;AAEZ,eAAW,CAAC,MAAM,SAAS,KAAK,KAAK,WAAW;AAC9C,UAAI,KAAK,MAAM;AACb,aAAK,UAAU,IAAI;AAAA;AAAA;AAGvB,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/dist/views/ThemeProvider.js

@@ -0,0 +1,45 @@
+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/dist/views/ThemeProvider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/views/ThemeProvider.tsx"],
+  "sourcesContent": ["import React, { useMemo } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getHasConfigured, getThemeParentClassName } from '../createTamagui'\nimport { Theme } from './Theme'\nimport { ThemeContext } from './ThemeContext'\n\nexport type ThemeProviderProps = {\n  themes: any\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  children?: any\n}\n\nexport const GET_DEFAULT_THEME = '___TGUI'\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  if (!getHasConfigured()) {\n    throw new Error(`Missing configureThemes() call, add to your root file`)\n  }\n\n  // ensure theme is attached to root body node as well to work with modals by default\n  useIsomorphicLayoutEffect(() => {\n    if (props.disableRootThemeClass) {\n      return\n    }\n    if (typeof document !== 'undefined') {\n      const cns = getThemeParentClassName(`${props.defaultTheme}`).split(' ')\n      cns.forEach((cn) => document.body.classList.add(cn))\n      return () => {\n        cns.forEach((cn) => document.body.classList.remove(cn))\n      }\n    }\n  }, [])\n\n  const themeContext = useMemo(() => {\n    return new Proxy(props.themes, {\n      get(target, key) {\n        if (key === GET_DEFAULT_THEME) return props.defaultTheme\n        return Reflect.get(target, key)\n      },\n    })\n  }, [props.themes])\n\n  return (\n    <ThemeContext.Provider value={themeContext}>\n      <Theme name={props.defaultTheme} disableThemeClass={props.disableRootThemeClass}>\n        {props.children}\n      </Theme>\n    </ThemeContext.Provider>\n  )\n}\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AACA;AACA;AASO,MAAM,oBAAoB;AAE1B,MAAM,gBAAgB,wBAAC,UAA8B;AAC1D,MAAI,CAAC,oBAAoB;AACvB,UAAM,IAAI,MAAM;AAAA;AAIlB,4BAA0B,MAAM;AAC9B,QAAI,MAAM,uBAAuB;AAC/B;AAAA;AAEF,QAAI,OAAO,aAAa,aAAa;AACnC,YAAM,MAAM,wBAAwB,GAAG,MAAM,gBAAgB,MAAM;AACnE,UAAI,QAAQ,CAAC,OAAO,SAAS,KAAK,UAAU,IAAI;AAChD,aAAO,MAAM;AACX,YAAI,QAAQ,CAAC,OAAO,SAAS,KAAK,UAAU,OAAO;AAAA;AAAA;AAAA,KAGtD;AAEH,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO,IAAI,MAAM,MAAM,QAAQ;AAAA,MAC7B,IAAI,QAAQ,KAAK;AACf,YAAI,QAAQ;AAAmB,iBAAO,MAAM;AAC5C,eAAO,QAAQ,IAAI,QAAQ;AAAA;AAAA;AAAA,KAG9B,CAAC,MAAM;AAEV,SACE,oCAAC,aAAa,UAAd;AAAA,IAAuB,OAAO;AAAA,KAC5B,oCAAC,OAAD;AAAA,IAAO,MAAM,MAAM;AAAA,IAAc,mBAAmB,MAAM;AAAA,KACvD,MAAM;AAAA,GA/Bc;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@tamagui/core",
+  "version": "1.0.0-alpha.0",
+  "source": "src/index.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "typings": "types.d.ts",
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch"
+  },
+  "dependencies": {
+    "@tamagui/helpers": "^1.0.0-alpha.0",
+    "react": "*",
+    "react-dom": "*",
+    "react-native-safe-area-context": "^3.3.0"
+  },
+  "peerDependencies": {
+    "react-native-web": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.0-alpha.0",
+    "@types/react": "^17.0.35",
+    "esbuild": "^0.11.20",
+    "typescript": "^4.4.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=16"
+  }
+}

package/src/constants/constants.ts

@@ -0,0 +1,12 @@
+import { isWeb } from './platform'
+
+export const stackDefaultStyles = {
+  alignItems: 'stretch',
+  flexShrink: 0,
+  // more accurately match react-native defaults on web
+  ...(isWeb && {
+    display: 'flex',
+    flexBasis: 'auto',
+    boxSizing: 'border-box',
+  }),
+}

package/src/constants/platform.ts

@@ -0,0 +1,15 @@
+import { useEffect, useLayoutEffect } from 'react'
+import { Platform } from 'react-native'
+
+export const isWeb = process.env.TAMAGUI_TARGET !== 'web' ? false : Platform?.OS === 'web'
+export const isSSR = isWeb && typeof window === 'undefined'
+export const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect
+export const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')
+export const supportsTouchWeb = typeof window !== 'undefined' && 'ontouchstart' in window
+export const isTouchDevice = !isWeb || supportsTouchWeb
+export const isWebIOS =
+  isWeb &&
+  typeof navigator !== 'undefined' &&
+  (/iPad|iPhone|iPod/.test(navigator.platform) ||
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
+  !window['MSStream']

package/src/constants/pseudos.ts

@@ -0,0 +1,14 @@
+export const pseudos = {
+  focusStyle: {
+    name: 'focus',
+    priority: 3,
+  },
+  pressStyle: {
+    name: 'active',
+    priority: 2,
+  },
+  hoverStyle: {
+    name: 'hover',
+    priority: 1,
+  },
+}