@jobber/components-native 0.77.1 → 0.78.0

package/dist/src/Button/Button.style.js

@@ -1,96 +1,98 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-const iconTranslateY = tokens["space-large"] / 2;
-const buttonRadius = tokens["radius-base"];
-export const baseButtonHeight = tokens["space-base"] * 3;
-export const smallButtonHeight = tokens["space-base"] * 2.5;
-export const styles = StyleSheet.create({
-    fullHeight: {
-        flexGrow: 1,
-        flexShrink: 0,
-    },
-    fullWidth: {
-        alignSelf: "stretch",
-    },
-    touchable: {
-        borderRadius: buttonRadius,
-    },
-    button: {
-        justifyContent: "center",
-        alignItems: "center",
-        alignSelf: "stretch",
-        flexDirection: "row",
-        overflow: "hidden",
-        margin: 0,
-        borderRadius: buttonRadius,
-        borderWidth: tokens["border-base"],
-        paddingVertical: tokens["space-small"],
-    },
-    base: {
-        minHeight: baseButtonHeight,
-        paddingHorizontal: tokens["space-base"],
-    },
-    small: {
-        minHeight: smallButtonHeight,
-        paddingHorizontal: tokens["space-small"] + tokens["space-smaller"],
-    },
-    reducedPaddingForFullWidth: {
-        paddingHorizontal: tokens["space-smaller"],
-    },
-    iconPaddingOffset: {
-        paddingRight: tokens["space-smaller"],
-    },
-    content: {
-        paddingLeft: tokens["space-large"],
-        height: "100%",
-    },
-    contentWithLabel: {
-        paddingLeft: tokens["space-large"] + tokens["space-small"],
-    },
-    iconStyle: {
-        position: "absolute",
-        top: "50%",
-        left: 0,
-        transform: [{ translateY: -iconTranslateY }],
-    },
-    labelStyle: {
-        flexGrow: 1,
-        justifyContent: "center",
-    },
-    /* Variations */
-    work: {
-        backgroundColor: tokens["color-interactive"],
-        borderColor: tokens["color-interactive"],
-    },
-    learning: {
-        backgroundColor: tokens["color-interactive--subtle"],
-        borderColor: tokens["color-interactive--subtle"],
-    },
-    destructive: {
-        backgroundColor: tokens["color-destructive"],
-        borderColor: tokens["color-destructive"],
-    },
-    /* Cancel is special because, by default, it's styled as a secondary button */
-    cancel: {
-        backgroundColor: tokens["color-surface"],
-        borderColor: tokens["color-border"],
-    },
-    cancelSecondary: {
-        borderColor: "transparent",
-    },
-    /* Types */
-    primary: {},
-    secondary: {
-        backgroundColor: tokens["color-surface"],
-        borderColor: tokens["color-border"],
-    },
-    tertiary: {
-        backgroundColor: tokens["color-surface"],
-        borderColor: "transparent",
-    },
-    /* Disabled */
-    disabled: {
-        borderColor: tokens["color-disabled--secondary"],
-        backgroundColor: tokens["color-disabled--secondary"],
-    },
+import { tokens as staticTokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
+const iconTranslateY = staticTokens["space-large"] / 2;
+const buttonRadius = staticTokens["radius-base"];
+export const baseButtonHeight = staticTokens["space-base"] * 3;
+export const smallButtonHeight = staticTokens["space-base"] * 2.5;
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        fullHeight: {
+            flexGrow: 1,
+            flexShrink: 0,
+        },
+        fullWidth: {
+            alignSelf: "stretch",
+        },
+        touchable: {
+            borderRadius: buttonRadius,
+        },
+        button: {
+            justifyContent: "center",
+            alignItems: "center",
+            alignSelf: "stretch",
+            flexDirection: "row",
+            overflow: "hidden",
+            margin: 0,
+            borderRadius: buttonRadius,
+            borderWidth: tokens["border-base"],
+            paddingVertical: tokens["space-small"],
+        },
+        base: {
+            minHeight: baseButtonHeight,
+            paddingHorizontal: tokens["space-base"],
+        },
+        small: {
+            minHeight: smallButtonHeight,
+            paddingHorizontal: tokens["space-small"] + tokens["space-smaller"],
+        },
+        reducedPaddingForFullWidth: {
+            paddingHorizontal: tokens["space-smaller"],
+        },
+        iconPaddingOffset: {
+            paddingRight: tokens["space-smaller"],
+        },
+        content: {
+            paddingLeft: tokens["space-large"],
+            height: "100%",
+        },
+        contentWithLabel: {
+            paddingLeft: tokens["space-large"] + tokens["space-small"],
+        },
+        iconStyle: {
+            position: "absolute",
+            top: "50%",
+            left: 0,
+            transform: [{ translateY: -iconTranslateY }],
+        },
+        labelStyle: {
+            flexGrow: 1,
+            justifyContent: "center",
+        },
+        /* Variations */
+        work: {
+            backgroundColor: tokens["color-interactive"],
+            borderColor: tokens["color-interactive"],
+        },
+        learning: {
+            backgroundColor: tokens["color-interactive--subtle"],
+            borderColor: tokens["color-interactive--subtle"],
+        },
+        destructive: {
+            backgroundColor: tokens["color-destructive"],
+            borderColor: tokens["color-destructive"],
+        },
+        /* Cancel is special because, by default, it's styled as a secondary button */
+        cancel: {
+            backgroundColor: tokens["color-surface"],
+            borderColor: tokens["color-border"],
+        },
+        cancelSecondary: {
+            borderColor: "transparent",
+        },
+        /* Types */
+        primary: {},
+        secondary: {
+            backgroundColor: tokens["color-surface"],
+            borderColor: tokens["color-border"],
+        },
+        tertiary: {
+            backgroundColor: tokens["color-surface"],
+            borderColor: "transparent",
+        },
+        /* Disabled */
+        disabled: {
+            borderColor: tokens["color-disabled--secondary"],
+            backgroundColor: tokens["color-disabled--secondary"],
+        },
+    };
 });

