dhre-ui-kit 0.0.91 → 0.0.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.91",
+  "version": "0.0.93",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/components/accordion/Accordion.interface.ts

@@ -12,4 +12,5 @@ export interface AccordionProps {
   onToggle: () => void;
   optionalElement?: () => React.ReactNode; // Update this line
   headerComponent?: () => React.ReactNode;
+  disabled?: boolean;
 }

package/src/components/accordion/Accordion.tsx

@@ -17,6 +17,7 @@ const Accordion = ({
   onToggle,
   optionalElement, // Destructure the new prop,
   headerComponent,
+  disabled = false,
 }: AccordionProps) => {
   const contentRef = useRef<View>(null);
   const [animation] = useState(new Animated.Value(0));
@@ -45,7 +46,9 @@ const Accordion = ({
 
   return (
     <View style={[styles.container, containerStyle]} testID={testId}>
-      <Pressable style={[styles.header, headerStyle]} onPress={onToggle}>
+      <Pressable
+        style={[styles.header, headerStyle, disabled && {opacity: 0.5}]}
+        onPress={!disabled ? onToggle : undefined}>
         {headerComponent ? (
           headerComponent()
         ) : (

package/src/components/progressBar/ProgressBar.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, TextStyle, View} from 'react-native';
 import * as Progress from 'react-native-progress';
 import {ShapeType} from '../../utils/appEnum';
 import CustomText from '../customText';
@@ -20,6 +20,7 @@ interface CustomProgressBarProps {
   increment?: number; // Optional increment value for progress update
   interval?: number; // Optional interval time (ms) for progress update
   percentageText?: string;
+  valueTextStyle?: TextStyle;
 }
 
 const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
@@ -38,6 +39,7 @@ const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
   increment = 1, // Default increment to 1
   interval = 100, // Default interval to 100ms
   percentageText,
+  valueTextStyle,
 }) => {
   useEffect(() => {
     const progressInterval = setInterval(() => {
@@ -58,6 +60,7 @@ const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
           text={`${value}%`}
           variant="B1_REGULAR"
           textColor="CONTENT_PRIMARY"
+          style={valueTextStyle}
         />
         {percentageText ? (
           <CustomText

package/src/components/textInput/Textinput.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, ViewStyle} from 'react-native';
+import {Pressable, StyleSheet, View, ViewStyle} from 'react-native';
 import {TextInput} from 'react-native-paper';
 import {DHRE_COLORS_TEXT, DHRE_DEFAULT} from '../../theme/colors';
 import {verticalScale, moderateScale} from '../../utils/stylehelper';
@@ -22,6 +22,8 @@ interface CommonTextInputProps {
   editable?: boolean;
   textColor?: string;
   labelColor?: string;
+  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;
+  handlePress?: () => void;
 }
 
 const CommonTextInput: React.FC<CommonTextInputProps> = ({
@@ -39,46 +41,62 @@ const CommonTextInput: React.FC<CommonTextInputProps> = ({
   editable = true,
   textColor = theme.CONTENT_PRIMARY['light'],
   labelColor,
+  handlePress,
+  pointerEvents,
 }) => {
   return (
-    <>
-      <TextInput
-        mode="outlined"
-        outlineStyle={{
-          ...styles.outlineStyle,
-          borderColor: value?.length ? activeBorderColor : inactiveBorderColor,
-        }}
-        label={label}
-        value={value}
-        onChangeText={onChangeText}
-        secureTextEntry={isSecureTextEntry}
-        keyboardType={keyboardType}
-        theme={{
-          colors: {
-            primary: labelColor ? labelColor : DHRE_COLORS_TEXT.DH_BLACK,
-          },
-        }}
-        style={[errorMessage ? styles.errorInput : styles.input, inputStyle]}
-        maxLength={maxLength}
-        textColor={textColor}
-        placeholder={placeholderText}
-        editable={editable}
-      />
-      {errorMessage ? (
-        <CustomTypography
-          variant={'L2_REGULAR'}
-          text={errorMessage ?? ''}
-          style={{
-            ...styles.errorStyle,
-            color: DHRE_DEFAULT.DH_SEMENTIC_ERROR,
+    <View style={styles.container}>
+      <Pressable onPress={handlePress} style={styles.touchable}>
+        <TextInput
+          mode="outlined"
+          outlineStyle={{
+            ...styles.outlineStyle,
+            borderColor: value?.length
+              ? activeBorderColor
+              : inactiveBorderColor,
           }}
+          label={label}
+          value={value}
+          onChangeText={onChangeText}
+          secureTextEntry={isSecureTextEntry}
+          keyboardType={keyboardType}
+          theme={{
+            colors: {
+              primary: labelColor ? labelColor : DHRE_COLORS_TEXT.DH_BLACK,
+            },
+          }}
+          style={[errorMessage ? styles.errorInput : styles.input, inputStyle]}
+          maxLength={maxLength}
+          textColor={textColor}
+          placeholder={placeholderText}
+          editable={editable}
+          pointerEvents={pointerEvents}
         />
-      ) : null}
-    </>
+        {errorMessage ? (
+          <CustomTypography
+            variant={'L2_REGULAR'}
+            text={errorMessage ?? ''}
+            style={{
+              ...styles.errorStyle,
+              color: DHRE_DEFAULT.DH_SEMENTIC_ERROR,
+            }}
+          />
+        ) : null}
+      </Pressable>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  touchable: {
+    width: '100%', // Adjust width as needed
+  },
+
   input: {
     marginVertical: verticalScale(8),
     backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,

package/src/components/topic/Topic.tsx

@@ -77,7 +77,7 @@ const styles = StyleSheet.create({
   },
   rightIconContainer: {
     position: 'absolute',
-    left: 10,
+    left: 16,
     top: 10,
   },
 });

package/src/theme/themes.ts

@@ -10,7 +10,7 @@ const theme = {
     dark: '#212121',
   },
   [Theme.SURFACE_TERTIARY]: {
-    light: '#E1E1E1',
+    light: '#0000001A',
     dark: '#373737',
   },
   [Theme.SURFACE_STATIC]: {
@@ -22,8 +22,8 @@ const theme = {
     dark: '#D92D27',
   },
   [Theme.SURFACE_BRAND_TRANSPARENT_STATIC]: {
-    light: '#D92D3E33',
-    dark: '#D92D3E33',
+    light: '#D92D3E',
+    dark: '#D92D3E',
   },
   [Theme.SURFACE_DISABLE]: {
     light: '#E1E1E1',
@@ -34,12 +34,12 @@ const theme = {
     dark: '#FFFFFF',
   },
   [Theme.SURFACE_INVERTED_TRANSPARENT]: {
-    light: '#68686833',
-    dark: '#FFFFFF33',
+    light: '#686868',
+    dark: '#FFFFFF',
   },
   [Theme.SURFACE_DROP_SHADOW]: {
     light: '#CECECE',
-    dark: '#000000',
+    dark: '#373737',
   },
   [Theme.SURFACE_BLUR]: {
     light: '#000000B2',
@@ -67,7 +67,7 @@ const theme = {
     dark: '#FFFFFF',
   },
   [Theme.CONTENT_PRIMARY_STATIC]: {
-    light: '#686868',
+    light: '#0000001A',
     dark: '#686868',
   },
   [Theme.CONTENT_SECONDRY_STATIC]: {
@@ -108,8 +108,8 @@ const theme = {
     dark: '#404040',
   },
   [Theme.BORDER_SEPRATOR]: {
-    light: '#F5F5F5',
-    dark: '#282828',
+    light: '#282828',
+    dark: '#FFFFFF',
   },
   [Theme.BORDER_SEPERATOR_HEADER]: {
     light: '#E1E1E1',