@jobber/components-native 0.76.1-JOB-116234-4bc5afd.23 → 0.76.1-JOB-116234-63c4467.27

package/dist/types/src/Flex/Flex.styles.d.ts

@@ -6,3 +6,4 @@ export declare const styles: {
     };
 };
 export declare const columnStyles: Record<ColumnKeys, ViewStyle>;
+export declare const gapStyles: Record<"small" | "base" | "none" | "smallest" | "smaller" | "large", ViewStyle>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.76.1-JOB-116234-4bc5afd.23+4bc5afdb",
+  "version": "0.76.1-JOB-116234-63c4467.27+63c44675",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -80,5 +80,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "4bc5afdb99786f50a9ae8474ac282eb593dd9867"
+  "gitHead": "63c446753585b99a48ea4782613671ca6ff3c8b1"
 }

package/src/Flex/Flex.styles.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet, ViewStyle } from "react-native";
-import { ColumnKeys } from "./types";
+import { ColumnKeys, Spacing, spacing } from "./types";
+import { tokens as staticTokens } from "../utils/design";
 
 export const styles = StyleSheet.create({
   row: { flexDirection: "row" },
@@ -16,3 +17,14 @@ export const columnStyles: Record<ColumnKeys, ViewStyle> = StyleSheet.create({
     flexBasis: 0,
   },
 });
+
+export const gapStyles = StyleSheet.create(
+  spacing.reduce((gapObj, space) => {
+    let paddingLeft = 0;
+    if (space !== "none") paddingLeft = staticTokens[`space-${space}`];
+
+    gapObj[space] = { paddingLeft };
+
+    return gapObj;
+  }, {} as Record<Spacing, ViewStyle>),
+);

package/src/Flex/Flex.tsx

@@ -1,8 +1,7 @@
 import React, { Children, PropsWithChildren } from "react";
 import { View } from "react-native";
 import chunk from "lodash/chunk";
-import { columnStyles, styles } from "./Flex.styles";
-import { useGapStyles } from "./Flex.gap.styles";
+import { columnStyles, gapStyles, styles } from "./Flex.styles";
 import { FlexProps } from "./types";
 import { Content } from "../Content";
 
@@ -61,7 +60,7 @@ function Row({
         <View
           style={[
             columnStyles[template[index]] || columnStyles.grow,
-            index > 0 && gap && useGapStyles()[gap],
+            index > 0 && gap && gapStyles[gap],
           ]}
         >
           {child}

package/dist/src/Flex/Flex.gap.styles.js

@@ -1,9 +0,0 @@
-import { spacing } from "./types";
-import { buildThemedStyles } from "../AtlantisThemeContext";
-export const useGapStyles = buildThemedStyles(tokens => spacing.reduce((gapObj, space) => {
-    let paddingLeft = 0;
-    if (space !== "none")
-        paddingLeft = tokens[`space-${space}`];
-    gapObj[space] = { paddingLeft };
-    return gapObj;
-}, {}));

package/dist/types/src/Flex/Flex.gap.styles.d.ts

@@ -1,2 +0,0 @@
-import { ViewStyle } from "react-native";
-export declare const useGapStyles: () => Record<"small" | "base" | "none" | "smallest" | "smaller" | "large", ViewStyle>;

package/src/Flex/Flex.gap.styles.tsx

@@ -1,14 +0,0 @@
-import { ViewStyle } from "react-native";
-import { Spacing, spacing } from "./types";
-import { buildThemedStyles } from "../AtlantisThemeContext";
-
-export const useGapStyles = buildThemedStyles(tokens =>
-  spacing.reduce((gapObj, space) => {
-    let paddingLeft = 0;
-    if (space !== "none") paddingLeft = tokens[`space-${space}`];
-
-    gapObj[space] = { paddingLeft };
-
-    return gapObj;
-  }, {} as Record<Spacing, ViewStyle>),
-);