package/dist/src/ButtonGroup/ButtonGroup.js

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { View } from "react-native";
 import { PrimaryAction, SecondaryAction } from "./ButtonGroupAction";
-import { styles } from "./ButtonGroup.style";
+import { useStyles } from "./ButtonGroup.style";
 import { SecondaryActionSheet } from "./components/SecondaryActionSheet";
 import { getActions, usePreventTapWhenOffline } from "./utils";
 import { Button } from "../Button";
@@ -11,6 +11,7 @@ export function ButtonGroup({ children, showCancelInBottomSheet, bottomSheetHead
     const { handlePress } = usePreventTapWhenOffline();
     const secondaryActionsRef = useRef();
     const { primaryActions, secondaryActions } = getActions(children);
+    const styles = useStyles();
     return (React.createElement(View, { style: styles.buttonGroup },
         primaryActions.map((action, index) => {
             const { label, onPress, buttonType, buttonVariation, icon, customButton, loading, } = action.props;

package/dist/src/ButtonGroup/ButtonGroup.style.js

@@ -1,18 +1,19 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    buttonGroup: {
-        width: "100%",
-        flexDirection: "row",
-        justifyContent: "flex-end",
-        gap: tokens["space-small"],
-    },
-    button: {
-        flexBasis: tokens["space-largest"],
-        flexGrow: 1,
-    },
-    moreButton: {
-        flexBasis: tokens["space-largest"],
-        flexGrow: 0,
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        buttonGroup: {
+            width: "100%",
+            flexDirection: "row",
+            justifyContent: "flex-end",
+            gap: tokens["space-small"],
+        },
+        button: {
+            flexBasis: tokens["space-largest"],
+            flexGrow: 1,
+        },
+        moreButton: {
+            flexBasis: tokens["space-largest"],
+            flexGrow: 0,
+        },
+    };
 });

package/dist/src/Card/Card.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { Pressable, View, } from "react-native";
-import { styles } from "./Card.style";
+import { useStyles } from "./Card.style";
 import { InternalCardHeader } from "./components/InternalCardHeader";
 import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
 import { ActionLabel } from "../ActionLabel";
 import { Typography } from "../Typography";
 import { Icon } from "../Icon";
-function getElevationStyle(elevation) {
+function getElevationStyle(elevation, styles) {
     if (elevation === "none") {
         return undefined;
     }
@@ -14,8 +14,9 @@ function getElevationStyle(elevation) {
 }
 export function Card({ header, footer, children, reportCardHeight: onCardHeightChange, testID = "card", error, elevation = "none", }) {
     var _a, _b;
+    const styles = useStyles();
     return (React.createElement(ErrorMessageWrapper, { message: error, wrapFor: "card" },
-        React.createElement(View, { onLayout: handleLayoutChange, style: [styles.container, getElevationStyle(elevation)], testID: testID },
+        React.createElement(View, { onLayout: handleLayoutChange, style: [styles.container, getElevationStyle(elevation, styles)], testID: testID },
             header && (React.createElement(InternalCardHeader, { onPress: header.onPress, testID: `${testID}Header`, collapsable: !!children },
                 React.createElement(View, { style: styles.headerTitle },
                     React.createElement(Typography, { color: "heading", fontFamily: "base", fontWeight: "bold", size: "default", lineHeight: "base", accessibilityRole: "header" }, header.title)),

package/dist/src/Card/Card.style.js

@@ -1,31 +1,32 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        width: "100%",
-        backgroundColor: tokens["color-surface"],
-    },
-    lowElevation: Object.assign({}, tokens["shadow-low"]),
-    baseElevation: Object.assign({}, tokens["shadow-base"]),
-    highElevation: Object.assign({}, tokens["shadow-high"]),
-    headerTitle: {
-        flexGrow: 1,
-        flex: 1,
-    },
-    footer: {
-        height: tokens["space-largest"],
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    pressed: {
-        opacity: tokens["opacity-pressed"],
-    },
-    actionItem: {
-        height: tokens["typography--lineHeight-base"],
-        justifyContent: "center",
-    },
-    actionLabel: {
-        paddingTop: tokens["space-smallest"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            width: "100%",
+            backgroundColor: tokens["color-surface"],
+        },
+        lowElevation: Object.assign({}, tokens["shadow-low"]),
+        baseElevation: Object.assign({}, tokens["shadow-base"]),
+        highElevation: Object.assign({}, tokens["shadow-high"]),
+        headerTitle: {
+            flexGrow: 1,
+            flex: 1,
+        },
+        footer: {
+            height: tokens["space-largest"],
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        pressed: {
+            opacity: tokens["opacity-pressed"],
+        },
+        actionItem: {
+            height: tokens["typography--lineHeight-base"],
+            justifyContent: "center",
+        },
+        actionLabel: {
+            paddingTop: tokens["space-smallest"],
+        },
+    };
 });

package/dist/src/Card/components/InternalCardHeader.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { Pressable, View } from "react-native";
-import { styles } from "./InternalCardHeader.style";
+import { useStyles } from "./InternalCardHeader.style";
 export function InternalCardHeader({ onPress, children, testID, collapsable, }) {
+    const styles = useStyles();
     const conditionalChildStyling = collapsable ? undefined : styles.noChildren;
     if (onPress) {
         return (React.createElement(Pressable, { testID: testID, onPress: onPress, style: ({ pressed }) => [

package/dist/src/Card/components/InternalCardHeader.style.js

@@ -1,16 +1,17 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../utils/design";
-export const styles = StyleSheet.create({
-    header: {
-        flexDirection: "row",
-        alignItems: "flex-start",
-        paddingTop: tokens["space-small"] + tokens["space-smaller"],
-        paddingHorizontal: tokens["space-base"],
-    },
-    pressed: {
-        opacity: tokens["opacity-pressed"],
-    },
-    noChildren: {
-        paddingBottom: tokens["space-small"] + tokens["space-smaller"],
-    },
+import { buildThemedStyles } from "../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        header: {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            paddingTop: tokens["space-small"] + tokens["space-smaller"],
+            paddingHorizontal: tokens["space-base"],
+        },
+        pressed: {
+            opacity: tokens["opacity-pressed"],
+        },
+        noChildren: {
+            paddingBottom: tokens["space-small"] + tokens["space-smaller"],
+        },
+    };
 });

package/dist/src/Checkbox/Checkbox.js

@@ -1,10 +1,10 @@
 import React from "react";
 import { Pressable, View } from "react-native";
-import { tokens } from "@jobber/design";
-import { styles } from "./Checkbox.style";
+import { useStyles } from "./Checkbox.style";
 import { Text } from "../Text";
 import { Icon } from "../Icon";
 import { FormField } from "../FormField";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 export function Checkbox(props) {
     if (props.checked !== undefined && props.onChange !== undefined) {
         return React.createElement(CheckboxInternal, Object.assign({}, props));
@@ -28,6 +28,7 @@ function CheckboxInternal({ label, checked, defaultChecked, indeterminate = fals
     const textVariation = disabled ? "disabled" : "subdued";
     const a11yStateChecked = indeterminate ? "mixed" : internalValue;
     const backgroundColor = getBackgroundColor(internalValue, disabled, indeterminate);
+    const styles = useStyles();
     return (React.createElement(Pressable, { accessibilityRole: "checkbox", accessibilityLabel: accessibilityLabel || label, accessibilityState: {
             disabled: disabled,
             checked: a11yStateChecked,
@@ -52,6 +53,7 @@ function CheckboxInternal({ label, checked, defaultChecked, indeterminate = fals
         assistiveText && (React.createElement(Text, { level: "textSupporting", align: "start", variation: textVariation }, assistiveText))));
 }
 function getBackgroundColor(checked, disabled, indeterminate) {
+    const { tokens } = useAtlantisTheme();
     if (checked || indeterminate) {
         if (disabled) {
             return tokens["color-disabled"];

package/dist/src/Checkbox/Checkbox.style.js

@@ -1,30 +1,31 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-const checkboxDimensions = tokens["space-large"] + tokens["space-smaller"];
-export const styles = StyleSheet.create({
-    container: {
-        width: "100%",
-    },
-    checkBoxContainer: {
-        width: "100%",
-        justifyContent: "space-between",
-        flexDirection: "row",
-        alignItems: "center",
-        paddingVertical: tokens["space-small"],
-    },
-    label: {
-        flex: 1,
-    },
-    checkbox: {
-        borderRadius: tokens["radius-base"],
-        borderWidth: tokens["border-thick"],
-        justifyContent: "flex-end",
-        width: checkboxDimensions,
-        height: checkboxDimensions,
-        marginLeft: tokens["space-smaller"],
-        borderColor: tokens["color-interactive"],
-    },
-    disabledCheckbox: {
-        borderColor: tokens["color-disabled"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    const checkboxDimensions = tokens["space-large"] + tokens["space-smaller"];
+    return {
+        container: {
+            width: "100%",
+        },
+        checkBoxContainer: {
+            width: "100%",
+            justifyContent: "space-between",
+            flexDirection: "row",
+            alignItems: "center",
+            paddingVertical: tokens["space-small"],
+        },
+        label: {
+            flex: 1,
+        },
+        checkbox: {
+            borderRadius: tokens["radius-base"],
+            borderWidth: tokens["border-thick"],
+            justifyContent: "flex-end",
+            width: checkboxDimensions,
+            height: checkboxDimensions,
+            marginLeft: tokens["space-smaller"],
+            borderColor: tokens["color-interactive"],
+        },
+        disabledCheckbox: {
+            borderColor: tokens["color-disabled"],
+        },
+    };
 });

package/dist/src/Checkbox/CheckboxGroup.js

@@ -13,7 +13,7 @@ import React, { Fragment, useReducer } from "react";
 import { View } from "react-native";
 import isEmpty from "lodash/isEmpty";
 import reduce from "lodash/reduce";
-import { styles } from "./CheckboxGroup.style";
+import { useStyles } from "./CheckboxGroup.style";
 import { Checkbox } from "./Checkbox";
 import { checkboxGroupReducer, initCheckboxGroupState, } from "./CheckboxGroupReducer";
 import { FormField } from "../FormField";
@@ -46,6 +46,7 @@ function CheckboxGroupInternal({ label, disabled, children, state, accessibility
         onChange === null || onChange === void 0 ? void 0 : onChange(data);
     };
     const indeterminate = checkIndeterminateStatus(actualCheckedValues);
+    const styles = useStyles();
     function cloneChildCheckbox(checkbox) {
         const name = throwErrorIfItHasNoName(checkbox.props.name);
         const childDisabled = disabled || checkbox.props.disabled;

package/dist/src/Checkbox/CheckboxGroup.style.js

@@ -1,14 +1,15 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    container: {
-        width: "100%",
-        justifyContent: "center",
-        alignItems: "center",
-        paddingHorizontal: tokens["space-base"],
-        paddingVertical: tokens["space-small"],
-    },
-    nestedCheckboxes: {
-        marginLeft: tokens["space-large"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    return {
+        container: {
+            width: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+            paddingHorizontal: tokens["space-base"],
+            paddingVertical: tokens["space-small"],
+        },
+        nestedCheckboxes: {
+            marginLeft: tokens["space-large"],
+        },
+    };
 });

package/dist/src/Chip/Chip.js

@@ -1,11 +1,13 @@
 import React, { useMemo } from "react";
 import { Pressable, View } from "react-native";
-import { styles } from "./Chip.style";
+import { useStyles } from "./Chip.style";
 import { Icon } from "../Icon";
 import { Typography } from "../Typography";
-import { tokens } from "../utils/design";
-const defaultAccentColor = tokens["color-surface--reverse"];
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBackgroundColor = "background", accessibilityLabel, accessibilityRole = "radio", accent, }) {
+    const styles = useStyles();
+    const { tokens } = useAtlantisTheme();
+    const defaultAccentColor = tokens["color-surface--reverse"];
     const { chipStyle, iconCustomColor, dismissColor } = useMemo(() => {
         const accentColor = accent ? tokens[`color-${accent}`] : defaultAccentColor;
         const iconColor = isActive ? tokens["color-surface"] : accentColor;

package/dist/src/Chip/Chip.style.js

@@ -1,32 +1,33 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-const chipHeight = tokens["space-larger"] + tokens["space-small"];
-export const styles = StyleSheet.create({
-    container: {
-        alignItems: "center",
-        borderRadius: tokens["radius-circle"],
-        flexDirection: "row",
-        height: chipHeight,
-        justifyContent: "center",
-        marginHorizontal: tokens["space-smaller"],
-        marginTop: tokens["space-small"],
-        paddingHorizontal: tokens["space-small"],
-    },
-    iconLeft: {
-        marginHorizontal: tokens["space-smallest"],
-    },
-    chipText: {
-        flexGrow: 1,
-        flexShrink: 1,
-        marginHorizontal: tokens["space-smallest"],
-    },
-    dismissIcon: {
-        backgroundColor: tokens["color-surface"],
-        borderRadius: tokens["radius-circle"],
-        marginLeft: tokens["space-smaller"],
-        padding: tokens["space-smaller"],
-    },
-    activeDismissIcon: {
-        backgroundColor: tokens["color-surface--background"],
-    },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => {
+    const chipHeight = tokens["space-larger"] + tokens["space-small"];
+    return {
+        container: {
+            alignItems: "center",
+            borderRadius: tokens["radius-circle"],
+            flexDirection: "row",
+            height: chipHeight,
+            justifyContent: "center",
+            marginHorizontal: tokens["space-smaller"],
+            marginTop: tokens["space-small"],
+            paddingHorizontal: tokens["space-small"],
+        },
+        iconLeft: {
+            marginHorizontal: tokens["space-smallest"],
+        },
+        chipText: {
+            flexGrow: 1,
+            flexShrink: 1,
+            marginHorizontal: tokens["space-smallest"],
+        },
+        dismissIcon: {
+            backgroundColor: tokens["color-surface"],
+            borderRadius: tokens["radius-circle"],
+            marginLeft: tokens["space-smaller"],
+            padding: tokens["space-smaller"],
+        },
+        activeDismissIcon: {
+            backgroundColor: tokens["color-surface--background"],
+        },
+    };
 });

package/dist/src/Content/Content.js

@@ -1,12 +1,15 @@
 import React from "react";
 import { View } from "react-native";
-import { horizontalStyles } from "./ContentHorizontal.style";
-import { verticalStyles } from "./ContentVertical.style";
-import { spaceStyles } from "./ContentSpaceAround.style";
+import { useHorizontalStyles } from "./ContentHorizontal.style";
+import { useVerticalStyles } from "./ContentVertical.style";
+import { useSpaceAroundStyles } from "./ContentSpaceAround.style";
 export function Content({ children, spacing = "base", childSpacing = "base", direction = "vertical", }) {
+    const horizontalStyles = useHorizontalStyles();
+    const verticalStyles = useVerticalStyles();
+    const spaceAroundStyles = useSpaceAroundStyles();
     const styles = direction === "horizontal" ? horizontalStyles : verticalStyles;
     const styleName = `${spacing}Space`;
-    const containerStyle = spaceStyles[styleName];
+    const containerStyle = spaceAroundStyles[styleName];
     return (React.createElement(View, { style: [styles.wrapper, containerStyle] }, renderChildren()));
     function renderChildren() {
         const childArray = React.Children.toArray(children);