@sincpro/mobile-ui 0.1.2

package/sincpro_mobile_ui/Typography/Typography.Heading.tsx

@@ -0,0 +1,20 @@
+import type React from "react";
+import { FC } from "react";
+import type { TextProps } from "react-native";
+
+import { typographyVariants } from "../theme/typography";
+import { AppText } from "./Typography.Text";
+
+export interface TypographyProps extends TextProps {
+  variant?: keyof typeof typographyVariants;
+  color?: string;
+  bold?: boolean;
+  semibold?: boolean;
+  underline?: boolean;
+}
+
+const Heading: FC<TypographyProps> = ({ variant = "h1", ...props }) => {
+  return <AppText variant={variant} {...props} />;
+};
+
+export default Heading;

package/sincpro_mobile_ui/Typography/Typography.Text.tsx

@@ -0,0 +1,78 @@
+import type React from "react";
+import { Text, type TextProps, type TextStyle } from "react-native";
+
+import { cn } from "../theme/tw";
+import { fontFamilies, Typography, typographyVariants } from "../theme/typography";
+
+/**
+ * Typography.Text - Hybrid component (NativeWind + Style)
+ *
+ * Uses NativeWind className for: spacing, colors, transforms, alignment
+ * Uses style prop for: typography variants (fontFamily, fontSize, lineHeight)
+ *
+ * Reason: Custom fonts (Montserrat) not in Tailwind, complex typography system
+ *
+ * @deprecated color prop - Use className instead: className="text-primary" or className="text-gray-600"
+ */
+interface AppTextProps extends TextProps {
+  variant?: keyof typeof typographyVariants;
+  /** @deprecated Use className="text-{color}" instead */
+  color?: string;
+  bold?: boolean;
+  semibold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  align?: "left" | "center" | "right" | "justify";
+  transform?: "none" | "uppercase" | "lowercase" | "capitalize";
+  className?: string;
+}
+
+function AppText({
+  variant = "body",
+  color,
+  bold = false,
+  italic = false,
+  underline = false,
+  align = "left",
+  transform = "none",
+  semibold = false,
+  style,
+  className,
+  children,
+  ...props
+}: AppTextProps) {
+  const baseStyle = Typography.variants[variant];
+
+  const textClassName = cn(
+    "text-text-primary",
+    align === "center" && "text-center",
+    align === "right" && "text-right",
+    align === "justify" && "text-justify",
+    transform === "uppercase" && "uppercase",
+    transform === "lowercase" && "lowercase",
+    transform === "capitalize" && "capitalize",
+    underline && "underline",
+    italic && "italic",
+    className,
+  );
+
+  const textStyle: TextStyle = {
+    ...baseStyle,
+    ...(color ? { color } : {}),
+    fontFamily: bold
+      ? fontFamilies.extraBold
+      : semibold
+        ? fontFamilies.semiBold
+        : baseStyle.fontFamily,
+    ...(Array.isArray(style) ? Object.assign({}, ...style) : style),
+  };
+
+  return (
+    <Text className={textClassName} style={textStyle} {...props}>
+      {children}
+    </Text>
+  );
+}
+
+export default AppText;
+export { AppText };

package/sincpro_mobile_ui/Typography/index.ts

@@ -0,0 +1,11 @@
+import Heading from "./Typography.Heading";
+import { AppText } from "./Typography.Text";
+
+export const Typography = {
+  Text: AppText,
+  Heading,
+};
+
+export { AppText };
+
+export default Typography;

