dhre-ui-kit 2.0.23 → 3.0.0

package/lib/components/loader/Loader.interface.d.ts

@@ -0,0 +1,53 @@
+import { ViewStyle } from 'react-native';
+export interface LoaderProps {
+    /**
+     * Controls visibility. Component renders null when false.
+     * Mirrors the `loading` prop on CustomLoader.
+     */
+    loading: boolean;
+    /**
+     * Optional label rendered at the centre of the spinner (e.g. "50%").
+     * When omitted the text layer is not rendered.
+     */
+    text?: string;
+    /**
+     * Diameter of the spinner in dp (pre-scale).
+     * Will be passed through horizontalScale internally.
+     * @default 96
+     */
+    size?: number;
+    /**
+     * Colour applied to both the active arc and the centre label.
+     * Defaults to DHRE_WHITE[100] (#FFFFFF).
+     */
+    color?: string;
+    /**
+     * Opacity of the background track circle (0–1).
+     * @default 0.2
+     */
+    trackOpacity?: number;
+    /**
+     * Width of the arc stroke in dp (pre-scale).
+     * @default 6
+     */
+    strokeWidth?: number;
+    /**
+     * Overrides the outermost full-screen absolute overlay View.
+     * Mirrors `customeContainer` on CustomLoader.
+     */
+    containerStyle?: ViewStyle;
+    /**
+     * Overrides the semi-transparent backdrop View.
+     * Mirrors `customeBackDrop` on CustomLoader.
+     */
+    backdropStyle?: ViewStyle;
+    /**
+     * Overrides the centred box that wraps the spinner and label.
+     * Mirrors `customeBox` on CustomLoader.
+     */
+    boxStyle?: ViewStyle;
+    /**
+     * testID forwarded to the root View for testing.
+     */
+    testID?: string;
+}

package/lib/components/loader/Loader.styles.d.ts

