@herca/rn-kit 0.1.69 → 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/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',