@herca/rn-kit 0.1.69 → 0.1.71

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/Spinner/Spinner.tsx

@@ -0,0 +1,67 @@
+import { useRef, useEffect } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+import Svg, { Defs, LinearGradient, Stop, Circle } from 'react-native-svg';
+
+export default function Spinner({ size = 48, color = '#FFFFFF' }) {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const spin = Animated.loop(
+      Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 1200,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    );
+    spin.start();
+    return () => spin.stop();
+  }, [rotateAnim]);
+
+  const rotateInterpolate = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  const strokeWidth = size * 0.1;
+  const radius = size / 2 - strokeWidth;
+
+  const darkerColor = '#999';
+
+  return (
+    <View style={[styles.container, { width: size, height: size }]}>
+      <Animated.View
+        style={{
+          transform: [{ rotate: rotateInterpolate }],
+        }}
+      >
+        <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          <Defs>
+            <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
+              <Stop offset="0%" stopColor={color} />
+              <Stop offset="100%" stopColor={darkerColor} />
+            </LinearGradient>
+          </Defs>
+
+          {/* Lingkaran penuh */}
+          <Circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke="url(#grad)"
+            strokeWidth={strokeWidth}
+            fill="none"
+            strokeLinecap="round"
+          />
+        </Svg>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    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',