@mzc-fe/design-system 0.0.6 → 0.0.7-rc.1

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

@@ -1,7 +1,57 @@
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
+/**
+ * 접을 수 있는 콘텐츠 섹션을 제공하는 아코디언 컴포넌트입니다.
+ * Radix UI의 Accordion primitive를 기반으로 합니다.
+ *
+ * @example
+ * ```tsx
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>제목</AccordionTrigger>
+ *     <AccordionContent>내용</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @param props - Radix UI Accordion.Root props
+ * @param props.type - 'single'은 하나의 아이템만, 'multiple'은 여러 아이템을 동시에 열 수 있습니다
+ * @param props.collapsible - type이 'single'일 때, 열린 아이템을 다시 클릭하여 닫을 수 있게 합니다
+ * @param props.defaultValue - 초기에 열려있을 아이템의 value
+ * @param props.value - 제어 모드에서 열려있는 아이템의 value
+ * @param props.onValueChange - 열린 아이템이 변경될 때 호출되는 콜백
+ * @param props.disabled - 모든 아이템을 비활성화합니다
+ */
 declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 아코디언의 개별 아이템을 나타내는 컴포넌트입니다.
+ * 각 아이템은 고유한 value를 가져야 합니다.
+ *
+ * @param props - Radix UI Accordion.Item props
+ * @param props.value - 아이템의 고유 식별자 (필수)
+ * @param props.disabled - 이 아이템만 비활성화합니다
+ * @param props.className - 추가 CSS 클래스
+ */
 declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 아코디언 아이템을 열고 닫는 트리거 버튼입니다.
+ * 클릭하면 해당 아이템의 콘텐츠가 펼쳐지거나 접힙니다.
+ * 우측에 화살표 아이콘이 표시되며, 열린 상태에서는 회전합니다.
+ *
+ * @param props - Radix UI Accordion.Trigger props
+ * @param props.children - 트리거에 표시될 텍스트 또는 요소
+ * @param props.className - 추가 CSS 클래스
+ * @param props.disabled - 트리거를 비활성화합니다
+ */
 declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 아코디언 아이템의 접히는 콘텐츠 영역입니다.
+ * 트리거를 클릭하면 애니메이션과 함께 펼쳐지거나 접힙니다.
+ *
+ * @param props - Radix UI Accordion.Content props
+ * @param props.children - 콘텐츠 영역에 표시될 내용
+ * @param props.className - 내부 콘텐츠 래퍼에 적용될 추가 CSS 클래스
+ * @param props.forceMount - 닫힌 상태에서도 DOM에 마운트 유지 (애니메이션용)
+ */
 declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -1,9 +1,40 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
