bo-ui-kit 0.1.0 → 0.2.0

package/README.md

@@ -1,32 +1,17 @@
 # bo-ui-kit
 
-Figma **"BO UI Kit"** 디자인 시스템을 React 컴포넌트로 만들고, **디자인 변경을 자동으로 코드에 동기화**하는 프로젝트.
-
-`React 18 · TypeScript · Tailwind v3 · cva` · 컴포넌트 10종 · npm 라이브러리(ESM+CJS) · 5종 CI 게이트
-
----
-
-## 이 저장소가 하는 일 (3가지)
-
-| | 무엇 | 핵심 |
-|---|---|---|
-| 1. **컴포넌트 라이브러리** | `bo-ui-kit` — 설치해서 쓰는 React UI | ESM+CJS, Tailwind 없이도 동작(프리빌드 CSS), 타입 포함 |
-| 2. **자동 동기화 파이프라인** | Figma 변경 → 감지 → 추출 → PR | 헤드리스 Claude가 변경분만 추출, 사람은 머지만 |
-| 3. **품질 게이트(CI)** | 시각 회귀 + 소비자 스모크 | 컴포넌트/배포물이 깨지면 PR에서 빨강 |
-
-> 한 줄 요약: **디자이너가 Figma를 바꾸면 → 코드 PR이 알아서 생기고(증거 스크린샷 첨부) → 라이브러리로 배포 가능**.
-
----
-
-## 빠른 시작 — 라이브러리로 쓰기
+Figma **"BO UI Kit"** 디자인 시스템에서 추출한 **React UI 컴포넌트 라이브러리**.
+Tailwind 설정 없이 바로 쓰는 프리빌드 CSS · ESM·CJS 듀얼 번들 · 타입 포함.
 
 ```bash
-npm i bo-ui-kit        # peer: react, react-dom >=18
+npm i bo-ui-kit        # peer: react, react-dom >= 18
 ```
 
+## 사용법
+
 ```tsx
-import { Button, Meter, Field, Input } from "bo-ui-kit";
-import "bo-ui-kit/styles.css";   // 토큰+유틸 한 줄 (앱 진입점에서 1회)
+import { Button, Field, Input } from "bo-ui-kit";
+import "bo-ui-kit/styles.css";   // 디자인 토큰 + 컴포넌트 스타일 (앱 진입점에서 1회)
 
 export default function App() {
   return (
@@ -37,88 +22,62 @@ export default function App() {
 }
 ```
 
-- **ESM·CommonJS 모두 지원** (`import` / `require` 둘 다)
-- **Tailwind 불필요** — `styles.css` 한 줄이면 토큰·유틸 전부 포함
-- **다크 모드** — 상위 요소에 `class="dark"`
-- **테마 변경** — `styles.css`의 CSS 변수(`--primary` 등)를 덮어쓰기
-- **폰트** — Pretendard 우선, 없으면 시스템 산세리프 폴백
+> `styles.css`는 앱에서 **한 번만** import 하면 됩니다. **Tailwind를 설치하거나 설정할 필요가 없습니다.**
 
----
+## 특징
 
-## 컴포넌트 (10종)
+- **Tailwind 불필요** — `bo-ui-kit/styles.css` 한 줄에 디자인 토큰 + 컴포넌트 스타일이 모두 들어 있습니다. 전역 리셋(preflight)이 없어 기존 앱 스타일을 건드리지 않습니다.
+- **ESM · CommonJS** — `import` / `require` 모두 지원.
+- **TypeScript** — 타입 선언(`.d.ts`) 포함.
+- **다크 모드** — 상위 요소에 `class="dark"`.
+- **테마 변경** — `styles.css`의 CSS 변수(`--primary`, `--radius` 등)를 앱에서 덮어쓰면 색·반경 등이 바뀝니다.
+- **폰트** — Pretendard 우선, 없으면 시스템 산세리프로 폴백.
 
