@koko420/react-components 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +4 -4
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +4 -4
  4. package/dist/index.js.map +1 -1
  5. package/package.json +6 -2
package/dist/index.cjs CHANGED
@@ -118,12 +118,12 @@ var DotsLoader2 = ({
118
118
  reactNative.Animated.sequence([
119
119
  reactNative.Animated.timing(dot1Scale, {
120
120
  toValue: 1,
121
- duration: 300,
121
+ duration: 600,
122
122
  useNativeDriver: true
123
123
  }),
124
124
  reactNative.Animated.timing(dot1Scale, {
125
125
  toValue: 0,
126
- duration: 300,
126
+ duration: 0,
127
127
  useNativeDriver: true
128
128
  })
129
129
  ])
@@ -160,12 +160,12 @@ var DotsLoader2 = ({
160
160
  reactNative.Animated.sequence([
161
161
  reactNative.Animated.timing(dot4Scale, {
162
162
  toValue: 0,
163
- duration: 300,
163
+ duration: 600,
164
164
  useNativeDriver: true
165
165
  }),
166
166
  reactNative.Animated.timing(dot4Scale, {
167
167
  toValue: 1,
168
- duration: 300,
168
+ duration: 0,
169
169
  useNativeDriver: true
170
170
  })
171
171
  ])
package/dist/index.cjs.map CHANGED
@@ -1 +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"]}
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: 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/index.js CHANGED
@@ -116,12 +116,12 @@ var DotsLoader2 = ({
116
116
  Animated.sequence([
117
117
  Animated.timing(dot1Scale, {
118
118
  toValue: 1,
119
- duration: 300,
119
+ duration: 600,
120
120
  useNativeDriver: true
121
121
  }),
122
122
  Animated.timing(dot1Scale, {
123
123
  toValue: 0,
124
- duration: 300,
124
+ duration: 0,
125
125
  useNativeDriver: true
126
126
  })
127
127
  ])
@@ -158,12 +158,12 @@ var DotsLoader2 = ({
158
158
  Animated.sequence([
159
159
  Animated.timing(dot4Scale, {
160
160
  toValue: 0,
161
- duration: 300,
161
+ duration: 600,
162
162
  useNativeDriver: true
163
163
  }),
164
164
  Animated.timing(dot4Scale, {
165
165
  toValue: 1,
166
- duration: 300,
166
+ duration: 0,
167
167
  useNativeDriver: true
168
168
  })
169
169
  ])
package/dist/index.js.map CHANGED
@@ -1 +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"]}
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: 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@koko420/react-components",
3
- "version": "0.0.7",
3
+ "version": "0.0.9",
4
4
  "description": "Some of my favourite components in 1 place",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -21,6 +21,7 @@
21
21
  "build": "tsup && pnpm build:css",
22
22
  "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
23
23
  "dev": "tsup --watch",
24
+ "demo": "vite demo --config demo/vite.config.ts --host",
24
25
  "lint": "eslint src/",
25
26
  "typecheck": "tsc --noEmit"
26
27
  },
@@ -41,6 +42,7 @@
41
42
  "@types/react": "^18.3.0",
42
43
  "@types/react-dom": "^18.3.0",
43
44
  "@types/react-native": "^0.73.0",
45
+ "@vitejs/plugin-react": "^5.1.2",
44
46
  "autoprefixer": "^10.4.0",
45
47
  "eslint-plugin-react": "^7.37.5",
46
48
  "eslint-plugin-react-hooks": "^7.0.1",
@@ -50,10 +52,12 @@
50
52
  "react": "^18.3.0",
51
53
  "react-dom": "^18.3.0",
52
54
  "react-native": "^0.83.1",
55
+ "react-native-web": "^0.21.2",
53
56
  "tailwindcss": "^3.4.0",
54
57
  "tsup": "^8.3.0",
55
58
  "typescript": "^5.6.0",
56
- "typescript-eslint": "^8.52.0"
59
+ "typescript-eslint": "^8.52.0",
60
+ "vite": "^7.3.1"
57
61
  },
58
62
  "keywords": [
59
63
  "react",