@jobber/components-native 0.77.1 → 0.79.0

package/dist/src/FormatFile/components/ProgressBar/ProgressBar.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import { Animated, View } from "react-native";
-import { styles } from "./ProgressBar.style";
+import { useStyles } from "./ProgressBar.style";
 import { StatusCode } from "../../types";
 export const ProgressBar = ({ progress, status, onComplete, }) => {
     const barWidth = useRef(new Animated.Value(0)).current;
@@ -19,6 +19,7 @@ export const ProgressBar = ({ progress, status, onComplete, }) => {
             }
         });
     }, [progress, barWidth, onComplete, status]);
+    const styles = useStyles();
     return (React.createElement(View, { testID: "format-file-progress-bar", style: styles.container },
         React.createElement(Animated.View, { testID: "format-file-inner-progress-bar", style: [
                 styles.progress,

package/dist/src/FormatFile/components/ProgressBar/ProgressBar.style.js

@@ -1,15 +1,16 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        width: "100%",
-        height: 8,
-        borderRadius: tokens["radius-circle"],
-        overflow: "hidden",
-        backgroundColor: tokens["color-surface--background"],
-    },
-    progress: {
-        height: "100%",
-        backgroundColor: tokens["color-green"],
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            width: "100%",
+            height: 8,
+            borderRadius: tokens["radius-circle"],
+            overflow: "hidden",
+            backgroundColor: tokens["color-surface--background"],
+        },
+        progress: {
+            height: "100%",
+            backgroundColor: tokens["color-green"],
+        },
+    };
 });

package/dist/src/Glimmer/Glimmer.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Animated, Easing, View } from "react-native";
 import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
-import { shineWidth, styles } from "./Glimmer.style";
-import { sizeStyles } from "./Glimmer.size.style";
-import { shapeStyles } from "./Glimmer.shape.style";
+import { shineWidth, useStyles } from "./Glimmer.style";
+import { useSizeStyles } from "./Glimmer.size.style";
+import { useShapeStyles } from "./Glimmer.shape.style";
 import { tokens } from "../utils/design";
 export const GLIMMER_TEST_ID = "ATL-Glimmer";
 export const GLIMMER_SHINE_TEST_ID = "ATL-Glimmer-Shine";
@@ -22,6 +22,9 @@ export function Glimmer({ width, shape = "rectangle", size = "base", timing = "b
         shine.start();
         return shine.stop;
     }, [parentWidth]);
