@jobber/components-native 0.76.0 → 0.76.1-JOB-116234-d279b0f.20

package/dist/types/src/ActionItem/ActionItem.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     actionItemHorizontalOffset: {
         paddingHorizontal: number;
     };

package/dist/types/src/ActionItem/components/ActionItemContainer.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         width: "100%";
         flexDirection: "row";

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

@@ -0,0 +1,3 @@
+import { AtlantisThemeContextProviderProps, AtlantisThemeContextValue } from "./types";
+export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }: AtlantisThemeContextProviderProps): JSX.Element;
+export declare function useAtlantisTheme(): AtlantisThemeContextValue;

package/dist/types/src/AtlantisThemeContext/buildThemedStyles.d.ts

@@ -0,0 +1,32 @@
+import { StyleSheet } from "react-native";
+import { AtlantisThemeContextValue } from "./types";
+/**
+ * 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 declare function buildThemedStyles<T extends Parameters<typeof StyleSheet.create>[0]>(styleFactory: (tokens: AtlantisThemeContextValue["tokens"]) => T): () => T;

package/dist/types/src/AtlantisThemeContext/index.d.ts

@@ -0,0 +1,3 @@
+export { AtlantisThemeContextProvider, useAtlantisTheme, } from "./AtlantisThemeContext";
+export { Theme, AtlantisThemeContextProviderProps, AtlantisThemeContextValue, } from "./types";
+export { buildThemedStyles } from "./buildThemedStyles";

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

@@ -0,0 +1,24 @@
+import { iosTokens } from "@jobber/design";
+import { PropsWithChildren } from "react";
+export interface AtlantisThemeContextValue {
+    /**
+     * The theme of the application.
+     */
+    readonly theme: Theme;
+    /**
+     * The design tokens for the current theme.
+     */
+    readonly tokens: typeof iosTokens;
+}
+export interface AtlantisThemeContextProviderProps extends PropsWithChildren {
+    /**
+     * The children to render.
+     */
+    readonly children: React.ReactNode;
+    /**
+     * Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain the same theme regardless of the rest of the application's theme.
+     * This is dangerous because the children in this provider will not be able to change the theme.
+     */
+    readonly dangerouslyOverrideTheme?: Theme;
+}
+export type Theme = "light" | "dark";

package/dist/types/src/Banner/Banner.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         width: "100%";
         borderColor: string;

