@kivid/native-components 1.0.0-alpha.1

package/src/components/LoadingDots/types.ts

@@ -0,0 +1,10 @@
+import type { LottieViewProps } from "lottie-react-native";
+import { StyleProp, View, ViewStyle } from "react-native";
+
+export type LoadingDotsVariant = "grape" | "light" | "dark";
+export interface LoadingDotsProps extends Omit<LottieViewProps, "source"> {
+  variant?: LoadingDotsVariant;
+  lottieViewStyle?: StyleProp<ViewStyle>;
+  className?: string;
+  ref?: React.RefObject<View | null>;
+}

package/src/components/Seal/assets/class-variants.ts

@@ -0,0 +1,70 @@
+import { cva } from "class-variance-authority";
+
+export const sealVariants = cva(
+  "flex items-center justify-center transition ease-in-out pointer-events-none w-fit stroke-none",
+  {
+    variants: {
+      size: {
+        small: "w-600 h-600 rounded-300",
+        medium: "w-700 h-700 rounded-500",
+      },
+      variant: {
+        add: "bg-grape-500",
+        success: "bg-pear-500",
+        error: "bg-blackberry-500",
+        alert: "bg-tangerine-500",
+        minus: "bg-chia-600",
+        right: "bg-chia-600",
+        left: "bg-chia-600",
+      },
+      inverted: {
+        true: "",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        inverted: false,
+        className: " text-chia-200",
+      },
+      {
+        inverted: true,
+        variant: "add",
+        className: " text-grape-500 bg-chia-200",
+      },
+      {
+        inverted: true,
+        variant: "success",
+        className: "text-pear-500 bg-chia-200",
+      },
+      {
+        inverted: true,
+        variant: "error",
+        className: "text-blackberry-500 bg-chia-200",
+      },
+      {
+        inverted: true,
+        variant: "alert",
+        className: "text-tangerine-500 bg-chia-200",
+      },
+      {
+        inverted: true,
+        variant: "minus",
+        className: "text-chia-600 bg-chia-200",
+      },
+      {
+        inverted: true,
+        variant: "right",
+        className: "text-chia-600 bg-chia-200",
+      },
+      {
+        inverted: true,
+        variant: "left",
+        className: "text-chia-600 bg-chia-200",
+      },
+    ],
+    defaultVariants: {
+      inverted: false,
+    },
+  }
+);

package/src/components/Seal/components/AddIcon/index.tsx

@@ -0,0 +1,26 @@
+import type { SealIconProps } from "../../types";
+import { Path, Svg } from "react-native-svg";
+
+export const AddIcon = ({ size = "medium", ...props }: SealIconProps) => {
+  const sizes = {
+    small: 16,
+    medium: 24,
+  };
+
+  return (
+    <Svg
+      width={sizes[size]}
+      height={sizes[size]}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 4.75C12.6904 4.75 13.25 5.30964 13.25 6V10.75H18C18.6904 10.75 19.25 11.3096 19.25 12C19.25 12.6904 18.6904 13.25 18 13.25H13.25V18C13.25 18.6904 12.6904 19.25 12 19.25C11.3096 19.25 10.75 18.6904 10.75 18V13.25H6C5.30964 13.25 4.75 12.6904 4.75 12C4.75 11.3096 5.30964 10.75 6 10.75H10.75V6C10.75 5.30964 11.3096 4.75 12 4.75Z"
+        fill="currentColor"
+      />
+    </Svg>
+  );
+};

package/src/components/Seal/components/AlertIcon/index.tsx

@@ -0,0 +1,26 @@
+import type { SealIconProps } from "../../types";
+import { Path, Svg } from "react-native-svg";
+
+export const AlertIcon = ({ size = "medium", ...props }: SealIconProps) => {
+  const sizes = {
+    small: 16,
+    medium: 24,
+  };
+
+  return (
+    <Svg
+      width={sizes[size]}
+      height={sizes[size]}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 18.25C11.3096 18.25 10.75 17.6904 10.75 17L10.75 16.3421C10.75 15.6518 11.3096 15.0921 12 15.0921C12.6904 15.0921 13.25 15.6518 13.25 16.3421L13.25 17C13.25 17.6904 12.6904 18.25 12 18.25ZM12 13.75C11.3096 13.75 10.75 13.1904 10.75 12.5L10.75 7C10.75 6.30964 11.3096 5.75 12 5.75C12.6904 5.75 13.25 6.30964 13.25 7L13.25 12.5C13.25 13.1904 12.6904 13.75 12 13.75Z"
+        fill="currentColor"
+      />
+    </Svg>
+  );
+};

package/src/components/Seal/components/ErrorIcon/index.tsx

