@kukkim/react-native-ui 0.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/typescript/src/components/text/commonText.d.ts

@@ -0,0 +1,4 @@
+import { type CommonTextProps } from './types.js';
+declare const CommonText: ({ size, children, style }: CommonTextProps) => import("react").JSX.Element;
+export default CommonText;
+//# sourceMappingURL=commonText.d.ts.map

package/lib/typescript/src/components/text/commonText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commonText.d.ts","sourceRoot":"","sources":["../../../../../src/components/text/commonText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,eAAe,EAAgB,MAAM,YAAS,CAAC;AAG7D,QAAA,MAAM,UAAU,GAAI,2BAAiC,eAAe,gCAcnE,CAAC;AAQF,eAAe,UAAU,CAAC"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/text/types.ts"],"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,eAAgB,SAAQ,SAAS;IAChD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/lib/typescript/src/hooks/useTheme.d.ts

@@ -0,0 +1,5 @@
+export declare function useTheme(): {
+    theme: import("../theme/themes.js").AppTheme;
+    mode: import("../theme/themes.js").ThemeMode;
+};
+//# sourceMappingURL=useTheme.d.ts.map

package/lib/typescript/src/hooks/useTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAGA,wBAAgB,QAAQ;;;EAQvB"}

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

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

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

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

package/lib/typescript/src/theme/color.d.ts

@@ -0,0 +1,8 @@
+export declare const palette: {
+    blue500: string;
+    gray100: string;
+    gray900: string;
+    red500: string;
+    yellow500: string;
+};
+//# sourceMappingURL=color.d.ts.map

package/lib/typescript/src/theme/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../src/theme/color.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC"}

package/lib/typescript/src/theme/style.d.ts

@@ -0,0 +1,15 @@
+export declare const spacing: {
+    none: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export declare const radius: {
+    sm: number;
+    md: number;
+    lg: number;
+    full: number;
+};
+//# sourceMappingURL=style.d.ts.map

package/lib/typescript/src/theme/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../src/theme/style.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC"}

package/lib/typescript/src/theme/themeProvider.d.ts

@@ -0,0 +1,13 @@
+import { type PropsWithChildren } from 'react';
+import { type AppTheme, type ThemeMode } from './themes.js';
+type ThemeContextValue = {
+    theme: AppTheme;
+    mode: ThemeMode;
+};
+export declare const ThemeContext: import("react").Context<ThemeContextValue | null>;
+type Props = PropsWithChildren<{
+    mode?: ThemeMode;
+}>;
+export declare function ThemeProvider({ children, mode }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=themeProvider.d.ts.map

package/lib/typescript/src/theme/themeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/themeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,iBAAiB,EAAW,MAAM,OAAO,CAAC;AACvE,OAAO,EAAyB,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,aAAU,CAAC;AAEhF,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,QAAQ,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E,KAAK,KAAK,GAAG,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC,CAAC;AAEH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAc,EAAE,EAAE,KAAK,+BAUhE"}

package/lib/typescript/src/theme/themes.d.ts

@@ -0,0 +1,25 @@
+import { spacing, radius } from './style.js';
+export type ThemeMode = 'light' | 'dark';
+export interface ThemeColors {
+    background: string;
+    surface: string;
+    text: string;
+    white: string;
+    primary: string;
+    secondary: string;
+    warning: string;
+    danger: string;
+    border: string;
+    disabled: string;
+}
+export type ThemeSpacing = typeof spacing;
+export type ThemeRadius = typeof radius;
+export interface AppTheme {
+    mode: ThemeMode;
+    colors: ThemeColors;
+    spacing: ThemeSpacing;
+    radius: ThemeRadius;
+}
+export declare const lightTheme: AppTheme;
+export declare const darkTheme: AppTheme;
+//# sourceMappingURL=themes.d.ts.map

package/lib/typescript/src/theme/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../../src/theme/themes.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,YAAS,CAAC;AAE1C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IAEf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,OAAO,CAAC;AAC1C,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC;AAExC,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,QAkBxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,QAkBvB,CAAC"}

package/package.json

@@ -0,0 +1,170 @@
+{
+  "name": "@kukkim/react-native-ui",
+  "version": "0.1.0",
+  "description": "ui library for react native",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace @kukkim/react-native-ui-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version",
+    "icons:build": "svgr --native --typescript --out-dir src/components/icon src/assets/icons"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KukKim/react-native-ui.git"
+  },
+  "author": "kukkim <kukkim89@gmail.com> (https://github.com/KukKim)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/KukKim/react-native-ui/issues"
+  },
+  "homepage": "https://github.com/KukKim/react-native-ui#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^21.0.2",
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@jest/globals": "^29.7.0",
+    "@react-native/babel-preset": "0.85.0",
+    "@react-native/eslint-config": "0.85.0",
+    "@react-native/jest-preset": "0.85.0",
+    "@release-it/conventional-changelog": "^11.0.1",
+    "@svgr/cli": "^8.1.0",
+    "@types/react": "^19.2.0",
+    "commitlint": "^21.0.2",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "jest": "^29.7.0",
+    "lefthook": "^2.1.9",
+    "prettier": "^3.8.3",
+    "react": "19.2.0",
+    "react-native": "0.83.6",
+    "react-native-builder-bob": "^0.42.1",
+    "release-it": "^20.2.0",
+    "turbo": "^2.9.16",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-svg": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "@react-native/jest-preset",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.62.2"
+  },
+  "dependencies": {
+    "react-native-safe-area-context": "^5.8.0",
+    "react-native-svg": "^15.15.5"
+  }
+}

