@jobber/components-native 0.77.1 → 0.79.0

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/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

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

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;

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.styles.d.ts

@@ -6,4 +6,4 @@ export declare const styles: {
     };
 };
 export declare const columnStyles: Record<ColumnKeys, ViewStyle>;
-export declare const gapStyles: Record<"none" | "small" | "base" | "smallest" | "smaller" | "large", ViewStyle>;
+export declare const gapStyles: Record<"small" | "base" | "none" | "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,10 @@
-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) => Record<string, ViewStyle | TextStyle>;
+/**
+ * @deprecated Use useCommonInputStyles instead
+ */
+export declare const commonInputStyles: Record<string, ViewStyle | TextStyle>;
+export declare const getCommonInputStyles: (tokens: AtlantisThemeContextValue["tokens"]) => 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 { getCommonInputStyles, 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,4 +1,4 @@
-export declare const styles: {
+export declare const useStyles: () => {
     overlay: {
         backgroundColor: string;
         opacity: number;

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,41 +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;
-    };
-    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;
-        minHeight: number;
-        minWidth: "100%";
-        paddingRight: number;
-    };
+export declare const useStyles: () => {
+    container: import("react-native").ViewStyle;
+    input: import("react-native").ViewStyle;
     value: {
         flexGrow: number;
         flexShrink: 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,20 +1,16 @@
 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.
+ * Reusable typography styles to ensure consistency for any client facing texts.
  */
-export declare const typographyTokens: {
+export declare const getTypographyStyles: (tokens: AtlantisThemeContextValue["tokens"] | typeof staticTokens) => {
     [index: string]: TextStyle;
 };
 /**
- * `StyleSheet` for Typography.tsx.
- *
- * If you find yourself needing to use what's inside this object on files other
- * than `<Typography />`, please import from `@jobber/components-native` instead.
- *
- * ```
- * import { typographyStyles } from "@jobber/components-native"
- * ```
+ * @deprecated Use useTypographyStyles instead
  */
-export declare const typographyStyles: {
+export declare const typographyStyles: Record<string, TextStyle>;
+export declare const useTypographyStyles: () => {
     [index: string]: TextStyle;
 };

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

@@ -1,4 +1,5 @@
 export { Typography } from "./Typography";
 export type { FontFamily, FontStyle, FontWeight, BaseWeight, DisplayWeight, BaseStyle, DisplayStyle, TextColor, TextTransform, TextSize, TextAlign, LineHeight, LetterSpacing, TextAccessibilityRole, TextVariation, TypographyProps, TruncateLength, } from "./Typography";
+export { getTypographyStyles, useTypographyStyles } from "./Typography.style";
 export { typographyStyles } from "./Typography.style";
 export { TypographyGestureDetector } from "./TypographyGestureDetector";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.77.1",
+  "version": "0.79.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": "0fbaebc80bf2e27b4be4fc36c93cd90e59300477"
 }