@herca/rn-kit 0.1.19 → 0.1.21

package/src/Icon/icons/FolderClock.tsx

@@ -9,14 +9,14 @@ interface Props {
 
 const FolderClock: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
   <Svg
-    width={size}
-    height={size - 2}
-    viewBox="0 0 19 16"
+    width={size + 1}
+    height={size}
+    viewBox="0 0 25 24"
     fill="none"
     style={style}
   >
     <Path
-      d="M10.791 10.084C10.986 10.279 10.986 10.596 10.791 10.791C10.693 10.889 10.565 10.937 10.437 10.937C10.309 10.937 10.181 10.888 10.083 10.791L9.14502 9.854C9.05102 9.76 8.99902 9.633 8.99902 9.5V8.18799C8.99902 7.91199 9.22302 7.68799 9.49902 7.68799C9.77502 7.68799 9.99902 7.91199 9.99902 8.18799V9.293L10.791 10.084ZM18.5 6V13C18.5 15 17.5 16 15.5 16H3.5C1.5 16 0.5 15 0.5 13V3C0.5 1 1.5 0 3.5 0H7.5L10.5 3H15.5C17.5 3 18.5 4 18.5 6ZM13 9.5C13 7.567 11.433 6 9.5 6C7.567 6 6 7.567 6 9.5C6 11.433 7.567 13 9.5 13C11.433 13 13 11.433 13 9.5Z"
+      d="M13.791 14.084C13.986 14.279 13.986 14.596 13.791 14.791C13.693 14.889 13.565 14.937 13.437 14.937C13.309 14.937 13.181 14.888 13.083 14.791L12.145 13.854C12.051 13.76 11.999 13.633 11.999 13.5V12.188C11.999 11.912 12.223 11.688 12.499 11.688C12.775 11.688 12.999 11.912 12.999 12.188V13.293L13.791 14.084ZM21.5 10V17C21.5 19 20.5 20 18.5 20H6.5C4.5 20 3.5 19 3.5 17V7C3.5 5 4.5 4 6.5 4H10.5L13.5 7H18.5C20.5 7 21.5 8 21.5 10ZM16 13.5C16 11.567 14.433 10 12.5 10C10.567 10 9 11.567 9 13.5C9 15.433 10.567 17 12.5 17C14.433 17 16 15.433 16 13.5Z"
       fill={color}
     />
   </Svg>

package/src/Icon/icons/PlusSquare.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const PlusSquare: React.FC<Props> = ({
+  size = 24,
+  color = '#909090',
+  style,
+}) => (
+  <Svg
+    width={size + 1}
+    height={size}
+    viewBox="0 0 41 40"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M29.8667 5H11.1333C7.38334 5 5.5 6.86666 5.5 10.6167V29.3667C5.5 33.1167 7.38334 35 11.1333 35H29.8667C33.6333 35 35.5 33.1167 35.5 29.3667V10.6167C35.5 6.86666 33.6333 5 29.8667 5ZM26.3333 21.25H21.75V25.8333C21.75 26.5167 21.1833 27.0833 20.5 27.0833C19.8167 27.0833 19.25 26.5167 19.25 25.8333V21.25H14.6667C13.9833 21.25 13.4167 20.6833 13.4167 20C13.4167 19.3167 13.9833 18.75 14.6667 18.75H19.25V14.1667C19.25 13.4833 19.8167 12.9167 20.5 12.9167C21.1833 12.9167 21.75 13.4833 21.75 14.1667V18.75H26.3333C27.0167 18.75 27.5833 19.3167 27.5833 20C27.5833 20.6833 27.0167 21.25 26.3333 21.25Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default PlusSquare;

package/src/Icon/icons/Scanner.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Scanner: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg
+    width={size + 1}
+    height={size}
+    viewBox="0 0 25 24"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M2.625 8V4.5C2.625 3.091 3.466 2.25 4.875 2.25H8.375C8.789 2.25 9.125 2.586 9.125 3C9.125 3.414 8.789 3.75 8.375 3.75H4.875C4.286 3.75 4.125 3.911 4.125 4.5V8C4.125 8.414 3.789 8.75 3.375 8.75C2.961 8.75 2.625 8.414 2.625 8ZM8.375 20.25H4.875C4.286 20.25 4.125 20.089 4.125 19.5V16C4.125 15.586 3.789 15.25 3.375 15.25C2.961 15.25 2.625 15.586 2.625 16V19.5C2.625 20.909 3.466 21.75 4.875 21.75H8.375C8.789 21.75 9.125 21.414 9.125 21C9.125 20.586 8.789 20.25 8.375 20.25ZM21.375 15.25C20.961 15.25 20.625 15.586 20.625 16V19.5C20.625 20.089 20.464 20.25 19.875 20.25H16.375C15.961 20.25 15.625 20.586 15.625 21C15.625 21.414 15.961 21.75 16.375 21.75H19.875C21.284 21.75 22.125 20.909 22.125 19.5V16C22.125 15.586 21.789 15.25 21.375 15.25ZM19.875 2.25H16.375C15.961 2.25 15.625 2.586 15.625 3C15.625 3.414 15.961 3.75 16.375 3.75H19.875C20.464 3.75 20.625 3.911 20.625 4.5V8C20.625 8.414 20.961 8.75 21.375 8.75C21.789 8.75 22.125 8.414 22.125 8V4.5C22.125 3.091 21.284 2.25 19.875 2.25ZM17.875 15.12V12.75H19.375C19.789 12.75 20.125 12.414 20.125 12C20.125 11.586 19.789 11.25 19.375 11.25H5.375C4.961 11.25 4.625 11.586 4.625 12C4.625 12.414 4.961 12.75 5.375 12.75H6.875V15.12C6.875 16.65 7.715 17.5 9.255 17.5H15.495C17.035 17.5 17.875 16.65 17.875 15.12ZM6.625 8.88V9C6.625 9.414 6.961 9.75 7.375 9.75C7.789 9.75 8.125 9.414 8.125 9V8.88C8.125 8.035 8.41 7.75 9.255 7.75H15.495C16.34 7.75 16.625 8.035 16.625 8.88V9C16.625 9.414 16.961 9.75 17.375 9.75C17.789 9.75 18.125 9.414 18.125 9V8.88C18.125 7.209 17.166 6.25 15.495 6.25H9.255C7.584 6.25 6.625 7.208 6.625 8.88Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Scanner;

package/src/Icon/type.tsx

@@ -40,7 +40,14 @@ export type IconNameProps =
   | 'user-circle-fill'
   | 'clipboard-list-check'
   | 'clipboard-list'
-  | 'Megaphone';
+  | 'Megaphone'
+  | 'Scanner'
+  | 'Clock'
+  | 'clock-outline'
+  | 'clipboard-list-check-outline'
+  | 'box-outline'
+  | 'Box'
+  | 'plus-square';
 
 export interface IconProps {
   name: IconNameProps;

package/src/Input/Input.tsx

@@ -1,5 +1,11 @@
 import React, { useState } from 'react';
-import { TextInput, View, StyleSheet, TouchableOpacity } from 'react-native';
+import {
+  TextInput,
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+} from 'react-native';
 import { Icon } from '../Icon';
 import Color from '../Color/Color';
 import LabelForm from '../LabelForm/LabelForm';
@@ -114,6 +120,7 @@ const styles = StyleSheet.create({
   input: {
     height: 37,
     paddingHorizontal: 12,
+    marginTop: Platform.select({ ios: 0, android: 5 }),
     fontSize: 16,
     color: '#333',
   },

package/src/Ui/Card.tsx

@@ -27,7 +27,7 @@ export default function Card({
     return (
       <ImageBackground
         source={backgroundImage}
-        style={[styles.imageBackground, style]}
+        style={[styles.imageBackground, style, { borderColor: borderColor }]}
         imageStyle={styles.imageStyle}
       >
         {children}
@@ -67,7 +67,4 @@ const styles = StyleSheet.create({
   imageStyle: {
     borderRadius: 8,
   },
-  inner: {
-    padding: 10, // tetap kasih padding isi
-  },
 });

package/src/helpers/hexToRgba.ts

@@ -0,0 +1,35 @@
+/**
+ * Convert HEX color to RGBA string with given alpha.
+ * Supports #RGB and #RRGGBB format.
+ *
+ * @param hex - HEX color string (e.g. "#000" or "#336699")
+ * @param alpha - Opacity value (0 to 1)
+ * @returns rgba string (e.g. "rgba(51, 102, 153, 0.5)")
+ */
+export const hexToRGBA = (hex: string, alpha: number = 1): string => {
+  let r = 0,
+    g = 0,
+    b = 0;
+
+  if (!/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+    console.warn(`Invalid HEX color: ${hex}`);
+    return `rgba(0, 0, 0, ${alpha})`;
+  }
+
+  if (hex.length === 4) {
+    // Format: #RGB → expand ke #RRGGBB
+    const rHex = hex[1] ?? '0';
+    const gHex = hex[2] ?? '0';
+    const bHex = hex[3] ?? '0';
+    r = parseInt(rHex + rHex, 16);
+    g = parseInt(gHex + gHex, 16);
+    b = parseInt(bHex + bHex, 16);
+  } else if (hex.length === 7) {
+    // Format: #RRGGBB
+    r = parseInt(hex.slice(1, 3), 16);
+    g = parseInt(hex.slice(3, 5), 16);
+    b = parseInt(hex.slice(5, 7), 16);
+  }
+
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};