@@ -0,0 +1,26 @@
+import type { SealIconProps } from "../../types";
+import { Path, Svg } from "react-native-svg";
+
+export const ErrorIcon = ({ size = "medium", ...props }: SealIconProps) => {
+  const sizes = {
+    small: 16,
+    medium: 24,
+  };
+
+  return (
+    <Svg
+      width={sizes[size]}
+      height={sizes[size]}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.11612 7.11612C7.60427 6.62796 8.39573 6.62796 8.88388 7.11612L12 10.2322L15.1161 7.11612C15.6043 6.62796 16.3957 6.62796 16.8839 7.11612C17.372 7.60427 17.372 8.39573 16.8839 8.88388L13.7678 12L16.8839 15.1161C17.372 15.6043 17.372 16.3957 16.8839 16.8839C16.3957 17.372 15.6043 17.372 15.1161 16.8839L12 13.7678L8.88388 16.8839C8.39573 17.372 7.60427 17.372 7.11612 16.8839C6.62796 16.3957 6.62796 15.6043 7.11612 15.1161L10.2322 12L7.11612 8.88388C6.62796 8.39573 6.62796 7.60427 7.11612 7.11612Z"
+        fill="currentColor"
+      />
+    </Svg>
+  );
+};

package/src/components/Seal/components/LeftIcon/index.tsx

@@ -0,0 +1,26 @@
+import type { SealIconProps } from "../../types";
+import { Path, Svg } from "react-native-svg";
+
+export const LeftIcon = ({ size = "medium", ...props }: SealIconProps) => {
+  const sizes = {
+    small: 16,
+    medium: 24,
+  };
+
+  return (
+    <Svg
+      width={sizes[size]}
+      height={sizes[size]}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.4971 15.9342C9.98114 16.3929 9.19105 16.3464 8.7324 15.8304L6.06574 12.8304C5.64475 12.3568 5.64475 11.6431 6.06574 11.1695L8.7324 8.16953C9.19105 7.65355 9.98114 7.60708 10.4971 8.06573C11.0131 8.52437 11.0596 9.31446 10.6009 9.83044L9.78355 10.75L17 10.75C17.6904 10.75 18.25 11.3096 18.25 12C18.25 12.6903 17.6904 13.25 17 13.25L9.78355 13.25L10.6009 14.1695C11.0596 14.6855 11.0131 15.4756 10.4971 15.9342Z"
+        fill="currentColor"
+      />
+    </Svg>
+  );
+};

package/src/components/Seal/components/MinusIcon/index.tsx

@@ -0,0 +1,24 @@
+import type { SealIconProps } from "../../types";
+import { Path, Svg } from "react-native-svg";
+
+export const MinusIcon = ({ size = "medium", ...props }: SealIconProps) => {
+  const sizes = {
+    small: 16,
+    medium: 24,
+  };
+
+  return (
+    <Svg
+      width={sizes[size]}
+      height={sizes[size]}
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <Path
+        d="M3.83331 8.00008C3.83331 7.53984 4.20641 7.16675 4.66665 7.16675H11.3333C11.7936 7.16675 12.1666 7.53984 12.1666 8.00008C12.1666 8.46032 11.7936 8.83341 11.3333 8.83341H4.66665C4.20641 8.83341 3.83331 8.46032 3.83331 8.00008Z"
+        fill="currentColor"
+      />
+    </Svg>
+  );
+};

package/src/components/Seal/components/RightIcon/index.tsx

@@ -0,0 +1,26 @@
+import type { SealIconProps } from "../../types";
+import { Path, Svg } from "react-native-svg";
+
+export const RightIcon = ({ size = "medium", ...props }: SealIconProps) => {
+  const sizes = {
+    small: 16,
+    medium: 24,
+  };
+
+  return (
+    <Svg
+      width={sizes[size]}
+      height={sizes[size]}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.5029 8.06575C14.0189 7.6071 14.8089 7.65358 15.2676 8.16956L17.9343 11.1696C18.3552 11.6432 18.3552 12.3569 17.9343 12.8305L15.2676 15.8305C14.8089 16.3464 14.0189 16.3929 13.5029 15.9343C12.9869 15.4756 12.9404 14.6855 13.3991 14.1696L14.2164 13.25H7C6.30964 13.25 5.75 12.6904 5.75 12C5.75 11.3097 6.30964 10.75 7 10.75H14.2164L13.3991 9.83047C12.9404 9.31449 12.9869 8.5244 13.5029 8.06575Z"
+        fill="currentColor"
+      />
+    </Svg>
+  );
+};

package/src/components/Seal/components/SuccessIcon/index.tsx

