dhre-ui-kit 3.0.0 → 3.0.2

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

@@ -1,7 +1,6 @@
 declare const styles: {
     container: {
         paddingVertical: number;
-        borderBottomWidth: number;
     };
     header: {
         flexDirection: "row";

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

@@ -21,7 +21,6 @@ declare const styles: {
         height: number;
         width: number;
         alignSelf: "center";
-        backgroundColor: string;
         borderRadius: number;
     };
     headerContainer: {
@@ -32,14 +31,12 @@ declare const styles: {
     };
     title: {
         flex: number;
-        color: string;
         textAlign: "left";
     };
     leftIconStyle: {
         marginRight: number;
     };
     rightTitle: {
-        color: string;
         textAlign: "right";
         marginRight: number;
     };

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

@@ -1,4 +1,4 @@
-import { TextStyle, ViewStyle } from 'react-native';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
 export interface CheckBoxProps {
     isChecked: boolean;
     onCheck?: (checked: boolean) => void;
@@ -8,11 +8,15 @@ export interface CheckBoxProps {
     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;
+    /**
+     * Icon rendered when checkbox is unchecked and enabled (Unselected / Default).
+     * Optional — when omitted the container renders as an empty box (border only).
+     */
+    uncheckedIcon?: React.ReactElement;
     titleVariant?: string;
     titleStyle?: TextStyle;
     containerStyle?: ViewStyle;
+    checkboxStyle?: StyleProp<ViewStyle>;
     onPress?: () => void;
     hideCheckbox?: boolean;
     /**

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

@@ -7,6 +7,9 @@ declare const styles: {
     checkboxContainer: {
         alignItems: "center";
         justifyContent: "center";
+        borderRadius: number;
+        borderWidth: number;
+        overflow: "hidden";
     };
 };
 export default styles;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextStyle, ViewStyle } from 'react-native';
+import { ColorValue, 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';
@@ -37,4 +37,5 @@ export interface CustomIconProps {
      * Adjusts the outer Pressable's flex direction and gap.
      */
     labelPosition?: CustomIconLabelPosition;
+    outlinedBackgroundColor?: ColorValue;
 }

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

@@ -1,3 +1,4 @@
+export { OUTLINED_GRADIENT_COLORS, OUTLINED_GRADIENT_START, OUTLINED_GRADIENT_END, OUTLINED_BORDER_WIDTH, } from '../../theme/gradients';
 import { FontStyle } from '../../utils/appEnum';
 import type { CustomIconSize } from './CustomIcon.interface';
 declare const styles: {
@@ -41,16 +42,6 @@ export declare const ICON_BLUR_TYPE_STYLE: {
         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;

package/lib/components/customSlideButton/custom-slide-button.interface.d.ts

@@ -12,6 +12,10 @@ export interface CustomSlideButtonProps {
     sliderBackgroundColor?: string;
     sliderTextColor?: string;
     resetTimer?: number;
+    /** When true, thumb starts on the right and the user drags leftward to complete (Arabic/RTL layout). Default: false. */
+    isRTL?: boolean;
+    /** Style applied to the container between onComplete and the auto-reset. Use to override the success-fill background. */
+    completedContainerStyle?: ViewStyle;
 }
 export type SlideButtonHandle = {
     reset?: () => void;

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { CustomSlideButtonProps, SlideButtonHandle } from './custom-slide-button.interface';
-declare const _default: (props: CustomSlideButtonProps & React.RefAttributes<SlideButtonHandle>) => React.JSX.Element;
+import { CustomSlideButtonProps } from './custom-slide-button.interface';
+declare const _default: React.FC<CustomSlideButtonProps>;
 export default _default;

package/lib/components/customSlideButton/styles.d.ts

@@ -4,8 +4,13 @@ declare const styles: {
         justifyContent: "center";
         alignItems: "center";
     };
+    gradientShell: {
+        borderRadius: number;
+        padding: number;
+    };
     sliderContainer: {
         height: number;
+        borderRadius: number;
         overflow: "hidden";
         justifyContent: "center";
     };
@@ -19,6 +24,7 @@ declare const styles: {
         height: number;
         justifyContent: "center";
         alignItems: "center";
+        borderRadius: number;
         margin: number;
     };
     buttonTextContainer: {

package/lib/components/dateRangePicker/DateRangePicker.styles.d.ts

@@ -1,136 +1,36 @@
 declare const styles: {
+    calendarCard: {
+        borderRadius: number;
+        padding: number;
+        overflow: "hidden";
+    };
+    calendarHeader: {
+        flex: number;
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+        paddingBottom: number;
+        borderBottomWidth: number;
+    };
+    monthText: {
+        fontSize: number;
+        fontWeight: "300";
+        lineHeight: number;
+    };
+    arrowsContainer: {
+        flexDirection: "row";
+        gap: number;
+    };
     applyButton: {
         marginTop: number;
+        height: number;
+        minHeight: number;
+        paddingHorizontal: number;
         paddingVertical: number;
         justifyContent: "center";
         alignItems: "center";
         borderRadius: number;
-    };
-    applyButtonText: {
-        color?: import("react-native").ColorValue | undefined;
-        fontFamily?: string | undefined;
-        fontSize?: number | undefined;
-        fontStyle?: "normal" | "italic" | undefined;
-        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-        letterSpacing?: number | undefined;
-        lineHeight?: number | undefined;
-        textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
-        textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through" | undefined;
-        textDecorationStyle?: "solid" | "double" | "dotted" | "dashed" | undefined;
-        textDecorationColor?: import("react-native").ColorValue | undefined;
-        textShadowColor?: import("react-native").ColorValue | undefined;
-        textShadowOffset?: {
-            width: number;
-            height: number;
-        } | undefined;
-        textShadowRadius?: number | undefined;
-        textTransform?: "none" | "capitalize" | "uppercase" | "lowercase" | undefined;
-        testID?: string | undefined;
-        fontVariant?: import("react-native").FontVariant[] | undefined;
-        writingDirection?: "auto" | "ltr" | "rtl" | undefined;
-        backfaceVisibility?: "visible" | "hidden" | undefined;
-        backgroundColor?: import("react-native").ColorValue | undefined;
-        borderBlockColor?: import("react-native").ColorValue | undefined;
-        borderBlockEndColor?: import("react-native").ColorValue | undefined;
-        borderBlockStartColor?: import("react-native").ColorValue | undefined;
-        borderBottomColor?: import("react-native").ColorValue | undefined;
-        borderBottomEndRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderBottomLeftRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderBottomRightRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderBottomStartRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderColor?: import("react-native").ColorValue | undefined;
-        borderCurve?: "circular" | "continuous" | undefined;
-        borderEndColor?: import("react-native").ColorValue | undefined;
-        borderEndEndRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderEndStartRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderLeftColor?: import("react-native").ColorValue | undefined;
-        borderRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderRightColor?: import("react-native").ColorValue | undefined;
-        borderStartColor?: import("react-native").ColorValue | undefined;
-        borderStartEndRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderStartStartRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderStyle?: "solid" | "dotted" | "dashed" | undefined;
-        borderTopColor?: import("react-native").ColorValue | undefined;
-        borderTopEndRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderTopLeftRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderTopRightRadius?: import("react-native").AnimatableNumericValue | undefined;
-        borderTopStartRadius?: import("react-native").AnimatableNumericValue | undefined;
-        opacity?: import("react-native").AnimatableNumericValue | undefined;
-        elevation?: number | undefined;
-        pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined;
-        alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | undefined;
-        alignItems?: import("react-native").FlexAlignType | undefined;
-        alignSelf?: "auto" | import("react-native").FlexAlignType | undefined;
-        aspectRatio?: number | string | undefined;
-        borderBottomWidth?: number | undefined;
-        borderEndWidth?: number | undefined;
-        borderLeftWidth?: number | undefined;
-        borderRightWidth?: number | undefined;
-        borderStartWidth?: number | undefined;
-        borderTopWidth?: number | undefined;
-        borderWidth?: number | undefined;
-        bottom?: import("react-native").DimensionValue | undefined;
-        display?: "none" | "flex" | undefined;
-        end?: import("react-native").DimensionValue | undefined;
-        flex?: number | undefined;
-        flexBasis?: import("react-native").DimensionValue | undefined;
-        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
-        rowGap?: number | undefined;
-        gap?: number | undefined;
-        columnGap?: number | undefined;
-        flexGrow?: number | undefined;
-        flexShrink?: number | undefined;
-        flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
-        height?: import("react-native").DimensionValue | undefined;
-        justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined;
-        left?: import("react-native").DimensionValue | undefined;
-        margin?: import("react-native").DimensionValue | undefined;
-        marginBottom?: import("react-native").DimensionValue | undefined;
-        marginEnd?: import("react-native").DimensionValue | undefined;
-        marginHorizontal?: import("react-native").DimensionValue | undefined;
-        marginLeft?: import("react-native").DimensionValue | undefined;
-        marginRight?: import("react-native").DimensionValue | undefined;
-        marginStart?: import("react-native").DimensionValue | undefined;
-        marginTop?: import("react-native").DimensionValue | undefined;
-        marginVertical?: import("react-native").DimensionValue | undefined;
-        maxHeight?: import("react-native").DimensionValue | undefined;
-        maxWidth?: import("react-native").DimensionValue | undefined;
-        minHeight?: import("react-native").DimensionValue | undefined;
-        minWidth?: import("react-native").DimensionValue | undefined;
-        overflow?: "visible" | "hidden" | "scroll" | undefined;
-        padding?: import("react-native").DimensionValue | undefined;
-        paddingBottom?: import("react-native").DimensionValue | undefined;
-        paddingEnd?: import("react-native").DimensionValue | undefined;
-        paddingHorizontal?: import("react-native").DimensionValue | undefined;
-        paddingLeft?: import("react-native").DimensionValue | undefined;
-        paddingRight?: import("react-native").DimensionValue | undefined;
-        paddingStart?: import("react-native").DimensionValue | undefined;
-        paddingTop?: import("react-native").DimensionValue | undefined;
-        paddingVertical?: import("react-native").DimensionValue | undefined;
-        position?: "absolute" | "relative" | undefined;
-        right?: import("react-native").DimensionValue | undefined;
-        start?: import("react-native").DimensionValue | undefined;
-        top?: import("react-native").DimensionValue | undefined;
-        width?: import("react-native").DimensionValue | undefined;
-        zIndex?: number | undefined;
-        direction?: "inherit" | "ltr" | "rtl" | undefined;
-        shadowColor?: import("react-native").ColorValue | undefined;
-        shadowOffset?: Readonly<{
-            width: number;
-            height: number;
-        }> | undefined;
-        shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
-        shadowRadius?: number | undefined;
-        transform?: (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;
-        transformMatrix?: Array<number> | undefined;
-        rotation?: import("react-native").AnimatableNumericValue | undefined;
-        scaleX?: import("react-native").AnimatableNumericValue | undefined;
-        scaleY?: import("react-native").AnimatableNumericValue | undefined;
-        translateX?: import("react-native").AnimatableNumericValue | undefined;
-        translateY?: import("react-native").AnimatableNumericValue | undefined;
-        textAlignVertical?: "auto" | "top" | "bottom" | "center" | undefined;
-        verticalAlign?: "auto" | "top" | "bottom" | "middle" | undefined;
-        includeFontPadding?: boolean | undefined;
+        borderWidth: number;
     };
 };
 export default styles;

package/lib/components/property-details/property-details.interface.d.ts

@@ -12,4 +12,5 @@ export interface PropertyDetailsProps {
     subTitleStyle?: ViewStyle;
     propertyNumberStyle?: ViewStyle;
     titleStyle?: TextStyle;
+    isSelected?: boolean;
 }

package/lib/components/property-details/styles.d.ts

@@ -1,21 +1,28 @@
 declare const styles: {
     container: {
         flexDirection: "row";
-        justifyContent: "space-between";
         alignItems: "center";
-        paddingHorizontal: number;
-        paddingVertical: number;
-        borderTopWidth: number;
-        borderBottomWidth: number;
-    };
-    propertyInfo: {
-        flex: number;
-        rowGap: number;
+        padding: number;
+        columnGap: number;
     };
-    arrowIconContainer: {
+    imageWrapper: {
         width: number;
         height: number;
         borderRadius: number;
+        overflow: "hidden";
+    };
+    brandBadge: {
+        position: "absolute";
+        top: number;
+        right: number;
+        overflow: "hidden";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    propertyInfo: {
+        flex: number;
+        justifyContent: "center";
+        rowGap: number;
     };
     propertyNumber: {
         flexDirection: "row";

package/lib/components/radio-button-group/RadioButtonGroup.interface.d.ts

@@ -1,4 +1,5 @@
 import { ViewStyle } from "react-native";
+import { FontStyle } from "../../utils/appEnum";
 export type RadioButtonItem = {
     label: string;
     value: string;
@@ -10,4 +11,7 @@ export interface RadioButtonGroupProps {
     labelStyle?: ViewStyle;
     optionContainerStyle?: ViewStyle;
     selectedValue?: string;
+    size?: 'large' | 'small';
+    fontVariant?: FontStyle;
+    radioColor?: string;
 }

package/lib/components/radio-button-group/index.d.ts

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

package/lib/components/radio-button-group/styles.d.ts

@@ -1,11 +1,11 @@
-declare const styles: {
+export declare const createStyles: (themeColors: Record<string, string>, size: "large" | "small", radioColor?: string) => {
     container: {
         rowGap: number;
     };
     optionContainer: {
         flexDirection: "row";
         columnGap: number;
-        alignItems: "center";
+        alignItems: "flex-start";
     };
     radioButton: {
         width: number;
@@ -13,12 +13,20 @@ declare const styles: {
         borderRadius: number;
         borderWidth: number;
         borderColor: string;
+        justifyContent: "center";
+        alignItems: "center";
     };
     radioButtonSelected: {
+        borderWidth: number;
+        backgroundColor: string;
+    };
+    radioButtonInnerDot: {
+        width: number;
+        height: number;
+        borderRadius: number;
         backgroundColor: string;
     };
     label: {
         color: string;
     };
 };
-export default styles;

package/lib/components/textInput/Textinput.d.ts

@@ -7,6 +7,7 @@ interface CommonTextInputProps extends BaseTextInputProps {
     placeholderText?: string;
     isSecureTextEntry?: boolean;
     inputStyle?: ViewStyle;
+    containerStyle?: ViewStyle;
     keyboardType?: 'default' | 'numeric' | 'email-address' | 'phone-pad';
     maxLength?: number;
     errorMessage?: string;