@pylerai/design-system 1.1.0

package/README.md

@@ -0,0 +1,515 @@
+# @pylerai/design-system
+
+Pyler Frontend를 위한 디자인 시스템 패키지 (Tailwind CSS + shadcn/ui 기반)
+
+## 📦 패키지 정보
+
+- **패키지명**: `@pylerai/design-system`
+- **버전**: 1.0.1
+- **라이선스**: ISC
+- **레지스트리**: GitHub Packages
+- **기술 스택**: React + TypeScript + Tailwind CSS + shadcn/ui + Storybook + Vitest
+
+## 🚀 설치 및 사용
+
+### 다른 프로젝트에서 사용하기
+
+다른 레포지토리에서 이 디자인 시스템을 사용하려면 다음 단계를 따라하세요:
+
+#### 1. GitHub Personal Access Token 생성
+
+1. GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic)
+2. "Generate new token (classic)" 클릭
+3. `read:packages` 권한 체크
+4. 토큰 생성 및 복사 (한 번만 표시되므로 안전하게 보관!)
+
+#### 2. 프로젝트에 `.npmrc` 파일 생성
+
+프로젝트 루트에 `.npmrc` 파일을 생성하고 다음 내용을 추가하세요:
+
+```
+@pylerai:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
+```
+
+`YOUR_GITHUB_TOKEN` 부분을 1단계에서 생성한 토큰으로 교체하세요.
+
+> ⚠️ 주의: `.npmrc` 파일은 절대 git에 커밋하지 마세요! `.gitignore`에 추가되어 있는지 확인하세요.
+
+#### 3. 패키지 설치
+
+```bash
+npm install @pylerai/design-system
+```
+
+#### 4. Tailwind CSS 설정
+
+사용할 프로젝트의 `tailwind.config.js` / `tailwind.config.cjs` 파일에 다음을 추가하세요:
+
+```js
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/@pylerai/design-system/**/*.{js,ts,jsx,tsx}", // 추가
+  ],
+  // ...
+};
+```
+
+그리고 CSS 파일에 다음을 추가하세요:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 디자인 시스템 스타일 (컴포넌트 + Pyler 컬러 변수 등) */
+@import "@pylerai/design-system/style.css";
+```
+
+앱 진입 TS/JS에서 한 번 로드하는 방식도 동일합니다.
+
+```typescript
+import "@pylerai/design-system/style.css";
+```
+
+> 구버전 번들러에서 서브패스가 동작하지 않으면 `@import "@pylerai/design-system/dist/style.css";` 또는 `import "@pylerai/design-system/dist/style.css";` 를 사용하세요.
+
+#### 5. 사용하기
+
+```typescript
+import { Button } from "@pylerai/design-system";
+
+function App() {
+  return (
+    <div className="p-4">
+      <Button>클릭하세요</Button>
+      <Button variant="outline">외곽선</Button>
+      <Button variant="destructive">삭제</Button>
+    </div>
+  );
+}
+```
+
+### 컬러 토큰 (Pyler Light)
+
+Figma Light 모드와 동일한 HEX를 **TypeScript 상수**, **CSS 변수 (`--ds-*`)**, **Tailwind `ds` 팔레트**로 제공합니다. 앱 코드에 HEX를 직접 쓰지 말고 패키지 토큰을 참조하세요.
+
+#### TypeScript에서 HEX·경로 사용
+
+```typescript
+import {
+  PYLER_LIGHT_COLOR_TOKENS,
+  flatPylerLightTokens,
+  getDsCssVar,
+} from "@pylerai/design-system";
+
+// 중첩 객체
+const strong = PYLER_LIGHT_COLOR_TOKENS.text.strong.hex; // "#333333"
+
+// 순회·문서화용 플랫 리스트
+flatPylerLightTokens.forEach(({ path, hex, cssVar }) => {
+  console.log(path, hex, cssVar);
+});
+
+// CSS 변수 이름
+getDsCssVar("text.strong"); // => "--ds-text-strong"
+```
+
+#### CSS 변수
+
+`style.css`를 로드한 뒤 임의 요소에 적용합니다.
+
+```css
+.my-title {
+  color: var(--ds-text-strong);
+  border-color: var(--ds-line-strong);
+  background-color: var(--ds-surface-normal);
+}
+```
+
+#### Tailwind에서 `ds` 색상
+
+1. **프리셋 사용 (권장)** — `theme.extend.colors.ds`가 자동으로 합쳐집니다.
+
+```javascript
+// tailwind.config.cjs
+module.exports = {
+  presets: [require("@pylerai/design-system/tailwind-preset")],
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/@pylerai/design-system/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      /* 기존 앱 전용 확장 */
+    },
+  },
+};
+```
+
+2. **색상 맵만 병합** — 이미 `extend.colors`를 쓰는 경우:
+
+```javascript
+const { dsColors } = require("@pylerai/design-system/pyler-tailwind-colors");
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        ds: dsColors,
+      },
+    },
+  },
+};
+```
+
+유틸 클래스 예: `bg-ds-primary-blue-normal`, `text-ds-text-strong`, `border-ds-line-normal`.
+
+동적으로 `bg-ds-*`만 조합하는 경우 Tailwind가 클래스를 빼버릴 수 있으므로, 소비 앱 `tailwind.config`에 `safelist: [{ pattern: /^bg-ds-/ }]`를 두는 것을 권장합니다.
+
+스토리북 **Design Tokens → Color Tokens**에서 전체 스와치와 HEX를 확인할 수 있습니다.
+
+#### 환경별 설정 예시
+
+**`.env` 파일을 사용하는 경우** (추천):
+
+프로젝트 루트에 `.env` 파일 생성:
+
+```
+GITHUB_TOKEN=your_token_here
+```
+
+`.npmrc` 파일:
+
+```
+@pylerai:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+```
+
+**CI/CD 환경** (GitHub Actions):
+
+워크플로우 파일에 다음 추가:
+
+```yaml
+- uses: actions/checkout@v5
+- uses: actions/setup-node@v4
+  with:
+    node-version: 20
+    registry-url: https://npm.pkg.github.com/
+    scope: "@pylerai"
+- run: npm install @pylerai/design-system
+  env:
+    NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
+```
+
+## 🎨 컴포넌트
+
+### Typography
+
+일관된 타이포그래피를 위한 컴포넌트들입니다.
+
+#### Headline
+
+페이지와 섹션의 제목을 위한 컴포넌트입니다.
+
+```typescript
+import { Headline } from '@pylerai/design-system';
+
+// 기본 사용
+<Headline>페이지 제목</Headline>
+
+// Variant
+<Headline variant="h1-20">페이지/섹션 최상위 제목</Headline>
+<Headline variant="h1-20-m">보조 헤드라인</Headline>
+<Headline variant="h1-20-r">큰 본문/설명</Headline>
+<Headline variant="h2-18">섹션 제목</Headline>
+<Headline variant="h2-18-sb">섹션 보조 제목</Headline>
+<Headline variant="h2-18-r">크고 차분한 본문</Headline>
+
+// HTML 태그 지정
+<Headline as="h1">H1 태그로 렌더링</Headline>
+<Headline as="h2">H2 태그로 렌더링</Headline>
+```
+
+#### Body
+
+본문 텍스트를 위한 컴포넌트입니다.
+
+```typescript
+import { Body } from '@pylerai/design-system';
+
+// 기본 사용
+<Body>본문 텍스트입니다.</Body>
+
+// Variant
+<Body variant="b1-16">강조 본문</Body>
+<Body variant="b1-16-m">일반 본문(기본)</Body>
+<Body variant="b1-16-r">일반 본문(라이트)</Body>
+<Body variant="b2-14">작은 강조 본문</Body>
+<Body variant="b2-14-m">작은 본문/캡션</Body>
+<Body variant="b2-14-r">캡션/헬퍼텍스트</Body>
+<Body variant="b3-13-m">세부설명/테이블 셀</Body>
+<Body variant="b3-13-r">보조설명</Body>
+<Body variant="b4-12-m">메타/상태</Body>
+<Body variant="b4-12-r">아주 작은 본문</Body>
+
+// HTML 태그 지정
+<Body as="p">P 태그로 렌더링</Body>
+<Body as="div">DIV 태그로 렌더링</Body>
+```
+
+#### Label
+
+폼 요소나 작은 텍스트 라벨을 위한 컴포넌트입니다.
+
+```typescript
+import { Label } from '@pylerai/design-system';
+
+// 기본 사용
+<Label>라벨 텍스트</Label>
+
+// Variant
+<Label variant="l1-10-sb">라벨/태그</Label>
+<Label variant="l1-10-r">라벨(비강조)</Label>
+
+// 폼과 함께 사용
+<Label htmlFor="email">이메일 주소</Label>
+<input id="email" type="email" />
+```
+
+### Button
+
+다양한 variant와 size를 지원하는 버튼 컴포넌트입니다.
+
+```typescript
+import { Button } from '@pylerai/design-system';
+
+// 기본 사용
+<Button>클릭하세요</Button>
+
+// Variant
+<Button variant="default">기본</Button>
+<Button variant="destructive">삭제</Button>
+<Button variant="outline">외곽선</Button>
+<Button variant="secondary">두 번째</Button>
+<Button variant="ghost">고스트</Button>
+<Button variant="link">링크</Button>
+
+// Size
+<Button size="sm">작은 버튼</Button>
+<Button size="default">기본</Button>
+<Button size="lg">큰 버튼</Button>
+<Button size="icon">🔍</Button>
+
+// 조합
+<Button variant="outline" size="lg">외곽선 큰 버튼</Button>
+```
+
+## 📏 타이포그래피 스케일
+
+### 디자인 토큰
+
+| Token | Size(px) | Weight | Tailwind class | 용도 |
+|-------|----------|--------|----------------|------|
+| H1-20B | 20 | 700 | text-h1-20 | 페이지/섹션 최상위 제목 |
+| H1-20M | 20 | 500 | text-h1-20-m | 보조 헤드라인 |
+| H1-20R | 20 | 400 | text-h1-20-r | 큰 본문/설명 |
+| H2-18B | 18 | 700 | text-h2-18 | 섹션 제목 |
+| H2-18SB | 18 | 600 | text-h2-18-sb | 섹션 보조 제목 |
+| H2-18R | 18 | 400 | text-h2-18-r | 크고 차분한 본문 |
+| B1-16B | 16 | 700 | text-b1-16 | 강조 본문 |
+| B1-16M | 16 | 500 | text-b1-16-m | 일반 본문(기본) |
+| B1-16R | 16 | 400 | text-b1-16-r | 일반 본문(라이트) |
+| B2-14B | 14 | 700 | text-b2-14 | 작은 강조 본문 |
+| B2-14M | 14 | 500 | text-b2-14-m | 작은 본문/캡션 |
+| B2-14R | 14 | 400 | text-b2-14-r | 캡션/헬퍼텍스트 |
+| B3-13M | 13 | 500 | text-b3-13-m | 세부설명/테이블 셀 |
+| B3-13R | 13 | 400 | text-b3-13-r | 보조설명 |
+| B4-12M | 12 | 500 | text-b4-12-m | 메타/상태 |
+| B4-12R | 12 | 400 | text-b4-12-r | 아주 작은 본문 |
+| L1-10SB | 10 | 600 | text-l1-10-sb | 라벨/태그 |
+| L1-10R | 10 | 400 | text-l1-10-r | 라벨(비강조) |
+
+### 사용 가이드라인
+
+#### ✅ 권장사항
+
+- **계층 구조 유지**: H1 → H2 → H3 순서로 헤딩을 사용하고, 각 레벨의 용도를 일관되게 유지하세요.
+- **충분한 대비**: 텍스트와 배경 간 충분한 색상 대비를 확보하여 가독성을 보장하세요.
+- **적절한 라인 높이**: 본문 텍스트는 1.4~1.6의 라인 높이를 사용하여 가독성을 높이세요.
+
+#### ❌ 주의사항
+
+- **과도한 변형 사용**: 너무 많은 폰트 크기와 굵기를 혼용하면 일관성이 떨어집니다.
+- **너무 작은 텍스트**: 10px 이하의 텍스트는 가독성과 접근성 문제를 일으킬 수 있습니다.
+- **의미 없는 굵기 변경**: 단순히 강조를 위해 굵기를 변경하지 말고, 의미 있는 계층 구조를 사용하세요.
+
+### 접근성
+
+모든 타이포그래피 컴포넌트는 WCAG 2.1 AA 기준을 준수합니다:
+
+- **색상 대비**: 최소 4.5:1의 대비율 유지
+- **헤딩 계층**: 올바른 HTML 헤딩 태그 사용
+- **스크린 리더**: 의미 있는 텍스트와 라벨 제공
+- **키보드 네비게이션**: 포커스 표시 및 키보드 접근성 지원
+
+## 📁 프로젝트 구조
+
+```
+design-system/
+├── .storybook/
+│   ├── main.cjs                    # Storybook 메인 설정 (CJS — Vite/Storybook 호환)
+│   ├── preview.ts                  # Storybook 미리보기 설정
+│   └── vitest.setup.ts            # Vitest 테스트 설정
+├── .github/
+│   └── workflows/
+│       └── release-package.yml     # GitHub Actions 릴리스 워크플로우
+├── src/
+│   ├── components/
+│   │   ├── ui/
+│   │   │   ├── button.tsx         # Button 컴포넌트 구현
+│   │   │   └── button.stories.tsx # Button Storybook 스토리
+│   │   └── Button.tsx              # Button export
+│   ├── stories/                    # Storybook 데모 컴포넌트
+│   │   ├── assets/                # 데모용 이미지/아이콘
+│   │   ├── Button.tsx             # 데모 Button
+│   │   ├── Button.stories.ts      # Button 스토리
+│   │   ├── Header.tsx             # 데모 Header
+│   │   ├── Header.stories.ts      # Header 스토리
+│   │   ├── Page.tsx               # 데모 Page
+│   │   ├── Page.stories.ts        # Page 스토리
+│   │   └── *.css                  # 데모 스타일
+│   ├── lib/
+│   │   └── utils.ts               # 유틸리티 함수 (cn, clsx)
+│   ├── index.css                   # Tailwind CSS 스타일
+│   ├── index.css.ts                # CSS 타입 정의
+│   └── index.tsx                   # 패키지 진입점
+├── components.json                 # shadcn/ui 설정
+├── tailwind.config.cjs            # Tailwind CSS 설정
+├── postcss.config.js              # PostCSS 설정
+├── tsconfig.json                   # TypeScript 설정
+├── tsconfig.node.json              # TypeScript Node 설정
+├── vite.config.ts                  # Vite 설정
+├── vitest.shims.d.ts              # Vitest 타입 정의
+└── package.json                    # 패키지 정보
+```
+
+### 주요 디렉토리 설명
+
+- **`src/components/`**: 실제 디자인 시스템 컴포넌트들이 위치
+
+  - `ui/`: shadcn/ui 기반 컴포넌트 구현
+  - 컴포넌트 export 파일들
+
+- **`src/stories/`**: Storybook 데모 및 예제 컴포넌트들
+
+  - 실제 패키지에는 포함되지 않으며 개발/테스트 용도
+  - Button, Header, Page 등의 데모 컴포넌트
+
+- **`src/lib/`**: 공통 유틸리티 함수
+
+  - `utils.ts`: class-variance-authority, clsx, tailwind-merge를 사용한 `cn` 함수
+
+- **`.storybook/`**: Storybook 설정 파일
+  - Vitest 통합
+  - addons: a11y, docs, onboarding, vitest
+
+## 🔧 개발
+
+### 로컬 개발
+
+```bash
+# 의존성 설치
+npm install
+
+# 개발 서버 실행 (테스트용)
+npm run dev
+
+# 빌드
+npm run build
+
+# 테스트 실행
+npm test
+```
+
+### Storybook 개발
+
+컴포넌트를 개발하고 테스트하기 위해 Storybook을 사용할 수 있습니다.
+
+```bash
+# Storybook 개발 서버 실행
+npm run storybook
+
+# Storybook 빌드
+npm run build-storybook
+```
+
+Storybook은 `http://localhost:6006`에서 실행됩니다.
+
+컴포넌트 스토리는 `src/components/**/*.stories.tsx` 경로에 생성됩니다.
+
+## 📤 배포
+
+이 프로젝트는 GitHub Actions를 통해 자동 배포됩니다.
+
+### 배포 프로세스
+
+1. **릴리스 생성**: GitHub에서 새로운 릴리스를 생성하면 자동으로 워크플로우가 트리거됩니다.
+2. **빌드 단계**:
+   - Node.js 20 환경에서 실행
+   - `npm ci`로 의존성 설치
+   - `npm test`로 테스트 실행
+3. **퍼블리시 단계**:
+   - GitHub Packages에 패키지 퍼블리시
+   - 패키지 스코프: `@pylerai`
+   - 레지스트리: `https://npm.pkg.github.com`
+
+### 워크플로우 파일
+
+```yaml:.github/workflows/release-package.yml
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm test
+
+  publish-gpr:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: read
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://npm.pkg.github.com/
+          scope: "@pylerai"
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
+```
+
+## 🔗 링크
+
+- **Repository**: https://github.com/pylerAI/design-system
+- **Issues**: https://github.com/pylerAI/design-system/issues
+- **Homepage**: https://github.com/pylerAI/design-system#readme
+
+## 📄 라이선스
+
+ISC

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export type BadgeColor = "normal" | "neutral" | "negative" | "positive";
+export type BadgeSize = "medium" | "small";
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    color?: BadgeColor;
+    size?: BadgeSize;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { Badge };

