@kukkim/react-native-ui 0.1.4 → 0.1.5

package/lib/module/components/card/foldableCard.js

@@ -3,15 +3,11 @@
 import { StyleSheet, View, Pressable } from 'react-native';
 import { CommonText } from "../text/index.js";
 import { useTheme } from "../../hooks/useTheme.js";
-// import Animated, {
-//   FadeIn,
-//   FadeOut,
-//   LinearTransition,
-// } from 'react-native-reanimated';
+import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
 
-//TODO: React-native-reanimated 적용시키기
-// const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+//TODO: Animation이 여전히 부자연스러우니 수정필요.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const FoldableCard = ({
   children,
   type = 'primary',
@@ -24,26 +20,21 @@ const FoldableCard = ({
   } = useTheme();
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
-    children: [/*#__PURE__*/_jsx(Pressable
-    // <AnimatedPressable
-    , {
+    children: [/*#__PURE__*/_jsx(AnimatedPressable, {
       style: [styles.titleContainer, {
         backgroundColor: theme.colors[type]
       }],
-      onPress: onPress
-      // layout={LinearTransition.duration(200)}
-      ,
+      onPress: onPress,
+      layout: LinearTransition.duration(200),
       children: /*#__PURE__*/_jsx(CommonText, {
         style: [styles.titleText, {
           color: theme.colors.white
         }],
         children: title
       })
-    }), value && /*#__PURE__*/_jsx(View
-    // <Animated.View
-    // entering={FadeIn}
-    // exiting={FadeOut}
-    , {
+    }), value && /*#__PURE__*/_jsx(Animated.View, {
+      entering: FadeIn,
+      exiting: FadeOut,
       style: [styles.contentContainer, {
         borderColor: theme.colors[type]
       }],

package/lib/module/components/card/foldableCard.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","View","Pressable","CommonText","useTheme","jsx","_jsx","jsxs","_jsxs","FoldableCard","children","type","title","value","onPress","theme","style","styles","container","titleContainer","backgroundColor","colors","titleText","color","white","contentContainer","borderColor","create","width","padding","alignSelf","borderRadius","marginLeft","zIndex","fontSize","borderWidth"],"sourceRoot":"../../../../src","sources":["components/card/foldableCard.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,EAAEC,SAAS,QAAQ,cAAc;AAC1D,SAASC,UAAU,QAAQ,kBAAS;AAEpC,SAASC,QAAQ,QAAQ,yBAAsB;AAC/C;AACA;AACA;AACA;AACA;;AAEA;AACA;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,MAAMC,YAAY,GAAGA,CAAC;EACpBC,QAAQ;EACRC,IAAI,GAAG,SAAS;EAChBC,KAAK;EACLC,KAAK;EACLC;AACiB,CAAC,KAAK;EACvB,MAAM;IAAEC;EAAM,CAAC,GAAGX,QAAQ,CAAC,CAAC;EAC5B,oBACEI,KAAA,CAACP,IAAI;IAACe,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAR,QAAA,gBAC5BJ,IAAA,CAACJ;IACC;IAAA;MACAc,KAAK,EAAE,CACLC,MAAM,CAACE,cAAc,EACrB;QACEC,eAAe,EAAEL,KAAK,CAACM,MAAM,CAACV,IAAI;MACpC,CAAC,CACD;MACFG,OAAO,EAAEA;MACT;MAAA;MAAAJ,QAAA,eAEAJ,IAAA,CAACH,UAAU;QACTa,KAAK,EAAE,CACLC,MAAM,CAACK,SAAS,EAChB;UACEC,KAAK,EAAER,KAAK,CAACM,MAAM,CAACG;QACtB,CAAC,CACD;QAAAd,QAAA,EAEDE;MAAK,CACI;IAAC,CAEJ,CAAC,EACXC,KAAK,iBACJP,IAAA,CAACL;IACC;IACA;IACA;IAAA;MACAe,KAAK,EAAE,CACLC,MAAM,CAACQ,gBAAgB,EACvB;QACEC,WAAW,EAAEX,KAAK,CAACM,MAAM,CAACV,IAAI;MAChC,CAAC,CACD;MAAAD,QAAA,EAEDA;IAAQ,CAEL,CACP;EAAA,CACG,CAAC;AAEX,CAAC;AAED,MAAMO,MAAM,GAAGjB,UAAU,CAAC2B,MAAM,CAAC;EAC/BT,SAAS,EAAE;IACTU,KAAK,EAAE,MAAM;IACbC,OAAO,EAAE;EACX,CAAC;EACDV,cAAc,EAAE;IACdW,SAAS,EAAE,YAAY;IACvBC,YAAY,EAAE,CAAC;IACfC,UAAU,EAAE,CAAC;IACbH,OAAO,EAAE,CAAC;IACVI,MAAM,EAAE;EACV,CAAC;EACDX,SAAS,EAAE;IACTY,QAAQ,EAAE;EACZ,CAAC;EACDT,gBAAgB,EAAE;IAChBU,WAAW,EAAE,CAAC;IACdJ,YAAY,EAAE,CAAC;IACfF,OAAO,EAAE;EACX;AACF,CAAC,CAAC;AAEF,eAAepB,YAAY","ignoreList":[]}
+{"version":3,"names":["StyleSheet","View","Pressable","CommonText","useTheme","Animated","FadeIn","FadeOut","LinearTransition","jsx","_jsx","jsxs","_jsxs","AnimatedPressable","createAnimatedComponent","FoldableCard","children","type","title","value","onPress","theme","style","styles","container","titleContainer","backgroundColor","colors","layout","duration","titleText","color","white","entering","exiting","contentContainer","borderColor","create","width","padding","alignSelf","borderRadius","marginLeft","zIndex","fontSize","borderWidth"],"sourceRoot":"../../../../src","sources":["components/card/foldableCard.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,EAAEC,SAAS,QAAQ,cAAc;AAC1D,SAASC,UAAU,QAAQ,kBAAS;AAEpC,SAASC,QAAQ,QAAQ,yBAAsB;AAC/C,OAAOC,QAAQ,IACbC,MAAM,EACNC,OAAO,EACPC,gBAAgB,QACX,yBAAyB;;AAEhC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,MAAMC,iBAAiB,GAAGR,QAAQ,CAACS,uBAAuB,CAACZ,SAAS,CAAC;AACrE,MAAMa,YAAY,GAAGA,CAAC;EACpBC,QAAQ;EACRC,IAAI,GAAG,SAAS;EAChBC,KAAK;EACLC,KAAK;EACLC;AACiB,CAAC,KAAK;EACvB,MAAM;IAAEC;EAAM,CAAC,GAAGjB,QAAQ,CAAC,CAAC;EAC5B,oBACEQ,KAAA,CAACX,IAAI;IAACqB,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAR,QAAA,gBAC5BN,IAAA,CAACG,iBAAiB;MAChBS,KAAK,EAAE,CACLC,MAAM,CAACE,cAAc,EACrB;QACEC,eAAe,EAAEL,KAAK,CAACM,MAAM,CAACV,IAAI;MACpC,CAAC,CACD;MACFG,OAAO,EAAEA,OAAQ;MACjBQ,MAAM,EAAEpB,gBAAgB,CAACqB,QAAQ,CAAC,GAAG,CAAE;MAAAb,QAAA,eAEvCN,IAAA,CAACP,UAAU;QACTmB,KAAK,EAAE,CACLC,MAAM,CAACO,SAAS,EAChB;UACEC,KAAK,EAAEV,KAAK,CAACM,MAAM,CAACK;QACtB,CAAC,CACD;QAAAhB,QAAA,EAEDE;MAAK,CACI;IAAC,CACI,CAAC,EACnBC,KAAK,iBACJT,IAAA,CAACL,QAAQ,CAACJ,IAAI;MACZgC,QAAQ,EAAE3B,MAAO;MACjB4B,OAAO,EAAE3B,OAAQ;MACjBe,KAAK,EAAE,CACLC,MAAM,CAACY,gBAAgB,EACvB;QACEC,WAAW,EAAEf,KAAK,CAACM,MAAM,CAACV,IAAI;MAChC,CAAC,CACD;MAAAD,QAAA,EAEDA;IAAQ,CACI,CAChB;EAAA,CACG,CAAC;AAEX,CAAC;AAED,MAAMO,MAAM,GAAGvB,UAAU,CAACqC,MAAM,CAAC;EAC/Bb,SAAS,EAAE;IACTc,KAAK,EAAE,MAAM;IACbC,OAAO,EAAE;EACX,CAAC;EACDd,cAAc,EAAE;IACde,SAAS,EAAE,YAAY;IACvBC,YAAY,EAAE,CAAC;IACfC,UAAU,EAAE,CAAC;IACbH,OAAO,EAAE,CAAC;IACVI,MAAM,EAAE;EACV,CAAC;EACDb,SAAS,EAAE;IACTc,QAAQ,EAAE;EACZ,CAAC;EACDT,gBAAgB,EAAE;IAChBU,WAAW,EAAE,CAAC;IACdJ,YAAY,EAAE,CAAC;IACfF,OAAO,EAAE;EACX;AACF,CAAC,CAAC;AAEF,eAAexB,YAAY","ignoreList":[]}

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

@@ -17,7 +17,7 @@ import Kakaotalk from "./Kakaotalk.js";
 import Naver from "./Naver.js";
 // import { ArrowDownToLine } from './ArrowDownToLine';
 // import { ArrowDownWideNarrow } from './ArrowDownWideNarrow';
-// import { ChevronDown } from './ChevronDown';
+import ChevronDown from "./ChevronDown.js";
 // import { RotateCw } from './RotateCw';
 // export { SquareArrowOutUpRight } from './SquareArrowOutUpRight';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -33,7 +33,8 @@ const iconMap = {
   facebook: Facebook,
   google: Google,
   kakaotalk: Kakaotalk,
-  naver: Naver
+  naver: Naver,
+  down: ChevronDown
 };
 export const CommonIcon = ({
   iconType,

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

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","View","sizeType","ArrowLeft","StarEmpty","StarHalf","StarFull","Check","X","LoaderCircle","Apple","Facebook","Google","Kakaotalk","Naver","jsx","_jsx","iconMap","back","star_empty","star_half","star_full","check","close","loaderCircle","apple","facebook","google","kakaotalk","naver","CommonIcon","iconType","size","color","props","IconComponent","style","styles","container","children","width","height","create"],"sourceRoot":"../../../../src","sources":["components/icon/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAAyBC,QAAQ,QAAQ,YAAS;AAClD;AACA,OAAOC,SAAS,MAAM,gBAAa;AACnC,OAAOC,SAAS,MAAM,gBAAa;AACnC,OAAOC,QAAQ,MAAM,eAAY;AACjC,OAAOC,QAAQ,MAAM,eAAY;AACjC,OAAOC,KAAK,MAAM,YAAS;AAC3B,OAAOC,CAAC,MAAM,QAAK;AACnB,OAAOC,YAAY,MAAM,mBAAgB;AACzC,OAAOC,KAAK,MAAM,YAAS;AAC3B,OAAOC,QAAQ,MAAM,eAAY;AACjC,OAAOC,MAAM,MAAM,aAAU;AAC7B,OAAOC,SAAS,MAAM,gBAAa;AACnC,OAAOC,KAAK,MAAM,YAAS;AAC3B;AACA;AACA;AACA;AACA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEA,MAAMC,OAAO,GAAG;EACdC,IAAI,EAAEf,SAAS;EACfgB,UAAU,EAAEf,SAAS;EACrBgB,SAAS,EAAEf,QAAQ;EACnBgB,SAAS,EAAEf,QAAQ;EACnBgB,KAAK,EAAEf,KAAK;EACZgB,KAAK,EAAEf,CAAC;EACRgB,YAAY,EAAEf,YAAY;EAC1BgB,KAAK,EAAEf,KAAK;EACZgB,QAAQ,EAAEf,QAAQ;EAClBgB,MAAM,EAAEf,MAAM;EACdgB,SAAS,EAAEf,SAAS;EACpBgB,KAAK,EAAEf;AACT,CAAU;AAEV,OAAO,MAAMgB,UAAU,GAAGA,CAAC;EACzBC,QAAQ;EACRC,IAAI,GAAG,GAAG;EACVC,KAAK,GAAG,OAAO;EACf,GAAGC;AACM,CAAC,KAAK;EACf;;EAEA,MAAMC,aAAa,GAAGlB,OAAO,CAACc,QAAQ,CAAC;EACvC,IAAI,CAACI,aAAa,EAAE;IAClB,OAAO,IAAI;EACb;EAEA,oBACEnB,IAAA,CAACf,IAAI;IAACmC,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAA,GAAKJ,KAAK;IAAAK,QAAA,eACtCvB,IAAA,CAACmB,aAAa;MACZK,KAAK,EAAEtC,QAAQ,CAAC8B,IAAI,CAAE;MACtBS,MAAM,EAAEvC,QAAQ,CAAC8B,IAAI,CAAE;MACvBC,KAAK,EAAEA;IAAM,CACd;EAAC,CACE,CAAC;AAEX,CAAC;AAED,MAAMI,MAAM,GAAGrC,UAAU,CAAC0C,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IACT;IACA;EAAA;AAEJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["StyleSheet","View","sizeType","ArrowLeft","StarEmpty","StarHalf","StarFull","Check","X","LoaderCircle","Apple","Facebook","Google","Kakaotalk","Naver","ChevronDown","jsx","_jsx","iconMap","back","star_empty","star_half","star_full","check","close","loaderCircle","apple","facebook","google","kakaotalk","naver","down","CommonIcon","iconType","size","color","props","IconComponent","style","styles","container","children","width","height","create"],"sourceRoot":"../../../../src","sources":["components/icon/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAAyBC,QAAQ,QAAQ,YAAS;AAClD;AACA,OAAOC,SAAS,MAAM,gBAAa;AACnC,OAAOC,SAAS,MAAM,gBAAa;AACnC,OAAOC,QAAQ,MAAM,eAAY;AACjC,OAAOC,QAAQ,MAAM,eAAY;AACjC,OAAOC,KAAK,MAAM,YAAS;AAC3B,OAAOC,CAAC,MAAM,QAAK;AACnB,OAAOC,YAAY,MAAM,mBAAgB;AACzC,OAAOC,KAAK,MAAM,YAAS;AAC3B,OAAOC,QAAQ,MAAM,eAAY;AACjC,OAAOC,MAAM,MAAM,aAAU;AAC7B,OAAOC,SAAS,MAAM,gBAAa;AACnC,OAAOC,KAAK,MAAM,YAAS;AAC3B;AACA;AACA,OAAOC,WAAW,MAAM,kBAAe;AACvC;AACA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEA,MAAMC,OAAO,GAAG;EACdC,IAAI,EAAEhB,SAAS;EACfiB,UAAU,EAAEhB,SAAS;EACrBiB,SAAS,EAAEhB,QAAQ;EACnBiB,SAAS,EAAEhB,QAAQ;EACnBiB,KAAK,EAAEhB,KAAK;EACZiB,KAAK,EAAEhB,CAAC;EACRiB,YAAY,EAAEhB,YAAY;EAC1BiB,KAAK,EAAEhB,KAAK;EACZiB,QAAQ,EAAEhB,QAAQ;EAClBiB,MAAM,EAAEhB,MAAM;EACdiB,SAAS,EAAEhB,SAAS;EACpBiB,KAAK,EAAEhB,KAAK;EACZiB,IAAI,EAAEhB;AACR,CAAU;AAEV,OAAO,MAAMiB,UAAU,GAAGA,CAAC;EACzBC,QAAQ;EACRC,IAAI,GAAG,GAAG;EACVC,KAAK,GAAG,OAAO;EACf,GAAGC;AACM,CAAC,KAAK;EACf;;EAEA,MAAMC,aAAa,GAAGnB,OAAO,CAACe,QAAQ,CAAC;EACvC,IAAI,CAACI,aAAa,EAAE;IAClB,OAAO,IAAI;EACb;EAEA,oBACEpB,IAAA,CAAChB,IAAI;IAACqC,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAA,GAAKJ,KAAK;IAAAK,QAAA,eACtCxB,IAAA,CAACoB,aAAa;MACZK,KAAK,EAAExC,QAAQ,CAACgC,IAAI,CAAE;MACtBS,MAAM,EAAEzC,QAAQ,CAACgC,IAAI,CAAE;MACvBC,KAAK,EAAEA;IAAM,CACd;EAAC,CACE,CAAC;AAEX,CAAC;AAED,MAAMI,MAAM,GAAGvC,UAAU,CAAC4C,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IACT;IACA;EAAA;AAEJ,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/index.js

@@ -16,4 +16,6 @@ export { CommonInput } from "./input/index.js";
 export { CommonPopOver } from "./popOver/index.js";
 export { CommonSwitch } from "./switch/index.js";
 export { CommonSpinner } from "./spinner/index.js";
+export { CommonSlider } from "./slider/index.js";
+export { CommonSelect, SelectItem } from "./select/index.js";
 //# sourceMappingURL=index.js.map

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"],"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","ignoreList":[]}
+{"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":[]}

package/lib/module/components/select/commonSelect.js

@@ -0,0 +1,135 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useTheme } from "../../hooks/useTheme.js";
+import { CommonIcon } from "../icon/index.js";
+import { CommonText } from "../text/index.js";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SelectItem = _props => {
+  return null;
+};
+export const CommonSelect = ({
+  children,
+  placeholder = 'Select',
+  value,
+  // defaultValue,
+  onChange,
+  style
+}) => {
+  const {
+    theme
+  } = useTheme();
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(
+  // defaultValue
+  '');
+  const selectedValue = value ?? internalValue;
+  const items = React.Children.toArray(children).filter(React.isValidElement);
+  const selectedItem = items.find(item => item.props.value === selectedValue);
+  const handleSelect = nextValue => {
+    if (value === undefined) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+    setOpen(false);
+  };
+  const rotate = useSharedValue(0);
+  const arrowAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        rotate: `${rotate.value}deg`
+      }]
+    };
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      style: [styles.trigger, {
+        borderColor: theme.colors.border,
+        backgroundColor: theme.colors.background
+      }],
+      onPress: () => {
+        const nextOpen = !open;
+        rotate.value = withTiming(nextOpen ? 180 : 0, {
+          duration: 200
+        });
+        setOpen(nextOpen);
+      },
+      children: [/*#__PURE__*/_jsx(CommonText, {
+        size: "m",
+        style: [!selectedItem && {
+          color: theme.colors.disabled
+        }],
+        children: selectedItem?.props.label ?? placeholder
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: arrowAnimatedStyle,
+        children: /*#__PURE__*/_jsx(CommonIcon, {
+          iconType: "down"
+        })
+      })]
+    }), open && /*#__PURE__*/_jsx(View, {
+      style: [{
+        borderColor: theme.colors.border,
+        backgroundColor: theme.colors.background
+      }, styles.dropdown],
+      children: items.map(item => {
+        const isSelected = item.props.value === selectedValue;
+        return /*#__PURE__*/_jsx(Pressable, {
+          style: [styles.option, isSelected && styles.selectedOption],
+          onPress: () => handleSelect(item.props.value),
+          children: /*#__PURE__*/_jsx(CommonText, {
+            style: [styles.optionText, isSelected && styles.selectedOptionText],
+            children: item.props.label
+          })
+        }, String(item.props.value));
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%',
+    zIndex: 999
+  },
+  trigger: {
+    minHeight: 44,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  arrow: {
+    fontSize: 12,
+    color: '#667085'
+  },
+  dropdown: {
+    position: 'absolute',
+    top: 46,
+    left: 0,
+    right: 0,
+    borderWidth: 1,
+    borderRadius: 8,
+    zIndex: 999,
+    elevation: 10
+  },
+  option: {
+    paddingVertical: 12,
+    paddingHorizontal: 12
+  },
+  selectedOption: {
+    backgroundColor: '#F2F4F7'
+  },
+  optionText: {
+    fontSize: 14,
+    color: '#101828'
+  },
+  selectedOptionText: {
+    fontWeight: '600'
+  }
+});
+//# sourceMappingURL=commonSelect.js.map

package/lib/module/components/select/commonSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Pressable","StyleSheet","View","useTheme","CommonIcon","CommonText","Animated","useAnimatedStyle","useSharedValue","withTiming","jsx","_jsx","jsxs","_jsxs","SelectItem","_props","CommonSelect","children","placeholder","value","onChange","style","theme","open","setOpen","internalValue","setInternalValue","selectedValue","items","Children","toArray","filter","isValidElement","selectedItem","find","item","props","handleSelect","nextValue","undefined","rotate","arrowAnimatedStyle","transform","styles","container","trigger","borderColor","colors","border","backgroundColor","background","onPress","nextOpen","duration","size","color","disabled","label","iconType","dropdown","map","isSelected","option","selectedOption","optionText","selectedOptionText","String","create","position","width","zIndex","minHeight","borderWidth","borderRadius","paddingHorizontal","flexDirection","alignItems","justifyContent","arrow","fontSize","top","left","right","elevation","paddingVertical","fontWeight"],"sourceRoot":"../../../../src","sources":["components/select/commonSelect.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,5 @@
+"use strict";
+
+import { CommonSelect, SelectItem } from "./commonSelect.js";
+export { CommonSelect, SelectItem };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["CommonSelect","SelectItem"],"sourceRoot":"../../../../src","sources":["components/select/index.ts"],"mappings":";;AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,mBAAgB;AAEzD,SAASD,YAAY,EAAEC,UAAU","ignoreList":[]}

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/select/types.ts"],"mappings":"","ignoreList":[]}

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

@@ -1,3 +1,105 @@
-// TODO: slider 구현 필요
 "use strict";
+
+import { View, StyleSheet } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { CommonText } from "../text/index.js";
+import { useTheme } from "../../hooks/useTheme.js";
+
+// TODO: Thumb가 범위 바깥으로 넘어가는 것 수정 필요.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CommonSlider = ({
+  labels = []
+}) => {
+  const {
+    theme
+  } = useTheme();
+  const position = useSharedValue(0);
+  const startPosition = useSharedValue(0);
+  const panGesture = Gesture.Pan().onBegin(() => {
+    startPosition.value = position.value;
+  }).onUpdate(event => {
+    const nextValue = startPosition.value + event.translationX;
+    if (nextValue < 0) {
+      position.value = 0;
+    } else {
+      position.value = nextValue;
+    }
+  });
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: position.value
+    }]
+  }));
+  const activeTrackStyle = useAnimatedStyle(() => ({
+    width: position.value + 15
+  }));
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.sliderBar, {
+        backgroundColor: theme.colors.secondary
+      }],
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        style: [{
+          backgroundColor: theme.colors.primary
+        }, styles.filledSliderBar, activeTrackStyle]
+      }), /*#__PURE__*/_jsx(GestureDetector, {
+        gesture: panGesture,
+        children: /*#__PURE__*/_jsx(Animated.View, {
+          style: [animatedStyle, {
+            backgroundColor: theme.colors.text
+          }, styles.thumb]
+        })
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.labelBar,
+      children: labels.map((label, index) => {
+        const percent = labels.length === 1 ? 0 : index / (labels.length - 1);
+        return /*#__PURE__*/_jsx(CommonText, {
+          size: "s",
+          style: [styles.labelText, {
+            color: theme.colors.text,
+            left: `${percent * 100}%`
+          }],
+          children: label
+        }, `${label}-${index}`);
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+    width: '100%'
+  },
+  sliderBar: {
+    width: '100%',
+    height: 10
+  },
+  filledSliderBar: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    height: 10,
+    borderRadius: 5
+  },
+  labelBar: {
+    position: 'relative',
+    height: 24,
+    marginTop: 12
+  },
+  labelText: {
+    position: 'absolute',
+    transform: [{
+      translateX: -8
+    }]
+  },
+  thumb: {
+    bottom: 10,
+    width: 30,
+    height: 30,
+    borderRadius: 15
+  }
+});
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/slider/index.tsx"],"mappings":"AAAA;AAAA","ignoreList":[]}
+{"version":3,"names":["View","StyleSheet","Gesture","GestureDetector","Animated","useAnimatedStyle","useSharedValue","CommonText","useTheme","jsx","_jsx","jsxs","_jsxs","CommonSlider","labels","theme","position","startPosition","panGesture","Pan","onBegin","value","onUpdate","event","nextValue","translationX","animatedStyle","transform","translateX","activeTrackStyle","width","style","styles","container","children","sliderBar","backgroundColor","colors","secondary","primary","filledSliderBar","gesture","text","thumb","labelBar","map","label","index","percent","length","size","labelText","color","left","create","padding","height","top","borderRadius","marginTop","bottom"],"sourceRoot":"../../../../src","sources":["components/slider/index.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +1,4 @@
 "use strict";
+
+export {};
 //# sourceMappingURL=types.js.map

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 } 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 } 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","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,QACR,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","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":[]}