+    const styles = useStyles();
+    const sizeStyles = useSizeStyles();
+    const shapeStyles = useShapeStyles();
     return (React.createElement(View, { style: [
             styles.container,
             sizeStyles[size],

package/dist/src/Glimmer/Glimmer.shape.style.js

@@ -1,16 +1,17 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const shapeStyles = StyleSheet.create({
-    rectangle: {
-        width: "100%",
-    },
-    square: {
-        width: "auto",
-        aspectRatio: 1 / 1,
-    },
-    circle: {
-        width: "auto",
-        aspectRatio: 1 / 1,
-        borderRadius: tokens["radius-circle"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useShapeStyles = buildThemedStyles(tokens => {
+    return {
+        rectangle: {
+            width: "100%",
+        },
+        square: {
+            width: "auto",
+            aspectRatio: 1 / 1,
+        },
+        circle: {
+            width: "auto",
+            aspectRatio: 1 / 1,
+            borderRadius: tokens["radius-circle"],
+        },
+    };
 });

package/dist/src/Glimmer/Glimmer.size.style.js

@@ -1,9 +1,10 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const sizeStyles = StyleSheet.create({
-    small: { height: tokens["space-small"] },
-    base: { height: tokens["space-base"] },
-    large: { height: tokens["space-large"] },
-    larger: { height: tokens["space-larger"] },
-    largest: { height: tokens["space-largest"] },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useSizeStyles = buildThemedStyles(tokens => {
+    return {
+        small: { height: tokens["space-small"] },
+        base: { height: tokens["space-base"] },
+        large: { height: tokens["space-large"] },
+        larger: { height: tokens["space-larger"] },
+        largest: { height: tokens["space-largest"] },
+    };
 });

package/dist/src/Glimmer/Glimmer.style.js

@@ -1,20 +1,22 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const shineWidth = tokens["space-largest"];
-export const styles = StyleSheet.create({
-    container: {
-        backgroundColor: "rgba(0, 0, 0, 0.05)",
-        overflow: "hidden",
-        position: "relative",
-        width: "100%",
-        height: tokens["space-base"],
-        borderRadius: tokens["radius-base"],
-    },
-    shine: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: shineWidth,
-        height: "100%",
-    },
+import { tokens as staticTokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const shineWidth = staticTokens["space-largest"];
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            backgroundColor: "rgba(0, 0, 0, 0.05)",
+            overflow: "hidden",
+            position: "relative",
+            width: "100%",
+            height: tokens["space-base"],
+            borderRadius: tokens["radius-base"],
+        },
+        shine: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: shineWidth,
+            height: "100%",
+        },
+    };
 });

package/dist/src/IconButton/IconButton.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { TouchableOpacity } from "react-native";
-import { styles } from "./IconButton.style";
+import { useStyles } from "./IconButton.style";
 import { Icon } from "../Icon";
 export function IconButton({ badge, name, color, customColor, onPress, accessibilityLabel, testID, }) {
+    const styles = useStyles();
     return (React.createElement(TouchableOpacity, { onPress: onPress, style: styles.container, accessibilityLabel: accessibilityLabel, accessibilityRole: "button", testID: testID },
         badge,
         React.createElement(Icon, { name: name, color: color, customColor: customColor })));

package/dist/src/IconButton/IconButton.style.js

@@ -1,10 +1,11 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        width: tokens["space-largest"],
-        height: tokens["space-largest"],
-        justifyContent: "center",
-        alignItems: "center",
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            width: tokens["space-largest"],
+            height: tokens["space-largest"],
+            justifyContent: "center",
+            alignItems: "center",
+        },
+    };
 });

package/dist/src/InputFieldWrapper/CommonInputStyles.style.js

@@ -1,35 +1,49 @@
 import { StyleSheet } from "react-native";
-import { typographyStyles } from "../Typography";
-import { tokens } from "../utils/design";
-export const commonInputStyles = StyleSheet.create({
-    input: {
-        width: "100%",
-        flexShrink: 1,
-        flexGrow: 1,
-        color: tokens["color-text"],
-        fontFamily: typographyStyles.baseRegularRegular.fontFamily,
-        fontSize: typographyStyles.defaultSize.fontSize,
-        letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
-        minHeight: tokens["space-largest"] + tokens["space-small"],
-        padding: 0,
-    },
-    inputEmpty: {
-        paddingTop: 0,
-    },
-    inputDisabled: {
-        color: typographyStyles.disabled.color,
-    },
-    container: {
-        paddingLeft: tokens["space-base"],
-        marginVertical: tokens["space-smaller"],
-        backgroundColor: tokens["color-surface"],
-        minHeight: tokens["space-largest"] + tokens["space-small"],
-        flexDirection: "row",
-        justifyContent: "space-between",
-        width: "100%",
-        borderColor: tokens["color-border"],
-        borderStyle: "solid",
-        borderWidth: tokens["border-base"],
-        borderRadius: tokens["radius-base"],
-    },
+import { buildThemedStyles, } from "../AtlantisThemeContext";
+import { getTypographyStyles } from "../Typography";
+import { tokens as staticTokens } from "../utils/design";
+export const createCommonInputTokens = (tokens) => {
+    const typographyStyles = getTypographyStyles(tokens);
+    return {
+        input: {
+            width: "100%",
+            flexShrink: 1,
+            flexGrow: 1,
+            color: tokens["color-text"],
+            fontFamily: typographyStyles.baseRegularRegular.fontFamily,
+            fontSize: typographyStyles.defaultSize.fontSize,
+            letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
+            minHeight: tokens["space-largest"] + tokens["space-small"],
+            padding: 0,
+        },
+        inputEmpty: {
+            paddingTop: 0,
+        },
+        inputDisabled: {
+            color: typographyStyles.disabled.color,
+        },
+        container: {
+            paddingLeft: tokens["space-base"],
+            marginVertical: tokens["space-smaller"],
+            backgroundColor: tokens["color-surface"],
+            minHeight: tokens["space-largest"] + tokens["space-small"],
+            flexDirection: "row",
+            justifyContent: "space-between",
+            width: "100%",
+            borderColor: tokens["color-border"],
+            borderStyle: "solid",
+            borderWidth: tokens["border-base"],
+            borderRadius: tokens["radius-base"],
+        },
+    };
+};
+/**
+ * @deprecated Use useCommonInputStyles instead
+ */
+export const commonInputStyles = StyleSheet.create(createCommonInputTokens(staticTokens));
+export const getCommonInputStyles = (tokens) => {
+    return createCommonInputTokens(tokens);
+};
+export const useCommonInputStyles = buildThemedStyles(tokens => {
+    return getCommonInputStyles(tokens);
 });

package/dist/src/InputFieldWrapper/InputFieldWrapper.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { Text as RNText, View, } from "react-native";
-import { styles } from "./InputFieldWrapper.style";
+import { useStyles } from "./InputFieldWrapper.style";
 import { PrefixIcon, PrefixLabel } from "./components/Prefix/Prefix";
 import { SuffixIcon, SuffixLabel } from "./components/Suffix/Suffix";
 import { ClearAction } from "./components/ClearAction";
 import { Glimmer } from "../Glimmer/Glimmer";
 import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
-import { typographyStyles } from "../Typography";
+import { useTypographyStyles } from "../Typography";
 import { Text } from "../Text";
 import { ActivityIndicator } from "../ActivityIndicator";
 export const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID = "ATL-InputFieldWrapper-Glimmers";
@@ -19,6 +19,7 @@ export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveTex
     const isToolbarVisible = toolbar && (toolbarVisibility === "always" || focused);
     const showLoadingSpinner = loading && loadingType === "spinner";
     const showLoadingGlimmer = loading && loadingType === "glimmer";
+    const styles = useStyles();
     return (React.createElement(ErrorMessageWrapper, { message: getMessage({ invalid, error }) },
         React.createElement(View, { testID: "ATL-InputFieldWrapper", style: [
                 styles.container,
@@ -93,6 +94,7 @@ function getMessage({ invalid, error, }) {
     return messages.join("\n");
 }
 function Placeholder({ placeholder, styleOverride, labelVariation, hasMiniLabel, }) {
+    const typographyStyles = useTypographyStyles();
     return (React.createElement(React.Fragment, null, !styleOverride ? (React.createElement(Text, { hideFromScreenReader: true, maxLines: "single", variation: labelVariation, level: hasMiniLabel ? "textSupporting" : "text" }, placeholder)) : (React.createElement(RNText, { accessibilityRole: "none", accessible: false, importantForAccessibility: "no-hide-descendants", numberOfLines: 1, style: [
             typographyStyles[labelVariation],
             typographyStyles.baseRegularRegular,

package/dist/src/InputFieldWrapper/InputFieldWrapper.style.js

@@ -1,118 +1,123 @@
 import { StyleSheet } from "react-native";
-import { commonInputStyles } from "./CommonInputStyles.style";
-import { tokens } from "../utils/design";
-import { typographyStyles } from "../Typography";
-export const styles = StyleSheet.create({
-    container: StyleSheet.flatten([
-        commonInputStyles.container,
-        {
-            flexDirection: "column",
-        },
-    ]),
-    field: {
-        flexDirection: "row",
-        alignItems: "center",
-    },
-    inputContainer: {
-        flexDirection: "row",
-        flex: 1,
-        justifyContent: "flex-start",
-    },
-    inputFocused: {
-        borderColor: tokens["color-interactive"],
-    },
-    inputInvalid: {
-        borderColor: tokens["color-critical"],
-    },
-    label: {
-        // for placeholder
-        position: "absolute",
-        display: "flex",
-        justifyContent: "center",
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-    },
-    miniLabel: {
-        top: 0,
-        paddingTop: tokens["space-small"] - tokens["space-smallest"],
-        backgroundColor: tokens["color-surface"],
-        marginRight: tokens["space-small"],
-        maxHeight: (typographyStyles.defaultSize.lineHeight || 0) + tokens["space-smaller"],
-        zIndex: 1,
-    },
-    // Prevents the miniLabel from cutting off the ClearAction button
-    miniLabelShowClearAction: {
-        backgroundColor: "transparent",
-    },
-    disabled: {
-        backgroundColor: tokens["color-disabled--secondary"],
-    },
-    fieldAffix: {
-        flexDirection: "row",
-    },
-    fieldAffixMiniLabel: {
-        paddingTop: tokens["space-small"] - tokens["space-smallest"],
-        // @ts-expect-error tsc-ci
-        top: typographyStyles.smallSize.fontSize / 2,
-        right: 0,
-        bottom: 0,
-        left: 0,
-    },
-    prefixIcon: {
-        justifyContent: "center",
-        paddingRight: tokens["space-small"],
-    },
-    prefixLabel: {
-        justifyContent: "center",
-        paddingTop: tokens["space-minuscule"],
-        paddingRight: tokens["space-minuscule"],
-    },
-    suffixIcon: {
-        justifyContent: "center",
-        paddingRight: tokens["space-small"],
-    },
-    suffixLabel: {
-        justifyContent: "center",
-        paddingTop: tokens["space-minuscule"],
-        paddingRight: tokens["space-small"],
-    },
-    suffixIconMargin: {
-        marginLeft: tokens["space-small"] + tokens["space-smaller"],
-    },
-    suffixLabelMargin: {
-        marginLeft: tokens["space-smallest"],
-    },
-    inputEndContainer: {
-        flexDirection: "row",
-        zIndex: 1,
-    },
-    toolbar: {
-        flexBasis: "100%",
-        flexDirection: "row",
-        gap: tokens["space-small"],
-        paddingBottom: tokens["space-small"],
-    },
-    loadingSpinner: {
-        justifyContent: "center",
-        paddingRight: tokens["space-small"],
-    },
-    loadingGlimmers: {
-        position: "absolute",
-        top: tokens["space-base"],
-        bottom: tokens["space-base"],
-        left: 0,
-        right: 0,
-        gap: tokens["space-small"],
-        paddingTop: tokens["space-small"],
-        paddingRight: tokens["space-large"],
-        backgroundColor: tokens["color-surface"],
-        overflow: "hidden",
-    },
-    loadingGlimmersHasValue: {
-        top: tokens["space-large"],
-        paddingTop: tokens["space-base"] - tokens["space-smaller"],
-        bottom: tokens["space-smaller"],
-    },
+import { getCommonInputStyles } from "./CommonInputStyles.style";
+import { buildThemedStyles } from "../AtlantisThemeContext";
+import { getTypographyStyles } from "../Typography";
+export const useStyles = buildThemedStyles(tokens => {
+    const commonInputStyles = getCommonInputStyles(tokens);
+    const typographyStyles = getTypographyStyles(tokens);
+    return {
+        container: StyleSheet.flatten([
+            commonInputStyles.container,
+            {
+                flexDirection: "column",
+            },
+        ]),
+        field: {
+            flexDirection: "row",
+            alignItems: "center",
+        },
+        inputContainer: {
+            flexDirection: "row",
+            flex: 1,
+            justifyContent: "flex-start",
+        },
+        inputFocused: {
+            borderColor: tokens["color-interactive"],
+        },
+        inputInvalid: {
+            borderColor: tokens["color-critical"],
+        },
+        label: {
+            // for placeholder
+            position: "absolute",
+            display: "flex",
+            justifyContent: "center",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+        },
+        miniLabel: {
+            top: 0,
+            paddingTop: tokens["space-small"] - tokens["space-smallest"],
+            backgroundColor: tokens["color-surface"],
+            marginRight: tokens["space-small"],
+            maxHeight: (typographyStyles.defaultSize.lineHeight || 0) +
+                tokens["space-smaller"],
+            zIndex: 1,
+        },
+        // Prevents the miniLabel from cutting off the ClearAction button
+        miniLabelShowClearAction: {
+            backgroundColor: "transparent",
+        },
+        disabled: {
+            backgroundColor: tokens["color-disabled--secondary"],
+        },
+        fieldAffix: {
+            flexDirection: "row",
+        },
+        fieldAffixMiniLabel: {
+            paddingTop: tokens["space-small"] - tokens["space-smallest"],
+            // @ts-expect-error tsc-ci
+            top: typographyStyles.smallSize.fontSize / 2,
+            right: 0,
+            bottom: 0,
+            left: 0,
+        },
+        prefixIcon: {
+            justifyContent: "center",
+            paddingRight: tokens["space-small"],
+        },
+        prefixLabel: {
+            justifyContent: "center",
+            paddingTop: tokens["space-minuscule"],
+            paddingRight: tokens["space-minuscule"],
+        },
+        suffixIcon: {
+            justifyContent: "center",
+            paddingRight: tokens["space-small"],
+        },
+        suffixLabel: {
+            justifyContent: "center",
+            paddingTop: tokens["space-minuscule"],
+            paddingRight: tokens["space-small"],
+        },
+        suffixIconMargin: {
+            marginLeft: tokens["space-small"] + tokens["space-smaller"],
+        },
+        suffixLabelMargin: {
+            marginLeft: tokens["space-smallest"],
+        },
+        inputEndContainer: {
+            flexDirection: "row",
+            zIndex: 1,
+        },
+        toolbar: {
+            flexBasis: "100%",
+            flexDirection: "row",
+            gap: tokens["space-small"],
+            paddingBottom: tokens["space-small"],
+        },
+        loadingSpinner: {
+            justifyContent: "center",
+            paddingRight: tokens["space-small"],
+        },
+        loadingGlimmers: {
+            position: "absolute",
+            top: tokens["space-base"],
+            bottom: tokens["space-base"],
+            left: 0,
+            right: 0,
+            gap: tokens["space-small"],
+            paddingTop: tokens["space-small"],
+            paddingRight: tokens["space-large"],
+            backgroundColor: tokens["color-surface"],
+            overflow: "hidden",
+        },
+        loadingGlimmersHasValue: {
+            top: tokens["space-large"],
+            paddingTop: tokens["space-base"] - tokens["space-smaller"],
+            bottom: tokens["space-smaller"],
+        },
+    };
 });

package/dist/src/InputFieldWrapper/components/ClearAction/ClearAction.js

@@ -1,10 +1,11 @@
 import React from "react";
 import { Pressable, View } from "react-native";
-import { styles } from "./ClearAction.style";
+import { useStyles } from "./ClearAction.style";
 import { Icon } from "../../../Icon";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export function ClearAction({ onPress, hasMarginRight = false, }) {
     const { t } = useAtlantisI18n();
+    const styles = useStyles();
     return (React.createElement(Pressable, { style: [styles.container, hasMarginRight && styles.addedMargin], onPress: onPress, accessibilityLabel: t("InputFieldWrapper.clear") },
         React.createElement(View, { style: styles.circle },
             React.createElement(Icon, { size: "small", name: "cross", color: "interactiveSubtle" }))));

package/dist/src/InputFieldWrapper/components/ClearAction/ClearAction.style.js

@@ -1,25 +1,26 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
-const width = tokens["space-smaller"] + tokens["space-larger"];
-export const styles = StyleSheet.create({
-    container: {
-        width,
-        height: "100%",
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center",
-        alignSelf: "center",
-    },
-    circle: {
-        backgroundColor: tokens["color-surface--background"],
-        borderRadius: tokens["radius-circle"],
-        width: tokens["space-large"],
-        height: tokens["space-large"],
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    addedMargin: {
-        marginRight: tokens["space-small"],
-    },
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    const width = tokens["space-smaller"] + tokens["space-larger"];
+    return {
+        container: {
+            width,
+            height: "100%",
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            alignSelf: "center",
+        },
+        circle: {
+            backgroundColor: tokens["color-surface--background"],
+            borderRadius: tokens["radius-circle"],
+            width: tokens["space-large"],
+            height: tokens["space-large"],
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        addedMargin: {
+            marginRight: tokens["space-small"],
+        },
+    };
 });