@herca/rn-kit 0.1.37 → 0.1.39

package/lib/typescript/src/Icon/icons/Money.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Money.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/Money.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAO1B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/typescript/src/Icon/icons/Signature.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    size?: number;
+    color?: string;
+    style?: object;
+}
+declare const Signature: React.FC<Props>;
+export default Signature;
+//# sourceMappingURL=Signature.d.ts.map

package/lib/typescript/src/Icon/icons/Signature.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Signature.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/Signature.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgB9B,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/typescript/src/Icon/icons/TimeForward.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    size?: number;
+    color?: string;
+    style?: object;
+}
+declare const TimeForward: React.FC<Props>;
+export default TimeForward;
+//# sourceMappingURL=TimeForward.d.ts.map

package/lib/typescript/src/Icon/icons/TimeForward.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeForward.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/TimeForward.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAOhC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/typescript/src/Icon/icons/Trash.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    size?: number;
+    color?: string;
+    style?: object;
+}
+declare const Trash: React.FC<Props>;
+export default Trash;
+//# sourceMappingURL=Trash.d.ts.map

package/lib/typescript/src/Icon/icons/Trash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trash.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/Trash.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAc1B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/typescript/src/Icon/type.d.ts

@@ -1,5 +1,5 @@
 import { type ViewStyle } from 'react-native';
