dhre-ui-kit 2.0.22 → 3.0.0

package/lib/components/accordion/Accordion.styles.d.ts

@@ -7,7 +7,6 @@ declare const styles: {
         flexDirection: "row";
         justifyContent: "space-between";
         alignItems: "center";
-        paddingHorizontal: number;
     };
     title: {
         flex: number;

package/lib/components/avatar/Avatar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AvatarProps } from './Avatar.interface';
+declare const _default: (props: AvatarProps) => React.JSX.Element;
+export default _default;

package/lib/components/avatar/Avatar.interface.d.ts

@@ -0,0 +1,97 @@
+import { ImageSourcePropType, TextStyle, ViewStyle } from 'react-native';
+import { FontStyle } from '../../utils/appEnum';
+export declare enum AvatarSize {
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large"
+}
+/**
+ * Progress-related props that must be provided together
+ */
+export interface ProgressProps {
+    /** Progress percentage (0-100) for progress ring */
+    progress: number;
+    /** Function to update progress value */
+    setProgress: React.Dispatch<React.SetStateAction<number>>;
+    /** Whether to show percentage text */
+    percentage: number;
+    /** Whether avatar is in editable mode */
+    editable: boolean;
+    /** Custom progress circle color */
+    progressColor?: string;
+    cameraIcon: React.ReactElement;
+}
+/**
+ * Base props that are always available
+ */
+interface BaseAvatarProps {
+    /** Size variant of the avatar */
+    size?: AvatarSize;
+    /** Press handler for the avatar */
+    onPress?: () => void;
+    /** Custom background color */
+    backgroundColor?: string;
+    /** Custom text color for initials */
+    textColor?: string;
+    /** Custom border color */
+    borderColor?: string;
+    /** Additional container styles */
+    containerStyle?: ViewStyle;
+    /** Custom text styles for initials */
+    textStyle?: TextStyle;
+    /** Test ID for testing */
+    testId?: string;
+    /** Accessibility label */
+    accessibilityLabel?: string;
+    /** Font variant for initials text */
+    textVariant?: FontStyle;
+    /**
+     * Fallback icon rendered when neither `source` nor `name` is provided.
+     * Render priority: image → initials → placeholderIcon → empty circle.
+     * Pass a pre-sized React element; the component will render it as-is inside
+     * the avatar circle (e.g. a user silhouette SVG or icon component).
+     */
+    placeholderIcon?: React.ReactElement;
+}
+/**
+ * Avatar with image source - source is mandatory, name is optional
+ */
+type AvatarWithSource = BaseAvatarProps & {
+    source: ImageSourcePropType;
+    name?: string;
+} & ({
+    progressProps?: never;
+} | {
+    progressProps: ProgressProps;
+});
+/**
+ * Avatar with name - name is mandatory, source is optional
+ */
+type AvatarWithName = BaseAvatarProps & {
+    source?: ImageSourcePropType;
+    name: string;
+} & ({
+    progressProps?: never;
+} | {
+    progressProps: ProgressProps;
+});
+/**
+ * Avatar with a placeholder icon — neither source nor name is required.
+ * Use when you want to display a generic icon (e.g. user silhouette) as the
+ * avatar content. Pass the icon via the `placeholderIcon` base prop.
+ */
+type AvatarWithPlaceholder = BaseAvatarProps & {
+    source?: never;
+    name?: never;
+} & ({
+    progressProps?: never;
+} | {
+    progressProps: ProgressProps;
+});
+/**
+ * Avatar props with enforced constraints:
+ * - Either `source`, `name`, or `placeholderIcon` (via AvatarWithPlaceholder) must be used
+ * - Progress-related props must be provided together via the `progressProps` object
+ */
+export type AvatarProps = AvatarWithSource | AvatarWithName | AvatarWithPlaceholder;
+export {};

package/lib/components/avatar/Avatar.styles.d.ts