@@ -0,0 +1,45 @@
+declare const createStyles: (scaledSize: number, color: string) => {
+    container: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+    };
+    backdrop: {
+        flex: number;
+        justifyContent: "center";
+        alignItems: "center";
+        backgroundColor: string;
+    };
+    box: {
+        width: number;
+        height: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    svgWrapper: {
+        position: "absolute";
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+    textWrapper: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    labelText: {
+        color: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "500";
+        textAlign: "center";
+    };
+};
+export default createStyles;

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

@@ -0,0 +1,2 @@
+export { default } from './Loader';
+export type { LoaderProps } from './Loader.interface';

package/lib/components/notificationBandge/NotificationBandge.styles.d.ts

@@ -19,7 +19,7 @@ declare const styles: {
         fontFamily?: string | undefined;
         fontSize?: number | undefined;
         fontStyle?: "normal" | "italic" | undefined;
-        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | 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;
@@ -33,7 +33,7 @@ declare const styles: {
         } | undefined;
         textShadowRadius?: number | undefined;
         textTransform?: "none" | "capitalize" | "uppercase" | "lowercase" | undefined;
-        userSelect?: "auto" | "none" | "text" | "contain" | "all" | undefined;
+        testID?: string | undefined;
         fontVariant?: import("react-native").FontVariant[] | undefined;
         writingDirection?: "auto" | "ltr" | "rtl" | undefined;
         backfaceVisibility?: "visible" | "hidden" | undefined;
@@ -42,41 +42,31 @@ declare const styles: {
         borderBlockEndColor?: import("react-native").ColorValue | undefined;
         borderBlockStartColor?: import("react-native").ColorValue | undefined;
         borderBottomColor?: import("react-native").ColorValue | undefined;
-        borderBottomEndRadius?: import("react-native").AnimatableNumericValue | string | undefined;
-        borderBottomLeftRadius?: import("react-native").AnimatableNumericValue | string | undefined;
-        borderBottomRightRadius?: import("react-native").AnimatableNumericValue | string | undefined;
-        borderBottomStartRadius?: import("react-native").AnimatableNumericValue | string | 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 | string | undefined;
-        borderEndStartRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        borderEndEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderEndStartRadius?: import("react-native").AnimatableNumericValue | undefined;
         borderLeftColor?: import("react-native").ColorValue | undefined;
-        borderRadius?: import("react-native").AnimatableNumericValue | string | undefined;
+        borderRadius?: import("react-native").AnimatableNumericValue | undefined;
         borderRightColor?: import("react-native").ColorValue | undefined;
         borderStartColor?: import("react-native").ColorValue | undefined;
-        borderStartEndRadius?: import("react-native").AnimatableNumericValue | string | undefined;
-        borderStartStartRadius?: import("react-native").AnimatableNumericValue | string | 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 | string | undefined;
-        borderTopLeftRadius?: import("react-native").AnimatableNumericValue | string | undefined;
-        borderTopRightRadius?: import("react-native").AnimatableNumericValue | string | undefined;
-        borderTopStartRadius?: import("react-native").AnimatableNumericValue | string | undefined;
-        outlineColor?: import("react-native").ColorValue | undefined;
-        outlineOffset?: import("react-native").AnimatableNumericValue | undefined;
-        outlineStyle?: "solid" | "dotted" | "dashed" | undefined;
-        outlineWidth?: import("react-native").AnimatableNumericValue | 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;
-        isolation?: "auto" | "isolate" | undefined;
-        cursor?: import("react-native").CursorValue | undefined;
-        boxShadow?: ReadonlyArray<import("react-native").BoxShadowValue> | string | undefined;
-        filter?: ReadonlyArray<import("react-native").FilterFunction> | string | undefined;
-        mixBlendMode?: import("react-native").BlendMode | undefined;
-        experimental_backgroundImage?: ReadonlyArray<import("react-native").GradientValue> | string | undefined;
-        alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | 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;
@@ -88,15 +78,14 @@ declare const styles: {
         borderTopWidth?: number | undefined;
         borderWidth?: number | undefined;
         bottom?: import("react-native").DimensionValue | undefined;
-        boxSizing?: "border-box" | "content-box" | undefined;
-        display?: "none" | "flex" | "contents" | 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 | string | undefined;
-        gap?: number | string | undefined;
-        columnGap?: number | string | undefined;
+        rowGap?: number | undefined;
+        gap?: number | undefined;
+        columnGap?: number | undefined;
         flexGrow?: number | undefined;
         flexShrink?: number | undefined;
         flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -126,32 +115,13 @@ declare const styles: {
         paddingStart?: import("react-native").DimensionValue | undefined;
         paddingTop?: import("react-native").DimensionValue | undefined;
         paddingVertical?: import("react-native").DimensionValue | undefined;
-        position?: "absolute" | "relative" | "static" | 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;
-        inset?: import("react-native").DimensionValue | undefined;
-        insetBlock?: import("react-native").DimensionValue | undefined;
-        insetBlockEnd?: import("react-native").DimensionValue | undefined;
-        insetBlockStart?: import("react-native").DimensionValue | undefined;
-        insetInline?: import("react-native").DimensionValue | undefined;
-        insetInlineEnd?: import("react-native").DimensionValue | undefined;
-        insetInlineStart?: import("react-native").DimensionValue | undefined;
-        marginBlock?: import("react-native").DimensionValue | undefined;
-        marginBlockEnd?: import("react-native").DimensionValue | undefined;
-        marginBlockStart?: import("react-native").DimensionValue | undefined;
-        marginInline?: import("react-native").DimensionValue | undefined;
-        marginInlineEnd?: import("react-native").DimensionValue | undefined;
-        marginInlineStart?: import("react-native").DimensionValue | undefined;
-        paddingBlock?: import("react-native").DimensionValue | undefined;
-        paddingBlockEnd?: import("react-native").DimensionValue | undefined;
-        paddingBlockStart?: import("react-native").DimensionValue | undefined;
-        paddingInline?: import("react-native").DimensionValue | undefined;
-        paddingInlineEnd?: import("react-native").DimensionValue | undefined;
-        paddingInlineStart?: import("react-native").DimensionValue | undefined;
         shadowColor?: import("react-native").ColorValue | undefined;
         shadowOffset?: Readonly<{
             width: number;
@@ -159,8 +129,7 @@ declare const styles: {
         }> | undefined;
         shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
         shadowRadius?: number | undefined;
-        transform?: Readonly<import("react-native").MaximumOneOf<import("react-native").PerspectiveTransform & 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>[]> | string | undefined;
-        transformOrigin?: Array<string | number> | string | 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;

package/lib/components/otp/otp.interface.d.ts

@@ -18,8 +18,10 @@ export interface IProps {
     maxResendCount?: number;
     timerToResend?: number;
     timerIcon?: React.ReactElement;
+    errorIcon?: React.ReactElement;
     errorMessageMaxReachCountProps?: string;
     isInValidOtp?: boolean;
+    editable?: boolean;
 }
 export type OTPInputHandle = {
     reset?: () => void;

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

@@ -1,14 +1,14 @@
 declare const styles: {
     textInputContainer: {
         flexDirection: "row";
-        justifyContent: "space-between";
+        gap: number;
         marginTop: number;
         direction: "ltr";
         writingDirection: "ltr";
     };
     textInputStyle: {
+        flex: number;
         height: number;
-        width: number;
         borderRadius: number;
         borderWidth: number;
         textAlign: "center";
@@ -24,17 +24,20 @@ declare const styles: {
         textDecorationLine: "underline";
     };
     resendOTPStyle: {
-        alignSelf: "flex-end";
+        alignSelf: "flex-start";
     };
     timerContainer: {
         flexDirection: "row";
         justifyContent: "space-between";
+        alignItems: "flex-start";
         marginTop: number;
     };
     timerIconContainer: {
+        flex: number;
         flexDirection: "row";
         gap: number;
-        alignItems: "center";
+        alignItems: "flex-start";
+        marginRight: number;
     };
 };
 export { styles };

package/lib/components/progressBar/ProgressBar.d.ts

@@ -1,24 +1,4 @@
 import React from 'react';
-import { TextStyle } from 'react-native';
-import { ShapeType } from '../../utils/appEnum';
-interface CustomProgressBarProps {
-    value: number;
-    type: ShapeType.LINE | ShapeType.CIRCLE;
-    width: number;
-    height?: number;
-    fillColor: string;
-    unfilledColor: string;
-    borderWidth?: number;
-    borderRadius?: number;
-    circleSize?: number;
-    thickness?: number;
-    progress: number;
-    setProgress: React.Dispatch<React.SetStateAction<number>>;
-    increment?: number;
-    interval?: number;
-    percentageText?: string;
-    valueTextStyle?: TextStyle;
-    percentageTextStyle?: TextStyle;
-}
-declare const CustomProgressBar: React.FC<CustomProgressBarProps>;
-export default CustomProgressBar;
+import { CustomProgressBarProps } from './ProgressBar.interface';
+declare const _default: (props: CustomProgressBarProps) => React.JSX.Element;
+export default _default;

package/lib/components/progressBar/ProgressBar.interface.d.ts

@@ -0,0 +1,94 @@
+import { TextStyle } from 'react-native';
+import { FontStyle, ShapeType } from '../../utils/appEnum';
+export type CircleSize = 'large' | 'medium' | 'small' | 'xsmall';
+export interface CircleSizeConfig {
+    circleSize: number;
+    thickness: number;
+    fontStyle: FontStyle;
+}
+export declare const CIRCLE_SIZE_CONFIG: Record<CircleSize, CircleSizeConfig>;
+export type CircleVariant = 'grey' | 'coloured';
+export interface CircleVariantColorKeys {
+    /** Theme key for the progress arc (0–99 %). */
+    fillColorKey: string;
+    /** Theme key for the progress arc when progress reaches 100 %. */
+    completedFillColorKey: string;
+    /** Theme key for the unfilled portion of the ring. */
+    unfilledColorKey: string;
+}
+export declare const CIRCLE_VARIANT_CONFIG: Record<CircleVariant, CircleVariantColorKeys>;
+export declare const LINE_DEFAULTS: {
+    readonly trackHeight: number;
+    readonly borderRadius: number;
+    readonly borderWidth: 0;
+    readonly labelGap: number;
+};
+export declare const LINE_COLOR_KEYS: {
+    readonly fillColor: "SUCCESS_EMPHASIS";
+    readonly unfilledColor: "SURFACE_PRIMARY_TRANSPARENT";
+};
+export interface CustomProgressBarProps {
+    /** Target progress value the animation counts toward (0–100). */
+    value: number;
+    type: ShapeType.LINE | ShapeType.CIRCLE;
+    /** LINE: fixed bar width in px. CIRCLE: pass 0 (unused). */
+    width: number;
+    /** LINE track height override. Defaults to 8 px (Figma). */
+    height?: number;
+    /**
+     * Progress arc / fill colour override.
+     * When omitted, resolved from `variant` (CIRCLE) or LINE_COLOR_KEYS (LINE)
+     * against the current theme — light or dark.
+     */
+    fillColor?: string;
+    /**
+     * Unfilled-track colour override.
+     * When omitted, resolved from `variant` / LINE_COLOR_KEYS against the theme.
+     */
+    unfilledColor?: string;
+    /** Border width override. Defaults to 0 (Figma: no border). */
+    borderWidth?: number;
+    /** Border radius override. Defaults to 4 px (Figma). */
+    borderRadius?: number;
+    /** CIRCLE diameter override (px). Takes precedence over the `size` preset. */
+    circleSize?: number;
+    /** CIRCLE stroke thickness override (px). Takes precedence over the `size` preset. */
+    thickness?: number;
+    /** Current animated progress value (0–100). Owned by the caller via useState. */
+    progress: number;
+    setProgress: React.Dispatch<React.SetStateAction<number>>;
+    /** Progress increment per animation tick. Default: 1. */
+    increment?: number;
+    /** Animation tick interval in ms. Default: 100. */
+    interval?: number;
+    /** Secondary label string rendered below the % text inside a CIRCLE. */
+    percentageText?: string;
+    /** Style override for the primary percentage text. */
+    valueTextStyle?: TextStyle;
+    /** Style override for the secondary label text. */
+    percentageTextStyle?: TextStyle;
+    /**
+     * CIRCLE size preset — resolves circleSize, thickness, and centre-text
+     * font size from DHDS design tokens.
+     * Explicit `circleSize` / `thickness` props override the preset.
+     */
+    size?: CircleSize;
+    /**
+     * CIRCLE colour variant — resolves fillColor and unfilledColor from DHDS
+     * design tokens, adapting automatically to light / dark mode.
+     * For `'coloured'`, the fill automatically switches from orange to
+     * success-green when `progress` reaches 100.
+     * Explicit `fillColor` / `unfilledColor` props always take precedence.
+     */
+    variant?: CircleVariant;
+    /**
+     * LINE only. When true, renders the current `progress` value as a
+     * percentage label to the right of the bar (12 px gap, Body 2 / Medium).
+     */
+    showLabel?: boolean;
+    /**
+     * LINE only. When true, the fill grows from the right edge — for
+     * Arabic / RTL layouts.
+     */
+    isRTL?: boolean;
+}

package/lib/components/progressBar/ProgressBar.styles.d.ts

@@ -0,0 +1,16 @@
+declare const styles: {
+    lineContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+    lineContainerRTL: {
+        flexDirection: "row-reverse";
+    };
+    circleCenter: {
+        flexDirection: "column";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+};
+export default styles;

package/lib/components/scrollList/CategoryItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CategoryItemProps } from './category.interface';
+/**
+ * A single tab item in the ScrollableList (Category) component.
+ *
+ * Wrapped in React.memo — only re-renders when its own props change,
+ * so tapping a tab does not re-render every sibling item.
+ *
+ */
+declare const CategoryItem: React.MemoExoticComponent<({ item, isActive, onPress, itemStyle, selectedItemStyle, selectedItemTextColor, defaultItemTextColor, errorStyle, inActiveErrorStyle, activeTextStyle, inActiveTextStyle, errorTextStyle, inActiveErrorTextStyle, enableTextWrap, }: CategoryItemProps) => React.JSX.Element>;
+export default CategoryItem;

package/lib/components/scrollList/category.d.ts

@@ -1,63 +1,5 @@
 import React from 'react';
-import { TextStyle } from 'react-native';
-interface ScrollableListProps {
-    data: {
-        name: string;
-        value: string;
-        isError?: boolean;
-        errorText?: string;
-    }[] | undefined;
-    handleSelectCategory: (name: string, value: string) => void;
-    containerStyle?: object;
-    scrollViewContentStyle?: object;
-    itemStyle?: object;
-    selectedItemStyle?: object;
-    selectedItemTextColor?: string;
-    defaultItemTextColor?: string;
-    activeTab?: string;
-    errorStyle?: object;
-    inActiveErrorStyle?: object;
-    activeTextStyle?: TextStyle;
-    enableTextWrap?: boolean;
-    errorTextStyle?: TextStyle;
-    inActiveErrorTextStyle?: TextStyle;
-    inActiveTextStyle?: TextStyle;
-}
-export declare const createStyles: (theme: any) => {
-    container: {
-        paddingVertical: number;
-    };
-    scrollViewContent: {
-        flexDirection: "row";
-        alignItems: "center";
-    };
-    item: {
-        flexDirection: "row";
-        alignItems: "center";
-        gap: number;
-        padding: number;
-        borderBottomWidth: number;
-        borderBottomColor: any;
-        flexShrink: number;
-    };
-    enableTextWrapStyle: {
-        flexShrink: number;
-        flexGrow: number;
-    };
-    selectedItem: {
-        borderBottomWidth: number;
-        borderBottomColor: any;
-    };
-    errorViewStyle: {
-        width: number;
-        height: number;
-        borderRadius: number;
-        backgroundColor: any;
-    };
-    errorTextStyle: {
-        justifyContent: "center";
-        alignSelf: "center";
-    };
-};
+import type { ScrollableListProps } from './category.interface';
+export { createStyles } from './category.styles';
 declare const _default: (props: ScrollableListProps) => React.JSX.Element;
 export default _default;

package/lib/components/scrollList/category.interface.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { TextStyle } from 'react-native';
+export interface CategoryItemData {
+    name: string;
+    value: string;
+    isError?: boolean;
+    errorText?: string;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    showBadgeDot?: boolean;
+    badgeCount?: number;
+}
+export interface CategoryItemProps {
+    item: CategoryItemData;
+    isActive: boolean;
+    onPress: (name: string, value: string) => void;
+    itemStyle?: object;
+    selectedItemStyle?: object;
+    selectedItemTextColor?: string;
+    defaultItemTextColor?: string;
+    errorStyle?: object;
+    inActiveErrorStyle?: object;
+    activeTextStyle?: TextStyle;
+    inActiveTextStyle?: TextStyle;
+    errorTextStyle?: TextStyle;
+    inActiveErrorTextStyle?: TextStyle;
+    enableTextWrap?: boolean;
+}
+export interface ScrollableListProps {
+    data: CategoryItemData[] | undefined;
+    handleSelectCategory: (name: string, value: string) => void;
+    containerStyle?: object;
+    scrollViewContentStyle?: object;
+    itemStyle?: object;
+    selectedItemStyle?: object;
+    selectedItemTextColor?: string;
+    defaultItemTextColor?: string;
+    activeTab?: string;
+    errorStyle?: object;
+    inActiveErrorStyle?: object;
+    activeTextStyle?: TextStyle;
+    enableTextWrap?: boolean;
+    errorTextStyle?: TextStyle;
+    inActiveErrorTextStyle?: TextStyle;
+    inActiveTextStyle?: TextStyle;
+}

package/lib/components/scrollList/category.styles.d.ts

@@ -0,0 +1,67 @@
+export declare const createStyles: (theme: Record<string, string>) => {
+    container: {
+        paddingVertical: number;
+    };
+    scrollViewContent: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    item: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+        padding: number;
+        height: number;
+        borderBottomWidth: number;
+        borderBottomColor: string;
+        flexShrink: number;
+    };
+    selectedItem: {
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    textContainer: {
+        minHeight: number;
+    };
+    enableTextWrapStyle: {
+        flexShrink: number;
+        flexGrow: number;
+    };
+    iconContainer: {
+        width: number;
+        height: number;
+        flexShrink: number;
+        overflow: "hidden";
+    };
+    badgeDot: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        flexShrink: number;
+    };
+    badgeNumber: {
+        minWidth: number;
+        height: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        backgroundColor: string;
+        flexShrink: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    badgeNumberText: {
+        textAlign: "center";
+        alignSelf: "stretch";
+    };
+    errorViewStyle: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+    };
+    errorTextStyle: {
+        justifyContent: "center";
+        alignSelf: "center";
+    };
+};