@jobber/components-native 0.75.3-POC-fixing-d44fac2.136 → 0.75.3-POC-fixing-ffcd368.137

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,4 @@
+import React from "react";
+import { AtlantisThemeContextProviderProps, AtlantisThemeContextValue } from "./types";
+export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }: AtlantisThemeContextProviderProps): React.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,27 @@
+import { iosTokens } from "@jobber/design";
+export interface AtlantisThemeContextValue {
+    /**
+     * The active theme.
+     */
+    readonly theme: Theme;
+    /**
+     * The design tokens for the current theme.
+     */
+    readonly tokens: typeof iosTokens;
+    /**
+     * Change the current theme globally.
+     */
+    readonly setTheme: (theme: Theme) => void;
+}
+export interface AtlantisThemeContextProviderProps {
+    /**
+     * 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.d.ts

@@ -1,3 +1,4 @@
+import { StyleProp, ViewStyle } from "react-native";
 import { IconNames } from "@jobber/design";
 import { XOR } from "ts-xor";
 import { ButtonSize, ButtonType, ButtonVariation } from "./types";
@@ -58,6 +59,18 @@ interface CommonButtonProps {
      * Used to locate this view in end-to-end tests.
      */
     readonly testID?: string;
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: ButtonUnsafeStyle;
+}
+export interface ButtonUnsafeStyle {
+    container?: StyleProp<ViewStyle>;
+    contentContainer?: StyleProp<ViewStyle>;
+    iconContainer?: StyleProp<ViewStyle>;
+    actionLabelContainer?: StyleProp<ViewStyle>;
 }
 interface LabelButton extends CommonButtonProps {
     /**
@@ -70,5 +83,5 @@ interface IconButton extends CommonButtonProps {
     readonly accessibilityLabel: string;
 }
 export type ButtonProps = XOR<LabelButton, IconButton>;
-export declare function Button({ label, onPress, variation, type, fullHeight, fullWidth, disabled, loading, size, accessibilityLabel, accessibilityHint, icon, testID, }: ButtonProps): JSX.Element;
+export declare function Button({ label, onPress, variation, type, fullHeight, fullWidth, disabled, loading, size, accessibilityLabel, accessibilityHint, icon, testID, UNSAFE_style, }: ButtonProps): JSX.Element;
 export {};

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/Content.d.ts

@@ -1,5 +1,10 @@
 import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 export type Spacing = "none" | "base" | "small" | "smaller" | "smallest" | "large";
+export interface ContentUnsafeStyle {
+    container?: StyleProp<ViewStyle>;
+    childWrapper?: StyleProp<ViewStyle>;
+}
 export interface ContentProps {
     /**
      * The child or children that will be given spacing.
@@ -14,5 +19,11 @@ export interface ContentProps {
      */
     readonly childSpacing?: Spacing;
     readonly direction?: "horizontal" | "vertical";
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: ContentUnsafeStyle;
 }
-export declare function Content({ children, spacing, childSpacing, direction, }: ContentProps): JSX.Element;
+export declare function Content({ children, spacing, childSpacing, direction, UNSAFE_style, }: ContentProps): JSX.Element;

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,10 +1,11 @@
-export declare const styles: {
+export declare const useStyles: () => {
     thumbnailContainer: {
         backgroundColor: string;
         borderWidth: number;
         borderColor: string;
         borderRadius: number;
         marginBottom: number;
+        overflow: "hidden";
     };
     thumbnailContainerGrid: {
         width: 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,8 @@
-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 React from "react";
+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 {
     /**
@@ -26,5 +27,5 @@ interface GlimmerProps {
 }
 export declare const GLIMMER_TEST_ID = "ATL-Glimmer";
 export declare const GLIMMER_SHINE_TEST_ID = "ATL-Glimmer-Shine";
-export declare function Glimmer({ width, shape, size, timing, }: GlimmerProps): JSX.Element;
+export declare function Glimmer({ width, shape, size, timing, }: GlimmerProps): React.JSX.Element;
 export {};

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

@@ -3,6 +3,16 @@ import { IconNames } from "@jobber/design";
 import { FieldError } from "react-hook-form";
 import { Text as NativeText } from "react-native";
 import { Clearable } from "@jobber/hooks";
+import { XOR } from "ts-xor";
+interface BasicSuffix {
+    icon?: IconNames;
+    label?: string;
+}
+interface InteractiveSuffix {
+    icon: IconNames;
+    label?: string;
+    onPress: () => void;
+}
 export interface InputPressableProps {
     /**
      * Current value of the component
@@ -51,10 +61,7 @@ export interface InputPressableProps {
     /**
      * Symbol to display after the text input
      */
-    readonly suffix?: {
-        icon?: IconNames;
-        label?: string;
-    };
+    readonly suffix?: XOR<BasicSuffix, InteractiveSuffix>;
     /**
      * Add a clear action on the input that clears the value.
      *
@@ -72,3 +79,4 @@ export interface InputPressableProps {
 export type InputPressableRef = NativeText;
 export declare const InputPressable: React.ForwardRefExoticComponent<InputPressableProps & React.RefAttributes<NativeText>>;
 export declare function InputPressableInternal({ value, placeholder, disabled, invalid, error, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable, onClear, focused, }: InputPressableProps, ref: Ref<InputPressableRef>): JSX.Element;
+export {};

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/ProgressBar/ProgressBarStepped.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 interface ProgressBarSteppedProps {
     readonly total: number;
     readonly current: number;
@@ -5,5 +6,5 @@ interface ProgressBarSteppedProps {
     readonly loading?: boolean;
     readonly inProgress?: number;
 }
-export declare function ProgressBarStepped({ total, current, color, loading, inProgress, }: ProgressBarSteppedProps): JSX.Element;
+export declare function ProgressBarStepped({ total, current, color, loading, inProgress, }: ProgressBarSteppedProps): React.JSX.Element;
 export {};