@jbpark/ui-kit 1.0.0

package/README.md

@@ -0,0 +1,267 @@
+# @jbpark/ui-kit
+
+현대적이고 재사용 가능한 React UI 컴포넌트 라이브러리입니다. Atomic Design 패턴을 따라 체계적으로 구성되어 있으며, TypeScript와 Tailwind CSS를 기반으로 구축되었습니다.
+
+## 📦 패키지 정보
+
+- **패키지명**: `@jbpark/ui-kit`
+- **라이선스**: MIT
+- **패키지 매니저**: npm
+- **Node.js 요구사항**: >= 18
+- **React 요구사항**: ^18.0.0 || ^19.0.0
+
+## 🏗 아키텍처
+
+### Atomic Design 패턴
+
+이 라이브러리는 Atomic Design 방법론을 따라 컴포넌트를 계층적으로 구성합니다:
+
+```
+src/
+├── components/
+│   ├── atoms/        # 🧬 원자 - 기본 UI 구성 요소
+│   ├── molecules/    # 🔬 분자 - 원자들의 조합
+│   ├── organisms/    # 🦠 유기체 - 복잡한 UI 블록
+│   └── templates/    # 📄 템플릿 - 페이지 레이아웃
+├── core/             # ⚙️ 핵심 UI 로직 (Radix UI 기반)
+├── lib/
+│   ├── enums/        # 📋 열거형 타입
+│   ├── hooks/        # 🎣 커스텀 훅
+│   └── utils/        # 🛠 유틸리티 함수
+├── globals.css       # 🎨 전역 스타일
+└── index.ts          # 📥 패키지 진입점
+```
+
+## 🧬 Atoms (원자)
+
+기본적인 UI 구성 요소들
+
+| 컴포넌트        | 설명                      | 하위 컴포넌트                        |
+| --------------- | ------------------------- | ------------------------------------ |
+| **Button**      | 다양한 스타일의 버튼      | -                                    |
+| **Checkbox**    | 체크박스 및 그룹 체크박스 | `Group`                              |
+| **FloatButton** | 플로팅 버튼               | `BackTop`                            |
+| **Input**       | 입력 필드 컴포넌트        | `Search`, `TextArea`                 |
+| **Progress**    | 진행률 표시 컴포넌트      | -                                    |
+| **Skeleton**    | 로딩 스켈레톤             | `Button`, `Node`                     |
+| **Spin**        | 로딩 스피너               | -                                    |
+| **Switch**      | 토글 스위치               | -                                    |
+| **Typography**  | 텍스트 컴포넌트           | `Link`, `Paragraph`, `Text`, `Title` |
+
+## 🔬 Molecules (분자)
+
+여러 원자들이 결합된 복합 컴포넌트들
+
+| 컴포넌트     | 설명                     | 하위 컴포넌트 |
+| ------------ | ------------------------ | ------------- |
+| **Collapse** | 접을 수 있는 컨텐츠 영역 | -             |
+| **Dropdown** | 드롭다운 메뉴            | -             |
+| **Marquees** | 무한 스크롤 마키         | `Item`        |
+| **Menu**     | 네비게이션 메뉴          | -             |
+| **Reveals**  | 애니메이션 리빌          | `Item`        |
+| **Space**    | 간격 조정 컴포넌트       | -             |
+
+## 🦠 Organisms (유기체)
+
+복잡한 UI 섹션들
+
+| 컴포넌트   | 설명                    | 하위 컴포넌트 |
+| ---------- | ----------------------- | ------------- |
+| **Drawer** | 사이드 드로어           | -             |
+| **List**   | 리스트 및 리스트 아이템 | `Item`        |
+| **Modal**  | 모달 다이얼로그         | -             |
+| **Swiper** | 슬라이더 컴포넌트       | `Slide`       |
+
+## 📄 Templates (템플릿)
+
+페이지 레이아웃 템플릿
+
+| 컴포넌트   | 설명                 | 하위 컴포넌트                          |
+| ---------- | -------------------- | -------------------------------------- |
+| **Layout** | 전체 페이지 레이아웃 | `Header`, `Sider`, `Content`, `Footer` |
+
+## 🛠 핵심 기능
+
+### Core 모듈
+
+Radix UI 기반의 접근성 우선 핵심 컴포넌트들:
+
+- `accordion.tsx` - 아코디언 컴포넌트 (Radix UI 기반)
+- `button.tsx` - 버튼 컴포넌트 (class-variance-authority로 variants 관리)
+- `dialog.tsx` - 다이얼로그 컴포넌트 (Radix UI 기반)
+- `drawer.tsx` - 드로어 컴포넌트 (Vaul 기반)
+- `progress.tsx` - 진행률 컴포넌트 (Radix UI 기반)
+- `skeleton.tsx` - 스켈레톤 컴포넌트
+- `switch.tsx` - 스위치 컴포넌트 (Radix UI 기반)
+
+### 유틸리티
+
+- **`cn()`** - 클래스명 병합 유틸리티 (clsx + tailwind-merge)
+- **`TEXT_LEVELS`** - 타이포그래피 레벨 상수
+
+## 🚀 설치 및 사용법
+
+### 설치
+
+```bash
+# npm
+npm install @jbpark/ui-kit
+
+# yarn
+yarn add @jbpark/ui-kit
+
+# pnpm
+pnpm add @jbpark/ui-kit
+```
+
+### 기본 사용법
+
+```tsx
+import { Button, Layout, Typography } from '@jbpark/ui-kit';
+
+import '@jbpark/ui-kit/style.css';
+
+function App() {
+  return (
+    <Layout>
+      <Typography.Title>안녕하세요!</Typography.Title>
+      <Button variant="primary">클릭하세요</Button>
+    </Layout>
+  );
+}
+```
+
+### 개별 컴포넌트 import
+
+```tsx
+// Typography 컴포넌트
+// Menu 컴포넌트
+import { Menu } from '@jbpark/ui-kit/Menu';
+// Reveals 컴포넌트
+import { Reveals } from '@jbpark/ui-kit/Reveals';
+import { Typography } from '@jbpark/ui-kit/Typography';
+```
+
+### 유틸리티 및 열거형 import
+
+```tsx
+// 유틸리티 함수
+// 열거형 상수
+import { TEXT_LEVELS } from '@jbpark/ui-kit/enums';
+import { cn } from '@jbpark/ui-kit/utils';
+```
+
+### 스타일 import
+
+```tsx
+// 전역 스타일 (필수)
+import '@jbpark/ui-kit/style.css';
+```
+
+## 🎨 스타일링
+
+### Tailwind CSS
+
+- **Tailwind CSS 4** 기반
+- **PostCSS** 처리
+- **class-variance-authority**로 컴포넌트 variants 관리
+- **tailwind-merge**로 클래스 충돌 해결
+
+### 커스터마이징
+
+```tsx
+// 전역 스타일 import (필수)
+import '@jbpark/ui-kit/style.css';
+
+// tailwind.config.js에서 테마 커스터마이징
+// Tailwind CSS 4를 사용하는 경우 PostCSS 설정 필요
+```
+
+## 📚 주요 의존성
+
+### 핵심 라이브러리
+
+- **React 19.1.0** - UI 라이브러리
+- **TypeScript 5.9.2** - 정적 타입 체크
+- **Tailwind CSS 4.1.12** - 유틸리티 CSS 프레임워크
+
+### UI 라이브러리
+
+- **Radix UI** - 접근성 우선 헤드리스 UI 컴포넌트
+  - `@radix-ui/react-accordion` (1.2.12)
+  - `@radix-ui/react-dialog` (1.1.15)
+  - `@radix-ui/react-progress` (1.1.7)
+  - `@radix-ui/react-slot` (1.2.3)
+  - `@radix-ui/react-switch` (1.2.6)
+- **Lucide React 0.542.0** - 아이콘 라이브러리
+- **Motion 12.23.12** - 애니메이션 라이브러리
+- **Swiper 11.2.10** - 터치 슬라이더
+- **Vaul 1.1.2** - 드로어 컴포넌트
+
+### 유틸리티
+
+- **class-variance-authority 0.7.1** - 컴포넌트 variants 관리
+- **clsx 2.1.1** - 조건부 클래스명
+- **tailwind-merge 3.3.1** - Tailwind 클래스 병합
+- **react-use 17.6.0** - React 훅 모음
+- **@uidotdev/usehooks 2.4.1** - 추가 React 훅
+- **uuid 11.1.0** - 고유 ID 생성
+- **@gsap/react 2.1.2** - GSAP 애니메이션
+- **tw-animate-css 1.3.7** - Tailwind 애니메이션
+
+## 🔧 개발
+
+이 패키지는 모노레포(Turborepo) 환경에서 개발됩니다.
+
+### 타입 체크
+
+```bash
+npm run check-types
+```
+
+### 린팅
+
+```bash
+npm run lint
+```
+
+### 빌드
+
+```bash
+npm run build
+```
+
+### 컴포넌트 생성
+
+```bash
+npm run generate:component
+```
+
+## 📦 패키지 Exports
+
+이 패키지는 다음과 같은 모듈들을 export합니다:
+
+- `@jbpark/ui-kit` - 메인 패키지 (모든 컴포넌트)
+- `@jbpark/ui-kit/Typography` - Typography 컴포넌트
+- `@jbpark/ui-kit/Menu` - Menu 컴포넌트
+- `@jbpark/ui-kit/Reveals` - Reveals 컴포넌트
+- `@jbpark/ui-kit/utils` - 유틸리티 함수 (`cn` 등)
+- `@jbpark/ui-kit/enums` - 열거형 상수 (`TEXT_LEVELS` 등)
+- `@jbpark/ui-kit/style.css` - 전역 스타일 (필수)
+
+## 🤝 기여하기
+
+1. 이 저장소를 포크합니다
+2. 새로운 기능 브랜치를 생성합니다 (`git checkout -b feature/amazing-component`)
+3. 컴포넌트를 Atomic Design 패턴에 따라 적절한 폴더에 배치합니다
+4. TypeScript 타입을 정의합니다
+5. Storybook 스토리를 작성합니다
+6. 변경사항을 커밋합니다 (`git commit -m 'Add amazing component'`)
+7. 브랜치에 푸시합니다 (`git push origin feature/amazing-component`)
+8. Pull Request를 생성합니다
+
+## 📄 라이선스
+
+MIT 라이선스 하에 있습니다.
+
+---