package/lib/typescript/src/components/card/foldableCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"foldableCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/card/foldableCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAS,CAAC;AAUjD,QAAA,MAAM,YAAY,GAAI,4CAMnB,iBAAiB,gCA6CnB,CAAC;AAwBF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"foldableCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/card/foldableCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAS,CAAC;AAUjD,QAAA,MAAM,YAAY,GAAI,4CAMnB,iBAAiB,gCAyCnB,CAAC;AAwBF,eAAe,YAAY,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/icon/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,YAAS,CAAC;AAmCnD,eAAO,MAAM,UAAU,GAAI,qCAKxB,SAAS,uCAiBX,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/icon/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,YAAS,CAAC;AAoCnD,eAAO,MAAM,UAAU,GAAI,qCAKxB,SAAS,uCAiBX,CAAC"}

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

@@ -3,7 +3,7 @@ type Variant = 'primary' | 'secondary';
 type SizeVariant = 's' | 'm' | 'l';
 export declare const sizeType: Record<SizeVariant, number>;
 export interface IconProps extends ViewProps {
-    iconType: 'check' | 'back' | 'close' | 'apple' | 'facebook' | 'google' | 'kakaotalk' | 'naver' | 'loaderCircle' | 'star_empty' | 'star_half' | 'star_full';
+    iconType: 'check' | 'back' | 'down' | 'close' | 'apple' | 'facebook' | 'google' | 'kakaotalk' | 'naver' | 'loaderCircle' | 'star_empty' | 'star_half' | 'star_full';
     type?: Variant;
     size?: SizeVariant;
     color?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,KAAK,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;AACvC,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAIhD,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,QAAQ,EAGJ,OAAO,GACP,MAAM,GACN,OAAO,GACP,OAAO,GACP,UAAU,GACV,QAAQ,GACR,WAAW,GACX,OAAO,GACP,cAAc,GAGd,YAAY,GACZ,WAAW,GACX,WAAW,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,KAAK,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;AACvC,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAIhD,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,QAAQ,EAGJ,OAAO,GACP,MAAM,GACN,MAAM,GACN,OAAO,GACP,OAAO,GACP,UAAU,GACV,QAAQ,GACR,WAAW,GACX,OAAO,GACP,cAAc,GAGd,YAAY,GACZ,WAAW,GACX,WAAW,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

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

@@ -14,4 +14,6 @@ export { CommonInput } from './input/index.js';
 export { CommonPopOver } from './popOver/index.js';
 export { CommonSwitch } from './switch/index.js';
 export { CommonSpinner } from './spinner/index.js';
+export { CommonSlider } from './slider/index.js';
+export { CommonSelect, SelectItem } from './select/index.js';
 //# sourceMappingURL=index.d.ts.map

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

package/lib/typescript/src/components/select/commonSelect.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type CommonSelectItemProps, type CommonSelectProps } from './types.js';
+export declare const SelectItem: (_props: CommonSelectItemProps) => null;
+export declare const CommonSelect: ({ children, placeholder, value, onChange, style, }: CommonSelectProps) => React.JSX.Element;
+//# sourceMappingURL=commonSelect.d.ts.map

