@adiraku/react-native-ui 0.1.14 → 0.1.16

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

@@ -2,10 +2,12 @@ export { IconArrowLeft } from './navigations/IconArrowLeft';
 export { IconArrowRight } from './navigations/IconArrowRight';
 export { IconArrowUp } from './navigations/IconArrowUp';
 export { IconArrowDown } from './navigations/IconArrowDown';
+export { IconArrowDiagonal } from './navigations/IconArrowDiagonal';
 export { IconChevronDown } from './navigations/IconChevronDown';
 export { IconChevronUp } from './navigations/IconChevronUp';
 export { IconChevronRight } from './navigations/IconChevronRight';
 export { IconChevronLeft } from './navigations/IconChevronLeft';
+export { IconClose } from './navigations/IconClose';
 export { IconAddMinus } from './actions/IconAddMinus';
 export { IconAddPlus } from './actions/IconAddPlus';
 export { IconAddRemove } from './actions/IconAddRemove';
@@ -36,6 +38,13 @@ export { IconEdit } from './actions/IconEdit';
 export { IconFilter } from './actions/IconFilter';
 export { IconCustomerService } from './actions/IconCustomerService';
 export { IconAttach } from './actions/IconAttach';
+export { IconSeeShow } from './actions/IconSeeShow';
+export { IconSeeHide } from './actions/IconSeeHide';
+export { IconReload } from './actions/IconReload';
+export { IconOther } from './actions/IconOther';
+export { IconEmail } from './actions/IconEmail';
+export { IconSorting } from './actions/IconSorting';
+export { IconHamburger } from './actions/IconHamburger';
 export { IconMyLocation } from './misc/IconMyLocation';
 export { IconHistory } from './misc/IconHistory';
 export { IconGroup } from './misc/IconGroup';

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

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

package/lib/typescript/icons/navigations/IconArrowDiagonal.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { IconProps } from '../../types';
+export declare const IconArrowDiagonal: (props: IconProps) => JSX.Element;
+//# sourceMappingURL=IconArrowDiagonal.d.ts.map

package/lib/typescript/icons/navigations/IconArrowDiagonal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconArrowDiagonal.d.ts","sourceRoot":"","sources":["../../../../src/icons/navigations/IconArrowDiagonal.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,eAAO,MAAM,iBAAiB,UAAW,SAAS,gBAgCjD,CAAC"}

package/lib/typescript/icons/navigations/IconClose.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { IconProps } from '../../types';
+export declare const IconClose: (props: IconProps) => JSX.Element;
+//# sourceMappingURL=IconClose.d.ts.map

package/lib/typescript/icons/navigations/IconClose.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconClose.d.ts","sourceRoot":"","sources":["../../../../src/icons/navigations/IconClose.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,eAAO,MAAM,SAAS,UAAW,SAAS,gBA+BzC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adiraku/react-native-ui",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "test",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/CheckBoxInput/CheckBoxInput.component.tsx

@@ -132,6 +132,11 @@ const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
     bottomSheetref.current?.close();
   };
 