@@ -0,0 +1,342 @@
+declare const AVATAR_SPEC: {
+    large: {
+        container: number;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "500";
+        camera: number;
+        cameraIconSize: number;
+        cameraTop: number;
+        cameraRight: number;
+        cameraBorderWidth: number;
+        ringThickness: number;
+        ringInset: number;
+    };
+    medium: {
+        container: number;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "500";
+        camera: number;
+        cameraIconSize: number;
+        cameraTop: number;
+        cameraRight: number;
+        cameraBorderWidth: number;
+        ringThickness: number;
+        ringInset: number;
+    };
+    small: {
+        container: number;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "500";
+        camera: number;
+        cameraIconSize: number;
+        cameraTop: number;
+        cameraRight: number;
+        cameraBorderWidth: number;
+        ringThickness: number;
+        ringInset: number;
+    };
+};
+export declare const smallStyles: (theme: any) => {
+    container: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    pressableContainer: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+        position: "relative";
+    };
+    progressContainer: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    avatarContainer: {
+        borderRadius: number;
+        backgroundColor: any;
+        justifyContent: "center";
+        alignItems: "center";
+        overflow: "hidden";
+    };
+    initialsText: {
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "500";
+        textTransform: "uppercase";
+        alignSelf: "center";
+        color: any;
+    };
+    cameraOverlay: {
+        position: "absolute";
+        top: number;
+        right: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: any;
+        justifyContent: "center";
+        alignItems: "center";
+        borderWidth: number;
+        borderColor: any;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    percentagePill: {
+        height: number;
+        minWidth: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: any;
+        backgroundColor: any;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    percentagePillText: {
+        fontSize: number;
+        fontWeight: "300";
+        lineHeight: number;
+        color: any;
+    };
+};
+export declare const mediumStyles: (theme: any) => {
+    container: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    pressableContainer: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+        position: "relative";
+    };
+    progressContainer: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    avatarContainer: {
+        borderRadius: number;
+        backgroundColor: any;
+        justifyContent: "center";
+        alignItems: "center";
+        overflow: "hidden";
+    };
+    initialsText: {
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "500";
+        textTransform: "uppercase";
+        alignSelf: "center";
+        color: any;
+    };
+    cameraOverlay: {
+        position: "absolute";
+        top: number;
+        right: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: any;
+        justifyContent: "center";
+        alignItems: "center";
+        borderWidth: number;
+        borderColor: any;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    percentagePill: {
+        height: number;
+        minWidth: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: any;
+        backgroundColor: any;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    percentagePillText: {
+        fontSize: number;
+        fontWeight: "300";
+        lineHeight: number;
+        color: any;
+    };
+};
+export declare const largeStyles: (theme: any) => {
+    container: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    pressableContainer: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+        position: "relative";
+    };
+    progressContainer: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    avatarContainer: {
+        borderRadius: number;
+        backgroundColor: any;
+        justifyContent: "center";
+        alignItems: "center";
+        overflow: "hidden";
+    };
+    initialsText: {
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "500";
+        textTransform: "uppercase";
+        alignSelf: "center";
+        color: any;
+    };
+    cameraOverlay: {
+        position: "absolute";
+        top: number;
+        right: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: any;
+        justifyContent: "center";
+        alignItems: "center";
+        borderWidth: number;
+        borderColor: any;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    percentagePill: {
+        height: number;
+        minWidth: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: any;
+        backgroundColor: any;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    percentagePillText: {
+        fontSize: number;
+        fontWeight: "300";
+        lineHeight: number;
+        color: any;
+    };
+};
+export declare const getStylesBySize: (size: keyof typeof AVATAR_SPEC, theme: any) => {
+    container: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    pressableContainer: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+        position: "relative";
+    };
+    progressContainer: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    avatarContainer: {
+        borderRadius: number;
+        backgroundColor: any;
+        justifyContent: "center";
+        alignItems: "center";
+        overflow: "hidden";
+    };
+    initialsText: {
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "500";
+        textTransform: "uppercase";
+        alignSelf: "center";
+        color: any;
+    };
+    cameraOverlay: {
+        position: "absolute";
+        top: number;
+        right: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: any;
+        justifyContent: "center";
+        alignItems: "center";
+        borderWidth: number;
+        borderColor: any;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    percentagePill: {
+        height: number;
+        minWidth: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: any;
+        backgroundColor: any;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    percentagePillText: {
+        fontSize: number;
+        fontWeight: "300";
+        lineHeight: number;
+        color: any;
+    };
+};
+export { AVATAR_SPEC };

package/lib/components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Avatar';
+export * from './Avatar.interface';

package/lib/components/background/Background.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BackgroundProps } from './Background.interface';
+declare const _default: (props: BackgroundProps) => React.JSX.Element;
+export default _default;

package/lib/components/background/Background.interface.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export declare enum BackgroundVariant {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    NAKHEEL = "nakheel",
+    MERAAS = "meraas",
+    DP = "dp"
+}
+export interface BackgroundProps {
+    variant?: BackgroundVariant;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+    testID?: string;
+}

package/lib/components/background/Background.styles.d.ts

@@ -0,0 +1,10 @@
+declare const styles: {
+    container: {
+        flex: number;
+        overflow: "hidden";
+    };
+    content: {
+        flex: number;
+    };
+};
+export default styles;

package/lib/components/background/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Background';
+export * from './Background.interface';

package/lib/components/bottomDrawer/BottomDrawer.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { BottomDrawerProps } from './BottomDrawer.interface';
-declare const BottomDrawer: React.FC<BottomDrawerProps>;
-export default BottomDrawer;
+declare const _default: (props: BottomDrawerProps) => React.JSX.Element;
+export default _default;

package/lib/components/bottomDrawer/BottomDrawer.styles.d.ts

@@ -12,9 +12,10 @@ declare const styles: {
     };
     modalContainer: {
         flex: number;
-        backgroundColor: string;
         paddingTop: number;
         paddingHorizontal: number;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
     };
     separator: {
         height: number;
@@ -49,5 +50,10 @@ declare const styles: {
         flexDirection: "row";
         alignItems: "center";
     };
+    leftSideStyle: {
+        flex: number;
+        flexDirection: "row";
+        alignItems: "center";
+    };
 };
 export default styles;

package/lib/components/button/Button.interface.d.ts

@@ -2,19 +2,71 @@ import { ReactElement } from 'react';
 import { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { SvgProps } from 'react-native-svg';
 export interface CustomButtonProps {
+    /** Button label text. */
     title: string;
+    /** Called when the button is tapped (no-op when disabled or loading). */
     onPress: () => void;
+    /** Extra styles applied to the outermost container (LinearGradient or Pressable). */
     containerStyle?: StyleProp<ViewStyle>;
+    /** Extra styles merged into the label text. */
     textStyle?: TextStyle;
+    /** SVG icon rendered to the left of the label. */
     leftIcon?: ReactElement<SvgProps>;
+    /** SVG icon rendered to the right of the label. */
     rightIcon?: ReactElement<SvgProps>;
-    iconStyle?: ViewStyle;
+    /** Style applied directly to the left icon element. */
+    leftIconStyle?: ViewStyle;
+    /** Style applied directly to the right icon element. */
+    rightIconStyle?: ViewStyle;
+    /**
+     * Theme key used to resolve the label colour via `useTheme`.
+     * When omitted the colour is derived from `variant` and `disabled` state
+     * per the DHDS Figma spec.
+     */
     titleColor?: string;
+    /**
+     * Typography variant key forwarded to `CustomText`.
+     * When omitted, defaults to `BODY2_MEDIUM` (Large/Medium) or `BODY2_LIGHT` (Small).
+     */
     titleVariant?: string;
-    imagePosition?: 'left' | 'right';
     testID?: string;
     disabled?: boolean;
+    /**
+     * Overrides the background colour when `disabled` is true.
+     * Accepts any valid React Native color string.
+     */
     disabledColor?: string;
+    /**
+     * Overrides the label colour when `disabled` is true.
+     * Accepts any valid React Native color string.
+     */
     disableButtonTitleColor?: string;
+    /** When true, hides the label and shows a spinner instead. */
     isLoading?: boolean;
+    /**
+     * Colour of the loading spinner shown when `isLoading` is true.
+     * For `primary`, `secondary`, and `link` variants this is automatically
+     * derived from the active theme and usually doesn't need to be set.
+     * For the `default` variant, set this to match your custom background so
+     * the spinner remains visible (e.g. `'#FFFFFF'` on a dark fill).
+     * Accepts any valid React Native color string.
+     */
+    loaderColor?: string;
+    /**
+     * Visual style of the button.
+     * - `'primary'`   – theme-aware fill (white on dark / navy on light) · cyan-to-blue gradient border · contrasting label
+     * - `'secondary'` – theme-aware inverted fill · contrasting border · contrasting label
+     * - `'link'`      – no fill · no border · cyan link-colour label · compact content-height layout (DHDS Buttons/Link Text)
+     * - `'default'`   – layout only (size-aware padding / height / gap) · no imposed colours · full consumer control via containerStyle / textStyle / titleColor
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'link' | 'default';
+    /**
+     * Controls height and horizontal padding.
+     * - `'large'`  – 48 dp · 24 dp h-padding · Body 2 Medium (Body 1 Medium for link)
+     * - `'medium'` – 40 dp · 24 dp h-padding · Body 2 Medium
+     * - `'small'`  – 32 dp · 20 dp h-padding · Body 2 Light (Body 3 Medium for link)
+     * @default 'large'
+     */
+    size?: 'large' | 'medium' | 'small';
 }