package/dist/components/ui/body.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const bodyVariants: (props?: ({
+    variant?: "body-1-m" | "body-1-r" | "body-2-sb" | "body-2-m" | "body-2-r" | "body-3-m" | "body-3-r" | "body-4-m" | "body-4-r" | null | undefined;
+    as?: "p" | "article" | "span" | "div" | "section" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BodyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof bodyVariants> {
+    /** 렌더링할 HTML 태그. 기본값: "p" */
+    as?: "p" | "div" | "span" | "article" | "section";
+    asChild?: boolean;
+}
+declare const Body: React.ForwardRefExoticComponent<BodyProps & React.RefAttributes<HTMLElement>>;
+export { Body, bodyVariants };

package/dist/components/ui/button.d.ts

@@ -0,0 +1,26 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "text" | "icon" | "filled" | "outlined" | "indicator" | null | undefined;
+    color?: "blue" | "red" | "green" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color">, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    /** variant="icon"일 때만 유효. 기본값: "square" */
+    shape?: "square" | "round";
+    /** variant="icon"일 때 outlined 스타일로 전환. 기본값: "filled" */
+    iconStyle?: "filled" | "outlined";
+    /** 텍스트 왼쪽에 표시할 아이콘 */
+    leftIcon?: React.ReactNode;
+    /** 텍스트 오른쪽에 표시할 아이콘 */
+    rightIcon?: React.ReactNode;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface ButtonIndicatorProps {
+    color?: "blue" | "red" | "green";
+    size?: "sm" | "md" | "lg" | "xl";
+    className?: string;
+}
+declare const ButtonIndicator: React.ForwardRefExoticComponent<ButtonIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export { Button, ButtonIndicator, buttonVariants };

package/dist/components/ui/checkbox.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+    /** 부분 선택(미결정) 상태 */
+    indeterminate?: boolean;
+    /** 체크 상태 변경 핸들러 */
+    onChange?: (checked: boolean) => void;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export { Checkbox };

package/dist/components/ui/chip.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export type ChipSize = "medium" | "small";
+export interface ChipProps {
+    /** 크기. 기본값: "medium" */
+    size?: ChipSize;
+    /** 선택 상태 */
+    selected?: boolean;
+    disabled?: boolean;
+    /** 제거 버튼 클릭 핸들러. 정의 시 제거 버튼 표시 */
+    onRemove?: () => void;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
+export { Chip };

package/dist/components/ui/dropdown.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+export type DropdownOption = {
+    label: string;
+    value: string;
+};
+export interface DropdownProps {
+    /** 드롭다운 타입. 기본값: "default" */
+    type?: "default" | "checkbox" | "radio";
+    /** 옵션 목록 */
+    options: DropdownOption[];
+    /** 단일 선택 값 (type="default" | "radio") */
+    value?: string;
+    /** 단일 선택 변경 핸들러 */
+    onValueChange?: (value: string) => void;
+    /** 복수 선택 값 (type="checkbox") */
+    values?: string[];
+    /** 복수 선택 변경 핸들러 */
+    onValuesChange?: (values: string[]) => void;
+    /** 미선택 시 표시 텍스트. 기본값: "선택해주세요" */
+    placeholder?: string;
+    /** 라벨 텍스트 */
+    label?: string;
+    /** 라벨 표시 여부. 기본값: true */
+    showLabel?: boolean;
+    /** 필수 입력 표시(*) */
+    require?: boolean;
+    /** 크기. 기본값: "large" */
+    size?: "large" | "medium" | "small";
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** 에러 메시지. 표시 시 필드에 빨간 테두리 적용 */
+    error?: string;
+    /** 필드 하단 힌트 텍스트 */
+    hint?: string;
+    /** 트리거 좌측 아이콘 */
+    leftIcon?: React.ReactNode;
+    /** 외부 컨테이너 className */
+    wrapperClassName?: string;
+    className?: string;
+}
+declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+export { Dropdown };

package/dist/components/ui/headline.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const headlineVariants: (props?: ({
+    variant?: "title-1-sb" | "title-1-m" | "title-2-sb" | null | undefined;
+    as?: "p" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface HeadlineProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof headlineVariants> {
+    /** 렌더링할 HTML 태그. 기본값: "h1" */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span" | "p";
+    asChild?: boolean;
+}
+declare const Headline: React.ForwardRefExoticComponent<HeadlineProps & React.RefAttributes<HTMLElement>>;
+export { Headline, headlineVariants };

package/dist/components/ui/input.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+export interface InputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** 라벨 텍스트 */
+    label?: string;
+    /** 라벨 표시 여부. 기본값: true */
+    showLabel?: boolean;
+    /** 필수 입력 표시(*) */
+    require?: boolean;
+    /** 라벨 아래 추가 메시지 */
+    message?: string;
+    /** 필드 하단 힌트 텍스트 */
+    hint?: string;
+    /** 에러 메시지. 표시 시 필드에 빨간 테두리 적용 */
+    error?: string;
+    /** 우측 아이콘. type="password"이면 기본 비밀번호 토글 아이콘 */
+    rightIcon?: React.ReactNode;
+    /** 크기. 기본값: "large" */
+    size?: "large" | "medium" | "small";
+    /** 외부 컨테이너 className */
+    wrapperClassName?: string;
+}
+declare const InputField: React.ForwardRefExoticComponent<InputFieldProps & React.RefAttributes<HTMLInputElement>>;
+export interface TextFieldProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** 라벨 텍스트 */
+    label?: string;
+    /** 라벨 표시 여부. 기본값: true */
+    showLabel?: boolean;
+    /** 외부 컨테이너 className */
+    wrapperClassName?: string;
+}
+declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { InputField, TextField };