@hua-labs/ui 1.0.0 → 1.1.0-alpha.0.1

package/dist/components/PageTransition.d.ts

@@ -1,15 +1,58 @@
 import React from 'react';
+/**
+ * PageTransition 컴포넌트의 props / PageTransition component props
+ * @typedef {Object} PageTransitionProps
+ * @property {React.ReactNode} children - 페이지 내용 / Page content
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {number} [duration=300] - 전환 지속 시간 (ms) / Transition duration (ms)
+ * @property {'fade' | 'slide' | 'scale' | 'flip'} [variant='fade'] - 전환 애니메이션 타입 / Transition animation type
+ * @property {'default' | 'dots' | 'bars' | 'ring' | 'ripple'} [loadingVariant='ripple'] - 로딩 스피너 타입 / Loading spinner type
+ * @property {string} [loadingText='페이지 로딩 중...'] - 로딩 텍스트 / Loading text
+ * @property {boolean} [showLoading=true] - 로딩 표시 여부 / Show loading
+ * @property {() => void} [onTransitionStart] - 전환 시작 콜백 / Transition start callback
+ * @property {() => void} [onTransitionEnd] - 전환 종료 콜백 / Transition end callback
+ */
 export interface PageTransitionProps {
     children: React.ReactNode;
     className?: string;
     duration?: number;
     variant?: 'fade' | 'slide' | 'scale' | 'flip';
-    loadingVariant?: 'default' | 'rhythm' | 'flower' | 'heart' | 'star' | 'butterfly' | 'dots' | 'bars' | 'ring' | 'ripple';
+    loadingVariant?: 'default' | 'dots' | 'bars' | 'ring' | 'ripple';
     loadingText?: string;
     showLoading?: boolean;
     onTransitionStart?: () => void;
     onTransitionEnd?: () => void;
 }
+/**
+ * PageTransition 컴포넌트 / PageTransition component
+ *
+ * 페이지 전환 애니메이션을 제공하는 컴포넌트입니다.
+ * 다양한 전환 효과와 로딩 스피너를 지원합니다.
+ *
+ * Component that provides page transition animations.
+ * Supports various transition effects and loading spinners.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <PageTransition>
+ *   <div>페이지 내용</div>
+ * </PageTransition>
+ *
+ * @example
+ * // Slide 전환 / Slide transition
+ * <PageTransition
+ *   variant="slide"
+ *   duration={500}
+ *   loadingVariant="dots"
+ * >
+ *   <div>페이지 내용</div>
+ * </PageTransition>
+ *
+ * @param {PageTransitionProps} props - PageTransition 컴포넌트의 props / PageTransition component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} PageTransition 컴포넌트 / PageTransition component
+ */
 export declare const PageTransition: React.ForwardRefExoticComponent<PageTransitionProps & React.RefAttributes<HTMLDivElement>>;
 export declare const FadeTransition: React.ForwardRefExoticComponent<Omit<PageTransitionProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
 export declare const SlideTransition: React.ForwardRefExoticComponent<Omit<PageTransitionProps, "variant"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/PageTransition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageTransition.d.ts","sourceRoot":"","sources":["../../src/components/PageTransition.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;IAC7C,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;IACvH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CAC7B;AAED,eAAO,MAAM,cAAc,4FAoEzB,CAAA;AAKF,eAAO,MAAM,cAAc,6GAEzB,CAAA;AAEF,eAAO,MAAM,eAAe,6GAE1B,CAAA;AAEF,eAAO,MAAM,eAAe,6GAE1B,CAAA;AAEF,eAAO,MAAM,cAAc,6GAEzB,CAAA"}
