expo-dev-client-components 1.0.0

package/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ['universe/native', 'universe/web'],
+  ignorePatterns: ['build'],
+};

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+## Unpublished
+
+### 🛠 Breaking changes
+
+### 🎉 New features
+
+### 🐛 Bug fixes
+
+### 💡 Others
+
+## 1.0.0 — 2021-12-22
+
+_This version does not introduce any user-facing changes._

package/README.md

@@ -0,0 +1,37 @@
+# expo-dev-client-components
+
+A package for sharing React Native components between different dev-client RN apps
+
+## API documentation
+
+```tsx
+import { View, Spacer, Row, useExpoTheme, ChevronRightICon } from 'expo-dev-client-components';
+
+function ExampleRow() {
+  const theme = useExpoTheme();
+
+  return (
+    <View px="small" py="large">
+      <Row align="center">
+        <ChevronRightIcon />
+        <Spacer.Horizontal size="tiny" />
+        <Text size="large" style={{ color: theme.text.default }}>
+          Enter URL manually
+        </Text>
+      </Row>
+    </View>
+  );
+}
+```
+
+## Installation in managed Expo projects
+
+There are no native dependencies exported and so this module should be compatible with any RN project
+
+## Installation in bare React Native projects
+
+There are no native dependencies exported and so this module should be compatible with any RN project
+
+## Contributing
+
+Contributions are very welcome! Please refer to guidelines described in the [contributing guide](https://github.com/expo/expo#contributing).

package/build/Button.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Animated } from 'react-native';
+declare const Container: React.ForwardRefExoticComponent<Pick<Animated.AnimatedProps<import("react-native").PressableProps & React.RefAttributes<import("react-native").View>> & {
+    children?: React.ReactNode;
+} & {
+    margin?: "small" | "medium" | "large" | "micro" | "tiny" | "xl" | undefined;
+    mx?: "small" | "medium" | "large" | "micro" | "tiny" | undefined;
+    my?: "small" | "medium" | "large" | "micro" | "tiny" | undefined;
+    padding?: "small" | "medium" | "large" | "micro" | "tiny" | "xl" | undefined;
+    px?: "small" | "medium" | "large" | "micro" | "tiny" | "xl" | undefined;
+    py?: "small" | "medium" | "large" | "micro" | "tiny" | "xl" | undefined;
+    rounded?: "none" | "small" | "medium" | "large" | "full" | undefined;
+    roundedTop?: "none" | "small" | "medium" | "large" | "full" | undefined;
+    roundedBottom?: "none" | "small" | "medium" | "large" | "full" | undefined;
+    bg?: "transparent" | "primary" | "secondary" | "tertiary" | "ghost" | "default" | "disabled" | undefined;
+    border?: "ghost" | undefined;
+    shadow?: "button" | undefined;
+}, keyof import("react-native").PressableProps | "key" | "bg" | "border" | "shadow" | "margin" | "mx" | "my" | "padding" | "px" | "py" | "rounded" | "roundedTop" | "roundedBottom"> & React.RefAttributes<Animated.AnimatedProps<import("react-native").PressableProps & React.RefAttributes<import("react-native").View>>>>;
+export declare const Button: {
+    Container: React.ForwardRefExoticComponent<Pick<Animated.AnimatedProps<import("react-native").PressableProps & React.RefAttributes<import("react-native").View>> & {
+        children?: React.ReactNode;
+    } & {
+        margin?: "small" | "medium" | "large" | "micro" | "tiny" | "xl" | undefined;
+        mx?: "small" | "medium" | "large" | "micro" | "tiny" | undefined;
+        my?: "small" | "medium" | "large" | "micro" | "tiny" | undefined;
+        padding?: "small" | "medium" | "large" | "micro" | "tiny" | "xl" | undefined;
+        px?: "small" | "medium" | "large" | "micro" | "tiny" | "xl" | undefined;
+        py?: "small" | "medium" | "large" | "micro" | "tiny" | "xl" | undefined;
+        rounded?: "none" | "small" | "medium" | "large" | "full" | undefined;
+        roundedTop?: "none" | "small" | "medium" | "large" | "full" | undefined;
+        roundedBottom?: "none" | "small" | "medium" | "large" | "full" | undefined;
+        bg?: "transparent" | "primary" | "secondary" | "tertiary" | "ghost" | "default" | "disabled" | undefined;
+        border?: "ghost" | undefined;
+        shadow?: "button" | undefined;
+    }, keyof import("react-native").PressableProps | "key" | "bg" | "border" | "shadow" | "margin" | "mx" | "my" | "padding" | "px" | "py" | "rounded" | "roundedTop" | "roundedBottom"> & React.RefAttributes<Animated.AnimatedProps<import("react-native").PressableProps & React.RefAttributes<import("react-native").View>>>>;
+    ScaleOnPressContainer: typeof ScaleOnPressContainer;
+    Text: React.ForwardRefExoticComponent<import("react-native").TextProps & {
+        children?: React.ReactNode;
+    } & {
+        color?: "transparent" | "primary" | "secondary" | "tertiary" | "ghost" | "default" | undefined;
+        align?: "center" | undefined;
+        size?: "small" | "medium" | "large" | undefined;
+        leading?: "large" | undefined;
+        type?: "mono" | undefined;
+        weight?: "normal" | "bold" | "medium" | "thin" | "extralight" | "light" | "semibold" | "extrabold" | "black" | undefined;
+    } & React.RefAttributes<import("react-native").TextProps>>;
+};
+declare type ScalingPressableProps = {
+    minScale?: number;
+};
+declare function ScaleOnPressContainer({ minScale, ...props }: React.ComponentProps<typeof Container> & ScalingPressableProps): JSX.Element;
+export {};

