@adiraku/react-native-ui 1.0.5 → 1.1.1

package/lib/typescript/icons/vehicles/IconMinus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconMinus.d.ts","sourceRoot":"","sources":["../../../../src/icons/vehicles/IconMinus.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,eAAO,MAAM,SAAS,UAAW,SAAS,gBAyBzC,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,SAAS,gBAyB/C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adiraku/react-native-ui",
-  "version": "1.0.5",
+  "version": "1.1.1",
   "description": "UI library for Adiraku apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/TextArea/TextArea.component.tsx

@@ -31,13 +31,13 @@ const TextArea: React.FunctionComponent<TextAreaProps> = (props) => {
     event: NativeSyntheticEvent<TextInputFocusEventData>
   ) => {
     setFocused(true);
-    onBlur(event);
+    onFocus(event);
   };
   const handleOnBlur = (
     event: NativeSyntheticEvent<TextInputFocusEventData>
   ) => {
     if (value === '') {
-      onFocus(event);
+      onBlur(event);
     }
     setFocused(false);
   };

package/src/components/TextInput/TextInput.component.tsx

@@ -61,12 +61,12 @@ const TextInput: React.FunctionComponent<TextInputProps> = (props) => {
     event: NativeSyntheticEvent<TextInputFocusEventData>
   ) => {
     setFocused(true);
-    onBlur(event);
+    onFocus(event);
   };
   const handleOnBlur = (
     event: NativeSyntheticEvent<TextInputFocusEventData>
   ) => {
-    onFocus(event);
+    onBlur(event);
     setFocused(false);
   };
 

package/src/components/button/button.component.tsx

@@ -15,6 +15,8 @@ const Button: React.FC<ButtonProps> = (props) => {
     size = 'small',
     containerStyles,
     textStyles,
+    enablePressWhenDisabled = false,
+    disabled = false,
     ...rest
   } = props;
 