package/dist/Menu.cjs

@@ -0,0 +1,10 @@
+'use client';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+const require_src = require('./src-Dvkx0I-F.cjs');
+require('./utils-8r5MlYq5.cjs');
+require('./Typography-B3MWBAA6.cjs');
+require('./Reveals-BIKKnQpn.cjs');
+
+exports.default = require_src.Menu_default;
+exports.findKey = require_src.findKey;

package/dist/Menu.d.cts

@@ -0,0 +1,2 @@
+import { a as findKey, i as MenuProps, n as Menu, r as MenuItem, t as ClickEventHandler } from "./index-D1Bkn0Xy.cjs";
+export { ClickEventHandler, MenuItem, MenuProps, Menu as default, findKey };

package/dist/Menu.d.mts

@@ -0,0 +1,2 @@
+import { a as findKey, i as MenuProps, n as Menu, r as MenuItem, t as ClickEventHandler } from "./index-BO7hcWjo.mjs";
+export { ClickEventHandler, MenuItem, MenuProps, Menu as default, findKey };

package/dist/Menu.mjs

@@ -0,0 +1,8 @@
+'use client';
+
+import { l as Menu_default, u as findKey } from "./src-DlEgA3c9.mjs";
+import "./utils-DEenfsJ-.mjs";
+import "./Typography-LYvEW-c8.mjs";
+import "./Reveals-BpnYZJUk.mjs";
+
+export { Menu_default as default, findKey };

