@jobber/components-native 0.77.0 → 0.78.0

package/dist/src/Select/Select.style.js

@@ -1,51 +1,54 @@
 import { StyleSheet } from "react-native";
-import { commonInputStyles } from "../InputFieldWrapper";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    container: StyleSheet.flatten([
-        commonInputStyles.container,
-        {
-            flexDirection: "column",
-            justifyContent: "center",
-            minHeight: tokens["space-largest"] + tokens["space-small"],
-            marginVertical: 0,
-            borderWidth: 0,
+import { getCommonInputStyles } from "../InputFieldWrapper";
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    const commonInputStyles = getCommonInputStyles(tokens);
+    return {
+        container: StyleSheet.flatten([
+            commonInputStyles.container,
+            {
+                flexDirection: "column",
+                justifyContent: "center",
+                minHeight: tokens["space-largest"] + tokens["space-small"],
+                marginVertical: 0,
+                borderWidth: 0,
+            },
+        ]),
+        input: StyleSheet.flatten([
+            commonInputStyles.input,
+            {
+                flexDirection: "row",
+                flexGrow: 0,
+                paddingTop: tokens["space-smaller"],
+                minHeight: 0,
+                minWidth: "100%",
+                paddingRight: tokens["space-small"],
+            },
+        ]),
+        value: {
+            flexGrow: 1,
+            flexShrink: 1,
         },
-    ]),
-    input: StyleSheet.flatten([
-        commonInputStyles.input,
-        {
-            flexDirection: "row",
+        icon: {
+            position: "absolute",
+            bottom: "50%",
+            right: tokens["space-small"],
             flexGrow: 0,
+            flexShrink: 0,
+        },
+        invalid: {
+            color: tokens["color-critical"],
+            borderColor: tokens["color-critical"],
+        },
+        errorMessageWrapperIcon: {
+            flex: 0,
+            flexBasis: "auto",
+            paddingTop: tokens["space-minuscule"],
+            paddingRight: tokens["space-smaller"],
+        },
+        messageWrapper: {
             paddingTop: tokens["space-smaller"],
-            minHeight: 0,
-            minWidth: "100%",
-            paddingRight: tokens["space-small"],
+            flexDirection: "row",
         },
-    ]),
-    value: {
-        flexGrow: 1,
-        flexShrink: 1,
-    },
-    icon: {
-        position: "absolute",
-        bottom: "50%",
-        right: tokens["space-small"],
-        flexGrow: 0,
-        flexShrink: 0,
-    },
-    invalid: {
-        color: tokens["color-critical"],
-        borderColor: tokens["color-critical"],
-    },
-    errorMessageWrapperIcon: {
-        flex: 0,
-        flexBasis: "auto",
-        paddingTop: tokens["space-minuscule"],
-        paddingRight: tokens["space-smaller"],
-    },
-    messageWrapper: {
-        paddingTop: tokens["space-smaller"],
-        flexDirection: "row",
-    },
+    };
 });

package/dist/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.js

@@ -2,11 +2,12 @@ import React, { useRef } from "react";
 import { Picker } from "@react-native-picker/picker";
 import { styles } from "./SelectDefaultPicker.style";
 import { SelectPressable } from "../SelectPressable";
-import { tokens } from "../../../utils/design";
+import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 export function SelectDefaultPicker({ children, options, disabled, onChange, }) {
     var _a;
     const selectedItem = options.find(option => option.isActive);
     const pickerRef = useRef(null);
+    const { tokens } = useAtlantisTheme();
     return (React.createElement(SelectPressable, { onPress: (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.focus },
         children,
         React.createElement(Picker, { ref: pickerRef, selectedValue: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value, onValueChange: onChange, mode: "dropdown", enabled: !disabled, style: styles.androidPickerContainer }, options.map(({ label, value, isActive }, i) => (React.createElement(Picker.Item, { key: i, label: label, value: value, color: isSelected(isActive) }))))));

package/dist/src/Select/components/SelectPressable/SelectPressable.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Keyboard, Pressable } from "react-native";
-import { styles } from "./SelectPressable.style";
+import { useStyles } from "./SelectPressable.style";
 import { useIsScreenReaderEnabled } from "../../../hooks";
 /**
  * Switches between Pressable with pressed styling and a fragment when a
@@ -9,6 +9,7 @@ import { useIsScreenReaderEnabled } from "../../../hooks";
  */
 export function SelectPressable({ children, onPress, }) {
     const isScreenReaderEnabled = useIsScreenReaderEnabled();
+    const styles = useStyles();
     if (isScreenReaderEnabled)
         return React.createElement(React.Fragment, null, children);
     return (React.createElement(Pressable, { style: ({ pressed }) => [pressed && styles.pressed], onPressIn: Keyboard.dismiss, onPress: onPress }, children));

package/dist/src/Select/components/SelectPressable/SelectPressable.style.js

@@ -1,7 +1,8 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    pressed: {
-        opacity: tokens["opacity-pressed"],
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        pressed: {
+            opacity: tokens["opacity-pressed"],
+        },
+    };
 });

