@kukkim/react-native-ui 0.1.5 → 0.1.6

package/lib/module/components/badge/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
 import CommonBadge from "./commonBadge.js";
-export { CommonBadge };
+import NumberBadge from "./numberBadge.js";
+export { CommonBadge, NumberBadge };
 //# sourceMappingURL=index.js.map

package/lib/module/components/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["CommonBadge"],"sourceRoot":"../../../../src","sources":["components/badge/index.ts"],"mappings":";;AAAA,OAAOA,WAAW,MAAM,kBAAe;AAEvC,SAASA,WAAW","ignoreList":[]}
+{"version":3,"names":["CommonBadge","NumberBadge"],"sourceRoot":"../../../../src","sources":["components/badge/index.ts"],"mappings":";;AAAA,OAAOA,WAAW,MAAM,kBAAe;AACvC,OAAOC,WAAW,MAAM,kBAAe;AAEvC,SAASD,WAAW,EAAEC,WAAW","ignoreList":[]}

package/lib/module/components/index.js

@@ -2,7 +2,7 @@
 
 export { CommonText } from "./text/index.js";
 export { CommonButton, SocialLoginButton } from "./button/index.js";
-export { CommonBadge } from "./badge/index.js";
+export { CommonBadge, NumberBadge } from "./badge/index.js";
 export { SafeAreaContainer, ScrollViewContainer } from "./screenContainer/index.js";
 export { CommonIcon } from "./icon/index.js";
 export { CommonRating } from "./rating/index.js";