-export type IconNameProps = 'Search' | 'User' | 'Eye' | 'EyeOpen' | 'ArrowRight' | 'ArrowLeft' | 'Document' | 'Calendar' | 'ExclamationMark' | 'Download' | 'x-circle' | 'StickyNote' | 'RadioButton' | 'Pdf' | 'ArrowBackAlt' | 'ArrowForwardAlt' | 'ArrowDown' | 'ArrowUp' | 'Check' | 'Filter' | 'AirPlane' | 'Camera' | 'Image' | 'Times' | 'Plus' | 'Minus' | 'Bell' | 'file-list-check' | 'file-text' | 'bookmark-user' | 'folder-clock' | 'home-fill' | 'home-outline' | 'user-circle-outline' | 'user-circle-fill' | 'clipboard-list-check' | 'clipboard-list' | 'Megaphone' | 'Scanner' | 'Clock' | 'clock-outline' | 'clipboard-list-check-outline' | 'box-outline' | 'Box' | 'plus-square' | 'at-sign' | 'briefcase-outline' | 'edit-square-outline' | 'globe-earth' | 'lock-fill' | 'logo-herca-hris' | 'question-circle-outline' | 'shield-fill' | 'Users' | 'Bold' | 'Italic' | 'UnderLine' | 'settings-slider' | 'location-pin-fill' | 'discount-fill' | 'rotate-square-fill' | 'copy-fill' | 'copy-text-fill' | 'shield-checked-fill' | 'calendar-edit' | 'info-circle-outline' | 'Tag' | 'Tool' | 'user-edit' | 'whatsapp-fill';
+export type IconNameProps = 'Search' | 'User' | 'Eye' | 'EyeOpen' | 'ArrowRight' | 'ArrowLeft' | 'Document' | 'Calendar' | 'ExclamationMark' | 'Download' | 'x-circle' | 'StickyNote' | 'RadioButton' | 'Pdf' | 'ArrowBackAlt' | 'ArrowForwardAlt' | 'ArrowDown' | 'ArrowUp' | 'Check' | 'Filter' | 'AirPlane' | 'Camera' | 'Image' | 'Times' | 'Plus' | 'Minus' | 'Bell' | 'file-list-check' | 'file-text' | 'bookmark-user' | 'folder-clock' | 'home-fill' | 'home-outline' | 'user-circle-outline' | 'user-circle-fill' | 'clipboard-list-check' | 'clipboard-list' | 'Megaphone' | 'Scanner' | 'Clock' | 'clock-outline' | 'clipboard-list-check-outline' | 'box-outline' | 'Box' | 'plus-square' | 'at-sign' | 'briefcase-outline' | 'edit-square-outline' | 'globe-earth' | 'lock-fill' | 'logo-herca-hris' | 'question-circle-outline' | 'shield-fill' | 'Users' | 'Bold' | 'Italic' | 'UnderLine' | 'settings-slider' | 'location-pin-fill' | 'discount-fill' | 'rotate-square-fill' | 'copy-fill' | 'copy-text-fill' | 'shield-checked-fill' | 'calendar-edit' | 'info-circle-outline' | 'Tag' | 'Tool' | 'user-edit' | 'Bolt' | 'bolt-slash' | 'image-plus' | 'Trash' | 'time-forward' | 'Signature' | 'Money' | 'info-circle-fill' | 'Flag' | 'Coupon' | 'whatsapp-fill';
 export interface IconProps {
     name: IconNameProps;
     size?: number;

package/lib/typescript/src/Icon/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Icon/type.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,MAAM,GACN,KAAK,GACL,SAAS,GACT,YAAY,GACZ,WAAW,GACX,UAAU,GACV,UAAU,GACV,iBAAiB,GACjB,UAAU,GACV,UAAU,GACV,YAAY,GACZ,aAAa,GACb,KAAK,GACL,cAAc,GACd,iBAAiB,GACjB,WAAW,GACX,SAAS,GACT,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,iBAAiB,GACjB,WAAW,GACX,eAAe,GACf,cAAc,GACd,WAAW,GACX,cAAc,GACd,qBAAqB,GACrB,kBAAkB,GAClB,sBAAsB,GACtB,gBAAgB,GAChB,WAAW,GACX,SAAS,GACT,OAAO,GACP,eAAe,GACf,8BAA8B,GAC9B,aAAa,GACb,KAAK,GACL,aAAa,GACb,SAAS,GACT,mBAAmB,GACnB,qBAAqB,GACrB,aAAa,GACb,WAAW,GACX,iBAAiB,GACjB,yBAAyB,GACzB,aAAa,GACb,OAAO,GACP,MAAM,GACN,QAAQ,GACR,WAAW,GACX,iBAAiB,GACjB,mBAAmB,GACnB,eAAe,GACf,oBAAoB,GACpB,WAAW,GACX,gBAAgB,GAChB,qBAAqB,GACrB,eAAe,GACf,qBAAqB,GACrB,KAAK,GACL,MAAM,GACN,WAAW,GACX,eAAe,CAAC;AAEpB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Icon/type.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,MAAM,GACN,KAAK,GACL,SAAS,GACT,YAAY,GACZ,WAAW,GACX,UAAU,GACV,UAAU,GACV,iBAAiB,GACjB,UAAU,GACV,UAAU,GACV,YAAY,GACZ,aAAa,GACb,KAAK,GACL,cAAc,GACd,iBAAiB,GACjB,WAAW,GACX,SAAS,GACT,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,iBAAiB,GACjB,WAAW,GACX,eAAe,GACf,cAAc,GACd,WAAW,GACX,cAAc,GACd,qBAAqB,GACrB,kBAAkB,GAClB,sBAAsB,GACtB,gBAAgB,GAChB,WAAW,GACX,SAAS,GACT,OAAO,GACP,eAAe,GACf,8BAA8B,GAC9B,aAAa,GACb,KAAK,GACL,aAAa,GACb,SAAS,GACT,mBAAmB,GACnB,qBAAqB,GACrB,aAAa,GACb,WAAW,GACX,iBAAiB,GACjB,yBAAyB,GACzB,aAAa,GACb,OAAO,GACP,MAAM,GACN,QAAQ,GACR,WAAW,GACX,iBAAiB,GACjB,mBAAmB,GACnB,eAAe,GACf,oBAAoB,GACpB,WAAW,GACX,gBAAgB,GAChB,qBAAqB,GACrB,eAAe,GACf,qBAAqB,GACrB,KAAK,GACL,MAAM,GACN,WAAW,GACX,MAAM,GACN,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,cAAc,GACd,WAAW,GACX,OAAO,GACP,kBAAkB,GAClB,MAAM,GACN,QAAQ,GACR,eAAe,CAAC;AACpB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB"}

package/lib/typescript/src/Tab/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../src/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAgB,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAErD,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAwG3B,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../src/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAgB,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAErD,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAwI3B,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herca/rn-kit",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "description": "React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -39,7 +39,9 @@
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
     "prepare": "bob build",
-    "release": "release-it --only-version"
+    "release": "release-it --only-version",
+    "work-android": "yarn workspace @herca/rn-kit-example run android --port=8082",
+    "work-start": "yarn workspace @herca/rn-kit-example run start --port=8082"
   },
   "keywords": [
     "react-native",

package/src/Icon/Icon.tsx

@@ -71,6 +71,16 @@ import InfoCircleOutline from './icons/InfoCircleOutline';
 import Tag from './icons/Tag';
 import Tool from './icons/Tool';
 import UserEdit from './icons/UserEdit';
+import ImagePlus from './icons/ImagePlus';
+import Bolt from './icons/Bolt';
+import BoltSlash from './icons/BoltSlash';
+import Trash from './icons/Trash';
+import TimeForward from './icons/TimeForward';
+import Signature from './icons/Signature';
+import Money from './icons/Money';
+import InfoCircleFill from './icons/InfoCircleFill';
+import Flag from './icons/Flag';
+import Coupon from './icons/Coupon';
 
 const icons: Record<
   IconNameProps,
@@ -146,6 +156,16 @@ const icons: Record<
   'user-edit': UserEdit,
   'Tag': Tag,
   'Tool': Tool,
+  'Bolt': Bolt,
+  'bolt-slash': BoltSlash,
+  'image-plus': ImagePlus,
+  'Trash': Trash,
+  'time-forward': TimeForward,
+  'Signature': Signature,
+  'Money': Money,
+  'info-circle-fill': InfoCircleFill,
+  'Flag': Flag,
+  'Coupon': Coupon,
 };
 
 const Icon: React.FC<IconProps> = ({

package/src/Icon/README.md

@@ -118,3 +118,6 @@ export default function App() {
 - Tag
 - Tool
 - user-edit
+- Bolt
+- bolt-slash
+- image-plus

package/src/Icon/icons/Bolt.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 Bolt: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path
+      d="M18.3841 9.42599C18.1471 8.85499 17.6161 8.5 16.9981 8.5L14.1411 8.57001L15.8571 4.59399C16.0581 4.12899 16.0111 3.59799 15.7331 3.17599C15.4551 2.75299 14.9861 2.5 14.4801 2.5H10.0001C9.16211 2.5 8.46711 3.024 8.19511 3.843L5.57811 10.525C5.42311 10.988 5.4981 11.48 5.7841 11.876C6.0701 12.272 6.51312 12.5 7.00212 12.5L9.8261 12.434L6.94109 20.838C6.86609 21.058 6.95209 21.301 7.14909 21.424C7.23109 21.475 7.32211 21.5 7.41411 21.5C7.54311 21.5 7.67111 21.45 7.76811 21.354L18.0601 11.061C18.4961 10.624 18.6201 9.99699 18.3841 9.42599Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Bolt;

package/src/Icon/icons/BoltSlash.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 BoltSlash: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path
+      d="M19.5058 9.99299C19.5108 10.393 19.3538 10.773 19.0638 11.063L8.76376 21.353C8.66676 21.45 8.53875 21.499 8.40975 21.499C8.31875 21.499 8.2268 21.474 8.1448 21.423C7.9478 21.3 7.86179 21.057 7.93679 20.837L8.67678 18.687C8.70078 18.615 8.7418 18.55 8.7958 18.496L18.3458 8.94599C18.5378 8.75499 18.8468 8.75099 19.0428 8.93699C19.3318 9.20899 19.4998 9.59499 19.5058 9.99299ZM21.5298 2.46999C21.2368 2.17699 20.7618 2.17699 20.4688 2.46999L15.7278 7.21099L16.8588 4.60099C17.0588 4.13099 17.0088 3.601 16.7288 3.171C16.4488 2.751 15.9788 2.501 15.4788 2.501H10.9998C10.1498 2.501 9.45978 3.03099 9.18978 3.85099L6.56979 10.531C6.42979 10.991 6.50976 11.491 6.78976 11.881C7.07976 12.281 7.51978 12.501 7.99978 12.501L10.4918 12.448L2.46877 20.471C2.17577 20.764 2.17577 21.239 2.46877 21.532C2.61477 21.678 2.8068 21.752 2.9988 21.752C3.1908 21.752 3.38277 21.679 3.52877 21.532L21.5288 3.53199C21.8228 3.23799 21.8228 2.76199 21.5298 2.46999Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default BoltSlash;

package/src/Icon/icons/Coupon.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 Coupon: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} style={style} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M21 10V7C21 5 20 4 18 4H6C4 4 3 5 3 7V10C4.1 10 5 10.9 5 12C5 13.1 4.1 14 3 14V17C3 19 4 20 6 20H18C20 20 21 19 21 17V14C19.9 14 19 13.1 19 12C19 10.9 19.9 10 21 10ZM16.106 11.488L14.576 12.968C14.464 13.076 14.4129 13.232 14.4399 13.385L14.79 15.41C14.861 15.821 14.428 16.134 14.056 15.941L12.22 14.983C12.082 14.911 11.918 14.911 11.78 14.983L9.94495 15.94C9.57295 16.134 9.13896 15.82 9.20996 15.409L9.56006 13.385C9.58606 13.232 9.53495 13.076 9.42395 12.968L7.89404 11.488C7.61304 11.216 7.76801 10.741 8.15601 10.686L10.2729 10.381C10.4269 10.359 10.56 10.263 10.629 10.124L11.546 8.28101C11.732 7.90701 12.269 7.90701 12.455 8.28101L13.3719 10.124C13.4409 10.263 13.574 10.359 13.728 10.381L15.845 10.686C16.233 10.742 16.387 11.216 16.106 11.488Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Coupon;

package/src/Icon/icons/Flag.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 Flag: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg
+    width={size}
+    height={size + 1}
+    viewBox="0 0 24 25"
+    style={style}
+    fill="none"
+  >
+    <Path
+      d="M15 9.26953L19 14.7695H5.75V21.7295C5.75 22.1395 5.41 22.4795 5 22.4795C4.59 22.4795 4.25 22.1395 4.25 21.7295V14.7695V6.76953C4.25 4.76953 5.25 3.76953 7.25 3.76953H19L15 9.26953Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Flag;

package/src/Icon/icons/ImagePlus.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 ImagePlus: 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="M22.25 11V17C22.25 19.418 20.918 20.75 18.5 20.75H6.5C4.082 20.75 2.75 19.418 2.75 17V7C2.75 4.582 4.082 3.25 6.5 3.25H13.5C13.914 3.25 14.25 3.586 14.25 4C14.25 4.414 13.914 4.75 13.5 4.75H6.5C4.923 4.75 4.25 5.423 4.25 7V16.25L6.79004 13.71C7.18004 13.32 7.81996 13.32 8.20996 13.71L9.15002 14.6499C9.34002 14.8399 9.65998 14.8399 9.84998 14.6499L14.79 9.70996C15.18 9.31996 15.82 9.31996 16.21 9.70996L20.75 14.25V11C20.75 10.586 21.086 10.25 21.5 10.25C21.914 10.25 22.25 10.586 22.25 11ZM8.49304 7.75C7.80404 7.75 7.25 8.31 7.25 9C7.25 9.69 7.81395 10.25 8.50195 10.25C9.19095 10.25 9.75 9.69 9.75 9C9.75 8.31 9.19195 7.75 8.50195 7.75H8.49304ZM17.5 5.75H18.75V7C18.75 7.414 19.086 7.75 19.5 7.75C19.914 7.75 20.25 7.414 20.25 7V5.75H21.5C21.914 5.75 22.25 5.414 22.25 5C22.25 4.586 21.914 4.25 21.5 4.25H20.25V3C20.25 2.586 19.914 2.25 19.5 2.25C19.086 2.25 18.75 2.586 18.75 3V4.25H17.5C17.086 4.25 16.75 4.586 16.75 5C16.75 5.414 17.086 5.75 17.5 5.75Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ImagePlus;

package/src/Icon/icons/InfoCircleFill.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 InfoCircleFill: React.FC<Props> = ({
+  size = 24,
+  color = '#909090',
+  style,
+}) => (
+  <Svg
+    width={size + 1}
+    height={size}
+    style={style}
+    viewBox="0 0 25 24"
+    fill="none"
+  >
+    <Path
+      d="M12.5 2C6.977 2 2.5 6.477 2.5 12C2.5 17.523 6.977 22 12.5 22C18.023 22 22.5 17.523 22.5 12C22.5 6.477 18.023 2 12.5 2ZM13.25 16.5C13.25 16.914 12.914 17.25 12.5 17.25C12.086 17.25 11.75 16.914 11.75 16.5V11.929C11.75 11.515 12.086 11.179 12.5 11.179C12.914 11.179 13.25 11.515 13.25 11.929V16.5ZM12.52 9.5C11.968 9.5 11.5149 9.052 11.5149 8.5C11.5149 7.948 11.958 7.5 12.51 7.5H12.52C13.073 7.5 13.52 7.948 13.52 8.5C13.52 9.052 13.072 9.5 12.52 9.5Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default InfoCircleFill;

package/src/Icon/icons/Money.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 Money: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path
+      d="M18 5H6C4 5 3 6 3 8V16C3 18 4 19 6 19H18C20 19 21 18 21 16V8C21 6 20 5 18 5ZM6 13C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11C6.55 11 7 11.45 7 12C7 12.55 6.55 13 6 13ZM12 15C10.34 15 9 13.66 9 12C9 10.34 10.34 9 12 9C13.66 9 15 10.34 15 12C15 13.66 13.66 15 12 15ZM18 13C17.45 13 17 12.55 17 12C17 11.45 17.45 11 18 11C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Money;

package/src/Icon/icons/Signature.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Signature: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg
+    width={size}
+    height={size}
+    color={color}
+    viewBox="0 0 20 20"
+    fill="none"
+    style={style}
+  >
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.41515 15.625C1.46188 15.625 1.50862 15.6203 1.55535 15.6133L5.4973 14.9217C5.54404 14.9124 5.58843 14.8914 5.62115 14.8563L15.5567 4.92173C15.5783 4.90011 15.5955 4.87444 15.6072 4.84618C15.619 4.81791 15.625 4.78761 15.625 4.75701C15.625 4.72641 15.619 4.6961 15.6072 4.66784C15.5955 4.63957 15.5783 4.6139 15.5567 4.59229L11.6614 0.692758C11.617 0.648367 11.5586 0.625 11.4955 0.625C11.4325 0.625 11.374 0.648367 11.3296 0.692758L1.39412 10.6273C1.35908 10.6624 1.33804 10.7044 1.32871 10.7512L0.637045 14.6927C0.592655 14.9521 0.672084 15.2068 0.856702 15.3914C1.01092 15.5432 1.20719 15.625 1.41515 15.625ZM12.035 11.3108C12.684 10.9637 13.3778 10.8221 14.0399 10.9471C14.7985 11.0903 15.4396 11.569 15.8906 12.3394C16.5931 13.5397 16.3978 14.7378 15.4573 15.7204C15.0454 16.1508 14.4948 16.541 13.8168 16.8992L13.81 16.9028L13.8298 16.9089C14.1381 17.0016 14.4646 17.0518 14.8034 17.0544L14.8309 17.0545C16.2622 17.0545 17.1977 16.5365 17.7673 15.4637C17.9859 15.0521 18.4967 14.8956 18.9082 15.1142C19.3198 15.3327 19.4763 15.8435 19.2577 16.2551C18.3839 17.9008 16.8649 18.742 14.8309 18.742C13.7133 18.742 12.6761 18.3898 11.8265 17.7725L11.8018 17.7543L11.7699 17.7654C10.6876 18.1403 9.45587 18.4672 8.12842 18.7482L8.07594 18.7592C6.93756 18.9987 5.79648 19.19 4.81452 19.3207C4.35259 19.3823 3.92828 19.0577 3.86676 18.5958C3.80523 18.1338 4.12982 17.7095 4.59172 17.648C5.53382 17.5225 6.63374 17.3382 7.7286 17.1079C8.7317 16.8969 9.67417 16.6594 10.526 16.3967L10.5315 16.395L10.5213 16.3788C10.1354 15.7588 9.91527 15.0796 9.90859 14.4278L9.90843 14.3973C9.90843 13.2276 10.8355 11.9524 12.035 11.3108ZM13.7269 12.6053C13.4752 12.5578 13.1621 12.6217 12.8309 12.7988C12.1384 13.1692 11.5959 13.9154 11.5959 14.3973C11.5959 14.824 11.8043 15.3382 12.1751 15.7974L12.1806 15.8042L12.2093 15.7922C13.1274 15.4036 13.8144 14.989 14.2233 14.5691L14.2383 14.5535C14.6774 14.0948 14.7395 13.7135 14.4342 13.1918C14.2219 12.8291 13.9882 12.6546 13.7269 12.6053Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Signature;

package/src/Icon/icons/TimeForward.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 TimeForward: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" style={style}>
+    <Path
+      d="M10.8332 6.66602V9.6543L12.2557 11.0768C12.5815 11.4027 12.5815 11.9294 12.2557 12.2552C12.0932 12.4177 11.8798 12.4993 11.6665 12.4993C11.4532 12.4993 11.2398 12.4177 11.0773 12.2552L9.41064 10.5885C9.25398 10.4319 9.1665 10.2202 9.1665 9.99935V6.66602C9.1665 6.20602 9.539 5.83268 9.99984 5.83268C10.4607 5.83268 10.8332 6.20602 10.8332 6.66602ZM12.4998 5.83268C12.4998 6.29268 12.8723 6.66602 13.3332 6.66602H16.6665C17.1273 6.66602 17.4998 6.29268 17.4998 5.83268V2.49935C17.4998 2.03935 17.1273 1.66602 16.6665 1.66602C16.2057 1.66602 15.8332 2.03935 15.8332 2.49935V4.10763C14.2915 2.56429 12.2033 1.66602 9.97827 1.66602C5.39577 1.66602 1.6665 5.40435 1.6665 9.99935C1.6665 14.5943 5.39577 18.3327 9.97827 18.3327C13.1641 18.3327 16.014 16.5576 17.4148 13.6993C17.6173 13.286 17.4473 12.7869 17.0339 12.5844C16.6206 12.3819 16.1207 12.5527 15.919 12.9661C14.7999 15.2486 12.5241 16.666 9.97827 16.666C6.31494 16.666 3.33317 13.6752 3.33317 9.99935C3.33317 6.32352 6.3141 3.33268 9.97827 3.33268C11.6174 3.33268 13.1682 3.93852 14.3657 4.99935H13.3332C12.8723 4.99935 12.4998 5.37268 12.4998 5.83268Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default TimeForward;

package/src/Icon/icons/Trash.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Trash: React.FC<Props> = ({ size = 24, color = '#909090', style }) => (
+  <Svg
+    width={size}
+    height={size}
+    color={color}
+    style={style}
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <Path
+      d="M17.2913 5C17.2913 5.345 17.0113 5.625 16.6663 5.625H3.33301C2.98801 5.625 2.70801 5.345 2.70801 5C2.70801 4.655 2.98801 4.375 3.33301 4.375H6.84468C6.92218 4.22333 6.98217 4.05167 7.04634 3.86L7.21468 3.35416C7.38468 2.84416 7.86217 2.5 8.4005 2.5H11.5988C12.1372 2.5 12.6147 2.84416 12.7847 3.35416L12.953 3.86C13.0172 4.05167 13.0772 4.22333 13.1547 4.375H16.6663C17.0113 4.375 17.2913 4.655 17.2913 5ZM15.4663 6.45833C15.6105 6.45833 15.7255 6.58084 15.7155 6.72501L15.158 15.1667C15.0663 16.4833 14.3747 17.5 12.658 17.5H7.34134C5.62467 17.5 4.93301 16.4833 4.84134 15.1667L4.28384 6.72501C4.27467 6.58084 4.38884 6.45833 4.53301 6.45833H15.4663ZM8.95801 9.16667C8.95801 8.825 8.67467 8.54167 8.33301 8.54167C7.99134 8.54167 7.70801 8.825 7.70801 9.16667V13.3333C7.70801 13.675 7.99134 13.9583 8.33301 13.9583C8.67467 13.9583 8.95801 13.675 8.95801 13.3333V9.16667ZM12.2913 9.16667C12.2913 8.825 12.008 8.54167 11.6663 8.54167C11.3247 8.54167 11.0413 8.825 11.0413 9.16667V13.3333C11.0413 13.675 11.3247 13.9583 11.6663 13.9583C12.008 13.9583 12.2913 13.675 12.2913 13.3333V9.16667Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Trash;

package/src/Icon/type.tsx

@@ -72,8 +72,17 @@ export type IconNameProps =
   | 'Tag'
   | 'Tool'
   | 'user-edit'
+  | 'Bolt'
+  | 'bolt-slash'
+  | 'image-plus'
+  | 'Trash'
+  | 'time-forward'
+  | 'Signature'
+  | 'Money'
+  | 'info-circle-fill'
+  | 'Flag'
+  | 'Coupon'
   | 'whatsapp-fill';
-
 export interface IconProps {
   name: IconNameProps;
   size?: number;

package/src/Tab/Tab.tsx

@@ -48,72 +48,104 @@ const Tab: React.FC<TabProps> = ({
 
   if (items.length === 0) return null;
 
-  return (
-    <View style={styles.container}>
+  function renderTabBar() {
+    return (
       <ScrollView
-        stickyHeaderIndices={[renderHeader ? 1 : 0]} // bikin tabBar sticky
-        contentContainerStyle={styles.scrollViewContainer}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={styles.tabBarWrapper}
+      >
+        <View style={styles.tabBar}>
+          {items.map((item, index) => {
+            const isActive = index === activeIndex;
+            return (
+              <React.Fragment key={index}>
+                {!item.props.renderTabName && (
+                  <Pressable
+                    style={[
+                      styles.tabButton,
+                      isActive ? styles.tabActive : styles.tabInactive,
+                    ]}
+                    onPress={() => handleHeaderPress(index)}
+                  >
+                    <Typography
+                      center
+                      variant="t2"
+                      weight="semibold"
+                      color={isActive ? Color.base.white100 : Color.gray[700]}
+                    >
+                      {item.props.name}
+                    </Typography>
+                  </Pressable>
+                )}
+
+                {item.props.renderTabName && (
+                  <Pressable onPress={() => handleHeaderPress(index)}>
+                    {item.props.renderTabName({
+                      isActive,
+                    })}
+                  </Pressable>
+                )}
+              </React.Fragment>
+            );
+          })}
+        </View>
+      </ScrollView>
+    );
+  }
+
+  function renderMainContent() {
+    const minHeight = 800;
+    return (
+      <PagerView
+        ref={pagerRef}
+        style={[
+          styles.pager,
+          renderHeader
+            ? {
+                height: currentHeight || minHeight,
+                minHeight: minHeight,
+              }
+            : undefined,
+        ]}
+        initialPage={current}
+        onPageSelected={(e) => updateActive(e.nativeEvent.position)}
       >
-        {/* Header */}
-        {renderHeader ? renderHeader : null}
+        {items.map((item, index) => (
+          <View key={index} collapsable={false}>
+            {item?.props?.children}
+          </View>
+        ))}
+      </PagerView>
+    );
+  }
 
-        {/* TabBar (sticky + horizontal scroll) */}
+  return (
+    <View style={styles.container}>
+      {renderHeader ? (
         <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          style={styles.tabBarWrapper}
+          stickyHeaderIndices={[renderHeader ? 1 : 0]} // bikin tabBar sticky
+          contentContainerStyle={styles.scrollViewContainer}
+          showsVerticalScrollIndicator={false}
         >
-          <View style={styles.tabBar}>
-            {items.map((item, index) => {
-              const isActive = index === activeIndex;
-              return (
-                <React.Fragment key={index}>
-                  {!item.props.renderTabName && (
-                    <Pressable
-                      style={[
-                        styles.tabButton,
-                        isActive ? styles.tabActive : styles.tabInactive,
-                      ]}
-                      onPress={() => handleHeaderPress(index)}
-                    >
-                      <Typography
-                        center
-                        variant="t2"
-                        weight="semibold"
-                        color={isActive ? Color.base.white100 : Color.gray[700]}
-                      >
-                        {item.props.name}
-                      </Typography>
-                    </Pressable>
-                  )}
+          {/* Header */}
+          {renderHeader ? renderHeader : null}
 
-                  {item.props.renderTabName && (
-                    <Pressable onPress={() => handleHeaderPress(index)}>
-                      {item.props.renderTabName({
-                        isActive,
-                      })}
-                    </Pressable>
-                  )}
-                </React.Fragment>
-              );
-            })}
-          </View>
+          {/* TabBar (sticky + horizontal scroll) */}
+          {renderTabBar()}
+
+          {/* Konten */}
+          {renderMainContent()}
         </ScrollView>
+      ) : (
+        <View style={styles.scrollViewContainer}>
+          {/* TabBar (sticky + horizontal scroll) */}
+          <View>{renderTabBar()}</View>
 
-        {/* Konten */}
-        <PagerView
-          ref={pagerRef}
-          style={[styles.pager, { height: currentHeight || 800 }]}
-          initialPage={current}
-          onPageSelected={(e) => updateActive(e.nativeEvent.position)}
-        >
-          {items.map((item, index) => (
-            <View key={index} collapsable={false}>
-              {item?.props?.children}
-            </View>
-          ))}
-        </PagerView>
-      </ScrollView>
+          {/* Konten */}
+          {renderMainContent()}
+        </View>
+      )}
     </View>
   );
 };
@@ -141,6 +173,6 @@ const styles = StyleSheet.create({
   },
   tabActive: { backgroundColor: Color.primary[1000] },
   tabInactive: { backgroundColor: Color.gray[100] },
-  pager: { flex: 1, minHeight: 800, marginBottom: 10 },
+  pager: { flex: 1, marginBottom: 10 },
   scrollViewContainer: { flexGrow: 1 },
 });