expo-dev-client-components 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -10,6 +10,12 @@
 
 ### 💡 Others
 
+## 1.1.0 — 2022-04-18
+
+### 🎉 New features
+
+- Extend components to include the spacing scale from `@expo/styleguide-native` ([#16309](https://github.com/expo/expo/pull/16309) by [@ajsmth](https://github.com/ajsmth))
+
 ## 1.0.0 — 2021-12-22
 
 _This version does not introduce any user-facing changes._

package/README.md

@@ -24,6 +24,135 @@ function ExampleRow() {
 }
 ```
 
+### Documentation
+
+`create-primitive` is a utility that generates a set of themed react-native components.
+
+Features:
+
+- theme-ability
+- typesafety
+- clear and flexible API
+
+## API
+
+```tsx
+import { Text } from 'react-native';
+import { create } from './create-primitives';
+
+const Heading = create(Text, {
+  base: {
+    fontFamily: 'Helvetica',
+  },
+
+  variants: {
+    size: {
+      large: {
+        fontSize: 28,
+        lineHeight: 34,
+      },
+      medium: {
+        fontSize: 22,
+        lineHeight: 28,
+      },
+      small: {
+        fontSize: 18,
+        lineHeight: 22,
+      },
+    },
+    color: {
+      success: {
+        color: 'green',
+      },
+      danger: {
+        color: 'red',
+      },
+    },
+  },
+});
+```
+
+This above produces a `Heading` component that can be used like so:
+
+```tsx
+function App() {
+  return (
+    <Heading size="medium" color="success">
+      Hi
+    </Heading>
+  );
+}
+```
+
+All of the variants are captured by typescript which makes using them a breeze.
+
+## Declarative Selectors
+
+We can extend the `Heading` component above with selectors:
+
+```tsx
+const Heading = create(RNText, {
+  variants: {
+    // ....
+  },
+  selectors: {
+    // when device theme is 'light'...
+    light: {
+      color: {
+        // ...any `Heading` with `color="success"`...
+        success: {
+          // ...will have these styles applied
+          color: 'green',
+        },
+      },
+    },
+  },
+});
+```
+
+You can also pass selectors to primitives for one-off instances where you need a specific style:
+
+```tsx
+function App() {
+  return (
+    <View>
+      <Heading
+        selectors={{
+          dark: { color: 'green' },
+          light: { color: 'blue' },
+        }}>
+        Hi
+      </Heading>
+    </View>
+  );
+}
+```
+
+## Flexibility
+
+You can use any style library you'd like - for example using tailwind for a terser, readable configuration.
+
+```tsx
+import tw from 'somewhere';
+import { create } from './create-primitives';
+
+const Heading = create(RNText, {
+  size: {
+    large: tw('text-4xl'),
+    medium: tw('text-3xl'),
+    small: tw('text-2xl'),
+  },
+  weight: {
+    normal: tw('font-medium'),
+    heavy: tw('font-semibold'),
+  },
+  color: {
+    success: tw('text-green-500'),
+    danger: tw('text-red-500'),
+  },
+});
+```
+
 ## Installation in managed Expo projects
 
 There are no native dependencies exported and so this module should be compatible with any RN project

package/build/Button.d.ts

@@ -3,36 +3,54 @@ 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;
+    margin?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+    mx?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+    my?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+    mb?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+    mt?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+    padding?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+    px?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+    py?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+    pb?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+    pt?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+    rounded?: "small" | "medium" | "large" | "none" | "full" | undefined;
+    roundedTop?: "small" | "medium" | "large" | "none" | "full" | undefined;
+    roundedBottom?: "small" | "medium" | "large" | "none" | "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>>>>;
+} & {
+    selectors?: {
+        light?: (import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle) | undefined;
+        dark?: (import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle) | undefined;
+    } | undefined;
+}, "selectors" | "padding" | "margin" | keyof import("react-native").PressableProps | "key" | "bg" | "border" | "shadow" | "mx" | "my" | "mb" | "mt" | "px" | "py" | "pb" | "pt" | "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;
+        margin?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+        mx?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+        my?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+        mb?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+        mt?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+        padding?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+        px?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+        py?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+        pb?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+        pt?: "0" | "1" | "2" | "3" | "4" | "0.5" | "1.5" | "2.5" | "3.5" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | ("small" | "micro" | "tiny" | "medium" | "large" | "xl") | undefined;
+        rounded?: "small" | "medium" | "large" | "none" | "full" | undefined;
+        roundedTop?: "small" | "medium" | "large" | "none" | "full" | undefined;
+        roundedBottom?: "small" | "medium" | "large" | "none" | "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>>>>;
+    } & {
+        selectors?: {
+            light?: (import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle) | undefined;
+            dark?: (import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle) | undefined;
+        } | undefined;
+    }, "selectors" | "padding" | "margin" | keyof import("react-native").PressableProps | "key" | "bg" | "border" | "shadow" | "mx" | "my" | "mb" | "mt" | "px" | "py" | "pb" | "pt" | "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;
@@ -41,8 +59,13 @@ export declare const Button: {
         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;
+        type?: "mono" | "InterBlack" | "InterBlackItalic" | "InterBold" | "InterBoldItalic" | "InterExtraBold" | "InterExtraBoldItalic" | "InterExtraLight" | "InterExtraLightItalic" | "InterRegular" | "InterItalic" | "InterLight" | "InterLightItalic" | "InterMedium" | "InterMediumItalic" | "InterSemiBold" | "InterSemiBoldItalic" | "InterThin" | "InterThinItalic" | undefined;
+        weight?: "light" | "bold" | "medium" | "thin" | "extralight" | "normal" | "semibold" | "extrabold" | "black" | undefined;
+    } & {
+        selectors?: {
+            light?: (import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle) | undefined;
+            dark?: (import("react-native").ViewStyle | import("react-native").TextStyle | import("react-native").ImageStyle) | undefined;
+        } | undefined;
     } & React.RefAttributes<import("react-native").TextProps>>;
 };
 declare type ScalingPressableProps = {
@@ -50,3 +73,4 @@ declare type ScalingPressableProps = {
 };
 declare function ScaleOnPressContainer({ minScale, ...props }: React.ComponentProps<typeof Container> & ScalingPressableProps): JSX.Element;
 export {};
+//# sourceMappingURL=Button.d.ts.map

package/build/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,QAAQ,EAA4C,MAAM,cAAc,CAAC;AAkDlG,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;uWAgDb,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIlB,CAAC;AAEF,aAAK,qBAAqB,GAAG;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAkCF,iBAAS,qBAAqB,CAAC,EAC7B,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG,qBAAqB,eAoDhE"}

package/build/Button.js

@@ -1,14 +1,15 @@
 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 { Text as RNText, Animated, useColorScheme, Pressable as RNPressable } from 'react-native';
+import { create } from './create-primitive';
 import { rounded, margin, padding, text } from './theme';
 const AnimatedPressable = Animated.createAnimatedComponent(RNPressable);
 const Text = create(RNText, {
     base: {
-        fontWeight: '400',
+        fontFamily: 'Inter-Regular',
         color: lightTheme.text.default,
         fontSize: 16,
+        lineHeight: 22,
     },
     props: {
         accessibilityRole: 'text',

package/build/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAChG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,IAAI,IAAI,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAClG,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAEzD,MAAM,iBAAiB,GAAG,QAAQ,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC;AAExE,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE;IAC1B,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,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;QAEP,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE;YACxD,SAAS,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,EAAE;YAC5D,QAAQ,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,EAAE;YAC1D,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,EAAE;YACpD,WAAW,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,EAAE;YAChE,OAAO,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE;SAC5C;KACF;IAED,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,IAAI,EAAE;gBACJ,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,OAAO;aAC9B;YAED,KAAK,EAAE;gBACL,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE;gBACvD,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,EAAE;gBAC3D,QAAQ,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,EAAE;gBACzD,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,EAAE;gBACnD,WAAW,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,EAAE;gBAC/D,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE;aAC3C;SACF;KACF;CACF,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,MAAM,CAAC,iBAAiB,EAAE;IAC1C,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,YAAY,CAAC,MAAM;KAClC;IAED,KAAK,EAAE;QACL,iBAAiB,EAAE,QAAQ;QAC3B,oBAAoB,EAAE,IAAI;KAC3B;IAED,QAAQ,EAAE;QACR,EAAE,EAAE;YACF,OAAO,EAAE,EAAE,eAAe,EAAE,UAAU,CAAC,UAAU,CAAC,OAAO,EAAE;YAC3D,OAAO,EAAE,EAAE,eAAe,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE;YAClE,SAAS,EAAE,EAAE,eAAe,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,EAAE;YACtE,QAAQ,EAAE,EAAE,eAAe,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,EAAE;YACpE,KAAK,EAAE,EAAE,eAAe,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,EAAE;YAC9D,WAAW,EAAE,EAAE,eAAe,EAAE,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,EAAE;YAC1E,QAAQ,EAAE,EAAE,eAAe,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE;SACzD;QAED,MAAM,EAAE;YACN,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE;SACvE;QAED,MAAM,EAAE;YACN,MAAM,EAAE,OAAO,CAAC,MAAM;SACvB;QAED,GAAG,OAAO;QACV,GAAG,OAAO;QACV,GAAG,MAAM;KACV;IAED,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,EAAE,EAAE;gBACF,OAAO,EAAE,EAAE,eAAe,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE;gBAC1D,OAAO,EAAE,EAAE,eAAe,EAAE,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE;gBACjE,SAAS,EAAE,EAAE,eAAe,EAAE,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,EAAE;gBACrE,QAAQ,EAAE,EAAE,eAAe,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,EAAE;gBACnE,KAAK,EAAE,EAAE,eAAe,EAAE,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,EAAE;gBAC7D,WAAW,EAAE,EAAE,eAAe,EAAE,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,EAAE;gBACzE,QAAQ,EAAE,EAAE,eAAe,EAAE,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE;aACxD;SACF;KACF;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,SAAS;IACT,qBAAqB;IACrB,IAAI;CACL,CAAC;AAaF,MAAM,sBAAsB,GAA8C;IACxE,QAAQ,EAAE,aAAa;IACvB,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,SAAS;IACxC,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,QAAQ;IACvC,SAAS,EAAE,UAAU,CAAC,UAAU,CAAC,UAAU;IAC3C,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACjC,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,QAAQ;IACrC,WAAW,EAAE,UAAU,CAAC,UAAU,CAAC,SAAS;CAC7C,CAAC;AAEF,MAAM,qBAAqB,GAA8C;IACvE,QAAQ,EAAE,aAAa;IACvB,OAAO,EAAE,SAAS,CAAC,UAAU,CAAC,SAAS;IACvC,OAAO,EAAE,SAAS,CAAC,UAAU,CAAC,QAAQ;IACtC,SAAS,EAAE,SAAS,CAAC,UAAU,CAAC,UAAU;IAC1C,QAAQ,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;IAChC,KAAK,EAAE,SAAS,CAAC,UAAU,CAAC,QAAQ;IACpC,WAAW,EAAE,SAAS,CAAC,UAAU,CAAC,SAAS;CAC5C,CAAC;AAEF,MAAM,iBAAiB,GAAG;IACxB,IAAI,EAAE,qBAAqB;IAC3B,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,SAAS,qBAAqB,CAAC,EAC7B,QAAQ,GAAG,KAAK,EAChB,GAAG,KAAK,EACuD;IAC/D,MAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,aAAa,CAAC,IAAI,CAAC,CAAC;QAEpB,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,EAAE;YACrC,OAAO,EAAE,CAAC;YACV,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,CAAC;YACP,iBAAiB,EAAE,IAAI;YACvB,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,EAAE;YACrC,OAAO,EAAE,CAAC;YACV,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,CAAC;YACP,iBAAiB,EAAE,IAAI;YACvB,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC;QAC9C,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC;KAC3B,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAE9C,IAAI,eAAe,GAAG,aAAa,CAAC;IAEpC,IAAI,KAAK,CAAC,EAAE,IAAI,UAAU,IAAI,KAAK,IAAI,IAAI,EAAE;QAC3C,eAAe,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;KACtD;IAED,MAAM,aAAa,GAAG;QACpB,eAAe;KAChB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,KAAM,KAAK,EAAE,KAAK,EAAE,CAAC,UAAU,CAAC;QACrF,oBAAC,QAAQ,CAAC,IAAI,IAAC,KAAK,EAAE,aAAa,IAAG,KAAK,CAAC,QAAQ,CAAiB,CAC3D,CACb,CAAC;AACJ,CAAC","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"]}
+{"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 { Text as RNText, Animated, useColorScheme, Pressable as RNPressable } from 'react-native';\n\nimport { create } from './create-primitive';\nimport { rounded, margin, padding, text } from './theme';\n\nconst AnimatedPressable = Animated.createAnimatedComponent(RNPressable);\n\nconst Text = create(RNText, {\n  base: {\n    fontFamily: 'Inter-Regular',\n    color: lightTheme.text.default,\n    fontSize: 16,\n    lineHeight: 22,\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"]}