@herca/rn-kit 0.1.0

package/src/Icon/icons/ArrowRight.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ArrowRight: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 6 10" fill="none" style={style}>
+    <Path
+      d="M1.00004 10.0003C0.744037 10.0003 0.488006 9.90231 0.293006 9.70731C-0.0979941 9.31631 -0.0979941 8.68425 0.293006 8.29325L3.58597 5.00028L0.293006 1.70731C-0.0979941 1.31631 -0.0979941 0.68425 0.293006 0.29325C0.684006 -0.09775 1.31607 -0.09775 1.70707 0.29325L5.70707 4.29325C6.09807 4.68425 6.09807 5.31631 5.70707 5.70731L1.70707 9.70731C1.51207 9.90231 1.25604 10.0003 1.00004 10.0003Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ArrowRight;

package/src/Icon/icons/ArrowUp.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ArrowUp: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 10 6" fill="none" style={style}>
+    <Path
+      d="M8.33227 5.49999C8.11893 5.49999 7.90557 5.41835 7.74307 5.25585L4.99893 2.51171L2.25479 5.25585C1.92896 5.58168 1.40224 5.58168 1.07641 5.25585C0.750573 4.93002 0.750573 4.4033 1.07641 4.07746L4.40974 0.744131C4.73557 0.418298 5.26229 0.418298 5.58812 0.744131L8.92146 4.07746C9.24729 4.4033 9.24729 4.93002 8.92146 5.25585C8.75896 5.41835 8.5456 5.49999 8.33227 5.49999Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ArrowUp;

package/src/Icon/icons/Calendar.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Calendar: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 12 13" fill="none" style={style}>
+    <Path
+      d="M11.8 5.5H0.200033C0.0893659 5.5 0 5.58937 0 5.70003V11C0 12.3333 0.666667 13 2 13H10C11.3333 13 12 12.3333 12 11V5.70003C12 5.58937 11.9106 5.5 11.8 5.5ZM3.34668 11C2.97868 11 2.67659 10.7013 2.67659 10.3333C2.67659 9.96533 2.97201 9.66667 3.34001 9.66667H3.34668C3.71535 9.66667 4.01335 9.96533 4.01335 10.3333C4.01335 10.7013 3.71468 11 3.34668 11ZM3.34668 8.33333C2.97868 8.33333 2.67659 8.03467 2.67659 7.66667C2.67659 7.29867 2.97201 7 3.34001 7H3.34668C3.71535 7 4.01335 7.29867 4.01335 7.66667C4.01335 8.03467 3.71468 8.33333 3.34668 8.33333ZM6.01335 11C5.64535 11 5.34326 10.7013 5.34326 10.3333C5.34326 9.96533 5.63867 9.66667 6.00667 9.66667H6.01335C6.38201 9.66667 6.68001 9.96533 6.68001 10.3333C6.68001 10.7013 6.38135 11 6.01335 11ZM6.01335 8.33333C5.64535 8.33333 5.34326 8.03467 5.34326 7.66667C5.34326 7.29867 5.63867 7 6.00667 7H6.01335C6.38201 7 6.68001 7.29867 6.68001 7.66667C6.68001 8.03467 6.38135 8.33333 6.01335 8.33333ZM8.68001 11C8.31201 11 8.00993 10.7013 8.00993 10.3333C8.00993 9.96533 8.30534 9.66667 8.67334 9.66667H8.68001C9.04868 9.66667 9.34668 9.96533 9.34668 10.3333C9.34668 10.7013 9.04801 11 8.68001 11ZM8.68001 8.33333C8.31201 8.33333 8.00993 8.03467 8.00993 7.66667C8.00993 7.29867 8.30534 7 8.67334 7H8.68001C9.04868 7 9.34668 7.29867 9.34668 7.66667C9.34668 8.03467 9.04801 8.33333 8.68001 8.33333ZM12 4V4.29997C12 4.41063 11.9106 4.5 11.8 4.5H0.200033C0.0893659 4.5 0 4.41063 0 4.29997V4C0 2.66667 0.666667 2 2 2H2.83333V1C2.83333 0.726667 3.06 0.5 3.33333 0.5C3.60667 0.5 3.83333 0.726667 3.83333 1V2H8.16667V1C8.16667 0.726667 8.39333 0.5 8.66667 0.5C8.94 0.5 9.16667 0.726667 9.16667 1V2H10C11.3333 2 12 2.66667 12 4Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Calendar;