package/dist/src/StatusLabel/StatusLabel.js

@@ -1,9 +1,10 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./StatusLabel.style";
-import { tokens } from "../utils/design";
+import { useStyles } from "./StatusLabel.style";
 import { Text } from "../Text";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 export function StatusLabel({ text, alignment = "end", status = "success", }) {
+    const styles = useStyles();
     return (React.createElement(View, { style: [
             styles.statusLabelRow,
             alignment === "start" && styles.labelTextStartAligned,
@@ -11,9 +12,10 @@ export function StatusLabel({ text, alignment = "end", status = "success", }) {
         React.createElement(View, { style: styles.statusLabelText },
             React.createElement(Text, { align: alignment, level: "textSupporting", variation: "subdued" }, text)),
         React.createElement(View, { style: styles.innerPad }),
-        React.createElement(StatusLabelIcon, { status: status })));
+        React.createElement(StatusLabelIcon, { status: status, styles: styles })));
 }
-function StatusLabelIcon({ status }) {
+function StatusLabelIcon({ status, styles }) {
+    const { tokens } = useAtlantisTheme();
     return (React.createElement(View, { testID: `${status}LabelIcon`, style: [
             styles.statusLabelIcon,
             { backgroundColor: tokens[`color-${status}`] },

package/dist/src/StatusLabel/StatusLabel.style.js

@@ -1,29 +1,29 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-const statusLabelIconDiameter = tokens["space-base"] - tokens["space-smaller"]; //12px
-const indicatorOffset = tokens["space-smallest"] + tokens["space-minuscule"];
-// Needs to be hardcoded to 3 as this shouldn't change with the tokens
-const statusLabelRadius = 3;
-export const styles = StyleSheet.create({
-    statusLabelRow: {
-        flexDirection: "row",
-        justifyContent: "flex-end",
-        flexWrap: "nowrap",
-    },
-    statusLabelText: {
-        flexShrink: 1,
-    },
-    statusLabelIcon: {
-        borderRadius: statusLabelRadius,
-        backgroundColor: tokens["color-success"],
-        width: statusLabelIconDiameter,
-        height: statusLabelIconDiameter,
-        marginTop: indicatorOffset,
-    },
-    labelTextStartAligned: {
-        flexDirection: "row-reverse",
-    },
-    innerPad: {
-        width: tokens["space-small"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+const statusLabelRadius = 3; // Needs to be hardcoded to 3 as this shouldn't change with the tokens
+export const useStyles = buildThemedStyles(tokens => {
+    const statusLabelIconDiameter = tokens["space-base"] - tokens["space-smaller"]; //12px
+    const indicatorOffset = tokens["space-smallest"] + tokens["space-minuscule"];
+    return {
+        statusLabelRow: {
+            flexDirection: "row",
+            justifyContent: "flex-end",
+            flexWrap: "nowrap",
+        },
+        statusLabelText: {
+            flexShrink: 1,
+        },
+        statusLabelIcon: {
+            borderRadius: statusLabelRadius,
+            backgroundColor: tokens["color-success"],
+            width: statusLabelIconDiameter,
+            height: statusLabelIconDiameter,
+            marginTop: indicatorOffset,
+        },
+        labelTextStartAligned: {
+            flexDirection: "row-reverse",
+        },
+        innerPad: {
+            width: tokens["space-small"],
+        },
+    };
 });

package/dist/src/Switch/Switch.js

@@ -1,11 +1,12 @@
 import React, { useState } from "react";
 import { View } from "react-native";
 import { BaseSwitch } from "./components/BaseSwitch";
-import { styles } from "./Switch.styles";
+import { useStyles } from "./Switch.styles";
 import { Text } from "../Text";
 export function Switch(props) {
     const switchProps = Object.assign(Object.assign({}, props), { accessibilityLabel: props.accessibilityLabel || props.label });
     const [labelWidth, setLabelWidth] = useState();
+    const styles = useStyles();
     return (React.createElement(View, { style: styles.container },
         React.createElement(View, { style: styles.row },
             props.label && (React.createElement(View, { style: styles.label, onLayout: event => setLabelWidth(event.nativeEvent.layout.width), testID: "switch-label-view" },

package/dist/src/Switch/Switch.styles.js

@@ -1,20 +1,21 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        marginTop: tokens["space-base"],
-        marginBottom: tokens["space-base"],
-    },
-    row: {
-        flexDirection: "row",
-        width: "100%",
-    },
-    label: {
-        flex: 1,
-        justifyContent: "center",
-        marginRight: tokens["space-small"],
-    },
-    description: {
-        marginTop: tokens["space-smaller"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            marginTop: tokens["space-base"],
+            marginBottom: tokens["space-base"],
+        },
+        row: {
+            flexDirection: "row",
+            width: "100%",
+        },
+        label: {
+            flex: 1,
+            justifyContent: "center",
+            marginRight: tokens["space-small"],
+        },
+        description: {
+            marginTop: tokens["space-smaller"],
+        },
+    };
 });

package/dist/src/Switch/components/BaseSwitch/BaseSwitch.js

@@ -2,13 +2,14 @@ import React from "react";
 import { Platform } from "react-native";
 import { Switch } from "react-native-gesture-handler";
 import { useFormController } from "../../../hooks";
-import { tokens } from "../../../utils/design";
+import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 export function BaseSwitch({ value, defaultValue, onValueChange, disabled = false, accessibilityLabel, name, }) {
     const { field } = useFormController({
         name,
         value: value !== null && value !== void 0 ? value : defaultValue,
     });
     const internalValue = value !== null && value !== void 0 ? value : field.value;
+    const { tokens } = useAtlantisTheme();
     function getThumbColor() {
         if (Platform.OS === "android") {
             if (disabled) {

package/dist/src/TextList/TextList.js

@@ -1,10 +1,11 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./TextList.style";
+import { useStyles } from "./TextList.style";
 import { Content } from "../Content";
 import { Text } from "../Text";
 const BULLET_SYMBOL = `\u2022`;
 export function TextList({ items, childSpacing = "none", emphasis, level = "text", spacing = "none", }) {
+    const styles = useStyles();
     return (React.createElement(React.Fragment, null, items && (React.createElement(View, { style: styles.details },
         React.createElement(Content, { spacing: spacing, childSpacing: childSpacing }, items.map((item, index) => (React.createElement(View, { style: styles.detail, key: index },
             React.createElement(Text, { level: level, emphasis: emphasis }, BULLET_SYMBOL),

package/dist/src/TextList/TextList.style.js

@@ -1,16 +1,17 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    details: {
-        width: "100%",
-        flexDirection: "column",
-    },
-    detail: {
-        flexDirection: "row",
-        paddingLeft: tokens["space-small"],
-    },
-    detailText: {
-        paddingLeft: tokens["space-small"],
-        flex: 1,
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        details: {
+            width: "100%",
+            flexDirection: "column",
+        },
+        detail: {
+            flexDirection: "row",
+            paddingLeft: tokens["space-small"],
+        },
+        detailText: {
+            paddingLeft: tokens["space-small"],
+            flex: 1,
+        },
+    };
 });

package/dist/src/ThumbnailList/ThumbnailList.js

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import isNil from "lodash/isNil";
 import { RowCount } from "./types";
-import { styles } from "./ThumbnailList.style";
+import { useStyles } from "./ThumbnailList.style";
 import { FormatFile } from "../FormatFile";
 function isImage(file) {
     return !!file.contentType && file.contentType.includes("image/");
@@ -17,6 +17,7 @@ export const filterImages = (files) => {
 };
 export function ThumbnailList({ files, rowCount = RowCount.TwoRows, handleOpenFile, createThumbnail, }) {
     const imageList = filterImages(files);
+    const styles = useStyles();
     return (React.createElement(View, { style: [
             styles.list,
             rowCount === RowCount.ThreeRows && styles.maxDimensionsForThreeRows,

package/dist/src/ThumbnailList/ThumbnailList.style.js

@@ -1,49 +1,50 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    list: {
-        display: "flex",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 2,
-        overflow: "hidden",
-        marginTop: tokens["space-smaller"],
-    },
-    maxDimensionsForThreeRows: {
-        maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 3,
-    },
-    thumbnail: {
-        width: tokens["space-extravagant"],
-        height: tokens["space-extravagant"],
-        marginRight: tokens["space-smaller"],
-        marginBottom: tokens["space-smaller"],
-        borderRadius: tokens["radius-base"],
-        borderColor: tokens["color-border"],
-        borderWidth: tokens["border-base"],
-    },
-    centerThumbnailImage: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    dimensionsThumbnailImage: {
-        width: tokens["space-extravagant"],
-        height: tokens["space-extravagant"],
-    },
-    thumbnailName: {
-        position: "absolute",
-        right: 0,
-        bottom: 0,
-        left: 0,
-        paddingHorizontal: tokens["space-smaller"],
-        paddingVertical: tokens["space-smallest"],
-        borderTopColor: tokens["color-border"],
-        borderTopWidth: tokens["space-minuscule"],
-    },
-    thumbnailIcon: {
-        top: tokens["space-smaller"],
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        list: {
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: "wrap",
+            maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 2,
+            overflow: "hidden",
+            marginTop: tokens["space-smaller"],
+        },
+        maxDimensionsForThreeRows: {
+            maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 3,
+        },
+        thumbnail: {
+            width: tokens["space-extravagant"],
+            height: tokens["space-extravagant"],
+            marginRight: tokens["space-smaller"],
+            marginBottom: tokens["space-smaller"],
+            borderRadius: tokens["radius-base"],
+            borderColor: tokens["color-border"],
+            borderWidth: tokens["border-base"],
+        },
+        centerThumbnailImage: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        dimensionsThumbnailImage: {
+            width: tokens["space-extravagant"],
+            height: tokens["space-extravagant"],
+        },
+        thumbnailName: {
+            position: "absolute",
+            right: 0,
+            bottom: 0,
+            left: 0,
+            paddingHorizontal: tokens["space-smaller"],
+            paddingVertical: tokens["space-smallest"],
+            borderTopColor: tokens["color-border"],
+            borderTopWidth: tokens["space-minuscule"],
+        },
+        thumbnailIcon: {
+            top: tokens["space-smaller"],
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        },
+    };
 });

package/dist/src/Toast/Toast.js

@@ -2,17 +2,20 @@ import React from "react";
 import Toast from "react-native-toast-message";
 import { AccessibilityInfo, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { styles } from "./Toast.styles";
-import { tokens } from "../utils/design";
+import { useStyles } from "./Toast.styles";
 import { Text } from "../Text";
 import { IconButton } from "../IconButton";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
+import { tokens as staticTokens } from "../utils/design";
 const MAX_TOAST_MESSAGE_LENGTH = 60;
 const ANNOUNCEMENT_DELAY = 100;
 function DefaultToast({ text1 }) {
     const { bottom } = useSafeAreaInsets();
     const { t } = useAtlantisI18n();
+    const styles = useStyles();
     const toastContainerStyles = [styles.container, { paddingBottom: bottom }];
+    const { tokens } = useAtlantisTheme();
     return (React.createElement(View, { style: toastContainerStyles },
         React.createElement(View, { style: styles.toast },
             React.createElement(TouchableOpacity, { style: styles.toastMessage, accessibilityRole: "alert" },
@@ -54,10 +57,10 @@ export function showToast({ message, bottomTabsVisible, position = "bottom", })
     });
 }
 function getBottomTabsOffset(bottomTabsVisible) {
-    const navBarHeight = tokens["space-largest"] + tokens["space-small"];
-    const navBarBorderTopWidth = tokens["space-minuscule"];
+    const navBarHeight = staticTokens["space-largest"] + staticTokens["space-small"];
+    const navBarBorderTopWidth = staticTokens["space-minuscule"];
     if (bottomTabsVisible) {
-        return navBarHeight + navBarBorderTopWidth + tokens["space-base"];
+        return navBarHeight + navBarBorderTopWidth + staticTokens["space-base"];
     }
-    return tokens["space-base"];
+    return staticTokens["space-base"];
 }

package/dist/src/Toast/Toast.styles.js

@@ -1,30 +1,31 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        flexDirection: "row",
-        paddingHorizontal: tokens["space-base"],
-        paddingBottom: tokens["space-base"],
-    },
-    toast: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        width: "100%",
-        maxWidth: 540,
-        paddingVertical: tokens["space-small"],
-        backgroundColor: tokens["color-blue"],
-        borderRadius: 6,
-        shadowOffset: { width: 0, height: 0 },
-        shadowOpacity: 0.1,
-        shadowRadius: 6,
-    },
-    toastMessage: {
-        justifyContent: "center",
-        paddingLeft: tokens["space-base"],
-        paddingVertical: tokens["space-small"],
-        flexShrink: 1,
-    },
-    toastIcon: {
-        justifyContent: "center",
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            flexDirection: "row",
+            paddingHorizontal: tokens["space-base"],
+            paddingBottom: tokens["space-base"],
+        },
+        toast: {
+            flexDirection: "row",
+            justifyContent: "space-between",
+            width: "100%",
+            maxWidth: 540,
+            paddingVertical: tokens["space-small"],
+            backgroundColor: tokens["color-blue"],
+            borderRadius: 6,
+            shadowOffset: { width: 0, height: 0 },
+            shadowOpacity: 0.1,
+            shadowRadius: 6,
+        },
+        toastMessage: {
+            justifyContent: "center",
+            paddingLeft: tokens["space-base"],
+            paddingVertical: tokens["space-small"],
+            flexShrink: 1,
+        },
+        toastIcon: {
+            justifyContent: "center",
+        },
+    };
 });