@@ -0,0 +1,26 @@
+import type { SealIconProps } from "../../types";
+import { Path, Svg } from "react-native-svg";
+
+export const SuccessIcon = ({ size = "medium", ...props }: SealIconProps) => {
+  const sizes = {
+    small: 16,
+    medium: 24,
+  };
+
+  return (
+    <Svg
+      width={sizes[size]}
+      height={sizes[size]}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.1537 8.38643C18.6307 8.88555 18.6127 9.6768 18.1136 10.1537L11.8345 16.1537C11.3572 16.6098 10.6076 16.6161 10.1227 16.1682L6.40178 12.7307C5.8947 12.2622 5.86339 11.4714 6.33185 10.9643C6.80031 10.4572 7.59114 10.4259 8.09823 10.8943L10.9565 13.5349L16.3864 8.34626C16.8856 7.86933 17.6768 7.88731 18.1537 8.38643Z"
+        fill="currentColor"
+      />
+    </Svg>
+  );
+};

package/src/components/Seal/components/index.ts

@@ -0,0 +1,7 @@
+export { AddIcon } from "./AddIcon";
+export { SuccessIcon } from "./SuccessIcon";
+export { ErrorIcon } from "./ErrorIcon";
+export { AlertIcon } from "./AlertIcon";
+export { MinusIcon } from "./MinusIcon";
+export { RightIcon } from "./RightIcon";
+export { LeftIcon } from "./LeftIcon";

package/src/components/Seal/enums/index.ts

@@ -0,0 +1 @@
+export * from "./seal-variant";

package/src/components/Seal/enums/seal-variant.ts

@@ -0,0 +1,9 @@
+export enum SealVariantEnum {
+  ADD = "add",
+  SUCCESS = "success",
+  ERROR = "error",
+  ALERT = "alert",
+  MINUS = "minus",
+  LEFT = "left",
+  RIGHT = "right",
+}

package/src/components/Seal/index.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from "@storybook/react-native";
+import { Seal } from ".";
+import { View } from "react-native";
+import { SealVariantEnum } from "./enums";
+
+const meta: Meta<typeof Seal> = {
+  title: "Components/Seal",
+  component: Seal,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: {
+        type: "select",
+      },
+      options: Object.values(SealVariantEnum),
+      description: "The variant of the seal",
+      table: {
+        type: { summary: Object.values(SealVariantEnum).join(" | ") },
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+      },
+      options: ["small", "medium"],
+      description: "The size of the seal",
+      table: {
+        type: { summary: "small | medium" },
+      },
+    },
+    inverted: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Seal>;
+
+export const Default: Story = {
+  args: {
+    variant: SealVariantEnum.ADD,
+    size: "medium",
+    inverted: false,
+  },
+};
+
+export const Add: Story = {
+  args: {
+    ...Default.args,
+    variant: SealVariantEnum.ADD,
+  },
+};
+
+export const Success: Story = {
+  args: {
+    ...Default.args,
+    variant: SealVariantEnum.SUCCESS,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    ...Default.args,
+    variant: SealVariantEnum.ERROR,
+  },
+};
+
+export const Alert: Story = {
+  args: {
+    ...Default.args,
+    variant: SealVariantEnum.ALERT,
+  },
+};
+
+export const Minus: Story = {
+  args: {
+    ...Default.args,
+    variant: SealVariantEnum.MINUS,
+  },
+};
+
+export const Left: Story = {
+  args: {
+    ...Default.args,
+    variant: SealVariantEnum.LEFT,
+  },
+};
+
+export const Right: Story = {
+  args: {
+    ...Default.args,
+    variant: SealVariantEnum.RIGHT,
+  },
+};
+
+const AllTemplate: Story = {
+  render: (args) => {
+    const variants = Object.values(SealVariantEnum);
+    return (
+      <View className="flex flex-col gap-300">
+        <View className="flex flex-row gap-300">
+          {variants.map((variant) => (
+            <Seal {...args} key={variant} variant={variant} />
+          ))}
+        </View>
+        <View className="flex flex-row gap-300 bg-slate-900 p-300">
+          {variants.map((variant) => (
+            <Seal {...args} key={variant} variant={variant} inverted />
+          ))}
+        </View>
+      </View>
+    );
+  },
+};
+
+export const All = {
+  ...AllTemplate,
+  args: {
+    ...Default.args,
+  },
+};