package/dist/Reveals-BIKKnQpn.cjs

@@ -0,0 +1,119 @@
+const require_src = require('./src-Dvkx0I-F.cjs');
+const require_utils = require('./utils-8r5MlYq5.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let motion_react = require("motion/react");
+
+//#region src/components/molecules/Reveals/Item/index.tsx
+const effectVariants = {
+	fadeIn: {
+		offscreen: { opacity: 0 },
+		onscreen: { opacity: 1 }
+	},
+	fadeInUp: {
+		offscreen: {
+			opacity: 0,
+			y: 50
+		},
+		onscreen: {
+			opacity: 1,
+			y: 0
+		}
+	},
+	slideInUp: {
+		offscreen: {
+			opacity: 1,
+			y: 50
+		},
+		onscreen: {
+			opacity: 1,
+			y: 0
+		}
+	}
+};
+const Item = ({ effect = "fadeInUp", children, once, viewport, variants, duration, delay, transition, className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.motion.div, {
+		initial: "offscreen",
+		whileInView: "onscreen",
+		viewport: {
+			once,
+			...viewport
+		},
+		variants: {
+			offscreen: {
+				...effectVariants[effect].offscreen,
+				...variants?.offscreen,
+				transition: { duration: 0 }
+			},
+			onscreen: {
+				...effectVariants[effect].onscreen,
+				...variants?.onscreen,
+				transition: {
+					duration,
+					ease: "easeOut",
+					delay,
+					...transition
+				}
+			}
+		},
+		className: require_utils.cn("flex h-full items-center justify-center", className),
+		...props,
+		children
+	});
+};
+var Item_default = Item;
+
+//#endregion
+//#region src/components/molecules/Reveals/index.tsx
+const DURATION = .6;
+const DELAY = 0;
+const CASCADE = .1;
+const Reveals = ({ children, className, classNames, items = [], cascade = CASCADE, duration = DURATION, delay = DELAY, ...props }) => {
+	const renderItems = (items$1) => items$1.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Item_default, {
+		duration,
+		delay: delay + cascade * index,
+		className: require_utils.cn(item.className, classNames?.item),
+		...props,
+		...item,
+		children: item.children
+	}, index));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("flex gap-5", className, classNames?.root),
+		...props,
+		children: renderItems(children ? react.Children.toArray(children).map((child) => ({ children: child })) : items)
+	});
+};
+Reveals.Item = Item_default;
+var Reveals_default = Reveals;
+
+//#endregion
+Object.defineProperty(exports, 'CASCADE', {
+  enumerable: true,
+  get: function () {
+    return CASCADE;
+  }
+});
+Object.defineProperty(exports, 'DELAY', {
+  enumerable: true,
+  get: function () {
+    return DELAY;
+  }
+});
+Object.defineProperty(exports, 'DURATION', {
+  enumerable: true,
+  get: function () {
+    return DURATION;
+  }
+});
+Object.defineProperty(exports, 'Item_default', {
+  enumerable: true,
+  get: function () {
+    return Item_default;
+  }
+});
+Object.defineProperty(exports, 'Reveals_default', {
+  enumerable: true,
+  get: function () {
+    return Reveals_default;
+  }
+});