package/build/Button.js

@@ -0,0 +1,154 @@
+import { lightTheme, darkTheme, borderRadius, shadows, palette } from '@expo/styleguide-native';
+import * as React from 'react';
+import { Pressable as RNPressable, Text as RNText, Animated, useColorScheme } from 'react-native';
+import { create } from 'react-native-primitives';
+import { rounded, margin, padding, text } from './theme';
+const AnimatedPressable = Animated.createAnimatedComponent(RNPressable);
+const Text = create(RNText, {
+    base: {
+        fontWeight: '400',
+        color: lightTheme.text.default,
+        fontSize: 16,
+    },
+    props: {
+        accessibilityRole: 'text',
+    },
+    variants: {
+        ...text,
+        color: {
+            primary: { color: lightTheme.button.primary.foreground },
+            secondary: { color: lightTheme.button.secondary.foreground },
+            tertiary: { color: lightTheme.button.tertiary.foreground },
+            ghost: { color: lightTheme.button.ghost.foreground },
+            transparent: { color: lightTheme.button.transparent.foreground },
+            default: { color: lightTheme.text.default },
+        },
+    },
+    selectors: {
+        dark: {
+            base: {
+                color: darkTheme.text.default,
+            },
+            color: {
+                primary: { color: darkTheme.button.primary.foreground },
+                secondary: { color: darkTheme.button.secondary.foreground },
+                tertiary: { color: darkTheme.button.tertiary.foreground },
+                ghost: { color: darkTheme.button.ghost.foreground },
+                transparent: { color: darkTheme.button.transparent.foreground },
+                default: { color: darkTheme.text.default },
+            },
+        },
+    },
+});
+const Container = create(AnimatedPressable, {
+    base: {
+        overflow: 'hidden',
+        borderRadius: borderRadius.medium,
+    },
+    props: {
+        accessibilityRole: 'button',
+        android_disableSound: true,
+    },
+    variants: {
+        bg: {
+            default: { backgroundColor: lightTheme.background.default },
+            primary: { backgroundColor: lightTheme.button.primary.background },
+            secondary: { backgroundColor: lightTheme.button.secondary.background },
+            tertiary: { backgroundColor: lightTheme.button.tertiary.background },
+            ghost: { backgroundColor: lightTheme.button.ghost.background },
+            transparent: { backgroundColor: lightTheme.button.transparent.background },
+            disabled: { backgroundColor: lightTheme.status.default },
+        },
+        border: {
+            ghost: { borderColor: lightTheme.button.ghost.border, borderWidth: 1 },
+        },
+        shadow: {
+            button: shadows.button,
+        },
+        ...rounded,
+        ...padding,
+        ...margin,
+    },
+    selectors: {
+        dark: {
+            bg: {
+                default: { backgroundColor: darkTheme.background.default },
+                primary: { backgroundColor: darkTheme.button.primary.background },
+                secondary: { backgroundColor: darkTheme.button.secondary.background },
+                tertiary: { backgroundColor: darkTheme.button.tertiary.background },
+                ghost: { backgroundColor: darkTheme.button.ghost.background },
+                transparent: { backgroundColor: darkTheme.button.transparent.background },
+                disabled: { backgroundColor: darkTheme.status.default },
+            },
+        },
+    },
+});
+export const Button = {
+    Container,
+    ScaleOnPressContainer,
+    Text,
+};
+const lightHighlightColorMap = {
+    disabled: 'transparent',
+    default: lightTheme.background.secondary,
+    primary: lightTheme.background.tertiary,
+    secondary: lightTheme.background.quaternary,
+    tertiary: palette.light.gray[600],
+    ghost: lightTheme.background.tertiary,
+    transparent: lightTheme.background.secondary,
+};
+const darkHighlightColorMap = {
+    disabled: 'transparent',
+    default: darkTheme.background.secondary,
+    primary: darkTheme.background.tertiary,
+    secondary: darkTheme.background.quaternary,
+    tertiary: palette.dark.gray[600],
+    ghost: darkTheme.background.tertiary,
+    transparent: darkTheme.background.secondary,
+};
+const highlightColorMap = {
+    dark: darkHighlightColorMap,
+    light: lightHighlightColorMap,
+};
+function ScaleOnPressContainer({ minScale = 0.975, ...props }) {
+    const theme = useColorScheme();
+    const animatedValue = React.useRef(new Animated.Value(0));
+    const [isPressing, setIsPressing] = React.useState(false);
+    const onPressIn = React.useCallback(() => {
+        setIsPressing(true);
+        Animated.spring(animatedValue.current, {
+            toValue: 1,
+            stiffness: 1000,
+            damping: 500,
+            mass: 3,
+            overshootClamping: true,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    const onPressOut = React.useCallback(() => {
+        setIsPressing(false);
+        Animated.spring(animatedValue.current, {
+            toValue: 0,
+            stiffness: 1000,
+            damping: 500,
+            mass: 3,
+            overshootClamping: true,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    const scale = animatedValue.current.interpolate({
+        inputRange: [0, 1],
+        outputRange: [1, minScale],
+    });
+    const scaleStyle = { transform: [{ scale }] };
+    let backgroundColor = 'transparent';
+    if (props.bg && isPressing && theme != null) {
+        backgroundColor = highlightColorMap[theme][props.bg];
+    }
+    const underlayStyle = {
+        backgroundColor,
+    };
+    return (React.createElement(Container, { onPressIn: onPressIn, onPressOut: onPressOut, ...props, style: [scaleStyle] },
+        React.createElement(Animated.View, { style: underlayStyle }, props.children)));
+}
+//# sourceMappingURL=Button.js.map

package/build/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { lightTheme, darkTheme, borderRadius, shadows, palette } from '@expo/styleguide-native';\nimport * as React from 'react';\nimport { Pressable as RNPressable, Text as RNText, Animated, useColorScheme } from 'react-native';\nimport { create } from 'react-native-primitives';\n\nimport { rounded, margin, padding, text } from './theme';\n\nconst AnimatedPressable = Animated.createAnimatedComponent(RNPressable);\n\nconst Text = create(RNText, {\n  base: {\n    fontWeight: '400',\n    color: lightTheme.text.default,\n    fontSize: 16,\n  },\n\n  props: {\n    accessibilityRole: 'text',\n  },\n\n  variants: {\n    ...text,\n\n    color: {\n      primary: { color: lightTheme.button.primary.foreground },\n      secondary: { color: lightTheme.button.secondary.foreground },\n      tertiary: { color: lightTheme.button.tertiary.foreground },\n      ghost: { color: lightTheme.button.ghost.foreground },\n      transparent: { color: lightTheme.button.transparent.foreground },\n      default: { color: lightTheme.text.default },\n    },\n  },\n\n  selectors: {\n    dark: {\n      base: {\n        color: darkTheme.text.default,\n      },\n\n      color: {\n        primary: { color: darkTheme.button.primary.foreground },\n        secondary: { color: darkTheme.button.secondary.foreground },\n        tertiary: { color: darkTheme.button.tertiary.foreground },\n        ghost: { color: darkTheme.button.ghost.foreground },\n        transparent: { color: darkTheme.button.transparent.foreground },\n        default: { color: darkTheme.text.default },\n      },\n    },\n  },\n});\n\nconst Container = create(AnimatedPressable, {\n  base: {\n    overflow: 'hidden',\n    borderRadius: borderRadius.medium,\n  },\n\n  props: {\n    accessibilityRole: 'button',\n    android_disableSound: true,\n  },\n\n  variants: {\n    bg: {\n      default: { backgroundColor: lightTheme.background.default },\n      primary: { backgroundColor: lightTheme.button.primary.background },\n      secondary: { backgroundColor: lightTheme.button.secondary.background },\n      tertiary: { backgroundColor: lightTheme.button.tertiary.background },\n      ghost: { backgroundColor: lightTheme.button.ghost.background },\n      transparent: { backgroundColor: lightTheme.button.transparent.background },\n      disabled: { backgroundColor: lightTheme.status.default },\n    },\n\n    border: {\n      ghost: { borderColor: lightTheme.button.ghost.border, borderWidth: 1 },\n    },\n\n    shadow: {\n      button: shadows.button,\n    },\n\n    ...rounded,\n    ...padding,\n    ...margin,\n  },\n\n  selectors: {\n    dark: {\n      bg: {\n        default: { backgroundColor: darkTheme.background.default },\n        primary: { backgroundColor: darkTheme.button.primary.background },\n        secondary: { backgroundColor: darkTheme.button.secondary.background },\n        tertiary: { backgroundColor: darkTheme.button.tertiary.background },\n        ghost: { backgroundColor: darkTheme.button.ghost.background },\n        transparent: { backgroundColor: darkTheme.button.transparent.background },\n        disabled: { backgroundColor: darkTheme.status.default },\n      },\n    },\n  },\n});\n\nexport const Button = {\n  Container,\n  ScaleOnPressContainer,\n  Text,\n};\n\ntype ScalingPressableProps = {\n  minScale?: number;\n};\n\ntype NoOptionals<T> = {\n  [P in keyof T]-?: T[P];\n};\n\ntype ContainerProps = React.ComponentProps<typeof Container>;\ntype ContainerBackgroundColors = NoOptionals<ContainerProps>['bg'];\n\nconst lightHighlightColorMap: Record<ContainerBackgroundColors, string> = {\n  disabled: 'transparent',\n  default: lightTheme.background.secondary,\n  primary: lightTheme.background.tertiary,\n  secondary: lightTheme.background.quaternary,\n  tertiary: palette.light.gray[600],\n  ghost: lightTheme.background.tertiary,\n  transparent: lightTheme.background.secondary,\n};\n\nconst darkHighlightColorMap: Record<ContainerBackgroundColors, string> = {\n  disabled: 'transparent',\n  default: darkTheme.background.secondary,\n  primary: darkTheme.background.tertiary,\n  secondary: darkTheme.background.quaternary,\n  tertiary: palette.dark.gray[600],\n  ghost: darkTheme.background.tertiary,\n  transparent: darkTheme.background.secondary,\n};\n\nconst highlightColorMap = {\n  dark: darkHighlightColorMap,\n  light: lightHighlightColorMap,\n};\n\nfunction ScaleOnPressContainer({\n  minScale = 0.975,\n  ...props\n}: React.ComponentProps<typeof Container> & ScalingPressableProps) {\n  const theme = useColorScheme();\n  const animatedValue = React.useRef(new Animated.Value(0));\n  const [isPressing, setIsPressing] = React.useState(false);\n\n  const onPressIn = React.useCallback(() => {\n    setIsPressing(true);\n\n    Animated.spring(animatedValue.current, {\n      toValue: 1,\n      stiffness: 1000,\n      damping: 500,\n      mass: 3,\n      overshootClamping: true,\n      useNativeDriver: true,\n    }).start();\n  }, []);\n\n  const onPressOut = React.useCallback(() => {\n    setIsPressing(false);\n    Animated.spring(animatedValue.current, {\n      toValue: 0,\n      stiffness: 1000,\n      damping: 500,\n      mass: 3,\n      overshootClamping: true,\n      useNativeDriver: true,\n    }).start();\n  }, []);\n\n  const scale = animatedValue.current.interpolate({\n    inputRange: [0, 1],\n    outputRange: [1, minScale],\n  });\n\n  const scaleStyle = { transform: [{ scale }] };\n\n  let backgroundColor = 'transparent';\n\n  if (props.bg && isPressing && theme != null) {\n    backgroundColor = highlightColorMap[theme][props.bg];\n  }\n\n  const underlayStyle = {\n    backgroundColor,\n  };\n\n  return (\n    <Container onPressIn={onPressIn} onPressOut={onPressOut} {...props} style={[scaleStyle]}>\n      <Animated.View style={underlayStyle}>{props.children}</Animated.View>\n    </Container>\n  );\n}\n"]}

package/build/Image.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Image: import("react").ForwardRefExoticComponent<import("react-native").ImageProps & {
+    children?: import("react").ReactNode;
+} & {
+    size?: "small" | "large" | "tiny" | "xl" | undefined;
+    rounded?: "small" | "medium" | "large" | "full" | "huge" | undefined;
+} & import("react").RefAttributes<import("react-native").ImageProps>>;

package/build/Image.js

@@ -0,0 +1,37 @@
+import { borderRadius, iconSize } from '@expo/styleguide-native';
+import { Image as RNImage } from 'react-native';
+import { create } from 'react-native-primitives';
+import { scale } from './theme';
+export const Image = create(RNImage, {
+    base: {
+        resizeMode: 'cover',
+    },
+    variants: {
+        size: {
+            tiny: {
+                height: scale.small,
+                width: scale.small,
+            },
+            small: {
+                height: iconSize.small,
+                width: iconSize.small,
+            },
+            large: {
+                height: iconSize.large,
+                width: iconSize.large,
+            },
+            xl: {
+                height: scale.xl,
+                width: scale.xl,
+            },
+        },
+        rounded: {
+            small: { borderRadius: borderRadius.small },
+            medium: { borderRadius: borderRadius.medium },
+            large: { borderRadius: borderRadius.large },
+            huge: { borderRadius: borderRadius.huge },
+            full: { borderRadius: 99999 },
+        },
+    },
+});
+//# sourceMappingURL=Image.js.map

package/build/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../src/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,EAAE;IACnC,IAAI,EAAE;QACJ,UAAU,EAAE,OAAO;KACpB;IAED,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE;gBACJ,MAAM,EAAE,KAAK,CAAC,KAAK;gBACnB,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB;YACD,KAAK,EAAE;gBACL,MAAM,EAAE,QAAQ,CAAC,KAAK;gBACtB,KAAK,EAAE,QAAQ,CAAC,KAAK;aACtB;YAED,KAAK,EAAE;gBACL,MAAM,EAAE,QAAQ,CAAC,KAAK;gBACtB,KAAK,EAAE,QAAQ,CAAC,KAAK;aACtB;YAED,EAAE,EAAE;gBACF,MAAM,EAAE,KAAK,CAAC,EAAE;gBAChB,KAAK,EAAE,KAAK,CAAC,EAAE;aAChB;SACF;QAED,OAAO,EAAE;YACP,KAAK,EAAE,EAAE,YAAY,EAAE,YAAY,CAAC,KAAK,EAAE;YAC3C,MAAM,EAAE,EAAE,YAAY,EAAE,YAAY,CAAC,MAAM,EAAE;YAC7C,KAAK,EAAE,EAAE,YAAY,EAAE,YAAY,CAAC,KAAK,EAAE;YAC3C,IAAI,EAAE,EAAE,YAAY,EAAE,YAAY,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE;SAC9B;KACF;CACF,CAAC,CAAC","sourcesContent":["import { borderRadius, iconSize } from '@expo/styleguide-native';\nimport { Image as RNImage } from 'react-native';\nimport { create } from 'react-native-primitives';\n\nimport { scale } from './theme';\n\nexport const Image = create(RNImage, {\n  base: {\n    resizeMode: 'cover',\n  },\n\n  variants: {\n    size: {\n      tiny: {\n        height: scale.small,\n        width: scale.small,\n      },\n      small: {\n        height: iconSize.small,\n        width: iconSize.small,\n      },\n\n      large: {\n        height: iconSize.large,\n        width: iconSize.large,\n      },\n\n      xl: {\n        height: scale.xl,\n        width: scale.xl,\n      },\n    },\n\n    rounded: {\n      small: { borderRadius: borderRadius.small },\n      medium: { borderRadius: borderRadius.medium },\n      large: { borderRadius: borderRadius.large },\n      huge: { borderRadius: borderRadius.huge },\n      full: { borderRadius: 99999 },\n    },\n  },\n});\n"]}

package/build/Text.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export declare const Heading: import("react").ForwardRefExoticComponent<import("react-native").TextProps & {
+    children?: import("react").ReactNode;
+} & {
+    size?: "small" | "medium" | "large" | undefined;
+    align?: "center" | undefined;
+    leading?: "large" | undefined;
+    type?: "mono" | undefined;
+    weight?: "normal" | "bold" | "medium" | "thin" | "extralight" | "light" | "semibold" | "extrabold" | "black" | undefined;
+    color?: "primary" | "secondary" | "default" | "error" | "warning" | "success" | undefined;
+} & import("react").RefAttributes<import("react-native").TextProps>>;
+export declare const Text: import("react").ForwardRefExoticComponent<import("react-native").TextProps & {
+    children?: import("react").ReactNode;
+} & {
+    align?: "center" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    leading?: "large" | undefined;
+    type?: "mono" | undefined;
+    weight?: "normal" | "bold" | "medium" | "thin" | "extralight" | "light" | "semibold" | "extrabold" | "black" | undefined;
+    color?: "primary" | "secondary" | "default" | "error" | "warning" | "success" | undefined;
+} & import("react").RefAttributes<import("react-native").TextProps>>;
+export declare const TextInput: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
+    children?: import("react").ReactNode;
+} & {
+    align?: "center" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    leading?: "large" | undefined;
+    type?: "mono" | undefined;
+    weight?: "normal" | "bold" | "medium" | "thin" | "extralight" | "light" | "semibold" | "extrabold" | "black" | undefined;
+    color?: "primary" | "secondary" | "default" | "error" | "warning" | "success" | undefined;
+} & import("react").RefAttributes<import("react-native").TextInputProps>>;

package/build/Text.js

@@ -0,0 +1,66 @@
+import { lightTheme } from '@expo/styleguide-native';
+import { Text as RNText, TextInput as RNTextInput } from 'react-native';
+import { create } from 'react-native-primitives';
+import { text, textDark } from './theme';
+export const Heading = create(RNText, {
+    base: {
+        fontSize: 22,
+        lineHeight: 28,
+        fontWeight: '600',
+        color: lightTheme.text.default,
+    },
+    props: {
+        accessibilityRole: 'header',
+    },
+    variants: {
+        ...text,
+        size: {
+            small: {
+                fontSize: 18,
+                lineHeight: 20,
+            },
+            medium: {
+                fontSize: 22,
+                lineHeight: 28,
+            },
+            large: {
+                fontSize: 28,
+                lineHeight: 32,
+            },
+        },
+    },
+    selectors: {
+        dark: textDark,
+    },
+});
+export const Text = create(RNText, {
+    base: {
+        fontWeight: 'normal',
+        color: lightTheme.text.default,
+        fontSize: 16,
+    },
+    props: {
+        accessibilityRole: 'text',
+    },
+    variants: {
+        ...text,
+    },
+    selectors: {
+        dark: textDark,
+    },
+});
+export const TextInput = create(RNTextInput, {
+    base: {
+        fontWeight: 'normal',
+        color: lightTheme.text.default,
+        fontSize: 16,
+        lineHeight: 18,
+    },
+    variants: {
+        ...text,
+    },
+    selectors: {
+        dark: textDark,
+    },
+});
+//# sourceMappingURL=Text.js.map

package/build/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE;IACpC,IAAI,EAAE;QACJ,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,EAAE;QACd,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO;KAC/B;IAED,KAAK,EAAE;QACL,iBAAiB,EAAE,QAAQ;KAC5B;IAED,QAAQ,EAAE;QACR,GAAG,IAAI;QAEP,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,EAAE;aACf;YACD,MAAM,EAAE;gBACN,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,EAAE;aACf;YACD,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,EAAE;aACf;SACF;KACF;IAED,SAAS,EAAE;QACT,IAAI,EAAE,QAAQ;KACf;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE;IACjC,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO;QAC9B,QAAQ,EAAE,EAAE;KACb;IAED,KAAK,EAAE;QACL,iBAAiB,EAAE,MAAM;KAC1B;IAED,QAAQ,EAAE;QACR,GAAG,IAAI;KACR;IAED,SAAS,EAAE;QACT,IAAI,EAAE,QAAQ;KACf;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,EAAE;IAC3C,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO;QAC9B,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,EAAE;KACf;IAED,QAAQ,EAAE;QACR,GAAG,IAAI;KACR;IAED,SAAS,EAAE;QACT,IAAI,EAAE,QAAQ;KACf;CACF,CAAC,CAAC","sourcesContent":["import { lightTheme } from '@expo/styleguide-native';\nimport { Text as RNText, TextInput as RNTextInput } from 'react-native';\nimport { create } from 'react-native-primitives';\n\nimport { text, textDark } from './theme';\n\nexport const Heading = create(RNText, {\n  base: {\n    fontSize: 22,\n    lineHeight: 28,\n    fontWeight: '600',\n    color: lightTheme.text.default,\n  },\n\n  props: {\n    accessibilityRole: 'header',\n  },\n\n  variants: {\n    ...text,\n\n    size: {\n      small: {\n        fontSize: 18,\n        lineHeight: 20,\n      },\n      medium: {\n        fontSize: 22,\n        lineHeight: 28,\n      },\n      large: {\n        fontSize: 28,\n        lineHeight: 32,\n      },\n    },\n  },\n\n  selectors: {\n    dark: textDark,\n  },\n});\n\nexport const Text = create(RNText, {\n  base: {\n    fontWeight: 'normal',\n    color: lightTheme.text.default,\n    fontSize: 16,\n  },\n\n  props: {\n    accessibilityRole: 'text',\n  },\n\n  variants: {\n    ...text,\n  },\n\n  selectors: {\n    dark: textDark,\n  },\n});\n\nexport const TextInput = create(RNTextInput, {\n  base: {\n    fontWeight: 'normal',\n    color: lightTheme.text.default,\n    fontSize: 16,\n    lineHeight: 18,\n  },\n\n  variants: {\n    ...text,\n  },\n\n  selectors: {\n    dark: textDark,\n  },\n});\n"]}