-| 컴포넌트 | export | Figma node |
-|---|---|---|
-| Button | `Button` | 1692:74 |
-| Checkbox | `Checkbox` | 5667:129 |
-| Input | `Input` | 7745:699 |
-| Label | `Label` | 7658:2157 |
-| Field | `Field` | 7745:713 |
-| Input OTP | `InputOTP` `InputOTPSlot` `InputOTPSeparator` | 8060:1580 |
-| Meter | `Meter` | 7664:31 |
-| Toggle | `Toggle` | 5685:204 |
-| Toggle Group | `ToggleGroup` `ToggleGroupItem` | 5686:270 |
-| Select | `Select` | 7751:1561 |
+## 컴포넌트
 
-미리보기(자체 플레이그라운드): `npm run dev` → 좌측 컴포넌트 목록.
-추출 대상 단일 소스: `figma.manifest.json`.
+| 컴포넌트 | export |
+|---|---|
+| Button | `Button` |
+| Checkbox | `Checkbox` |
+| Input | `Input` |
+| Label | `Label` |
+| Field | `Field` |
+| Input OTP | `InputOTP`, `InputOTPSlot`, `InputOTPSeparator` |
+| Meter | `Meter` |
+| Toggle | `Toggle` |
+| Toggle Group | `ToggleGroup`, `ToggleGroupItem` |
+| Select | `Select` |
 
----
+모든 컴포넌트는 `className`으로 스타일 합성이 가능하고 `forwardRef`로 ref를 전달받습니다.
 
-## 자동 동기화 파이프라인
+### 예시
 
+```tsx
+import { Toggle, ToggleGroup, ToggleGroupItem, Select } from "bo-ui-kit";
+
+// 제어형 Toggle (2-state 버튼)
+<Toggle pressed={on} onPressedChange={setOn}>굵게</Toggle>
+
+// Select (드롭다운)
+<Select
+  options={[{ value: "apple", label: "Apple" }, { value: "banana", label: "Banana" }]}
+  value={fruit}
+  onValueChange={setFruit}
+  placeholder="과일 선택…"
+/>
+
+// Toggle Group (세그먼티드, 단일 선택)
+<ToggleGroup type="single" value={align} onValueChange={setAlign}>
+  <ToggleGroupItem value="left">왼쪽</ToggleGroupItem>
+  <ToggleGroupItem value="center">가운데</ToggleGroupItem>
+  <ToggleGroupItem value="right">오른쪽</ToggleGroupItem>
+</ToggleGroup>
 ```
