@kivid/native-components 1.0.0-alpha.1

package/src/components/InputOTP/enums/information-status.ts

@@ -0,0 +1,7 @@
+export enum InformationStatusEnum {
+  DEFAULT = "default",
+  ERROR = "error",
+  SUCCESS = "success",
+  LOADING = "loading",
+  COOLDOWN = "cooldown",
+}

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

@@ -0,0 +1,247 @@
+import type { Meta, StoryObj } from "@storybook/react-native";
+import { InputOTP } from "./index";
+import { useState } from "react";
+import { Text, View } from "react-native";
+import { InformationStatusEnum } from "./enums";
+
+const meta: Meta<typeof InputOTP> = {
+  title: "Components/InputOTP",
+  component: InputOTP,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    OTPInputsQuantity: {
+      control: { type: "number", min: 1, max: 10 },
+      description: "Number of input fields",
+      table: {
+        defaultValue: { summary: "6" },
+      },
+    },
+    status: {
+      control: { type: "select" },
+      options: Object.values(InformationStatusEnum),
+      description: "Status of the input",
+      table: {
+        defaultValue: { summary: InformationStatusEnum.DEFAULT },
+        type: { summary: Object.values(InformationStatusEnum).join(" | ") },
+      },
+    },
+    rounded: {
+      control: "boolean",
+      description: "Rounded corners",
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether inputs are disabled",
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    customInformation: {
+      control: "object",
+      description: "Custom information to display",
+      table: {
+        defaultValue: { summary: "null" },
+      },
+    },
+    onChange: {
+      action: "onChange",
+      description: "Callback when all inputs are filled",
+    },
+    onPressRetryToken: {
+      action: "onPressRetryToken",
+      description: "Callback when the retry button is pressed",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputOTP>;
+
+const Template = (args: React.ComponentProps<typeof InputOTP>) => {
+  const [value, setValue] = useState("");
+  return (
+    <View className="flex flex-col gap-300">
+      <InputOTP
+        {...args}
+        onChange={(val) => {
+          setValue(val);
+          args.onChange?.(val);
+        }}
+      />
+      {value && <Text>Entered value: {value}</Text>}
+    </View>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <Template {...args} />,
+  args: {
+    OTPInputsQuantity: 6,
+  },
+};
+
+export const Rounded: Story = {
+  render: (args) => <Template {...args} />,
+  args: {
+    rounded: true,
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => <Template {...args} />,
+  args: {
+    disabled: true,
+  },
+};
+
+export const WithCustomInformation: Story = {
+  render: (args) => (
+    <InputOTP
+      {...args}
+      customInformation={
+        <View>
+          <Text className="text-label_medium_700 text-blackberry-500">
+            O código realmente é esse?
+          </Text>
+          <Text className="text-label_medium_700 text-chia-900">
+            Tente novamente
+          </Text>
+        </View>
+      }
+    />
+  ),
+  args: {
+    status: InformationStatusEnum.ERROR,
+    disabled: true,
+  },
+};
+
+export const WithInformationStatusDefault: Story = {
+  render: (args) => <InputOTP {...args} />,
+};
+
+export const WithInformationStatusCooldown: Story = {
+  render: (args) => <InputOTP {...args} />,
+  args: {
+    disabled: true,
+    status: InformationStatusEnum.COOLDOWN,
+    onPressRetryToken: () => {
+      console.log("Resending...");
+    },
+  },
+};
+
+export const WithInformationStatusError: Story = {
+  render: (args) => <InputOTP {...args} />,
+  args: {
+    status: InformationStatusEnum.ERROR,
+    disabled: true,
+  },
+};
+
+export const WithInformationStatusLoading: Story = {
+  render: (args) => <InputOTP {...args} />,
+  args: {
+    disabled: true,
+    status: InformationStatusEnum.LOADING,
+  },
+};
+
+export const WithInformationStatusSuccess: Story = {
+  render: (args) => <InputOTP {...args} />,
+  args: {
+    disabled: true,
+    status: InformationStatusEnum.SUCCESS,
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    function generateRandomInterval(OTPInputsQuantity: number): string {
+      const result: string[] = [];
+      const digitsPerBlock = 1;
+
+      for (let count = 0; count < OTPInputsQuantity; count++) {
+        let inputDigit = "";
+        for (let j = 0; j < digitsPerBlock; j++) {
+          inputDigit += Math.floor(Math.random() * 10);
+        }
+        result.push(inputDigit);
+      }
+
+      return result.join("");
+    }
+
+    const mockDelay = (ms: number) =>
+      new Promise((resolve) => setTimeout(resolve, ms));
+
+    async function handleClick(inputValue: string) {
+      setStatus(InformationStatusEnum.LOADING);
+      try {
+        await mockDelay(3000);
+        if (inputValue === validToken) {
+          setStatus(InformationStatusEnum.SUCCESS);
+          return;
+        }
+        setStatus(InformationStatusEnum.ERROR);
+      } catch (error) {
+        console.error("Error during token validation:", error);
+        setStatus(InformationStatusEnum.ERROR);
+      }
+    }
+
+    const [status, setStatus] = useState<InformationStatusEnum>(
+      InformationStatusEnum.DEFAULT
+    );
+    const [validToken] = useState(() =>
+      generateRandomInterval(args.OTPInputsQuantity ?? 6)
+    );
+
+    const handleOTPChange = async (inputValue: string) => {
+      args.onChange?.(inputValue);
+
+      if (inputValue.length === (args.OTPInputsQuantity ?? 6)) {
+        setStatus(InformationStatusEnum.LOADING);
+
+        await mockDelay(3000);
+
+        if (inputValue === validToken) {
+          setStatus(InformationStatusEnum.SUCCESS);
+
+          return;
+        }
+
+        if (inputValue !== validToken) {
+          setStatus(InformationStatusEnum.ERROR);
+
+          return;
+        }
+
+        setStatus(InformationStatusEnum.DEFAULT);
+      }
+    };
+
+    return (
+      <>
+        <InputOTP
+          {...args}
+          onChange={handleOTPChange}
+          disabled={status === InformationStatusEnum.LOADING}
+          status={status}
+          onPressRetryToken={handleClick}
+        />
+
+        <View className="mt-900">
+          <Text>Token correto esperado: {validToken}</Text>
+          <Text>Status atual: {status}</Text>
+        </View>
+      </>
+    );
+  },
+};

package/src/components/InputOTP/index.tsx

@@ -0,0 +1,177 @@
+import { useRef, useState } from "react";
+import {
+  View,
+  TextInput,
+  NativeSyntheticEvent,
+  TextInputKeyPressEventData,
+  Platform,
+  TextInputFocusEventData,
+  TextInputChangeEventData,
+} from "react-native";
+import type { InputOTPProps } from "./types";
+import { merge } from "@butterfly/tailwind-preset";
+import { InformationStatus } from "./components";
+import { InformationStatusEnum } from "./enums";
+
+export function InputOTP(props: InputOTPProps) {
+  const {
+    status = InformationStatusEnum.DEFAULT,
+    OTPInputsQuantity = 6,
+    customInformation,
+    rounded = false,
+    disabled = false,
+    onChange,
+    onPressRetryToken,
+  } = props;
+
+  const inputsRef = useRef<Array<TextInput | null>>([]);
+  const [inputValues, setInputValues] = useState<string[]>(
+    Array(OTPInputsQuantity).fill("")
+  );
+  const hasError = status === InformationStatusEnum.ERROR;
+
+  function handlePress() {
+    const values = [...inputValues];
+    const inputRefValuesJoined = values.join("");
+
+    if (inputRefValuesJoined.length === OTPInputsQuantity) {
+      onPressRetryToken?.(inputRefValuesJoined);
+    }
+  }
+
+  const handleChange = (
+    event: NativeSyntheticEvent<TextInputChangeEventData>,
+    index: number
+  ) => {
+    const text = event.nativeEvent.text;
+    const newValues = [...inputValues];
+
+    if (text.length > 1) {
+      const chars = text.split("");
+      let targetIndex = index;
+      chars.forEach((char) => {
+        if (targetIndex < OTPInputsQuantity) {
+          newValues[targetIndex] = char;
+          targetIndex++;
+        }
+      });
+      setInputValues(newValues);
+      onChange?.(newValues.join(""));
+
+      const nextEmptyIndex = newValues.findIndex((value) => !value);
+      if (nextEmptyIndex !== -1) {
+        inputsRef.current[nextEmptyIndex]?.focus();
+      } else {
+        inputsRef.current[OTPInputsQuantity - 1]?.focus();
+      }
+      return;
+    }
+
+    newValues[index] = text;
+    setInputValues(newValues);
+    onChange?.(newValues.join(""));
+
+    if (text && index < OTPInputsQuantity - 1) {
+      const nextEmptyIndex = newValues.findIndex((v, i) => i > index && !v);
+      if (nextEmptyIndex !== -1) {
+        inputsRef.current[nextEmptyIndex]?.focus();
+      }
+    }
+  };
+
+  const handleKeyDown = (
+    e: NativeSyntheticEvent<TextInputKeyPressEventData>,
+    index: number
+  ) => {
+    if (e.nativeEvent.key === "Backspace") {
+      const hasValueAhead = inputValues.slice(index + 1).some((value) => value);
+
+      if (hasValueAhead) {
+        const lastFilledIndex = [...inputValues]
+          .map((value, i) => (value ? i : -1))
+          .filter((i) => i !== -1)
+          .pop();
+
+        if (lastFilledIndex !== undefined) {
+          inputsRef.current[lastFilledIndex]?.focus();
+        }
+        return;
+      }
+
+      if (inputValues[index]) {
+        const newValues = [...inputValues];
+        newValues[index] = "";
+        setInputValues(newValues);
+      }
+      if (index > 0) {
+        inputsRef.current[index - 1]?.focus();
+      }
+    }
+  };
+
+  const handleFocus = (
+    event: NativeSyntheticEvent<TextInputFocusEventData>,
+    index: number
+  ) => {
+    const firstEmptyIndex = inputValues.findIndex((value) => !value);
+
+    if (firstEmptyIndex !== -1 && index > firstEmptyIndex) {
+      inputsRef.current[firstEmptyIndex]?.focus();
+      event.preventDefault();
+      return;
+    }
+
+    if (firstEmptyIndex === -1 && index < OTPInputsQuantity - 1) {
+      inputsRef.current[OTPInputsQuantity - 1]?.focus();
+      event.preventDefault();
+    }
+  };
+
+  function renderInformationStatus() {
+    if (customInformation) {
+      return <>{customInformation}</>;
+    }
+
+    return <InformationStatus status={status} onPress={handlePress} />;
+  }
+
+  const inputStyle = merge(
+    "w-1000 h-1100 text-center text-3 font-bold leading-3 border-100 bg-chia-100 placeholder-chia-400",
+    rounded ? "rounded-700" : "rounded-500",
+    disabled ? "opacity-50" : "",
+    hasError
+      ? "border-blackberry-500 text-blackberry-500"
+      : "border-chia-400 text-chia-900"
+  );
+
+  return (
+    <View className="flex flex-col items-center gap-600">
+      <View className="flex-row gap-300 max-w-[280px] items-center justify-between">
+        {Array.from({ length: OTPInputsQuantity }).map((_, i) => (
+          <TextInput
+            ref={(ref) => {
+              inputsRef.current[i] = ref;
+            }}
+            key={`otp-input-${i}`}
+            textContentType="oneTimeCode"
+            placeholder="_"
+            className={inputStyle}
+            autoComplete={
+              Platform.OS === "android" ? "sms-otp" : "one-time-code"
+            }
+            placeholderTextColor="#DEE7E7"
+            editable={!disabled}
+            value={inputValues[i]}
+            onChange={(e) => handleChange(e, i)}
+            onKeyPress={(e) => handleKeyDown(e, i)}
+            onFocus={(e) => handleFocus(e, i)}
+          />
+        ))}
+      </View>
+
+      {renderInformationStatus()}
+    </View>
+  );
+}
+
+export default InputOTP;

package/src/components/InputOTP/types.ts

@@ -0,0 +1,12 @@
+import type React from "react";
+import type { InformationStatusEnum } from "./enums";
+
+export interface InputOTPProps {
+  OTPInputsQuantity?: number;
+  rounded?: boolean;
+  disabled?: boolean;
+  status?: InformationStatusEnum;
+  customInformation?: React.ReactNode;
+  onChange: (value: string) => void;
+  onPressRetryToken?: (value: string) => void;
+}

package/src/components/LoadingDots/assets/loading-button-dark.json

@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 1.0.0","a":"","k":"","d":"","tc":"none"},"fr":60,"ip":9,"op":41,"w":96,"h":96,"nm":"Comp 1","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"ball4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":223,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":25,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":40,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":55,"s":[169.5]},{"t":70,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.3607843137254902,0.38823529411764707,0.38823529411764707,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":40,"op":71,"st":25,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"ball 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":150,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":20,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":35,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":50,"s":[169.5]},{"t":65,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.3607843137254902,0.38823529411764707,0.38823529411764707,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":35,"op":66,"st":20,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"ball 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":77,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":15,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":30,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":45,"s":[169.5]},{"t":60,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.3607843137254902,0.38823529411764707,0.38823529411764707,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":30,"op":61,"st":15,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"ball3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":223,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":-6,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":9,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":24,"s":[169.5]},{"t":39,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.3607843137254902,0.38823529411764707,0.38823529411764707,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":9,"op":40,"st":-6,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"ball 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":150,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":-11,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":4,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":19,"s":[169.5]},{"t":34,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.3607843137254902,0.38823529411764707,0.38823529411764707,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":4,"op":35,"st":-11,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"ball 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":77,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":-16,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":-1,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":14,"s":[169.5]},{"t":29,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.3607843137254902,0.38823529411764707,0.38823529411764707,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-1,"op":30,"st":-16,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Pre-comp 1","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[150,150,0],"ix":2},"a":{"a":0,"k":[395,400,0],"ix":1},"s":{"a":0,"k":[41,41,100],"ix":6}},"ao":0,"w":300,"h":300,"ip":0,"op":211,"st":0,"bm":0}],"markers":[]}

package/src/components/LoadingDots/assets/loading-button-grape.json

@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 1.0.0","a":"","k":"","d":"","tc":"none"},"fr":60,"ip":9,"op":41,"w":96,"h":96,"nm":"Comp 1","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"ball4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":223,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":25,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":40,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":55,"s":[169.5]},{"t":70,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.47843137254901963,0.3137254901960784,0.8509803921568627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":40,"op":71,"st":25,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"ball 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":150,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":20,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":35,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":50,"s":[169.5]},{"t":65,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.47843137254901963,0.3137254901960784,0.8509803921568627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":35,"op":66,"st":20,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"ball 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":77,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":15,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":30,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":45,"s":[169.5]},{"t":60,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.47843137254901963,0.3137254901960784,0.8509803921568627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":30,"op":61,"st":15,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"ball3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":223,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":-6,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":9,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":24,"s":[169.5]},{"t":39,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.47843137254901963,0.3137254901960784,0.8509803921568627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":9,"op":40,"st":-6,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"ball 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":150,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":-11,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":4,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":19,"s":[169.5]},{"t":34,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.47843137254901963,0.3137254901960784,0.8509803921568627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":4,"op":35,"st":-11,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"ball 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":77,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":-16,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":-1,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":14,"s":[169.5]},{"t":29,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.47843137254901963,0.3137254901960784,0.8509803921568627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-1,"op":30,"st":-16,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Pre-comp 1","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[150,150,0],"ix":2},"a":{"a":0,"k":[395,400,0],"ix":1},"s":{"a":0,"k":[41,41,100],"ix":6}},"ao":0,"w":300,"h":300,"ip":0,"op":211,"st":0,"bm":0}],"markers":[]}

package/src/components/LoadingDots/assets/loading-button-light.json

@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 1.0.0","a":"","k":"","d":"","tc":"none"},"fr":60,"ip":9,"op":41,"w":96,"h":96,"nm":"Comp 1","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"ball4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":223,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":25,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":40,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":55,"s":[169.5]},{"t":70,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.9882352941176471,0.9882352941176471,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":40,"op":71,"st":25,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"ball 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":150,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":20,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":35,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":50,"s":[169.5]},{"t":65,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.9882352941176471,0.9882352941176471,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":35,"op":66,"st":20,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"ball 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":77,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":15,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":30,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":45,"s":[169.5]},{"t":60,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.9882352941176471,0.9882352941176471,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":30,"op":61,"st":15,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"ball3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":223,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":-6,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":9,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":24,"s":[169.5]},{"t":39,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.9882352941176471,0.9882352941176471,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":9,"op":40,"st":-6,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"ball 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":150,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":-11,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":4,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":19,"s":[169.5]},{"t":34,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.9882352941176471,0.9882352941176471,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":4,"op":35,"st":-11,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"ball 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":77,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.534],"y":[0]},"t":-16,"s":[169.5]},{"i":{"x":[0.424],"y":[1]},"o":{"x":[0.514],"y":[0]},"t":-1,"s":[129.5]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.054],"y":[0]},"t":14,"s":[169.5]},{"t":29,"s":[129.5]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.359],[14.359,0],[0,14.359],[-14.359,0]],"o":[[0,14.359],[-14.359,0],[0,-14.359],[14.359,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.9882352941176471,0.9882352941176471,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-1,"op":30,"st":-16,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Pre-comp 1","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[150,150,0],"ix":2},"a":{"a":0,"k":[395,400,0],"ix":1},"s":{"a":0,"k":[41,41,100],"ix":6}},"ao":0,"w":300,"h":300,"ip":0,"op":211,"st":0,"bm":0}],"markers":[]}

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