package/lib/typescript/src/components/select/commonSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commonSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/select/commonSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAS,CAAC;AAO7E,eAAO,MAAM,UAAU,GAAI,QAAQ,qBAAqB,SAEvD,CAAC;AACF,eAAO,MAAM,YAAY,GAAI,oDAO1B,iBAAiB,sBAqGnB,CAAC"}

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

@@ -0,0 +1,3 @@
+import { CommonSelect, SelectItem } from './commonSelect.js';
+export { CommonSelect, SelectItem };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,mBAAgB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+type SizeVariant = 's' | 'm' | 'l';
+export interface CommonSelectProps extends ViewProps {
+    size?: SizeVariant;
+    value?: string;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    children: ReactNode;
+}
+export interface CommonSelectItemProps extends ViewProps {
+    label: string;
+    value: string;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf"}

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

@@ -1 +1,3 @@
+import { type SliderProps } from './types.js';
+export declare const CommonSlider: ({ labels }: SliderProps) => import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/slider/index.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/slider/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,YAAS,CAAC;AAI3C,eAAO,MAAM,YAAY,GAAI,YAAiB,WAAW,gCAyExD,CAAC"}

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

@@ -1 +1,10 @@
+import { type ViewProps } from 'react-native';
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+export interface SliderProps extends ViewProps {
+    type?: Variant;
+    size?: SizeVariant;
+    labels?: (string | number)[];
+}
+export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/slider/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/slider/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,KAAK,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;AACvC,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CAC9B"}

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, } 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, } 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,GACd,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,GACX,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.4",
+  "version": "0.1.5",
   "description": "ui library for react native",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -83,6 +83,7 @@
     "react": "19.2.0",
     "react-native": "0.83.6",
     "react-native-builder-bob": "^0.42.1",
