@koko420/react-components 0.0.5 → 0.0.7

package/dist/index.cjs

@@ -3,6 +3,8 @@
 var classVarianceAuthority = require('class-variance-authority');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactNative = require('react-native');
 
 // src/components/atoms/DotsLoader.tsx
 var dots = classVarianceAuthority.cva("", {
@@ -81,7 +83,208 @@ var DotsLoader = ({
     }
   );
 };
+var COLORS = {
+  primary: "#FFFFFF",
+  primaryBordered: "#FFFFFF",
+  secondary: "#000000",
+  tertiary: "#737373"
+  // neutral-550
+};
+var SCALES = {
+  xs: 0.65,
+  sm: 0.7,
+  md: 0.8,
+  lg: 1,
+  xl: 1.05,
+  xxl: 1.1
+};
+var DotsLoader2 = ({
+  modifier = "primary",
+  size = "md",
+  dotsBg,
+  style
+}) => {
+  const [dot1Scale, dot2Position, dot3Position, dot4Scale] = react.useMemo(
+    () => [
+      new reactNative.Animated.Value(0),
+      new reactNative.Animated.Value(0),
+      new reactNative.Animated.Value(0),
+      new reactNative.Animated.Value(1)
+    ],
+    []
+  );
+  react.useEffect(() => {
+    const scaleInAnimation = reactNative.Animated.loop(
+      reactNative.Animated.sequence([
+        reactNative.Animated.timing(dot1Scale, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true
+        }),
+        reactNative.Animated.timing(dot1Scale, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true
+        })
+      ])
+    );
+    const move24pxDot2 = reactNative.Animated.loop(
+      reactNative.Animated.sequence([
+        reactNative.Animated.timing(dot2Position, {
+          toValue: 24,
+          duration: 600,
+          useNativeDriver: true
+        }),
+        reactNative.Animated.timing(dot2Position, {
+          toValue: 0,
+          duration: 0,
+          useNativeDriver: true
+        })
+      ])
+    );
+    const move24pxDot3 = reactNative.Animated.loop(
+      reactNative.Animated.sequence([
+        reactNative.Animated.timing(dot3Position, {
+          toValue: 24,
+          duration: 600,
+          useNativeDriver: true
+        }),
+        reactNative.Animated.timing(dot3Position, {
+          toValue: 0,
+          duration: 0,
+          useNativeDriver: true
+        })
+      ])
+    );
+    const scaleOutAnimation = reactNative.Animated.loop(
+      reactNative.Animated.sequence([
+        reactNative.Animated.timing(dot4Scale, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true
+        }),
+        reactNative.Animated.timing(dot4Scale, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true
+        })
+      ])
+    );
+    scaleInAnimation.start();
+    move24pxDot2.start();
+    move24pxDot3.start();
+    scaleOutAnimation.start();
+    return () => {
+      scaleInAnimation.stop();
+      move24pxDot2.stop();
+      move24pxDot3.stop();
+      scaleOutAnimation.stop();
+    };
+  }, [dot1Scale, dot2Position, dot3Position, dot4Scale]);
+  const scale = SCALES[size];
+  const backgroundColor = dotsBg || COLORS[modifier];
+  const dotBaseStyle = [
+    styles.dot,
+    {
+      backgroundColor,
+      transform: [{ scale }]
+    }
+  ];
+  const borderedStyle = modifier === "primaryBordered" ? {
+    shadowColor: "rgba(255,255,255,0.5)",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 1,
+    shadowRadius: 1,
+    elevation: 2
+  } : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.container, { transform: [{ scale }] }, style], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Animated.View,
+      {
+        style: [
+          dotBaseStyle,
+          borderedStyle,
+          styles.dot1,
+          {
+            transform: [{ scale: dot1Scale }, { scale }]
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Animated.View,
+      {
+        style: [
+          dotBaseStyle,
+          borderedStyle,
+          styles.dot2,
+          {
+            transform: [{ translateX: dot2Position }, { scale }]
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Animated.View,
+      {
+        style: [
+          dotBaseStyle,
+          borderedStyle,
+          styles.dot3,
+          {
+            transform: [{ translateX: dot3Position }, { scale }]
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Animated.View,
+      {
+        style: [
+          dotBaseStyle,
+          borderedStyle,
+          styles.dot4,
+          {
+            transform: [{ scale: dot4Scale }, { scale }]
+          }
+        ]
+      }
+    )
+  ] });
+};
+DotsLoader2.displayName = "DotsLoader";
+var styles = reactNative.StyleSheet.create({
+  container: {
+    position: "relative",
+    height: 13,
+    width: 80
+  },
+  dot: {
+    position: "absolute",
+    top: 0,
+    height: 13,
+    width: 13,
+    borderRadius: 13 / 2
+  },
+  dot1: {
+    left: 8,
+    zIndex: 1
+  },
+  dot2: {
+    left: 8,
+    zIndex: 0
+  },
+  dot3: {
+    left: 32,
+    zIndex: 2
+  },
+  dot4: {
+    left: 56,
+    zIndex: 1
+  }
+});
 
 exports.DotsLoader = DotsLoader;
+exports.DotsLoaderNative = DotsLoader2;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/atoms/DotsLoader.tsx"],"names":["cva","jsxs","twMerge","jsx"],"mappings":";;;;;;;AAGA,IAAM,IAAA,GAAOA,2BAAI,EAAA,EAAI;AAAA,EACnB,QAAA,EAAU;AAAA,IACR,QAAA,EAAU;AAAA,MACR,OAAA,EAAS,CAAC,UAAU,CAAA;AAAA,MACpB,eAAA,EAAiB;AAAA,QACf;AAAA,OACF;AAAA,MACA,SAAA,EAAW,CAAC,UAAU,CAAA;AAAA,MACtB,QAAA,EAAU,CAAC,gBAAgB;AAAA,KAC7B;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,CAAC,qBAAqB,CAAA;AAAA,MAC1B,EAAA,EAAI,CAAC,oBAAoB,CAAA;AAAA,MACzB,EAAA,EAAI,CAAC,oBAAoB,CAAA;AAAA,MACzB,EAAA,EAAI,CAAC,kBAAkB,CAAA;AAAA,MACvB,EAAA,EAAI,CAAC,qBAAqB,CAAA;AAAA,MAC1B,GAAA,EAAK,CAAC,oBAAoB;AAAA;AAC5B;AAEJ,CAAC,CAAA;AASM,IAAM,aAAa,CAAC;AAAA,EACzB,IAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAAuB;AACrB,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,EAAE,IAAA,EAAM,CAAA,EAC9B,QAAA,GAAW,CAAA,8CAAA,EAAiD,MAAA,IAAU,IAAA,CAAK,EAAE,QAAA,EAAU,CAAC,CAAA,CAAA;AAE1F,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,qBAAA;AAAA,QACT,4CAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,qBAAA;AAAA,cACT,mDAAA;AAAA,cACA;AAAA;AACF;AAAA,SACF;AAAA,wBACAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,qBAAA;AAAA,cACT,8CAAA;AAAA,cACA;AAAA;AACF;AAAA,SACF;AAAA,wBACAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,qBAAA;AAAA,cACT,qDAAA;AAAA,cACA;AAAA;AACF;AAAA,SACF;AAAA,wBACAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,qBAAA;AAAA,cACT,qDAAA;AAAA,cACA;AAAA;AACF;AAAA;AACF;AAAA;AAAA,GACF;AAEJ","file":"index.cjs","sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { twMerge } from \"tailwind-merge\";\n\nconst dots = cva(\"\", {\n  variants: {\n    modifier: {\n      primary: [\"bg-white\"],\n      primaryBordered: [\n        \"bg-white -mb-[2px] shadow-[0_0_0_1px_rgba(255,255,255,0.5)]\",\n      ],\n      secondary: [\"bg-black\"],\n      tertiary: [\"bg-neutral-550\"],\n    },\n    size: {\n      xs: [\"-m-x-2 scale-[0.65]\"],\n      sm: [\"-m-x-4 scale-[0.7]\"],\n      md: [\"-m-x-4 scale-[0.8]\"],\n      lg: [\"-m-x-4 scale-[1]\"],\n      xl: [\"-m-x-4 scale-[1.05]\"],\n      xxl: [\"-m-x-4 scale-[1.1]\"],\n    },\n  },\n});\n\ntype DotsVariants = VariantProps<typeof dots>;\n\nexport type DotsLoaderProps = {\n  dotsBg?: string;\n  className?: string;\n} & DotsVariants;\n\nexport const DotsLoader = ({\n  size,\n  dotsBg,\n  modifier,\n  className,\n}: DotsLoaderProps) => {\n  const sizeStyles = dots({ size }),\n    dotStyle = `absolute top-0 h-[13px] w-[13px] rounded-full ${dotsBg ?? dots({ modifier })}`;\n\n  return (\n    <div\n      className={twMerge(\n        \"relative z-0 -ml-1 -mr-1 h-[13px] w-[80px]\",\n        sizeStyles,\n        className,\n      )}\n    >\n      <div\n        className={twMerge(\n          \"left-[8px] z-[1] animate-[scale-in_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n      <div\n        className={twMerge(\n          \"left-[8px] animate-[move-24px_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n      <div\n        className={twMerge(\n          \"left-[32px] z-[2] animate-[move-24px_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n      <div\n        className={twMerge(\n          \"left-[56px] z-[1] animate-[scale-out_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n    </div>\n  );\n};\n\nexport default DotsLoader;\n\n"]}
+{"version":3,"sources":["../src/components/atoms/DotsLoader.tsx","../src/native/DotsLoader.tsx"],"names":["cva","jsxs","twMerge","jsx","DotsLoader","useMemo","Animated","useEffect","View","StyleSheet"],"mappings":"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","file":"index.cjs","sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { twMerge } from \"tailwind-merge\";\n\nconst dots = cva(\"\", {\n  variants: {\n    modifier: {\n      primary: [\"bg-white\"],\n      primaryBordered: [\n        \"bg-white -mb-[2px] shadow-[0_0_0_1px_rgba(255,255,255,0.5)]\",\n      ],\n      secondary: [\"bg-black\"],\n      tertiary: [\"bg-neutral-550\"],\n    },\n    size: {\n      xs: [\"-m-x-2 scale-[0.65]\"],\n      sm: [\"-m-x-4 scale-[0.7]\"],\n      md: [\"-m-x-4 scale-[0.8]\"],\n      lg: [\"-m-x-4 scale-[1]\"],\n      xl: [\"-m-x-4 scale-[1.05]\"],\n      xxl: [\"-m-x-4 scale-[1.1]\"],\n    },\n  },\n});\n\ntype DotsVariants = VariantProps<typeof dots>;\n\nexport type DotsLoaderProps = {\n  dotsBg?: string;\n  className?: string;\n} & DotsVariants;\n\nexport const DotsLoader = ({\n  size,\n  dotsBg,\n  modifier,\n  className,\n}: DotsLoaderProps) => {\n  const sizeStyles = dots({ size }),\n    dotStyle = `absolute top-0 h-[13px] w-[13px] rounded-full ${dotsBg ?? dots({ modifier })}`;\n\n  return (\n    <div\n      className={twMerge(\n        \"relative z-0 -ml-1 -mr-1 h-[13px] w-[80px]\",\n        sizeStyles,\n        className,\n      )}\n    >\n      <div\n        className={twMerge(\n          \"left-[8px] z-[1] animate-[scale-in_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n      <div\n        className={twMerge(\n          \"left-[8px] animate-[move-24px_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n      <div\n        className={twMerge(\n          \"left-[32px] z-[2] animate-[move-24px_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n      <div\n        className={twMerge(\n          \"left-[56px] z-[1] animate-[scale-out_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n    </div>\n  );\n};\n\nexport default DotsLoader;\n\n","import * as React from \"react\";\nimport { useEffect, useMemo } from \"react\";\nimport { View, Animated, StyleSheet, type ViewStyle } from \"react-native\";\n\ntype Modifier = \"primary\" | \"primaryBordered\" | \"secondary\" | \"tertiary\";\ntype Size = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n\nexport type DotsLoaderProps = {\n  modifier?: Modifier;\n  size?: Size;\n  dotsBg?: string;\n  style?: ViewStyle;\n};\n\nconst COLORS = {\n  primary: \"#FFFFFF\",\n  primaryBordered: \"#FFFFFF\",\n  secondary: \"#000000\",\n  tertiary: \"#737373\", // neutral-550\n};\n\nconst SCALES = {\n  xs: 0.65,\n  sm: 0.7,\n  md: 0.8,\n  lg: 1,\n  xl: 1.05,\n  xxl: 1.1,\n};\n\nexport const DotsLoader = ({\n  modifier = \"primary\",\n  size = \"md\",\n  dotsBg,\n  style,\n}: DotsLoaderProps) => {\n  const [dot1Scale, dot2Position, dot3Position, dot4Scale] = useMemo(\n    () => [\n      new Animated.Value(0),\n      new Animated.Value(0),\n      new Animated.Value(0),\n      new Animated.Value(1),\n    ],\n    []\n  );\n\n  useEffect(() => {\n    const scaleInAnimation = Animated.loop(\n      Animated.sequence([\n        Animated.timing(dot1Scale, {\n          toValue: 1,\n          duration: 300,\n          useNativeDriver: true,\n        }),\n        Animated.timing(dot1Scale, {\n          toValue: 0,\n          duration: 300,\n          useNativeDriver: true,\n        }),\n      ])\n    );\n\n    const move24pxDot2 = Animated.loop(\n      Animated.sequence([\n        Animated.timing(dot2Position, {\n          toValue: 24,\n          duration: 600,\n          useNativeDriver: true,\n        }),\n        Animated.timing(dot2Position, {\n          toValue: 0,\n          duration: 0,\n          useNativeDriver: true,\n        }),\n      ])\n    );\n\n    const move24pxDot3 = Animated.loop(\n      Animated.sequence([\n        Animated.timing(dot3Position, {\n          toValue: 24,\n          duration: 600,\n          useNativeDriver: true,\n        }),\n        Animated.timing(dot3Position, {\n          toValue: 0,\n          duration: 0,\n          useNativeDriver: true,\n        }),\n      ])\n    );\n\n    const scaleOutAnimation = Animated.loop(\n      Animated.sequence([\n        Animated.timing(dot4Scale, {\n          toValue: 0,\n          duration: 300,\n          useNativeDriver: true,\n        }),\n        Animated.timing(dot4Scale, {\n          toValue: 1,\n          duration: 300,\n          useNativeDriver: true,\n        }),\n      ])\n    );\n\n    scaleInAnimation.start();\n    move24pxDot2.start();\n    move24pxDot3.start();\n    scaleOutAnimation.start();\n\n    return () => {\n      scaleInAnimation.stop();\n      move24pxDot2.stop();\n      move24pxDot3.stop();\n      scaleOutAnimation.stop();\n    };\n  }, [dot1Scale, dot2Position, dot3Position, dot4Scale]);\n\n  const scale = SCALES[size];\n  const backgroundColor = dotsBg || COLORS[modifier];\n\n  const dotBaseStyle = [\n    styles.dot,\n    {\n      backgroundColor,\n      transform: [{ scale }],\n    },\n  ];\n\n  const borderedStyle =\n    modifier === \"primaryBordered\"\n      ? {\n          shadowColor: \"rgba(255,255,255,0.5)\",\n          shadowOffset: { width: 0, height: 0 },\n          shadowOpacity: 1,\n          shadowRadius: 1,\n          elevation: 2,\n        }\n      : {};\n\n  return (\n    <View style={[styles.container, { transform: [{ scale }] }, style]}>\n      <Animated.View\n        style={[\n          dotBaseStyle,\n          borderedStyle,\n          styles.dot1,\n          {\n            transform: [{ scale: dot1Scale }, { scale }],\n          },\n        ]}\n      />\n      <Animated.View\n        style={[\n          dotBaseStyle,\n          borderedStyle,\n          styles.dot2,\n          {\n            transform: [{ translateX: dot2Position }, { scale }],\n          },\n        ]}\n      />\n      <Animated.View\n        style={[\n          dotBaseStyle,\n          borderedStyle,\n          styles.dot3,\n          {\n            transform: [{ translateX: dot3Position }, { scale }],\n          },\n        ]}\n      />\n      <Animated.View\n        style={[\n          dotBaseStyle,\n          borderedStyle,\n          styles.dot4,\n          {\n            transform: [{ scale: dot4Scale }, { scale }],\n          },\n        ]}\n      />\n    </View>\n  );\n};\n\nDotsLoader.displayName = \"DotsLoader\";\n\nconst styles = StyleSheet.create({\n  container: {\n    position: \"relative\",\n    height: 13,\n    width: 80,\n  },\n  dot: {\n    position: \"absolute\",\n    top: 0,\n    height: 13,\n    width: 13,\n    borderRadius: 13 / 2,\n  },\n  dot1: {\n    left: 8,\n    zIndex: 1,\n  },\n  dot2: {\n    left: 8,\n    zIndex: 0,\n  },\n  dot3: {\n    left: 32,\n    zIndex: 2,\n  },\n  dot4: {\n    left: 56,\n    zIndex: 1,\n  },\n});\n\nexport default DotsLoader;\n"]}

package/dist/index.d.cts

@@ -1,16 +1,30 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import { ViewStyle } from 'react-native';
 
 declare const dots: (props?: ({
     modifier?: "primary" | "primaryBordered" | "secondary" | "tertiary" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type DotsVariants = VariantProps<typeof dots>;
-type DotsLoaderProps = {
+type DotsLoaderProps$1 = {
     dotsBg?: string;
     className?: string;
 } & DotsVariants;
-declare const DotsLoader: ({ size, dotsBg, modifier, className, }: DotsLoaderProps) => react_jsx_runtime.JSX.Element;
+declare const DotsLoader$1: ({ size, dotsBg, modifier, className, }: DotsLoaderProps$1) => react_jsx_runtime.JSX.Element;
+
+type Modifier = "primary" | "primaryBordered" | "secondary" | "tertiary";
+type Size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+type DotsLoaderProps = {
+    modifier?: Modifier;
+    size?: Size;
+    dotsBg?: string;
+    style?: ViewStyle;
+};
+declare const DotsLoader: {
+    ({ modifier, size, dotsBg, style, }: DotsLoaderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-export { DotsLoader, type DotsLoaderProps };
+export { DotsLoader$1 as DotsLoader, DotsLoader as DotsLoaderNative, type DotsLoaderProps as DotsLoaderNativeProps, type DotsLoaderProps$1 as DotsLoaderProps };

package/dist/index.d.ts

@@ -1,16 +1,30 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import { ViewStyle } from 'react-native';
 
 declare const dots: (props?: ({
     modifier?: "primary" | "primaryBordered" | "secondary" | "tertiary" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type DotsVariants = VariantProps<typeof dots>;
-type DotsLoaderProps = {
+type DotsLoaderProps$1 = {
     dotsBg?: string;
     className?: string;
 } & DotsVariants;
-declare const DotsLoader: ({ size, dotsBg, modifier, className, }: DotsLoaderProps) => react_jsx_runtime.JSX.Element;
+declare const DotsLoader$1: ({ size, dotsBg, modifier, className, }: DotsLoaderProps$1) => react_jsx_runtime.JSX.Element;
+
+type Modifier = "primary" | "primaryBordered" | "secondary" | "tertiary";
+type Size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+type DotsLoaderProps = {
+    modifier?: Modifier;
+    size?: Size;
+    dotsBg?: string;
+    style?: ViewStyle;
+};
+declare const DotsLoader: {
+    ({ modifier, size, dotsBg, style, }: DotsLoaderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-export { DotsLoader, type DotsLoaderProps };
+export { DotsLoader$1 as DotsLoader, DotsLoader as DotsLoaderNative, type DotsLoaderProps as DotsLoaderNativeProps, type DotsLoaderProps$1 as DotsLoaderProps };

package/dist/index.js

@@ -1,6 +1,8 @@
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useEffect } from 'react';
+import { StyleSheet, Animated, View } from 'react-native';
 
 // src/components/atoms/DotsLoader.tsx
 var dots = cva("", {
@@ -79,7 +81,207 @@ var DotsLoader = ({
     }
   );
 };
+var COLORS = {
+  primary: "#FFFFFF",
+  primaryBordered: "#FFFFFF",
+  secondary: "#000000",
+  tertiary: "#737373"
+  // neutral-550
+};
+var SCALES = {
+  xs: 0.65,
+  sm: 0.7,
+  md: 0.8,
+  lg: 1,
+  xl: 1.05,
+  xxl: 1.1
+};
+var DotsLoader2 = ({
+  modifier = "primary",
+  size = "md",
+  dotsBg,
+  style
+}) => {
+  const [dot1Scale, dot2Position, dot3Position, dot4Scale] = useMemo(
+    () => [
+      new Animated.Value(0),
+      new Animated.Value(0),
+      new Animated.Value(0),
+      new Animated.Value(1)
+    ],
+    []
+  );
+  useEffect(() => {
+    const scaleInAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(dot1Scale, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true
+        }),
+        Animated.timing(dot1Scale, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true
+        })
+      ])
+    );
+    const move24pxDot2 = Animated.loop(
+      Animated.sequence([
+        Animated.timing(dot2Position, {
+          toValue: 24,
+          duration: 600,
+          useNativeDriver: true
+        }),
+        Animated.timing(dot2Position, {
+          toValue: 0,
+          duration: 0,
+          useNativeDriver: true
+        })
+      ])
+    );
+    const move24pxDot3 = Animated.loop(
+      Animated.sequence([
+        Animated.timing(dot3Position, {
+          toValue: 24,
+          duration: 600,
+          useNativeDriver: true
+        }),
+        Animated.timing(dot3Position, {
+          toValue: 0,
+          duration: 0,
+          useNativeDriver: true
+        })
+      ])
+    );
+    const scaleOutAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(dot4Scale, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true
+        }),
+        Animated.timing(dot4Scale, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true
+        })
+      ])
+    );
+    scaleInAnimation.start();
+    move24pxDot2.start();
+    move24pxDot3.start();
+    scaleOutAnimation.start();
+    return () => {
+      scaleInAnimation.stop();
+      move24pxDot2.stop();
+      move24pxDot3.stop();
+      scaleOutAnimation.stop();
+    };
+  }, [dot1Scale, dot2Position, dot3Position, dot4Scale]);
+  const scale = SCALES[size];
+  const backgroundColor = dotsBg || COLORS[modifier];
+  const dotBaseStyle = [
+    styles.dot,
+    {
+      backgroundColor,
+      transform: [{ scale }]
+    }
+  ];
+  const borderedStyle = modifier === "primaryBordered" ? {
+    shadowColor: "rgba(255,255,255,0.5)",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 1,
+    shadowRadius: 1,
+    elevation: 2
+  } : {};
+  return /* @__PURE__ */ jsxs(View, { style: [styles.container, { transform: [{ scale }] }, style], children: [
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [
+          dotBaseStyle,
+          borderedStyle,
+          styles.dot1,
+          {
+            transform: [{ scale: dot1Scale }, { scale }]
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [
+          dotBaseStyle,
+          borderedStyle,
+          styles.dot2,
+          {
+            transform: [{ translateX: dot2Position }, { scale }]
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [
+          dotBaseStyle,
+          borderedStyle,
+          styles.dot3,
+          {
+            transform: [{ translateX: dot3Position }, { scale }]
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [
+          dotBaseStyle,
+          borderedStyle,
+          styles.dot4,
+          {
+            transform: [{ scale: dot4Scale }, { scale }]
+          }
+        ]
+      }
+    )
+  ] });
+};
+DotsLoader2.displayName = "DotsLoader";
+var styles = StyleSheet.create({
+  container: {
+    position: "relative",
+    height: 13,
+    width: 80
+  },
+  dot: {
+    position: "absolute",
+    top: 0,
+    height: 13,
+    width: 13,
+    borderRadius: 13 / 2
+  },
+  dot1: {
+    left: 8,
+    zIndex: 1
+  },
+  dot2: {
+    left: 8,
+    zIndex: 0
+  },
+  dot3: {
+    left: 32,
+    zIndex: 2
+  },
+  dot4: {
+    left: 56,
+    zIndex: 1
+  }
+});
 
-export { DotsLoader };
+export { DotsLoader, DotsLoader2 as DotsLoaderNative };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/atoms/DotsLoader.tsx"],"names":[],"mappings":";;;;;AAGA,IAAM,IAAA,GAAO,IAAI,EAAA,EAAI;AAAA,EACnB,QAAA,EAAU;AAAA,IACR,QAAA,EAAU;AAAA,MACR,OAAA,EAAS,CAAC,UAAU,CAAA;AAAA,MACpB,eAAA,EAAiB;AAAA,QACf;AAAA,OACF;AAAA,MACA,SAAA,EAAW,CAAC,UAAU,CAAA;AAAA,MACtB,QAAA,EAAU,CAAC,gBAAgB;AAAA,KAC7B;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,CAAC,qBAAqB,CAAA;AAAA,MAC1B,EAAA,EAAI,CAAC,oBAAoB,CAAA;AAAA,MACzB,EAAA,EAAI,CAAC,oBAAoB,CAAA;AAAA,MACzB,EAAA,EAAI,CAAC,kBAAkB,CAAA;AAAA,MACvB,EAAA,EAAI,CAAC,qBAAqB,CAAA;AAAA,MAC1B,GAAA,EAAK,CAAC,oBAAoB;AAAA;AAC5B;AAEJ,CAAC,CAAA;AASM,IAAM,aAAa,CAAC;AAAA,EACzB,IAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAAuB;AACrB,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,EAAE,IAAA,EAAM,CAAA,EAC9B,QAAA,GAAW,CAAA,8CAAA,EAAiD,MAAA,IAAU,IAAA,CAAK,EAAE,QAAA,EAAU,CAAC,CAAA,CAAA;AAE1F,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,QACT,4CAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,OAAA;AAAA,cACT,mDAAA;AAAA,cACA;AAAA;AACF;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,OAAA;AAAA,cACT,8CAAA;AAAA,cACA;AAAA;AACF;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,OAAA;AAAA,cACT,qDAAA;AAAA,cACA;AAAA;AACF;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,OAAA;AAAA,cACT,qDAAA;AAAA,cACA;AAAA;AACF;AAAA;AACF;AAAA;AAAA,GACF;AAEJ","file":"index.js","sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { twMerge } from \"tailwind-merge\";\n\nconst dots = cva(\"\", {\n  variants: {\n    modifier: {\n      primary: [\"bg-white\"],\n      primaryBordered: [\n        \"bg-white -mb-[2px] shadow-[0_0_0_1px_rgba(255,255,255,0.5)]\",\n      ],\n      secondary: [\"bg-black\"],\n      tertiary: [\"bg-neutral-550\"],\n    },\n    size: {\n      xs: [\"-m-x-2 scale-[0.65]\"],\n      sm: [\"-m-x-4 scale-[0.7]\"],\n      md: [\"-m-x-4 scale-[0.8]\"],\n      lg: [\"-m-x-4 scale-[1]\"],\n      xl: [\"-m-x-4 scale-[1.05]\"],\n      xxl: [\"-m-x-4 scale-[1.1]\"],\n    },\n  },\n});\n\ntype DotsVariants = VariantProps<typeof dots>;\n\nexport type DotsLoaderProps = {\n  dotsBg?: string;\n  className?: string;\n} & DotsVariants;\n\nexport const DotsLoader = ({\n  size,\n  dotsBg,\n  modifier,\n  className,\n}: DotsLoaderProps) => {\n  const sizeStyles = dots({ size }),\n    dotStyle = `absolute top-0 h-[13px] w-[13px] rounded-full ${dotsBg ?? dots({ modifier })}`;\n\n  return (\n    <div\n      className={twMerge(\n        \"relative z-0 -ml-1 -mr-1 h-[13px] w-[80px]\",\n        sizeStyles,\n        className,\n      )}\n    >\n      <div\n        className={twMerge(\n          \"left-[8px] z-[1] animate-[scale-in_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n      <div\n        className={twMerge(\n          \"left-[8px] animate-[move-24px_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n      <div\n        className={twMerge(\n          \"left-[32px] z-[2] animate-[move-24px_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n      <div\n        className={twMerge(\n          \"left-[56px] z-[1] animate-[scale-out_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n    </div>\n  );\n};\n\nexport default DotsLoader;\n\n"]}
+{"version":3,"sources":["../src/components/atoms/DotsLoader.tsx","../src/native/DotsLoader.tsx"],"names":["DotsLoader","jsxs","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { twMerge } from \"tailwind-merge\";\n\nconst dots = cva(\"\", {\n  variants: {\n    modifier: {\n      primary: [\"bg-white\"],\n      primaryBordered: [\n        \"bg-white -mb-[2px] shadow-[0_0_0_1px_rgba(255,255,255,0.5)]\",\n      ],\n      secondary: [\"bg-black\"],\n      tertiary: [\"bg-neutral-550\"],\n    },\n    size: {\n      xs: [\"-m-x-2 scale-[0.65]\"],\n      sm: [\"-m-x-4 scale-[0.7]\"],\n      md: [\"-m-x-4 scale-[0.8]\"],\n      lg: [\"-m-x-4 scale-[1]\"],\n      xl: [\"-m-x-4 scale-[1.05]\"],\n      xxl: [\"-m-x-4 scale-[1.1]\"],\n    },\n  },\n});\n\ntype DotsVariants = VariantProps<typeof dots>;\n\nexport type DotsLoaderProps = {\n  dotsBg?: string;\n  className?: string;\n} & DotsVariants;\n\nexport const DotsLoader = ({\n  size,\n  dotsBg,\n  modifier,\n  className,\n}: DotsLoaderProps) => {\n  const sizeStyles = dots({ size }),\n    dotStyle = `absolute top-0 h-[13px] w-[13px] rounded-full ${dotsBg ?? dots({ modifier })}`;\n\n  return (\n    <div\n      className={twMerge(\n        \"relative z-0 -ml-1 -mr-1 h-[13px] w-[80px]\",\n        sizeStyles,\n        className,\n      )}\n    >\n      <div\n        className={twMerge(\n          \"left-[8px] z-[1] animate-[scale-in_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n      <div\n        className={twMerge(\n          \"left-[8px] animate-[move-24px_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n      <div\n        className={twMerge(\n          \"left-[32px] z-[2] animate-[move-24px_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n      <div\n        className={twMerge(\n          \"left-[56px] z-[1] animate-[scale-out_0.6s_infinite]\",\n          dotStyle,\n        )}\n      />\n    </div>\n  );\n};\n\nexport default DotsLoader;\n\n","import * as React from \"react\";\nimport { useEffect, useMemo } from \"react\";\nimport { View, Animated, StyleSheet, type ViewStyle } from \"react-native\";\n\ntype Modifier = \"primary\" | \"primaryBordered\" | \"secondary\" | \"tertiary\";\ntype Size = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n\nexport type DotsLoaderProps = {\n  modifier?: Modifier;\n  size?: Size;\n  dotsBg?: string;\n  style?: ViewStyle;\n};\n\nconst COLORS = {\n  primary: \"#FFFFFF\",\n  primaryBordered: \"#FFFFFF\",\n  secondary: \"#000000\",\n  tertiary: \"#737373\", // neutral-550\n};\n\nconst SCALES = {\n  xs: 0.65,\n  sm: 0.7,\n  md: 0.8,\n  lg: 1,\n  xl: 1.05,\n  xxl: 1.1,\n};\n\nexport const DotsLoader = ({\n  modifier = \"primary\",\n  size = \"md\",\n  dotsBg,\n  style,\n}: DotsLoaderProps) => {\n  const [dot1Scale, dot2Position, dot3Position, dot4Scale] = useMemo(\n    () => [\n      new Animated.Value(0),\n      new Animated.Value(0),\n      new Animated.Value(0),\n      new Animated.Value(1),\n    ],\n    []\n  );\n\n  useEffect(() => {\n    const scaleInAnimation = Animated.loop(\n      Animated.sequence([\n        Animated.timing(dot1Scale, {\n          toValue: 1,\n          duration: 300,\n          useNativeDriver: true,\n        }),\n        Animated.timing(dot1Scale, {\n          toValue: 0,\n          duration: 300,\n          useNativeDriver: true,\n        }),\n      ])\n    );\n\n    const move24pxDot2 = Animated.loop(\n      Animated.sequence([\n        Animated.timing(dot2Position, {\n          toValue: 24,\n          duration: 600,\n          useNativeDriver: true,\n        }),\n        Animated.timing(dot2Position, {\n          toValue: 0,\n          duration: 0,\n          useNativeDriver: true,\n        }),\n      ])\n    );\n\n    const move24pxDot3 = Animated.loop(\n      Animated.sequence([\n        Animated.timing(dot3Position, {\n          toValue: 24,\n          duration: 600,\n          useNativeDriver: true,\n        }),\n        Animated.timing(dot3Position, {\n          toValue: 0,\n          duration: 0,\n          useNativeDriver: true,\n        }),\n      ])\n    );\n\n    const scaleOutAnimation = Animated.loop(\n      Animated.sequence([\n        Animated.timing(dot4Scale, {\n          toValue: 0,\n          duration: 300,\n          useNativeDriver: true,\n        }),\n        Animated.timing(dot4Scale, {\n          toValue: 1,\n          duration: 300,\n          useNativeDriver: true,\n        }),\n      ])\n    );\n\n    scaleInAnimation.start();\n    move24pxDot2.start();\n    move24pxDot3.start();\n    scaleOutAnimation.start();\n\n    return () => {\n      scaleInAnimation.stop();\n      move24pxDot2.stop();\n      move24pxDot3.stop();\n      scaleOutAnimation.stop();\n    };\n  }, [dot1Scale, dot2Position, dot3Position, dot4Scale]);\n\n  const scale = SCALES[size];\n  const backgroundColor = dotsBg || COLORS[modifier];\n\n  const dotBaseStyle = [\n    styles.dot,\n    {\n      backgroundColor,\n      transform: [{ scale }],\n    },\n  ];\n\n  const borderedStyle =\n    modifier === \"primaryBordered\"\n      ? {\n          shadowColor: \"rgba(255,255,255,0.5)\",\n          shadowOffset: { width: 0, height: 0 },\n          shadowOpacity: 1,\n          shadowRadius: 1,\n          elevation: 2,\n        }\n      : {};\n\n  return (\n    <View style={[styles.container, { transform: [{ scale }] }, style]}>\n      <Animated.View\n        style={[\n          dotBaseStyle,\n          borderedStyle,\n          styles.dot1,\n          {\n            transform: [{ scale: dot1Scale }, { scale }],\n          },\n        ]}\n      />\n      <Animated.View\n        style={[\n          dotBaseStyle,\n          borderedStyle,\n          styles.dot2,\n          {\n            transform: [{ translateX: dot2Position }, { scale }],\n          },\n        ]}\n      />\n      <Animated.View\n        style={[\n          dotBaseStyle,\n          borderedStyle,\n          styles.dot3,\n          {\n            transform: [{ translateX: dot3Position }, { scale }],\n          },\n        ]}\n      />\n      <Animated.View\n        style={[\n          dotBaseStyle,\n          borderedStyle,\n          styles.dot4,\n          {\n            transform: [{ scale: dot4Scale }, { scale }],\n          },\n        ]}\n      />\n    </View>\n  );\n};\n\nDotsLoader.displayName = \"DotsLoader\";\n\nconst styles = StyleSheet.create({\n  container: {\n    position: \"relative\",\n    height: 13,\n    width: 80,\n  },\n  dot: {\n    position: \"absolute\",\n    top: 0,\n    height: 13,\n    width: 13,\n    borderRadius: 13 / 2,\n  },\n  dot1: {\n    left: 8,\n    zIndex: 1,\n  },\n  dot2: {\n    left: 8,\n    zIndex: 0,\n  },\n  dot3: {\n    left: 32,\n    zIndex: 2,\n  },\n  dot4: {\n    left: 56,\n    zIndex: 1,\n  },\n});\n\nexport default DotsLoader;\n"]}

package/dist/styles.css

@@ -1 +1 @@
-.absolute{position:absolute}.relative{position:relative}.left-\[32px\]{left:32px}.left-\[56px\]{left:56px}.left-\[8px\]{left:8px}.top-0{top:0}.z-0{z-index:0}.z-\[1\]{z-index:1}.z-\[2\]{z-index:2}.-mb-\[2px\]{margin-bottom:-2px}.-ml-1{margin-left:-.25rem}.-mr-1{margin-right:-.25rem}.h-\[13px\]{height:13px}.w-\[13px\]{width:13px}.w-\[80px\]{width:80px}.scale-\[0\.65\]{--tw-scale-x:0.65;--tw-scale-y:0.65}.scale-\[0\.65\],.scale-\[0\.7\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\[0\.7\]{--tw-scale-x:0.7;--tw-scale-y:0.7}.scale-\[0\.8\]{--tw-scale-x:0.8;--tw-scale-y:0.8}.scale-\[0\.8\],.scale-\[1\.05\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\[1\.05\]{--tw-scale-x:1.05;--tw-scale-y:1.05}.scale-\[1\.1\]{--tw-scale-x:1.1;--tw-scale-y:1.1}.scale-\[1\.1\],.scale-\[1\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\[1\]{--tw-scale-x:1;--tw-scale-y:1}@keyframes move-24px{0%{transform:translateX(0)}to{transform:translateX(24px)}}.animate-\[move-24px_0\.6s_infinite\]{animation:move-24px .6s infinite}@keyframes scale-in{0%{transform:scale(0)}to{transform:scale(1)}}.animate-\[scale-in_0\.6s_infinite\]{animation:scale-in .6s infinite}@keyframes scale-out{0%{transform:scale(1)}to{transform:scale(0)}}.animate-\[scale-out_0\.6s_infinite\]{animation:scale-out .6s infinite}.rounded-full{border-radius:9999px}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-neutral-550{--tw-bg-opacity:1;background-color:rgb(115 115 115/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.shadow-\[0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.5\)\]{--tw-shadow:0 0 0 1px hsla(0,0%,100%,.5);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
+.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.absolute{position:absolute}.relative{position:relative}.left-\[32px\]{left:32px}.left-\[56px\]{left:56px}.left-\[8px\]{left:8px}.top-0{top:0}.z-0{z-index:0}.z-\[1\]{z-index:1}.z-\[2\]{z-index:2}.-mb-\[2px\]{margin-bottom:-2px}.-ml-1{margin-left:-.25rem}.-mr-1{margin-right:-.25rem}.h-\[13px\]{height:13px}.w-\[13px\]{width:13px}.w-\[80px\]{width:80px}.scale-\[0\.65\]{--tw-scale-x:0.65;--tw-scale-y:0.65}.scale-\[0\.65\],.scale-\[0\.7\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\[0\.7\]{--tw-scale-x:0.7;--tw-scale-y:0.7}.scale-\[0\.8\]{--tw-scale-x:0.8;--tw-scale-y:0.8}.scale-\[0\.8\],.scale-\[1\.05\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\[1\.05\]{--tw-scale-x:1.05;--tw-scale-y:1.05}.scale-\[1\.1\]{--tw-scale-x:1.1;--tw-scale-y:1.1}.scale-\[1\.1\],.scale-\[1\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\[1\]{--tw-scale-x:1;--tw-scale-y:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes move-24px{0%{transform:translateX(0)}to{transform:translateX(24px)}}.animate-\[move-24px_0\.6s_infinite\]{animation:move-24px .6s infinite}@keyframes scale-in{0%{transform:scale(0)}to{transform:scale(1)}}.animate-\[scale-in_0\.6s_infinite\]{animation:scale-in .6s infinite}@keyframes scale-out{0%{transform:scale(1)}to{transform:scale(0)}}.animate-\[scale-out_0\.6s_infinite\]{animation:scale-out .6s infinite}.rounded-full{border-radius:9999px}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-neutral-550{--tw-bg-opacity:1;background-color:rgb(115 115 115/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.shadow-\[0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.5\)\]{--tw-shadow:0 0 0 1px hsla(0,0%,100%,.5);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koko420/react-components",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Some of my favourite components in 1 place",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -31,22 +31,29 @@
   },
   "dependencies": {
     "class-variance-authority": "^0.7.0",
+    "eslint": "^9.39.2",
     "tailwind-merge": "^2.5.0",
     "zod": "^3.23.0",
     "zustand": "^5.0.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.2",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "@types/react-native": "^0.73.0",
     "autoprefixer": "^10.4.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-native": "^5.0.0",
+    "globals": "^17.0.0",
     "postcss": "^8.4.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-native": "^0.83.1",
     "tailwindcss": "^3.4.0",
     "tsup": "^8.3.0",
-    "typescript": "^5.6.0"
+    "typescript": "^5.6.0",
+    "typescript-eslint": "^8.52.0"
   },
   "keywords": [
     "react",