package/dist/Reveals-BpnYZJUk.mjs

@@ -0,0 +1,89 @@
+import { t as cn } from "./utils-DEenfsJ-.mjs";
+import { Children } from "react";
+import { jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+
+//#region src/components/molecules/Reveals/Item/index.tsx
+const effectVariants = {
+	fadeIn: {
+		offscreen: { opacity: 0 },
+		onscreen: { opacity: 1 }
+	},
+	fadeInUp: {
+		offscreen: {
+			opacity: 0,
+			y: 50
+		},
+		onscreen: {
+			opacity: 1,
+			y: 0
+		}
+	},
+	slideInUp: {
+		offscreen: {
+			opacity: 1,
+			y: 50
+		},
+		onscreen: {
+			opacity: 1,
+			y: 0
+		}
+	}
+};
+const Item = ({ effect = "fadeInUp", children, once, viewport, variants, duration, delay, transition, className, ...props }) => {
+	return /* @__PURE__ */ jsx(motion.div, {
+		initial: "offscreen",
+		whileInView: "onscreen",
+		viewport: {
+			once,
+			...viewport
+		},
+		variants: {
+			offscreen: {
+				...effectVariants[effect].offscreen,
+				...variants?.offscreen,
+				transition: { duration: 0 }
+			},
+			onscreen: {
+				...effectVariants[effect].onscreen,
+				...variants?.onscreen,
+				transition: {
+					duration,
+					ease: "easeOut",
+					delay,
+					...transition
+				}
+			}
+		},
+		className: cn("flex h-full items-center justify-center", className),
+		...props,
+		children
+	});
+};
+var Item_default = Item;
+
+//#endregion
+//#region src/components/molecules/Reveals/index.tsx
+const DURATION = .6;
+const DELAY = 0;
+const CASCADE = .1;
+const Reveals = ({ children, className, classNames, items = [], cascade = CASCADE, duration = DURATION, delay = DELAY, ...props }) => {
+	const renderItems = (items$1) => items$1.map((item, index) => /* @__PURE__ */ jsx(Item_default, {
+		duration,
+		delay: delay + cascade * index,
+		className: cn(item.className, classNames?.item),
+		...props,
+		...item,
+		children: item.children
+	}, index));
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex gap-5", className, classNames?.root),
+		...props,
+		children: renderItems(children ? Children.toArray(children).map((child) => ({ children: child })) : items)
+	});
+};
+Reveals.Item = Item_default;
+var Reveals_default = Reveals;
+
+//#endregion
+export { Item_default as a, Reveals_default as i, DELAY as n, DURATION as r, CASCADE as t };

package/dist/Reveals.cjs