package/lib/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["CommonText","CommonButton","SocialLoginButton","CommonBadge","SafeAreaContainer","ScrollViewContainer","CommonIcon","CommonRating","CommonAvatar","CommonImage","CheckBox","CommonHeader","CommonCard","FoldableCard","LinearProgressBar","CircularProgressBar","CommonInput","CommonPopOver","CommonSwitch","CommonSpinner","CommonSlider","CommonSelect","SelectItem"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,iBAAQ;AACnC,SAASC,YAAY,EAAEC,iBAAiB,QAAQ,mBAAU;AAC1D,SAASC,WAAW,QAAQ,kBAAS;AACrC,SAASC,iBAAiB,EAAEC,mBAAmB,QAAQ,4BAAmB;AAC1E,SAASC,UAAU,QAAQ,iBAAQ;AACnC,SAASC,YAAY,QAAQ,mBAAU;AACvC,SAASC,YAAY,QAAQ,mBAAU;AACvC,SAASC,WAAW,QAAQ,kBAAS;AACrC,SAASC,QAAQ,QAAQ,qBAAY;AACrC,SAASC,YAAY,QAAQ,mBAAU;AACvC,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAQ;AACjD,SAASC,iBAAiB,EAAEC,mBAAmB,QAAQ,wBAAe;AACtE,SAASC,WAAW,QAAQ,kBAAS;AACrC,SAASC,aAAa,QAAQ,oBAAW;AACzC,SAASC,YAAY,QAAQ,mBAAU;AACvC,SAASC,aAAa,QAAQ,oBAAW;AACzC,SAASC,YAAY,QAAQ,mBAAU;AACvC,SAASC,YAAY,EAAEC,UAAU,QAAQ,mBAAU","ignoreList":[]}
+{"version":3,"names":["CommonText","CommonButton","SocialLoginButton","CommonBadge","NumberBadge","SafeAreaContainer","ScrollViewContainer","CommonIcon","CommonRating","CommonAvatar","CommonImage","CheckBox","CommonHeader","CommonCard","FoldableCard","LinearProgressBar","CircularProgressBar","CommonInput","CommonPopOver","CommonSwitch","CommonSpinner","CommonSlider","CommonSelect","SelectItem"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,iBAAQ;AACnC,SAASC,YAAY,EAAEC,iBAAiB,QAAQ,mBAAU;AAC1D,SAASC,WAAW,EAAEC,WAAW,QAAQ,kBAAS;AAClD,SAASC,iBAAiB,EAAEC,mBAAmB,QAAQ,4BAAmB;AAC1E,SAASC,UAAU,QAAQ,iBAAQ;AACnC,SAASC,YAAY,QAAQ,mBAAU;AACvC,SAASC,YAAY,QAAQ,mBAAU;AACvC,SAASC,WAAW,QAAQ,kBAAS;AACrC,SAASC,QAAQ,QAAQ,qBAAY;AACrC,SAASC,YAAY,QAAQ,mBAAU;AACvC,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAQ;AACjD,SAASC,iBAAiB,EAAEC,mBAAmB,QAAQ,wBAAe;AACtE,SAASC,WAAW,QAAQ,kBAAS;AACrC,SAASC,aAAa,QAAQ,oBAAW;AACzC,SAASC,YAAY,QAAQ,mBAAU;AACvC,SAASC,aAAa,QAAQ,oBAAW;AACzC,SAASC,YAAY,QAAQ,mBAAU;AACvC,SAASC,YAAY,EAAEC,UAAU,QAAQ,mBAAU","ignoreList":[]}

package/lib/module/components/list/commonList.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import { FlatList, StyleSheet } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+const CommonList = props => {
+  return /*#__PURE__*/_jsx(FlatList, {
+    style: styles.container,
+    ...props
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+export default CommonList;
+//# sourceMappingURL=commonList.js.map

package/lib/module/components/list/commonList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FlatList","StyleSheet","jsx","_jsx","CommonList","props","style","styles","container","create","flex"],"sourceRoot":"../../../../src","sources":["components/list/commonList.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGpD,MAAMC,UAAU,GAAYC,KAA6B,IAAK;EAC5D,oBAAOF,IAAA,CAACH,QAAQ;IAACM,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAA,GAAKH;EAAK,CAAG,CAAC;AACzD,CAAC;AAED,MAAME,MAAM,GAAGN,UAAU,CAACQ,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,IAAI,EAAE;EACR;AACF,CAAC,CAAC;AAEF,eAAeN,UAAU","ignoreList":[]}

package/lib/module/components/list/imageList.js

@@ -0,0 +1,25 @@
+"use strict";
+
+import { FlatList, StyleSheet } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+// import { CommonImage } from "../image";
+
+const ImgList = props => {
+  return /*#__PURE__*/_jsx(FlatList, {
+    style: styles.container
+    // renderItem={({ item }) => <CommonImage title={item.title} />}
+    ,
+    ...props
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    width: 'auto',
+    margin: 5,
+    padding: 5,
+    borderWidth: 1,
+    borderRadius: 3
+  }
+});
+export default ImgList;
+//# sourceMappingURL=imageList.js.map

package/lib/module/components/list/imageList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FlatList","StyleSheet","jsx","_jsx","ImgList","props","style","styles","container","create","width","margin","padding","borderWidth","borderRadius"],"sourceRoot":"../../../../src","sources":["components/list/imageList.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpD;;AAEA,MAAMC,OAAO,GAAYC,KAA6B,IAAK;EACzD,oBACEF,IAAA,CAACH,QAAQ;IACPM,KAAK,EAAEC,MAAM,CAACC;IACd;IAAA;IAAA,GACIH;EAAK,CACV,CAAC;AAEN,CAAC;AAED,MAAME,MAAM,GAAGN,UAAU,CAACQ,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,CAAC;IACTC,OAAO,EAAE,CAAC;IACVC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAeV,OAAO","ignoreList":[]}

package/lib/module/components/list/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+import CommonList from "./commonList.js";
+import ImageList from "./imageList.js";
+export { CommonList, ImageList };
+//# sourceMappingURL=index.js.map

package/lib/module/components/list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CommonList","ImageList"],"sourceRoot":"../../../../src","sources":["components/list/index.ts"],"mappings":";;AAAA,OAAOA,UAAU,MAAM,iBAAc;AACrC,OAAOC,SAAS,MAAM,gBAAa;AAEnC,SAASD,UAAU,EAAEC,SAAS","ignoreList":[]}

package/lib/module/components/list/types.js

@@ -0,0 +1,7 @@
+"use strict";
+
+export const containerType = {
+  primary: {},
+  secondary: {}
+};
+//# sourceMappingURL=types.js.map

package/lib/module/components/list/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["containerType","primary","secondary"],"sourceRoot":"../../../../src","sources":["components/list/types.ts"],"mappings":";;AAKA,OAAO,MAAMA,aAAyC,GAAG;EACvDC,OAAO,EAAE,CAAC,CAAC;EACXC,SAAS,EAAE,CAAC;AACd,CAAC","ignoreList":[]}

package/lib/module/components/progressBar/circularProgressBar.js

@@ -1,10 +1,13 @@
 "use strict";
 
+import { useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Svg, { Circle } from 'react-native-svg';
+import Animated, { useAnimatedProps, useSharedValue, withTiming } from 'react-native-reanimated';
 import { sizeType, strokeWidthType } from "./types.js";
 import { useTheme } from "../../hooks/useTheme.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const CircularProgressBar = ({
   type = 'primary',
   size = 'm',
@@ -20,7 +23,17 @@ const CircularProgressBar = ({
   const strokeWidth = strokeWidthType[size];
   const radius = (svgSize - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
-  const strokeDashoffset = circumference * (1 - progress);
+  const animatedProgress = useSharedValue(0);
+  useEffect(() => {
+    animatedProgress.value = withTiming(progress, {
+      duration: 500
+    });
+  }, [progress, animatedProgress]);
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      strokeDashoffset: circumference * (1 - animatedProgress.value)
+    };
+  });
   return /*#__PURE__*/_jsx(View, {
     style: [styles.container, style],
     ...props,
@@ -35,7 +48,7 @@ const CircularProgressBar = ({
         stroke: theme.colors.disabled,
         strokeWidth: strokeWidth,
         fill: "none"
-      }), /*#__PURE__*/_jsx(Circle, {
+      }), /*#__PURE__*/_jsx(AnimatedCircle, {
         cx: svgSize / 2,
         cy: svgSize / 2,
         r: radius,
@@ -44,7 +57,7 @@ const CircularProgressBar = ({
         fill: "none",
         strokeLinecap: "round",
         strokeDasharray: circumference,
-        strokeDashoffset: strokeDashoffset,
+        animatedProps: animatedProps,
         rotation: "-90",
         originX: svgSize / 2,
         originY: svgSize / 2

package/lib/module/components/progressBar/circularProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","View","Svg","Circle","sizeType","strokeWidthType","useTheme","jsx","_jsx","jsxs","_jsxs","CircularProgressBar","type","size","value","style","props","theme","progress","Math","min","max","svgSize","strokeWidth","radius","circumference","PI","strokeDashoffset","styles","container","children","width","height","viewBox","cx","cy","r","stroke","colors","disabled","fill","strokeLinecap","strokeDasharray","rotation","originX","originY","create"],"sourceRoot":"../../../../src","sources":["components/progressBar/circularProgressBar.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,GAAG,IAAIC,MAAM,QAAQ,kBAAkB;AAC9C,SAAgCC,QAAQ,EAAEC,eAAe,QAAQ,YAAS;AAC1E,SAASC,QAAQ,QAAQ,yBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEhD,MAAMC,mBAAmB,GAAGA,CAAC;EAC3BC,IAAI,GAAG,SAAS;EAChBC,IAAI,GAAG,GAAG;EACVC,KAAK;EACLC,KAAK;EACL,GAAGC;AACa,CAAC,KAAK;EACtB,MAAM;IAAEC;EAAM,CAAC,GAAGX,QAAQ,CAAC,CAAC;EAE5B,MAAMY,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACP,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;EAEhD,MAAMQ,OAAO,GAAGlB,QAAQ,CAACS,IAAI,CAAC;EAC9B,MAAMU,WAAW,GAAGlB,eAAe,CAACQ,IAAI,CAAC;EAEzC,MAAMW,MAAM,GAAG,CAACF,OAAO,GAAGC,WAAW,IAAI,CAAC;EAC1C,MAAME,aAAa,GAAG,CAAC,GAAGN,IAAI,CAACO,EAAE,GAAGF,MAAM;EAE1C,MAAMG,gBAAgB,GAAGF,aAAa,IAAI,CAAC,GAAGP,QAAQ,CAAC;EAEvD,oBACEV,IAAA,CAACP,IAAI;IAACc,KAAK,EAAE,CAACa,MAAM,CAACC,SAAS,EAAEd,KAAK,CAAE;IAAA,GAAKC,KAAK;IAAAc,QAAA,eAC/CpB,KAAA,CAACR,GAAG;MACF6B,KAAK,EAAET,OAAQ;MACfU,MAAM,EAAEV,OAAQ;MAChBW,OAAO,EAAE,OAAOX,OAAO,IAAIA,OAAO,EAAG;MAAAQ,QAAA,gBAErCtB,IAAA,CAACL,MAAM;QACL+B,EAAE,EAAEZ,OAAO,GAAG,CAAE;QAChBa,EAAE,EAAEb,OAAO,GAAG,CAAE;QAChBc,CAAC,EAAEZ,MAAO;QACVa,MAAM,EAAEpB,KAAK,CAACqB,MAAM,CAACC,QAAS;QAC9BhB,WAAW,EAAEA,WAAY;QACzBiB,IAAI,EAAC;MAAM,CACZ,CAAC,eAEFhC,IAAA,CAACL,MAAM;QACL+B,EAAE,EAAEZ,OAAO,GAAG,CAAE;QAChBa,EAAE,EAAEb,OAAO,GAAG,CAAE;QAChBc,CAAC,EAAEZ,MAAO;QACVa,MAAM,EAAEpB,KAAK,CAACqB,MAAM,CAAC1B,IAAI,CAAE;QAC3BW,WAAW,EAAEA,WAAY;QACzBiB,IAAI,EAAC,MAAM;QACXC,aAAa,EAAC,OAAO;QACrBC,eAAe,EAAEjB,aAAc;QAC/BE,gBAAgB,EAAEA,gBAAiB;QACnCgB,QAAQ,EAAC,KAAK;QACdC,OAAO,EAAEtB,OAAO,GAAG,CAAE;QACrBuB,OAAO,EAAEvB,OAAO,GAAG;MAAE,CACtB,CAAC;IAAA,CACC;EAAC,CACF,CAAC;AAEX,CAAC;AAED,MAAMM,MAAM,GAAG5B,UAAU,CAAC8C,MAAM,CAAC;EAC/BjB,SAAS,EAAE,CAAC;AACd,CAAC,CAAC;AAEF,eAAelB,mBAAmB","ignoreList":[]}
+{"version":3,"names":["useEffect","StyleSheet","View","Svg","Circle","Animated","useAnimatedProps","useSharedValue","withTiming","sizeType","strokeWidthType","useTheme","jsx","_jsx","jsxs","_jsxs","AnimatedCircle","createAnimatedComponent","CircularProgressBar","type","size","value","style","props","theme","progress","Math","min","max","svgSize","strokeWidth","radius","circumference","PI","animatedProgress","duration","animatedProps","strokeDashoffset","styles","container","children","width","height","viewBox","cx","cy","r","stroke","colors","disabled","fill","strokeLinecap","strokeDasharray","rotation","originX","originY","create"],"sourceRoot":"../../../../src","sources":["components/progressBar/circularProgressBar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/progressBar/index.js

@@ -1,6 +1,5 @@
 "use strict";
 
-// TODO: progressbar에 react-native-reanimated를 이용한 animation적용 필요.
 import LinearProgressBar from "./linearProgressBar.js";
 import CircularProgressBar from "./circularProgressBar.js";
 export { LinearProgressBar, CircularProgressBar };

package/lib/module/components/progressBar/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["LinearProgressBar","CircularProgressBar"],"sourceRoot":"../../../../src","sources":["components/progressBar/index.ts"],"mappings":";;AAAA;AACA,OAAOA,iBAAiB,MAAM,wBAAqB;AACnD,OAAOC,mBAAmB,MAAM,0BAAuB;AAEvD,SAASD,iBAAiB,EAAEC,mBAAmB","ignoreList":[]}
+{"version":3,"names":["LinearProgressBar","CircularProgressBar"],"sourceRoot":"../../../../src","sources":["components/progressBar/index.ts"],"mappings":";;AAAA,OAAOA,iBAAiB,MAAM,wBAAqB;AACnD,OAAOC,mBAAmB,MAAM,0BAAuB;AAEvD,SAASD,iBAAiB,EAAEC,mBAAmB","ignoreList":[]}

package/lib/module/components/progressBar/linearProgressBar.js

@@ -1,6 +1,8 @@
 "use strict";
 
+import { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import { useTheme } from "../../hooks/useTheme.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const LinearProgressBar = ({
@@ -13,16 +15,26 @@ const LinearProgressBar = ({
     theme
   } = useTheme();
   const progress = Math.min(Math.max(value, 0), 1);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: withTiming(containerWidth * progress, {
+      duration: 1000
+    })
+  }));
+  const onLayout = e => {
+    setContainerWidth(e.nativeEvent.layout.width);
+  };
   return /*#__PURE__*/_jsx(View, {
     style: [styles.container, {
       backgroundColor: theme.colors.disabled
     }, style],
+    onLayout: onLayout,
     ...props,
-    children: /*#__PURE__*/_jsx(View, {
+    children: containerWidth > 0 && /*#__PURE__*/_jsx(Animated.View, {
       style: [styles.progress, {
-        width: `${progress * 100}%`,
+        width: containerWidth,
         backgroundColor: theme.colors[type]
-      }]
+      }, animatedStyle]
     })
   });
 };

package/lib/module/components/progressBar/linearProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","View","useTheme","jsx","_jsx","LinearProgressBar","type","value","style","props","theme","progress","Math","min","max","styles","container","backgroundColor","colors","disabled","children","width","create","height","borderRadius","overflow"],"sourceRoot":"../../../../src","sources":["components/progressBar/linearProgressBar.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,SAASC,QAAQ,QAAQ,yBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEhD,MAAMC,iBAAiB,GAAGA,CAAC;EACzBC,IAAI,GAAG,SAAS;EAChBC,KAAK;EACLC,KAAK;EACL,GAAGC;AACa,CAAC,KAAK;EACtB,MAAM;IAAEC;EAAM,CAAC,GAAGR,QAAQ,CAAC,CAAC;EAC5B,MAAMS,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACP,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;EAEhD,oBACEH,IAAA,CAACH,IAAI;IACHO,KAAK,EAAE,CACLO,MAAM,CAACC,SAAS,EAChB;MACEC,eAAe,EAAEP,KAAK,CAACQ,MAAM,CAACC;IAChC,CAAC,EACDX,KAAK,CACL;IAAA,GACEC,KAAK;IAAAW,QAAA,eAEThB,IAAA,CAACH,IAAI;MACHO,KAAK,EAAE,CACLO,MAAM,CAACJ,QAAQ,EACf;QACEU,KAAK,EAAE,GAAGV,QAAQ,GAAG,GAAG,GAAG;QAC3BM,eAAe,EAAEP,KAAK,CAACQ,MAAM,CAACZ,IAAI;MACpC,CAAC;IACD,CACH;EAAC,CACE,CAAC;AAEX,CAAC;AAED,MAAMS,MAAM,GAAGf,UAAU,CAACsB,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACTK,KAAK,EAAE,MAAM;IACbE,MAAM,EAAE,CAAC;IACTC,YAAY,EAAE,GAAG;IACjBC,QAAQ,EAAE;EACZ,CAAC;EACDd,QAAQ,EAAE;IACRY,MAAM,EAAE,MAAM;IACdC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAenB,iBAAiB","ignoreList":[]}
+{"version":3,"names":["useState","StyleSheet","View","Animated","useAnimatedStyle","withTiming","useTheme","jsx","_jsx","LinearProgressBar","type","value","style","props","theme","progress","Math","min","max","containerWidth","setContainerWidth","animatedStyle","width","duration","onLayout","e","nativeEvent","layout","styles","container","backgroundColor","colors","disabled","children","create","height","borderRadius","overflow"],"sourceRoot":"../../../../src","sources":["components/progressBar/linearProgressBar.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,OAAO;AAChC,SAASC,UAAU,EAAEC,IAAI,QAAgC,cAAc;AACvE,OAAOC,QAAQ,IACbC,gBAAgB,EAChBC,UAAU,QACL,yBAAyB;AAEhC,SAASC,QAAQ,QAAQ,yBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEhD,MAAMC,iBAAiB,GAAGA,CAAC;EACzBC,IAAI,GAAG,SAAS;EAChBC,KAAK;EACLC,KAAK;EACL,GAAGC;AACa,CAAC,KAAK;EACtB,MAAM;IAAEC;EAAM,CAAC,GAAGR,QAAQ,CAAC,CAAC;EAC5B,MAAMS,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACP,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;EAEhD,MAAM,CAACQ,cAAc,EAAEC,iBAAiB,CAAC,GAAGpB,QAAQ,CAAC,CAAC,CAAC;EAEvD,MAAMqB,aAAa,GAAGjB,gBAAgB,CAAC,OAAO;IAC5CkB,KAAK,EAAEjB,UAAU,CAACc,cAAc,GAAGJ,QAAQ,EAAE;MAC3CQ,QAAQ,EAAE;IACZ,CAAC;EACH,CAAC,CAAC,CAAC;EAEH,MAAMC,QAAQ,GAAIC,CAAoB,IAAK;IACzCL,iBAAiB,CAACK,CAAC,CAACC,WAAW,CAACC,MAAM,CAACL,KAAK,CAAC;EAC/C,CAAC;EAED,oBACEd,IAAA,CAACN,IAAI;IACHU,KAAK,EAAE,CACLgB,MAAM,CAACC,SAAS,EAChB;MACEC,eAAe,EAAEhB,KAAK,CAACiB,MAAM,CAACC;IAChC,CAAC,EACDpB,KAAK,CACL;IACFY,QAAQ,EAAEA,QAAS;IAAA,GACfX,KAAK;IAAAoB,QAAA,EAERd,cAAc,GAAG,CAAC,iBACjBX,IAAA,CAACL,QAAQ,CAACD,IAAI;MACZU,KAAK,EAAE,CACLgB,MAAM,CAACb,QAAQ,EACf;QACEO,KAAK,EAAEH,cAAc;QACrBW,eAAe,EAAEhB,KAAK,CAACiB,MAAM,CAACrB,IAAI;MACpC,CAAC,EACDW,aAAa;IACb,CACH;EACF,CACG,CAAC;AAEX,CAAC;AAED,MAAMO,MAAM,GAAG3B,UAAU,CAACiC,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTP,KAAK,EAAE,MAAM;IACba,MAAM,EAAE,CAAC;IACTC,YAAY,EAAE,GAAG;IACjBC,QAAQ,EAAE;EACZ,CAAC;EACDtB,QAAQ,EAAE;IACRoB,MAAM,EAAE,MAAM;IACdC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAe3B,iBAAiB","ignoreList":[]}

package/lib/module/components/switch/commonSwitch.js

@@ -1,11 +1,9 @@
 "use strict";
 
-import { useEffect, useRef } from 'react';
-import { Animated, Pressable, StyleSheet } from 'react-native';
+import { Pressable, StyleSheet } from 'react-native';
 import { sizeType } from "./types.js";
 import { useTheme } from "../../hooks/useTheme.js";
-
-//TODO: react-native-reanimated로 수정필요
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function CommonSwitch({
   type = 'primary',
@@ -18,18 +16,19 @@ export default function CommonSwitch({
   const {
     theme
   } = useTheme();
-  const animValue = useRef(new Animated.Value(value ? 1 : 0)).current;
   const sizeValue = sizeType[size];
   const containerWidth = (sizeValue + 2) * 2;
   const thumbSize = sizeValue;
   const translateX = containerWidth - thumbSize - 2;
-  useEffect(() => {
-    Animated.timing(animValue, {
-      toValue: value ? translateX : 0,
-      duration: 200,
-      useNativeDriver: true
-    }).start();
-  }, [value, translateX, animValue]);
+  const thumbAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        translateX: withTiming(value ? translateX : 0, {
+          duration: 200
+        })
+      }]
+    };
+  }, [value, translateX]);
   const toggleValue = () => {
     if (disabled) return;
     onChange?.(!value);
@@ -49,11 +48,8 @@ export default function CommonSwitch({
         width: thumbSize,
         height: thumbSize,
         borderRadius: thumbSize / 2,
-        backgroundColor: value ? theme.colors[type] : theme.colors.disabled,
-        transform: [{
-          translateX: animValue
-        }]
-      }]
+        backgroundColor: value ? theme.colors[type] : theme.colors.disabled
+      }, thumbAnimatedStyle]
     })
   });
 }

package/lib/module/components/switch/commonSwitch.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useRef","Animated","Pressable","StyleSheet","sizeType","useTheme","jsx","_jsx","CommonSwitch","type","size","value","onChange","disabled","props","theme","animValue","Value","current","sizeValue","containerWidth","thumbSize","translateX","timing","toValue","duration","useNativeDriver","start","toggleValue","style","styles","container","width","height","borderRadius","borderColor","colors","border","onPress","children","View","backgroundColor","transform","create","padding","justifyContent","borderWidth","opacity"],"sourceRoot":"../../../../src","sources":["components/switch/commonSwitch.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACzC,SAASC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,QAAQ,cAAc;AAC9D,SAA2BC,QAAQ,QAAQ,YAAS;AACpD,SAASC,QAAQ,QAAQ,yBAAsB;;AAE/C;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,eAAe,SAASC,YAAYA,CAAC;EACnCC,IAAI,GAAG,SAAS;EAChBC,IAAI,GAAG,GAAG;EACVC,KAAK;EACLC,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAChB,GAAGC;AACQ,CAAC,EAAE;EACd,MAAM;IAAEC;EAAM,CAAC,GAAGV,QAAQ,CAAC,CAAC;EAE5B,MAAMW,SAAS,GAAGhB,MAAM,CAAC,IAAIC,QAAQ,CAACgB,KAAK,CAACN,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAACO,OAAO;EAEnE,MAAMC,SAAS,GAAGf,QAAQ,CAACM,IAAI,CAAC;EAChC,MAAMU,cAAc,GAAG,CAACD,SAAS,GAAG,CAAC,IAAI,CAAC;EAC1C,MAAME,SAAS,GAAGF,SAAS;EAC3B,MAAMG,UAAU,GAAGF,cAAc,GAAGC,SAAS,GAAG,CAAC;EAEjDtB,SAAS,CAAC,MAAM;IACdE,QAAQ,CAACsB,MAAM,CAACP,SAAS,EAAE;MACzBQ,OAAO,EAAEb,KAAK,GAAGW,UAAU,GAAG,CAAC;MAC/BG,QAAQ,EAAE,GAAG;MACbC,eAAe,EAAE;IACnB,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;EACZ,CAAC,EAAE,CAAChB,KAAK,EAAEW,UAAU,EAAEN,SAAS,CAAC,CAAC;EAElC,MAAMY,WAAW,GAAGA,CAAA,KAAM;IACxB,IAAIf,QAAQ,EAAE;IACdD,QAAQ,GAAG,CAACD,KAAK,CAAC;EACpB,CAAC;EAED,oBACEJ,IAAA,CAACL,SAAS;IACR2B,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,KAAK,EAAEZ,cAAc;MACrBa,MAAM,EAAEd,SAAS,GAAG,CAAC;MACrBe,YAAY,EAAEf,SAAS,GAAG,CAAC,GAAG,CAAC;MAC/BgB,WAAW,EAAEtB,QAAQ,GAAGE,KAAK,CAACqB,MAAM,CAACvB,QAAQ,GAAGE,KAAK,CAACqB,MAAM,CAACC;IAC/D,CAAC,EACDxB,QAAQ,IAAIiB,MAAM,CAACjB,QAAQ,CAC3B;IACFyB,OAAO,EAAEV,WAAY;IACrBf,QAAQ,EAAEA,QAAS;IAAA,GACfC,KAAK;IAAAyB,QAAA,eAEThC,IAAA,CAACN,QAAQ,CAACuC,IAAI;MACZX,KAAK,EAAE,CACL;QACEG,KAAK,EAAEX,SAAS;QAChBY,MAAM,EAAEZ,SAAS;QACjBa,YAAY,EAAEb,SAAS,GAAG,CAAC;QAC3BoB,eAAe,EAAE9B,KAAK,GAAGI,KAAK,CAACqB,MAAM,CAAC3B,IAAI,CAAC,GAAGM,KAAK,CAACqB,MAAM,CAACvB,QAAQ;QACnE6B,SAAS,EAAE,CAAC;UAAEpB,UAAU,EAAEN;QAAU,CAAC;MACvC,CAAC;IACD,CACH;EAAC,CACO,CAAC;AAEhB;AAEA,MAAMc,MAAM,GAAG3B,UAAU,CAACwC,MAAM,CAAC;EAC/BZ,SAAS,EAAE;IACTa,OAAO,EAAE,CAAC;IACVC,cAAc,EAAE,QAAQ;IACxBC,WAAW,EAAE;EACf,CAAC;EACDjC,QAAQ,EAAE;IACRkC,OAAO,EAAE;EACX;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["Pressable","StyleSheet","sizeType","useTheme","Animated","useAnimatedStyle","withTiming","jsx","_jsx","CommonSwitch","type","size","value","onChange","disabled","props","theme","sizeValue","containerWidth","thumbSize","translateX","thumbAnimatedStyle","transform","duration","toggleValue","style","styles","container","width","height","borderRadius","borderColor","colors","border","onPress","children","View","backgroundColor","create","padding","justifyContent","borderWidth","opacity"],"sourceRoot":"../../../../src","sources":["components/switch/commonSwitch.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,UAAU,QAAQ,cAAc;AACpD,SAA2BC,QAAQ,QAAQ,YAAS;AACpD,SAASC,QAAQ,QAAQ,yBAAsB;AAC/C,OAAOC,QAAQ,IACbC,gBAAgB,EAChBC,UAAU,QACL,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEjC,eAAe,SAASC,YAAYA,CAAC;EACnCC,IAAI,GAAG,SAAS;EAChBC,IAAI,GAAG,GAAG;EACVC,KAAK;EACLC,QAAQ;EACRC,QAAQ,GAAG,KAAK;EAChB,GAAGC;AACQ,CAAC,EAAE;EACd,MAAM;IAAEC;EAAM,CAAC,GAAGb,QAAQ,CAAC,CAAC;EAE5B,MAAMc,SAAS,GAAGf,QAAQ,CAACS,IAAI,CAAC;EAChC,MAAMO,cAAc,GAAG,CAACD,SAAS,GAAG,CAAC,IAAI,CAAC;EAC1C,MAAME,SAAS,GAAGF,SAAS;EAC3B,MAAMG,UAAU,GAAGF,cAAc,GAAGC,SAAS,GAAG,CAAC;EAEjD,MAAME,kBAAkB,GAAGhB,gBAAgB,CAAC,MAAM;IAChD,OAAO;MACLiB,SAAS,EAAE,CACT;QACEF,UAAU,EAAEd,UAAU,CAACM,KAAK,GAAGQ,UAAU,GAAG,CAAC,EAAE;UAC7CG,QAAQ,EAAE;QACZ,CAAC;MACH,CAAC;IAEL,CAAC;EACH,CAAC,EAAE,CAACX,KAAK,EAAEQ,UAAU,CAAC,CAAC;EAEvB,MAAMI,WAAW,GAAGA,CAAA,KAAM;IACxB,IAAIV,QAAQ,EAAE;IACdD,QAAQ,GAAG,CAACD,KAAK,CAAC;EACpB,CAAC;EAED,oBACEJ,IAAA,CAACR,SAAS;IACRyB,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,KAAK,EAAEV,cAAc;MACrBW,MAAM,EAAEZ,SAAS,GAAG,CAAC;MACrBa,YAAY,EAAEb,SAAS,GAAG,CAAC,GAAG,CAAC;MAC/Bc,WAAW,EAAEjB,QAAQ,GAAGE,KAAK,CAACgB,MAAM,CAAClB,QAAQ,GAAGE,KAAK,CAACgB,MAAM,CAACC;IAC/D,CAAC,EACDnB,QAAQ,IAAIY,MAAM,CAACZ,QAAQ,CAC3B;IACFoB,OAAO,EAAEV,WAAY;IACrBV,QAAQ,EAAEA,QAAS;IAAA,GACfC,KAAK;IAAAoB,QAAA,eAET3B,IAAA,CAACJ,QAAQ,CAACgC,IAAI;MACZX,KAAK,EAAE,CACL;QACEG,KAAK,EAAET,SAAS;QAChBU,MAAM,EAAEV,SAAS;QACjBW,YAAY,EAAEX,SAAS,GAAG,CAAC;QAC3BkB,eAAe,EAAEzB,KAAK,GAAGI,KAAK,CAACgB,MAAM,CAACtB,IAAI,CAAC,GAAGM,KAAK,CAACgB,MAAM,CAAClB;MAC7D,CAAC,EACDO,kBAAkB;IAClB,CACH;EAAC,CACO,CAAC;AAEhB;AAEA,MAAMK,MAAM,GAAGzB,UAAU,CAACqC,MAAM,CAAC;EAC/BX,SAAS,EAAE;IACTY,OAAO,EAAE,CAAC;IACVC,cAAc,EAAE,QAAQ;IACxBC,WAAW,EAAE;EACf,CAAC;EACD3B,QAAQ,EAAE;IACR4B,OAAO,EAAE;EACX;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -1,5 +1,5 @@
 "use strict";
 
-export { CommonText, CommonButton, CommonBadge, SafeAreaContainer, ScrollViewContainer, CommonIcon, CommonRating, CommonAvatar, CommonImage, CheckBox, CommonHeader, CommonCard, FoldableCard, LinearProgressBar, CircularProgressBar, CommonInput, CommonPopOver, CommonSwitch, SocialLoginButton, CommonSpinner, CommonSlider, CommonSelect, SelectItem } from "./components/index.js";
+export { CommonText, CommonButton, CommonBadge, SafeAreaContainer, ScrollViewContainer, CommonIcon, CommonRating, CommonAvatar, CommonImage, CheckBox, CommonHeader, CommonCard, FoldableCard, LinearProgressBar, CircularProgressBar, CommonInput, CommonPopOver, CommonSwitch, SocialLoginButton, CommonSpinner, CommonSlider, CommonSelect, SelectItem, NumberBadge } from "./components/index.js";
 export { ThemeProvider } from "./theme/themeProvider.js";
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["CommonText","CommonButton","CommonBadge","SafeAreaContainer","ScrollViewContainer","CommonIcon","CommonRating","CommonAvatar","CommonImage","CheckBox","CommonHeader","CommonCard","FoldableCard","LinearProgressBar","CircularProgressBar","CommonInput","CommonPopOver","CommonSwitch","SocialLoginButton","CommonSpinner","CommonSlider","CommonSelect","SelectItem","ThemeProvider"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SACEA,UAAU,EACVC,YAAY,EACZC,WAAW,EACXC,iBAAiB,EACjBC,mBAAmB,EACnBC,UAAU,EACVC,YAAY,EACZC,YAAY,EACZC,WAAW,EACXC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,YAAY,EACZC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,aAAa,EACbC,YAAY,EACZC,iBAAiB,EACjBC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZC,UAAU,QACL,uBAAc;AACrB,SAASC,aAAa,QAAQ,0BAAuB","ignoreList":[]}
+{"version":3,"names":["CommonText","CommonButton","CommonBadge","SafeAreaContainer","ScrollViewContainer","CommonIcon","CommonRating","CommonAvatar","CommonImage","CheckBox","CommonHeader","CommonCard","FoldableCard","LinearProgressBar","CircularProgressBar","CommonInput","CommonPopOver","CommonSwitch","SocialLoginButton","CommonSpinner","CommonSlider","CommonSelect","SelectItem","NumberBadge","ThemeProvider"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SACEA,UAAU,EACVC,YAAY,EACZC,WAAW,EACXC,iBAAiB,EACjBC,mBAAmB,EACnBC,UAAU,EACVC,YAAY,EACZC,YAAY,EACZC,WAAW,EACXC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,YAAY,EACZC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,aAAa,EACbC,YAAY,EACZC,iBAAiB,EACjBC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,WAAW,QACN,uBAAc;AACrB,SAASC,aAAa,QAAQ,0BAAuB","ignoreList":[]}

package/lib/typescript/src/components/badge/index.d.ts

@@ -1,3 +1,4 @@
 import CommonBadge from './commonBadge.js';
-export { CommonBadge };
+import NumberBadge from './numberBadge.js';
+export { CommonBadge, NumberBadge };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,kBAAe,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,kBAAe,CAAC;AACxC,OAAO,WAAW,MAAM,kBAAe,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}

package/lib/typescript/src/components/index.d.ts

@@ -1,6 +1,6 @@
 export { CommonText } from './text/index.js';
 export { CommonButton, SocialLoginButton } from './button/index.js';
-export { CommonBadge } from './badge/index.js';
+export { CommonBadge, NumberBadge } from './badge/index.js';
 export { SafeAreaContainer, ScrollViewContainer } from './screenContainer/index.js';
 export { CommonIcon } from './icon/index.js';
 export { CommonRating } from './rating/index.js';

package/lib/typescript/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAQ,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAU,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAS,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,4BAAmB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAQ,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAU,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAU,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAS,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAU,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAQ,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,wBAAe,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAS,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAW,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAU,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAW,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAU,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,mBAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAQ,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAU,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,kBAAS,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,4BAAmB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAQ,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAU,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAU,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAS,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAU,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAQ,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,wBAAe,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAS,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAW,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAU,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAW,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAU,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,mBAAU,CAAC"}

package/lib/typescript/src/components/list/commonList.d.ts

@@ -0,0 +1,4 @@
+import { type CommonListProps } from './types.js';
+declare const CommonList: <ItemT>(props: CommonListProps<ItemT>) => import("react").JSX.Element;
+export default CommonList;
+//# sourceMappingURL=commonList.d.ts.map

package/lib/typescript/src/components/list/commonList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commonList.d.ts","sourceRoot":"","sources":["../../../../../src/components/list/commonList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAS,CAAC;AAE/C,QAAA,MAAM,UAAU,GAAI,KAAK,EAAG,OAAO,eAAe,CAAC,KAAK,CAAC,gCAExD,CAAC;AAQF,eAAe,UAAU,CAAC"}

package/lib/typescript/src/components/list/imageList.d.ts

@@ -0,0 +1,4 @@
+import { type CommonListProps } from './types.js';
+declare const ImgList: <ItemT>(props: CommonListProps<ItemT>) => import("react").JSX.Element;
+export default ImgList;
+//# sourceMappingURL=imageList.d.ts.map

package/lib/typescript/src/components/list/imageList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageList.d.ts","sourceRoot":"","sources":["../../../../../src/components/list/imageList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAS,CAAC;AAG/C,QAAA,MAAM,OAAO,GAAI,KAAK,EAAG,OAAO,eAAe,CAAC,KAAK,CAAC,gCAQrD,CAAC;AAYF,eAAe,OAAO,CAAC"}

package/lib/typescript/src/components/list/index.d.ts

@@ -0,0 +1,4 @@
+import CommonList from './commonList.js';
+import ImageList from './imageList.js';
+export { CommonList, ImageList };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/list/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,iBAAc,CAAC;AACtC,OAAO,SAAS,MAAM,gBAAa,CAAC;AAEpC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/lib/typescript/src/components/list/types.d.ts

@@ -0,0 +1,10 @@
+import { type FlatListProps, type ViewStyle } from 'react-native';
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+export declare const containerType: Record<Variant, ViewStyle>;
+export interface CommonListProps<ItemT> extends FlatListProps<ItemT> {
+    type?: Variant;
+    size?: SizeVariant;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/list/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/list/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAElE,KAAK,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;AACvC,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,OAAO,EAAE,SAAS,CAGpD,CAAC;AAEF,MAAM,WAAW,eAAe,CAAC,KAAK,CAAE,SAAQ,aAAa,CAAC,KAAK,CAAC;IAClE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB"}

package/lib/typescript/src/components/progressBar/circularProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"circularProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/progressBar/circularProgressBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAA6B,MAAM,YAAS,CAAC;AAG3E,QAAA,MAAM,mBAAmB,GAAI,wCAM1B,gBAAgB,gCA8ClB,CAAC;AAMF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"circularProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/progressBar/circularProgressBar.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,gBAAgB,EAA6B,MAAM,YAAS,CAAC;AAK3E,QAAA,MAAM,mBAAmB,GAAI,wCAM1B,gBAAgB,gCA0DlB,CAAC;AAMF,eAAe,mBAAmB,CAAC"}

package/lib/typescript/src/components/progressBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/progressBar/index.ts"],"names":[],"mappings":"AACA,OAAO,iBAAiB,MAAM,wBAAqB,CAAC;AACpD,OAAO,mBAAmB,MAAM,0BAAuB,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/progressBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,wBAAqB,CAAC;AACpD,OAAO,mBAAmB,MAAM,0BAAuB,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,CAAC"}

package/lib/typescript/src/components/progressBar/linearProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"linearProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/progressBar/linearProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAS,CAAC;AAGhD,QAAA,MAAM,iBAAiB,GAAI,kCAKxB,gBAAgB,gCA0BlB,CAAC;AAeF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"linearProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/progressBar/linearProgressBar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAS,CAAC;AAGhD,QAAA,MAAM,iBAAiB,GAAI,kCAKxB,gBAAgB,gCA0ClB,CAAC;AAeF,eAAe,iBAAiB,CAAC"}

package/lib/typescript/src/components/switch/commonSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commonSwitch.d.ts","sourceRoot":"","sources":["../../../../../src/components/switch/commonSwitch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAAY,MAAM,YAAS,CAAC;AAIrD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAgB,EAChB,IAAU,EACV,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,WAAW,+BAoDb"}
+{"version":3,"file":"commonSwitch.d.ts","sourceRoot":"","sources":["../../../../../src/components/switch/commonSwitch.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAY,MAAM,YAAS,CAAC;AAOrD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAgB,EAChB,IAAU,EACV,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,WAAW,+BAsDb"}

package/lib/typescript/src/index.d.ts

@@ -1,3 +1,3 @@
-export { CommonText, CommonButton, CommonBadge, SafeAreaContainer, ScrollViewContainer, CommonIcon, CommonRating, CommonAvatar, CommonImage, CheckBox, CommonHeader, CommonCard, FoldableCard, LinearProgressBar, CircularProgressBar, CommonInput, CommonPopOver, CommonSwitch, SocialLoginButton, CommonSpinner, CommonSlider, CommonSelect, SelectItem, } from './components/index.js';
+export { CommonText, CommonButton, CommonBadge, SafeAreaContainer, ScrollViewContainer, CommonIcon, CommonRating, CommonAvatar, CommonImage, CheckBox, CommonHeader, CommonCard, FoldableCard, LinearProgressBar, CircularProgressBar, CommonInput, CommonPopOver, CommonSwitch, SocialLoginButton, CommonSpinner, CommonSlider, CommonSelect, SelectItem, NumberBadge, } from './components/index.js';
 export { ThemeProvider } from './theme/themeProvider.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,EACnB,WAAW,EACX,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,UAAU,GACX,MAAM,uBAAc,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,EACnB,WAAW,EACX,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,GACZ,MAAM,uBAAc,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAAuB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kukkim/react-native-ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "ui library for react native",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/badge/index.ts

@@ -1,3 +1,4 @@
 import CommonBadge from './commonBadge';
+import NumberBadge from './numberBadge';
 
-export { CommonBadge };
+export { CommonBadge, NumberBadge };

package/src/components/index.ts

@@ -1,6 +1,6 @@
 export { CommonText } from './text';
 export { CommonButton, SocialLoginButton } from './button';
-export { CommonBadge } from './badge';
+export { CommonBadge, NumberBadge } from './badge';
 export { SafeAreaContainer, ScrollViewContainer } from './screenContainer';
 export { CommonIcon } from './icon';
 export { CommonRating } from './rating';

package/src/components/list/commonList.tsx

@@ -0,0 +1,14 @@
+import { FlatList, StyleSheet } from 'react-native';
+import { type CommonListProps } from './types';
+
+const CommonList = <ItemT,>(props: CommonListProps<ItemT>) => {
+  return <FlatList style={styles.container} {...props} />;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default CommonList;

package/src/components/list/imageList.tsx

@@ -0,0 +1,25 @@
+import { FlatList, StyleSheet } from 'react-native';
+import { type CommonListProps } from './types';
+// import { CommonImage } from "../image";
+
+const ImgList = <ItemT,>(props: CommonListProps<ItemT>) => {
+  return (
+    <FlatList
+      style={styles.container}
+      // renderItem={({ item }) => <CommonImage title={item.title} />}
+      {...props}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: 'auto',
+    margin: 5,
+    padding: 5,
+    borderWidth: 1,
+    borderRadius: 3,
+  },
+});
+
+export default ImgList;

package/src/components/list/index.ts

@@ -0,0 +1,4 @@
+import CommonList from './commonList';
+import ImageList from './imageList';
+
+export { CommonList, ImageList };

package/src/components/list/types.ts

@@ -0,0 +1,14 @@
+import { type FlatListProps, type ViewStyle } from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export const containerType: Record<Variant, ViewStyle> = {
+  primary: {},
+  secondary: {},
+};
+
+export interface CommonListProps<ItemT> extends FlatListProps<ItemT> {
+  type?: Variant;
+  size?: SizeVariant;
+}

package/src/components/progressBar/circularProgressBar.tsx

@@ -1,8 +1,16 @@
+import { useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Svg, { Circle } from 'react-native-svg';
+import Animated, {
+  useAnimatedProps,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { type ProgressBarProps, sizeType, strokeWidthType } from './types';
 import { useTheme } from '../../hooks/useTheme';
 
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
 const CircularProgressBar = ({
   type = 'primary',
   size = 'm',
@@ -20,7 +28,19 @@ const CircularProgressBar = ({
   const radius = (svgSize - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
 
-  const strokeDashoffset = circumference * (1 - progress);
+  const animatedProgress = useSharedValue(0);
+
+  useEffect(() => {
+    animatedProgress.value = withTiming(progress, {
+      duration: 500,
+    });
+  }, [progress, animatedProgress]);
+
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      strokeDashoffset: circumference * (1 - animatedProgress.value),
+    };
+  });
 
   return (
     <View style={[styles.container, style]} {...props}>
@@ -38,7 +58,7 @@ const CircularProgressBar = ({
           fill="none"
         />
 
-        <Circle
+        <AnimatedCircle
           cx={svgSize / 2}
           cy={svgSize / 2}
           r={radius}
@@ -47,7 +67,7 @@ const CircularProgressBar = ({
           fill="none"
           strokeLinecap="round"
           strokeDasharray={circumference}
-          strokeDashoffset={strokeDashoffset}
+          animatedProps={animatedProps}
           rotation="-90"
           originX={svgSize / 2}
           originY={svgSize / 2}

package/src/components/progressBar/index.ts

@@ -1,4 +1,3 @@
-// TODO: progressbar에 react-native-reanimated를 이용한 animation적용 필요.
 import LinearProgressBar from './linearProgressBar';
 import CircularProgressBar from './circularProgressBar';
 

package/src/components/progressBar/linearProgressBar.tsx

@@ -1,4 +1,9 @@
-import { StyleSheet, View } from 'react-native';
+import { useState } from 'react';
+import { StyleSheet, View, type LayoutChangeEvent } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
 import { type ProgressBarProps } from './types';
 import { useTheme } from '../../hooks/useTheme';
 
@@ -11,6 +16,18 @@ const LinearProgressBar = ({
   const { theme } = useTheme();
   const progress = Math.min(Math.max(value, 0), 1);
 
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: withTiming(containerWidth * progress, {
+      duration: 1000,
+    }),
+  }));
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width);
+  };
+
   return (
     <View
       style={[
@@ -20,17 +37,21 @@ const LinearProgressBar = ({
         },
         style,
       ]}
+      onLayout={onLayout}
       {...props}
     >
-      <View
-        style={[
-          styles.progress,
-          {
-            width: `${progress * 100}%`,
-            backgroundColor: theme.colors[type],
-          },
-        ]}
-      />
+      {containerWidth > 0 && (
+        <Animated.View
+          style={[
+            styles.progress,
+            {
+              width: containerWidth,
+              backgroundColor: theme.colors[type],
+            },
+            animatedStyle,
+          ]}
+        />
+      )}
     </View>
   );
 };

package/src/components/switch/commonSwitch.tsx

@@ -1,9 +1,11 @@
-import { useEffect, useRef } from 'react';
-import { Animated, Pressable, StyleSheet } from 'react-native';
+import { Pressable, StyleSheet } from 'react-native';
 import { type SwitchProps, sizeType } from './types';
 import { useTheme } from '../../hooks/useTheme';
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
 
-//TODO: react-native-reanimated로 수정필요
 export default function CommonSwitch({
   type = 'primary',
   size = 'm',
@@ -14,20 +16,22 @@ export default function CommonSwitch({
 }: SwitchProps) {
   const { theme } = useTheme();
 
-  const animValue = useRef(new Animated.Value(value ? 1 : 0)).current;
-
   const sizeValue = sizeType[size];
   const containerWidth = (sizeValue + 2) * 2;
   const thumbSize = sizeValue;
   const translateX = containerWidth - thumbSize - 2;
 
-  useEffect(() => {
-    Animated.timing(animValue, {
-      toValue: value ? translateX : 0,
-      duration: 200,
-      useNativeDriver: true,
-    }).start();
-  }, [value, translateX, animValue]);
+  const thumbAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: withTiming(value ? translateX : 0, {
+            duration: 200,
+          }),
+        },
+      ],
+    };
+  }, [value, translateX]);
 
   const toggleValue = () => {
     if (disabled) return;
@@ -57,8 +61,8 @@ export default function CommonSwitch({
             height: thumbSize,
             borderRadius: thumbSize / 2,
             backgroundColor: value ? theme.colors[type] : theme.colors.disabled,
-            transform: [{ translateX: animValue }],
           },
+          thumbAnimatedStyle,
         ]}
       />
     </Pressable>

package/src/index.tsx

@@ -22,5 +22,6 @@ export {
   CommonSlider,
   CommonSelect,
   SelectItem,
+  NumberBadge,
 } from './components';
 export { ThemeProvider } from './theme/themeProvider';