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

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;

package/dist/components/empty/empty.d.ts

@@ -1,11 +1,36 @@
 import { VariantProps } from 'class-variance-authority';
+/**
+ * 콘텐츠가 없을 때 빈 상태를 표시하는 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Empty>
+ *   <EmptyHeader>
+ *     <EmptyMedia><InboxIcon /></EmptyMedia>
+ *     <EmptyTitle>항목이 없습니다</EmptyTitle>
+ *     <EmptyDescription>새 항목을 추가해보세요</EmptyDescription>
+ *   </EmptyHeader>
+ *   <EmptyContent>
+ *     <Button>항목 추가</Button>
+ *   </EmptyContent>
+ * </Empty>
+ * ```
+ */
 declare function Empty({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** Empty 컴포넌트의 헤더 영역입니다. */
 declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare const emptyMediaVariants: (props?: ({
     variant?: "default" | "icon" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Empty 컴포넌트의 미디어(아이콘/이미지) 영역입니다.
+ * @param props.variant - 스타일 변형 ('default' | 'icon')
+ */
 declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): import("react/jsx-runtime").JSX.Element;
+/** Empty 컴포넌트의 제목입니다. */
 declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** Empty 컴포넌트의 설명 텍스트입니다. */
 declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+/** Empty 컴포넌트의 액션 영역입니다. */
 declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };

package/dist/components/field/field.d.ts

@@ -1,21 +1,47 @@
 import { VariantProps } from 'class-variance-authority';
 import { Label } from '../label';
+/**
+ * 폼 필드들을 그룹화하는 fieldset 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <FieldSet>
+ *   <FieldLegend>개인 정보</FieldLegend>
+ *   <Field>
+ *     <FieldLabel>이름</FieldLabel>
+ *     <Input />
+ *   </Field>
+ * </FieldSet>
+ * ```
+ */
 declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react/jsx-runtime").JSX.Element;
+/** FieldSet의 제목 컴포넌트입니다. */
 declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
     variant?: "legend" | "label";
 }): import("react/jsx-runtime").JSX.Element;
+/** 여러 Field를 그룹화하는 컴포넌트입니다. */
 declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare const fieldVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * 개별 폼 필드 컴포넌트입니다.
+ * @param props.orientation - 레이아웃 방향 ('vertical' | 'horizontal' | 'responsive')
+ */
 declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react/jsx-runtime").JSX.Element;
+/** Field의 콘텐츠 영역입니다. */
 declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** Field의 레이블 컴포넌트입니다. */
 declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
+/** Field의 제목 컴포넌트입니다. */
 declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** Field의 설명 텍스트 컴포넌트입니다. */
 declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+/** Field 사이의 구분선 컴포넌트입니다. */
 declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
     children?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+/** Field의 오류 메시지 컴포넌트입니다. */
 declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
     errors?: Array<{
         message?: string;

package/dist/components/form/form.d.ts

@@ -2,7 +2,31 @@ import { Slot } from '@radix-ui/react-slot';
 import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import * as React from "react";
 import type * as LabelPrimitive from "@radix-ui/react-label";
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import('react-hook-form').FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+/**
+ * react-hook-form 기반 폼 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * const form = useForm();
+ *
+ * <Form {...form}>
+ *   <FormField
+ *     control={form.control}
+ *     name="email"
+ *     render={({ field }) => (
+ *       <FormItem>
+ *         <FormLabel>이메일</FormLabel>
+ *         <FormControl>
+ *           <Input {...field} />
+ *         </FormControl>
+ *         <FormMessage />
+ *       </FormItem>
+ *     )}
+ *   />
+ * </Form>
+ * ```
+ */
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import('react-hook-form').FormProviderProps<TFieldValues, TContext, TTransformedValues>) => import("react").JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
 declare const useFormField: () => {
     invalid: boolean;
@@ -16,9 +40,14 @@ declare const useFormField: () => {
     formDescriptionId: string;
     formMessageId: string;
 };
+/** 폼 필드를 감싸는 컨테이너 컴포넌트입니다. */
 declare function FormItem({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** 폼 필드의 레이블 컴포넌트입니다. */
 declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/** 폼 입력 컨트롤을 감싸는 컴포넌트입니다. */
 declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): import("react/jsx-runtime").JSX.Element;
+/** 폼 필드의 설명 텍스트 컴포넌트입니다. */
 declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+/** 폼 필드의 유효성 검증 메시지 컴포넌트입니다. */
 declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element | null;
 export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };

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

@@ -1,6 +1,19 @@
 import * as React from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+/**
+ * 호버 시 미리보기 카드를 표시하는 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <HoverCard>
+ *   <HoverCardTrigger>@사용자</HoverCardTrigger>
+ *   <HoverCardContent>프로필 정보</HoverCardContent>
+ * </HoverCard>
+ * ```
+ */
 declare function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/** 호버 카드를 표시할 트리거 요소입니다. */
 declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+/** 호버 카드 콘텐츠 영역입니다. */
 declare function HoverCardContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 export { HoverCard, HoverCardTrigger, HoverCardContent };

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

@@ -1,3 +1,13 @@
 import * as React from "react";
+/**
+ * 텍스트 입력을 받는 인풋 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Input type="text" placeholder="이름을 입력하세요" />
+ * <Input type="email" placeholder="이메일" />
+ * <Input type="password" placeholder="비밀번호" />
+ * ```
+ */
 declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
 export { Input };

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

@@ -1,16 +1,35 @@
 import { VariantProps } from 'class-variance-authority';
 import { Button } from '../button';
 import * as React from "react";
+/**
+ * 입력 필드와 관련 요소들을 그룹화하는 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroupAddon align="inline-start">$</InputGroupAddon>
+ *   <InputGroupInput placeholder="0.00" />
+ * </InputGroup>
+ * ```
+ */
 declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * 입력 그룹에 추가 요소(아이콘, 텍스트, 버튼 등)를 배치하는 컴포넌트입니다.
+ * @param props.align - 배치 위치 ('inline-start' | 'inline-end' | 'block-start' | 'block-end')
+ */
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
     size?: "sm" | "icon-sm" | "xs" | "icon-xs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** 입력 그룹 내에서 사용하는 버튼 컴포넌트입니다. */
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): import("react/jsx-runtime").JSX.Element;
+/** 입력 그룹 내 텍스트 레이블 컴포넌트입니다. */
 declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+/** 입력 그룹용 입력 필드 컴포넌트입니다. */
 declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+/** 입력 그룹용 텍스트 영역 컴포넌트입니다. */
 declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/dist/components/input-otp/input-otp.d.ts

@@ -1,11 +1,34 @@
 import { OTPInput } from 'input-otp';
 import * as React from "react";
+/**
+ * OTP(일회용 비밀번호) 입력을 위한 컴포넌트입니다.
+ *
+ * @param props.maxLength - 최대 입력 자릿수
+ * @param props.containerClassName - 컨테이너 클래스명
+ *
+ * @example
+ * ```tsx
+ * <InputOTP maxLength={6}>
+ *   <InputOTPGroup>
+ *     <InputOTPSlot index={0} />
+ *     <InputOTPSlot index={1} />
+ *     <InputOTPSlot index={2} />
+ *   </InputOTPGroup>
+ * </InputOTP>
+ * ```
+ */
 declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
     containerClassName?: string;
 }): import("react/jsx-runtime").JSX.Element;