@@ -32,6 +34,7 @@ const Button: React.FC<ButtonProps> = (props) => {
       underlayColor={
         variant !== 'primary' ? Palettes.blue[50] : Palettes.black[800]
       }
+      disabled={!enablePressWhenDisabled && disabled}
       {...rest}
     >
       <Typography

package/src/components/button/button.type.ts

@@ -26,4 +26,10 @@ export interface ButtonProps extends TouchableOpacityProps {
    * The styles of the text inside button, extended from TextStyle
    */
   textStyles?: TextStyle;
+
+  /**
+   * Enable the Press action, when the button state is disabled.
+   * Usable for logging the user press on disabled button etc.
+   */
+  enablePressWhenDisabled?: boolean;
 }

package/src/icons/actions/IconBeliMobil.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { Palettes } from '../../themes';
+
+import type { IconProps } from '../../types';
+
+export const IconBeliMobil = (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 14.5H6.5c-.55 0-1 .45-1 1s.45 1 1 1H8c.55 0 1-.45 1-1s-.45-1-1-1zM17.5 14.5H16c-.55 0-1 .45-1 1s.45 1 1 1h1.5c.55 0 1-.45 1-1s-.45-1-1-1z"
+        fill={fill}
+      />
+      <Path
+        d="M22 10.5c0-.55-.45-1-1-1h-1.1C21.15 8.82 22 7.52 22 6c0-2.21-1.79-4-4-4s-4 1.79-4 4H7.62c-.77 0-1.45.42-1.79 1.11L4.63 9.5H3c-.55 0-1 .45-1 1s.45 1 1 1h.12c-.39.34-.65.81-.68 1.36l-.36 5c-.04.55.15 1.1.53 1.5.36.39.87.62 1.39.64v.5c0 .83.67 1.5 1.5 1.5S7 21.33 7 20.5V20h10v.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V20c.52-.02 1.03-.25 1.39-.64.38-.4.57-.95.53-1.5l-.36-5a1.95 1.95 0 00-.68-1.36H21c.55 0 1-.45 1-1zm-4-7a2.5 2.5 0 010 5 2.5 2.5 0 010-5zM7.62 8h6.93c.59 1.01 1.6 1.74 2.79 1.93l.53 1.07H6.12l1.5-3zM4.07 18l.36-5h15.14l.36 5H4.07z"
+        fill={fill}
+      />
+      <Path
+        d="M17.5 6.5v1c0 .28.22.5.5.5s.5-.22.5-.5v-1h1c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-1v-1c0-.28-.22-.5-.5-.5s-.5.22-.5.5v1h-1c-.28 0-.5.22-.5.5s.22.5.5.5h1z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};
+
+export const IconBeliMobilFilled = (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="M22 10.5c0-.55-.45-1-1-1h-1.1C21.15 8.82 22 7.52 22 6c0-2.21-1.79-4-4-4s-4 1.79-4 4H7.62c-.77 0-1.45.42-1.79 1.11L4.63 9.5H3c-.55 0-1 .45-1 1s.45 1 1 1h.12c-.39.34-.65.81-.68 1.36l-.36 5c-.04.55.15 1.1.53 1.5.36.39.87.62 1.39.64v.5c0 .83.67 1.5 1.5 1.5S7 21.33 7 20.5V20h10v.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V20c.52-.02 1.03-.25 1.39-.64.38-.4.57-.95.53-1.5l-.36-5a1.95 1.95 0 00-.68-1.36H21c.55 0 1-.45 1-1zm-5.5-5h1v-1c0-.28.22-.5.5-.5s.5.22.5.5v1h1c.28 0 .5.22.5.5s-.22.5-.5.5h-1v1c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-1h-1c-.28 0-.5-.22-.5-.5s.22-.5.5-.5zM7.62 8h6.93c.56.97 1.51 1.69 2.65 1.92l.68 1.58H6.12L7.62 8zM8 16.5H6.5c-.55 0-1-.45-1-1s.45-1 1-1H8c.55 0 1 .45 1 1s-.45 1-1 1zm9.5 0H16c-.55 0-1-.45-1-1s.45-1 1-1h1.5c.55 0 1 .45 1 1s-.45 1-1 1z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconCamera.tsx

@@ -30,3 +30,28 @@ export const IconCamera = (props: IconProps) => {
     </Svg>
   );
 };
+
+export const IconCameraFilled = (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.14 5.83h-1.43c0-1.56-1.29-2.83-2.86-2.83H9.14C7.57 3 6.28 4.28 6.28 5.83H4.85c-1.57 0-2.86 1.28-2.86 2.83v9.5c0 1.56 1.29 2.83 2.86 2.83h14.29c1.57 0 2.86-1.28 2.86-2.83v-9.5c0-1.56-1.29-2.83-2.86-2.83zM12 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconChat.tsx

@@ -30,3 +30,28 @@ export const IconChat = (props: IconProps) => {
     </Svg>
   );
 };
+
+export const IconChatFilled = (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="M12.42 2h-.83C6.29 2 2 6.29 2 11.58v.83c0 5.29 4.29 9.58 9.58 9.58h8.38c1.13 0 2.04-.91 2.04-2.04v-8.38c0-5.29-4.29-9.58-9.58-9.58V2zM16 15h-5c-.55 0-1-.45-1-1s.45-1 1-1h5c.55 0 1 .45 1 1s-.45 1-1 1zm0-4H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconCopy.tsx

@@ -36,3 +36,36 @@ export const IconCopy = (props: IconProps) => {
     </Svg>
   );
 };
+
+export const IconCopyFilled = (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="M19 18h-9c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h6.04c.61 0 1.18.28 1.56.75l2.96 3.7c.28.35.44.8.44 1.25V16c0 1.1-.9 2-2 2z"
+        fill={fill}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7 16V6C5.34 6 4 7.34 4 9v10c0 1.66 1.34 3 3 3h7c1.66 0 3-1.34 3-3h-7c-1.66 0-3-1.34-3-3z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconDot.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { Palettes } from '../../themes';
+
+import type { IconProps } from '../../types';
+
+export const IconDot = (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 13c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zM16 13c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zM8 13c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};
+
+export const IconDotFilled = (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 2zM8 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm4 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm4 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconEdit.tsx

@@ -30,3 +30,28 @@ export const IconEdit = (props: IconProps) => {
     </Svg>
   );
 };
+
+export const IconEditFilled = (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="M12.04 5.45l-8.13 8.14c-.38.38-.65.86-.78 1.38L2.07 19.2c-.37 1.46.77 2.8 2.18 2.8.18 0 .37-.02.56-.07l4.23-1.06c.52-.13 1-.4 1.38-.78l8.13-8.13-6.51-6.51zM21.66 4.87c-.23-.57-.57-1.08-1.01-1.52-.44-.44-.96-.78-1.52-1.01-.55-.22-1.14-.34-1.73-.34-.59 0-1.18.11-1.73.34-.57.23-1.08.57-1.52 1.01l-.45.45-.24.24 6.51 6.51.24-.24.45-.44c.44-.44.78-.96 1.01-1.52.22-.55.34-1.14.34-1.73 0-.59-.11-1.18-.34-1.73l-.01-.02z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconEmail.tsx

@@ -28,3 +28,28 @@ export const IconEmail = (props: IconProps) => {
     </Svg>
   );
 };
+
+export const IconEmailFilled = (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.71 3.71l-5.59 5.59c-.57.57-1.32.88-2.12.88s-1.55-.31-2.12-.88L4.29 7.71A.996.996 0 115.7 6.3l5.59 5.59c.38.38 1.04.38 1.41 0l5.59-5.59a.996.996 0 111.41 1.41h.01z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconFilter.tsx

@@ -50,3 +50,32 @@ export const IconFilter = (props: IconProps) => {
     </Svg>
   );
 };
+
+export const IconFilterFilled = (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="M21 9H3c-.55 0-1-.45-1-1s.45-1 1-1h18c.55 0 1 .45 1 1s-.45 1-1 1zM21 17H3c-.55 0-1-.45-1-1s.45-1 1-1h18c.55 0 1 .45 1 1s-.45 1-1 1z"
+        fill={fill}
+      />
+      <Path
+        d="M8 12c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zM16 20c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconGallery.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { Palettes } from '../../themes';
+
+import type { IconProps } from '../../types';
+
+export const IconGallery = (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 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h14zm0-2H5C3.34 4 2 5.34 2 7v10c0 1.66 1.34 3 3 3h14c1.66 0 3-1.34 3-3V7c0-1.66-1.34-3-3-3z"
+        fill={fill}
+      />
+      <Path
+        d="M17 20c-.26 0-.51-.1-.71-.29L8.7 12.12a.996.996 0 00-1.41 0l-3.2 3.2a.996.996 0 11-1.41-1.41l3.2-3.2c1.13-1.13 3.11-1.13 4.24 0l7.59 7.59A.996.996 0 0117 20z"
+        fill={fill}
+      />
+      <Path
+        d="M21 18c-.26 0-.51-.1-.71-.29l-3.59-3.59a.996.996 0 00-1.41 0l-1.59 1.59a.996.996 0 11-1.41-1.41l1.59-1.59a3 3 0 014.24 0l3.59 3.59A.996.996 0 0121 18zM17 11c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};
+
+export const IconGalleryFilled = (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.34 4 2 5.34 2 7v7.53l3.88-3.84a3.006 3.006 0 014.23.01L13 13.59l.88-.88a3 3 0 014.24 0L22 16.59V7c0-1.66-1.34-3-3-3zm-1 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+        fill={fill}
+      />
+      <Path
+        d="M15.29 14.12l-1.58 1.58a.996.996 0 01-1.41 0l-3.59-3.59c-.39-.38-1.02-.38-1.41 0l-5.27 5.21A2.987 2.987 0 005.01 20h14c.98 0 1.85-.47 2.39-1.19l-4.68-4.69c-.39-.39-1.03-.39-1.42 0h-.01z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconHelp.tsx

@@ -30,3 +30,30 @@ export const IconHelp = (props: IconProps) => {
     </Svg>
   );
 };
+
+export const IconHelpFilled = (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="M22 12c0 5.52-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2s10 4.48 10 10zM9.5 9.87c.48.28 1.09.11 1.37-.36.96-1.39 2.81.46 1.29 1.36-.27.16-.63.43-.9.76-.26.31-.49.74-.52 1.27v.1c0 .55.45 1 1 1 .76 0 .91-.4 1.05-.81.09-.26.19-.53.45-.69.83-.51 1.5-1.4 1.5-2.5 0-1.66-1.34-3-3-3-1.11 0-2.08.61-2.6 1.5-.28.48-.11 1.09.36 1.37zM10.73 16c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconInfo.tsx

@@ -36,3 +36,30 @@ export const IconInfo = (props: IconProps) => {
     </Svg>
   );
 };
+
+export const IconInfoFilled = (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.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 13.5c0 .55-.45 1-1 1s-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4zm0-7c0 .55-.45 1-1 1s-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v.5z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconJualMobil.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { Palettes } from '../../themes';
+
+import type { IconProps } from '../../types';
+
+export const IconJualMobil = (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 14.5H6.5c-.55 0-1 .45-1 1s.45 1 1 1H8c.55 0 1-.45 1-1s-.45-1-1-1zM17.5 14.5H16c-.55 0-1 .45-1 1s.45 1 1 1h1.5c.55 0 1-.45 1-1s-.45-1-1-1zM16.76 12.49c-.27 0-.52-.11-.71-.29l-4.24-4.24a.99.99 0 01-.29-.71V4.42c0-.27.11-.52.29-.71l1.41-1.41a.99.99 0 01.71-.29h2.83c.27 0 .52.11.71.29l4.24 4.24c.39.39.39 1.02 0 1.41l-4.24 4.24a.99.99 0 01-.71.29v.01zm-3.24-5.66l3.24 3.24 2.83-2.83L16.35 4h-2l-.83.83v2z"
+        fill={fill}
+      />
+      <Path
+        d="M14.99 5.97a.5.5 0 100-1 .5.5 0 000 1zM20.88 11.5H21c.55 0 1-.45 1-1 0-.38-.22-.72-.54-.89l-3.29 3.29s-.08.08-.12.1h1.52l.36 5H4.07l.36-5h11.03s-.08-.06-.12-.1l-1.9-1.9H6.12l1.5-3H9.5c.55 0 1-.45 1-1s-.45-1-1-1H7.62c-.77 0-1.45.42-1.79 1.11L4.63 9.5H3c-.55 0-1 .45-1 1s.45 1 1 1h.12c-.39.34-.65.81-.68 1.36l-.36 5c-.04.55.15 1.1.53 1.5.36.39.87.62 1.39.64v.5c0 .83.67 1.5 1.5 1.5S7 21.33 7 20.5V20h10v.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V20c.52-.02 1.03-.25 1.39-.64.38-.4.57-.95.53-1.5l-.36-5a1.95 1.95 0 00-.68-1.36z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};
+
+export const IconJualMobilFilled = (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="M21.71 6.54L17.47 2.3a.99.99 0 00-.71-.29h-2.83c-.27 0-.52.11-.71.29l-1.41 1.41a.99.99 0 00-.29.71v2.83c0 .27.11.52.29.71l4.24 4.24c.19.19.44.29.71.29.27 0 .52-.11.71-.29l4.24-4.24a.996.996 0 000-1.41v-.01zm-7.36-1.71c-.2.2-.51.2-.71 0-.2-.2-.2-.51 0-.71.2-.2.51-.2.71 0 .2.2.2.51 0 .71z"
+        fill={fill}
+      />
+      <Path
+        d="M20.88 11.5H21c.55 0 1-.45 1-1 0-.38-.22-.72-.54-.89l-3.29 3.29c-.38.38-.88.59-1.41.59-.53 0-1.04-.21-1.42-.59l-1.4-1.4H6.12L7.62 8H9.5c.55 0 1-.45 1-1s-.45-1-1-1H7.62c-.77 0-1.45.42-1.79 1.11L4.63 9.5H3c-.55 0-1 .45-1 1s.45 1 1 1h.12c-.39.34-.65.81-.68 1.36l-.36 5c-.04.55.15 1.1.53 1.5.36.39.87.62 1.39.64v.5c0 .83.67 1.5 1.5 1.5S7 21.33 7 20.5V20h10v.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V20c.52-.02 1.03-.25 1.39-.64.38-.4.57-.95.53-1.5l-.36-5a1.95 1.95 0 00-.68-1.36zM8 16.5H6.5c-.55 0-1-.45-1-1s.45-1 1-1H8c.55 0 1 .45 1 1s-.45 1-1 1zm9.5 0H16c-.55 0-1-.45-1-1s.45-1 1-1h1.5c.55 0 1 .45 1 1s-.45 1-1 1z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconLike.tsx

@@ -28,3 +28,28 @@ export const IconLike = (props: IconProps) => {
     </Svg>
   );
 };
+
+export const IconLikeFilled = (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="M16.68 21H11c-1.65 0-3-1.35-3-3v-7.28c0-.7.25-1.38.7-1.92l4.54-5.44a1.001 1.001 0 011.76.8L14.19 9h5.82c1.1 0 2 .9 2 2v1.18c0 .68-.14 1.34-.4 1.97l-2.16 5.03A3.007 3.007 0 0116.69 21h-.01zM5 10H3a1 1 0 00-1 1v9a1 1 0 001 1h2a1 1 0 001-1v-9a1 1 0 00-1-1z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};

package/src/icons/actions/IconMinus.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { Palettes } from '../../themes';
+
+import type { IconProps } from '../../types';
+
+export const IconMinus = (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="M11.75 21.5c5.385 0 9.75-4.365 9.75-9.75S17.135 2 11.75 2 2 6.365 2 11.75s4.365 9.75 9.75 9.75zm0-1.5a8.25 8.25 0 110-16.5 8.25 8.25 0 010 16.5zM8 11.75c0-.414.387-.75.865-.75h5.77c.478 0 .865.336.865.75s-.387.75-.865.75h-5.77c-.478 0-.865-.336-.865-.75z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};
+
+export const IconMinusFilled = (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 11H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};