+/**
+ * Alert 컴포넌트의 스타일 변형을 정의합니다.
+ */
 declare const alertVariants: (props?: ({
     variant?: "default" | "destructive" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * 사용자에게 중요한 정보를 전달하는 알림 컴포넌트입니다.
+ * 아이콘, 제목, 설명을 포함할 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="default">
+ *   <InfoIcon />
+ *   <AlertTitle>알림</AlertTitle>
+ *   <AlertDescription>중요한 정보입니다.</AlertDescription>
+ * </Alert>
+ * ```
+ *
+ * @param props.variant - 'default' | 'destructive' 스타일 변형
+ * @param props.className - 추가 CSS 클래스
+ */
 declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Alert의 제목을 표시하는 컴포넌트입니다.
+ *
+ * @param props.className - 추가 CSS 클래스
+ * @param props.children - 제목 텍스트
+ */
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Alert의 상세 설명을 표시하는 컴포넌트입니다.
+ *
+ * @param props.className - 추가 CSS 클래스
+ * @param props.children - 설명 내용
+ */
 declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export { Alert, AlertTitle, AlertDescription };

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

@@ -1,14 +1,49 @@
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+/**
+ * 사용자의 확인이 필요한 중요한 작업에 대한 모달 다이얼로그입니다.
+ * 일반 Dialog와 달리 배경 클릭이나 Escape로 닫히지 않습니다.
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog>
+ *   <AlertDialogTrigger asChild>
+ *     <Button>삭제</Button>
+ *   </AlertDialogTrigger>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader>
+ *       <AlertDialogTitle>정말 삭제하시겠습니까?</AlertDialogTitle>
+ *       <AlertDialogDescription>이 작업은 취소할 수 없습니다.</AlertDialogDescription>
+ *     </AlertDialogHeader>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel>취소</AlertDialogCancel>
+ *       <AlertDialogAction>삭제</AlertDialogAction>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ * ```
+ */
 declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+/**
+ * AlertDialog의 메인 콘텐츠 영역입니다.
+ * 자동으로 Overlay와 Portal을 포함합니다.
+ */
 declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+/**
+ * AlertDialog의 확인 버튼입니다.
+ * 클릭 시 다이얼로그가 닫히고 지정된 액션이 실행됩니다.
+ */
 declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): import("react/jsx-runtime").JSX.Element;
+/**
+ * AlertDialog의 취소 버튼입니다.
+ * 클릭 시 다이얼로그가 닫히고 아무 작업도 수행하지 않습니다.
+ */
 declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): import("react/jsx-runtime").JSX.Element;
 export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/aspect-ratio/aspect-ratio.d.ts

@@ -1,3 +1,15 @@
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+/**
+ * 지정된 비율로 콘텐츠 영역을 유지하는 컴포넌트입니다.
+ *
+ * @param props.ratio - 가로:세로 비율 (예: 16/9, 4/3, 1)
+ *
+ * @example
+ * ```tsx
+ * <AspectRatio ratio={16/9}>
+ *   <img src="image.jpg" className="object-cover" />
+ * </AspectRatio>
+ * ```
+ */
 declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 export { AspectRatio };

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

@@ -1,5 +1,16 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
+/**
+ * 사용자의 프로필 이미지나 이니셜을 표시하는 아바타 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Avatar>
+ *   <AvatarImage src="/profile.jpg" alt="사용자" />
+ *   <AvatarFallback>AB</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
 declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
 declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;

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

@@ -3,6 +3,18 @@ import * as React from "react";
 declare const badgeVariants: (props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * 상태, 카테고리, 카운트 등을 표시하는 뱃지 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="default">New</Badge>
+ * <Badge variant="destructive">Error</Badge>
+ * ```
+ *
+ * @param props.variant - 'default' | 'secondary' | 'destructive' | 'outline'
+ * @param props.asChild - true면 자식 요소로 렌더링 (링크 등)
+ */
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,34 @@
 import * as React from "react";
+/**
+ * 현재 페이지의 경로를 계층적으로 보여주는 브레드크럼 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">홈</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>현재 페이지</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ */
 declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+/** 브레드크럼 아이템들을 감싸는 리스트입니다. */
 declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
+/** 브레드크럼 개별 아이템입니다. */
 declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+/** 클릭 가능한 브레드크럼 링크입니다. */
 declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+/** 현재 페이지를 나타내는 비활성 텍스트입니다. */
 declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+/** 아이템 사이의 구분자입니다. */
 declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
 declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

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

@@ -4,6 +4,21 @@ declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * 클릭 가능한 버튼 컴포넌트입니다.
+ * 다양한 variant와 size를 지원합니다.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="default">기본 버튼</Button>
+ * <Button variant="destructive">삭제</Button>
+ * <Button variant="outline" size="sm">작은 버튼</Button>
+ * ```
+ *
+ * @param props.variant - 버튼 스타일: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+ * @param props.size - 버튼 크기: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'
+ * @param props.asChild - true면 자식 요소로 렌더링 (링크 등)
+ */
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/button-group/button-group.d.ts

@@ -3,9 +3,25 @@ import { Separator } from '../separator';
 declare const buttonGroupVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * 관련 버튼들을 그룹으로 묶어주는 컴포넌트입니다.
+ *
+ * @param props.orientation - 버튼 그룹 방향 ('horizontal' | 'vertical')
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup>
+ *   <Button>One</Button>
+ *   <Button>Two</Button>
+ *   <Button>Three</Button>
+ * </ButtonGroup>
+ * ```
+ */
 declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
+/** 버튼 그룹 내 텍스트 레이블 컴포넌트입니다. */
 declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+/** 버튼 그룹 내 구분선 컴포넌트입니다. */
 declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };

package/dist/components/calendar/calendar.d.ts

@@ -1,6 +1,21 @@
 import { DayPicker, DayButton } from 'react-day-picker';
 import { Button } from '../button';
 import * as React from "react";