-Figma (BO UI Kit)
-  │ 디자인 변경
-  ▼
-① 감지   figma-poll.yml (cron)  — 파일 버전 + 추적 노드 지문 비교
-  │ 실제 컴포넌트가 바뀐 경우에만
-  ▼
-② 추출   figma-sync.yml — 헤드리스 Claude가 변경분만 추출 → 검증(tsc+build) → PR
-  │ (PR에 "Closes #이슈" 연결)
-  ▼
-③ 검증   visual.yml — 시각 회귀 + Figma/Before/After/Diff 증거 코멘트
-  │        smoke.yml — 소비자 설치·렌더 + tarball 검증
-  ▼
-④ 사람   PR 증거 보고 머지 → 이슈 자동 종료 → baseline 자동 갱신
-```
-
-- **autosave는 무시**: 버전만 올라가고 추적 노드(컴포넌트)가 안 바뀌면 헤드리스를 돌리지 않음(`figma.fingerprints.json` 지문 비교).
-- **PR 시각 증거**: 변경된 컴포넌트의 Figma 원본 + 렌더 Before/After/Diff를 PR 코멘트로 자동 첨부.
-- **토큰 점검**: `token-health.yml`이 `FIGMA_TOKEN` 만료를 매일 점검(만료 시 Issue).
-
-> 파이프라인 구성·운영·시크릿·함정 상세는 **[docs/CONFLUENCE.md](docs/CONFLUENCE.md)**.
 
----
+## 요구사항
 
-## 개발
-
-| 명령 | 설명 |
-|---|---|
-| `npm run dev` | 플레이그라운드(컴포넌트 카탈로그) |
-| `npm run verify` | 타입체크 + 빌드 |
-| `npm run build:lib` | 라이브러리 빌드 → `dist/`(ESM+CJS+타입+styles.css) |
-| `npm run test:visual` | 시각 회귀(로컬은 비교 생략, CI=Linux 기준) |
-| `npm run check:figma` | Figma 변경 감지(exit 10=변경) |
-| `npm run pack:test` | tarball 만들어 `examples/pack-consumer`에 설치(배포물 검증) |
+- **React 18+** — `react`, `react-dom`은 peer dependency.
 
-소비자 검증 예시: `examples/consumer`(워크스페이스 링크) · `examples/pack-consumer`(tarball 전용).
+## 라이선스
 
----
-
-## 프로젝트 구조
-
-```
-src/
-  components/ui/   컴포넌트 (배럴: index.ts)
-  stories/         플레이그라운드 스토리
-  tokens.css       디자인 토큰(단일 소스 — 앱·라이브러리 공유)
-  index.css        앱 진입 CSS (tokens 임포트)
-lib/styles.css     라이브러리 CSS 입력(프리빌드용)
-scripts/           감지/빌드/검증 스크립트
-.github/workflows/ figma-poll · figma-sync · visual · smoke · token-health
-examples/          consumer(링크) · pack-consumer(tarball)
-figma.manifest.json / figma.fingerprints.json   추출 대상 + 노드 지문
-CLAUDE.md          컴포넌트 작성 규칙(★ Variant 매핑)
-docs/CONFLUENCE.md 파이프라인/운영 레퍼런스
-```
+MIT © eromnet

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+type AccordionBase = {
+    className?: string;
+    children?: React.ReactNode;
+};
+export type AccordionProps = AccordionBase & ({
+    type?: "single";
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (v: string) => void;
+} | {
+    type: "multiple";
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (v: string[]) => void;
+});
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+export interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    value: string;
+    title: React.ReactNode;
+    /** 제목 앞 아이콘(선택) */
+    icon?: React.ReactNode;
+    /** 하단 구분선 표시(기본 true) */
+    showSeparator?: boolean;
+}
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionItem };

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+/**
+ * AlertDialog — Figma "BO UI Kit" AlertDialog(node 5655:5142). 확인이 필요한 모달.
+ *
+ * Dialog 프리미티브 재사용 + role=alertdialog + 바깥클릭/X 비활성(명시적 선택 필요).
+ * 취소/실행 버튼. `destructive` 시 실행 버튼이 빨간(destructive) Button. 제어/비제어(open).
+ */
+export interface AlertDialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    cancelText?: React.ReactNode;
+    actionText?: React.ReactNode;
+    onAction?: () => void;
+    onCancel?: () => void;
+    destructive?: boolean;
+    children?: React.ReactNode;
+}
+declare function AlertDialog({ open, defaultOpen, onOpenChange, title, description, cancelText, actionText, onAction, onCancel, destructive, children, }: AlertDialogProps): React.JSX.Element;
+export { AlertDialog };

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Alert — Figma "BO UI Kit" Alert(node 5655:4958). 중요 정보 콜아웃.
+ *
+ * Type: Default/Info/Success/Warning/Error → 테두리 색@32% + 배경 색@4% + 아이콘 색.
+ * 제목=foreground medium, 설명=muted-foreground. 상태색은 통일 토큰(info/success/warning/destructive).
+ */
+declare const alertVariants: (props?: ({
+    type?: "default" | "error" | "info" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare function StatusIcon({ type }: {
+    type: NonNullable<VariantProps<typeof alertVariants>["type"]>;
+}): React.JSX.Element;
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof alertVariants> {
+    title?: React.ReactNode;
+    /** 아이콘 직접 지정(미지정 시 type 기본 아이콘). false 면 숨김. */
+    icon?: React.ReactNode | false;
+    /** 우측 액션(버튼 등) */
+    action?: React.ReactNode;
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export { Alert, alertVariants };

package/dist/components/ui/avatar-group.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type AvatarProps } from "./avatar";
+/**
+ * AvatarGroup — Figma "BO UI Kit" AvatarGroup(node 1696:220). Avatar 겹쳐 쌓기.
+ *
+ * 자식 Avatar 들을 음수 마진으로 겹치고 각자 2px background 테두리(ring)로 분리한다.
+ * `size` 를 자식에 주입(자식이 명시하면 우선), `max` 초과분은 "+N" 아바타로 요약.
+ */
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 그룹 공통 아바타 크기(자식에 주입) */
+    size?: AvatarProps["size"];
+    /** 표시할 최대 개수, 초과분은 +N */
+    max?: number;
+}
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export { AvatarGroup };

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Avatar — Figma "BO UI Kit" Avatar(node 1696:153). 이미지 + 폴백(이니셜).
+ *
+ * Figma 변형: Circular(True/False) → `shape` circle/square, Size 24/28/32/36/40/48 → `size`.
+ * 폴백 배경=Figma `muted`(#e2e8f0)=프로젝트 `secondary`, 텍스트=muted-foreground, medium.
+ * `ring`(2px background 색 테두리)은 AvatarGroup 겹침 분리용. 이미지 로드 실패 시 폴백 표시.
+ */
+declare const avatarVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+    shape?: "square" | "circle" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
+    src?: string;
+    alt?: string;
+    /** 이미지 없음/로드 실패 시 표시할 이니셜 등 */
+    fallback?: React.ReactNode;
+    /** 2px background 색 테두리(그룹 겹침 분리용) */
+    ring?: boolean;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+export { Avatar, avatarVariants };

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Badge — Figma "BO UI Kit" Badge(node 9929:48567). 상태/카테고리 라벨.
+ *
+ * Figma 변형: Color(blue/red/orange/green/neutral…) × Type(Fill/Tinted) × Disabled.
+ *  - Fill  : 단색 채움(상태색) + 흰 텍스트
+ *  - Tinted: 상태색 @8% 배경 + 상태색-foreground 텍스트
+ * 색은 상태 토큰으로 매핑: blue→info(=primary), red→destructive, orange→warning,
+ * green→success, neutral→foreground. (Figma static/secondary(dark) 변형은 미구현.)
+ */
+declare const badgeVariants: (props?: ({
+    color?: "destructive" | "info" | "success" | "warning" | "neutral" | null | undefined;
+    variant?: "fill" | "tinted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof badgeVariants> {
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { Badge, badgeVariants };

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+/**
+ * Breadcrumb — Figma "BO UI Kit" Breadcrumb(node 5665:4391). 현재 위치 경로 표시.
+ *
+ * 항목들을 구분자(chevron/slash)로 연결. 링크(href 있음)=muted-foreground, 마지막(현재)=foreground.
+ * Type: Chevron(›) / Slash(/). text-sm. items 배열 API.
+ */
+export interface BreadcrumbItemData {
+    label: React.ReactNode;
+    href?: string;
+}
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    items: BreadcrumbItemData[];
+    separator?: "chevron" | "slash";
+}
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+export { Breadcrumb };

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

@@ -3,14 +3,15 @@ import { type VariantProps } from "class-variance-authority";
 /**
  * Button — Figma "BO UI Kit" Button 컴포넌트(node 1692:74)를 옮긴 React 컴포넌트.
  *
- * 7가지 타입 × 5가지 사이즈 매트릭스를 그대로 재현하며, 모든 색상/간격/타이포는
+ * 7가지 타입(Default/Outline/Secondary/Destructive/DestructiveTinted/Link/Ghost) × 5가지 사이즈
+ * 매트릭스를 그대로 재현하며, 모든 색상/간격/타이포는
  * Tailwind config(= Figma 디자인 토큰)에 매핑돼 하드코딩을 최소화했다.
  * 좌/우 아이콘 슬롯(icon, rightIcon)을 지원한다.
  *
  * @see https://coss.com/ui/docs/components/button
  */
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "outline" | "secondary" | "destructive" | "destructive-outline" | "ghost" | "link" | null | undefined;
+    variant?: "link" | "default" | "outline" | "secondary" | "destructive" | "destructive-tinted" | "ghost" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -18,6 +19,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     icon?: React.ReactNode;
     /** 우측 아이콘 */
     rightIcon?: React.ReactNode;
+    /** 알약(rounded-full) 형태 — Figma PillButton 변형 */
+    pill?: boolean;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+/**
+ * Collapsible — Figma "BO UI Kit" Collapsible(node 5677:165). 버튼으로 여닫는 패널.
+ *
+ * 트리거 행(제목 + chevron-down, 펼침 시 회전) + 펼침 시 내용. 제어/비제어(open/defaultOpen/onOpenChange).
+ */
+export interface CollapsibleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 트리거에 표시할 제목 */
+    title: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+}
+declare const Collapsible: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
+export { Collapsible };

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface DialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** 내부용: alertdialog 역할 + 바깥클릭 비활성 */
+    role?: "dialog" | "alertdialog";
+    dismissable?: boolean;
+    children?: React.ReactNode;
+}
+declare function Dialog({ open, defaultOpen, onOpenChange, role, dismissable, children }: DialogProps): React.JSX.Element;
+declare const DialogTrigger: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    showClose?: boolean;
+}
+declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+declare const DialogTitle: ({ className, id, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
+declare const DialogDescription: ({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => React.JSX.Element;
+declare const DialogFooter: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose };

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

@@ -0,0 +1,16 @@
+import { type SheetContentProps } from "./sheet";
+/**
+ * Drawer — Figma "BO UI Kit" Drawer(node 8046:330). 가장자리 패널(Sheet 기반, 여백 있는 inset 기본).
+ *
+ * Sheet 를 재사용한 프리셋: 기본 side=bottom + inset(플로팅 rounded-2xl). 제어/비제어(open).
+ * 헤더/푸터는 Sheet 의 SheetHeader/SheetTitle/SheetDescription/SheetFooter 를 그대로 사용.
+ */
+export interface DrawerProps extends Omit<SheetContentProps, "side"> {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: SheetContentProps["side"];
+}
+declare function Drawer({ open, defaultOpen, onOpenChange, side, inset, children, ...contentProps }: DrawerProps): import("react").JSX.Element;
+export { Drawer };
+export { SheetHeader as DrawerHeader, SheetTitle as DrawerTitle, SheetDescription as DrawerDescription, SheetFooter as DrawerFooter, } from "./sheet";

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

@@ -18,3 +18,49 @@ export { ToggleGroup, ToggleGroupItem } from "./toggle-group";
 export type { ToggleGroupProps, ToggleGroupItemProps } from "./toggle-group";
 export { Select, selectTriggerVariants } from "./select";
 export type { SelectProps, SelectOption } from "./select";
+export { Switch, switchVariants } from "./switch";
+export type { SwitchProps } from "./switch";
+export { Separator } from "./separator";
+export type { SeparatorProps } from "./separator";
+export { Skeleton } from "./skeleton";
+export type { SkeletonProps } from "./skeleton";
+export { Spinner, spinnerVariants } from "./spinner";
+export type { SpinnerProps } from "./spinner";
+export { Textarea, textareaVariants } from "./textarea";
+export type { TextareaProps } from "./textarea";
+export { Avatar, avatarVariants } from "./avatar";
+export type { AvatarProps } from "./avatar";
+export { AvatarGroup } from "./avatar-group";
+export type { AvatarGroupProps } from "./avatar-group";
+export { Badge, badgeVariants } from "./badge";
+export type { BadgeProps } from "./badge";
+export { NumberField, numberFieldVariants } from "./number-field";
+export type { NumberFieldProps } from "./number-field";
+export { RadioGroup, RadioGroupItem } from "./radio-group";
+export type { RadioGroupProps, RadioGroupItemProps } from "./radio-group";
+export { SegmentedControl, segmentVariants } from "./segmented-control";
+export type { SegmentedControlProps, SegmentedOption } from "./segmented-control";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+export type { TabsProps, TabsTriggerProps, TabsContentProps } from "./tabs";
+export { Accordion, AccordionItem } from "./accordion";
+export type { AccordionProps, AccordionItemProps } from "./accordion";
+export { Collapsible } from "./collapsible";
+export type { CollapsibleProps } from "./collapsible";
+export { Breadcrumb } from "./breadcrumb";
+export type { BreadcrumbProps, BreadcrumbItemData } from "./breadcrumb";
+export { Alert, alertVariants } from "./alert";
+export type { AlertProps } from "./alert";
+export { Toast } from "./toast";
+export type { ToastProps } from "./toast";
+export { Tooltip } from "./tooltip";
+export type { TooltipProps } from "./tooltip";
+export { ScrollArea } from "./scroll-area";
+export type { ScrollAreaProps } from "./scroll-area";
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, } from "./dialog";
+export type { DialogProps, DialogContentProps } from "./dialog";
+export { AlertDialog } from "./alert-dialog";
+export type { AlertDialogProps } from "./alert-dialog";
+export { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose, } from "./sheet";
+export type { SheetProps, SheetContentProps } from "./sheet";
+export { Drawer, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter } from "./drawer";
+export type { DrawerProps } from "./drawer";

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

@@ -6,7 +6,7 @@ import { type VariantProps } from "class-variance-authority";
  * 구조: 테두리 컨테이너 + [leftIcon][prefix][native input][suffix][rightIcon].
  * 상태(Figma Type 변형):
  *  - Default : border input-border
- *  - Error   : border destructive(#ef4444 빨강)   → `invalid` prop
+ *  - Error   : border destructive(#fb2c36 빨강)   → `invalid` prop
  *  - Disabled: 컨테이너 opacity 64%               → input `disabled`
  *  - Focus   : 테두리가 disabled(#45556c@30%)로 진해지고 3px 회색 글로우 링
  *              (Figma Focus 노드 7745:700 Stroke: 3px disabled@30% × opacity23% ≈ @7%, offset 없음).

package/dist/components/ui/number-field.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * NumberField — Figma "BO UI Kit" NumberField(node 7781:5501). 증감 버튼이 달린 숫자 입력.
+ *
+ * Input 과 동일한 컨테이너 토큰/포커스(회색 3px 링, border-input). 좌(−)·우(+) 스텝퍼 버튼 +
+ * 가운데 정렬 숫자 입력. size sm/md/lg(28/32/36). min/max/step·clamp 지원. 제어/비제어.
+ * 아이콘은 7일 만료 에셋 대신 인라인 SVG.
+ */
+declare const numberFieldVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface NumberFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange">, VariantProps<typeof numberFieldVariants> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
+export { NumberField, numberFieldVariants };

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+/**
+ * 오버레이 공용 내부 유틸 — Dialog / AlertDialog / Sheet / Drawer 가 공유.
+ * 포털(body), ESC 닫기 + body 스크롤 잠금, 백드롭(black@32% + blur).
+ */
+export declare function Portal({ children }: {
+    children: React.ReactNode;
+}): React.ReactPortal | null;
+/** 열림 동안 ESC 로 닫고 body 스크롤을 잠근다. */
+export declare function useOverlayBehavior(open: boolean, onClose: () => void): void;
+/** 백드롭(검정 #101012 @32% + 배경 블러). Figma Overlay 토큰. */
+export declare const backdropClass = "fixed inset-0 z-50 bg-[rgb(16_16_18_/_0.32)] backdrop-blur-sm";
+/** open/defaultOpen/onOpenChange 를 controlled/uncontrolled 로 다루는 훅. */
+export declare function useControllableOpen(open: boolean | undefined, defaultOpen: boolean, onOpenChange?: (o: boolean) => void): readonly [boolean, (o: boolean) => void];
+/**
+ * 열림 시 포커스를 패널로 옮기고 Tab/Shift+Tab 을 패널 안에 가둔다. 닫히면 이전
+ * 포커스로 복원. 초기 포커스는 내부 요소가 아니라 패널 자체(tabIndex=-1)로 둬서
+ * 포커스 링이 생겨 시각이 바뀌는 것을 막는다(패널엔 outline-none).
+ */
+export declare function useFocusTrap(open: boolean, containerRef: React.RefObject<HTMLElement | null>): void;
+/**
+ * Title/Description 존재 여부를 추적해 컨테이너에 붙일 aria-labelledby/describedby 를
+ * 만든다. 제목/설명이 실제로 렌더된 경우에만 연결(없는 id 참조 방지).
+ */
+export declare function useA11yIds(): {
+    titleId: string;
+    descId: string;
+    setHasTitle: React.Dispatch<React.SetStateAction<boolean>>;
+    setHasDesc: React.Dispatch<React.SetStateAction<boolean>>;
+    labelProps: {
+        "aria-labelledby"?: string;
+        "aria-describedby"?: string;
+    };
+};
+/** Title/Description 컴포넌트가 마운트 동안 자신의 존재를 등록한다. */
+export declare function useRegisterPresence(setPresent: (v: boolean) => void): void;

package/dist/components/ui/radio-group.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    name?: string;
+    disabled?: boolean;
+}
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface RadioGroupItemProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "title"> {
+    value: string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    /** 테두리 카드로 감쌈 */
+    cardStyle?: boolean;
+}
+declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<HTMLLabelElement>>;
+export { RadioGroup, RadioGroupItem };

package/dist/components/ui/scroll-area.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+/**
+ * ScrollArea — Figma "BO UI Kit" Scroll Area(node 7669:1745). 커스텀 스크롤바 컨테이너.
+ *
+ * overflow-auto + 얇은 커스텀 스크롤바(thumb=foreground@20%, rounded-full). 테두리/패딩은 기본 제공,
+ * 높이는 className(max-h 등)으로 지정. Figma 의 하단 fade 는 선택(scrollFade).
+ */
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 테두리/패딩 박스 스타일 적용(기본 true) */
+    bordered?: boolean;
+}
+declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+export { ScrollArea };

package/dist/components/ui/segmented-control.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * SegmentedControl — Figma "BO UI Kit" Segmented Control(node 9705:88227). 단일 선택 세그먼트.
+ *
+ * 컨테이너(bg-background, p-0.5) 안에 균등 너비 세그먼트. 선택 세그먼트만 bg-card + shadow(흰 알약),
+ * 나머지는 muted-foreground 텍스트. Style: Rounded(rounded-full) / Regular(rounded-radius) / Sharp(rounded-none).
+ * 제어/비제어(value/onValueChange). (Figma 의 다층 그림자는 shadow-xs 로 근사.)
+ */
+declare const containerVariants: (props?: ({
+    segStyle?: "rounded" | "regular" | "sharp" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const segmentVariants: (props?: ({
+    segStyle?: "rounded" | "regular" | "sharp" | null | undefined;
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SegmentedOption {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof containerVariants> {
+    options: SegmentedOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
+export { SegmentedControl, segmentVariants };

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+/**
+ * Separator — Figma "BO UI Kit" Separator(node 3605:3065). 영역 구분선.
+ *
+ * 1px 라인(`border` 토큰, #0f172b @8%). orientation: horizontal(h-px w-full) / vertical(w-px h-full).
+ * 접근성: 의미상 구분이면 `decorative={false}` → role=separator + aria-orientation, 장식이면 기본(role=none).
+ * (Figma 의 Spacing 변형은 여백 — 소비자가 className(margin)으로 처리.)
+ */
+export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+    /** 장식용(기본 true). false 면 스크린리더에 구분선으로 노출. */
+    decorative?: boolean;
+}
+declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export { Separator };