package/src/assets/icons/arrow-down-to-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-to-line-icon lucide-arrow-down-to-line"><path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M19 21H5"/></svg>

package/src/assets/icons/arrow-down-wide-narrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-wide-narrow-icon lucide-arrow-down-wide-narrow"><path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="M11 4h10"/><path d="M11 8h7"/><path d="M11 12h4"/></svg>

package/src/assets/icons/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-icon lucide-arrow-left"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>

package/src/assets/icons/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>

package/src/assets/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>

package/src/assets/icons/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>

package/src/assets/icons/rotate-cw.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-cw-icon lucide-rotate-cw"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>

package/src/assets/icons/square-arrow-out-up-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-arrow-out-up-right-icon lucide-square-arrow-out-up-right"><path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/><path d="m21 3-9 9"/><path d="M15 3h6v6"/></svg>

package/src/assets/icons/star-empty.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star-icon lucide-star"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>

package/src/assets/icons/star-full.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star-icon lucide-star"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>

package/src/assets/icons/star-half.svg

@@ -0,0 +1,25 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+>
+  <defs>
+    <clipPath id="half">
+      <rect x="0" y="0" width="12" height="24" />
+    </clipPath>
+  </defs>
+  <path
+    clip-path="url(#half)"
+    fill="currentColor"
+    d="M12 2.5l2.93 5.94 6.56.96-4.75 4.63 1.12 6.53L12 17.5l-5.86 3.06 1.12-6.53L2.51 9.4l6.56-.96L12 2.5z"
+  />
+  <path
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M12 2.5l2.93 5.94 6.56.96-4.75 4.63 1.12 6.53L12 17.5l-5.86 3.06 1.12-6.53L2.51 9.4l6.56-.96L12 2.5z"
+  />
+</svg>

package/src/assets/icons/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>

package/src/components/avatar/index.tsx