+/**
+ * 날짜 선택을 위한 캘린더 컴포넌트입니다.
+ *
+ * @param props.mode - 선택 모드 ('single' | 'range' | 'multiple')
+ * @param props.showOutsideDays - 현재 월 외의 날짜 표시 여부
+ *
+ * @example
+ * ```tsx
+ * <Calendar
+ *   mode="single"
+ *   selected={date}
+ *   onSelect={setDate}
+ * />
+ * ```
+ */
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/card/card.d.ts

@@ -1,4 +1,19 @@
 import * as React from "react";
+/**
+ * 콘텐츠를 그룹화하여 표시하는 카드 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>제목</CardTitle>
+ *     <CardDescription>설명</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>내용</CardContent>
+ *   <CardFooter>푸터</CardFooter>
+ * </Card>
+ * ```
+ */
 declare function Card({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/components/carousel/carousel.d.ts

@@ -11,9 +11,33 @@ type CarouselProps = {
     orientation?: "horizontal" | "vertical";
     setApi?: (api: CarouselApi) => void;
 };
+/**
+ * 슬라이드 형태로 콘텐츠를 표시하는 캐러셀 컴포넌트입니다.
+ *
+ * @param props.orientation - 캐러셀 방향 ('horizontal' | 'vertical')
+ * @param props.opts - Embla Carousel 옵션
+ * @param props.plugins - Embla Carousel 플러그인
+ * @param props.setApi - API 인스턴스 설정 콜백
+ *
+ * @example
+ * ```tsx
+ * <Carousel>
+ *   <CarouselContent>
+ *     <CarouselItem>슬라이드 1</CarouselItem>
+ *     <CarouselItem>슬라이드 2</CarouselItem>
+ *   </CarouselContent>
+ *   <CarouselPrevious />
+ *   <CarouselNext />
+ * </Carousel>
+ * ```
+ */
 declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): import("react/jsx-runtime").JSX.Element;
+/** 캐러셀 콘텐츠 컨테이너입니다. */
 declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** 개별 캐러셀 슬라이드 아이템입니다. */
 declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** 이전 슬라이드로 이동하는 버튼입니다. */
 declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+/** 다음 슬라이드로 이동하는 버튼입니다. */
 declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
 export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };

package/dist/components/chart/chart.d.ts

@@ -16,6 +16,24 @@ export type ChartConfig = {
         theme: Record<keyof typeof THEMES, string>;
     });
 };
+/**
+ * Recharts 기반 차트를 위한 컨테이너 컴포넌트입니다.
+ *
+ * @param props.config - 차트 데이터 시리즈 설정 (레이블, 색상, 아이콘)
+ *
+ * @example
+ * ```tsx
+ * const chartConfig = {
+ *   value: { label: "값", color: "hsl(var(--chart-1))" }
+ * };
+ *
+ * <ChartContainer config={chartConfig}>
+ *   <BarChart data={data}>
+ *     <Bar dataKey="value" />
+ *   </BarChart>
+ * </ChartContainer>
+ * ```
+ */
 declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
     config: ChartConfig;
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
@@ -25,6 +43,7 @@ declare const ChartStyle: ({ id, config }: {
     config: ChartConfig;
 }) => import("react/jsx-runtime").JSX.Element | null;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+/** 차트 툴팁 콘텐츠 컴포넌트입니다. */
 declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
     hideLabel?: boolean;
     hideIndicator?: boolean;
@@ -33,6 +52,7 @@ declare function ChartTooltipContent({ active, payload, className, indicator, hi
     labelKey?: string;
 }): import("react/jsx-runtime").JSX.Element | null;
 declare const ChartLegend: typeof RechartsPrimitive.Legend;
+/** 차트 범례 콘텐츠 컴포넌트입니다. */
 declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
     hideIcon?: boolean;
     nameKey?: string;

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

@@ -1,4 +1,13 @@
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+/**
+ * 선택/해제가 가능한 체크박스 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox id="terms" />
+ * <label htmlFor="terms">이용약관에 동의합니다</label>
+ * ```
+ */
 declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 export { Checkbox };

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

@@ -1,5 +1,18 @@
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+/**
+ * 콘텐츠를 접고 펼 수 있는 컬랩서블 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTrigger>토글</CollapsibleTrigger>
+ *   <CollapsibleContent>숨겨진 콘텐츠</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
 declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/** 컬랩서블을 열고 닫는 트리거입니다. */
 declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react/jsx-runtime").JSX.Element;