package/dist/types/src/Banner/components/BannerIcon/BannerIcon.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     bannerIcon: {
         borderRadius: number;
         padding: number;

package/dist/types/src/BottomSheet/BottomSheet.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     overlayModalize: {
         backgroundColor: string;
     };

package/dist/types/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     bottomSheetOption: {
         display: "flex";
         flexDirection: "row";

package/dist/types/src/Button/Button.style.d.ts

@@ -1,6 +1,6 @@
 export declare const baseButtonHeight: number;
 export declare const smallButtonHeight: number;
-export declare const styles: {
+export declare const useStyles: () => {
     fullHeight: {
         flexGrow: number;
         flexShrink: number;
@@ -24,7 +24,6 @@ export declare const styles: {
     };
     base: {
         minHeight: number;
-        paddingHorizontal: number;
     };
     small: {
         minHeight: number;

package/dist/types/src/ButtonGroup/ButtonGroup.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     buttonGroup: {
         width: "100%";
         flexDirection: "row";

package/dist/types/src/Card/Card.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         width: "100%";
         backgroundColor: string;

package/dist/types/src/Card/components/InternalCardHeader.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     header: {
         flexDirection: "row";
         alignItems: "flex-start";

package/dist/types/src/Checkbox/Checkbox.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         width: "100%";
     };

package/dist/types/src/Checkbox/CheckboxGroup.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         width: "100%";
         justifyContent: "center";

package/dist/types/src/Chip/Chip.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         alignItems: "center";
         borderRadius: number;

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

@@ -1,4 +1,4 @@
-export declare const horizontalStyles: {
+export declare const useHorizontalStyles: () => {
     wrapper: {
         flexDirection: "row";
     };

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

@@ -1,4 +1,4 @@
-export declare const spaceStyles: {
+export declare const useSpaceAroundStyles: () => {
     noneSpace: {
         padding: number;
     };

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

@@ -1,4 +1,4 @@
-export declare const verticalStyles: {
+export declare const useVerticalStyles: () => {
     wrapper: {};
     childWrapper: {};
     noneChildSpace: {

package/dist/types/src/ContentOverlay/ContentOverlay.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     handle: {
         width: number;
         height: number;

package/dist/types/src/Disclosure/Disclosure.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         width: "100%";
     };

package/dist/types/src/Divider/DividerHorizontal.style.d.ts

@@ -1,4 +1,4 @@
-export declare const horizontalStyles: {
+export declare const useHorizontalStyles: () => {
     base: {
         height: number;
         margin: number;

package/dist/types/src/Divider/DividerVertical.style.d.ts

@@ -1,4 +1,4 @@
-export declare const verticalStyles: {
+export declare const useVerticalStyles: () => {
     base: {
         margin: number;
         height: "100%";

package/dist/types/src/EmptyState/EmptyState.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     icon: {
         marginVertical: number;
         alignItems: "center";

package/dist/types/src/ErrorMessageWrapper/ErrorMessageWrapper.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     wrapper: {
         position: "relative";
         width: "100%";

package/dist/types/src/Flex/Flex.gap.styles.d.ts

@@ -0,0 +1,2 @@
+import { ViewStyle } from "react-native";
+export declare const useGapStyles: () => Record<"small" | "base" | "none" | "smallest" | "smaller" | "large", ViewStyle>;

package/dist/types/src/Flex/Flex.styles.d.ts

@@ -6,4 +6,3 @@ export declare const styles: {
     };
 };
 export declare const columnStyles: Record<ColumnKeys, ViewStyle>;
-export declare const gapStyles: Record<"none" | "small" | "base" | "smallest" | "smaller" | "large", ViewStyle>;

package/dist/types/src/Form/Form.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         flex: number;
         flexGrow: number;

package/dist/types/src/Form/components/FormActionBar/FormActionBar.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     saveButton: {
         shadowColor: string;
         shadowOffset: {

package/dist/types/src/Form/components/FormBody/FormBody.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         flex: number;
         flexGrow: number;

package/dist/types/src/Form/components/FormMask/FormMask.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     mask: {
         zIndex: number;
         width: "100%";

package/dist/types/src/Form/components/FormMessage/components/InternalFormMessage/InternalFormMessage.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     wrapper: {
         backgroundColor: string;
         flex: number;

package/dist/types/src/FormatFile/FormatFile.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     thumbnailContainer: {
         backgroundColor: string;
         borderWidth: number;

package/dist/types/src/FormatFile/components/ErrorIcon/ErrorIcon.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     circle: {
         width: number;
         height: number;

package/dist/types/src/FormatFile/components/FileView/FileView.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     overlay: {
         backgroundColor: string;
     };

package/dist/types/src/FormatFile/components/MediaView/MediaView.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     imageBackground: {
         width: "100%";
         justifyContent: "center";

package/dist/types/src/FormatFile/components/ProgressBar/ProgressBar.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         width: "100%";
         height: number;

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

@@ -1,7 +1,7 @@
-import { sizeStyles } from "./Glimmer.size.style";
-import { shapeStyles } from "./Glimmer.shape.style";
-export type GlimmerShapes = keyof typeof shapeStyles;
-export type GlimmerSizes = keyof typeof sizeStyles;
+import { useSizeStyles } from "./Glimmer.size.style";
+import { useShapeStyles } from "./Glimmer.shape.style";
+export type GlimmerShapes = keyof ReturnType<typeof useShapeStyles>;
+export type GlimmerSizes = keyof ReturnType<typeof useSizeStyles>;
 export type GlimmerTimings = "base" | "fast";
 interface GlimmerProps {
     /**

package/dist/types/src/Glimmer/Glimmer.shape.style.d.ts

@@ -1,4 +1,4 @@
-export declare const shapeStyles: {
+export declare const useShapeStyles: () => {
     rectangle: {
         width: "100%";
     };

package/dist/types/src/Glimmer/Glimmer.size.style.d.ts

@@ -1,4 +1,4 @@
-export declare const sizeStyles: {
+export declare const useSizeStyles: () => {
     small: {
         height: number;
     };

package/dist/types/src/Glimmer/Glimmer.style.d.ts

@@ -1,5 +1,5 @@
 export declare const shineWidth: number;
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         backgroundColor: string;
         overflow: "hidden";

package/dist/types/src/IconButton/IconButton.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         width: number;
         height: number;

package/dist/types/src/InputFieldWrapper/CommonInputStyles.style.d.ts

@@ -1,32 +1,9 @@
-export declare const commonInputStyles: {
-    input: {
-        width: "100%";
-        flexShrink: number;
-        flexGrow: number;
-        color: string;
-        fontFamily: string | undefined;
-        fontSize: number | undefined;
-        letterSpacing: number | undefined;
-        minHeight: number;
-        padding: number;
-    };
-    inputEmpty: {
-        paddingTop: number;
-    };
-    inputDisabled: {
-        color: import("react-native").ColorValue | undefined;
-    };
-    container: {
-        paddingLeft: number;
-        marginVertical: number;
-        backgroundColor: string;
-        minHeight: number;
-        flexDirection: "row";
-        justifyContent: "space-between";
-        width: "100%";
-        borderColor: string;
-        borderStyle: "solid";
-        borderWidth: number;
-        borderRadius: number;
-    };
-};
+import { TextStyle, ViewStyle } from "react-native";
+import { AtlantisThemeContextValue } from "../AtlantisThemeContext";
+import { tokens as staticTokens } from "../utils/design";
+export declare const createCommonInputTokens: (tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens, typographyStyles: Record<string, TextStyle>) => Record<string, ViewStyle | TextStyle>;
+/**
+ * @deprecated Use useCommonInputStyles instead
+ */
+export declare const commonInputStyles: Record<string, ViewStyle | TextStyle>;
+export declare const useCommonInputStyles: () => Record<string, ViewStyle | TextStyle>;

package/dist/types/src/InputFieldWrapper/InputFieldWrapper.style.d.ts

@@ -1,19 +1,5 @@
-export declare const styles: {
-    container: {
-        paddingLeft: number;
-        marginVertical: number;
-        backgroundColor: string;
-        minHeight: number;
-        flexDirection: "row";
-        justifyContent: "space-between";
-        width: "100%";
-        borderColor: string;
-        borderStyle: "solid";
-        borderWidth: number;
-        borderRadius: number;
-    } | {
-        flexDirection: "column";
-    };
+export declare const useStyles: () => {
+    container: import("react-native").ViewStyle;
     field: {
         flexDirection: "row";
         alignItems: "center";

package/dist/types/src/InputFieldWrapper/components/ClearAction/ClearAction.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         width: number;
         height: "100%";

package/dist/types/src/InputFieldWrapper/index.d.ts

@@ -1,3 +1,3 @@
-export { commonInputStyles } from "./CommonInputStyles.style";
+export { useCommonInputStyles } from "./CommonInputStyles.style";
 export { InputFieldWrapper } from "./InputFieldWrapper";
 export type { InputFieldWrapperProps } from "./InputFieldWrapper";

package/dist/types/src/InputPressable/InputPressable.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     pressable: {
         flex: number;
     };

package/dist/types/src/InputText/InputText.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     inputPaddingTop: {
         paddingTop: number;
     };

package/dist/types/src/InputText/context/InputAccessoriesProvider.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         flexDirection: "row";
         justifyContent: "flex-end";

package/dist/types/src/Menu/Menu.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     menu: {
         shadowColor: string;
         shadowOffset: {

package/dist/types/src/Menu/components/MenuOption/MenuOption.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     menuOption: {
         display: "flex";
         paddingHorizontal: number;

package/dist/types/src/Menu/components/Overlay/Overlay.style.d.ts

@@ -1,12 +1,12 @@
-export declare const styles: {
+export declare const useStyles: () => {
     overlay: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
         backgroundColor: string;
         opacity: number;
         height: number;
-        position: "absolute";
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
     };
 };

package/dist/types/src/Menu/utils.d.ts

@@ -1,10 +1,11 @@
 import { LayoutRectangle } from "react-native";
+import { useStyles } from "./Menu.style";
 interface ScreenInfo {
     windowHeight: number;
     headerHeight: number;
     windowWidth: number;
 }
-export declare function findViewpoint(screenInfo: ScreenInfo, activatorLayout: LayoutRectangle): {
+export declare function findViewpoint(screenInfo: ScreenInfo, activatorLayout: LayoutRectangle, styles: ReturnType<typeof useStyles>): {
     [key: string]: number | undefined;
 };
 export {};

package/dist/types/src/ProgressBar/ProgressBar.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     progressBarContainer: {
         marginTop: number;
         marginBottom: number;

package/dist/types/src/Select/Select.style.d.ts

@@ -1,34 +1,6 @@
-export declare const styles: {
-    container: {
-        paddingLeft: number;
-        marginVertical: number;
-        backgroundColor: string;
-        minHeight: number;
-        flexDirection: "row";
-        justifyContent: "space-between";
-        width: "100%";
-        borderColor: string;
-        borderStyle: "solid";
-        borderWidth: number;
-        borderRadius: number;
-    } | {
-        flexDirection: "column";
-        justifyContent: "center";
-        minHeight: number;
-        marginVertical: number;
-        borderWidth: number;
-    };
+export declare const useStyles: () => {
+    container: import("react-native").ViewStyle;
     input: {
-        width: "100%";
-        flexShrink: number;
-        flexGrow: number;
-        color: string;
-        fontFamily: string | undefined;
-        fontSize: number | undefined;
-        letterSpacing: number | undefined;
-        minHeight: number;
-        padding: number;
-    } | {
         flexDirection: "row";
         flexGrow: number;
         paddingTop: number;

package/dist/types/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     overlay: {
         flex: number;
     };

package/dist/types/src/Select/components/SelectPressable/SelectPressable.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     pressed: {
         opacity: number;
     };

package/dist/types/src/StatusLabel/StatusLabel.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     statusLabelRow: {
         flexDirection: "row";
         justifyContent: "flex-end";

package/dist/types/src/Switch/Switch.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         marginTop: number;
         marginBottom: number;

package/dist/types/src/TextList/TextList.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     details: {
         width: "100%";
         flexDirection: "column";

package/dist/types/src/ThumbnailList/ThumbnailList.style.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     list: {
         display: "flex";
         flexDirection: "row";

package/dist/types/src/Toast/Toast.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     container: {
         flexDirection: "row";
         paddingHorizontal: number;

package/dist/types/src/Typography/Typography.style.d.ts

@@ -1,8 +1,10 @@
 import { TextStyle } from "react-native";
+import { tokens as staticTokens } from "../utils/design";
+import { AtlantisThemeContextValue } from "../AtlantisThemeContext";
 /**
  * Reusable typography tokens to ensure consistency for any client facing texts.
  */
-export declare const typographyTokens: {
+export declare const createTypographyTokens: (tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens) => {
     [index: string]: TextStyle;
 };
 /**
@@ -15,6 +17,7 @@ export declare const typographyTokens: {
  * import { typographyStyles } from "@jobber/components-native"
  * ```
  */
-export declare const typographyStyles: {
+export declare const typographyStyles: Record<string, TextStyle>;
+export declare const useTypographyStyles: () => {
     [index: string]: TextStyle;
 };