@kukkim/react-native-ui 0.1.0 → 0.1.1

package/lib/module/components/index.js

@@ -12,4 +12,7 @@ export { CheckBox } from "./checkBox/index.js";
 export { CommonHeader } from "./header/index.js";
 export { CommonCard, FoldableCard } from "./card/index.js";
 export { LinearProgressBar, CircularProgressBar } from "./progressBar/index.js";
+export { CommonInput } from "./input/index.js";
+export { CommonPopOver } from "./popOver/index.js";
+export { CommonSwitch } from "./switch/index.js";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["CommonText","CommonButton","CommonBadge","SafeAreaContainer","ScrollViewContainer","CommonIcon","CommonRating","CommonAvatar","CommonImage","CheckBox","CommonHeader","CommonCard","FoldableCard","LinearProgressBar","CircularProgressBar"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,iBAAQ;AACnC,SAASC,YAAY,QAAQ,mBAAU;AACvC,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","ignoreList":[]}
+{"version":3,"names":["CommonText","CommonButton","CommonBadge","SafeAreaContainer","ScrollViewContainer","CommonIcon","CommonRating","CommonAvatar","CommonImage","CheckBox","CommonHeader","CommonCard","FoldableCard","LinearProgressBar","CircularProgressBar","CommonInput","CommonPopOver","CommonSwitch"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,iBAAQ;AACnC,SAASC,YAAY,QAAQ,mBAAU;AACvC,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","ignoreList":[]}

package/lib/module/components/input/commonInput.js

@@ -0,0 +1,61 @@
+"use strict";
+
+import { StyleSheet, TextInput, View } from 'react-native';
+import { CommonText } from "../text/index.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CommonInput = ({
+  title,
+  warningText,
+  type = 'primary',
+  ...props
+}) => {
+  const {
+    theme
+  } = useTheme();
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [title && /*#__PURE__*/_jsx(CommonText, {
+      style: styles.title,
+      children: title
+    }), /*#__PURE__*/_jsx(TextInput, {
+      style: [styles.textInput, {
+        backgroundColor: theme.colors.background,
+        borderColor: warningText ? theme.colors.warning : theme.colors[type],
+        color: warningText ? theme.colors.warning : theme.colors.text
+      }],
+      autoCapitalize: "none",
+      ...props
+    }), warningText && /*#__PURE__*/_jsx(CommonText, {
+      style: [styles.warningTitle, {
+        color: theme.colors.warning
+      }],
+      children: warningText
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 5
+  },
+  textInput: {
+    height: 30,
+    paddingLeft: 5,
+    // margin: 0,
+    borderWidth: 1,
+    borderRadius: 3
+  },
+  title: {
+    fontFamily: 'Roboto',
+    fontWeight: 700,
+    fontSize: 12
+  },
+  warningTitle: {
+    fontFamily: 'Roboto',
+    fontWeight: 700,
+    fontSize: 12
+  }
+});
+export default CommonInput;
+//# sourceMappingURL=commonInput.js.map

package/lib/module/components/input/commonInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","TextInput","View","CommonText","useTheme","jsx","_jsx","jsxs","_jsxs","CommonInput","title","warningText","type","props","theme","style","styles","container","children","textInput","backgroundColor","colors","background","borderColor","warning","color","text","autoCapitalize","warningTitle","create","flex","padding","height","paddingLeft","borderWidth","borderRadius","fontFamily","fontWeight","fontSize"],"sourceRoot":"../../../../src","sources":["components/input/commonInput.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AAC1D,SAASC,UAAU,QAAQ,kBAAS;AAEpC,SAASC,QAAQ,QAAQ,yBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEhD,MAAMC,WAAW,GAAGA,CAAC;EACnBC,KAAK;EACLC,WAAW;EACXC,IAAI,GAAG,SAAS;EAChB,GAAGC;AACO,CAAC,KAAK;EAChB,MAAM;IAAEC;EAAM,CAAC,GAAGV,QAAQ,CAAC,CAAC;EAC5B,oBACEI,KAAA,CAACN,IAAI;IAACa,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,GAC3BR,KAAK,iBAAIJ,IAAA,CAACH,UAAU;MAACY,KAAK,EAAEC,MAAM,CAACN,KAAM;MAAAQ,QAAA,EAAER;IAAK,CAAa,CAAC,eAC/DJ,IAAA,CAACL,SAAS;MACRc,KAAK,EAAE,CACLC,MAAM,CAACG,SAAS,EAChB;QACEC,eAAe,EAAEN,KAAK,CAACO,MAAM,CAACC,UAAU;QACxCC,WAAW,EAAEZ,WAAW,GACpBG,KAAK,CAACO,MAAM,CAACG,OAAO,GACpBV,KAAK,CAACO,MAAM,CAACT,IAAI,CAAC;QACtBa,KAAK,EAAEd,WAAW,GAAGG,KAAK,CAACO,MAAM,CAACG,OAAO,GAAGV,KAAK,CAACO,MAAM,CAACK;MAC3D,CAAC,CACD;MACFC,cAAc,EAAC,MAAM;MAAA,GACjBd;IAAK,CACV,CAAC,EACDF,WAAW,iBACVL,IAAA,CAACH,UAAU;MACTY,KAAK,EAAE,CAACC,MAAM,CAACY,YAAY,EAAE;QAAEH,KAAK,EAAEX,KAAK,CAACO,MAAM,CAACG;MAAQ,CAAC,CAAE;MAAAN,QAAA,EAE7DP;IAAW,CACF,CACb;EAAA,CACG,CAAC;AAEX,CAAC;AAED,MAAMK,MAAM,GAAGhB,UAAU,CAAC6B,MAAM,CAAC;EAC/BZ,SAAS,EAAE;IACTa,IAAI,EAAE,CAAC;IACPC,OAAO,EAAE;EACX,CAAC;EACDZ,SAAS,EAAE;IACTa,MAAM,EAAE,EAAE;IACVC,WAAW,EAAE,CAAC;IACd;IACAC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAChB,CAAC;EACDzB,KAAK,EAAE;IACL0B,UAAU,EAAE,QAAQ;IACpBC,UAAU,EAAE,GAAG;IACfC,QAAQ,EAAE;EACZ,CAAC;EACDV,YAAY,EAAE;IACZQ,UAAU,EAAE,QAAQ;IACpBC,UAAU,EAAE,GAAG;IACfC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,eAAe7B,WAAW","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["CommonInput"],"sourceRoot":"../../../../src","sources":["components/input/index.tsx"],"mappings":";;AAAA,OAAOA,WAAW,MAAM,kBAAe;AAEvC,SAASA,WAAW","ignoreList":[]}

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

@@ -0,0 +1,14 @@
+"use strict";
+
+export const fontSizeType = {
+  s: {
+    fontSize: 10
+  },
+  m: {
+    fontSize: 12
+  },
+  l: {
+    fontSize: 14
+  }
+};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["fontSizeType","s","fontSize","m","l"],"sourceRoot":"../../../../src","sources":["components/input/types.ts"],"mappings":";;AASA,OAAO,MAAMA,YAA4C,GAAG;EAC1DC,CAAC,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EACnBC,CAAC,EAAE;IAAED,QAAQ,EAAE;EAAG,CAAC;EACnBE,CAAC,EAAE;IAAEF,QAAQ,EAAE;EAAG;AACpB,CAAC","ignoreList":[]}