+  const handleOnBottomSheetDismiss = () => {
+    setSelectedValue(value);
+    onInputDismiss();
+  };
+
   const openBottomSheet = () => {
     if (!disabled && editable) {
       bottomSheetref.current?.open();
@@ -177,7 +182,7 @@ const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
       </TouchableWithoutFeedback>
       <BottomSheet
         ref={bottomSheetref}
-        onDismiss={onInputDismiss}
+        onDismiss={handleOnBottomSheetDismiss}
         {...bottomSheetOpt}
       >
         <FlatList

package/src/components/RadioInput/RadioInput.component.tsx

@@ -102,6 +102,11 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
     ref.current?.close();
   };
 
+  const handleOnBottomSheetDismiss = () => {
+    onInputDismiss();
+    setSelectedValue(value);
+  };
+
   const openBottomSheet = () => {
     if (!disabled && editable) {
       ref.current?.open();
@@ -145,7 +150,11 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
           ) : null}
         </View>
       </TouchableWithoutFeedback>
-      <BottomSheet onDismiss={onInputDismiss} ref={ref} {...bottomSheetOpt}>
+      <BottomSheet
+        onDismiss={handleOnBottomSheetDismiss}
+        ref={ref}
+        {...bottomSheetOpt}
+      >
         <FlatList
           data={data}
           renderItem={(item) => (

package/src/components/TextArea/TextArea.style.tsx

@@ -30,7 +30,6 @@ export const getStyle = (props: TextAreaProps, isFocused: boolean) => {
 
   computedStyle.fieldContainer = {
     width: '100%',
-    gap: Spacing[8],
   };
 
   computedStyle.label = {
@@ -43,6 +42,7 @@ export const getStyle = (props: TextAreaProps, isFocused: boolean) => {
     borderColor: stateColor.border,
     padding: Spacing[12],
     backgroundColor: editable ? Palettes.white[50] : Palettes.grey[50],
+    marginVertical: Spacing[8],
   };
 
   computedStyle.TextInput = {
@@ -54,7 +54,6 @@ export const getStyle = (props: TextAreaProps, isFocused: boolean) => {
     lineHeight: 21,
     fontFamily: 'Montserrat-Regular',
     color: Palettes.black[900],
-    verticalAlign: 'top',
   };
 
   computedStyle.counter = {

package/src/components/coachmark/coachmark.style.tsx

@@ -50,11 +50,11 @@ export const getStyle = (props: CoachmarkProps) => {
 
   computedStyle.headerContainer = {
     flexDirection: 'row',
-    gap: Spacing[16],
   };
 
   computedStyle.title = {
     flex: 1,
+    marginRight: Spacing[16],
   };
 
   computedStyle.arrowPointer = {

package/src/components/countdown/countdown.component.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Typography } from '../typography/typography.component';
+
+import type { CountdownProps } from './countdown.type';
+
+import { getStyle } from './countdown.style';
+
+const Countdown: React.FunctionComponent<CountdownProps> = (props) => {
+  const { targetDateTime } = props;
+
+  const computedStyle = getStyle();
+
+  const [timeLeft, setTimeLeft] = React.useState(
+    calculateTimeRemaining(targetDateTime)
+  );
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeRemaining(targetDateTime));
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  const formatTime = (time: number) => {
+    if (time <= 0) {
+      return {
+        days: `0 hari`,
+        hours: appendZero(0),
+        minutes: appendZero(0),
+        seconds: appendZero(0),
+      };
+    }
+
+    const days = Math.floor(time / (1000 * 60 * 60 * 24));
+    const hours = appendZero(Math.floor((time / (1000 * 60 * 60)) % 24));
+    const minutes = appendZero(Math.floor((time / 1000 / 60) % 60));
+    const seconds = appendZero(Math.floor((time / 1000) % 60));
+
+    return { days: `${days} hari`, hours, minutes, seconds };
+  };
+
+  return (
+    <View style={[computedStyle.container]}>
+      <View style={[computedStyle.textContainer]}>
+        <Typography variant="overline" style={[computedStyle.textLabel]}>
+          {formatTime(timeLeft).days}
+        </Typography>
+      </View>
+
+      <View style={[computedStyle.dividerContainer]}>
+        <Typography variant="overline">:</Typography>
+      </View>
+
+      <View style={[computedStyle.textContainer]}>
+        <Typography variant="overline" style={[computedStyle.textLabel]}>
+          {formatTime(timeLeft).hours}
+        </Typography>
+      </View>
+      <View style={[computedStyle.dividerContainer]}>
+        <Typography variant="overline">:</Typography>
+      </View>
+      <View style={[computedStyle.textContainer]}>
+        <Typography variant="overline" style={[computedStyle.textLabel]}>
+          {formatTime(timeLeft).minutes}
+        </Typography>
+      </View>
+      <View style={[computedStyle.dividerContainer]}>
+        <Typography variant="overline">:</Typography>
+      </View>
+      <View style={[computedStyle.textContainer]}>
+        <Typography variant="overline" style={[computedStyle.textLabel]}>
+          {formatTime(timeLeft).seconds}
+        </Typography>
+      </View>
+    </View>
+  );
+};
+
+const calculateTimeRemaining = (
+  targetDateTime: CountdownProps['targetDateTime']
+): number => {
+  const currentTime = new Date().getTime();
+  const targetTime = new Date(targetDateTime).getTime();
+  const difference = targetTime - currentTime;
+  return Math.max(0, difference);
+};
+
+const appendZero = (num: string | number) => {
+  if (Number(num) < 10) {
+    return `0${0}`;
+  }
+
+  return num;
+};
+
+export { Countdown };

package/src/components/countdown/countdown.style.tsx

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native';
+
+import { Palettes, Radius, Spacing } from '../../themes';
+
+import type { TextStyle, ViewStyle } from 'react-native';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  textLabel?: TextStyle;
+  textContainer?: ViewStyle;
+  dividerContainer?: ViewStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    flexDirection: 'row',
+  };
+
+  computedStyle.textLabel = {
+    color: Palettes.white[50],
+  };
+
+  computedStyle.textContainer = {
+    backgroundColor: Palettes.black[900],
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: Radius[4],
+    paddingHorizontal: Spacing[4],
+    minWidth: 22,
+    height: 18,
+  };
+
+  computedStyle.dividerContainer = {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 8,
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/countdown/countdown.type.ts

@@ -0,0 +1,6 @@
+export interface CountdownProps {
+  /**
+   * The target time in Date format, ex: 'YYYY-MM-DD hh:mm:ss'
+   */
+  targetDateTime: string | number | Date;
+}

package/src/components/index.ts

@@ -21,6 +21,7 @@ export { Switch } from './switch/switch.component';
 export { Dot } from './dot/dot.component';
 export { InformationBox } from './information-box/information-box.component';
 export { RoundedTab } from './rounded-tab/rounded-tab.component';
+export { Countdown } from './countdown/countdown.component';
 
 export type { ButtonProps } from './button/button.type';
 export type { TextInputProps } from './TextInput/TextInput.type';

package/src/components/slider-indicator/slider-indicator.style.tsx

@@ -1,6 +1,6 @@
 import type { ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
-import { Palettes, Radius, Spacing } from '../../themes';
+import { Palettes, Radius } from '../../themes';
 
 interface ComputedStyleProps {
   container?: ViewStyle;
@@ -13,7 +13,6 @@ export const getStyle = () => {
 
   computedStyle.container = {
     flexDirection: 'row',
-    gap: Spacing[4],
   };
 
   computedStyle.sliderItem = {
@@ -21,6 +20,7 @@ export const getStyle = () => {
     width: 4,
     borderRadius: Radius.full,
     backgroundColor: Palettes.grey[500],
+    marginHorizontal: 2,
   };
 
   computedStyle.activeSlider = {

package/src/icons/actions/IconEmail.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { Palettes } from '../../themes';
+
+import type { IconProps } from '../../types';
+
+export const IconEmail = (props: IconProps) => {
+  const {
+    width = 24,
+    height = 24,
+    fill = Palettes.black[900],
+    ...rest
+  } = props;
+
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      // xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <Path
+        d="M19 4H5C3.35 4 2 5.35 2 7v10c0 1.65 1.35 3 3 3h14c1.65 0 3-1.35 3-3V7c0-1.65-1.35-3-3-3zm-.44 2.01l-5.85 5.87c-.38.38-1.04.38-1.42 0L5.43 6.01h13.13zM20 17c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V7.4l5.88 5.89c.57.57 1.32.88 2.12.88s1.56-.31 2.12-.88L20 7.4V17z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconHamburger.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { Palettes } from '../../themes';
+
+import type { IconProps } from '../../types';
+
+export const IconHamburger = (props: IconProps) => {
+  const {
+    width = 24,
+    height = 24,
+    fill = Palettes.black[900],
+    ...rest
+  } = props;
+
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      // xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 6.333c0-.46.373-.833.833-.833h18.334a.833.833 0 010 1.667H2.833A.833.833 0 012 6.333zM2 12c0-.46.373-.833.833-.833h18.334a.833.833 0 010 1.666H2.833A.833.833 0 012 12zM2 17.667c0-.46.373-.834.833-.834h18.334a.833.833 0 010 1.667H2.833A.833.833 0 012 17.667z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconOther.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { Palettes } from '../../themes';
+
+import type { IconProps } from '../../types';
+
+export const IconOther = (props: IconProps) => {
+  const {
+    width = 24,
+    height = 24,
+    fill = Palettes.black[900],
+    ...rest
+  } = props;
+
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      // xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zM4 12c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8-8 8-8-3.6-8-8z"
+        fill={fill}
+      />
+      <Path
+        d="M12 13a1 1 0 100-2 1 1 0 000 2zM16 13a1 1 0 100-2 1 1 0 000 2zM8 13a1 1 0 100-2 1 1 0 000 2z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconReload.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { Palettes } from '../../themes';
+
+import type { IconProps } from '../../types';
+
+export const IconReload = (props: IconProps) => {
+  const {
+    width = 24,
+    height = 24,
+    fill = Palettes.black[900],
+    ...rest
+  } = props;
+
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      // xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <Path
+        d="M14.18 8.37c.04.52.48.92 1 .92h.08l3.75-.31c.41-.03.76-.32.88-.71l1.08-3.6a1.003 1.003 0 00-1.92-.58l-.52 1.73A8.92 8.92 0 0012.01 3C7.04 2.99 3 7.03 3 11.99s4.04 9 9 9c3.73 0 7.12-2.34 8.43-5.83a1.01 1.01 0 00-.58-1.29c-.51-.19-1.09.07-1.29.58-1.02 2.71-3.65 4.54-6.55 4.54-3.86 0-7-3.14-7-7s3.14-7 7-7c1.93 0 3.72.78 5.02 2.14l-1.93.16c-.55.05-.96.53-.91 1.08h-.01z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconSeeHide.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import Svg, { G, Path } from 'react-native-svg';
+import { Palettes } from '../../themes';
+
+import type { IconProps } from '../../types';
+
+export const IconSeeHide = (props: IconProps) => {
+  const {
+    width = 24,
+    height = 24,
+    fill = Palettes.black[900],
+    ...rest
+  } = props;
+
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      // xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <G fill={fill}>
+        <Path d="M12 7.247c3.35 0 6.48 1.72 8.25 4.5-1.76 2.78-4.9 4.5-8.25 4.5-3.35 0-6.48-1.72-8.25-4.5 1.76-2.78 4.9-4.5 8.25-4.5zm0-1.5c-3.99 0-7.71 2.11-9.7 5.5l-.3.5.3.5c2.01 3.39 5.72 5.5 9.7 5.5 3.98 0 7.71-2.11 9.7-5.5l.3-.5-.3-.5c-2.01-3.39-5.71-5.5-9.7-5.5z" />
+        <Path d="M12 15.998a4.26 4.26 0 01-4.25-4.25A4.26 4.26 0 0112 7.498a4.26 4.26 0 014.25 4.25 4.26 4.26 0 01-4.25 4.25zm0-7c-1.52 0-2.75 1.23-2.75 2.75s1.23 2.75 2.75 2.75 2.75-1.23 2.75-2.75-1.23-2.75-2.75-2.75z" />
+        <Path d="M6 18.497c-.19 0-.38-.07-.53-.22a.754.754 0 010-1.06l12-12c.29-.29.77-.29 1.06 0 .29.29.29.77 0 1.06l-12 12c-.15.15-.34.22-.53.22z" />
+      </G>
+    </Svg>
+  );
+};

package/src/icons/actions/IconSeeShow.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Svg, { G, Path } from 'react-native-svg';
+import { Palettes } from '../../themes';
+
+import type { IconProps } from '../../types';
+
+export const IconSeeShow = (props: IconProps) => {
+  const {
+    width = 24,
+    height = 24,
+    fill = Palettes.black[900],
+    ...rest
+  } = props;
+
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      // xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <G fill={fill}>
+        <Path d="M12 7.5c3.35 0 6.48 1.72 8.25 4.5-1.76 2.78-4.9 4.5-8.25 4.5-3.35 0-6.48-1.72-8.25-4.5C5.51 9.22 8.65 7.5 12 7.5zM12 6c-3.99 0-7.71 2.11-9.7 5.5L2 12l.3.5C4.31 15.89 8.02 18 12 18c3.98 0 7.71-2.11 9.7-5.5l.3-.5-.3-.5C19.69 8.11 15.99 6 12 6z" />
+        <Path d="M12 16.25A4.26 4.26 0 017.75 12 4.26 4.26 0 0112 7.75 4.26 4.26 0 0116.25 12 4.26 4.26 0 0112 16.25zm0-7c-1.52 0-2.75 1.23-2.75 2.75s1.23 2.75 2.75 2.75 2.75-1.23 2.75-2.75S13.52 9.25 12 9.25z" />
+      </G>
+    </Svg>
+  );
+};

package/src/icons/actions/IconSorting.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { Palettes } from '../../themes';
+
+import type { IconProps } from '../../types';
+
+export const IconSorting = (props: IconProps) => {
+  const {
+    width = 24,
+    height = 24,
+    fill = Palettes.black[900],
+    ...rest
+  } = props;
+
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      // xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <Path
+        d="M8 21c-.6 0-1-.4-1-1V4c0-.6.4-1 1-1s1 .4 1 1v16c0 .6-.4 1-1 1z"
+        fill={fill}
+      />
+      <Path
+        d="M12 9c-.3 0-.5-.1-.7-.3L8 5.4 4.7 8.7c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l4-4c.4-.4 1-.4 1.4 0l4 4c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3zM16 21c-.6 0-1-.4-1-1V4c0-.6.4-1 1-1s1 .4 1 1v16c0 .6-.4 1-1 1z"
+        fill={fill}
+      />
+      <Path
+        d="M16 21c-.3 0-.5-.1-.7-.3l-4-4c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l3.3 3.3 3.3-3.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4 4c-.2.2-.4.3-.7.3z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/index.ts

@@ -2,10 +2,12 @@ export { IconArrowLeft } from './navigations/IconArrowLeft';
 export { IconArrowRight } from './navigations/IconArrowRight';
 export { IconArrowUp } from './navigations/IconArrowUp';
 export { IconArrowDown } from './navigations/IconArrowDown';
+export { IconArrowDiagonal } from './navigations/IconArrowDiagonal';
 export { IconChevronDown } from './navigations/IconChevronDown';
 export { IconChevronUp } from './navigations/IconChevronUp';
 export { IconChevronRight } from './navigations/IconChevronRight';
 export { IconChevronLeft } from './navigations/IconChevronLeft';
+export { IconClose } from './navigations/IconClose';
 
 export { IconAddMinus } from './actions/IconAddMinus';
 export { IconAddPlus } from './actions/IconAddPlus';
@@ -37,6 +39,13 @@ export { IconEdit } from './actions/IconEdit';
 export { IconFilter } from './actions/IconFilter';
 export { IconCustomerService } from './actions/IconCustomerService';
 export { IconAttach } from './actions/IconAttach';
+export { IconSeeShow } from './actions/IconSeeShow';
+export { IconSeeHide } from './actions/IconSeeHide';
+export { IconReload } from './actions/IconReload';
+export { IconOther } from './actions/IconOther';
+export { IconEmail } from './actions/IconEmail';
+export { IconSorting } from './actions/IconSorting';
+export { IconHamburger } from './actions/IconHamburger';
 
 export { IconMyLocation } from './misc/IconMyLocation';
 export { IconHistory } from './misc/IconHistory';

package/src/icons/navigations/IconArrowDiagonal.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg';
+import { Palettes } from '../../themes';
+
+import type { IconProps } from '../../types';
+
+export const IconArrowDiagonal = (props: IconProps) => {
+  const {
+    width = 24,
+    height = 24,
+    fill = Palettes.black[900],
+    ...rest
+  } = props;
+
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      // xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <G clipPath="url(#clip0_12_2167)">
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.364 16.95a1 1 0 102 0V5.636a1 1 0 00-1-1H7.05a1 1 0 000 2h8.9L4.93 17.657a1 1 0 101.414 1.414l11.02-11.02.001 8.899z"
+          fill={fill}
+        />
+      </G>
+      <Defs>
+        <ClipPath id="clip0_12_2167">
+          <Path fill="#fff" d="M0 0H24V24H0z" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+};