dhre-ui-kit 2.0.23 → 3.0.0

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

@@ -65,5 +65,128 @@ declare const styles: {
     functionNoticeText: {
         color: string;
     };
+    buttonText: {
+        alignSelf: "center";
+    };
 };
 export default styles;
+/**
+ * Static color tokens mapped to DHDS Figma variables for the Button component.
+ *
+ * THEME-AWARE NOTE (v2):
+ * Background, text, and border colours for primary / secondary / link / default
+ * are now resolved at runtime via `useTheme()` in Button.tsx so that both light
+ * and dark modes are supported correctly.  Only the gradient border constants
+ * below remain as static design tokens (they do not change between themes).
+ *
+ * The legacy constants (PRIMARY_DEFAULT_BG, PRIMARY_TEXT, etc.) are preserved
+ * for backward compatibility in case any consumer imports them directly.
+ */
+export declare const BUTTON_COLORS: {
+    /** @deprecated resolved via Theme.BUTTON_DEFAULT_FILL in Button.tsx */
+    readonly PRIMARY_DEFAULT_BG: string;
+    /** @deprecated resolved via Theme.BUTTON_DISABLED_FILL in Button.tsx */
+    readonly PRIMARY_DISABLED_BG: string;
+    /** @deprecated resolved via Theme.BUTTON_INVRTED_FILL in Button.tsx */
+    readonly SECONDARY_DEFAULT_BG: string;
+    /** @deprecated resolved via hardcoded transparent in Button.tsx */
+    readonly SECONDARY_DISABLED_BG: "transparent";
+    /** @deprecated resolved via Theme.CONTENT_INVERTED in Button.tsx */
+    readonly PRIMARY_TEXT: string;
+    /** @deprecated resolved via Theme.CONTENT_PRIMARY in Button.tsx */
+    readonly SECONDARY_TEXT: string;
+    /** @deprecated resolved via Theme.STROKE_DISABLED_DARK in Button.tsx */
+    readonly DISABLED_TEXT: string;
+    /** --DH-Gradient/Stroke/Primary-button start → cyan */
+    readonly GRADIENT_BORDER_START: string;
+    /** --DH-Gradient/Stroke/Primary-button end → blue */
+    readonly GRADIENT_BORDER_END: "#3590E1";
+    /** @deprecated resolved via Theme.BORDER_INVERTED in Button.tsx */
+    readonly SECONDARY_BORDER: string;
+    /** @deprecated resolved via Theme.STROKE_DISABLED_DARK in Button.tsx */
+    readonly DISABLED_BORDER: string;
+};
+/**
+ * Per-size layout styles.
+ * `pressable`      → applied to the Pressable (all variants).
+ * `gradientWrapper`→ applied to the LinearGradient shell (primary default only);
+ *                    padding:1 creates the visible 1 dp gradient border.
+ */
+export declare const BUTTON_SIZE_STYLES: {
+    largePressable: {
+        minHeight: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        gap: number;
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        borderRadius: number;
+        overflow: "hidden";
+    };
+    largeGradientWrapper: {
+        borderRadius: number;
+        padding: number;
+        overflow: "hidden";
+        height: number;
+    };
+    mediumPressable: {
+        minHeight: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        gap: number;
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        borderRadius: number;
+        overflow: "hidden";
+    };
+    mediumGradientWrapper: {
+        borderRadius: number;
+        padding: number;
+        overflow: "hidden";
+        height: number;
+    };
+    smallPressable: {
+        minHeight: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        gap: number;
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        borderRadius: number;
+        overflow: "hidden";
+    };
+    smallGradientWrapper: {
+        borderRadius: number;
+        padding: number;
+        overflow: "hidden";
+        height: number;
+    };
+};
+/**
+ * Compact inline-layout containers for the `link` variant.
+ * No min-height, no padding, no background — purely a row with a gap.
+ * Content height is driven by the text/icon, matching DHDS Buttons/Link Text:
+ *   Large  → 32 dp content height (Body 1 Medium, 16px / 20px lh)
+ *   Medium → 20 dp content height (Body 2 Medium, 14px / 18px lh)
+ *   Small  → 16 dp content height (Body 3 Medium, 12px / 16px lh)
+ */
+export declare const LINK_SIZE_STYLES: {
+    large: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+    medium: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+    small: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+};

package/lib/components/checkBox/CheckBox.d.ts

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

package/lib/components/checkBox/CheckBox.interface.d.ts