package/lib/module/components/popOver/commonPopOver.js

@@ -0,0 +1,67 @@
+"use strict";
+
+import { StyleSheet, View } from 'react-native';
+import { CommonText } from "../text/index.js";
+import { useTheme } from "../../hooks/useTheme.js";
+
+// TODO: Pop Over의 위치에 대한 옵션 추가가 필요함.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CommonPopOver = ({
+  type = 'primary',
+  visible,
+  content
+}) => {
+  const {
+    theme
+  } = useTheme();
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: visible && /*#__PURE__*/_jsxs(View, {
+      style: [styles.popOverContainer],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.arrow, {
+          borderBottomColor: theme.colors[type]
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.popOver, {
+          backgroundColor: theme.colors[type]
+        }],
+        children: /*#__PURE__*/_jsx(CommonText, {
+          style: {
+            color: theme.colors.white
+          },
+          size: "s",
+          children: content
+        })
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 1
+  },
+  popOverContainer: {
+    position: 'absolute'
+  },
+  overlay: {
+    flex: 1
+  },
+  arrow: {
+    left: 10,
+    width: 0,
+    height: 0,
+    borderLeftWidth: 8,
+    borderRightWidth: 8,
+    borderBottomWidth: 8,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderBottomColor: 'white'
+  },
+  popOver: {
+    padding: 10,
+    borderRadius: 10
+  }
+});
+export default CommonPopOver;
+//# sourceMappingURL=commonPopOver.js.map

