@herca/rn-kit 0.1.16 → 0.1.17

package/src/Icon/icons/HomeOutline.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 HomeOutline: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg
+    width={size}
+    height={size + 1}
+    viewBox="0 0 24 25"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M17.053 22.0576H6.94805C5.37705 22.0576 4.03205 20.9356 3.75005 19.3906L2.2951 11.4076C2.1171 10.4266 2.48408 9.42367 3.25408 8.79067L9.93609 3.29763C11.1331 2.31363 12.8701 2.31363 14.0671 3.29763L20.7491 8.79067C21.5191 9.42367 21.8861 10.4266 21.7081 11.4076L20.2531 19.3906C19.9691 20.9356 18.624 22.0576 17.053 22.0576ZM12.0001 4.05862C11.6041 4.05862 11.21 4.19059 10.888 4.45559L4.20611 9.94863C3.85511 10.2366 3.68807 10.6927 3.77007 11.1387L5.22503 19.1206C5.37603 19.9526 6.10107 20.5567 6.94707 20.5567H17.0521C17.8981 20.5567 18.6221 19.9526 18.7741 19.1206L20.2291 11.1376C20.3101 10.6916 20.143 10.2366 19.793 9.94863L13.111 4.45559C12.79 4.19159 12.3961 4.05862 12.0001 4.05862ZM19.513 19.2556H19.523H19.513ZM14.7501 17.3076C14.7501 16.8936 14.4141 16.5576 14.0001 16.5576H10.0001C9.58605 16.5576 9.25005 16.8936 9.25005 17.3076C9.25005 17.7216 9.58605 18.0576 10.0001 18.0576H14.0001C14.4141 18.0576 14.7501 17.7216 14.7501 17.3076Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default HomeOutline;

package/src/Icon/icons/Megaphone.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 Megaphone: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path
+      d="M21 3.92997V17.07C21 17.85 20.1 18.28 19.5 17.8L18.4699 16.9699C17.9869 16.5789 17.4639 16.2449 16.9129 15.9699C16.8129 15.9199 16.75 15.82 16.75 15.709V5.29197C16.75 5.17997 16.8129 5.08098 16.9129 5.03098C17.4629 4.75598 17.9869 4.42198 18.4699 4.03098L19.5 3.20096C20.1 2.71996 21 3.14997 21 3.92997ZM14.884 15.235C15.072 15.279 15.25 15.145 15.25 14.952V6.04697C15.25 5.85397 15.072 5.71995 14.884 5.76395C14.218 5.92095 13.5319 5.999 12.8399 5.999H7.69601C5.35001 5.999 3.25292 7.70898 3.02292 10.044C2.75892 12.727 4.85995 14.999 7.50095 14.999L9.95395 19.896C10.2929 20.572 10.984 20.999 11.74 20.999H13L12 14.999H12.8399C13.5329 15 14.218 15.078 14.884 15.235Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Megaphone;