+/** 접혔다 펼쳐지는 콘텐츠 영역입니다. */
 declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react/jsx-runtime").JSX.Element;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/components/command/command.d.ts

@@ -1,18 +1,36 @@
 import { Command as CommandPrimitive } from 'cmdk';
 import { Dialog } from '../dialog';
 import * as React from "react";
+/**
+ * 키보드 기반의 명령 팔레트/검색 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Command>
+ *   <CommandInput placeholder="검색..." />
+ *   <CommandList>
+ *     <CommandGroup heading="제안">
+ *       <CommandItem>항목 1</CommandItem>
+ *     </CommandGroup>
+ *   </CommandList>
+ * </Command>
+ * ```
+ */
 declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
+/** 다이얼로그 형태의 커맨드 컴포넌트입니다. */
 declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
     title?: string;
     description?: string;
     className?: string;
     showCloseButton?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+/** 커맨드 검색 입력창입니다. */
 declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): import("react/jsx-runtime").JSX.Element;
 declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
 declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
 declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
 declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+/** 선택 가능한 커맨드 아이템입니다. */
 declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
 declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/components/context-menu/context-menu.d.ts

@@ -1,5 +1,19 @@
 import * as React from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+/**
+ * 우클릭 시 표시되는 컨텍스트 메뉴 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu>
+ *   <ContextMenuTrigger>우클릭하세요</ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <ContextMenuItem>복사</ContextMenuItem>
+ *     <ContextMenuItem>붙여넣기</ContextMenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ * ```
+ */
 declare function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
@@ -11,6 +25,10 @@ declare function ContextMenuSubTrigger({ className, inset, children, ...props }:
 }): import("react/jsx-runtime").JSX.Element;
 declare function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
 declare function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 컨텍스트 메뉴 아이템입니다.
+ * @param props.variant - 스타일 변형 ('default' | 'destructive')
+ */
 declare function ContextMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
     inset?: boolean;
     variant?: "default" | "destructive";

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

@@ -1,15 +1,40 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+/**
+ * 사용자의 주의를 끌거나 중요한 정보를 표시하는 모달 다이얼로그 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger>열기</DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>제목</DialogTitle>
+ *       <DialogDescription>설명</DialogDescription>
+ *     </DialogHeader>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
 declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/** 다이얼로그를 열기 위한 트리거 요소입니다. */
 declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
 declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 다이얼로그의 메인 콘텐츠 영역입니다.
+ * @param props.showCloseButton - 닫기 버튼 표시 여부 (기본값: true)
+ */
 declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+/** 다이얼로그 헤더 영역으로, 제목과 설명을 포함합니다. */
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** 다이얼로그 푸터 영역으로, 액션 버튼들을 포함합니다. */
 declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** 다이얼로그 제목 컴포넌트입니다. */
 declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+/** 다이얼로그 설명 컴포넌트입니다. */
 declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

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

@@ -1,13 +1,31 @@
 import { Drawer as DrawerPrimitive } from 'vaul';
 import * as React from "react";
+/**
+ * 화면 하단에서 슬라이드업되는 모바일 친화적 드로어 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Drawer>
+ *   <DrawerTrigger>열기</DrawerTrigger>
+ *   <DrawerContent>
+ *     <DrawerHeader>
+ *       <DrawerTitle>제목</DrawerTitle>
+ *     </DrawerHeader>
+ *   </DrawerContent>
+ * </Drawer>
+ * ```
+ */
 declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
 declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
 declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+/** 드로어 헤더 영역입니다. */
 declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** 드로어 푸터 영역입니다. */
 declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** 드로어 제목 컴포넌트입니다. */
 declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
 declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
 export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -1,16 +1,37 @@
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+/**
+ * 트리거를 클릭하면 표시되는 드롭다운 메뉴 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger>메뉴</DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem>항목 1</DropdownMenuItem>
+ *     <DropdownMenuItem>항목 2</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
 declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 드롭다운 메뉴 아이템입니다.
+ * @param props.inset - 왼쪽 여백 추가 여부
+ * @param props.variant - 스타일 변형 ('default' | 'destructive')
+ */
 declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
     variant?: "default" | "destructive";
 }): import("react/jsx-runtime").JSX.Element;
+/** 체크박스 형태의 메뉴 아이템입니다. */
 declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+/** 라디오 버튼 형태의 메뉴 아이템입니다. */
 declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
     inset?: boolean;