package/lib/module/components/popOver/commonPopOver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","View","CommonText","useTheme","jsx","_jsx","jsxs","_jsxs","CommonPopOver","type","visible","content","theme","style","styles","container","children","popOverContainer","arrow","borderBottomColor","colors","popOver","backgroundColor","color","white","size","create","zIndex","position","overlay","flex","left","width","height","borderLeftWidth","borderRightWidth","borderBottomWidth","borderLeftColor","borderRightColor","padding","borderRadius"],"sourceRoot":"../../../../src","sources":["components/popOver/commonPopOver.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,SAASC,UAAU,QAAQ,kBAAS;AACpC,SAASC,QAAQ,QAAQ,yBAAsB;;AAE/C;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,MAAMC,aAAa,GAAGA,CAAC;EACrBC,IAAI,GAAG,SAAS;EAChBC,OAAO;EACPC;AACkB,CAAC,KAAK;EACxB,MAAM;IAAEC;EAAM,CAAC,GAAGT,QAAQ,CAAC,CAAC;EAC5B,oBACEE,IAAA,CAACJ,IAAI;IAACY,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,EAC3BN,OAAO,iBACNH,KAAA,CAACN,IAAI;MAACY,KAAK,EAAE,CAACC,MAAM,CAACG,gBAAgB,CAAE;MAAAD,QAAA,gBACrCX,IAAA,CAACJ,IAAI;QACHY,KAAK,EAAE,CACLC,MAAM,CAACI,KAAK,EACZ;UACEC,iBAAiB,EAAEP,KAAK,CAACQ,MAAM,CAACX,IAAI;QACtC,CAAC;MACD,CACH,CAAC,eAEFJ,IAAA,CAACJ,IAAI;QACHY,KAAK,EAAE,CACLC,MAAM,CAACO,OAAO,EACd;UACEC,eAAe,EAAEV,KAAK,CAACQ,MAAM,CAACX,IAAI;QACpC,CAAC,CACD;QAAAO,QAAA,eAEFX,IAAA,CAACH,UAAU;UAACW,KAAK,EAAE;YAAEU,KAAK,EAAEX,KAAK,CAACQ,MAAM,CAACI;UAAM,CAAE;UAACC,IAAI,EAAC,GAAG;UAAAT,QAAA,EACvDL;QAAO,CACE;MAAC,CACT,CAAC;IAAA,CACH;EACP,CACG,CAAC;AAEX,CAAC;AAED,MAAMG,MAAM,GAAGd,UAAU,CAAC0B,MAAM,CAAC;EAC/BX,SAAS,EAAE;IACTY,MAAM,EAAE;EACV,CAAC;EACDV,gBAAgB,EAAE;IAChBW,QAAQ,EAAE;EACZ,CAAC;EACDC,OAAO,EAAE;IACPC,IAAI,EAAE;EACR,CAAC;EACDZ,KAAK,EAAE;IACLa,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,eAAe,EAAE,CAAC;IAClBC,gBAAgB,EAAE,CAAC;IACnBC,iBAAiB,EAAE,CAAC;IACpBC,eAAe,EAAE,aAAa;IAC9BC,gBAAgB,EAAE,aAAa;IAC/BnB,iBAAiB,EAAE;EACrB,CAAC;EACDE,OAAO,EAAE;IACPkB,OAAO,EAAE,EAAE;IACXC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAehC,aAAa","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["CommonPopOver"],"sourceRoot":"../../../../src","sources":["components/popOver/index.ts"],"mappings":";;AAAA,OAAOA,aAAa,MAAM,oBAAiB;AAE3C,SAASA,aAAa","ignoreList":[]}

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