@@ -6,11 +6,46 @@ export interface CheckBoxProps {
     disable?: boolean;
     isCircle?: boolean;
     testID?: string;
+    /** Icon rendered when checkbox is checked and enabled (Selected / Default) */
     checkedIcon: React.ReactElement;
+    /** Icon rendered when checkbox is unchecked and enabled (Unselected / Default) */
     uncheckedIcon: React.ReactElement;
     titleVariant?: string;
     titleStyle?: TextStyle;
     containerStyle?: ViewStyle;
     onPress?: () => void;
     hideCheckbox?: boolean;
+    /**
+     * Controls the checkbox size and automatically selects the matching label
+     * typography variant (large → BODY1_LIGHT 16px, small → BODY2_LIGHT 14px).
+     * Overridden by `titleVariant` if that prop is also provided.
+     * @default 'large'
+     */
+    size?: 'large' | 'small';
+    /**
+     * When true the partial/indeterminate icon is rendered instead of the
+     * checked or unchecked icon.
+     * @default false
+     */
+    isPartial?: boolean;
+    /**
+     * Icon for partial/indeterminate state when enabled (Partial / Default).
+     * Falls back to `checkedIcon` when not provided.
+     */
+    partialIcon?: React.ReactElement;
+    /**
+     * Icon for partial/indeterminate state when disabled (Partial / Disabled).
+     * Falls back to `partialIcon` → `checkedIcon` when not provided.
+     */
+    partialDisabledIcon?: React.ReactElement;
+    /**
+     * Icon for checked state when disabled (Selected / Disabled).
+     * Falls back to `checkedIcon` when not provided.
+     */
+    checkedDisabledIcon?: React.ReactElement;
+    /**
+     * Icon for unchecked state when disabled (Unselected / Disabled).
+     * Falls back to `uncheckedIcon` when not provided.
+     */
+    uncheckedDisabledIcon?: React.ReactElement;
 }

package/lib/components/checkBox/CheckBox.styles.d.ts

