@herca/rn-kit 0.1.68 → 0.1.70

package/src/Input/partials/InputFile/ModalDelete.tsx

@@ -0,0 +1,84 @@
+import { StyleSheet, View } from 'react-native';
+import BottomSheet from '../../../BottomSheet/BottomSheet';
+import Center from '../../../Ui/Center';
+import Typography from '../../../Typography/Typography';
+import Color from '../../../Color/Color';
+import Button from '../../../Button/Button';
+
+interface Props extends React.ComponentProps<typeof BottomSheet> {
+  title: string;
+  descripition: string;
+  confirm: string;
+  onConfirm: () => void;
+  cancel: string;
+  onCnacel: () => void;
+}
+
+export default function ModalDelete({
+  title,
+  descripition,
+  confirm,
+  cancel,
+  onCnacel,
+  onConfirm,
+  ...props
+}: Props) {
+  return (
+    <BottomSheet {...props}>
+      <View style={styles.deleteFileContent}>
+        <Center style={styles.deleteFileCenter}>
+          <Typography
+            variant="p2"
+            weight="semibold"
+            color={Color.gray[800]}
+            center
+          >
+            {title}
+          </Typography>
+          <Typography
+            variant="t1"
+            weight="regular"
+            color={Color.gray[500]}
+            center
+          >
+            {descripition}
+          </Typography>
+        </Center>
+        <View>
+          <Button color="danger" title={confirm} onPress={onConfirm} />
+          <Button
+            color="primary"
+            variant="tertiary"
+            title={cancel}
+            onPress={onCnacel}
+          />
+        </View>
+      </View>
+    </BottomSheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    gap: 12,
+  },
+  containerInput: {
+    borderStyle: 'dashed',
+    backgroundColor: Color.gray[50],
+    borderRadius: 16,
+  },
+  centerInput: {
+    gap: 14,
+  },
+  deleteFileContent: {
+    gap: 10,
+  },
+  deleteFileCenter: {
+    alignItems: 'center',
+    gap: 4,
+  },
+
+  previewWrapper: {
+    gap: 12,
+  },
+});

package/src/Input/partials/InputFile/ModalPicker.tsx

@@ -0,0 +1,86 @@
+import { StyleSheet, View } from 'react-native';
+import BottomSheet from '../../../BottomSheet/BottomSheet';
+import Center from '../../../Ui/Center';
+import Typography from '../../../Typography/Typography';
+import List from '../../../List/List';
+import ListItem from '../../../List/ListItem';
+import ItemPicker from './ItemPicker';
+import Color from '../../../Color/Color';
+import type { IconNameProps } from '../../../Icon';
+
+interface FilePicker {
+  title: string;
+  description: string;
+  onPress: () => void;
+  icon: IconNameProps;
+}
+
+interface Props extends React.ComponentProps<typeof BottomSheet> {
+  title: string;
+  description: string;
+  camera: FilePicker;
+  gallery: FilePicker;
+  document: FilePicker;
+}
+
+export default function ModalPicker({
+  title,
+  description,
+  camera,
+  gallery,
+  document,
+  ...props
+}: Props) {
+  return (
+    <BottomSheet {...props}>
+      <View style={styles.bottomSheetContent}>
+        <Center style={styles.bottomSheetCenter}>
+          <Typography variant="p2" weight="semibold" color={Color.gray[800]}>
+            {title}
+          </Typography>
+          <Typography variant="t1" weight="regular" color={Color.gray[600]}>
+            {description}
+          </Typography>
+        </Center>
+
+        <List>
+          <ListItem>
+            <ItemPicker
+              title={camera?.title}
+              icon={camera?.icon}
+              onPress={camera?.onPress}
+              description={camera?.description}
+            />
+          </ListItem>
+
+          <ListItem>
+            <ItemPicker
+              title={gallery?.title}
+              icon={gallery?.icon}
+              onPress={gallery?.onPress}
+              description={gallery?.description}
+            />
+          </ListItem>
+
+          <ListItem>
+            <ItemPicker
+              title={document?.title}
+              icon={document?.icon}
+              onPress={document?.onPress}
+              description={document?.description}
+            />
+          </ListItem>
+        </List>
+      </View>
+    </BottomSheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  bottomSheetContent: {
+    gap: 16,
+  },
+  bottomSheetCenter: {
+    alignItems: 'center',
+  },
+});

package/src/LabelForm/LabelForm.tsx

@@ -5,12 +5,17 @@ import Color from '../Color/Color';
 interface Props {
   title: string;
   required?: boolean;
+  color?: string;
 }
 
-export default function LabelForm({ title, required }: Props) {
+export default function LabelForm({
+  title,
+  required,
+  color = Color.gray[900],
+}: Props) {
   return (
     <View>
-      <Typography variant="t2" weight="semibold">
+      <Typography variant="t2" weight="semibold" color={color}>
         {title}{' '}
         {required && (
           <Typography variant="t2" weight="semibold" color={Color.danger[500]}>

package/src/Step/Step.tsx

@@ -75,7 +75,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
     width: screenWidth,
     backgroundColor: Color.info[50],
-    paddingVertical: 16,
+    paddingVertical: 8,
   },
   contentContainer: {
     flex: 1,

package/src/Step/StepItem.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 import Color from '../Color/Color';
 import type { StepItemProps } from './type';
+import Icon from '../Icon';
 
 const StepItem = ({
   index = 0,
@@ -28,9 +29,17 @@ const StepItem = ({
             isActive && styles.active,
           ]}
         >
-          <Text style={styles.circleText}>{index + 1}</Text>
+          {!isCompleted && <Text style={styles.circleText}>{index + 1}</Text>}
+          {isCompleted && <Icon name="Check" size={20} color="white" />}
         </View>
-        {!isLast && <View style={styles.line} />}
+        {!isLast && (
+          <View
+            style={[
+              styles.line,
+              isCompleted ? styles.completedLine : undefined,
+            ]}
+          />
+        )}
       </View>
     );
   }
@@ -70,7 +79,7 @@ const styles = StyleSheet.create({
     backgroundColor: Color.info[500],
   },
   completed: {
-    backgroundColor: Color.info[500],
+    backgroundColor: Color.success[500],
   },
   line: {
     width: 40,
@@ -82,5 +91,8 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   listContent: {},
+  completedLine: {
+    backgroundColor: Color.success[500],
+  },
 });
 export default StepItem;

package/src/Ui/Center.tsx

@@ -1,9 +1,9 @@
-import { View, StyleSheet, type ViewStyle } from 'react-native';
+import { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';
 
 interface CenterProps {
   children: React.ReactNode;
   size?: number;
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
 }
 
 const Center = ({ children, style }: CenterProps) => {

package/src/styles/layouting.ts

@@ -6,6 +6,7 @@ export const layouting = {
     grow: { flexGrow: 1 },
     shrink: { flexShrink: 1 },
     row: { flexDirection: 'row' },
+    col: { flexDirection: 'column' },
     rowCenter: {
       flexDirection: 'row',
       alignItems: 'center',