@@ -0,0 +1,14 @@
+"use strict";
+
+export const fontSizeType = {
+  s: {
+    fontSize: 10
+  },
+  m: {
+    fontSize: 12
+  },
+  l: {
+    fontSize: 14
+  }
+};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["fontSizeType","s","fontSize","m","l"],"sourceRoot":"../../../../src","sources":["components/popOver/types.tsx"],"mappings":";;AAKA,OAAO,MAAMA,YAA4C,GAAG;EAC1DC,CAAC,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EACnBC,CAAC,EAAE;IAAED,QAAQ,EAAE;EAAG,CAAC;EACnBE,CAAC,EAAE;IAAEF,QAAQ,EAAE;EAAG;AACpB,CAAC","ignoreList":[]}

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

@@ -0,0 +1,3 @@
+// TODO: spinner 구현 필요
+"use strict";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/spinner/index.tsx"],"mappings":"AAAA;AAAA","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.js.map

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

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

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

@@ -0,0 +1,70 @@
+"use strict";
+
+import { useEffect, useRef } from 'react';
+import { Animated, Pressable, StyleSheet } from 'react-native';
+import { sizeType } from "./types.js";
+import { useTheme } from "../../hooks/useTheme.js";
+
+//TODO: react-native-reanimated로 수정필요
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CommonSwitch({
+  type = 'primary',
+  size = 'm',
+  value,
+  onChange,
+  disabled = false,
+  ...props
+}) {
+  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 toggleValue = () => {
+    if (disabled) return;
+    onChange?.(!value);
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    style: [styles.container, {
+      width: containerWidth,
+      height: sizeValue + 2,
+      borderRadius: sizeValue / 2 + 1,
+      borderColor: disabled ? theme.colors.disabled : theme.colors.border
+    }, disabled && styles.disabled],
+    onPress: toggleValue,
+    disabled: disabled,
+    ...props,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        width: thumbSize,
+        height: thumbSize,
+        borderRadius: thumbSize / 2,
+        backgroundColor: value ? theme.colors[type] : theme.colors.disabled,
+        transform: [{
+          translateX: animValue
+        }]
+      }]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    padding: 1,
+    justifyContent: 'center',
+    borderWidth: 1
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+//# sourceMappingURL=commonSwitch.js.map

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

@@ -0,0 +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":[]}

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

@@ -1,3 +1,5 @@
-// TODO: switch 구현 필요
 "use strict";
+
+import CommonSwitch from "./commonSwitch.js";
+export { CommonSwitch };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/switch/index.tsx"],"mappings":"AAAA;AAAA","ignoreList":[]}
+{"version":3,"names":["CommonSwitch"],"sourceRoot":"../../../../src","sources":["components/switch/index.ts"],"mappings":";;AAAA,OAAOA,YAAY,MAAM,mBAAgB;AAEzC,SAASA,YAAY","ignoreList":[]}

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

@@ -1,2 +1,8 @@
 "use strict";