+{"version":3,"file":"PageTransition.d.ts","sourceRoot":"","sources":["../../src/components/PageTransition.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;IAC7C,cAAc,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;IAChE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,cAAc,4FAsEzB,CAAA;AAKF,eAAO,MAAM,cAAc,6GAEzB,CAAA;AAEF,eAAO,MAAM,eAAe,6GAE1B,CAAA;AAEF,eAAO,MAAM,eAAe,6GAE1B,CAAA;AAEF,eAAO,MAAM,cAAc,6GAEzB,CAAA"}

package/dist/components/Pagination.d.ts

@@ -1,4 +1,18 @@
-import * as React from "react";
+import React from "react";
+/**
+ * Pagination 컴포넌트의 props / Pagination component props
+ * @typedef {Object} PaginationProps
+ * @property {number} currentPage - 현재 페이지 번호 / Current page number
+ * @property {number} totalPages - 전체 페이지 수 / Total number of pages
+ * @property {(page: number) => void} onPageChange - 페이지 변경 콜백 / Page change callback
+ * @property {boolean} [showFirstLast=true] - 첫/마지막 페이지 버튼 표시 여부 / Show first/last page buttons
+ * @property {boolean} [showPrevNext=true] - 이전/다음 페이지 버튼 표시 여부 / Show previous/next page buttons
+ * @property {number} [maxVisiblePages=5] - 최대 표시 페이지 수 / Maximum visible page numbers
+ * @property {"sm" | "md" | "lg"} [size="md"] - Pagination 크기 / Pagination size
+ * @property {"default" | "outlined" | "minimal"} [variant="default"] - Pagination 스타일 변형 / Pagination style variant
+ * @property {"square" | "circle"} [shape="square"] - 버튼 모양 / Button shape
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
 export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
     currentPage: number;
     totalPages: number;
@@ -8,7 +22,44 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
     maxVisiblePages?: number;
     size?: "sm" | "md" | "lg";
     variant?: "default" | "outlined" | "minimal";
+    shape?: "square" | "circle";
 }
+/**
+ * Pagination 컴포넌트 / Pagination component
+ *
+ * 페이지네이션 컨트롤을 제공하는 컴포넌트입니다.
+ * 첫/마지막 페이지, 이전/다음 페이지 버튼을 지원하며,
+ * 많은 페이지가 있을 경우 자동으로 생략 표시(...)를 합니다.
+ *
+ * Component that provides pagination controls.
+ * Supports first/last page and previous/next page buttons,
+ * and automatically shows ellipsis (...) when there are many pages.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * const [page, setPage] = useState(1)
+ *
+ * <Pagination
+ *   currentPage={page}
+ *   totalPages={10}
+ *   onPageChange={setPage}
+ * />
+ *
+ * @example
+ * // Outlined 스타일, 원형 버튼 / Outlined style, circular buttons
+ * <Pagination
+ *   currentPage={page}
+ *   totalPages={20}
+ *   onPageChange={setPage}
+ *   variant="outlined"
+ *   shape="circle"
+ * />
+ *
+ * @param {PaginationProps} props - Pagination 컴포넌트의 props / Pagination component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Pagination 컴포넌트 / Pagination component
+ */
 declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
 export declare const PaginationOutlined: React.ForwardRefExoticComponent<Omit<PaginationProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
 export declare const PaginationMinimal: React.ForwardRefExoticComponent<Omit<PaginationProps, "variant"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;CAC7C;AAED,QAAA,MAAM,UAAU,wFAyMf,CAAA;AAID,eAAO,MAAM,kBAAkB,yGAI9B,CAAA;AAGD,eAAO,MAAM,iBAAiB,yGAI7B,CAAA;AAID,eAAO,MAAM,kBAAkB;iBAChB,MAAM;mBACJ,MAAM;eACV,OAAO;wCAuBnB,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;IAC5C,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,QAAA,MAAM,UAAU,wFA2Nf,CAAA;AAID,eAAO,MAAM,kBAAkB,yGAI9B,CAAA;AAGD,eAAO,MAAM,iBAAiB,yGAI7B,CAAA;AAID,eAAO,MAAM,kBAAkB;iBAChB,MAAM;mBACJ,MAAM;eACV,OAAO;wCAkCnB,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/Panel.d.ts

@@ -0,0 +1,99 @@
+import React from "react";
+import { CardProps } from "./Card";
+/**
+ * Panel 컴포넌트의 props / Panel component props
+ * @typedef {Object} PanelProps
+ * @property {"default" | "solid" | "glass" | "outline" | "elevated" | "neon" | "holographic" | "cyberpunk" | "minimal" | "luxury"} [style="default"] - Panel 스타일 / Panel style
+ * @property {"none" | "glow" | "shadow" | "gradient" | "animated"} [effect="none"] - Panel 효과 / Panel effect
+ * @property {number} [transparency=1] - 투명도 (0-1) / Transparency (0-1)
+ * @property {number} [blurIntensity=0] - backdrop-blur 강도 (px) / Backdrop blur intensity (px)
+ * @property {number} [borderOpacity=1] - 보더 투명도 (0-1) / Border opacity (0-1)
+ * @property {number} [shadowOpacity=1] - 그림자 투명도 (0-1) / Shadow opacity (0-1)
+ * @property {number} [glowIntensity=0] - 글로우 강도 (px) / Glow intensity (px)
+ * @property {string} [glowColor="blue"] - 글로우 색상 / Glow color
+ * @property {boolean} [particleEffect=false] - 파티클 효과 활성화 / Enable particle effect
+ * @property {boolean} [hoverEffect=false] - 호버 효과 활성화 / Enable hover effect
+ * @property {boolean} [animationEffect=false] - 애니메이션 효과 활성화 / Enable animation effect
+ * @property {"none" | "small" | "sm" | "medium" | "md" | "large" | "lg" | "xl" | "custom"} [padding="md"] - 패딩 크기 / Padding size
+ * @property {string} [customPadding] - 커스텀 패딩 / Custom padding
+ * @property {"none" | "sm" | "md" | "lg" | "xl" | "full" | "custom"} [rounded="lg"] - 둥근 모서리 크기 / Rounded corner size
+ * @property {string} [customRounded] - 커스텀 둥근 모서리 / Custom rounded corners
+ * @property {"solid" | "gradient" | "pattern" | "image" | "video"} [background="solid"] - 배경 타입 / Background type
+ * @property {string[]} [gradientColors] - 그라디언트 색상 배열 / Gradient color array
+ * @property {"dots" | "lines" | "grid" | "waves" | "custom"} [patternType="dots"] - 패턴 타입 / Pattern type
+ * @property {string} [backgroundImage] - 배경 이미지 URL / Background image URL
+ * @property {string} [backgroundVideo] - 배경 비디오 URL / Background video URL
+ * @property {boolean} [interactive=false] - 인터랙티브 모드 활성화 / Enable interactive mode
+ * @property {number} [hoverScale=1.05] - 호버 시 스케일 / Scale on hover
+ * @property {number} [hoverRotate=0] - 호버 시 회전 각도 / Rotation angle on hover
+ * @property {boolean} [hoverGlow=false] - 호버 시 글로우 효과 / Glow effect on hover
+ * @extends {Omit<CardProps, 'variant' | 'style'>}
+ */
+export interface PanelProps extends Omit<CardProps, 'variant' | 'style'> {
+    style?: "default" | "solid" | "glass" | "outline" | "elevated" | "neon" | "holographic" | "cyberpunk" | "minimal" | "luxury";
+    effect?: "none" | "glow" | "shadow" | "gradient" | "animated";
+    transparency?: number;
+    blurIntensity?: number;
+    borderOpacity?: number;
+    shadowOpacity?: number;
+    glowIntensity?: number;
+    glowColor?: string;
+    particleEffect?: boolean;
+    hoverEffect?: boolean;
+    animationEffect?: boolean;
+    padding?: "none" | "small" | "sm" | "medium" | "md" | "large" | "lg" | "xl" | "custom";
+    customPadding?: string;
+    rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full" | "custom";
+    customRounded?: string;
+    background?: "solid" | "gradient" | "pattern" | "image" | "video";
+    gradientColors?: string[];
+    patternType?: "dots" | "lines" | "grid" | "waves" | "custom";
+    backgroundImage?: string;
+    backgroundVideo?: string;
+    interactive?: boolean;
+    hoverScale?: number;
+    hoverRotate?: number;
+    hoverGlow?: boolean;
+}
+/**
+ * Panel 컴포넌트 / Panel component
+ *
+ * 고급 스타일링 옵션을 가진 패널 컴포넌트입니다.
+ * 다양한 스타일, 효과, 배경 옵션을 지원합니다.
+ * Card 컴포넌트를 기반으로 하며, 추가적인 고급 기능을 제공합니다.
+ *
+ * Panel component with advanced styling options.
+ * Supports various styles, effects, and background options.
+ * Based on Card component with additional advanced features.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Panel>
+ *   <div>내용</div>
+ * </Panel>
+ *
+ * @example
+ * // Glass 스타일 / Glass style
+ * <Panel style="glass" effect="glow">
+ *   <div>Glass 패널</div>
+ * </Panel>
+ *
+ * @example
+ * // 인터랙티브 패널 / Interactive panel
+ * <Panel
+ *   style="neon"
+ *   interactive
+ *   hoverScale={1.1}
+ *   hoverGlow
+ * >
+ *   <div>호버 효과</div>
+ * </Panel>
+ *
+ * @param {PanelProps} props - Panel 컴포넌트의 props / Panel component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Panel 컴포넌트 / Panel component
+ */
+declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>>;
+export { Panel };
+//# sourceMappingURL=Panel.d.ts.map

package/dist/components/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/components/Panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,OAAO,CAAC;IAEtE,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAA;IAC5H,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAA;IAG7D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAGlB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IAGzB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,QAAQ,CAAA;IACtF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAA;IAChE,aAAa,CAAC,EAAE,MAAM,CAAA;IAGtB,UAAU,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;IACjE,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IAGxB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,QAAA,MAAM,KAAK,mFAkPV,CAAA;AAID,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/Popover.d.ts

@@ -1,4 +1,17 @@
-import * as React from "react";
+import React from "react";
+/**
+ * Popover 컴포넌트의 props / Popover component props
+ * @typedef {Object} PopoverProps
+ * @property {React.ReactNode} children - Popover 내용 / Popover content
+ * @property {React.ReactNode} trigger - Popover를 열기 위한 트리거 요소 / Trigger element to open popover
+ * @property {boolean} [open] - 제어 모드에서 열림/닫힘 상태 / Open/close state in controlled mode
+ * @property {(open: boolean) => void} [onOpenChange] - 상태 변경 콜백 / State change callback
+ * @property {"top" | "bottom" | "left" | "right"} [position="bottom"] - Popover 표시 위치 / Popover display position
+ * @property {"start" | "center" | "end"} [align="center"] - Popover 정렬 / Popover alignment
+ * @property {number} [offset=8] - 트리거와 Popover 사이 간격 (px) / Spacing between trigger and popover (px)
+ * @property {boolean} [disabled=false] - Popover 비활성화 여부 / Disable popover
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
 export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     trigger: React.ReactNode;
@@ -9,6 +22,38 @@ export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     offset?: number;
     disabled?: boolean;
 }
+/**
+ * Popover 컴포넌트 / Popover component
+ *
+ * 트리거 요소를 클릭하면 표시되는 팝오버 컴포넌트입니다.
+ * 외부 클릭 시 자동으로 닫힙니다.
+ *
+ * Popover component that appears when the trigger element is clicked.
+ * Automatically closes when clicking outside.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Popover trigger={<Button>열기</Button>}>
+ *   <div className="p-4">Popover 내용</div>
+ * </Popover>
+ *
+ * @example
+ * // 제어 모드 / Controlled mode
+ * const [open, setOpen] = useState(false)
+ * <Popover
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   trigger={<Button>제어 모드</Button>}
+ *   position="top"
+ * >
+ *   <div className="p-4">내용</div>
+ * </Popover>
+ *
+ * @param {PopoverProps} props - Popover 컴포넌트의 props / Popover component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Popover 컴포넌트 / Popover component
+ */
 declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
 export declare const PopoverTrigger: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const PopoverContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/components/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,OAAO,qFA+MZ,CAAA;AAID,eAAO,MAAM,cAAc,6GAU1B,CAAA;AAGD,eAAO,MAAM,cAAc,6GAU1B,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/components/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,QAAA,MAAM,OAAO,qFA+IZ,CAAA;AAID,eAAO,MAAM,cAAc,6GAU1B,CAAA;AAGD,eAAO,MAAM,cAAc,6GAU1B,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/Progress.d.ts

@@ -1,21 +1,70 @@
-import * as React from "react";
+import React from "react";
+/**
+ * Progress 컴포넌트의 props
+ * @typedef {Object} ProgressProps
+ * @property {number} [value=0] - 진행률 값
+ * @property {number} [max=100] - 최대값
+ * @property {"sm" | "md" | "lg"} [size="md"] - Progress 바 크기
+ * @property {"default" | "success" | "warning" | "error" | "info" | "glass"} [variant="default"] - Progress 스타일 변형
+ * @property {boolean} [showValue=false] - 진행률 퍼센트 표시 여부
+ * @property {boolean} [animated=true] - 애니메이션 활성화 여부
+ * @property {boolean} [striped=false] - 줄무늬 패턴 표시 여부
+ * @property {string} [label] - Progress 라벨 텍스트
+ * @property {string} [description] - Progress 설명 텍스트
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
 export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
     value?: number;
     max?: number;
     size?: "sm" | "md" | "lg";
-    variant?: "default" | "success" | "warning" | "error" | "info";
+    variant?: "default" | "success" | "warning" | "error" | "info" | "glass";
     showValue?: boolean;
     animated?: boolean;
     striped?: boolean;
     label?: string;
     description?: string;
 }
+/**
+ * Progress 컴포넌트 / Progress component
+ *
+ * 진행률을 표시하는 프로그레스 바 컴포넌트입니다.
+ * 다양한 스타일과 애니메이션을 지원합니다.
+ *
+ * Progress bar component that displays progress.
+ * Supports various styles and animations.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Progress value={50} />
+ *
+ * @example
+ * // 라벨과 값 표시 / Show label and value
+ * <Progress
+ *   value={75}
+ *   label="업로드 진행률"
+ *   showValue
+ * />
+ *
+ * @example
+ * // Success 스타일, 줄무늬 패턴 / Success style, striped pattern
+ * <Progress
+ *   value={90}
+ *   variant="success"
+ *   striped
+ *   animated
+ * />
+ *
+ * @param {ProgressProps} props - Progress 컴포넌트의 props / Progress component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Progress 컴포넌트 / Progress component
+ */
 declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
 export declare const ProgressSuccess: React.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
 export declare const ProgressWarning: React.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
 export declare const ProgressError: React.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
 export declare const ProgressInfo: React.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
-export declare const ProgressCard: React.ForwardRefExoticComponent<ProgressProps & {
+export declare const ProgressWrapper: React.ForwardRefExoticComponent<ProgressProps & {
     title?: string;
 } & React.RefAttributes<HTMLDivElement>>;
 export declare const ProgressGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/components/Progress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,QAAQ,sFA2Fb,CAAA;AAID,eAAO,MAAM,eAAe,uGAI3B,CAAA;AAGD,eAAO,MAAM,eAAe,uGAI3B,CAAA;AAGD,eAAO,MAAM,aAAa,uGAIzB,CAAA;AAGD,eAAO,MAAM,YAAY,uGAIxB,CAAA;AAID,eAAO,MAAM,YAAY;YAA8D,MAAM;wCAW5F,CAAA;AAGD,eAAO,MAAM,aAAa,6GAUzB,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/components/Progress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,QAAA,MAAM,QAAQ,sFAgGb,CAAA;AAID,eAAO,MAAM,eAAe,uGAI3B,CAAA;AAGD,eAAO,MAAM,eAAe,uGAI3B,CAAA;AAGD,eAAO,MAAM,aAAa,uGAIzB,CAAA;AAGD,eAAO,MAAM,YAAY,uGAIxB,CAAA;AAID,eAAO,MAAM,eAAe;YAA8D,MAAM;wCAW/F,CAAA;AAGD,eAAO,MAAM,aAAa,6GAUzB,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/Radio.d.ts

@@ -1,12 +1,54 @@
-import * as React from "react";
+import React from "react";
+/**
+ * Radio 컴포넌트의 props / Radio component props
+ * @typedef {Object} RadioProps
+ * @property {"default" | "outline" | "filled" | "glass"} [variant="default"] - Radio 스타일 변형 / Radio style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - Radio 크기 / Radio size
+ * @property {boolean} [error=false] - 에러 상태 표시 / Error state
+ * @property {boolean} [success=false] - 성공 상태 표시 / Success state
+ * @property {string} [label] - 라디오 버튼 레이블 텍스트 / Radio button label text
+ * @property {string} [description] - 라디오 버튼 설명 텍스트 / Radio button description text
+ * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>}
+ */
 export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    variant?: "default" | "outline" | "filled";
+    variant?: "default" | "outline" | "filled" | "glass";
     size?: "sm" | "md" | "lg";
     error?: boolean;
     success?: boolean;
     label?: string;
     description?: string;
 }
+/**
+ * Radio 컴포넌트 / Radio component
+ *
+ * 라디오 버튼 입력 필드를 제공하는 컴포넌트입니다.
+ * 같은 name 속성을 가진 여러 Radio는 그룹으로 동작합니다.
+ * ARIA 속성을 자동으로 설정하여 접근성을 지원합니다.
+ *
+ * Radio button input field component.
+ * Multiple Radio components with the same name attribute work as a group.
+ * Automatically sets ARIA attributes for accessibility support.
+ *
+ * @component
+ * @example
+ * // 기본 사용 (그룹) / Basic usage (group)
+ * <Radio name="option" value="1" label="옵션 1" />
+ * <Radio name="option" value="2" label="옵션 2" />
+ * <Radio name="option" value="3" label="옵션 3" />
+ *
+ * @example
+ * // 에러 상태 / Error state
+ * <Radio
+ *   name="gender"
+ *   value="male"
+ *   label="남성"
+ *   error
+ * />
+ *
+ * @param {RadioProps} props - Radio 컴포넌트의 props / Radio component props
+ * @param {React.Ref<HTMLInputElement>} ref - input 요소 ref / input element ref
+ * @returns {JSX.Element} Radio 컴포넌트 / Radio component
+ */
 declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 export { Radio };
 //# sourceMappingURL=Radio.d.ts.map

package/dist/components/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3F,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,KAAK,qFAmFV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;;;GAUG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3F,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,qFA+FV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ScrollArea.d.ts

@@ -1,4 +1,14 @@
-import * as React from "react";
+import React from "react";
+/**
+ * ScrollArea 컴포넌트의 props / ScrollArea component props
+ * @typedef {Object} ScrollAreaProps
+ * @property {React.ReactNode} children - 스크롤 영역 내용 / Scroll area content
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {"vertical" | "horizontal" | "both"} [orientation="vertical"] - 스크롤 방향 / Scroll direction
+ * @property {number} [scrollHideDelay=600] - 스크롤바 숨김 지연 시간 (ms) / Scrollbar hide delay (ms)
+ * @property {"auto" | "always" | "scroll" | "hover"} [type="hover"] - 스크롤바 표시 타입 / Scrollbar display type
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
 interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
@@ -6,11 +16,53 @@ interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
     scrollHideDelay?: number;
     type?: "auto" | "always" | "scroll" | "hover";
 }
+/**
+ * ScrollArea 컴포넌트 / ScrollArea component
+ *
+ * 커스텀 스크롤바를 가진 스크롤 영역 컴포넌트입니다.
+ * 호버 시 스크롤바를 표시하거나 항상 표시할 수 있습니다.
+ *
+ * Scroll area component with custom scrollbar.
+ * Can display scrollbar on hover or always.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <ScrollArea className="h-64">
+ *   <div>긴 내용...</div>
+ * </ScrollArea>
+ *
+ * @example
+ * // 가로 스크롤, 항상 표시 / Horizontal scroll, always visible
+ * <ScrollArea orientation="horizontal" type="always">
+ *   <div className="flex space-x-4">...</div>
+ * </ScrollArea>
+ *
+ * @param {ScrollAreaProps} props - ScrollArea 컴포넌트의 props / ScrollArea component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} ScrollArea 컴포넌트 / ScrollArea component
+ */
 declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ScrollBar 컴포넌트의 props / ScrollBar component props
+ * @typedef {Object} ScrollBarProps
+ * @property {"vertical" | "horizontal"} [orientation="vertical"] - 스크롤바 방향 / Scrollbar direction
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ */
 interface ScrollBarProps {
     orientation?: "vertical" | "horizontal";
     className?: string;
 }
+/**
+ * ScrollBar 컴포넌트 / ScrollBar component
+ * 커스텀 스크롤바를 표시합니다.
+ * Displays a custom scrollbar.
+ *
+ * @component
+ * @param {ScrollBarProps} props - ScrollBar 컴포넌트의 props / ScrollBar component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} ScrollBar 컴포넌트 / ScrollBar component
+ */
 declare const ScrollBar: React.ForwardRefExoticComponent<ScrollBarProps & React.RefAttributes<HTMLDivElement>>;
 export { ScrollArea, ScrollBar };
 //# sourceMappingURL=ScrollArea.d.ts.map

package/dist/components/ScrollArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../src/components/ScrollArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAChD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CAC9C;AAED,QAAA,MAAM,UAAU,wFA8Df,CAAA;AAID,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,SAAS,uFAed,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../src/components/ScrollArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;;GASG;AACH,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAChD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CAC9C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,UAAU,wFA8Df,CAAA;AAID;;;;;GAKG;AACH,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,uFAed,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/ScrollIndicator.d.ts

@@ -1,9 +1,25 @@
 import React from 'react';
+import type { IconName } from '../lib/icons';
+/**
+ * ScrollIndicator 컴포넌트의 props / ScrollIndicator component props
+ * @typedef {Object} ScrollIndicatorProps
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {string} [targetId] - 스크롤 대상 요소 ID / Target element ID to scroll to
+ * @property {string} [text='Scroll down'] - 표시 텍스트 / Display text
+ * @property {IconName} [iconName='arrowDown'] - 아이콘 이름 / Icon name
+ * @property {number} [iconSize=20] - 아이콘 크기 / Icon size
+ * @property {'bottom-center' | 'bottom-left' | 'bottom-right'} [position='bottom-center'] - 표시 위치 / Display position
+ * @property {'default' | 'primary' | 'secondary' | 'outline'} [variant='default'] - ScrollIndicator 스타일 변형 / ScrollIndicator style variant
+ * @property {'sm' | 'md' | 'lg'} [size='md'] - ScrollIndicator 크기 / ScrollIndicator size
+ * @property {boolean} [animated=true] - 애니메이션 활성화 여부 / Enable animation
+ * @property {boolean} [autoHide=true] - 자동 숨김 여부 / Auto hide
+ * @property {number} [hideThreshold=100] - 숨김 임계값 (px) / Hide threshold (px)
+ */
 export interface ScrollIndicatorProps {
     className?: string;
     targetId?: string;
     text?: string;
-    iconName?: string;
+    iconName?: IconName;
     iconSize?: number;
     position?: 'bottom-center' | 'bottom-left' | 'bottom-right';
     variant?: 'default' | 'primary' | 'secondary' | 'outline';
@@ -12,6 +28,32 @@ export interface ScrollIndicatorProps {
     autoHide?: boolean;
     hideThreshold?: number;
 }
+/**
+ * ScrollIndicator 컴포넌트 / ScrollIndicator component
+ *
+ * 스크롤 가능함을 나타내는 인디케이터 컴포넌트입니다.
+ * 클릭 시 지정된 요소로 스크롤하거나 다음 섹션으로 스크롤합니다.
+ *
+ * Indicator component that shows scrollability.
+ * Scrolls to specified element or next section on click.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <ScrollIndicator />
+ *
+ * @example
+ * // 특정 요소로 스크롤 / Scroll to specific element
+ * <ScrollIndicator
+ *   targetId="section-2"
+ *   text="다음 섹션으로"
+ *   position="bottom-right"
+ * />
+ *
+ * @param {ScrollIndicatorProps} props - ScrollIndicator 컴포넌트의 props / ScrollIndicator component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} ScrollIndicator 컴포넌트 / ScrollIndicator component
+ */
 declare const ScrollIndicator: React.ForwardRefExoticComponent<ScrollIndicatorProps & React.RefAttributes<HTMLDivElement>>;
 export { ScrollIndicator };
 //# sourceMappingURL=ScrollIndicator.d.ts.map

package/dist/components/ScrollIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollIndicator.d.ts","sourceRoot":"","sources":["../../src/components/ScrollIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAKlD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,eAAe,GAAG,aAAa,GAAG,cAAc,CAAA;IAC3D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,QAAA,MAAM,eAAe,6FAuGnB,CAAA;AAIF,OAAO,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"ScrollIndicator.d.ts","sourceRoot":"","sources":["../../src/components/ScrollIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAE5C;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,eAAe,GAAG,aAAa,GAAG,cAAc,CAAA;IAC3D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,eAAe,6FAuGnB,CAAA;AAIF,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ScrollProgress.d.ts

@@ -1,4 +1,14 @@
 import React from 'react';
+/**
+ * ScrollProgress 컴포넌트의 props / ScrollProgress component props
+ * @typedef {Object} ScrollProgressProps
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {number} [height=2] - 진행률 바 높이 (px) / Progress bar height (px)
+ * @property {'default' | 'primary' | 'secondary' | 'gradient'} [color='gradient'] - 진행률 바 색상 / Progress bar color
+ * @property {'top' | 'bottom'} [position='top'] - 표시 위치 / Display position
+ * @property {boolean} [animated=true] - 애니메이션 활성화 여부 / Enable animation
+ * @property {boolean} [showPercentage=false] - 퍼센트 표시 여부 / Show percentage
+ */
 export interface ScrollProgressProps {
     className?: string;
     height?: number;
@@ -7,6 +17,33 @@ export interface ScrollProgressProps {
     animated?: boolean;
     showPercentage?: boolean;
 }
+/**
+ * ScrollProgress 컴포넌트 / ScrollProgress component
+ *
+ * 페이지 스크롤 진행률을 표시하는 컴포넌트입니다.
+ * 페이지 상단 또는 하단에 고정되어 표시됩니다.
+ *
+ * Component that displays page scroll progress.
+ * Fixed at top or bottom of the page.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <ScrollProgress />
+ *
+ * @example
+ * // 하단에 표시, 퍼센트 포함 / Display at bottom with percentage
+ * <ScrollProgress
+ *   position="bottom"
+ *   color="primary"
+ *   showPercentage
+ *   height={4}
+ * />
+ *
+ * @param {ScrollProgressProps} props - ScrollProgress 컴포넌트의 props / ScrollProgress component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} ScrollProgress 컴포넌트 / ScrollProgress component
+ */
 declare const ScrollProgress: React.ForwardRefExoticComponent<ScrollProgressProps & React.RefAttributes<HTMLDivElement>>;
 export { ScrollProgress };
 //# sourceMappingURL=ScrollProgress.d.ts.map