@jobber/components-native 0.77.1 → 0.78.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.77.1",
+    "version": "0.78.0",
     "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": "ddce093f19e0b03e0d33b7706842dc94b6c65739"
+    "gitHead": "b9eb8377a6592eeb4443a8d8b4424135fd4d8c92"
 }

package/dist/src/ActionItem/ActionItem.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./ActionItem.style";
+import { useStyles } from "./ActionItem.style";
 import { ActionItemContainer } from "./components/ActionItemContainer";
 import { Typography } from "../Typography";
 import { Icon } from "../Icon";
@@ -8,6 +8,7 @@ export function ActionItem({ title, icon, iconColor, children, actionIcon = "edi
     const actionIconStyle = {
         justifyContent: actionIconAlignment,
     };
+    const styles = useStyles();
     const addIconOffset = icon || onPress ? styles.offsetForIcons : undefined;
     const titlePadding = children ? styles.titlePadding : undefined;
     return (React.createElement(ActionItemContainer, { onPress: onPress, testID: testID, title: title },

package/dist/src/ActionItem/ActionItem.style.js

@@ -1,23 +1,24 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    actionItemHorizontalOffset: {
-        paddingHorizontal: tokens["space-base"],
-    },
-    icon: {
-        justifyContent: "flex-start",
-        paddingRight: tokens["space-small"],
-    },
-    titlePadding: {
-        paddingBottom: tokens["space-smaller"],
-    },
-    content: {
-        flex: 1,
-    },
-    offsetForIcons: {
-        paddingTop: tokens["space-smallest"],
-    },
-    actionIcon: {
-        paddingLeft: tokens["space-small"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        actionItemHorizontalOffset: {
+            paddingHorizontal: tokens["space-base"],
+        },
+        icon: {
+            justifyContent: "flex-start",
+            paddingRight: tokens["space-small"],
+        },
+        titlePadding: {
+            paddingBottom: tokens["space-smaller"],
+        },
+        content: {
+            flex: 1,
+        },
+        offsetForIcons: {
+            paddingTop: tokens["space-smallest"],
+        },
+        actionIcon: {
+            paddingLeft: tokens["space-small"],
+        },
+    };
 });

package/dist/src/ActionItem/ActionItemGroup.js

@@ -1,11 +1,12 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./ActionItem.style";
+import { useStyles } from "./ActionItem.style";
 import { Divider } from "../Divider";
 export function ActionItemGroup({ children, }) {
     return React.createElement(View, null, renderChildren(children));
 }
 function renderChildren(children) {
+    const styles = useStyles();
     const childArray = React.Children.toArray(children);
     if (childArray.length === 1)
         return children;

package/dist/src/ActionItem/components/ActionItemContainer.js

@@ -1,8 +1,10 @@
 import React from "react";
 import { Pressable, View } from "react-native";
-import { styles } from "./ActionItemContainer.style";
-import { styles as actionItemStyles } from "../ActionItem.style";
+import { useStyles } from "./ActionItemContainer.style";
+import { useStyles as useActionItemStyles } from "../ActionItem.style";
 export function ActionItemContainer({ onPress, title, children, testID, }) {
+    const styles = useStyles();
+    const actionItemStyles = useActionItemStyles();
     if (onPress) {
         return (React.createElement(Pressable, { onPress: onPress, style: ({ pressed }) => [
                 styles.container,

package/dist/src/ActionItem/components/ActionItemContainer.style.js

@@ -1,12 +1,13 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        width: "100%",
-        flexDirection: "row",
-        paddingVertical: tokens["space-base"],
-    },
-    pressed: {
-        opacity: tokens["opacity-pressed"],
-    },
+import { buildThemedStyles } from "../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            width: "100%",
+            flexDirection: "row",
+            paddingVertical: tokens["space-base"],
+        },
+        pressed: {
+            opacity: tokens["opacity-pressed"],
+        },
+    };
 });

package/dist/src/ActivityIndicator/ActivityIndicator.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { ActivityIndicator } from "react-native";
-import { tokens } from "../utils/design";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 export function JobberActivityIndicator(props) {
+    const { tokens } = useAtlantisTheme();
     return (React.createElement(ActivityIndicator, Object.assign({}, props, { color: props.color || tokens["color-greyBlue"], testID: props.testID || "ActivityIndicator" })));
 }

package/dist/src/AtlantisThemeContext/buildThemedStyles.js

@@ -0,0 +1,38 @@
+import { StyleSheet } from "react-native";
+import { useMemo } from "react";
+import { useAtlantisTheme } from "./AtlantisThemeContext";
+/**
+ * Creates a hook that generates themed styles using the current theme tokens.
+ * The hook will automatically update the styles when the theme changes.
+ *
+ * @example
+ * ```tsx
+ * const useStyles = buildThemedStyles(tokens => ({
+ *   container: {
+ *     backgroundColor: tokens["color-surface"],
+ *     padding: tokens["space-base"],
+ *   },
+ * }));
+ *
+ * function MyComponent() {
+ *   const styles = useStyles();
+ *   return <View style={styles.container} />;
+ * }
+ * ```
+ *
+ * @param styleFactory - A function that receives theme tokens and returns a style object
+ * @returns A hook function that returns the created styles
+ *
+ * @note
+ * - Styles are memoized and only recalculated when tokens change
+ * - Use this for components that need to respond to theme changes
+ * - The returned styles are created using StyleSheet.create()
+ *
+ * @see Related functions: {@link useAtlantisTheme}
+ */
+export function buildThemedStyles(styleFactory) {
+    return function useStyles() {
+        const { tokens } = useAtlantisTheme();
+        return useMemo(() => StyleSheet.create(styleFactory(tokens)), [tokens]);
+    };
+}

package/dist/src/AtlantisThemeContext/index.js

@@ -1 +1,2 @@
 export { AtlantisThemeContextProvider, useAtlantisTheme, } from "./AtlantisThemeContext";
+export { buildThemedStyles } from "./buildThemedStyles";

package/dist/src/AutoLink/AutoLink.js

@@ -14,10 +14,11 @@ import { Text as RNText } from "react-native";
 import { ComposeTextWithLinks } from "./components";
 import { useCreateLinkedText } from "./hooks/useCreateLinkedText";
 import { TypographyGestureDetector } from "../Typography";
-import { tokens } from "../utils/design";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 export function AutoLink(_a) {
     var { children: text = "", bottomTabsVisible = true, selectable = true } = _a, rest = __rest(_a, ["children", "bottomTabsVisible", "selectable"]);
     const { splitText, matches } = useCreateLinkedText(Object.assign({ text }, rest));
+    const { tokens } = useAtlantisTheme();
     return (React.createElement(TypographyGestureDetector, null,
         React.createElement(RNText, { selectable: selectable, selectionColor: tokens["color-brand--highlight"] }, splitText.map((part, index) => (React.createElement(ComposeTextWithLinks, { key: index, part: part, index: index, match: matches[part], bottomTabsVisible: bottomTabsVisible, selectable: selectable }))))));
 }

package/dist/src/Banner/Banner.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Pressable, Text as RNText, View } from "react-native";
-import { styles } from "./Banner.style";
+import { useStyles } from "./Banner.style";
 import { BannerIcon } from "./components/BannerIcon/BannerIcon";
 import { Content } from "../Content";
 import { Text } from "../Text";
@@ -11,13 +11,14 @@ export function Banner({ action, details, text, type, children, icon, }) {
     const bannerIcon = icon || getBannerIcon(type);
     const shouldFlow = Boolean(React.Children.count(children) === 1 && !text && !details) ||
         Boolean(text && !details && !children);
+    const styles = useStyles();
     return (React.createElement(Pressable, { style: [styles.container], accessibilityRole: "alert", onPress: action === null || action === void 0 ? void 0 : action.onPress },
         React.createElement(Content, { childSpacing: "small" },
             React.createElement(View, { style: styles.bannerContent },
                 bannerIcon && React.createElement(BannerIcon, { icon: bannerIcon, type: type }),
                 React.createElement(View, { style: styles.contentContainer },
                     React.createElement(View, { style: styles.childrenContainer },
-                        React.createElement(WrappingElement, { shouldFlow: shouldFlow },
+                        React.createElement(WrappingElement, { shouldFlow: shouldFlow, styles: styles },
                             React.createElement(BannerChildren, null, children),
                             text && React.createElement(Text, { level: "text" }, text),
                             details && React.createElement(TextList, { items: details, level: "text" }),
@@ -33,7 +34,7 @@ function BannerChildren({ children }) {
     }
     return React.createElement(React.Fragment, null, children);
 }
-function WrappingElement({ shouldFlow, children, }) {
+function WrappingElement({ shouldFlow, children, styles, }) {
     if (shouldFlow) {
         return React.createElement(RNText, { testID: "ATL-Banner-RNText" }, children);
     }

package/dist/src/Banner/Banner.style.js

@@ -1,34 +1,35 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        width: "100%",
-        borderColor: tokens["color-border"],
-        borderStyle: "solid",
-        borderBottomWidth: tokens["border-base"],
-        backgroundColor: tokens["color-surface"],
-    },
-    bannerContent: {
-        flexDirection: "row",
-        alignItems: "flex-start",
-        gap: tokens["space-small"] + tokens["space-smaller"],
-    },
-    contentContainer: {
-        flex: 1,
-    },
-    childrenContainer: {
-        marginTop: tokens["space-smallest"],
-    },
-    textContainer: {
-        marginTop: tokens["space-minuscule"],
-    },
-    fullWidth: {
-        width: "100%",
-    },
-    bannerChildrenContent: {
-        marginBottom: tokens["space-small"],
-    },
-    contentSpacing: {
-        gap: tokens["space-small"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            width: "100%",
+            borderColor: tokens["color-border"],
+            borderStyle: "solid",
+            borderBottomWidth: tokens["border-base"],
+            backgroundColor: tokens["color-surface"],
+        },
+        bannerContent: {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            gap: tokens["space-small"] + tokens["space-smaller"],
+        },
+        contentContainer: {
+            flex: 1,
+        },
+        childrenContainer: {
+            marginTop: tokens["space-smallest"],
+        },
+        textContainer: {
+            marginTop: tokens["space-minuscule"],
+        },
+        fullWidth: {
+            width: "100%",
+        },
+        bannerChildrenContent: {
+            marginBottom: tokens["space-small"],
+        },
+        contentSpacing: {
+            gap: tokens["space-small"],
+        },
+    };
 });

package/dist/src/Banner/components/BannerIcon/BannerIcon.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./BannerIcon.style";
+import { useStyles } from "./BannerIcon.style";
 import { Icon } from "../../../Icon";
 export function BannerIcon({ icon, type }) {
+    const styles = useStyles();
     return (React.createElement(View, { style: [styles.bannerIcon, styles[type]], testID: "ATL-Banner-Icon" },
         React.createElement(Icon, { name: icon, color: "white", size: "small" })));
 }

package/dist/src/Banner/components/BannerIcon/BannerIcon.style.js

@@ -1,17 +1,18 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    bannerIcon: {
-        borderRadius: tokens["radius-circle"],
-        padding: tokens["space-smaller"],
-    },
-    error: {
-        backgroundColor: tokens["color-destructive"],
-    },
-    warning: {
-        backgroundColor: tokens["color-warning"],
-    },
-    notice: {
-        backgroundColor: tokens["color-informative"],
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        bannerIcon: {
+            borderRadius: tokens["radius-circle"],
+            padding: tokens["space-smaller"],
+        },
+        error: {
+            backgroundColor: tokens["color-destructive"],
+        },
+        warning: {
+            backgroundColor: tokens["color-warning"],
+        },
+        notice: {
+            backgroundColor: tokens["color-informative"],
+        },
+    };
 });

package/dist/src/BottomSheet/BottomSheet.js

@@ -3,7 +3,7 @@ import { Modalize } from "react-native-modalize";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Keyboard, View } from "react-native";
 import { BottomSheetOption } from "./components/BottomSheetOption";
-import { styles } from "./BottomSheet.style";
+import { useStyles } from "./BottomSheet.style";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { Divider } from "../Divider";
 import { Heading } from "../Heading";
@@ -12,12 +12,13 @@ export const BottomSheet = forwardRef(BottomSheetInternal);
 function BottomSheetInternal({ children, showCancel, loading = false, heading, onOpen, onClose, }, ref) {
     const isScreenReaderEnabled = useIsScreenReaderEnabled();
     const [open, setOpen] = useState(false);
+    const styles = useStyles();
     return (React.createElement(React.Fragment, null,
-        open && React.createElement(Overlay, null),
-        React.createElement(Modalize, { ref: ref, adjustToContentHeight: true, modalStyle: styles.modal, overlayStyle: styles.overlayModalize, HeaderComponent: heading && React.createElement(Header, { heading: heading }), FooterComponent: React.createElement(Footer, { cancellable: (showCancel && !loading) || isScreenReaderEnabled, onCancel: () => {
+        open && React.createElement(Overlay, { styles: styles }),
+        React.createElement(Modalize, { ref: ref, adjustToContentHeight: true, modalStyle: styles.modal, overlayStyle: styles.overlayModalize, HeaderComponent: heading && React.createElement(Header, { heading: heading, styles: styles }), FooterComponent: React.createElement(Footer, { cancellable: (showCancel && !loading) || isScreenReaderEnabled, onCancel: () => {
                     var _a;
                     (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.close();
-                } }), withHandle: false, withReactModal: isScreenReaderEnabled, onOpen: openModal, onClose: closeModal },
+                }, styles: styles }), withHandle: false, withReactModal: isScreenReaderEnabled, onOpen: openModal, onClose: closeModal },
             React.createElement(View, { style: !showCancel && !isScreenReaderEnabled ? styles.children : undefined }, children))));
     function openModal() {
         onOpen === null || onOpen === void 0 ? void 0 : onOpen();
@@ -29,11 +30,11 @@ function BottomSheetInternal({ children, showCancel, loading = false, heading, o
         setOpen(false);
     }
 }
-function Header({ heading }) {
+function Header({ heading, styles, }) {
     return (React.createElement(View, { style: styles.header },
         React.createElement(Heading, { level: "subtitle" }, heading)));
 }
-function Footer({ cancellable, onCancel, }) {
+function Footer({ cancellable, onCancel, styles, }) {
     const insets = useSafeAreaInsets();
     const { t } = useAtlantisI18n();
     return (React.createElement(View, { style: { marginBottom: insets.bottom } }, cancellable && (React.createElement(View, { style: styles.children },
@@ -46,6 +47,6 @@ function dismissKeyboard() {
     //In the case where an input text field is focused we don't want to show the bottom sheet behind or above keyboard
     Keyboard.dismiss();
 }
-function Overlay() {
+function Overlay({ styles, }) {
     return React.createElement(View, { style: styles.overlay });
 }

package/dist/src/BottomSheet/BottomSheet.style.js

@@ -1,28 +1,30 @@
 import { Dimensions, StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 const { height } = Dimensions.get("window");
-const modalBorderRadius = tokens["radius-larger"];
-export const styles = StyleSheet.create({
-    overlayModalize: {
-        backgroundColor: "transparent",
-    },
-    overlay: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"], height }),
-    modal: {
-        borderTopLeftRadius: modalBorderRadius,
-        borderTopRightRadius: modalBorderRadius,
-        paddingTop: tokens["space-small"],
-    },
-    children: {
-        paddingBottom: tokens["space-small"],
-    },
-    header: {
-        paddingHorizontal: tokens["space-base"],
-        paddingTop: tokens["space-small"],
-        paddingBottom: tokens["space-base"],
-    },
-    footerDivider: {
-        marginHorizontal: tokens["space-base"],
-        marginTop: tokens["space-small"],
-        marginBottom: tokens["space-smaller"],
-    },
+export const useStyles = buildThemedStyles(tokens => {
+    const modalBorderRadius = tokens["radius-larger"];
+    return {
+        overlayModalize: {
+            backgroundColor: "transparent",
+        },
+        overlay: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"], height }),
+        modal: {
+            borderTopLeftRadius: modalBorderRadius,
+            borderTopRightRadius: modalBorderRadius,
+            paddingTop: tokens["space-small"],
+        },
+        children: {
+            paddingBottom: tokens["space-small"],
+        },
+        header: {
+            paddingHorizontal: tokens["space-base"],
+            paddingTop: tokens["space-small"],
+            paddingBottom: tokens["space-base"],
+        },
+        footerDivider: {
+            marginHorizontal: tokens["space-base"],
+            marginTop: tokens["space-small"],
+            marginBottom: tokens["space-smaller"],
+        },
+    };
 });

package/dist/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.js

@@ -1,12 +1,13 @@
 import React from "react";
 import { TouchableOpacity, View } from "react-native";
-import { styles } from "./BottomSheetOption.styles";
+import { useStyles } from "./BottomSheetOption.styles";
 import { capitalize } from "../../../utils/intl";
 import { Text } from "../../../Text";
 import { Icon } from "../../../Icon";
 export function BottomSheetOption({ text, icon, iconColor, textAlign, destructive, textTransform = "capitalize", onPress, }) {
     const destructiveColor = "destructive";
     const textVariation = destructive ? destructiveColor : "subdued";
+    const styles = useStyles();
     return (React.createElement(TouchableOpacity, { style: styles.bottomSheetOption, onPress: onPress, accessibilityLabel: text },
         icon && (React.createElement(View, { style: styles.icon },
             React.createElement(Icon, { name: icon, color: destructive ? destructiveColor : iconColor }))),

package/dist/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.styles.js

@@ -1,18 +1,19 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    bottomSheetOption: {
-        display: "flex",
-        flexDirection: "row",
-        alignContent: "center",
-        alignItems: "center",
-        padding: tokens["space-small"],
-    },
-    icon: {
-        paddingHorizontal: tokens["space-small"],
-    },
-    title: {
-        paddingHorizontal: tokens["space-small"],
-        flexShrink: 1,
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        bottomSheetOption: {
+            display: "flex",
+            flexDirection: "row",
+            alignContent: "center",
+            alignItems: "center",
+            padding: tokens["space-small"],
+        },
+        icon: {
+            paddingHorizontal: tokens["space-small"],
+        },
+        title: {
+            paddingHorizontal: tokens["space-small"],
+            flexShrink: 1,
+        },
+    };
 });

package/dist/src/Button/Button.js

@@ -1,11 +1,13 @@
 import React from "react";
 import { TouchableHighlight, View } from "react-native";
-import { styles } from "./Button.style";
+import { useStyles } from "./Button.style";
 import { InternalButtonLoading } from "./components/InternalButtonLoading";
 import { ActionLabel } from "../ActionLabel";
 import { Icon } from "../Icon";
-import { tokens } from "../utils/design";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 export function Button({ label, onPress, variation = "work", type = "primary", fullHeight = false, fullWidth = true, disabled = false, loading = false, size = "base", accessibilityLabel, accessibilityHint, icon, testID, UNSAFE_style, }) {
+    const { tokens } = useAtlantisTheme();
+    const styles = useStyles();
     const buttonStyle = [
         styles.button,
         styles[size],
@@ -28,7 +30,7 @@ export function Button({ label, onPress, variation = "work", type = "primary", f
         React.createElement(View, { style: [buttonStyle, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container] },
             loading && React.createElement(InternalButtonLoading, { variation: variation, type: type }),
             React.createElement(View, { style: [
-                    getContentStyles(label, icon),
+                    getContentStyles(label, icon, styles),
                     UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.contentContainer,
                 ], testID: "contentContainer" },
                 icon && (React.createElement(View, { style: [styles.iconStyle, UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.iconContainer], testID: "iconContainer" },
@@ -69,7 +71,7 @@ function getIconColorVariation(variation, type, disabled) {
             return "interactive";
     }
 }
-function getContentStyles(label, icon) {
+function getContentStyles(label, icon, styles) {
     if (label && !icon) {
         return undefined;
     }