+
+export const sizeType = {
+  s: 16,
+  m: 20,
+  l: 24
+};
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/switch/types.ts"],"mappings":"","ignoreList":[]}
+{"version":3,"names":["sizeType","s","m","l"],"sourceRoot":"../../../../src","sources":["components/switch/types.ts"],"mappings":";;AAKA,OAAO,MAAMA,QAAqC,GAAG;EACnDC,CAAC,EAAE,EAAE;EACLC,CAAC,EAAE,EAAE;EACLC,CAAC,EAAE;AACL,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 } from "./components/index.js";
+export { CommonText, CommonButton, CommonBadge, SafeAreaContainer, ScrollViewContainer, CommonIcon, CommonRating, CommonAvatar, CommonImage, CheckBox, CommonHeader, CommonCard, FoldableCard, LinearProgressBar, CircularProgressBar, CommonInput, CommonPopOver, CommonSwitch } 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","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,QACd,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","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,QACP,uBAAc;AACrB,SAASC,aAAa,QAAQ,0BAAuB","ignoreList":[]}

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

@@ -10,4 +10,7 @@ export { CheckBox } from './checkBox/index.js';
 export { CommonHeader } from './header/index.js';
 export { CommonCard, FoldableCard } from './card/index.js';
 export { LinearProgressBar, CircularProgressBar } from './progressBar/index.js';
+export { CommonInput } from './input/index.js';
+export { CommonPopOver } from './popOver/index.js';
+export { CommonSwitch } from './switch/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,MAAM,mBAAU,CAAC;AACxC,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"}
+{"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,MAAM,mBAAU,CAAC;AACxC,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"}

package/lib/typescript/src/components/input/commonInput.d.ts

@@ -0,0 +1,4 @@
+import { type InputProps } from './types.js';
+declare const CommonInput: ({ title, warningText, type, ...props }: InputProps) => import("react").JSX.Element;
+export default CommonInput;
+//# sourceMappingURL=commonInput.d.ts.map

package/lib/typescript/src/components/input/commonInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commonInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/commonInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,YAAS,CAAC;AAG1C,QAAA,MAAM,WAAW,GAAI,wCAKlB,UAAU,gCA4BZ,CAAC;AA0BF,eAAe,WAAW,CAAC"}

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { type TextInputProps, type TextStyle, type ViewStyle } from 'react-native';
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+export declare const fontSizeType: Record<SizeVariant, TextStyle>;
+export interface InputProps extends TextInputProps {
+    title?: string;
+    type?: Variant;
+    size?: SizeVariant;
+    textStyle?: TextStyle;
+    containerStyle?: ViewStyle;
+    warningText?: string;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;AACvC,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAIvD,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/lib/typescript/src/components/popOver/commonPopOver.d.ts

@@ -0,0 +1,4 @@
+import { type CommonPopOverProps } from './types.js';
+declare const CommonPopOver: ({ type, visible, content, }: CommonPopOverProps) => import("react").JSX.Element;
+export default CommonPopOver;
+//# sourceMappingURL=commonPopOver.d.ts.map

package/lib/typescript/src/components/popOver/commonPopOver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commonPopOver.d.ts","sourceRoot":"","sources":["../../../../../src/components/popOver/commonPopOver.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,YAAS,CAAC;AAKlD,QAAA,MAAM,aAAa,GAAI,6BAIpB,kBAAkB,gCA+BpB,CAAC;AA6BF,eAAe,aAAa,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/popOver/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,oBAAiB,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,12 @@
+import { type TextStyle, type ViewProps } from 'react-native';
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+export declare const fontSizeType: Record<SizeVariant, TextStyle>;
+export interface CommonPopOverProps extends ViewProps {
+    type?: Variant;
+    size?: SizeVariant;
+    visible: boolean;
+    content: string;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/popOver/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,KAAK,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;AACvC,KAAK,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAIvD,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB"}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/spinner/index.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=types.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+import { type SwitchProps } from './types.js';
+export default function CommonSwitch({ type, size, value, onChange, disabled, ...props }: SwitchProps): import("react").JSX.Element;
+//# sourceMappingURL=commonSwitch.d.ts.map

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

@@ -0,0 +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"}

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

@@ -1 +1,3 @@
+import CommonSwitch from './commonSwitch.js';
+export { CommonSwitch };
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1 +1,12 @@
+import { type PressableProps } from 'react-native';
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+export declare const sizeType: Record<SizeVariant, number>;
+export interface SwitchProps extends PressableProps {
+    type?: Variant;
+    size?: SizeVariant;
+    value: boolean;
+    onChange?: (value: boolean) => void;
+}
+export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/switch/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,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,WAAY,SAAQ,cAAc;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC"}

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, } from './components/index.js';
+export { CommonText, CommonButton, CommonBadge, SafeAreaContainer, ScrollViewContainer, CommonIcon, CommonRating, CommonAvatar, CommonImage, CheckBox, CommonHeader, CommonCard, FoldableCard, LinearProgressBar, CircularProgressBar, CommonInput, CommonPopOver, CommonSwitch, } 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,GACpB,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,GACb,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.0",
+  "version": "0.1.1",
   "description": "ui library for react native",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/index.ts

@@ -10,3 +10,6 @@ export { CheckBox } from './checkBox';
 export { CommonHeader } from './header';
 export { CommonCard, FoldableCard } from './card';
 export { LinearProgressBar, CircularProgressBar } from './progressBar';
+export { CommonInput } from './input';
+export { CommonPopOver } from './popOver';
+export { CommonSwitch } from './switch';

package/src/components/input/commonInput.tsx

@@ -0,0 +1,65 @@
+import { StyleSheet, TextInput, View } from 'react-native';
+import { CommonText } from '../text';
+import { type InputProps } from './types';
+import { useTheme } from '../../hooks/useTheme';
+
+const CommonInput = ({
+  title,
+  warningText,
+  type = 'primary',
+  ...props
+}: InputProps) => {
+  const { theme } = useTheme();
+  return (
+    <View style={styles.container}>
+      {title && <CommonText style={styles.title}>{title}</CommonText>}
+      <TextInput
+        style={[
+          styles.textInput,
+          {
+            backgroundColor: theme.colors.background,
+            borderColor: warningText
+              ? theme.colors.warning
+              : theme.colors[type],
+            color: warningText ? theme.colors.warning : theme.colors.text,
+          },
+        ]}
+        autoCapitalize="none"
+        {...props}
+      />
+      {warningText && (
+        <CommonText
+          style={[styles.warningTitle, { color: theme.colors.warning }]}
+        >
+          {warningText}
+        </CommonText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 5,
+  },
+  textInput: {
+    height: 30,
+    paddingLeft: 5,
+    // margin: 0,
+    borderWidth: 1,
+    borderRadius: 3,
+  },
+  title: {
+    fontFamily: 'Roboto',
+    fontWeight: 700,
+    fontSize: 12,
+  },
+  warningTitle: {
+    fontFamily: 'Roboto',
+    fontWeight: 700,
+    fontSize: 12,
+  },
+});
+
+export default CommonInput;

package/src/components/input/index.tsx

@@ -0,0 +1,3 @@
+import CommonInput from './commonInput';
+
+export { CommonInput };

package/src/components/input/types.ts

@@ -0,0 +1,23 @@
+import {
+  type TextInputProps,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export const fontSizeType: Record<SizeVariant, TextStyle> = {
+  s: { fontSize: 10 },
+  m: { fontSize: 12 },
+  l: { fontSize: 14 },
+};
+
+export interface InputProps extends TextInputProps {
+  title?: string;
+  type?: Variant;
+  size?: SizeVariant;
+  textStyle?: TextStyle;
+  containerStyle?: ViewStyle;
+  warningText?: string;
+}

package/src/components/popOver/commonPopOver.tsx

@@ -0,0 +1,71 @@
+import { StyleSheet, View } from 'react-native';
+import { type CommonPopOverProps } from './types';
+import { CommonText } from '../text';
+import { useTheme } from '../../hooks/useTheme';
+
+// TODO: Pop Over의 위치에 대한 옵션 추가가 필요함.
+const CommonPopOver = ({
+  type = 'primary',
+  visible,
+  content,
+}: CommonPopOverProps) => {
+  const { theme } = useTheme();
+  return (
+    <View style={styles.container}>
+      {visible && (
+        <View style={[styles.popOverContainer]}>
+          <View
+            style={[
+              styles.arrow,
+              {
+                borderBottomColor: theme.colors[type],
+              },
+            ]}
+          />
+
+          <View
+            style={[
+              styles.popOver,
+              {
+                backgroundColor: theme.colors[type],
+              },
+            ]}
+          >
+            <CommonText style={{ color: theme.colors.white }} size="s">
+              {content}
+            </CommonText>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 1,
+  },
+  popOverContainer: {
+    position: 'absolute',
+  },
+  overlay: {
+    flex: 1,
+  },
+  arrow: {
+    left: 10,
+    width: 0,
+    height: 0,
+    borderLeftWidth: 8,
+    borderRightWidth: 8,
+    borderBottomWidth: 8,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderBottomColor: 'white',
+  },
+  popOver: {
+    padding: 10,
+    borderRadius: 10,
+  },
+});
+
+export default CommonPopOver;

package/src/components/popOver/index.ts

@@ -0,0 +1,3 @@
+import CommonPopOver from './commonPopOver';
+
+export { CommonPopOver };

package/src/components/popOver/types.tsx

@@ -0,0 +1,17 @@
+import { type TextStyle, type ViewProps } from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export const fontSizeType: Record<SizeVariant, TextStyle> = {
+  s: { fontSize: 10 },
+  m: { fontSize: 12 },
+  l: { fontSize: 14 },
+};
+
+export interface CommonPopOverProps extends ViewProps {
+  type?: Variant;
+  size?: SizeVariant;
+  visible: boolean;
+  content: string;
+}

package/src/components/spinner/index.tsx

@@ -0,0 +1 @@
+// TODO: spinner 구현 필요

package/src/components/switch/commonSwitch.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Pressable, StyleSheet } from 'react-native';
+import { type SwitchProps, sizeType } from './types';
+import { useTheme } from '../../hooks/useTheme';
+
+//TODO: react-native-reanimated로 수정필요
+export default function CommonSwitch({
+  type = 'primary',
+  size = 'm',
+  value,
+  onChange,
+  disabled = false,
+  ...props
+}: 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 toggleValue = () => {
+    if (disabled) return;
+    onChange?.(!value);
+  };
+
+  return (
+    <Pressable
+      style={[
+        styles.container,
+        {
+          width: containerWidth,
+          height: sizeValue + 2,
+          borderRadius: sizeValue / 2 + 1,
+          borderColor: disabled ? theme.colors.disabled : theme.colors.border,
+        },
+        disabled && styles.disabled,
+      ]}
+      onPress={toggleValue}
+      disabled={disabled}
+      {...props}
+    >
+      <Animated.View
+        style={[
+          {
+            width: thumbSize,
+            height: thumbSize,
+            borderRadius: thumbSize / 2,
+            backgroundColor: value ? theme.colors[type] : theme.colors.disabled,
+            transform: [{ translateX: animValue }],
+          },
+        ]}
+      />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 1,
+    justifyContent: 'center',
+    borderWidth: 1,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});

package/src/components/switch/index.ts

@@ -0,0 +1,3 @@
+import CommonSwitch from './commonSwitch';
+
+export { CommonSwitch };

package/src/components/switch/types.ts

@@ -0,0 +1,17 @@
+import { type PressableProps } from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export const sizeType: Record<SizeVariant, number> = {
+  s: 16,
+  m: 20,
+  l: 24,
+};
+
+export interface SwitchProps extends PressableProps {
+  type?: Variant;
+  size?: SizeVariant;
+  value: boolean;
+  onChange?: (value: boolean) => void;
+}

package/src/index.tsx

@@ -14,5 +14,8 @@ export {
   FoldableCard,
   LinearProgressBar,
   CircularProgressBar,
+  CommonInput,
+  CommonPopOver,
+  CommonSwitch,
 } from './components';
 export { ThemeProvider } from './theme/themeProvider';

package/src/components/switch/index.tsx

@@ -1 +0,0 @@
-// TODO: switch 구현 필요