@jobber/components-native 0.116.2 → 0.116.3

package/dist/tsconfig.json

@@ -4,6 +4,10 @@
         "outDir": "./dist",
         "module": "ESNext",
         "moduleResolution": "bundler",
+        "customConditions": [
+            "react-native",
+            "react-native-strict-api",
+        ],
         "skipLibCheck": true,
         "declaration": true,
         "declarationDir": "./dist/types",

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

@@ -1,6 +1,6 @@
 export declare const useStyles: () => {
     container: {
-        width: "100%";
+        width: string;
         flexDirection: "row";
         paddingVertical: number;
     };

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

@@ -1,6 +1,6 @@
 export declare const useStyles: () => {
     container: {
-        width: "100%";
+        width: string;
         borderColor: string;
         borderStyle: "solid";
         borderBottomWidth: number;
@@ -45,7 +45,7 @@ export declare const useStyles: () => {
         marginTop: number;
     };
     fullWidth: {
-        width: "100%";
+        width: string;
     };
     bannerChildrenContent: {
         marginBottom: number;

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

@@ -38,14 +38,14 @@ export declare const useStyles: () => {
     };
     content: {
         paddingLeft: number;
-        height: "100%";
+        height: string;
     };
     contentWithLabel: {
         paddingLeft: number;
     };
     iconStyle: {
         position: "absolute";
-        top: "50%";
+        top: string;
         left: number;
         transform: {
             translateY: number;

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

@@ -1,4 +1,9 @@
-import { StyleSheet } from "react-native";
-export declare const styles: {
-    image: StyleSheet.AbsoluteFillStyle;
-};
+export declare const styles: Readonly<{
+    image: Readonly<{
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    }>;
+}>;

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

@@ -1,6 +1,6 @@
 export declare const useStyles: () => {
     buttonGroup: {
-        width: "100%";
+        width: string;
         flexDirection: "row";
         justifyContent: "flex-end";
         gap: number;

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

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

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

@@ -1,9 +1,9 @@
 export declare const useStyles: () => {
     container: {
-        width: "100%";
+        width: string;
     };
     checkBoxContainer: {
-        width: "100%";
+        width: string;
         justifyContent: "space-between";
         flexDirection: "row";
         alignItems: "center";

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

@@ -1,6 +1,6 @@
 export declare const useStyles: () => {
     container: {
-        width: "100%";
+        width: string;
         justifyContent: "center";
         alignItems: "center";
         paddingHorizontal: number;

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

@@ -1,11 +1,6 @@
+import type { NamedExoticComponent, PropsWithoutRef, RefAttributes } from "react";
 import type { KeyboardAwareScrollViewProps } from "react-native-keyboard-controller";
 import { type BottomSheetScrollViewMethods } from "@gorhom/bottom-sheet";
-declare const BottomSheetKeyboardAwareScrollView: import("react").NamedExoticComponent<{
-    bottomOffset?: number;
-    disableScrollOnKeyboardHide?: boolean;
-    enabled?: boolean;
-    extraKeyboardSpace?: number;
-    ScrollViewComponent?: React.ComponentType<import("react-native").ScrollViewProps>;
-} & import("react-native").ScrollViewProps & import("react").RefAttributes<BottomSheetScrollViewMethods>>;
+declare const BottomSheetKeyboardAwareScrollView: NamedExoticComponent<PropsWithoutRef<KeyboardAwareScrollViewProps> & RefAttributes<BottomSheetScrollViewMethods>>;
 export { BottomSheetKeyboardAwareScrollView };
 export type { KeyboardAwareScrollViewProps };

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

@@ -27,7 +27,7 @@ export declare const useStyles: () => {
         position: "absolute";
         top: number;
         height: number;
-        width: "100%";
+        width: string;
         shadowColor: string;
         shadowOffset: {
             width: number;

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

@@ -1,6 +1,6 @@
 export declare const useStyles: () => {
     container: {
-        width: "100%";
+        width: string;
     };
     headerContainer: {
         flexDirection: "row";

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

@@ -2,7 +2,7 @@ export declare const useHorizontalStyles: () => {
     base: {
         height: number;
         margin: number;
-        width: "auto";
+        width: string;
         borderBottomColor: string;
         borderBottomWidth: number;
     };

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

@@ -1,7 +1,7 @@
 export declare const useVerticalStyles: () => {
     base: {
         margin: number;
-        height: "100%";
+        height: string;
         width: number;
         borderRightWidth: number;
         borderRightColor: string;

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

@@ -1,7 +1,7 @@
 export declare const useStyles: () => {
     wrapper: {
         position: "relative";
-        width: "100%";
+        width: string;
     };
     wrapForCard: {
         paddingHorizontal: number;
@@ -12,7 +12,7 @@ export declare const useStyles: () => {
     };
     messageWrapperIcon: {
         flex: number;
-        flexBasis: "auto";
+        flexBasis: string;
         paddingTop: number;
         paddingRight: number;
     };
@@ -23,7 +23,7 @@ export declare const useStyles: () => {
         position: "absolute";
         top: number;
         left: number;
-        width: "100%";
-        height: "100%";
+        width: string;
+        height: string;
     };
 };

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

@@ -1,5 +1,6 @@
 import type { RefObject } from "react";
-import type { NativeMethods, View } from "react-native";
+import type { NativeMethods } from "react-native";
+import type { ViewRef } from "../../utils/types";
 interface Methods {
     /**
      * Requires the method that returns
@@ -43,7 +44,7 @@ type ElementID = Element["id"];
 export interface ErrorMessageContextRegisterParams {
     readonly id: ElementID;
     readonly hasErrorMessage: Methods["hasErrorMessage"];
-    readonly ref: RefObject<View | null>;
+    readonly ref: RefObject<ViewRef | null>;
 }
 export interface ErrorMessageContextProps {
     /**

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

@@ -1,9 +1,9 @@
 import type { ViewStyle } from "react-native";
-import type { ColumnKeys } from "./types";
-export declare const styles: {
+import type { ColumnKeys, Spacing } from "./types";
+export declare const styles: Readonly<{
     row: {
         flexDirection: "row";
     };
-};
+}>;
 export declare const columnStyles: Record<ColumnKeys, ViewStyle>;
-export declare const gapStyles: Record<"small" | "base" | "none" | "smallest" | "smaller" | "large", ViewStyle>;
+export declare const gapStyles: Record<Spacing, ViewStyle>;

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

@@ -2,7 +2,7 @@ export declare const useStyles: () => {
     container: {
         flex: number;
         flexGrow: number;
-        width: "100%";
+        width: string;
     };
     safeArea: {
         backgroundColor: string;

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

@@ -10,6 +10,6 @@ export declare const useStyles: () => {
         elevation: number;
         padding: number;
         backgroundColor: string;
-        width: "100%";
+        width: string;
     };
 };

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

@@ -2,7 +2,7 @@ export declare const useStyles: () => {
     container: {
         flex: number;
         flexGrow: number;
-        width: "100%";
+        width: string;
     };
     safeArea: {
         backgroundColor: string;

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

@@ -1,8 +1,8 @@
 export declare const useStyles: () => {
     mask: {
         zIndex: number;
-        width: "100%";
-        height: "100%";
+        width: string;
+        height: string;
         position: "absolute";
         top: number;
         left: number;

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

@@ -11,7 +11,7 @@ export declare const useStyles: () => {
         zIndex: number;
     };
     scrollWrapper: {
-        height: "100%";
+        height: string;
     };
     scrollWrapperContent: {
         flexGrow: number;

package/dist/types/src/Form/hooks/useFormViewRefs.d.ts

@@ -1,9 +1,9 @@
 import type { RefObject } from "react";
-import type { View } from "react-native";
 import type { KeyboardAwareScrollViewRef } from "react-native-keyboard-controller";
+import type { ViewRef } from "../../utils/types";
 interface UseFormViewRefsReturn {
     readonly scrollViewRef: RefObject<KeyboardAwareScrollViewRef | null>;
-    readonly bottomViewRef: RefObject<View | null>;
+    readonly bottomViewRef: RefObject<ViewRef | null>;
     readonly scrollToTop: () => void;
 }
 export declare function useFormViewRefs(): UseFormViewRefsReturn;

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

@@ -11,12 +11,12 @@ export declare const useStyles: () => {
         marginBottom: number;
     };
     fileBackground: {
-        width: "100%";
+        width: string;
         display: "flex";
         alignItems: "center";
     };
     fileBackgroundGrid: {
-        height: "100%";
+        height: string;
     };
     fileBackgroundFlat: {
         justifyContent: "center";
@@ -32,7 +32,7 @@ export declare const useStyles: () => {
         alignItems: "center";
         borderTopColor: string;
         borderTopWidth: number;
-        width: "100%";
+        width: string;
         marginTop: number;
         overflow: "hidden";
     };
@@ -40,7 +40,7 @@ export declare const useStyles: () => {
         alignItems: "center";
         borderTopColor: string;
         borderTopWidth: number;
-        width: "100%";
+        width: string;
         overflow: "hidden";
     };
     fileNameGrid: {
@@ -58,7 +58,7 @@ export declare const useStyles: () => {
         right: number;
         bottom: number;
         left: number;
-        height: "100%";
+        height: string;
         paddingHorizontal: number;
     };
 };

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

@@ -1,6 +1,6 @@
 export declare const useStyles: () => {
     imageBackground: {
-        width: "100%";
+        width: string;
         justifyContent: "center";
         alignItems: "center";
     };
@@ -8,15 +8,15 @@ export declare const useStyles: () => {
         aspectRatio: number;
     };
     imageBackgroundGrid: {
-        height: "100%";
+        height: string;
     };
     overlay: {
-        height: "100%";
+        height: string;
         backgroundColor: string;
         paddingHorizontal: number;
     };
     overlayError: {
-        height: "100%";
+        height: string;
         backgroundColor: string;
         paddingHorizontal: number;
         borderColor: string;

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

@@ -1,13 +1,13 @@
 export declare const useStyles: () => {
     container: {
-        width: "100%";
+        width: string;
         height: number;
         borderRadius: number;
         overflow: "hidden";
         backgroundColor: string;
     };
     progress: {
-        height: "100%";
+        height: string;
         backgroundColor: string;
     };
 };

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

@@ -1,13 +1,13 @@
 export declare const useShapeStyles: () => {
     rectangle: {
-        width: "100%";
+        width: string;
     };
     square: {
-        width: "auto";
+        width: string;
         aspectRatio: number;
     };
     circle: {
-        width: "auto";
+        width: string;
         aspectRatio: number;
         borderRadius: number;
     };

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

@@ -3,7 +3,7 @@ export declare const useStyles: () => {
     container: {
         overflow: "hidden";
         position: "relative";
-        width: "100%";
+        width: string;
         height: number;
         borderRadius: number;
     };
@@ -11,8 +11,8 @@ export declare const useStyles: () => {
         position: "absolute";
         top: number;
         left: number;
-        width: "100%";
-        height: "100%";
+        width: string;
+        height: string;
         backgroundColor: string;
         opacity: number;
     };
@@ -21,6 +21,6 @@ export declare const useStyles: () => {
         top: number;
         left: number;
         width: number;
-        height: "100%";
+        height: string;
     };
 };

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

@@ -5,6 +5,6 @@ export declare const createCommonInputTokens: (tokens: AtlantisThemeContextValue
 /**
  * @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>;
+export declare const commonInputStyles: ReturnType<typeof createCommonInputTokens>;
+export declare const getCommonInputStyles: (tokens: AtlantisThemeContextValue["tokens"]) => ReturnType<typeof createCommonInputTokens>;
+export declare const useCommonInputStyles: () => ReturnType<typeof getCommonInputStyles>;

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

@@ -1,106 +1,4 @@
-export declare const useStyles: () => {
-    container: import("react-native").ViewStyle;
-    field: {
-        flexDirection: "row";
-        alignItems: "center";
-    };
-    inputContainer: {
-        flexDirection: "row";
-        flex: number;
-        justifyContent: "flex-start";
-    };
-    inputFocused: {
-        borderColor: string;
-    };
-    inputInvalid: {
-        borderColor: string;
-    };
-    label: {
-        position: "absolute";
-        display: "flex";
-        justifyContent: "center";
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-        zIndex: number;
-    };
-    miniLabel: {
-        top: number;
-        paddingTop: number;
-        backgroundColor: string;
-        marginRight: number;
-        maxHeight: number;
-    };
-    miniLabelShowClearAction: {
-        backgroundColor: string;
-    };
-    disabled: {
-        backgroundColor: string;
-    };
-    fieldAffix: {
-        flexDirection: "row";
-    };
-    fieldAffixMiniLabel: {
-        paddingTop: number;
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    };
-    prefixIcon: {
-        justifyContent: "center";
-        paddingRight: number;
-    };
-    prefixLabel: {
-        justifyContent: "center";
-        paddingTop: number;
-        paddingRight: number;
-    };
-    suffixIcon: {
-        justifyContent: "center";
-        paddingRight: number;
-    };
-    suffixLabel: {
-        justifyContent: "center";
-        paddingTop: number;
-        paddingRight: number;
-    };
-    suffixIconMargin: {
-        marginLeft: number;
-    };
-    suffixLabelMargin: {
-        marginLeft: number;
-    };
-    inputEndContainer: {
-        flexDirection: "row";
-        zIndex: number;
-    };
-    toolbar: {
-        flexBasis: "100%";
-        flexDirection: "row";
-        gap: number;
-        paddingBottom: number;
-    };
-    loadingSpinner: {
-        justifyContent: "center";
-        paddingRight: number;
-    };
-    loadingGlimmers: {
-        position: "absolute";
-        top: number;
-        bottom: number;
-        left: number;
-        right: number;
-        gap: number;
-        paddingTop: number;
-        paddingRight: number;
-        backgroundColor: string;
-        overflow: "hidden";
-    };
-    loadingGlimmersHasValue: {
-        top: number;
-        paddingTop: number;
-        bottom: number;
-    };
-};
+import type { ViewStyle } from "react-native";
+type Styles = Record<"container" | "field" | "inputContainer" | "inputFocused" | "inputInvalid" | "label" | "miniLabel" | "miniLabelShowClearAction" | "disabled" | "fieldAffix" | "fieldAffixMiniLabel" | "prefixIcon" | "prefixLabel" | "suffixIcon" | "suffixLabel" | "suffixIconMargin" | "suffixLabelMargin" | "inputEndContainer" | "toolbar" | "loadingSpinner" | "loadingGlimmers" | "loadingGlimmersHasValue", ViewStyle>;
+export declare const useStyles: () => Styles;
+export {};

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

@@ -1,7 +1,7 @@
 export declare const useStyles: () => {
     container: {
         width: number;
-        height: "100%";
+        height: string;
         flexDirection: "row";
         justifyContent: "center";
         alignItems: "center";

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

@@ -1,4 +1,4 @@
-import type { Ref } from "react";
+import type { ComponentRef, Ref } from "react";
 import React from "react";
 import type { IconNames } from "@jobber/design";
 import type { FieldError } from "react-hook-form";
@@ -85,7 +85,7 @@ export interface InputPressableProps {
      */
     readonly onClear?: () => void;
 }
-export type InputPressableRef = NativeText;
-export declare const InputPressable: React.ForwardRefExoticComponent<InputPressableProps & React.RefAttributes<NativeText>>;
+export type InputPressableRef = ComponentRef<typeof NativeText>;
+export declare const InputPressable: React.ForwardRefExoticComponent<InputPressableProps & React.RefAttributes<InputPressableRef>>;
 export declare function InputPressableInternal({ value, placeholder, disabled, invalid, error, showMiniLabel, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable, onClear, focused, }: InputPressableProps, ref: Ref<InputPressableRef>): React.JSX.Element;
 export {};

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

@@ -1,21 +1,11 @@
-export declare const useStyles: () => {
-    pressable: {
-        flex: number;
-    };
-    inputPressableStyles: {
-        paddingTop: number;
-        lineHeight: number | undefined;
-    };
-    inputEmpty: {
-        paddingTop: number;
-    };
-    inputDisabled: {
-        color: import("react-native").ColorValue | undefined;
-    };
-    inputInvalid: {
-        borderColor: string;
-    };
-    withoutMiniLabel: {
-        paddingTop: number;
-    };
-};
+import type { TextStyle, ViewStyle } from "react-native";
+interface Styles {
+    pressable: ViewStyle;
+    inputPressableStyles: TextStyle;
+    inputEmpty: TextStyle;
+    inputDisabled: TextStyle;
+    inputInvalid: ViewStyle;
+    withoutMiniLabel: TextStyle;
+}
+export declare const useStyles: () => Styles;
+export {};

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

@@ -1,5 +1,5 @@
-export declare const styles: {
+export declare const styles: Readonly<{
     container: {
-        width: "100%";
+        width: string;
     };
-};
+}>;

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

@@ -1,4 +1,4 @@
-import type { SyntheticEvent } from "react";
+import type { ComponentRef, SyntheticEvent } from "react";
 import React from "react";
 import type { FocusEvent, StyleProp, TextInputProps, TextStyle } from "react-native";
 import { TextInput } from "react-native";
@@ -174,6 +174,6 @@ export interface InputTextProps extends Pick<InputFieldWrapperProps, "toolbar" |
 interface InputTextStyleOverride extends InputFieldStyleOverride {
     inputText?: StyleProp<TextStyle>;
 }
-export type InputTextRef = Pick<TextInput, "clear" | "focus" | "blur">;
+export type InputTextRef = Pick<ComponentRef<typeof TextInput>, "clear" | "focus" | "blur">;
 export declare const InputText: React.ForwardRefExoticComponent<InputTextProps & React.RefAttributes<InputTextRef>>;
 export {};

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

@@ -1,17 +1,8 @@
-export declare const useStyles: () => {
-    container: {
-        flexDirection: "row";
-        justifyContent: "flex-end";
-        alignItems: "center";
-        paddingHorizontal: number;
-        borderTopWidth: number;
-        borderTopColor: string;
-        height: number;
-    };
-    lightTheme: {
-        backgroundColor: string;
-    };
-    darkTheme: {
-        backgroundColor: import("react-native").OpaqueColorValue;
-    };
-};
+import { type ViewStyle } from "react-native";
+interface Styles {
+    container: ViewStyle;
+    lightTheme: ViewStyle;
+    darkTheme: ViewStyle;
+}
+export declare const useStyles: () => Styles;
+export {};