@@ -1,30 +1,12 @@
 declare const styles: {
-    checkboxContainer: {
-        alignItems: "center";
-        justifyContent: "center";
-    };
-    checkboxImage: {
-        width: number;
-        height: number;
-        backgroundColor: string;
-        resizeMode: "contain";
-    };
-    uncheckedCheckbox: {
-        width: number;
-        height: number;
-        overflow: "hidden";
-        borderRadius: number;
-        borderWidth: number;
-        borderColor: string;
-    };
     directionStyle: {
         flexDirection: "row";
-        justifyContent: "center";
-        alignItems: "center";
+        alignItems: "flex-start";
         gap: number;
     };
-    labelStyle: {
-        color: string;
+    checkboxContainer: {
+        alignItems: "center";
+        justifyContent: "center";
     };
 };
 export default styles;

package/lib/components/chip/Chip.d.ts

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

package/lib/components/chip/Chip.interface.d.ts

@@ -0,0 +1,52 @@
+import { ReactElement } from 'react';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { SvgProps } from 'react-native-svg';
+export type ChipSize = 'large' | 'small';
+export type ChipStatus = 'default' | 'disabled';
+export interface ChipProps {
+    /** Label text rendered inside the chip. */
+    text?: string;
+    /** SVG icon rendered to the left of the label. */
+    leadIcon?: ReactElement<SvgProps>;
+    /** SVG icon rendered to the right of the label. */
+    trailIcon?: ReactElement<SvgProps>;
+    /**
+     * Controls height and horizontal padding.
+     * @default 'large'
+     */
+    size?: ChipSize;
+    /**
+     * When true the chip renders with selected surface + inverted text colours.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * When true the chip renders with disabled surface colours and touch is blocked.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Called when the chip is pressed (no-op when disabled). */
+    onPress?: () => void;
+    /**
+     * Merged last into the container Pressable style.
+     * Use to override background, border, dimensions, etc.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Merged last into the label text style.
+     * Use to override colour, fontSize, fontFamily, etc.
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Merged last into the lead-icon wrapper View style.
+     * Use to adjust icon size or add spacing.
+     */
+    leadIconStyle?: StyleProp<ViewStyle>;
+    /**
+     * Merged last into the trail-icon wrapper View style.
+     * Use to adjust icon size or add spacing.
+     */
+    trailIconStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+    accessibilityLabel?: string;
+}

package/lib/components/chip/Chip.styles.d.ts

@@ -0,0 +1,42 @@
+import { ChipSize } from './Chip.interface';
+declare const chipStyles: {
+    base: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        borderWidth: number;
+        borderRadius: number;
+        gap: number;
+    };
+    sizeLarge: {
+        height: number;
+        minWidth: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    sizeSmall: {
+        height: number;
+        minWidth: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    iconLarge: {
+        width: number;
+        height: number;
+    };
+    iconSmall: {
+        width: number;
+        height: number;
+    };
+};
+export declare const getIconStyle: (size: ChipSize) => {
+    width: number;
+    height: number;
+};
+export declare const getSizeStyle: (size: ChipSize) => {
+    height: number;
+    minWidth: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+};
+export default chipStyles;

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

@@ -0,0 +1,2 @@
+export { default } from './Chip';
+export type { ChipProps, ChipSize, ChipStatus } from './Chip.interface';

package/lib/components/customDocumentPicker/CustomDocumentPicker.d.ts

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

package/lib/components/customDocumentPicker/CustomDocumentPicker.interface.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { TextStyle, ViewStyle } from 'react-native';
-import { DocumentPickerResponse } from 'react-native-document-picker';
-export interface CustomDocumentPickerProps {
-    onDocumentUpload: (base64: string, document?: DocumentPickerResponse) => void;
-    title?: string;
-    hint?: string;
-    maxFileSize?: number;
-    fileTypes?: string[];
-    containerStyle?: ViewStyle;
-    titleStyle?: TextStyle;
-    hintStyle?: TextStyle;
-    fileIcon: React.ReactElement;
-    uploadIcon: React.ReactElement;
-    deleteIcon: React.ReactElement;
-}

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

@@ -1 +0,0 @@
-export { default } from './CustomDocumentPicker';

package/lib/components/customHeader/CustomHeader.interface.d.ts

@@ -1,10 +1,41 @@
+import React from 'react';
+export interface IconConfig {
+    /** Icon element to render. */
+    icon: React.ReactElement;
+    /** Callback invoked when the icon is pressed. */
+    onPress?: () => void;
+    /** Optional testID applied to the Pressable wrapper. */
+    testId?: string;
+}
 export interface CustomHeaderProps {
+    /** Header title text. */
     title: string;
+    /** TestID for the root container. Defaults to `'CUSTOM-HEADER'`. */
     testId?: string;
-    leftIcon?: React.ReactElement;
-    rightIcon?: React.ReactElement;
-    showLeftIcon?: boolean;
-    showRightIcon?: boolean;
-    onLeftPress?: () => void;
-    onRightPress?: () => void;
+    /**
+     * Icon on the far left of the header (e.g. a back arrow).
+     * Bundles the icon element, its press handler, and an optional testId.
+     *
+     * @example
+     * leftIcon={{ icon: <BackArrow />, onPress: navigation.goBack, testId: 'header-back' }}
+     */
+    leftIcon?: IconConfig;
+    /**
+     * Optional non-interactive icon rendered immediately after the title text
+     * (e.g. a badge or info indicator).
+     * Width/height of 24×24 dp are applied automatically.
+     */
+    titleSuffixIcon?: React.ReactElement;
+    /**
+     * Icons on the right side of the header.
+     * Each entry bundles the icon element, its press handler, and an optional testId.
+     * Renders in order, separated by a 12 dp gap.
+     *
+     * @example
+     * rightIcons={[
+     *   { icon: <SearchIcon />, onPress: handleSearch, testId: 'header-search' },
+     *   { icon: <MoreIcon />,   onPress: handleMore,   testId: 'header-more'   },
+     * ]}
+     */
+    rightIcons?: IconConfig[];
 }

package/lib/components/customHeader/CustomHeader.styles.d.ts

@@ -2,20 +2,23 @@ declare const styles: {
     container: {
         flexDirection: "row";
         justifyContent: "space-between";
+        alignItems: "center";
         paddingHorizontal: number;
         paddingTop: number;
         paddingBottom: number;
-        borderBottomWidth: number;
     };
-    headderContainer: {
+    /** Left cluster: back-icon · title text · optional title-suffix icon */
+    pageTitleContainer: {
         flexDirection: "row";
         alignItems: "center";
+        gap: number;
+        flexShrink: number;
     };
-    leftIconStyle: {
-        marginRight: number;
-    };
-    rightIconStyle: {
-        marginLeft: number;
+    /** Right cluster: array of action icons */
+    iconsContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
     };
 };
 export default styles;

package/lib/components/customIcon/CustomIcon.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CustomIconProps } from './CustomIcon.interface';
-declare const CustomIcon: ({ icon, title, titleVariant, testId, onPress, containerStyle, titleStyle, }: CustomIconProps) => React.JSX.Element;
-export default CustomIcon;
+declare const _default: (props: CustomIconProps) => React.JSX.Element;
+export default _default;

package/lib/components/customIcon/CustomIcon.interface.d.ts

@@ -1,11 +1,40 @@
 import React from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
+import { FontStyle } from '../../utils/appEnum';
+/** Visual type variant — maps to Figma "Buttons/Icon" types */
+export type CustomIconType = 'dark' | 'light' | 'blur' | 'outlined';
+/** Size variant — maps to Figma "Buttons/Icon" sizes */
+export type CustomIconSize = 'large' | 'medium' | 'small' | 'xSmall';
+/** Label position relative to the icon — maps to Figma "Buttons/Icon with Text" */
+export type CustomIconLabelPosition = 'left' | 'right' | 'bottom';
 export interface CustomIconProps {
     icon: React.ReactElement;
     title?: string;
-    titleVariant?: string;
+    /** Typography variant for the label. Defaults to size-appropriate token (BODY1_MEDIUM / BODY3_MEDIUM). */
+    titleVariant?: FontStyle | string;
     testId?: string;
     onPress?: () => void;
     containerStyle?: ViewStyle;
     titleStyle?: TextStyle;
+    /**
+     * Figma design type variant.
+     * - `dark`     : white bg + backdrop blur (light tint)
+     * - `light`    : deep-navy bg + white stroke + backdrop blur (dark tint)
+     * - `blur`     : semi-transparent blue bg (no blur effect)
+     * - `outlined` : transparent bg + cyan-to-blue gradient stroke
+     *
+     * When omitted the component renders in its original unstyled form
+     * (fully backward-compatible).
+     */
+    type?: CustomIconType;
+    /**
+     * Size variant controlling the button container, icon slot, and padding.
+     * Has effect only when `type` is also provided.
+     */
+    size?: CustomIconSize;
+    /**
+     * Position of the optional `title` label relative to the icon button.
+     * Adjusts the outer Pressable's flex direction and gap.
+     */
+    labelPosition?: CustomIconLabelPosition;
 }

package/lib/components/customIcon/CustomIcon.styles.d.ts

@@ -1,10 +1,85 @@
+import { FontStyle } from '../../utils/appEnum';
+import type { CustomIconSize } from './CustomIcon.interface';
 declare const styles: {
     container: {
         justifyContent: "center";
         alignItems: "center";
     };
     title: {
-        color: string;
+        alignSelf: "center";
     };
 };
 export default styles;
+export declare const ICON_BUTTON_RADIUS: number;
+export interface IconSizeSpec {
+    containerSize: number;
+    iconSize: number;
+    padding: number;
+}
+export declare const ICON_SIZE_SPEC: Record<CustomIconSize, IconSizeSpec>;
+export declare const ICON_BLUR_PADDING: {
+    readonly horizontal: number;
+    readonly vertical: number;
+};
+export declare const ICON_BLUR_BUTTON_STYLES: {
+    base: {
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    lightBorder: {
+        borderWidth: number;
+    };
+};
+export declare const ICON_BLUR_TYPE_BG = "rgba(37, 59, 149, 0.5)";
+export declare const ICON_BLUR_TYPE_STYLE: {
+    container: {
+        backgroundColor: string;
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+        overflow: "hidden";
+    };
+};
+export declare const OUTLINED_GRADIENT_COLORS: readonly [string, "#438CB1"];
+export declare const OUTLINED_GRADIENT_START: {
+    readonly x: 0;
+    readonly y: 0;
+};
+export declare const OUTLINED_GRADIENT_END: {
+    readonly x: 1;
+    readonly y: 1;
+};
+export declare const OUTLINED_BORDER_WIDTH = 1;
+export declare const OUTLINED_BUTTON_STYLES: {
+    shell: {
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+        overflow: "hidden";
+    };
+    inner: {
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+        overflow: "hidden";
+    };
+};
+export declare const ICON_LABEL_POSITION_STYLES: {
+    left: {
+        flexDirection: "row-reverse";
+        alignItems: "center";
+        gap: number;
+    };
+    right: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+    bottom: {
+        flexDirection: "column";
+        alignItems: "center";
+        gap: number;
+    };
+};
+export declare const ICON_TITLE_VARIANT_FOR_SIZE: Record<CustomIconSize, FontStyle>;