@@ -0,0 +1,58 @@
+import { StyleSheet, View } from 'react-native';
+import { CommonText } from '../text';
+import { CommonImage } from '../image';
+import {
+  type CommonAvatarProps,
+  fontSizeType,
+  sizeType,
+  imageSizeType,
+} from './types';
+import { useTheme } from '../../hooks/useTheme';
+
+export const CommonAvatar = ({
+  type = 'primary',
+  size = 'm',
+  title,
+  source,
+  ...props
+}: CommonAvatarProps) => {
+  const { theme } = useTheme();
+  return (
+    <View
+      style={[
+        styles.container,
+        sizeType[size],
+        { backgroundColor: theme.colors[type] },
+      ]}
+      {...props}
+    >
+      {source ? (
+        <CommonImage
+          style={[styles.container, imageSizeType[size]]}
+          source={source}
+        />
+      ) : (
+        <CommonText
+          style={[
+            styles.innerText,
+            fontSizeType[size],
+            { color: theme.colors.white },
+          ]}
+        >
+          {title ?? 'None'}
+        </CommonText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  innerText: {
+    fontSize: 20,
+  },
+});

package/src/components/avatar/types.ts

@@ -0,0 +1,38 @@
+import {
+  type TextStyle,
+  type ViewProps,
+  type ViewStyle,
+  type ImageStyle,
+  type ImageSource,
+} from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export const sizeType: Record<SizeVariant, ViewStyle> = {
+  s: { width: 16, height: 16, borderRadius: 8 },
+  m: { width: 20, height: 20, borderRadius: 10 },
+  l: { width: 24, height: 24, borderRadius: 12 },
+};
+// TODO: sizeType과 동일한 코드인데 type때문에 코드 중복이 발생함 수정필요.
+export const imageSizeType: Record<SizeVariant, ImageStyle> = {
+  s: { width: 16, height: 16, borderRadius: 8 },
+  m: { width: 20, height: 20, borderRadius: 10 },
+  l: { width: 24, height: 24, borderRadius: 12 },
+};
+
+export const fontSizeType: Record<SizeVariant, TextStyle> = {
+  s: { fontSize: 10 },
+  m: { fontSize: 12 },
+  l: { fontSize: 14 },
+};
+
+export interface AvatarProps extends ViewProps {
+  type?: Variant;
+  size?: SizeVariant;
+}
+
+export interface CommonAvatarProps extends AvatarProps {
+  title?: string;
+  source?: ImageSource;
+}

package/src/components/badge/commonBadge.tsx

@@ -0,0 +1,50 @@
+import { StyleSheet, View } from 'react-native';
+import { CommonText } from '../text';
+import { type CommonBadgeProps, fontSizeType, sizeType } from './types';
+import { useTheme } from '../../hooks/useTheme';
+
+// TODO: 부모컴포넌트의 정렬기준에 따라 컴포넌트의 형태가 변함.
+const CommonBadge = ({
+  type = 'primary',
+  size = 'm',
+  typeText,
+  ...props
+}: CommonBadgeProps) => {
+  const { theme } = useTheme();
+  return (
+    <View
+      style={[
+        styles.container,
+        sizeType[size],
+        { backgroundColor: theme.colors[type] },
+      ]}
+      {...props}
+    >
+      {typeText && (
+        <CommonText
+          style={[
+            styles.innerText,
+            fontSizeType[size],
+            { color: theme.colors.white },
+          ]}
+        >
+          {typeText}
+        </CommonText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    alignSelf: 'auto',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  innerText: {
+    fontSize: 20,
+  },
+});
+
+export default CommonBadge;

package/src/components/badge/index.ts

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

package/src/components/badge/types.ts

@@ -0,0 +1,36 @@
+import { type TextStyle, type ViewProps, type ViewStyle } from 'react-native';
+
+type Variant = 'primary' | 'secondary';
+type SizeVariant = 's' | 'm' | 'l';
+
+export const sizeType: Record<SizeVariant, ViewStyle> = {
+  s: { minWidth: 18, height: 18, borderRadius: 8, paddingHorizontal: 4 },
+  m: { minWidth: 20, height: 20, borderRadius: 10, paddingHorizontal: 4 },
+  l: { minWidth: 22, height: 22, borderRadius: 12, paddingHorizontal: 4 },
+};
+
+export const expandedSizeType: Record<SizeVariant, ViewStyle> = {
+  s: { minWidth: 32, height: 16 },
+  m: { minWidth: 36, height: 20 },
+  l: { minWidth: 40, height: 24 },
+};
+
+export const fontSizeType: Record<SizeVariant, TextStyle> = {
+  s: { fontSize: 10 },
+  m: { fontSize: 12 },
+  l: { fontSize: 14 },
+};
+
+export interface BadgeProps extends ViewProps {
+  type?: Variant;
+  size?: SizeVariant;
+}
+
+export interface CommonBadgeProps extends BadgeProps {
+  typeText?: string;
+}
+
+export interface NumberBadgeProps extends BadgeProps {
+  number: number;
+  maxNumber?: number;
+}

package/src/components/button/commonButton.tsx

@@ -0,0 +1,43 @@
+import { Pressable, StyleSheet } from 'react-native';
+import { CommonText } from '../text';
+import { type CommonButtonProps, fontSizeType } from './types';
+import { useTheme } from '../../hooks/useTheme';
+
+const CommonButton = ({
+  title,
+  type = 'primary',
+  size = 'm',
+  disabled,
+  ...props
+}: CommonButtonProps) => {
+  const { theme } = useTheme();
+  return (
+    <Pressable
+      style={[
+        styles.container,
+        disabled
+          ? { backgroundColor: theme.colors[type] }
+          : { backgroundColor: theme.colors[type] },
+      ]}
+      {...props}
+    >
+      <CommonText
+        style={[fontSizeType[size], { color: theme.colors.white }]}
+        isInner={true}
+      >
+        {title}
+      </CommonText>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 5,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 3,
+  },
+});
+
+export default CommonButton;