@@ -0,0 +1,74 @@
+import { type Meta, type StoryObj } from "@storybook/react-native";
+import { LoadingDots } from "./index";
+import { View } from "react-native";
+import { LoadingDotsVariant } from "./types";
+
+const meta = {
+  title: "Components/LoadingDots",
+  component: LoadingDots,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "A loading dots component with color variants.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["grape", "light", "dark"],
+      description: "The color variant of the dots",
+    },
+  },
+} satisfies Meta<typeof LoadingDots>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function renderLoadingDots({ variant }: { variant?: LoadingDotsVariant }) {
+  return (
+    <View style={{ width: 200, height: 200 }}>
+      <LoadingDots variant={variant} />
+    </View>
+  );
+}
+
+export const Default: Story = {
+  args: {
+    variant: "grape",
+  },
+
+  render: renderLoadingDots,
+};
+
+export const Grape: Story = {
+  args: {
+    variant: "grape",
+  },
+
+  render: renderLoadingDots,
+};
+
+export const Light: Story = {
+  args: {
+    variant: "light",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+
+  render: renderLoadingDots,
+};
+
+export const Dark: Story = {
+  args: {
+    variant: "dark",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+
+  render: renderLoadingDots,
+};

package/src/components/LoadingDots/index.tsx

@@ -0,0 +1,37 @@
+import LottieView from "lottie-react-native";
+import { Ref } from "react";
+import type { LoadingDotsProps, LoadingDotsVariant } from "./types";
+import { View, ViewStyle } from "react-native";
+
+export const LoadingDots = ({
+  variant = "grape",
+  className,
+  style,
+  lottieViewStyle,
+  ref,
+  ...rest
+}: LoadingDotsProps) => {
+  const variantsMap: Record<LoadingDotsVariant, string> = {
+    grape: require("./assets/loading-button-grape.json"),
+    light: require("./assets/loading-button-light.json"),
+    dark: require("./assets/loading-button-dark.json"),
+  };
+
+  const purposefulOverwrittenSrc = variantsMap[variant];
+
+  const narrowedStyle = (lottieViewStyle as ViewStyle) || {};
+
+  return (
+    <View className={className} style={style} ref={ref}>
+      <LottieView
+        loop={true}
+        autoPlay={true}
+        {...rest}
+        style={{ width: 24, height: 24, ...narrowedStyle }}
+        source={purposefulOverwrittenSrc}
+      />
+    </View>
+  );
+};
+
+export default LoadingDots;