@@ -0,0 +1,9 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+require('./utils-8r5MlYq5.cjs');
+const require_Reveals = require('./Reveals-BIKKnQpn.cjs');
+
+exports.CASCADE = require_Reveals.CASCADE;
+exports.DELAY = require_Reveals.DELAY;
+exports.DURATION = require_Reveals.DURATION;
+exports.Item = require_Reveals.Item_default;
+exports.default = require_Reveals.Reveals_default;

package/dist/Reveals.d.cts

@@ -0,0 +1,2 @@
+import { a as Reveals, i as Props, n as DELAY, o as Item, r as DURATION, s as ItemProps, t as CASCADE } from "./index-CdyEmwZC.cjs";
+export { CASCADE, DELAY, DURATION, Item, ItemProps, Props as RevealsProps, Reveals as default };

package/dist/Reveals.d.mts

@@ -0,0 +1,2 @@
+import { a as Reveals, i as Props, n as DELAY, o as Item, r as DURATION, s as ItemProps, t as CASCADE } from "./index-DS-PGSIg.mjs";
+export { CASCADE, DELAY, DURATION, Item, ItemProps, Props as RevealsProps, Reveals as default };

package/dist/Reveals.mjs

@@ -0,0 +1,4 @@
+import "./utils-DEenfsJ-.mjs";
+import { a as Item_default, i as Reveals_default, n as DELAY, r as DURATION, t as CASCADE } from "./Reveals-BpnYZJUk.mjs";
+
+export { CASCADE, DELAY, DURATION, Item_default as Item, Reveals_default as default };

package/dist/Typography-B3MWBAA6.cjs

@@ -0,0 +1,102 @@
+const require_src = require('./src-Dvkx0I-F.cjs');
+const require_utils = require('./utils-8r5MlYq5.cjs');
+const require_enums = require('./enums-CP_LwqBM.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/atoms/Typography/Link/index.tsx
+const Link = ({ children, className, level, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		className: require_utils.cn("underline-offset-1 hover:underline", level ? require_enums.TEXT_LEVELS[level] : "", className),
+		...props,
+		children
+	});
+};
+var Link_default = Link;
+
+//#endregion
+//#region src/components/atoms/Typography/Paragraph/index.tsx
+const Paragraph = ({ children, className, level, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		...props,
+		className: require_utils.cn(level ? require_enums.TEXT_LEVELS[level] : "", className),
+		children
+	});
+};
+var Paragraph_default = Paragraph;
+
+//#endregion
+//#region src/components/atoms/Typography/Text/index.tsx
+const Text = ({ children, underline, strong, className, level, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_utils.cn("text-nowrap", level ? require_enums.TEXT_LEVELS[level] : "", underline && "underline", strong && "font-bold", className),
+		...props,
+		children
+	});
+};
+var Text_default = Text;
+
+//#endregion
+//#region src/components/atoms/Typography/Title/index.tsx
+const styles = {
+	h1: "text-6xl",
+	h2: "text-5xl",
+	h3: "text-4xl",
+	h4: "text-3xl",
+	h5: "text-2xl",
+	h6: "text-xl"
+};
+const Title = ({ children, level = 1, className, ...props }) => {
+	const Element = level < 1 || level > 6 ? "h1" : `h${level}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Element, {
+		className: require_utils.cn("leading-snug font-bold", styles[Element], className),
+		...props,
+		children
+	});
+};
+var Title_default = Title;
+
+//#endregion
+//#region src/components/atoms/Typography/index.tsx
+const Typography = ({ children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", {
+		...props,
+		children
+	});
+};
+Typography.Link = Link_default;
+Typography.Paragraph = Paragraph_default;
+Typography.Text = Text_default;
+Typography.Title = Title_default;
+var Typography_default = Typography;
+
+//#endregion
+Object.defineProperty(exports, 'Link_default', {
+  enumerable: true,
+  get: function () {
+    return Link_default;
+  }
+});
+Object.defineProperty(exports, 'Paragraph_default', {
+  enumerable: true,
+  get: function () {
+    return Paragraph_default;
+  }
+});
+Object.defineProperty(exports, 'Text_default', {
+  enumerable: true,
+  get: function () {
+    return Text_default;
+  }
+});
+Object.defineProperty(exports, 'Title_default', {
+  enumerable: true,
+  get: function () {
+    return Title_default;
+  }
+});
+Object.defineProperty(exports, 'Typography_default', {
+  enumerable: true,
+  get: function () {
+    return Typography_default;
+  }
+});