+/** OTP 슬롯들을 그룹화하는 컴포넌트입니다. */
 declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/**
+ * 개별 OTP 입력 슬롯입니다.
+ * @param props.index - 슬롯 인덱스 (0부터 시작)
+ */
 declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & {
     index: number;
 }): import("react/jsx-runtime").JSX.Element;
+/** OTP 그룹 사이의 구분선 컴포넌트입니다. */
 declare function InputOTPSeparator({ ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/dist/components/item/item.d.ts

@@ -1,23 +1,55 @@
 import { VariantProps } from 'class-variance-authority';
 import { Separator } from '../separator';
 import * as React from "react";
+/**
+ * 리스트 아이템들을 그룹화하는 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <ItemGroup>
+ *   <Item>
+ *     <ItemMedia variant="icon"><UserIcon /></ItemMedia>
+ *     <ItemContent>
+ *       <ItemTitle>제목</ItemTitle>
+ *       <ItemDescription>설명</ItemDescription>
+ *     </ItemContent>
+ *   </Item>
+ * </ItemGroup>
+ * ```
+ */
 declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** 아이템 사이의 구분선 컴포넌트입니다. */
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
 declare const itemVariants: (props?: ({
     variant?: "default" | "outline" | "muted" | null | undefined;
     size?: "default" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * 개별 리스트 아이템 컴포넌트입니다.
+ * @param props.variant - 스타일 변형 ('default' | 'outline' | 'muted')
+ * @param props.size - 크기 ('default' | 'sm')
+ */
 declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare const itemMediaVariants: (props?: ({
-    variant?: "default" | "image" | "icon" | null | undefined;
+    variant?: "image" | "default" | "icon" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * 아이템의 미디어(아이콘/이미지) 영역입니다.
+ * @param props.variant - 스타일 변형 ('default' | 'icon' | 'image')
+ */
 declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): import("react/jsx-runtime").JSX.Element;
+/** 아이템의 콘텐츠 영역입니다. */
 declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** 아이템의 제목 컴포넌트입니다. */
 declare function ItemTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** 아이템의 설명 텍스트입니다. */
 declare function ItemDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+/** 아이템의 액션 버튼 영역입니다. */
 declare function ItemActions({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** 아이템의 헤더 영역입니다. */
 declare function ItemHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/** 아이템의 푸터 영역입니다. */
 declare function ItemFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, };

package/dist/components/kbd/kbd.d.ts

@@ -1,3 +1,13 @@
+/**
+ * 키보드 단축키를 표시하는 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Kbd>⌘</Kbd>
+ * <Kbd>K</Kbd>
+ * ```
+ */
 declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): import("react/jsx-runtime").JSX.Element;
+/** 여러 키보드 단축키를 그룹화하는 컴포넌트입니다. */
 declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export { Kbd, KbdGroup };

package/dist/components/label/label.d.ts

@@ -1,4 +1,13 @@
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
+/**
+ * 폼 요소에 대한 레이블을 표시하는 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email">이메일</Label>
+ * <Input id="email" type="email" />
+ * ```
+ */
 declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 export { Label };

package/dist/components/menubar/menubar.d.ts

@@ -1,22 +1,47 @@
 import * as React from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
+/**
+ * 수평 메뉴바 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Menubar>
+ *   <MenubarMenu>
+ *     <MenubarTrigger>파일</MenubarTrigger>
+ *     <MenubarContent>
+ *       <MenubarItem>새로 만들기</MenubarItem>
+ *       <MenubarItem>열기</MenubarItem>
+ *     </MenubarContent>
+ *   </MenubarMenu>
+ * </Menubar>
+ * ```
+ */
 declare function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/** 개별 메뉴 컨테이너입니다. */
 declare function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>): import("react/jsx-runtime").JSX.Element;
 declare function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
 declare function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+/** 메뉴를 여는 트리거 버튼입니다. */
 declare function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+/** 메뉴 콘텐츠 드롭다운입니다. */
 declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+/** 메뉴 아이템 컴포넌트입니다. */
 declare function MenubarItem({ className, inset, variant, ...props }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
     inset?: boolean;
     variant?: "default" | "destructive";
 }): import("react/jsx-runtime").JSX.Element;
+/** 체크박스 형태의 메뉴 아이템입니다. */
 declare function MenubarCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+/** 라디오 형태의 메뉴 아이템입니다. */
 declare function MenubarRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+/** 메뉴 섹션의 레이블입니다. */
 declare function MenubarLabel({ className, inset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
     inset?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+/** 메뉴 아이템 사이의 구분선입니다. */
 declare function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+/** 메뉴 아이템의 단축키 표시입니다. */
 declare function MenubarShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 declare function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
 declare function MenubarSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {

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

@@ -1,14 +1,40 @@
 import * as React from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+/**
+ * 수평 네비게이션 메뉴 컴포넌트입니다.
+ *
+ * @param props.viewport - 뷰포트 사용 여부
+ *
+ * @example
+ * ```tsx
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuTrigger>시작하기</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <NavigationMenuLink>소개</NavigationMenuLink>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ * ```
+ */
 declare function NavigationMenu({ className, children, viewport, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
     viewport?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+/** 네비게이션 메뉴 아이템들의 목록입니다. */
 declare function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+/** 개별 네비게이션 메뉴 아이템입니다. */
 declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
 declare const navigationMenuTriggerStyle: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/** 드롭다운을 여는 트리거 버튼입니다. */
 declare function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+/** 네비게이션 메뉴의 드롭다운 콘텐츠입니다. */
 declare function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+/** 드롭다운 콘텐츠를 표시하는 뷰포트입니다. */
 declare function NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
+/** 네비게이션 링크 컴포넌트입니다. */
 declare function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): import("react/jsx-runtime").JSX.Element;
+/** 현재 활성 메뉴를 가리키는 인디케이터입니다. */
 declare function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;
 export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, };

package/dist/components/pagination/pagination.d.ts

@@ -1,13 +1,39 @@
 import { Button } from '../button';
 import * as React from "react";
+/**
+ * 페이지 목록을 탐색하는 페이지네이션 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Pagination>
+ *   <PaginationContent>
+ *     <PaginationItem>
+ *       <PaginationPrevious href="#" />
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationLink href="#" isActive>1</PaginationLink>
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationNext href="#" />
+ *     </PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ * ```
+ */
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
 declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
 declare function PaginationItem({ ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
 type PaginationLinkProps = {
     isActive?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
+/**
+ * 페이지네이션 링크입니다.
+ * @param props.isActive - 현재 페이지 여부
+ */
 declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+/** 이전 페이지로 이동하는 링크입니다. */
 declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+/** 다음 페이지로 이동하는 링크입니다. */
 declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
 declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };

package/dist/components/popover/popover.d.ts

@@ -1,7 +1,24 @@
 import { Popover as PopoverPrimitive } from 'radix-ui';
 import * as React from "react";
+/**
+ * 트리거 요소 근처에 팝업 콘텐츠를 표시하는 팝오버 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger>열기</PopoverTrigger>
+ *   <PopoverContent>팝오버 내용</PopoverContent>
+ * </Popover>
+ * ```
+ */
 declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/** 팝오버를 열기 위한 트리거 요소입니다. */
 declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 팝오버의 콘텐츠 영역입니다.
+ * @param props.align - 정렬 방식 ('start' | 'center' | 'end')
+ * @param props.sideOffset - 트리거와의 간격 (기본값: 4)
+ */
 declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/components/progress/progress.d.ts

@@ -1,4 +1,14 @@
 import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
+/**
+ * 작업 진행 상태를 시각적으로 표시하는 프로그레스 바 컴포넌트입니다.
+ *
+ * @param props.value - 진행률 (0-100)
+ *
+ * @example
+ * ```tsx
+ * <Progress value={45} />
+ * ```
+ */
 declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 export { Progress };

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

@@ -1,5 +1,17 @@
 import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+/**
+ * 여러 옵션 중 하나를 선택하는 라디오 그룹 컴포넌트입니다.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup defaultValue="option1">
+ *   <RadioGroupItem value="option1" />
+ *   <RadioGroupItem value="option2" />
+ * </RadioGroup>
+ * ```
+ */
 declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/** 라디오 그룹의 개별 옵션 아이템입니다. */
 declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
 export { RadioGroup, RadioGroupItem };

package/dist/components/resizable/resizable.d.ts

@@ -1,7 +1,26 @@
 import * as React from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
+/**
+ * 크기 조절 가능한 패널 그룹 컴포넌트입니다.
+ *
+ * @param props.direction - 패널 방향 ('horizontal' | 'vertical')
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanelGroup direction="horizontal">
+ *   <ResizablePanel>패널 1</ResizablePanel>
+ *   <ResizableHandle />
+ *   <ResizablePanel>패널 2</ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ */
 declare function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>): import("react/jsx-runtime").JSX.Element;
+/** 크기 조절 가능한 패널입니다. */
 declare function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 패널 크기 조절 핸들입니다.
+ * @param props.withHandle - 드래그 핸들 아이콘 표시 여부
+ */
 declare function ResizableHandle({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
     withHandle?: boolean;
 }): import("react/jsx-runtime").JSX.Element;