package/sincpro_mobile_ui/icons/AddItemIcon.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import Svg, { ClipPath, Defs, G, Path, Rect } from "react-native-svg";
+
+import { CustomIconProps } from "./props";
+
+const AddItemIcon: React.FC<CustomIconProps> = ({ size = 25 }) => (
+  <Svg fill="none" height={size} viewBox="0 0 25 24" width={size}>
+    <G clipPath="url(#clip0_9386_14684)">
+      <Path
+        d="M8.5 16H5.93C3.64 16 2.5 14.86 2.5 12.57V5.43C2.5 3.14 3.64 2 5.93 2H10.5C12.79 2 13.93 3.14 13.93 5.43"
+        stroke="#047DF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <Path
+        d="M19.0703 22H14.5003C12.2103 22 11.0703 20.86 11.0703 18.57V11.43C11.0703 9.14 12.2103 8 14.5003 8H19.0703C21.3603 8 22.5003 9.14 22.5003 11.43V18.57C22.5003 20.86 21.3603 22 19.0703 22Z"
+        stroke="#047DF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <Path
+        d="M15.3701 15H18.6301"
+        stroke="#047DF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <Path
+        d="M17 16.63V13.37"
+        stroke="#047DF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="clip0_9386_14684">
+        <Rect fill="white" height="24" transform="translate(0.5)" width="24" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export default AddItemIcon;

package/sincpro_mobile_ui/icons/ArrangeCircle.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+import { CustomIconProps } from "./props";
+
+const ArrangeCircleIcon: React.FC<CustomIconProps> = ({ size = 25 }) => (
+  <Svg fill="none" height={size} viewBox="0 0 24 24" width={size}>
+    <Path
+      d="M17.1494 13.82L14.1094 16.86"
+      stroke="#232933"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="1.5"
+    />
+    <Path
+      d="M6.84961 13.82H17.1496"
+      stroke="#232933"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="1.5"
+    />
+    <Path
+      d="M6.84961 10.18L9.88962 7.14001"
+      stroke="#232933"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="1.5"
+    />
+    <Path
+      d="M17.1496 10.18H6.84961"
+      stroke="#232933"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="1.5"
+    />
+    <Path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      stroke="black"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+  </Svg>
+);
+
+export default ArrangeCircleIcon;

package/sincpro_mobile_ui/icons/ArrowDownIcon.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+import { CustomIconProps } from "./props";
+
+function ArrowDownIcon({ size = 56, color = "#FFFFFF" }: CustomIconProps) {
+  return (
+    <Svg fill="none" height={size} viewBox="0 0 56 56" width={size}>
+      <Path
+        d="M28.0003 51.3333C40.887 51.3333 51.3337 40.8866 51.3337 28C51.3337 15.1133 40.887 4.66663 28.0003 4.66663C15.1137 4.66663 4.66699 15.1133 4.66699 28C4.66699 40.8866 15.1137 51.3333 28.0003 51.3333Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+      <Path
+        d="M28 19.8334V33.8334"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+      <Path
+        d="M21 29.1666L28 36.1666L35 29.1666"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+    </Svg>
+  );
+}
+export default ArrowDownIcon;

package/sincpro_mobile_ui/icons/ArrowUpIcon.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+import { CustomIconProps } from "./props";
+
+function ArrowUpIcon({ size = 56, color = "#FFFFFF" }: CustomIconProps) {
+  return (
+    <Svg fill="none" height={size} viewBox="0 0 56 56" width={size}>
+      <Path
+        d="M28.0003 51.3333C40.887 51.3333 51.3337 40.8866 51.3337 28C51.3337 15.1133 40.887 4.66663 28.0003 4.66663C15.1137 4.66663 4.66699 15.1133 4.66699 28C4.66699 40.8866 15.1137 51.3333 28.0003 51.3333Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+      <Path
+        d="M28 36.1666V22.1666"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+      <Path
+        d="M21 26.8334L28 19.8334L35 26.8334"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+    </Svg>
+  );
+}
+export default ArrowUpIcon;

package/sincpro_mobile_ui/icons/BoxIcon.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+import { CustomIconProps } from "./props";
+
+const BoxIcon: React.FC<CustomIconProps> = ({ size = 56, color = "#ffffff" }) => (
+  <Svg fill="none" height={size} viewBox="0 0 56 56" width={size}>
+    <Path
+      d="M7.39648 17.36L27.9998 29.2833L48.4632 17.43"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="3"
+    />
+    <Path
+      d="M28 50.4233V29.26"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="3"
+    />
+    <Path
+      d="M23.1705 5.78663L10.7105 12.6933C7.88715 14.2566 5.57715 18.1766 5.57715 21.3966V34.58C5.57715 37.8 7.88715 41.72 10.7105 43.2833L23.1705 50.2133C25.8305 51.6833 30.1938 51.6833 32.8538 50.2133L45.3138 43.2833C48.1371 41.72 50.4472 37.8 50.4472 34.58V21.3966C50.4472 18.1766 48.1371 14.2566 45.3138 12.6933L32.8538 5.7633C30.1705 4.2933 25.8305 4.2933 23.1705 5.78663Z"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="3"
+    />
+  </Svg>
+);
+
+export default BoxIcon;

package/sincpro_mobile_ui/icons/BoxTimeIcon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+import { CustomIconProps } from "./props";
+
+const BoxTimeIcon: React.FC<CustomIconProps> = ({ size = 24, color = "#374151" }) => (
+  <Svg fill="none" height={size} viewBox="0 0 22 21" width={size}>
+    <Path
+      d="M16.1005 3.31003L10.4505 0.270029C9.85047 -0.0499707 9.14047 -0.0499707 8.54047 0.270029L2.90047 3.31003C2.49047 3.54003 2.23047 3.98003 2.23047 4.46003C2.23047 4.95003 2.48047 5.39003 2.90047 5.61003L8.55047 8.65003C8.85047 8.81003 9.18047 8.89003 9.50047 8.89003C9.82047 8.89003 10.1605 8.81003 10.4505 8.65003L16.1005 5.61003C16.5105 5.39003 16.7705 4.95003 16.7705 4.46003C16.7705 3.98003 16.5105 3.54003 16.1005 3.31003Z"
+      fill={color}
+    />
+    <Path
+      d="M7.62 9.71009L2.37 7.09009C1.96 6.88009 1.5 6.91009 1.11 7.14009C0.73 7.38009 0.5 7.79009 0.5 8.24009V13.2001C0.5 14.0601 0.98 14.8301 1.75 15.2201L7 17.8401C7.18 17.9301 7.38 17.9801 7.58 17.9801C7.81 17.9801 8.05 17.9101 8.26 17.7901C8.64 17.5501 8.87 17.1401 8.87 16.6901V11.7301C8.86 10.8701 8.38 10.1001 7.62 9.71009Z"
+      fill={color}
+    />
+    <Path
+      d="M18.5006 8.24009V10.7001C18.0206 10.5601 17.5106 10.5001 17.0006 10.5001C15.6406 10.5001 14.3106 10.9701 13.2606 11.8101C11.8206 12.9401 11.0006 14.6501 11.0006 16.5001C11.0006 16.9901 11.0606 17.4801 11.1906 17.9501C11.0406 17.9301 10.8906 17.8701 10.7506 17.7801C10.3706 17.5501 10.1406 17.1401 10.1406 16.6901V11.7301C10.1406 10.8701 10.6206 10.1001 11.3806 9.71009L16.6306 7.09009C17.0406 6.88009 17.5006 6.91009 17.8906 7.14009C18.2706 7.38009 18.5006 7.79009 18.5006 8.24009Z"
+      fill={color}
+    />
+    <Path
+      d="M20.48 13.65C19.66 12.64 18.41 12 17 12C15.94 12 14.96 12.37 14.19 12.99C13.15 13.81 12.5 15.08 12.5 16.5C12.5 17.91 13.14 19.16 14.15 19.98C14.92 20.62 15.92 21 17 21C18.14 21 19.17 20.57 19.97 19.88C20.9 19.05 21.5 17.85 21.5 16.5C21.5 15.42 21.12 14.42 20.48 13.65ZM18.03 16.78C18.03 17.04 17.89 17.29 17.67 17.42L16.26 18.26C16.14 18.33 16.01 18.37 15.87 18.37C15.62 18.37 15.37 18.24 15.23 18.01C15.02 17.65 15.13 17.19 15.49 16.98L16.53 16.36V15.1C16.53 14.69 16.87 14.35 17.28 14.35C17.69 14.35 18.03 14.69 18.03 15.1V16.78Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default BoxTimeIcon;

package/sincpro_mobile_ui/icons/CalendarIcon.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+import { CustomIconProps } from "./props";
+
+const CalendarIcon: React.FC<CustomIconProps> = ({ size = 24, color = "#0075FF" }) => (
+  <Svg fill="none" height={size} viewBox="0 0 24 24" width={size}>
+    <Path
+      d="M8 2V5"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="1.5"
+    />
+    <Path
+      d="M16 2V5"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="1.5"
+    />
+    <Path
+      d="M3.5 9.08997H20.5"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="1.5"
+    />
+    <Path
+      d="M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="1.5"
+    />
+    <Path
+      d="M15.6947 13.7H15.7037"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+    <Path
+      d="M15.6947 16.7H15.7037"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+    <Path
+      d="M11.9955 13.7H12.0045"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+    <Path
+      d="M11.9955 16.7H12.0045"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+    <Path
+      d="M8.29431 13.7H8.30329"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+    <Path
+      d="M8.29431 16.7H8.30329"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+  </Svg>
+);
+
+export default CalendarIcon;

package/sincpro_mobile_ui/icons/CardIcon.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+import { CustomIconProps } from "./props";
+
+const CardIcon: React.FC<CustomIconProps> = ({ size = 56, color = "#FFFFFF" }) => (
+  <Svg fill="none" height={size} viewBox="0 0 56 56" width={size}>
+    <Path
+      d="M4.66699 19.8448H51.3337"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="3"
+    />
+    <Path
+      d="M14 38.5116H18.6667"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="3"
+    />
+    <Path
+      d="M24.5 38.5116H33.8333"
+      stroke={color}
+      stroke-width="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="3"
+    />
+    <Path
+      d="M15.027 8.17822H40.9503C49.257 8.17822 51.3337 10.2316 51.3337 18.4216V37.5782C51.3337 45.7682 49.257 47.8216 40.9737 47.8216H15.027C6.74366 47.8449 4.66699 45.7916 4.66699 37.6016V18.4216C4.66699 10.2316 6.74366 8.17822 15.027 8.17822Z"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="3"
+    />
+  </Svg>
+);
+
+export default CardIcon;

package/sincpro_mobile_ui/icons/CashierIcon.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+import { CustomIconProps } from "./props";
+
+const CashierIcon: React.FC<CustomIconProps> = ({ size = 24, color = "#374151" }) => (
+  <Svg fill="none" height={size} viewBox="0 0 25 24" width={size}>
+    <Path
+      d="M16.69 2H8.31C4.67 2 2.5 4.17 2.5 7.81V16.18C2.5 19.83 4.67 22 8.31 22H16.68C20.32 22 22.49 19.83 22.49 16.19V7.81C22.5 4.17 20.33 2 16.69 2ZM8.13 18.15C8.13 18.56 7.79 18.9 7.38 18.9C6.97 18.9 6.63 18.56 6.63 18.15V16.08C6.63 15.67 6.97 15.33 7.38 15.33C7.79 15.33 8.13 15.67 8.13 16.08V18.15ZM13.25 18.15C13.25 18.56 12.91 18.9 12.5 18.9C12.09 18.9 11.75 18.56 11.75 18.15V14C11.75 13.59 12.09 13.25 12.5 13.25C12.91 13.25 13.25 13.59 13.25 14V18.15ZM18.37 18.15C18.37 18.56 18.03 18.9 17.62 18.9C17.21 18.9 16.87 18.56 16.87 18.15V11.93C16.87 11.52 17.21 11.18 17.62 11.18C18.03 11.18 18.37 11.52 18.37 11.93V18.15ZM18.37 8.77C18.37 9.18 18.03 9.52 17.62 9.52C17.21 9.52 16.87 9.18 16.87 8.77V7.8C14.32 10.42 11.13 12.27 7.56 13.16C7.5 13.18 7.44 13.18 7.38 13.18C7.04 13.18 6.74 12.95 6.65 12.61C6.55 12.21 6.79 11.8 7.2 11.7C10.57 10.86 13.57 9.09 15.95 6.59H14.7C14.29 6.59 13.95 6.25 13.95 5.84C13.95 5.43 14.29 5.09 14.7 5.09H17.63C17.67 5.09 17.7 5.11 17.74 5.11C17.79 5.12 17.84 5.12 17.89 5.14C17.94 5.16 17.98 5.19 18.03 5.22C18.06 5.24 18.09 5.25 18.12 5.27C18.13 5.28 18.13 5.29 18.14 5.29C18.18 5.33 18.21 5.37 18.24 5.41C18.27 5.45 18.3 5.48 18.31 5.52C18.33 5.56 18.33 5.6 18.34 5.65C18.35 5.7 18.37 5.75 18.37 5.81C18.37 5.82 18.38 5.83 18.38 5.84V8.77H18.37Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default CashierIcon;

package/sincpro_mobile_ui/icons/CreditIcon.tsx

@@ -0,0 +1,44 @@
+import Svg, { Path } from "react-native-svg";
+
+interface CreditIconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+function CreditIcon({ width = 24, height = 24, color = "#000000" }: CreditIconProps) {
+  return (
+    <Svg fill="none" height={height} viewBox="0 0 24 24" width={width}>
+      <Path
+        d="M21 5H3C2.44772 5 2 5.44772 2 6V18C2 18.5523 2.44772 19 3 19H21C21.5523 19 22 18.5523 22 18V6C22 5.44772 21.5523 5 21 5Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <Path
+        d="M2 9H22"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <Path
+        d="M6 15H8"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <Path
+        d="M10 15H14"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </Svg>
+  );
+}
+
+export default CreditIcon;

package/sincpro_mobile_ui/icons/DuoIcon.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+import { CustomIconProps } from "./props";
+
+const DuoIcon: React.FC<CustomIconProps> = ({ size = 56, color = "#FFFFFF" }) => (
+  <Svg fill="none" height={size} viewBox="0 0 56 56" width={size}>
+    <Path
+      d="M21.373 25.3633C21.1396 25.34 20.8596 25.34 20.603 25.3633C15.0496 25.1766 10.6396 20.6266 10.6396 15.0266C10.6396 9.30996 15.2596 4.66663 20.9996 4.66663C26.7163 4.66663 31.3596 9.30996 31.3596 15.0266C31.3363 20.6266 26.9263 25.1766 21.373 25.3633Z"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="3"
+    />
+    <Path
+      d="M38.2897 9.33337C42.8163 9.33337 46.4563 12.9967 46.4563 17.5C46.4563 21.91 42.9563 25.5034 38.593 25.6667C38.4063 25.6434 38.1963 25.6434 37.9863 25.6667"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="3"
+    />
+    <Path
+      d="M9.70668 33.9734C4.06001 37.7534 4.06001 43.9134 9.70668 47.67C16.1233 51.9634 26.6467 51.9634 33.0633 47.67C38.71 43.89 38.71 37.73 33.0633 33.9734C26.67 29.7034 16.1467 29.7034 9.70668 33.9734Z"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="3"
+    />
+    <Path
+      d="M42.793 46.6666C44.473 46.3166 46.0596 45.64 47.3663 44.6366C51.0063 41.9066 51.0063 37.4033 47.3663 34.6733C46.083 33.6933 44.5196 33.04 42.863 32.6666"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="3"
+    />
+  </Svg>
+);
+
+export default DuoIcon;

package/sincpro_mobile_ui/icons/HomeIcon.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+import { CustomIconProps } from "./props";
+
+const HomeIcon: React.FC<CustomIconProps> = ({ size = 56, color = "#0075FF" }) => (
+  <Svg fill="none" height={size} viewBox="0 0 24 24" width={size}>
+    <Path
+      d="M20.0383 6.81994L14.2783 2.78994C12.7083 1.68994 10.2983 1.74994 8.78828 2.91994L3.77828 6.82994C2.77828 7.60994 1.98828 9.20994 1.98828 10.4699V17.3699C1.98828 19.9199 4.05828 21.9999 6.60828 21.9999H17.3883C19.9383 21.9999 22.0083 19.9299 22.0083 17.3799V10.5999C22.0083 9.24994 21.1383 7.58994 20.0383 6.81994ZM12.7483 17.9999C12.7483 18.4099 12.4083 18.7499 11.9983 18.7499C11.5883 18.7499 11.2483 18.4099 11.2483 17.9999V14.9999C11.2483 14.5899 11.5883 14.2499 11.9983 14.2499C12.4083 14.2499 12.7483 14.5899 12.7483 14.9999V17.9999Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default HomeIcon;

package/sincpro_mobile_ui/icons/HomeIconOutlined.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+import { CustomIconProps } from "./props";
+const HomeIconOutlined: React.FC<CustomIconProps> = ({ size = 24, color = "#374151" }) => (
+  <Svg fill="none" height={size} viewBox="0 0 24 24" width={size}>
+    <Path
+      d="M9.02 2.83992L3.63 7.03992C2.73 7.73992 2 9.22992 2 10.3599V17.7699C2 20.0899 3.89 21.9899 6.21 21.9899H17.79C20.11 21.9899 22 20.0899 22 17.7799V10.4999C22 9.28992 21.19 7.73992 20.2 7.04992L14.02 2.71992C12.62 1.73992 10.37 1.78992 9.02 2.83992Z"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <Path
+      d="M12 17.99V14.99"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+  </Svg>
+);
+
+export default HomeIconOutlined;

package/sincpro_mobile_ui/icons/LogoIcon.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+import { CustomIconProps } from "./props";
+
+const LogoIcon: React.FC<CustomIconProps> = ({ size = 56, color = "#FFFFFF" }) => (
+  <Svg fill="none" height={size} viewBox="0 0 48 48" width={size}>
+    <Path
+      d="M6.80761 1.97461C8.19439 4.25239 9.58445 6.52853 10.9663 8.80796C14.5105 14.6578 18.0513 20.5077 21.5889 26.3625C21.7204 26.5796 22.0358 26.7868 21.8715 27.0598C21.7368 27.2818 21.4148 27.1536 21.1782 27.1536C18.6363 27.1618 16.0944 27.1749 13.5525 27.147C12.9232 27.1404 12.7261 27.3213 12.731 27.9759C12.7638 31.8275 12.731 35.6792 12.7622 39.5325C12.7671 40.1821 12.5897 40.3565 11.9406 40.3482C9.15396 40.3121 6.36562 40.3154 3.57728 40.3466C3.00384 40.3532 2.8461 40.2052 2.85103 39.6263C2.87732 35.6924 2.88061 31.7585 2.84774 27.8246C2.84281 27.1864 3.04492 26.9907 3.63479 27.073C3.79581 27.096 3.96176 27.073 4.12607 27.068C5.13275 27.0483 5.63608 27.5565 5.63608 28.5926C5.63608 30.9148 5.65251 33.237 5.62458 35.5592C5.61801 36.1183 5.75438 36.3436 6.34919 36.3107C7.19374 36.2647 8.04486 36.2647 8.88942 36.3107C9.51051 36.3436 9.68468 36.1068 9.68139 35.5065C9.66003 31.7634 9.69453 28.0203 9.65017 24.2788C9.64195 23.5223 9.87528 23.3693 10.5719 23.394C12.0458 23.4466 13.523 23.3973 14.9985 23.4154C15.6771 23.4236 15.728 23.218 15.3977 22.6621C12.5979 17.9553 9.8227 13.2336 7.02943 8.52179C6.71231 7.9873 6.57429 7.44622 6.58744 6.82127C6.62194 5.22271 6.59894 3.62415 6.59894 2.02559C6.66795 2.00915 6.73531 1.9927 6.80432 1.97625L6.80761 1.97461Z"
+      fill={color}
+    />
+    <Path
+      d="M29.5526 23.4088C26.7823 18.7299 24.1172 14.1957 21.4143 9.68455C20.7045 8.49878 20.1015 7.34591 20.2641 5.88221C20.3808 4.82966 20.2806 3.75244 20.2921 2.68674C20.2937 2.51241 20.1754 2.26079 20.3956 2.17198C20.6765 2.0585 20.7505 2.34302 20.8573 2.51899C22.1044 4.56981 23.3515 6.62064 24.5953 8.67147C28.1855 14.5937 31.774 20.5143 35.3609 26.4382C35.471 26.6207 35.5679 26.8115 35.6682 26.9924C35.3839 27.2473 35.0684 27.1536 34.776 27.1552C32.2883 27.1618 29.8007 27.1832 27.313 27.1437C26.6147 27.1322 26.4504 27.3591 26.4553 28.0269C26.4849 31.8522 26.4553 35.6792 26.4832 39.5046C26.4882 40.1378 26.3387 40.3581 25.6633 40.3499C22.875 40.3121 20.0867 40.3219 17.2983 40.3433C16.7594 40.3466 16.5902 40.2693 16.6 39.6394C16.6509 36.115 16.6378 32.589 16.6049 29.0646C16.6 28.6156 16.6953 28.517 17.1143 28.4939C19.321 28.3788 19.321 28.3689 19.321 30.6171C19.321 32.2568 19.3358 33.8965 19.3128 35.5361C19.3046 36.0887 19.4804 36.3338 20.0653 36.3091C20.8836 36.2729 21.7084 36.2598 22.525 36.3124C23.1872 36.3552 23.4123 36.1742 23.4057 35.4671C23.3679 31.8062 23.386 28.1436 23.3893 24.4811C23.3893 23.2575 23.2513 23.4187 24.5 23.4121C26.1316 23.4039 27.7616 23.4104 29.5526 23.4104V23.4088Z"
+      fill={color}
+    />
+    <Path
+      d="M3.00696 47.0764C3.00696 45.9811 3.01518 44.9548 3.00204 43.927C2.99711 43.5865 3.21399 43.4582 3.45553 43.3168C7.95762 40.646 12.4663 40.4618 16.97 43.2954C17.3594 43.5405 17.5977 43.5931 18.0183 43.2954C21.9092 40.5506 26.5164 40.5966 30.3777 43.3497C30.8033 43.654 31.0431 43.4994 31.3586 43.2823C33.9892 41.465 36.8794 40.868 40.0013 41.5373C41.3996 41.8383 42.6418 42.5356 43.8314 43.325C44.1863 43.5602 44.3572 43.8217 44.3342 44.2625C44.298 44.9433 44.3062 45.6291 44.3309 46.31C44.3522 46.9136 44.2997 47.1537 43.5882 46.8083C40.7407 45.4285 37.7651 44.7986 34.6103 45.5683C33.4404 45.8544 32.3083 46.2491 31.2765 46.8823C30.9988 47.0534 30.7901 47.1109 30.4746 46.9004C26.339 44.1506 22.1786 44.6012 18.0232 46.8609C17.7143 47.0287 17.4777 47.1109 17.1245 46.9382C12.7456 44.8035 8.32567 44.9762 3.88438 46.7475C3.61491 46.8544 3.34051 46.9514 3.00861 47.0764H3.00696Z"
+      fill={color}
+    />
+    <Path
+      d="M38.7803 36.4457C38.5108 32.7601 41.3452 30.7997 43.7145 29.7571C44.1203 29.5778 44.168 29.8853 44.2847 30.1222C46.0674 33.7913 45.0717 37.1825 41.5867 39.281C41.1447 39.5474 40.6551 39.7398 40.2213 40.0161C39.684 40.3582 39.4753 40.128 39.3061 39.6198C38.9495 38.5491 38.685 37.4703 38.7819 36.4457H38.7803Z"
+      fill={color}
+    />
+    <Path
+      d="M39.1897 6.10429C38.9285 5.70794 38.7445 5.41191 38.5457 5.12739C37.734 3.97123 36.661 3.69823 35.4123 4.34127C34.8306 4.64059 34.3311 5.05503 33.853 5.50236C32.7028 6.58287 31.7449 7.87717 30.4123 8.75211C28.6936 9.87866 26.8731 9.50863 25.672 7.85251C25.5274 7.65351 25.3844 7.45451 25.2513 7.24893C24.5251 6.13718 24.5514 5.99081 25.488 5.04352C25.7032 4.82643 25.8511 4.76887 26.0351 5.04516C26.0647 5.08956 26.1074 5.12575 26.1386 5.17015C27.6141 7.19466 28.8744 7.2736 30.6818 5.43822C31.924 4.17681 33.1004 2.82165 34.6104 1.87929C37.1211 0.311978 38.986 1.77075 40.1395 3.84953C40.2561 4.06004 40.1345 4.21792 40.054 4.38074C39.7911 4.92017 39.5184 5.45302 39.1914 6.101L39.1897 6.10429Z"
+      fill={color}
+    />
+    <Path
+      d="M33.544 11.4048C33.2236 10.5332 32.5549 9.83424 32.9887 9.00207C33.6295 7.77519 34.6334 6.90519 36.0826 6.74238C37.2673 6.60917 38.2565 7.16011 39.1996 7.77684C39.9505 8.26857 40.6472 8.84419 41.4079 9.31784C42.3839 9.92634 42.8341 9.70761 43.0297 8.5646C43.12 8.02846 43.166 7.47752 43.1611 6.9348C43.1578 6.5072 43.286 6.37399 43.7165 6.38879C45.3119 6.4447 45.0523 6.15196 45.077 7.70447C45.0917 8.65835 45.1 9.61222 44.7648 10.5348C44.2291 12.0084 43.2745 12.4492 41.8154 11.867C40.5059 11.344 39.4707 10.3934 38.3156 9.62867C37.4793 9.07443 36.6019 8.63203 35.5634 9.08101C34.9933 9.3277 34.6022 9.78819 34.244 10.2701C34.0189 10.5743 33.8431 10.9164 33.5457 11.4032L33.544 11.4048Z"
+      fill={color}
+    />
+    <Path
+      d="M32.042 33.3537C32.042 33.2994 32.042 33.2452 32.042 33.1892C32.0436 31.3637 32.0584 31.3522 33.8543 31.9229C37.0797 32.9475 38.6867 35.6578 37.99 38.8878C37.9341 39.1493 37.9703 39.4749 37.5267 39.3368C35.6864 38.7628 33.9168 38.0704 32.7699 36.3847C32.1488 35.472 32.042 34.9967 32.042 33.3537Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default LogoIcon;