@koko420/react-components 0.0.8 → 0.0.10

package/dist/index.cjs

@@ -3,8 +3,6 @@
 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("", {
@@ -83,208 +81,7 @@ 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","../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"]}
+{"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"]}

package/dist/index.d.cts

@@ -1,30 +1,16 @@
 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$1 = {
+type DotsLoaderProps = {
     dotsBg?: string;
     className?: string;
 } & DotsVariants;
-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;
-};
+declare const DotsLoader: ({ size, dotsBg, modifier, className, }: DotsLoaderProps) => react_jsx_runtime.JSX.Element;
 
-export { DotsLoader$1 as DotsLoader, DotsLoader as DotsLoaderNative, type DotsLoaderProps as DotsLoaderNativeProps, type DotsLoaderProps$1 as DotsLoaderProps };
+export { DotsLoader, type DotsLoaderProps };

package/dist/index.d.ts

@@ -1,30 +1,16 @@
 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$1 = {
+type DotsLoaderProps = {
     dotsBg?: string;
     className?: string;
 } & DotsVariants;
-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;
-};
+declare const DotsLoader: ({ size, dotsBg, modifier, className, }: DotsLoaderProps) => react_jsx_runtime.JSX.Element;
 
-export { DotsLoader$1 as DotsLoader, DotsLoader as DotsLoaderNative, type DotsLoaderProps as DotsLoaderNativeProps, type DotsLoaderProps$1 as DotsLoaderProps };
+export { DotsLoader, type DotsLoaderProps };

package/dist/index.js

@@ -1,8 +1,6 @@
 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("", {
@@ -81,207 +79,7 @@ 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, DotsLoader2 as DotsLoaderNative };
+export { DotsLoader };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"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"]}
+{"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"]}

package/dist/native.cjs

@@ -0,0 +1,211 @@
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/native/DotsLoader.tsx
+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 DotsLoader = ({
+  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: 600,
+          useNativeDriver: true
+        }),
+        reactNative.Animated.timing(dot1Scale, {
+          toValue: 0,
+          duration: 0,
+          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: 600,
+          useNativeDriver: true
+        }),
+        reactNative.Animated.timing(dot4Scale, {
+          toValue: 1,
+          duration: 0,
+          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 }]
+          }
+        ]
+      }
+    )
+  ] });
+};
+DotsLoader.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;
+//# sourceMappingURL=native.cjs.map
+//# sourceMappingURL=native.cjs.map

package/dist/native.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/native/DotsLoader.tsx"],"names":["useMemo","Animated","useEffect","jsxs","View","jsx","StyleSheet"],"mappings":"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","file":"native.cjs","sourcesContent":["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: 600,\n          useNativeDriver: true,\n        }),\n        Animated.timing(dot1Scale, {\n          toValue: 0,\n          duration: 0,\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: 600,\n          useNativeDriver: true,\n        }),\n        Animated.timing(dot4Scale, {\n          toValue: 1,\n          duration: 0,\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/native.d.cts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ViewStyle } from 'react-native';
+
+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 };

package/dist/native.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ViewStyle } from 'react-native';
+
+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 };

package/dist/native.js

@@ -0,0 +1,209 @@
+import { useMemo, useEffect } from 'react';
+import { StyleSheet, Animated, View } from 'react-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/native/DotsLoader.tsx
+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 DotsLoader = ({
+  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: 600,
+          useNativeDriver: true
+        }),
+        Animated.timing(dot1Scale, {
+          toValue: 0,
+          duration: 0,
+          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: 600,
+          useNativeDriver: true
+        }),
+        Animated.timing(dot4Scale, {
+          toValue: 1,
+          duration: 0,
+          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 }]
+          }
+        ]
+      }
+    )
+  ] });
+};
+DotsLoader.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 };
+//# sourceMappingURL=native.js.map
+//# sourceMappingURL=native.js.map

package/dist/native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/native/DotsLoader.tsx"],"names":[],"mappings":"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","file":"native.js","sourcesContent":["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: 600,\n          useNativeDriver: true,\n        }),\n        Animated.timing(dot1Scale, {\n          toValue: 0,\n          duration: 0,\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: 600,\n          useNativeDriver: true,\n        }),\n        Animated.timing(dot4Scale, {\n          toValue: 1,\n          duration: 0,\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koko420/react-components",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Some of my favourite components in 1 place",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -12,6 +12,11 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./native": {
+      "types": "./dist/native.d.ts",
+      "import": "./dist/native.js",
+      "require": "./dist/native.cjs"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "files": [
@@ -30,6 +35,11 @@
     "react-dom": ">=18",
     "tailwindcss": ">=3"
   },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "class-variance-authority": "^0.7.0",
     "eslint": "^9.39.2",