@jobber/components-native 0.91.4 → 0.93.0

package/dist/types/src/Content/Content.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import React from "react";
 import type { StyleProp, ViewStyle } from "react-native";
-export type Spacing = "none" | "base" | "small" | "smaller" | "smallest" | "large";
+export type Spacing = "none" | "base" | "slim" | "small" | "smaller" | "smallest" | "minuscule" | "large" | "larger" | "largest" | "extravagant";
 export interface ContentUnsafeStyle {
     container?: StyleProp<ViewStyle>;
     childWrapper?: StyleProp<ViewStyle>;

package/dist/types/src/Content/ContentHorizontal.style.d.ts

@@ -10,6 +10,9 @@ export declare const useHorizontalStyles: () => {
     noneChildSpace: {
         padding: number;
     };
+    minusculeChildSpace: {
+        paddingLeft: number;
+    };
     smallestChildSpace: {
         paddingLeft: number;
     };
@@ -19,10 +22,22 @@ export declare const useHorizontalStyles: () => {
     smallChildSpace: {
         paddingLeft: number;
     };
+    slimChildSpace: {
+        paddingLeft: number;
+    };
     baseChildSpace: {
         paddingLeft: number;
     };
     largeChildSpace: {
         paddingLeft: number;
     };
+    largerChildSpace: {
+        paddingLeft: number;
+    };
+    largestChildSpace: {
+        paddingLeft: number;
+    };
+    extravagantChildSpace: {
+        paddingLeft: number;
+    };
 };

package/dist/types/src/Content/ContentSpaceAround.style.d.ts

@@ -2,6 +2,9 @@ export declare const useSpaceAroundStyles: () => {
     noneSpace: {
         padding: number;
     };
+    minusculeSpace: {
+        padding: number;
+    };
     smallestSpace: {
         padding: number;
     };
@@ -11,10 +14,22 @@ export declare const useSpaceAroundStyles: () => {
     smallSpace: {
         padding: number;
     };
+    slimSpace: {
+        padding: number;
+    };
     baseSpace: {
         padding: number;
     };
     largeSpace: {
         padding: number;
     };
+    largerSpace: {
+        padding: number;
+    };
+    largestSpace: {
+        padding: number;
+    };
+    extravagantSpace: {
+        padding: number;
+    };
 };

package/dist/types/src/Content/ContentVertical.style.d.ts

@@ -4,6 +4,9 @@ export declare const useVerticalStyles: () => {
     noneChildSpace: {
         padding: number;
     };
+    minusculeChildSpace: {
+        paddingTop: number;
+    };
     smallestChildSpace: {
         paddingTop: number;
     };
@@ -13,10 +16,22 @@ export declare const useVerticalStyles: () => {
     smallChildSpace: {
         paddingTop: number;
     };
+    slimChildSpace: {
+        paddingTop: number;
+    };
     baseChildSpace: {
         paddingTop: number;
     };
     largeChildSpace: {
         paddingTop: number;
     };
+    largerChildSpace: {
+        paddingTop: number;
+    };
+    largestChildSpace: {
+        paddingTop: number;
+    };
+    extravagantChildSpace: {
+        paddingTop: number;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.91.4",
+  "version": "0.93.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -54,7 +54,7 @@
   },
   "devDependencies": {
     "@react-native-community/datetimepicker": "^8.4.5",
-    "@react-native/babel-preset": "^0.81.1",
+    "@react-native/babel-preset": "^0.82.1",
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/react": "^9.1.2",
     "@storybook/react-native-web-vite": "^9.1.2",
@@ -66,14 +66,14 @@
     "@types/react-test-renderer": "19.1.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
-    "react-native": "^0.81.4",
-    "react-native-gesture-handler": "^2.28.0",
+    "react-native": "^0.82.1",
+    "react-native-gesture-handler": "^2.29.1",
     "react-native-modal-datetime-picker": "^18.0.0",
     "react-native-reanimated": "^3.7.1",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": "^15.1.0",
     "react-native-web": "^0.20.0",
-    "react-test-renderer": "19.1.0",
+    "react-test-renderer": "^19.1.1",
     "storybook": "^9.1.2"
   },
   "peerDependencies": {
@@ -82,7 +82,7 @@
     "@react-native-community/datetimepicker": ">=6.7.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
-    "react": "^18 || ^19.1.0",
+    "react": "^19",
     "react-intl": "^6 || ^7",
     "react-native": ">=0.79.5",
     "react-native-gesture-handler": ">=2.22.0",
@@ -94,5 +94,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "953deb18e2cf5a920ab5e23295e15aefd3865c0f"
+  "gitHead": "a84b7d122f13b650fd7f77cda794d71f1d25317b"
 }

package/src/Chip/Chip.style.ts

@@ -12,7 +12,7 @@ export const useStyles = buildThemedStyles(tokens => {
       justifyContent: "center",
       marginHorizontal: tokens["space-smaller"],
       marginTop: tokens["space-small"],
-      paddingHorizontal: tokens["space-small"],
+      paddingHorizontal: tokens["space-base"],
     },
     iconLeft: {
       marginHorizontal: tokens["space-smallest"],

package/src/Chip/Chip.tsx

@@ -5,6 +5,7 @@ import type { IconNames } from "@jobber/design";
 import { useStyles } from "./Chip.style";
 import { Icon } from "../Icon";
 import { Typography } from "../Typography";
+import type { AtlantisThemeContextValue } from "../AtlantisThemeContext";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export type AccentType = "client" | "invoice" | "job" | "request" | "quote";
@@ -86,6 +87,7 @@ export function Chip({
             : tokens["color-interactive--background"],
       },
       isActive && { backgroundColor: accentColor },
+      getBorderStyle(inactiveBackgroundColor, tokens),
     ];
     const dismiss =
       (isActive || inactiveBackgroundColor === "surface") &&
@@ -96,7 +98,7 @@ export function Chip({
       iconCustomColor: iconColor,
       dismissColor: dismiss,
     };
-  }, [accent, isActive, inactiveBackgroundColor]);
+  }, [accent, isActive, inactiveBackgroundColor, getBorderStyle, styles]);
 
   const accessibilityState = useMemo(() => {
     const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
@@ -145,3 +147,19 @@ export function Chip({
     </Pressable>
   );
 }
+
+function getBorderStyle(
+  inactiveBackgroundColor: "surface" | "background",
+  tokens: AtlantisThemeContextValue["tokens"],
+) {
+  let borderColor = "transparent";
+
+  if (inactiveBackgroundColor === "surface") {
+    borderColor = tokens["color-border"];
+  }
+
+  return {
+    borderColor,
+    borderWidth: tokens["border-base"],
+  };
+}

package/src/Content/Content.tsx

@@ -9,10 +9,15 @@ import { useSpaceAroundStyles } from "./ContentSpaceAround.style";
 export type Spacing =
   | "none"
   | "base"
+  | "slim"
   | "small"
   | "smaller"
   | "smallest"
-  | "large";
+  | "minuscule"
+  | "large"
+  | "larger"
+  | "largest"
+  | "extravagant";
 
 export interface ContentUnsafeStyle {
   container?: StyleProp<ViewStyle>;

package/src/Content/ContentHorizontal.style.ts

@@ -16,6 +16,10 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
       padding: 0,
     },
 
+    minusculeChildSpace: {
+      paddingLeft: tokens["space-minuscule"],
+    },
+
     smallestChildSpace: {
       paddingLeft: tokens["space-smallest"],
     },
@@ -28,6 +32,10 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
       paddingLeft: tokens["space-small"],
     },
 
+    slimChildSpace: {
+      paddingLeft: tokens["space-slim"],
+    },
+
     baseChildSpace: {
       paddingLeft: tokens["space-base"],
     },
@@ -35,5 +43,17 @@ export const useHorizontalStyles = buildThemedStyles(tokens => {
     largeChildSpace: {
       paddingLeft: tokens["space-large"],
     },
+
+    largerChildSpace: {
+      paddingLeft: tokens["space-larger"],
+    },
+
+    largestChildSpace: {
+      paddingLeft: tokens["space-largest"],
+    },
+
+    extravagantChildSpace: {
+      paddingLeft: tokens["space-extravagant"],
+    },
   };
 });

package/src/Content/ContentSpaceAround.style.ts

@@ -6,6 +6,10 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
       padding: 0,
     },
 
+    minusculeSpace: {
+      padding: tokens["space-minuscule"],
+    },
+
     smallestSpace: {
       padding: tokens["space-smallest"],
     },
@@ -18,6 +22,10 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
       padding: tokens["space-small"],
     },
 
+    slimSpace: {
+      padding: tokens["space-slim"],
+    },
+
     baseSpace: {
       padding: tokens["space-base"],
     },
@@ -25,5 +33,17 @@ export const useSpaceAroundStyles = buildThemedStyles(tokens => {
     largeSpace: {
       padding: tokens["space-large"],
     },
+
+    largerSpace: {
+      padding: tokens["space-larger"],
+    },
+
+    largestSpace: {
+      padding: tokens["space-largest"],
+    },
+
+    extravagantSpace: {
+      padding: tokens["space-extravagant"],
+    },
   };
 });

package/src/Content/ContentVertical.style.ts

@@ -16,6 +16,10 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
       padding: 0,
     },
 
+    minusculeChildSpace: {
+      paddingTop: tokens["space-minuscule"],
+    },
+
     smallestChildSpace: {
       paddingTop: tokens["space-smallest"],
     },
@@ -28,6 +32,10 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
       paddingTop: tokens["space-small"],
     },
 
+    slimChildSpace: {
+      paddingTop: tokens["space-slim"],
+    },
+
     baseChildSpace: {
       paddingTop: tokens["space-base"],
     },
@@ -35,5 +43,17 @@ export const useVerticalStyles = buildThemedStyles(tokens => {
     largeChildSpace: {
       paddingTop: tokens["space-large"],
     },
+
+    largerChildSpace: {
+      paddingTop: tokens["space-larger"],
+    },
+
+    largestChildSpace: {
+      paddingTop: tokens["space-largest"],
+    },
+
+    extravagantChildSpace: {
+      paddingTop: tokens["space-extravagant"],
+    },
   };
 });