+    "react-native-gesture-handler": "^3.0.0",
     "react-native-reanimated": "^4.0.0",
     "react-native-safe-area-context": "^5.8.0",
     "react-native-svg": "^15.15.5",
@@ -94,6 +95,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
+    "react-native-gesture-handler": ">=3.0.0",
     "react-native-reanimated": ">=4.0.0",
     "react-native-safe-area-context": ">=5.0.0",
     "react-native-svg": "*",

package/src/components/card/foldableCard.tsx

@@ -2,14 +2,14 @@ import { StyleSheet, View, Pressable } from 'react-native';
 import { CommonText } from '../text';
 import { type FoldableCardProps } from './types';
 import { useTheme } from '../../hooks/useTheme';
-// import Animated, {
-//   FadeIn,
-//   FadeOut,
-//   LinearTransition,
-// } from 'react-native-reanimated';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  LinearTransition,
+} from 'react-native-reanimated';
 
-//TODO: React-native-reanimated 적용시키기
-// const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+//TODO: Animation이 여전히 부자연스러우니 수정필요.
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const FoldableCard = ({
   children,
   type = 'primary',
@@ -20,8 +20,7 @@ const FoldableCard = ({
   const { theme } = useTheme();
   return (
     <View style={styles.container}>
-      <Pressable
-        // <AnimatedPressable
+      <AnimatedPressable
         style={[
           styles.titleContainer,
           {
@@ -29,7 +28,7 @@ const FoldableCard = ({
           },
         ]}
         onPress={onPress}
-        // layout={LinearTransition.duration(200)}
+        layout={LinearTransition.duration(200)}
       >
         <CommonText
           style={[
@@ -41,13 +40,11 @@ const FoldableCard = ({
         >
           {title}
         </CommonText>
-        {/* </AnimatedPressable> */}
-      </Pressable>
+      </AnimatedPressable>
       {value && (
-        <View
-          // <Animated.View
-          // entering={FadeIn}
-          // exiting={FadeOut}
+        <Animated.View
+          entering={FadeIn}
+          exiting={FadeOut}
           style={[
             styles.contentContainer,
             {
@@ -56,8 +53,7 @@ const FoldableCard = ({
           ]}
         >
           {children}
-          {/* </Animated.View> */}
-        </View>
+        </Animated.View>
       )}
     </View>
   );

package/src/components/icon/index.tsx

@@ -15,7 +15,7 @@ import Kakaotalk from './Kakaotalk';
 import Naver from './Naver';
 // import { ArrowDownToLine } from './ArrowDownToLine';
 // import { ArrowDownWideNarrow } from './ArrowDownWideNarrow';
-// import { ChevronDown } from './ChevronDown';
+import ChevronDown from './ChevronDown';
 // import { RotateCw } from './RotateCw';
 // export { SquareArrowOutUpRight } from './SquareArrowOutUpRight';
 
@@ -32,6 +32,7 @@ const iconMap = {
   google: Google,
   kakaotalk: Kakaotalk,
   naver: Naver,
+  down: ChevronDown,
 } as const;
 
 export const CommonIcon = ({

package/src/components/icon/types.ts

@@ -15,6 +15,7 @@ export interface IconProps extends ViewProps {
     // | 'spinner'
     | 'check'
     | 'back'
+    | 'down'
     | 'close'
     | 'apple'
     | 'facebook'

package/src/components/index.ts

@@ -14,3 +14,5 @@ export { CommonInput } from './input';
 export { CommonPopOver } from './popOver';
 export { CommonSwitch } from './switch';
 export { CommonSpinner } from './spinner';
+export { CommonSlider } from './slider';
+export { CommonSelect, SelectItem } from './select';

package/src/components/select/commonSelect.tsx

@@ -0,0 +1,170 @@
+import React, { type ReactElement, useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
+import { CommonIcon } from '../icon';
+import { CommonText } from '../text';
+import { type CommonSelectItemProps, type CommonSelectProps } from './types';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+export const SelectItem = (_props: CommonSelectItemProps) => {
+  return null;
+};
+export const CommonSelect = ({
+  children,
+  placeholder = 'Select',
+  value,
+  // defaultValue,
+  onChange,
+  style,
+}: CommonSelectProps) => {
+  const { theme } = useTheme();
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState<string | undefined>(
+    // defaultValue
+    ''
+  );
+
+  const selectedValue = value ?? internalValue;
+
+  const items = React.Children.toArray(children).filter(
+    React.isValidElement
+  ) as ReactElement<CommonSelectItemProps>[];
+
+  const selectedItem = items.find((item) => item.props.value === selectedValue);
+
+  const handleSelect = (nextValue: string) => {
+    if (value === undefined) {
+      setInternalValue(nextValue);
+    }
+
+    onChange?.(nextValue);
+    setOpen(false);
+  };
+
+  const rotate = useSharedValue(0);
+  const arrowAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          rotate: `${rotate.value}deg`,
+        },
+      ],
+    };
+  });
+
+  return (
+    <View style={[styles.container, style]}>
+      <Pressable
+        style={[
+          styles.trigger,
+          {
+            borderColor: theme.colors.border,
+            backgroundColor: theme.colors.background,
+          },
+        ]}
+        onPress={() => {
+          const nextOpen = !open;
+
+          rotate.value = withTiming(nextOpen ? 180 : 0, {
+            duration: 200,
+          });
+
+          setOpen(nextOpen);
+        }}
+      >
+        <CommonText
+          size="m"
+          style={[!selectedItem && { color: theme.colors.disabled }]}
+        >
+          {selectedItem?.props.label ?? placeholder}
+        </CommonText>
+        <Animated.View style={arrowAnimatedStyle}>
+          <CommonIcon iconType="down" />
+        </Animated.View>
+      </Pressable>
+
+      {open && (
+        <View
+          style={[
+            {
+              borderColor: theme.colors.border,
+              backgroundColor: theme.colors.background,
+            },
+            styles.dropdown,
+          ]}
+        >
+          {items.map((item) => {
+            const isSelected = item.props.value === selectedValue;
+
+            return (
+              <Pressable
+                key={String(item.props.value)}
+                style={[styles.option, isSelected && styles.selectedOption]}
+                onPress={() => handleSelect(item.props.value)}
+              >
+                <CommonText
+                  style={[
+                    styles.optionText,
+                    isSelected && styles.selectedOptionText,
+                  ]}
+                >
+                  {item.props.label}
+                </CommonText>
+              </Pressable>
+            );
+          })}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%',
+    zIndex: 999,
+  },
+  trigger: {
+    minHeight: 44,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  arrow: {
+    fontSize: 12,
+    color: '#667085',
+  },
+  dropdown: {
+    position: 'absolute',
+    top: 46,
+    left: 0,
+    right: 0,
+
+    borderWidth: 1,
+    borderRadius: 8,
+    zIndex: 999,
+    elevation: 10,
+  },
+  option: {
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+  },
+  selectedOption: {
+    backgroundColor: '#F2F4F7',
+  },
+  optionText: {
+    fontSize: 14,
+    color: '#101828',
+  },
+  selectedOptionText: {
+    fontWeight: '600',
+  },
+});

package/src/components/select/index.ts

@@ -0,0 +1,3 @@
+import { CommonSelect, SelectItem } from './commonSelect';
+
+export { CommonSelect, SelectItem };

package/src/components/select/types.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+
+// type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export interface CommonSelectProps extends ViewProps {
+  size?: SizeVariant;
+  value?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  children: ReactNode;
+}
+
+export interface CommonSelectItemProps extends ViewProps {
+  label: string;
+  value: string;
+}

package/src/components/slider/index.tsx

@@ -1 +1,118 @@
-// TODO: slider 구현 필요
+import { View, StyleSheet } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+import { CommonText } from '../text';
+import { type SliderProps } from './types';
+import { useTheme } from '../../hooks/useTheme';
+
+// TODO: Thumb가 범위 바깥으로 넘어가는 것 수정 필요.
+export const CommonSlider = ({ labels = [] }: SliderProps) => {
+  const { theme } = useTheme();
+  const position = useSharedValue(0);
+  const startPosition = useSharedValue(0);
+
+  const panGesture = Gesture.Pan()
+    .onBegin(() => {
+      startPosition.value = position.value;
+    })
+    .onUpdate((event) => {
+      const nextValue = startPosition.value + event.translationX;
+      if (nextValue < 0) {
+        position.value = 0;
+      } else {
+        position.value = nextValue;
+      }
+    });
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: position.value }],
+  }));
+  const activeTrackStyle = useAnimatedStyle(() => ({
+    width: position.value + 15,
+  }));
+
+  return (
+    <View style={styles.container}>
+      <View
+        style={[styles.sliderBar, { backgroundColor: theme.colors.secondary }]}
+      >
+        <Animated.View
+          style={[
+            {
+              backgroundColor: theme.colors.primary,
+            },
+            styles.filledSliderBar,
+            activeTrackStyle,
+          ]}
+        />
+        <GestureDetector gesture={panGesture}>
+          <Animated.View
+            style={[
+              animatedStyle,
+              {
+                backgroundColor: theme.colors.text,
+              },
+              styles.thumb,
+            ]}
+          />
+        </GestureDetector>
+      </View>
+
+      <View style={styles.labelBar}>
+        {labels.map((label, index) => {
+          const percent = labels.length === 1 ? 0 : index / (labels.length - 1);
+          return (
+            <CommonText
+              size="s"
+              key={`${label}-${index}`}
+              style={[
+                styles.labelText,
+                {
+                  color: theme.colors.text,
+                  left: `${percent * 100}%`,
+                },
+              ]}
+            >
+              {label}
+            </CommonText>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+    width: '100%',
+  },
+  sliderBar: {
+    width: '100%',
+    height: 10,
+  },
+  filledSliderBar: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    height: 10,
+    borderRadius: 5,
+  },
+  labelBar: {
+    position: 'relative',
+    height: 24,
+    marginTop: 12,
+  },
+  labelText: {
+    position: 'absolute',
+    transform: [{ translateX: -8 }],
+  },
+  thumb: {
+    bottom: 10,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+  },
+});

package/src/components/slider/types.ts

@@ -0,0 +1,10 @@
+import { type ViewProps } from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export interface SliderProps extends ViewProps {
+  type?: Variant;
+  size?: SizeVariant;
+  labels?: (string | number)[];
+}

package/src/index.tsx

@@ -19,5 +19,8 @@ export {
   CommonSwitch,
   SocialLoginButton,
   CommonSpinner,
+  CommonSlider,
+  CommonSelect,
+  SelectItem,
 } from './components';
 export { ThemeProvider } from './theme/themeProvider';