package/src/Icon/icons/Camera.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Camera: React.FC<Props> = ({ size = 24, color = '#909090', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none" style={style}>
+    <Path
+      d="M15 3.5H13L12.342 1.52588C12.138 0.912879 11.5649 0.5 10.9189 0.5H7.08105C6.43505 0.5 5.86196 0.912879 5.65796 1.52588L5 3.5H3C1 3.5 0 4.5 0 6.5V14.5C0 16.5 1 17.5 3 17.5H15C17 17.5 18 16.5 18 14.5V6.5C18 4.5 17 3.5 15 3.5ZM9 13.5C7.343 13.5 6 12.157 6 10.5C6 8.843 7.343 7.5 9 7.5C10.657 7.5 12 8.843 12 10.5C12 12.157 10.657 13.5 9 13.5ZM14.5 8C13.948 8 13.5 7.552 13.5 7C13.5 6.448 13.948 6 14.5 6C15.052 6 15.5 6.448 15.5 7C15.5 7.552 15.052 8 14.5 8Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Camera;

package/src/Icon/icons/Check.tsx

@@ -0,0 +1,15 @@
+import Svg, { Path } from 'react-native-svg';
+
+const Check = ({ size = 16, color = 'black' }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M5 13l4 4L19 7"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default Check;

package/src/Icon/icons/Document.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Document: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 15 19" fill="none" style={style}>
+    <Path
+      d="M9.75 3.5V1.25L14.25 5.75H12C10.42 5.75 9.75 5.08 9.75 3.5ZM12 7.25C9.58 7.25 8.25 5.92 8.25 3.5V0.5H3C1 0.5 0 1.5 0 3.5V15.5C0 17.5 1 18.5 3 18.5H12C14 18.5 15 17.5 15 15.5V7.25H12Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Document;

package/src/Icon/icons/Download.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Downnload: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 13 16" fill="none" style={style}>
+    <Path
+      d="M8.2915 3V1.125L12.0415 4.875H10.1665C8.84984 4.875 8.2915 4.31667 8.2915 3ZM12.6665 6.125V13C12.6665 14.6667 11.8332 15.5 10.1665 15.5H2.6665C0.999837 15.5 0.166504 14.6667 0.166504 13V3C0.166504 1.33333 0.999837 0.5 2.6665 0.5H7.0415V3C7.0415 5.01667 8.14984 6.125 10.1665 6.125H12.6665ZM7.27486 10.0583C7.03069 9.81417 6.63483 9.81417 6.39067 10.0583L5.79069 10.6583V8C5.79069 7.655 5.51069 7.375 5.16569 7.375C4.82069 7.375 4.54069 7.655 4.54069 8V10.6575L3.94071 10.0575C3.69655 9.81333 3.30069 9.81333 3.05652 10.0575C2.81235 10.3017 2.81235 10.6975 3.05652 10.9417L4.72319 12.6083C4.78068 12.6658 4.84977 12.7117 4.92643 12.7433C5.0031 12.775 5.08402 12.7917 5.16569 12.7917C5.24736 12.7917 5.32808 12.775 5.40474 12.7433C5.48141 12.7117 5.55069 12.6658 5.60819 12.6083L7.27486 10.9417C7.51903 10.6983 7.51903 10.3017 7.27486 10.0583Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Downnload;

package/src/Icon/icons/ExlmationMark.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ExlamationMark: React.FC<Props> = ({
+  size = 24,
+  color = '#909090',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" style={style}>
+    <Path
+      d="M10.0005 20C15.5235 20 20.0005 15.523 20.0005 10C20.0005 4.477 15.5235 0 10.0005 0C4.47749 0 0.000488281 4.477 0.000488281 10C0.000488281 15.523 4.47749 20 10.0005 20ZM9.25049 5.5C9.25049 5.086 9.58649 4.75 10.0005 4.75C10.4145 4.75 10.7505 5.086 10.7505 5.5V10.071C10.7505 10.485 10.4145 10.821 10.0005 10.821C9.58649 10.821 9.25049 10.485 9.25049 10.071V5.5ZM9.98047 12.5C10.5325 12.5 10.9856 12.948 10.9856 13.5C10.9856 14.052 10.5425 14.5 9.99048 14.5H9.98047C9.42747 14.5 8.98047 14.052 8.98047 13.5C8.98047 12.948 9.42847 12.5 9.98047 12.5Z"
+      fill={`${color}`}
+    />
+  </Svg>
+);
+
+export default ExlamationMark;

package/src/Icon/icons/Eye.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Eye: React.FC<Props> = ({ size = 24, color = '#909090', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 16 12" fill="none" style={style}>
+    <Path
+      d="M10.2917 6.00008C10.2917 7.26425 9.2642 8.29175 8.00003 8.29175C6.73587 8.29175 5.70837 7.26425 5.70837 6.00008C5.70837 5.70925 5.7683 5.43338 5.86747 5.17672C6.02913 5.30505 6.22419 5.39339 6.44669 5.39339C6.96919 5.39339 7.39334 4.96924 7.39334 4.44674C7.39334 4.22424 7.305 4.02918 7.17667 3.86751C7.43334 3.76835 7.7092 3.70841 8.00003 3.70841C9.2642 3.70841 10.2917 4.73591 10.2917 6.00008ZM15.1601 7.23096C14.1376 8.94262 11.8409 11.8334 8.00003 11.8334C4.1592 11.8334 1.8625 8.94262 0.84 7.23096C0.386667 6.47262 0.386667 5.52754 0.84 4.76921C1.8625 3.05754 4.1592 0.166748 8.00003 0.166748C11.8409 0.166748 14.1376 3.05754 15.1601 4.76921C15.6134 5.52754 15.6134 6.47262 15.1601 7.23096ZM11.5417 6.00008C11.5417 4.04758 9.95337 2.45841 8.00003 2.45841C6.0467 2.45841 4.45837 4.04758 4.45837 6.00008C4.45837 7.95258 6.0467 9.54175 8.00003 9.54175C9.95337 9.54175 11.5417 7.95258 11.5417 6.00008Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Eye;

package/src/Icon/icons/EyeOpen.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const EyeOpen: React.FC<Props> = ({ size = 24, color = '#909090', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none" style={style}>
+    <Path
+      d="M16.1585 7.76682C16.6168 8.52516 16.6168 9.47513 16.1585 10.2335C15.1335 11.9418 12.8417 14.8335 9.00006 14.8335C8.37673 14.8335 7.7901 14.7543 7.2451 14.6168C7.05926 14.5701 7.00082 14.3319 7.13666 14.1969L8.71665 12.6169C8.81332 12.5202 8.93339 12.5418 9.00006 12.5418C10.9534 12.5418 12.5417 10.9526 12.5417 9.00014C12.5417 8.93348 12.5318 8.80177 12.6009 8.7326L14.8859 6.44765C14.9917 6.34182 15.17 6.35273 15.2625 6.47023C15.6291 6.93357 15.9276 7.37766 16.1585 7.76682ZM16.9418 1.94183L1.94175 16.9418C1.82008 17.0635 1.66006 17.1251 1.50006 17.1251C1.34006 17.1251 1.18004 17.0643 1.05837 16.9418C0.814202 16.6977 0.814202 16.3018 1.05837 16.0576L4.14593 12.9701C3.0876 12.0692 2.31999 11.0301 1.84165 10.2326C1.38332 9.47431 1.38332 8.52434 1.84165 7.76601C2.86665 6.05768 5.15839 3.16599 9.00006 3.16599C10.5201 3.16599 11.7893 3.62175 12.8443 4.27175L16.0584 1.05764C16.3025 0.81347 16.6984 0.81347 16.9426 1.05764C17.1867 1.3018 17.1859 1.69767 16.9418 1.94183ZM6.10008 11.0159L7.00747 10.1085C6.82247 9.77937 6.70839 9.40514 6.70839 9.00014C6.70839 8.70848 6.76668 8.43348 6.86668 8.17515C7.02501 8.30848 7.22497 8.39182 7.44997 8.39182C7.96664 8.39182 8.39174 7.96672 8.39174 7.45005C8.39174 7.22505 8.3084 7.02509 8.17507 6.86676C8.4334 6.76676 8.70839 6.70847 9.00006 6.70847C9.40506 6.70847 9.78013 6.82255 10.1085 7.00755L11.0158 6.10016C10.4425 5.69849 9.74923 5.45847 9.00006 5.45847C7.05006 5.45847 5.45839 7.05014 5.45839 9.00014C5.45839 9.75014 5.69841 10.4426 6.10008 11.0159Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default EyeOpen;

package/src/Icon/icons/Filter.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Filter: React.FC<Props> = ({ size = 24, color = '#909090', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 14 16" fill="none" style={style}>
+    <Path
+      d="M1.58431 0.5H12.4176C13.1076 0.5 13.6676 1.06 13.6676 1.75V3.63082C13.6676 3.96249 13.536 4.27999 13.3018 4.51499L9.03426 8.7825C8.8001 9.01666 8.66846 9.335 8.66846 9.66667V15.5L5.33513 13V9.66667C5.33513 9.335 5.20349 9.0175 4.96932 8.7825L0.701847 4.51499C0.46768 4.28083 0.335941 3.96249 0.335941 3.63082V1.75C0.334275 1.06 0.894314 0.5 1.58431 0.5Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Filter;

package/src/Icon/icons/Home.tsx

@@ -0,0 +1,5 @@
+import { View } from 'react-native';
+
+export default function Home() {
+  return <View></View>;
+}

package/src/Icon/icons/Image.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Image: React.FC<Props> = ({ size = 24, color = '#909090', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 20 19" fill="none" style={style}>
+    <Path
+      d="M16 0.75H4C1.582 0.75 0.25 2.082 0.25 4.5V14.5C0.25 16.918 1.582 18.25 4 18.25H16C18.418 18.25 19.75 16.918 19.75 14.5V4.5C19.75 2.082 18.418 0.75 16 0.75ZM4 2.25H16C17.577 2.25 18.25 2.923 18.25 4.5V11.75L13.71 7.20996C13.32 6.81996 12.68 6.81996 12.29 7.20996L7.34998 12.1499C7.15998 12.3399 6.84002 12.3399 6.65002 12.1499L5.70996 11.21C5.31996 10.82 4.68004 10.82 4.29004 11.21L1.75 13.75V4.5C1.75 2.923 2.423 2.25 4 2.25ZM4.75 6.5C4.75 5.81 5.30404 5.25 5.99304 5.25H6.00305C6.69205 5.25 7.25098 5.81 7.25098 6.5C7.25098 7.19 6.69305 7.75 6.00305 7.75C5.31405 7.75 4.75 7.19 4.75 6.5Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Image;

package/src/Icon/icons/Pdf.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Pdf: React.FC<Props> = ({ size = 24, color = '#909090', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 28 36" fill="none" style={style}>
+    <Path
+      d="M0.59375 6.82812C0.59375 3.12609 3.59484 0.125 7.29688 0.125H17.2468L27.4038 10.6875V29.1719C27.4038 32.8739 24.4027 35.875 20.7007 35.875H7.29688C3.59485 35.875 0.59375 32.8739 0.59375 29.1719V6.82812Z"
+      fill={`${color}`}
+    />
+  </Svg>
+);
+
+export default Pdf;

package/src/Icon/icons/RadioButton.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Circle, Path } from 'react-native-svg';
+import Color from '../../Color/Color';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const RadioButton: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" style={style}>
+    <Path
+      d="M18 3.37V9.84998C18 10.07 17.9799 10.29 17.9299 10.5H13.8799C12.0099 10.5 10.5 12.01 10.5 13.88V17.9301C10.29 17.9801 10.0701 18 9.8501 18H3.37988C1.11988 18 0 16.87 0 14.62V3.37C0 1.12 1.11988 0 3.37988 0H14.6201C16.8801 0 18 1.12 18 3.37ZM12 13.88V17.22C12.09 17.16 12.16 17.09 12.24 17.01L17.01 12.24C17.09 12.16 17.16 12.09 17.22 12H13.8799C12.8399 12 12 12.84 12 13.88Z"
+      fill={Color.base.white100}
+    />
+    <Circle cx="10" cy="10" r="9.5" fill="#FFFAEB" stroke={color} />
+    <Circle cx="10" cy="10" r="4" fill={color} />
+  </Svg>
+);
+
+export default RadioButton;

package/src/Icon/icons/Search.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Search: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none" style={style}>
+    <Path
+      d="M16.9417 16.0583L13.7409 12.8575C14.8109 11.5883 15.4583 9.9525 15.4583 8.16667C15.4583 4.14583 12.1875 0.875 8.16667 0.875C4.14583 0.875 0.875 4.14583 0.875 8.16667C0.875 12.1875 4.14583 15.4583 8.16667 15.4583C9.9525 15.4583 11.5884 14.8108 12.8575 13.7408L16.0583 16.9417C16.18 17.0633 16.34 17.125 16.5 17.125C16.66 17.125 16.82 17.0642 16.9417 16.9417C17.1859 16.6983 17.1859 16.3025 16.9417 16.0583ZM2.125 8.16667C2.125 4.835 4.835 2.125 8.16667 2.125C11.4983 2.125 14.2083 4.835 14.2083 8.16667C14.2083 11.4983 11.4983 14.2083 8.16667 14.2083C4.835 14.2083 2.125 11.4983 2.125 8.16667Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Search;

package/src/Icon/icons/StickyNote.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const StickyNote: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none" style={style}>
+    <Path
+      d="M18 3.37V9.84998C18 10.07 17.9799 10.29 17.9299 10.5H13.8799C12.0099 10.5 10.5 12.01 10.5 13.88V17.9301C10.29 17.9801 10.0701 18 9.8501 18H3.37988C1.11988 18 0 16.87 0 14.62V3.37C0 1.12 1.11988 0 3.37988 0H14.6201C16.8801 0 18 1.12 18 3.37ZM12 13.88V17.22C12.09 17.16 12.16 17.09 12.24 17.01L17.01 12.24C17.09 12.16 17.16 12.09 17.22 12H13.8799C12.8399 12 12 12.84 12 13.88Z"
+      fill={`${color}`}
+    />
+  </Svg>
+);
+
+export default StickyNote;

package/src/Icon/icons/Times.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Times: React.FC<Props> = ({ size = 24, color = '#909090', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 12 12" fill="none" style={style}>
+    <Path
+      d="M7.17594 6.00002L11.5868 1.58916C11.9126 1.26416 11.9126 0.735879 11.5868 0.410879C11.2609 0.0850456 10.7343 0.0850456 10.4084 0.410879L5.99761 4.82169L1.58677 0.410879C1.26094 0.0850456 0.734271 0.0850456 0.408438 0.410879C0.0826042 0.735879 0.0826042 1.26416 0.408438 1.58916L4.81927 6.00002L0.408438 10.4109C0.0826042 10.7359 0.0826042 11.2642 0.408438 11.5892C0.570938 11.7517 0.784271 11.8334 0.997605 11.8334C1.21094 11.8334 1.42427 11.7517 1.58677 11.5892L5.99761 7.17836L10.4084 11.5892C10.5709 11.7517 10.7843 11.8334 10.9976 11.8334C11.2109 11.8334 11.4243 11.7517 11.5868 11.5892C11.9126 11.2642 11.9126 10.7359 11.5868 10.4109L7.17594 6.00002Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Times;

package/src/Icon/icons/User.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const User: React.FC<Props> = ({ size = 24, color = '#909090', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 14 16" fill="none" style={style}>
+    <Path
+      d="M3.67419 3.41659C3.67419 1.57825 5.16919 0.083252 7.00753 0.083252C8.84586 0.083252 10.3409 1.57825 10.3409 3.41659C10.3409 5.25492 8.84586 6.74992 7.00753 6.74992C5.16919 6.74992 3.67419 5.25492 3.67419 3.41659ZM8.66667 8.41659H5.33333C1.95 8.41659 0.75 10.8941 0.75 13.0158C0.75 14.9133 1.75921 15.9166 3.66921 15.9166H10.3308C12.2408 15.9166 13.25 14.9133 13.25 13.0158C13.25 10.8941 12.05 8.41659 8.66667 8.41659Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default User;

package/src/Icon/icons/XCircle.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const XCircle: React.FC<Props> = ({ size = 24, color = '#909090', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none" style={style}>
+    <Path
+      d="M9.00033 0.666748C4.40033 0.666748 0.666992 4.40008 0.666992 9.00008C0.666992 13.6001 4.40033 17.3334 9.00033 17.3334C13.6003 17.3334 17.3337 13.6001 17.3337 9.00008C17.3337 4.40008 13.6003 0.666748 9.00033 0.666748ZM11.942 11.0584C12.1837 11.3001 12.1837 11.7001 11.942 11.9418C11.817 12.0668 11.6587 12.1251 11.5003 12.1251C11.342 12.1251 11.1837 12.0668 11.0587 11.9418L9.00033 9.88341L6.94199 11.9418C6.81699 12.0668 6.65866 12.1251 6.50033 12.1251C6.34199 12.1251 6.18366 12.0668 6.05866 11.9418C5.81699 11.7001 5.81699 11.3001 6.05866 11.0584L8.11699 9.00008L6.05866 6.94177C5.81699 6.70011 5.81699 6.30006 6.05866 6.05839C6.30033 5.81672 6.70032 5.81672 6.94199 6.05839L9.00033 8.11675L11.0587 6.05839C11.3003 5.81672 11.7003 5.81672 11.942 6.05839C12.1837 6.30006 12.1837 6.70011 11.942 6.94177L9.88366 9.00008L11.942 11.0584Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default XCircle;

package/src/Icon/index.tsx

@@ -0,0 +1,5 @@
+export { default as Icon } from './Icon'; // ini meng-export komponen Icon
+
+import type { IconNameProps } from './type';
+export type { IconNameProps };
+export { default } from './Icon';

package/src/Icon/type.tsx

@@ -0,0 +1,37 @@
+// src/icons/types.ts
+
+import { type ViewStyle } from 'react-native';
+
+export type IconNameProps =
+  | 'Home'
+  | 'Search'
+  | 'User'
+  | 'Eye'
+  | 'EyeOpen'
+  | 'ArrowRight'
+  | 'ArrowLeft'
+  | 'Document'
+  | 'Calendar'
+  | 'ExlamationMark'
+  | 'Download'
+  | 'x-circle'
+  | 'StickyNote'
+  | 'RadioButton'
+  | 'Pdf'
+  | 'ArrowBackAlt'
+  | 'ArrowForwardAlt'
+  | 'ArrowDown'
+  | 'ArrowUp'
+  | 'Check'
+  | 'Filter'
+  | 'AirPlane'
+  | 'Camera'
+  | 'Image'
+  | 'Times';
+
+export interface IconProps {
+  name: IconNameProps;
+  size?: number;
+  color?: string;
+  style?: ViewStyle;
+}

package/src/Input/Input.md

@@ -0,0 +1,51 @@
+# 📥 Input Component
+
+Komponen `Input` ini adalah komponen input teks yang dapat dikustomisasi dengan label, ikon, tombol clear, dan tampilan error. Dibangun menggunakan React Native.
+
+---
+
+## 🔧 Props
+
+| Prop             | Tipe               | Deskripsi                                                                 |
+|------------------|--------------------|---------------------------------------------------------------------------|
+| `label`          | `string`           | Label yang ditampilkan di atas input                                     |
+| `value`          | `string`           | Nilai dari input (kontrol dari luar)                                     |
+| `onChange`       | `(value: string) => void` | Fungsi yang dipanggil saat nilai berubah                           |
+| `icon`           | `string`           | Nama ikon (kiri) dari library `Icon`                                     |
+| `iconRight`      | `string`           | Nama ikon kanan dari library `Icon`                                      |
+| `clearButton`    | `boolean`          | Menampilkan tombol `x` untuk menghapus input                             |
+| `hasError`       | `boolean`          | Menandai input error, border akan berubah merah                          |
+| `hint`           | `string`           | Menampilkan teks kecil di bawah input, bisa untuk error atau petunjuk    |
+| `onPressIconLeft` | `() => void`      | Fungsi saat ikon kiri diklik                                             |
+| `onPressIconRight` | `() => void`    | Fungsi saat ikon kanan diklik                                            |
+| `secureTextEntry`| `boolean`          | Jika `true`, menyembunyikan input (untuk password)                       |
+| `style`          | `ViewStyle`        | Style tambahan untuk input                                               |
+| `...rest`        | `TextInputProps`   | Props lain dari React Native `TextInput`                                 |
+
+---
+
+## 🧪 Contoh Penggunaan
+
+```tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import Input from './Input';
+
+export default function MyForm() {
+  const [text, setText] = useState('');
+
+  return (
+    <View style={{ padding: 16 }}>
+      <Input
+        label="Nama Pengguna"
+        value={text}
+        onChange={setText}
+        icon="user"
+        iconRight="eye"
+        onPressIconRight={() => alert('Lihat password')}
+        clearButton
+        hint="Masukkan nama lengkap Anda"
+      />
+    </View>
+  );
+}

package/src/Input/Input.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { TextInput, View, StyleSheet, TouchableOpacity } from 'react-native';
+import { Icon } from '../Icon';
+import Color from '../Color/Color';
+import LabelForm from '../LabelForm/LabelForm';
+import Typography from '../Typography/Typography';
+import type { InputProps } from './type';
+
+const Input: React.FC<InputProps> = ({
+  icon,
+  iconRight,
+  label,
+  style,
+  value,
+  clearButton = false,
+  hasError = false,
+  hint,
+  onChangeText,
+  onPressIconLeft,
+  onPressIconRight,
+  secureTextEntry = false,
+  ...rest
+}) => {
+  const [inputValue, setInputValue] = useState(value || '');
+
+  const handleClear = () => {
+    setInputValue('');
+    onChangeText?.('');
+  };
+
+  const handleChange = (text: string) => {
+    setInputValue(text);
+    onChangeText?.(text);
+  };
+
+  const showRightIcons = (clearButton && inputValue !== '') || iconRight;
+
+  return (
+    <View style={styles.gap}>
+      {label ? <LabelForm title={label} /> : null}
+
+      <View
+        style={[
+          styles.container,
+          {
+            borderColor: hasError ? Color.danger[500] : Color.gray[100],
+          },
+        ]}
+      >
+        {icon && (
+          <TouchableOpacity
+            onPress={onPressIconLeft}
+            style={styles.iconLeft}
+            hitSlop={10}
+          >
+            <Icon name={icon} size={18} color="#888" />
+          </TouchableOpacity>
+        )}
+
+        <TextInput
+          {...rest}
+          style={[
+            styles.input,
+            icon && { paddingLeft: 40 },
+            showRightIcons && { paddingRight: 60 },
+            style,
+          ]}
+          secureTextEntry={secureTextEntry}
+          value={inputValue}
+          onChangeText={handleChange}
+          placeholderTextColor={Color.gray[400]}
+        />
+
+        {showRightIcons && (
+          <View style={styles.rightContainer}>
+            {clearButton && inputValue !== '' && (
+              <TouchableOpacity
+                onPress={handleClear}
+                style={[{ marginRight: iconRight ? 8 : 0 }]}
+              >
+                <Icon name="x-circle" size={18} color="#aaa" />
+              </TouchableOpacity>
+            )}
+            {iconRight && (
+              <TouchableOpacity onPress={onPressIconRight} hitSlop={10}>
+                <Icon name={iconRight} size={18} color="#888" />
+              </TouchableOpacity>
+            )}
+          </View>
+        )}
+      </View>
+      {hint ? (
+        <Typography color={hasError ? Color.danger[500] : ''} variant="t2">
+          {hint}
+        </Typography>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  gap: {
+    gap: 4,
+  },
+  container: {
+    position: 'relative',
+    height: 36,
+    borderRadius: 8,
+    gap: 8,
+    borderWidth: 1,
+    backgroundColor: Color.base.white100,
+    justifyContent: 'center',
+  },
+  input: {
+    height: 37,
+    paddingHorizontal: 12,
+    fontSize: 16,
+    color: '#333',
+  },
+  iconLeft: {
+    position: 'absolute',
+    left: 12,
+    zIndex: 1,
+  },
+  rightContainer: {
+    position: 'absolute',
+    right: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    zIndex: 1,
+  },
+});
+
+export default Input;