@herca/rn-kit 0.1.25 → 0.1.27

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnderLine.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/UnderLine.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,CAc9B,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Users.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/Users.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/WhatsappFill.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"WhatsappFill.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/WhatsappFill.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,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAWjC,CAAC;AAEF,eAAe,YAAY,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';
+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' | '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,CAAC;AAElB,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,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAYxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEzC,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0F/B,CAAC;AAoCF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEzC,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsG/B,CAAC;AAsCF,eAAe,KAAK,CAAC"}

package/lib/typescript/src/Input/InputOtp.d.ts

@@ -5,6 +5,7 @@ type InputOtpProps = {
     label?: string;
     hint?: string;
     hasError?: boolean;
+    inputCenter?: boolean;
 };
 declare const InputOtp: React.FC<InputOtpProps>;
 export default InputOtp;

package/lib/typescript/src/Input/InputOtp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputOtp.d.ts","sourceRoot":"","sources":["../../../../src/Input/InputOtp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,KAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0DrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"InputOtp.d.ts","sourceRoot":"","sources":["../../../../src/Input/InputOtp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAMhD,KAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkFrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -11,6 +11,7 @@ export interface InputProps extends TextInputProps {
     onPressIconRight?: (val?: GestureResponderEvent) => void;
     onChangeText?: (val: string) => void;
     secureTextEntry?: boolean;
+    iconRightColor?: string;
 }
 export interface TextAreaProps extends InputProps {
     height?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Input/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxD,gBAAgB,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../src/Input/type.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxD,gBAAgB,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/lib/typescript/src/TextEditor/TextEditor.d.ts

@@ -1,2 +1,3 @@
-export default function TextEditor(): import("react/jsx-runtime").JSX.Element;
+import type { TextEditorType } from './types';
+export default function TextEditor({ label, hasError, hint, onChange, height, }: TextEditorType): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../../src/TextEditor/TextEditor.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,UAAU,4CAEjC"}
+{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../../src/TextEditor/TextEditor.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAK9C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,MAAY,GACb,EAAE,cAAc,2CA0KhB"}

package/lib/typescript/src/TextEditor/types.d.ts

@@ -1 +1,8 @@
+export interface TextEditorType {
+    label?: string;
+    hint?: string;
+    hasError?: boolean;
+    onChange?: (data: string) => void;
+    height?: number;
+}
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/TextEditor/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/TextEditor/types.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/TextEditor/types.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/lib/typescript/src/index.d.ts

@@ -4,6 +4,7 @@ export { default as AccordionItem } from './Accordion/AccordionItem';
 export type { AccordionRenderHeaderProps } from './Accordion/type';
 export { default as Button } from './Button/Button';
 export { default as Color } from './Color/Color';
+export type { ColorVariantType } from './Color/type';
 export { default as Typography } from './Typography/Typography';
 export type { fontSizeMap, fontWeightMap, lineHeightMap, TypographyVariantProps, } from './Typography/type';
 export { default as BottomSheet } from './BottomSheet/BottomSheet';
@@ -28,9 +29,9 @@ export { default as InputOtp } from './Input/InputOtp';
 export { default as Switch } from './Input/Switch';
 export { default as CheckBox } from './CheckBox/CheckBox';
 export { default as CheckBoxList } from './CheckBox/CheckBoxList';
-export { default as CounterButton } from './CounterButton/CounterButton';
 export { default as RadioButton } from './RadioButton/RadioButton';
 export { default as Icon } from './Icon/Icon';
+export type { IconNameProps } from './Icon/type';
 export { default as Modal } from './Modal/Modal';
 export { default as Label } from './Label/Label';
 export { default as List } from './List/List';
@@ -39,6 +40,7 @@ export { default as Loading } from './Loading/Loading';
 export { default as Avatar } from './Avatar/Avatar';
 export { default as AvatarGroup } from './Avatar/AvatarGroup';
 export { default as Badge } from './Badge/Badge';
+export type { Variant as BadgeVariant, Size as BadgeSize, HexColor as BadgeColor, SizeStyle as BadgeSizeStyle, } from './Badge/type';
 export { default as Alert } from './Alert/Alert';
 export { default as Timeline } from './Timeline/Timeline';
 export { default as TimelineItem } from './Timeline/TimelineItem';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@herca/rn-kit",
-  "private": false,
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -94,6 +93,7 @@
     "@react-native-documents/picker": "^10.1.3",
     "@react-native-documents/viewer": "^1.0.1",
     "@react-navigation/native": "^7.1.14",
+    "@testing-library/react-native": "^13.2.0",
     "react-native-blob-util": "^0.22.2",
     "react-native-image-picker": "^8.2.1",
     "react-native-pager-view": "^6.8.1",

package/src/Badge/Badge.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import Color from '../Color/Color';
 import Typography from '../Typography/Typography';
-import type { TypographyVariantProps } from '../Typography/type';
 import { hexToRGBA } from '../helpers/hexToRgba';
-import type { HexColor, Size, Variant } from './type';
+import type { HexColor, Size, SizeStyle, Variant } from './type';
 
 interface BadgeProps {
   value?: string | number | React.ReactNode;
@@ -26,14 +25,6 @@ const COLORS: Record<Variant, { background: string; fontColor: string }> = {
   purple: { background: Color.purple[50], fontColor: Color.purple[500] },
 };
 
-interface SizeStyle {
-  height: number;
-  fontSize: TypographyVariantProps;
-  paddingHorizontal: number;
-  paddingVertical: number;
-  borderRadius: number;
-}
-
 const SIZE_MAP: Record<Size, SizeStyle> = {
   small: {
     height: 18,

package/src/Badge/type.tsx

@@ -1,3 +1,5 @@
+import type { TypographyVariantProps } from '../Typography/type';
+
 type Variant =
   | 'default'
   | 'primary'
@@ -12,3 +14,11 @@ type Size = 'small' | 'medium';
 type HexColor = `#${string}`;
 
 export type { Variant, Size, HexColor };
+
+export interface SizeStyle {
+  height: number;
+  fontSize: TypographyVariantProps;
+  paddingHorizontal: number;
+  paddingVertical: number;
+  borderRadius: number;
+}

package/src/BottomSheet/BottomSheet.tsx

@@ -249,9 +249,12 @@ const styles = StyleSheet.create({
   },
   contentWithFooter: {},
   footer: {
+    borderTopWidth: 1,
+    borderTopColor: Color.gray[100],
     backgroundColor: Color.base.white100,
     position: 'absolute',
-    marginBottom: 20,
+    paddingTop: 10,
+    marginBottom: 32,
     bottom: 0,
     left: 0,
     right: 0,

package/src/Button/tests/Button.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import Button from '../Button';
+
+describe('Button Component', () => {
+  it('renders with title', () => {
+    const { getByText } = render(<Button title="Submit" onPress={() => {}} />);
+    expect(getByText('Submit')).toBeTruthy();
+  });
+
+  it('calls onPress when pressed', () => {
+    const mockFn = jest.fn();
+    const { getByText } = render(<Button title="Click me" onPress={mockFn} />);
+    fireEvent.press(getByText('Click me'));
+    expect(mockFn).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onPress when disabled', () => {
+    const mockFn = jest.fn();
+    const { getByText } = render(
+      <Button title="Disabled" onPress={mockFn} disabled />
+    );
+    fireEvent.press(getByText('Disabled'));
+    expect(mockFn).not.toHaveBeenCalled();
+  });
+
+  it('renders loading indicator when loading', () => {
+    const { getByTestId } = render(
+      <Button title="Load" onPress={() => {}} loading />
+    );
+    // You might want to set `testID="loading-indicator"` in <ActivityIndicator /> in the component
+    // For now, we check for presence of ActivityIndicator via accessibilityRole
+    const indicator = getByTestId('ActivityIndicator');
+    expect(indicator).toBeTruthy();
+  });
+
+  it('renders custom child instead of title', () => {
+    const { queryByText, getByText } = render(
+      <Button onPress={() => {}}>
+        <React.Fragment>
+          <Text>Custom Child</Text>
+        </React.Fragment>
+      </Button>
+    );
+    expect(getByText('Custom Child')).toBeTruthy();
+    expect(queryByText('title')).toBeNull();
+  });
+});

package/src/Button/type.tsx

@@ -255,7 +255,7 @@ export const COLOR_MAP: Record<
     tertiaryFocusBorderColor: Color.info[200],
     tertiaryPressTextColor: Color.info[700],
     tertiaryPressBorderColor: 'transparent',
-    tertiaryDisabledTextColor: Color.info[100],
+    tertiaryDisabledTextColor: Color.info[200],
     tertiaryDisabledBorderColor: Color.base.white100,
   },
   orange: {

package/src/DatePicker/TimePicker.tsx

@@ -1,12 +1,13 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useMemo } from 'react';
 import {
   View,
-  ScrollView,
   StyleSheet,
   Text,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
   Dimensions,
+  Animated,
+  type NativeSyntheticEvent,
+  type NativeScrollEvent,
+  ScrollView,
 } from 'react-native';
 import BottomSheet from '../BottomSheet/BottomSheet';
 import Button from '../Button/Button';
@@ -17,6 +18,7 @@ const ITEM_HEIGHT = 40;
 const SCREEN_WIDTH = Dimensions.get('window').width;
 const VISIBLE_ITEMS = 5;
 const MIDDLE_INDEX = Math.floor(VISIBLE_ITEMS / 2);
+const REPEAT_COUNT = 5;
 
 interface TimePickerProps {
   isOpen: boolean;
@@ -26,42 +28,61 @@ interface TimePickerProps {
 
 const generateItems = (max: number) => Array.from({ length: max }, (_, i) => i);
 
+const repeatItems = (items: number[], repeatCount: number) =>
+  Array.from({ length: repeatCount }).flatMap(() => items);
+
 export default function TimePickerWheel({
   isOpen,
   onClose,
   onChange,
 }: TimePickerProps) {
-  const [selectedHour, setSelectedHour] = useState(0);
-  const [selectedMinute, setSelectedMinute] = useState(0);
+  const [selectedHour, setSelectedHour] = useState<number>(0);
+  const [selectedMinute, setSelectedMinute] = useState<number>(0);
 
   const hourRef = useRef<ScrollView>(null);
   const minuteRef = useRef<ScrollView>(null);
 
-  const padItems = (items: number[], padCount: number) => {
-    return [
-      ...items.slice(-padCount).map((i) => i - items.length),
-      ...items,
-      ...items.slice(0, padCount).map((i) => i + items.length),
-    ];
-  };
+  const hourScrollY = useRef(new Animated.Value(0)).current;
+  const minuteScrollY = useRef(new Animated.Value(0)).current;
+
+  const hoursBase = generateItems(24);
+  const minutesBase = generateItems(60);
 
-  const hours = padItems(generateItems(24), MIDDLE_INDEX);
-  const minutes = padItems(generateItems(60), MIDDLE_INDEX);
+  const hours = useMemo(
+    () => repeatItems(hoursBase, REPEAT_COUNT),
+    [hoursBase]
+  );
+  const minutes = useMemo(
+    () => repeatItems(minutesBase, REPEAT_COUNT),
+    [minutesBase]
+  );
+
+  const CENTER_INDEX_HOUR =
+    Math.floor(hours.length / 2 / 24) * 24 + selectedHour;
+  const CENTER_INDEX_MINUTE =
+    Math.floor(minutes.length / 2 / 60) * 60 + selectedMinute;
 
   useEffect(() => {
     if (isOpen) {
       setTimeout(() => {
-        scrollToIndex(hourRef, selectedHour + MIDDLE_INDEX);
-        scrollToIndex(minuteRef, selectedMinute + MIDDLE_INDEX);
+        scrollToIndex(hourRef, CENTER_INDEX_HOUR);
+        scrollToIndex(minuteRef, CENTER_INDEX_MINUTE);
       }, 100);
     }
-  }, [isOpen, selectedMinute, selectedHour]);
+  }, [
+    isOpen,
+    selectedMinute,
+    selectedHour,
+    CENTER_INDEX_HOUR,
+    CENTER_INDEX_MINUTE,
+  ]);
 
   const scrollToIndex = (
     ref: React.RefObject<ScrollView | null>,
-    index: number
+    index: number,
+    animated: boolean = true
   ) => {
-    ref.current?.scrollTo({ y: index * ITEM_HEIGHT, animated: true });
+    ref.current?.scrollTo({ y: index * ITEM_HEIGHT, animated });
   };
 
   const handleScrollEnd = (
@@ -70,14 +91,23 @@ export default function TimePickerWheel({
   ) => {
     const offsetY = event.nativeEvent.contentOffset.y;
     const index = Math.round(offsetY / ITEM_HEIGHT);
+
     if (type === 'hour') {
-      const realIndex = (((index - MIDDLE_INDEX) % 24) + 24) % 24;
-      setSelectedHour(realIndex);
-      setTimeout(() => scrollToIndex(hourRef, realIndex + MIDDLE_INDEX), 50);
+      const realValue = hours[index % 24] as number;
+      setSelectedHour(realValue);
+
+      const newCenter = Math.floor(hours.length / 2 / 24) * 24 + realValue;
+      if (Math.abs(index - newCenter) > 12) {
+        scrollToIndex(hourRef, newCenter, false);
+      }
     } else {
-      const realIndex = (((index - MIDDLE_INDEX) % 60) + 60) % 60;
-      setSelectedMinute(realIndex);
-      setTimeout(() => scrollToIndex(minuteRef, realIndex + MIDDLE_INDEX), 50);
+      const realValue = minutes[index % 60] as number;
+      setSelectedMinute(realValue);
+
+      const newCenter = Math.floor(minutes.length / 2 / 60) * 60 + realValue;
+      if (Math.abs(index - newCenter) > 12) {
+        scrollToIndex(minuteRef, newCenter, false);
+      }
     }
   };
 
@@ -86,22 +116,44 @@ export default function TimePickerWheel({
     onClose?.();
   };
 
-  const renderItem = (value: number, type: 'hour' | 'minute') => {
-    const isSelected =
-      type === 'hour'
-        ? ((value % 24) + 24) % 24 === selectedHour
-        : (value % 60) + (60 % 60) === selectedMinute;
-    const displayValue =
-      type === 'hour'
-        ? (((value % 24) + 24) % 24).toString().padStart(2, '0')
-        : (((value % 60) + 60) % 60).toString().padStart(2, '0');
+  const renderAnimatedItem = (
+    value: number,
+    type: 'hour' | 'minute',
+    index: number,
+    scrollY: Animated.Value
+  ) => {
+    const normalizedValue =
+      type === 'hour' ? ((value % 24) + 24) % 24 : ((value % 60) + 60) % 60;
+
+    const inputRange = [
+      (index - 2) * ITEM_HEIGHT,
+      (index - 1) * ITEM_HEIGHT,
+      index * ITEM_HEIGHT,
+      (index + 1) * ITEM_HEIGHT,
+      (index + 2) * ITEM_HEIGHT,
+    ];
+
+    const scale = scrollY.interpolate({
+      inputRange,
+      outputRange: [0.7, 0.85, 1, 0.85, 0.7],
+      extrapolate: 'clamp',
+    });
+
+    const opacity = scrollY.interpolate({
+      inputRange,
+      outputRange: [0.3, 0.6, 1, 0.6, 0.3],
+      extrapolate: 'clamp',
+    });
 
     return (
-      <View key={`${type}-${value}`} style={styles.item}>
-        <Text style={[styles.itemText, isSelected && styles.selectedItemText]}>
-          {displayValue}
+      <Animated.View
+        key={`${type}-${index}`}
+        style={[styles.item, { transform: [{ scale }], opacity }]}
+      >
+        <Text style={styles.itemText}>
+          {normalizedValue.toString().padStart(2, '0')}
         </Text>
-      </View>
+      </Animated.View>
     );
   };
 
@@ -136,7 +188,7 @@ export default function TimePickerWheel({
         weight="semibold"
         color={Color.gray[900]}
         center
-        style={{ marginBottom: 16 }}
+        style={styles.hintTime}
       >
         Pilih Waktu
       </Typography>
@@ -146,31 +198,46 @@ export default function TimePickerWheel({
         <View style={styles.highlightOverlay} pointerEvents="none">
           <View style={styles.highlight} />
         </View>
+
         <View style={styles.scrollContainer}>
           <View style={styles.pickerColumn}>
-            <ScrollView
+            <Animated.ScrollView
               ref={hourRef}
               showsVerticalScrollIndicator={false}
               snapToInterval={ITEM_HEIGHT}
               decelerationRate="fast"
               onMomentumScrollEnd={(e) => handleScrollEnd(e, 'hour')}
+              onScroll={Animated.event(
+                [{ nativeEvent: { contentOffset: { y: hourScrollY } } }],
+                { useNativeDriver: true }
+              )}
+              scrollEventThrottle={16}
               contentContainerStyle={styles.scrollContent}
             >
-              {hours.map((h) => renderItem(h, 'hour'))}
-            </ScrollView>
+              {hours.map((h, i) =>
+                renderAnimatedItem(h, 'hour', i, hourScrollY)
+              )}
+            </Animated.ScrollView>
           </View>
 
           <View style={styles.pickerColumn}>
-            <ScrollView
+            <Animated.ScrollView
               ref={minuteRef}
               showsVerticalScrollIndicator={false}
               snapToInterval={ITEM_HEIGHT}
               decelerationRate="fast"
               onMomentumScrollEnd={(e) => handleScrollEnd(e, 'minute')}
+              onScroll={Animated.event(
+                [{ nativeEvent: { contentOffset: { y: minuteScrollY } } }],
+                { useNativeDriver: true }
+              )}
+              scrollEventThrottle={16}
               contentContainerStyle={styles.scrollContent}
             >
-              {minutes.map((m) => renderItem(m, 'minute'))}
-            </ScrollView>
+              {minutes.map((m, i) =>
+                renderAnimatedItem(m, 'minute', i, minuteScrollY)
+              )}
+            </Animated.ScrollView>
           </View>
         </View>
       </View>
@@ -209,13 +276,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   itemText: {
-    fontSize: 18,
-    color: Color.gray[400],
-  },
-  selectedItemText: {
-    color: Color.gray[900],
-    fontWeight: 'bold',
     fontSize: 22,
+    color: Color.gray[900],
+    fontWeight: '600',
   },
   highlightOverlay: {
     position: 'absolute',
@@ -231,4 +294,5 @@ const styles = StyleSheet.create({
     zIndex: -1,
     backgroundColor: Color.primary[50],
   },
+  hintTime: { marginBottom: 16 },
 });

package/src/Icon/Icon.tsx

@@ -46,6 +46,19 @@ import ClipBoardListCheckOutline from './icons/ClipBoardListCheckOutline';
 import Box from './icons/Box';
 import Minus from './icons/Minus';
 import PlusSquare from './icons/PlusSquare';
+import AtSign from './icons/AtSign';
+import BriefCaseOutline from './icons/BriefcaseOutline';
+import EditSquareOutline from './icons/Edit';
+import GlobeEarth from './icons/GlobeEarth';
+import LockFill from './icons/LockFill';
+import LogoHercaHris from './icons/LogoHercaHris';
+import QuestionCircleOutline from './icons/QuestionCircleOutline';
+import ShieldFill from './icons/ShieldFill';
+import Users from './icons/Users';
+import WhatsAppFill from './icons/WhatsappFill';
+import Bold from './icons/Bold';
+import Italic from './icons/Italic';
+import UnderLine from './icons/UnderLine';
 
 const icons: Record<
   IconNameProps,
@@ -96,6 +109,19 @@ const icons: Record<
   'clipboard-list-check-outline': ClipBoardListCheckOutline,
   'Box': Box,
   'plus-square': PlusSquare,
+  'at-sign': AtSign,
+  'briefcase-outline': BriefCaseOutline,
+  'edit-square-outline': EditSquareOutline,
+  'globe-earth': GlobeEarth,
+  'lock-fill': LockFill,
+  'logo-herca-hris': LogoHercaHris,
+  'question-circle-outline': QuestionCircleOutline,
+  'shield-fill': ShieldFill,
+  'Users': Users,
+  'whatsapp-fill': WhatsAppFill,
+  'Bold': Bold,
+  'Italic': Italic,
+  'UnderLine': UnderLine,
 };
 
 const Icon: React.FC<IconProps> = ({