bo-ui-kit 0.1.1 → 0.2.0

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 };

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface SheetProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+declare function Sheet({ open, defaultOpen, onOpenChange, children }: SheetProps): React.JSX.Element;
+declare const SheetTrigger: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+type Side = "left" | "right" | "top" | "bottom";
+export interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    side?: Side;
+    /** 여백 있는 플로팅 패널(rounded-2xl) */
+    inset?: boolean;
+    showClose?: boolean;
+}
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+declare const SheetTitle: ({ className, id, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => React.JSX.Element;
+declare const SheetDescription: ({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => React.JSX.Element;
+declare const SheetFooter: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose };

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+/**
+ * Skeleton — Figma "BO UI Kit" Skeleton(node 7669:1885)의 로딩 플레이스홀더 프리미티브.
+ *
+ * Figma 의 Skeleton 노드는 아바타+텍스트+버튼이 배치된 **사용 예시**라, 재사용 가능한
+ * 단위 프리미티브(펄스 애니메이션이 있는 muted 블록)로 만든다. 크기/모양은 className 으로 지정.
+ * 배경색: Figma `muted`(#e2e8f0) = 프로젝트 `secondary` 토큰(우리 `muted`=foreground@4% 와 다름).
+ *
+ * @example <Skeleton className="h-10 w-10 rounded-full" />  // 아바타 자리
+ */
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+export { Skeleton };

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Spinner — Figma "BO UI Kit" Spinner(node 7707:393). 로딩 인디케이터.
+ *
+ * Figma 의 회전 프레임(이미지 에셋)은 7일 만료라 라이브러리 영구성을 위해 **인라인 SVG 링 +
+ * `animate-spin`** 으로 그린다(색은 currentColor 상속). size sm/md/lg(16/24/32).
+ */
+declare const spinnerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement>, VariantProps<typeof spinnerVariants> {
+}
+declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<SVGSVGElement>>;
+export { Spinner, spinnerVariants };

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Switch — Figma "BO UI Kit" Switch(node 7715:1962). 설정 on/off 토글.
+ *
+ * Figma 변형: Size(Default 18×30 / Large 24×44) · Checked · Disabled.
+ * 트랙: off=input(테두리 8%) / on=success(#00d492) + 안쪽 그림자. thumb: card(흰색) + shadow-xs.
+ * 제어/비제어(`checked`/`defaultChecked`/`onCheckedChange`). 접근성: role=switch + aria-checked.
+ */
+declare const switchVariants: (props?: ({
+    size?: "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onChange">, VariantProps<typeof switchVariants> {
+    /** 켜짐 상태(제어). */
+    checked?: boolean;
+    /** 비제어 초기 상태. */
+    defaultChecked?: boolean;
+    /** 상태 변경 콜백. */
+    onCheckedChange?: (checked: boolean) => void;
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export { Switch, switchVariants };

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+/**
+ * Tabs — Figma "BO UI Kit" Tabs(node 7722:82). 관련 패널 전환.
+ *
+ * Type: Default(알약 — bg-secondary 트랙 + 선택 탭 흰 카드+shadow) / WithLine(밑줄).
+ * 합성: Tabs(상태) > TabsList > TabsTrigger / TabsContent. (Figma `muted`#e2e8f0 = secondary.)
+ * 제어/비제어(value/defaultValue/onValueChange).
+ */
+type TabsVariant = "default" | "line";
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    variant?: TabsVariant;
+}
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+}
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+}
+declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Textarea — Figma "BO UI Kit" Textarea(node 7751:1067). 여러 줄 입력.
+ *
+ * Input 과 동일한 토큰/포커스 관례(회색 3px 링, border-input→focus 시 disabled/30)를 재사용한다.
+ * bg=background(#f8fafc), rounded-radius, shadow-xs. size sm/md/lg(최소높이). invalid→destructive.
+ * Figma 의 코너 리사이즈 그립은 네이티브 `resize-y` 로 대체.
+ */
+declare const textareaVariants: (props?: ({
+    inputSize?: "sm" | "md" | "lg" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">, VariantProps<typeof textareaVariants> {
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea, textareaVariants };

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Toast — Figma "BO UI Kit" Toast(node 7728:238). 떠 있는 알림 카드.
+ *
+ * Alert 과 구조는 같으나 popover 배경 + border + shadow-popover(플로팅). Type: Default/Loading/Info/
+ * Success/Warning/Error. Loading=Spinner 아이콘, 상태=색 아이콘. 제목=foreground, 설명=muted.
+ * (배치/타이머 등 알림 큐 로직은 앱이 담당 — 이 컴포넌트는 표현 단위.)
+ */
+declare const toastIconColor: (props?: ({
+    type?: "default" | "error" | "info" | "success" | "warning" | "loading" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof toastIconColor> {
+    title?: React.ReactNode;
+    icon?: React.ReactNode | false;
+    action?: React.ReactNode;
+}
+declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+export { Toast };

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+/**
+ * Tooltip — Figma "BO UI Kit" Tooltip(node 5685:185). hover/focus 시 뜨는 힌트.
+ *
+ * 트리거를 감싸고, hover/focus 시 popover 배경 + border + shadow 라벨을 표시(+화살표).
+ * side top/right/bottom/left. CSS group-hover/focus-within 기반(경량). 내용 text-xs foreground.
+ */
+export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "content"> {
+    /** 툴팁 내용 */
+    content: React.ReactNode;
+    side?: "top" | "right" | "bottom" | "left";
+}
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLSpanElement>>;
+export { Tooltip };