package/src/Icon/icons/Plus.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 Plus: React.FC<Props> = ({ size = 24, color = '#909090', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 16 17" fill="none" style={style}>
+    <Path
+      d="M15 7.84619H9V1.84619C9 1.29419 8.552 0.846191 8 0.846191C7.448 0.846191 7 1.29419 7 1.84619V7.84619H1C0.448 7.84619 0 8.29419 0 8.84619C0 9.39819 0.448 9.84619 1 9.84619H7V15.8462C7 16.3982 7.448 16.8462 8 16.8462C8.552 16.8462 9 16.3982 9 15.8462V9.84619H15C15.552 9.84619 16 9.39819 16 8.84619C16 8.29419 15.552 7.84619 15 7.84619Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Plus;

package/src/Icon/icons/UserCircleFill.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 UserCircleFill: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path
+      d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12.0081 7C13.6651 7 15.0081 8.343 15.0081 10C15.0081 11.657 13.6651 13 12.0081 13C10.3511 13 9.00806 11.657 9.00806 10C9.00806 8.343 10.3511 7 12.0081 7ZM12 20.5C9.79 20.5 7.77001 19.65 6.26001 18.26C6.70001 16.88 7.84004 15.5699 10.29 15.5699H13.71C16.15 15.5699 17.29 16.89 17.74 18.26C16.23 19.65 14.21 20.5 12 20.5Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default UserCircleFill;

package/src/Icon/icons/UserCircleOutline.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 UserCircleOutline: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path
+      d="M22.75 12C22.75 6.072 17.928 1.25 12 1.25C6.072 1.25 1.25 6.072 1.25 12C1.25 15.47 2.90899 18.552 5.46899 20.519C5.47299 20.523 5.47903 20.5251 5.48303 20.5291C7.29403 21.9161 9.54898 22.75 12.001 22.75C14.453 22.75 16.708 21.9161 18.519 20.5291C18.523 20.5251 18.529 20.523 18.533 20.519C21.091 18.552 22.75 15.47 22.75 12ZM2.75 12C2.75 6.899 6.899 2.75 12 2.75C17.101 2.75 21.25 6.899 21.25 12C21.25 14.523 20.232 16.8121 18.588 18.4821C18.139 16.5811 16.702 14.8199 13.71 14.8199H10.29C7.29804 14.8199 5.85999 16.5811 5.41199 18.4821C3.76799 16.8121 2.75 14.523 2.75 12ZM6.75903 19.614C6.81703 18.588 7.28604 16.3199 10.29 16.3199H13.71C16.714 16.3199 17.183 18.588 17.241 19.614C15.75 20.644 13.945 21.25 12 21.25C10.055 21.25 8.25003 20.643 6.75903 19.614ZM12.0081 13.75C14.0751 13.75 15.7581 12.068 15.7581 10C15.7581 7.932 14.0751 6.25 12.0081 6.25C9.94106 6.25 8.25806 7.932 8.25806 10C8.25806 12.068 9.94006 13.75 12.0081 13.75ZM12.0081 7.75C13.2481 7.75 14.2581 8.759 14.2581 10C14.2581 11.241 13.2481 12.25 12.0081 12.25C10.7681 12.25 9.75806 11.241 9.75806 10C9.75806 8.759 10.7681 7.75 12.0081 7.75Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default UserCircleOutline;

package/src/Icon/type.tsx

@@ -3,7 +3,6 @@
 import { type ViewStyle } from 'react-native';
 
 export type IconNameProps =
-  | 'Home'
   | 'Search'
   | 'User'
   | 'Eye'
@@ -27,7 +26,20 @@ export type IconNameProps =
   | 'AirPlane'
   | 'Camera'
   | 'Image'
-  | 'Times';
+  | 'Times'
+  | 'Plus'
+  | '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';
 
 export interface IconProps {
   name: IconNameProps;

package/src/Select/README.md

@@ -28,6 +28,8 @@ Komponen `Select` adalah komponen pemilihan data berbasis bottom sheet dengan du
 | `delaySearch`| `number`                                        | `300`         | Delay pencarian dalam milidetik |
 | `height`     | `BottomSheetHeighProps`                         | -             | Ukuran tinggi BottomSheet |
 | `onRefresh`  | `() => void`                                    | -             | Callback saat pull-to-refresh dilakukan |
+| `header`     | ReactElement| –              | Jika ingin chip mempunyai header.                          |
+| `footer`     | ReactElement| –              | Jika ingin chip mempunyai footer.                          |
 
 ## 📌 Contoh Penggunaan
 

package/src/Select/Select.tsx

@@ -28,6 +28,7 @@ export default function Select({
   onRefresh,
   refreshing,
   footer,
+  header,
   onEndReached,
 }: SelectProps) {
   // const [isOpenSelect, setIsOpenSelect] = useState<boolean | undefined>(false);
@@ -106,6 +107,7 @@ export default function Select({
             block
             refreshing={refreshing}
             footer={footer}
+            header={header}
           />
         )}
       </View>

package/src/Select/type.tsx

@@ -28,5 +28,6 @@ export interface SelectProps {
   onRefresh?: () => void;
   onEndReached?: () => void;
   refreshing?: boolean;
-  footer?: React.ReactElement;
+  footer?: React.ReactNode | (() => React.ReactNode);
+  header?: React.ReactNode | (() => React.ReactNode);
 }

package/src/Ui/Card.tsx

@@ -13,6 +13,7 @@ interface CardProps {
   style?: StyleProp<ViewStyle>;
   backgroundImage?: any;
   backgroundColor?: string;
+  borderColor?: string;
 }
 
 export default function Card({
@@ -20,6 +21,7 @@ export default function Card({
   style,
   backgroundImage,
   backgroundColor,
+  borderColor = Color.gray['100'],
 }: CardProps) {
   if (backgroundImage) {
     return (
@@ -37,6 +39,7 @@ export default function Card({
       style={[
         styles.container,
         style,
+        typeof borderColor === 'string' && { borderColor },
         typeof backgroundColor === 'string' && { backgroundColor },
       ]}
     >
@@ -48,7 +51,7 @@ export default function Card({
 const sharedCardStyle = {
   borderWidth: 1,
   borderRadius: 8,
-  borderColor: Color.gray['100'],
+  // borderColor: Color.gray['100'],
   padding: 10,
 };
 

package/src/Ui/README_CARD.md

@@ -52,6 +52,27 @@ export default function CardScreen() {
             ever since the 1500s,
           </Typography>
         </Card>
+        <Typography variant="h4" weight="semibold">
+          Border color
+        </Typography>
+        <Card
+          backgroundColor={Color.purple[50]}
+          borderColor={Color.purple[200]}
+          style={{ width: '48%' }}
+        >
+          <Icon
+            name="bookmark-user"
+            size={30}
+            color={Color.purple[500]}
+            style={{ marginBottom: 8 }}
+          />
+          <Typography color={Color.gray[900]} weight="semibold" variant="p3">
+            200 Juta Tiket
+          </Typography>
+          <Typography color={Color.gray[600]} variant="t3">
+            Selesai Dikerjakan
+          </Typography>
+        </Card>
       </Container>
     </View>
   );
@@ -67,6 +88,7 @@ export default function CardScreen() {
 | `style`           | `StyleProp<ViewStyle>`        | ❌     | -       | Gaya tambahan untuk Card (padding, margin, dsb).     |
 | `backgroundImage` | `ImageSourcePropType` (`any`) | ❌     | -       | Gambar latar belakang menggunakan `ImageBackground`. |
 | `backgroundColor` | `string`                      | ❌     | `#fff`  | Warna latar belakang Card.                           |
+| `borderColor`     | `string`                      | ❌     | `#F2F2F2`  | Warna border.                           |
 
 ## Catatan 
 - Saat backgroundImage digunakan, ImageBackground akan membungkus children dan otomatis mengikuti styling dari Card.

package/lib/module/Icon/icons/Home.js

@@ -1,8 +0,0 @@
-"use strict";
-
-import { View } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function Home() {
-  return /*#__PURE__*/_jsx(View, {});
-}
-//# sourceMappingURL=Home.js.map

package/lib/module/Icon/icons/Home.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["View","jsx","_jsx","Home"],"sourceRoot":"../../../../src","sources":["Icon/icons/Home.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpC,eAAe,SAASC,IAAIA,CAAA,EAAG;EAC7B,oBAAOD,IAAA,CAACF,IAAI,IAAO,CAAC;AACtB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-export default function Home(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Home.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../../../../src/Icon/icons/Home.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,IAAI,4CAE3B"}

package/src/Icon/icons/Home.tsx

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