package/src/components/Seal/index.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+import type { SealProps } from "./types";
+
+import { View } from "react-native";
+import {
+  AddIcon,
+  ErrorIcon,
+  MinusIcon,
+  SuccessIcon,
+  RightIcon,
+  LeftIcon,
+  AlertIcon,
+} from "./components";
+import { merge } from "@butterfly/tailwind-preset";
+import { sealVariants } from "./assets/class-variants";
+
+export const Seal: React.FC<SealProps> = ({
+  variant,
+  size = "medium",
+  inverted = false,
+  className = "",
+}) => {
+  const mappedColorByVariant = {
+    add: inverted ? "#7A50D9" : "#F2F7F7",
+    success: inverted ? "#3DCC78" : "#F2F7F7",
+    error: inverted ? "#E65245" : "#F2F7F7",
+    alert: inverted ? "#FF8B59" : "#F2F7F7",
+    minus: inverted ? "#B6C2C2" : "#F2F7F7",
+    right: inverted ? "#B6C2C2" : "#F2F7F7",
+    left: inverted ? "#B6C2C2" : "#F2F7F7",
+  };
+
+  const iconMap = {
+    success: SuccessIcon,
+    add: AddIcon,
+    error: ErrorIcon,
+    right: RightIcon,
+    left: LeftIcon,
+    minus: MinusIcon,
+    alert: AlertIcon,
+  };
+
+  const Icon = iconMap[variant];
+
+  return (
+    <View
+      className={merge(sealVariants({ size, variant, inverted }), className)}
+    >
+      <Icon size={size} color={mappedColorByVariant[variant]} />
+    </View>
+  );
+};

package/src/components/Seal/types.ts

@@ -0,0 +1,18 @@
+import type { SvgProps } from "react-native-svg";
+import { SealVariantEnum } from "./enums";
+
+export type SealVariant = SealVariantEnum;
+
+export interface SealIconProps extends SvgProps {
+  size?: SealSize;
+}
+
+export type SealSize = "small" | "medium";
+
+export interface SealProps {
+  variant: SealVariant;
+  size?: SealSize;
+  inverted?: boolean;
+  disabled?: boolean;
+  className?: string;
+}

package/src/components/Title/components/icon/index.tsx

@@ -0,0 +1,51 @@
+import type { IconProps } from "./types";
+import { InformationStatus } from "../../../InformationStatus";
+import { InformationStatusOptionsEnum } from "../../../InformationStatus/enums";
+
+export function Icon(props: IconProps) {
+  const { variants, customIcon, size = "medium" } = props;
+
+  function renderIcon() {
+    if (variants === "success") {
+      return (
+        <InformationStatus
+          status={InformationStatusOptionsEnum.SUCCESS}
+          size={size}
+        />
+      );
+    }
+
+    if (variants === "error") {
+      return (
+        <InformationStatus
+          status={InformationStatusOptionsEnum.ERROR}
+          size={size}
+        />
+      );
+    }
+
+    if (variants === "warning") {
+      return (
+        <InformationStatus
+          status={InformationStatusOptionsEnum.WARNING}
+          size={size}
+        />
+      );
+    }
+
+    if (variants === "add") {
+      return (
+        <InformationStatus
+          status={InformationStatusOptionsEnum.ADD}
+          size={size}
+        />
+      );
+    }
+
+    if (variants === "custom" && customIcon) {
+      return customIcon;
+    }
+  }
+
+  return <>{renderIcon()}</>;
+}

package/src/components/Title/components/icon/types.ts

@@ -0,0 +1,12 @@
+export enum IconVariants {
+  SUCCESS = "success",
+  ERROR = "error",
+  WARNING = "warning",
+  ADD = "add",
+  CUSTOM = "custom",
+}
+export interface IconProps {
+  variants: IconVariants;
+  size?: "small" | "medium" | "large";
+  customIcon?: React.ReactNode;
+}

package/src/components/Title/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./icon";
+export * from "./marker";

package/src/components/Title/components/marker/index.tsx

@@ -0,0 +1,25 @@
+import { View } from "react-native";
+import type { MarkerProps } from "./types";
+
+export function Marker(props: MarkerProps) {
+  const { size = "medium", color = "chia" } = props;
+
+  const mappedSize = {
+    small: "w-700 h-300",
+    medium: "w-800 h-[6px]",
+  }[size];
+
+  const mappedColor = {
+    pear: "bg-pear-500",
+    java: "bg-java-500",
+    grape: "bg-grape-500",
+    pitaya: "bg-pitaya-500",
+    tangerine: "bg-tangerine-500",
+    mango: "bg-mango-500",
+    blackberry: "bg-blackberry-500",
+    chia: "bg-chia-600",
+    ghost: "bg-chia-200",
+  }[color];
+
+  return <View className={`${mappedColor} ${mappedSize} rounded-500`} />;
+}

package/src/components/Title/components/marker/types.ts

@@ -0,0 +1,13 @@
+export interface MarkerProps {
+  size?: "small" | "medium";
+  color?:
+    | "pear"
+    | "java"
+    | "grape"
+    | "pitaya"
+    | "tangerine"
+    | "mango"
+    | "blackberry"
+    | "chia"
+    | "ghost";
+}