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

package/dist/index.d.mts

@@ -0,0 +1,3770 @@
+import React from 'react';
+export { Autocomplete, AutocompleteOption, AutocompleteProps, Checkbox, DatePicker, DatePickerProps, Form, FormField, FormGroup, Form as Frm, Input as Inp, Input, Label, Radio, Select, SelectOption, Slider, Switch, Textarea, Upload, UploadProps, UploadedFile } from './form.mjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { I as IconName, e as emotionIcons, s as statusIcons } from './icons-DoSGIez_.mjs';
+export { i as iconCategories } from './icons-DoSGIez_.mjs';
+export { C as ComponentLayout } from './ComponentLayout-BxCenSAm.mjs';
+export { PageNavigation, PageTransition } from './navigation.mjs';
+export { Toast, ToastProvider, useToast } from './feedback.mjs';
+import { ClassValue } from 'clsx';
+import 'lucide-react';
+
+/**
+ * 버튼 스타일 변형 / Button style variant
+ * @typedef {"default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "gradient" | "neon" | "glass"} Variant
+ */
+type Variant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "gradient" | "neon" | "glass";
+/**
+ * 버튼 크기 / Button size
+ * @typedef {"sm" | "md" | "lg" | "xl" | "icon"} Size
+ */
+type Size = "sm" | "md" | "lg" | "xl" | "icon";
+/**
+ * 버튼 모서리 둥글기 / Button border radius
+ * @typedef {"sm" | "md" | "lg" | "full"} Rounded
+ */
+type Rounded = "sm" | "md" | "lg" | "full";
+/**
+ * 버튼 그림자 / Button shadow
+ * @typedef {"none" | "sm" | "md" | "lg" | "xl"} Shadow
+ */
+type Shadow = "none" | "sm" | "md" | "lg" | "xl";
+/**
+ * 버튼 호버 효과 / Button hover effect
+ * @typedef {"scale" | "glow" | "slide" | "none"} Hover
+ */
+type Hover = "scale" | "glow" | "slide" | "none";
+/**
+ * 그라디언트 색상 이름 / Gradient color name
+ * @typedef {"blue" | "purple" | "green" | "orange" | "pink" | "custom"} GradientName
+ */
+type GradientName = "blue" | "purple" | "green" | "orange" | "pink" | "custom";
+/**
+ * Button 컴포넌트의 공통 props / Common props for Button component
+ * @typedef {Object} CommonProps
+ * @property {Variant} [variant="default"] - 버튼 스타일 변형 / Button style variant
+ * @property {Size} [size="md"] - 버튼 크기 / Button size
+ * @property {boolean} [loading=false] - 로딩 상태 (스피너 표시) / Loading state (shows spinner)
+ * @property {React.ReactNode} [icon] - 아이콘 요소 / Icon element
+ * @property {"left" | "right"} [iconPosition="left"] - 아이콘 위치 / Icon position
+ * @property {GradientName} [gradient="blue"] - 그라디언트 색상 (variant="gradient"일 때) / Gradient color (when variant="gradient")
+ * @property {string} [customGradient] - 커스텀 그라디언트 클래스 (variant="gradient"일 때) / Custom gradient class (when variant="gradient")
+ * @property {Rounded} [rounded="md"] - 모서리 둥글기 / Border radius
+ * @property {Shadow} [shadow="md"] - 그림자 크기 / Shadow size
+ * @property {Hover} [hover="scale"] - 호버 효과 / Hover effect
+ * @property {boolean} [fullWidth=false] - 전체 너비 사용 / Use full width
+ * @property {boolean} [iconOnly=false] - 아이콘만 표시 (aria-label 필수) / Icon only (aria-label required)
+ * @property {string} [aria-label] - 접근성을 위한 레이블 (iconOnly일 때 필수) / Accessibility label (required when iconOnly)
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {boolean} [disabled=false] - 비활성화 상태 / Disabled state
+ */
+type CommonProps = {
+    variant?: Variant;
+    size?: Size;
+    loading?: boolean;
+    icon?: React.ReactNode;
+    iconPosition?: "left" | "right";
+    gradient?: GradientName;
+    customGradient?: string;
+    rounded?: Rounded;
+    shadow?: Shadow;
+    hover?: Hover;
+    fullWidth?: boolean;
+    iconOnly?: boolean;
+    "aria-label"?: string;
+    className?: string;
+    disabled?: boolean;
+};
+type AnchorProps = CommonProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "className"> & {
+    href: string;
+};
+type NativeButtonProps = CommonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "type"> & {
+    href?: undefined;
+};
+/**
+ * Button 컴포넌트의 props 타입 / Button component props type
+ * href가 제공되면 앵커 태그로, 그렇지 않으면 버튼 태그로 렌더링됩니다.
+ * Renders as anchor tag if href is provided, otherwise as button tag.
+ * @typedef {AnchorProps | NativeButtonProps} ButtonProps
+ */
+type ButtonProps = AnchorProps | NativeButtonProps;
+type AnchorOrButton$1 = HTMLAnchorElement | HTMLButtonElement;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<AnchorOrButton$1>>;
+
+/** Action 전용 옵션(버튼 공통 옵션은 ButtonProps에서 상속) */
+type ActionKind = "primary" | "secondary" | "tertiary" | "magical" | "cyberpunk" | "ninja" | "wizard" | "sniper";
+type FeedbackKind = "ripple" | "particle" | "sound" | "haptic" | "glitch" | "sparkle" | "smoke";
+type ActionExtras = {
+    actionType?: ActionKind;
+    feedback?: FeedbackKind;
+    particleEffect?: boolean;
+    rippleEffect?: boolean;
+    soundEffect?: boolean;
+    hapticFeedback?: boolean;
+    transparency?: number;
+    blurIntensity?: number;
+    glowIntensity?: number;
+    glowColor?: string;
+};
+/**
+ * Action 컴포넌트의 props / Action component props
+ * @typedef {Object} ActionProps
+ * @property {ActionKind} [actionType="primary"] - Action 타입 / Action type
+ * @property {FeedbackKind} [feedback="ripple"] - 피드백 타입 / Feedback type
+ * @property {boolean} [particleEffect=false] - 파티클 효과 활성화 / Enable particle effect
+ * @property {boolean} [rippleEffect=false] - 리플 효과 활성화 / Enable ripple effect
+ * @property {boolean} [soundEffect=false] - 사운드 효과 활성화 / Enable sound effect
+ * @property {boolean} [hapticFeedback=false] - 햅틱 피드백 활성화 / Enable haptic feedback
+ * @property {number} [transparency=1] - 투명도 (0-1) / Transparency (0-1)
+ * @property {number} [blurIntensity=0] - blur 강도 (px) / Blur intensity (px)
+ * @property {number} [glowIntensity=0] - 글로우 강도 (px) / Glow intensity (px)
+ * @property {string} [glowColor="rgba(91,140,255,.8)"] - 글로우 색상 / Glow color
+ * @extends {ButtonProps}
+ */
+type ActionProps = ButtonProps & ActionExtras;
+type AnchorEl = HTMLAnchorElement;
+type ButtonEl = HTMLButtonElement;
+type AnchorOrButton = AnchorEl | ButtonEl;
+/**
+ * Action 컴포넌트 / Action component
+ *
+ * 고급 효과를 가진 액션 버튼 컴포넌트입니다.
+ * Button 컴포넌트를 기반으로 하며, 파티클, 리플, 사운드, 햅틱 피드백 등을 지원합니다.
+ *
+ * Action button component with advanced effects.
+ * Based on Button component, supports particle, ripple, sound, haptic feedback, etc.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Action>클릭</Action>
+ *
+ * @example
+ * // 고급 효과 / Advanced effects
+ * <Action
+ *   actionType="magical"
+ *   feedback="particle"
+ *   particleEffect
+ *   rippleEffect
+ * >
+ *   마법 버튼
+ * </Action>
+ *
+ * @param {ActionProps} props - Action 컴포넌트의 props / Action component props
+ * @param {React.Ref<AnchorOrButton>} ref - button 또는 anchor 요소 ref / button or anchor element ref
+ * @returns {JSX.Element} Action 컴포넌트 / Action component
+ */
+declare const Action: React.ForwardRefExoticComponent<ActionProps & React.RefAttributes<AnchorOrButton>>;
+
+/**
+ * Link 컴포넌트의 props / Link component props
+ * @typedef {Object} LinkProps
+ * @property {string} href - 링크 URL / Link URL
+ * @property {React.ReactNode} children - 링크 텍스트 또는 내용 / Link text or content
+ * @property {"default" | "primary" | "secondary" | "ghost" | "underline"} [variant="default"] - Link 스타일 변형 / Link style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - Link 크기 / Link size
+ * @property {boolean} [external=false] - 외부 링크 여부 (target="_blank" 자동 설정) / External link (auto sets target="_blank")
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {() => void} [onClick] - 클릭 이벤트 핸들러 / Click event handler
+ */
+interface LinkProps {
+    href: string;
+    children: React.ReactNode;
+    variant?: "default" | "primary" | "secondary" | "ghost" | "underline";
+    size?: "sm" | "md" | "lg";
+    external?: boolean;
+    className?: string;
+    onClick?: () => void;
+}
+/**
+ * Link 컴포넌트 / Link component
+ *
+ * 링크를 표시하는 컴포넌트입니다.
+ * 외부 링크의 경우 자동으로 `target="_blank"`와 `rel="noopener noreferrer"`를 설정합니다.
+ *
+ * Link component for displaying links.
+ * Automatically sets `target="_blank"` and `rel="noopener noreferrer"` for external links.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Link href="/about">소개</Link>
+ *
+ * @example
+ * // 외부 링크 / External link
+ * <Link href="https://example.com" external>
+ *   외부 사이트
+ * </Link>
+ *
+ * @example
+ * // Primary 스타일 / Primary style
+ * <Link href="/contact" variant="primary" size="lg">
+ *   문의하기
+ * </Link>
+ *
+ * @param {LinkProps} props - Link 컴포넌트의 props / Link component props
+ * @returns {JSX.Element} Link 컴포넌트 / Link component
+ */
+declare function Link({ href, children, className, variant, size, external, onClick }: LinkProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Icon Config Types
+ *
+ * Icon 시스템의 설정 타입 정의
+ * 상태관리는 서비스 레벨에서 관리 (Zustand 등)
+ */
+type IconSet = 'lucide' | 'phosphor' | 'untitled';
+type PhosphorWeight = 'thin' | 'light' | 'regular' | 'bold' | 'duotone' | 'fill';
+interface IconConfig {
+    set: IconSet;
+    weight: PhosphorWeight;
+    size: number;
+    color: string;
+    strokeWidth?: number;
+}
+declare const defaultIconConfig: IconConfig;
+/**
+ * 세트별 기본 strokeWidth
+ */
+declare const getDefaultStrokeWidth: (set: IconSet) => number;
+
+/**
+ * IconProvider 컴포넌트 Props
+ *
+ * IconProvider component props interface.
+ *
+ * @interface IconProviderProps
+ */
+interface IconProviderProps {
+    /** 아이콘 세트 (lucide, phosphor, untitled) / Icon set (lucide, phosphor, untitled) */
+    set?: IconSet;
+    /** Phosphor 아이콘 weight (thin, light, regular, bold, duotone, fill) / Phosphor icon weight */
+    weight?: PhosphorWeight;
+    /** 기본 아이콘 크기 / Default icon size */
+    size?: number;
+    /** 기본 아이콘 색상 / Default icon color */
+    color?: string;
+    /** Lucide/Untitled 아이콘 stroke width / Lucide/Untitled icon stroke width */
+    strokeWidth?: number;
+    /** 자식 컴포넌트 / Child components */
+    children: React.ReactNode;
+}
+interface IconContextValue extends IconConfig {
+}
+/**
+ * IconProvider 컴포넌트
+ *
+ * 전역 아이콘 설정을 Context로 제공합니다.
+ * 서비스에서 Zustand로 관리한 값을 props로 전달할 수 있습니다.
+ *
+ * IconProvider component
+ *
+ * Provides global icon settings through Context API.
+ * Can receive values managed by Zustand at the service level.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // 기본 사용 / Basic usage
+ * <IconProvider set="phosphor" weight="regular" size={20}>
+ *   <App />
+ * </IconProvider>
+ *
+ * // Zustand와 함께 사용 / With Zustand
+ * const iconConfig = useIconStore(state => state.iconConfig)
+ * <IconProvider {...iconConfig}>
+ *   <App />
+ * </IconProvider>
+ *
+ * // Lucide 아이콘 사용 / Using Lucide icons
+ * <IconProvider set="lucide" size={24} strokeWidth={1.5}>
+ *   <App />
+ * </IconProvider>
+ * ```
+ *
+ * @param props - IconProvider 컴포넌트 props / IconProvider component props
+ * @returns IconProvider 컴포넌트 / IconProvider component
+ */
+declare function IconProvider({ set, weight, size, color, strokeWidth, children, }: IconProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * useIconContext Hook
+ *
+ * Icon Context를 사용하는 Hook입니다.
+ * Icon 컴포넌트 내부에서 사용됩니다.
+ *
+ * Hook to use Icon Context.
+ * Used internally by Icon component.
+ *
+ * @returns Icon 설정 값 / Icon configuration value
+ *
+ * @example
+ * ```tsx
+ * // Icon 컴포넌트 내부에서 사용 / Used inside Icon component
+ * const config = useIconContext()
+ * const iconSet = config.set
+ * const iconSize = config.size
+ * ```
+ */
+declare function useIconContext(): IconContextValue;
+
+/**
+ * Icon Provider System
+ *
+ * Supports multiple icon libraries:
+ * - Lucide Icons (default)
+ * - Phosphor Icons
+ * - Untitled Icons (SVG-based)
+ *
+ * Only imports icons that are actually used in the project for optimal bundle size.
+ */
+
+/**
+ * Project-specific icon list
+ * These are the icons actually used in SumUp project
+ * Only these icons will be loaded for optimal bundle size
+ */
+declare const PROJECT_ICONS: {
+    readonly home: {
+        readonly lucide: "Home";
+        readonly phosphor: "House";
+        readonly untitled: "home";
+    };
+    readonly 'layout-dashboard': {
+        readonly lucide: "LayoutDashboard";
+        readonly phosphor: "SquaresFour";
+        readonly untitled: "layout-dashboard";
+    };
+    readonly folder: {
+        readonly lucide: "Folder";
+        readonly phosphor: "Folder";
+        readonly untitled: "folder";
+    };
+    readonly 'alert-circle': {
+        readonly lucide: "AlertCircle";
+        readonly phosphor: "WarningCircle";
+        readonly untitled: "alert-circle";
+    };
+    readonly alertCircle: {
+        readonly lucide: "AlertCircle";
+        readonly phosphor: "WarningCircle";
+        readonly untitled: "alert-circle";
+    };
+    readonly columns: {
+        readonly lucide: "Columns";
+        readonly phosphor: "Columns";
+        readonly untitled: "columns";
+    };
+    readonly users: {
+        readonly lucide: "Users";
+        readonly phosphor: "Users";
+        readonly untitled: "users";
+    };
+    readonly settings: {
+        readonly lucide: "Settings";
+        readonly phosphor: "Gear";
+        readonly untitled: "settings";
+    };
+    readonly menu: {
+        readonly lucide: "Menu";
+        readonly phosphor: "List";
+        readonly untitled: "menu";
+    };
+    readonly close: {
+        readonly lucide: "X";
+        readonly phosphor: "X";
+        readonly untitled: "close";
+    };
+    readonly chevronLeft: {
+        readonly lucide: "ChevronLeft";
+        readonly phosphor: "CaretLeft";
+        readonly untitled: "chevron-left";
+    };
+    readonly chevronRight: {
+        readonly lucide: "ChevronRight";
+        readonly phosphor: "CaretRight";
+        readonly untitled: "chevron-right";
+    };
+    readonly chevronDown: {
+        readonly lucide: "ChevronDown";
+        readonly phosphor: "CaretDown";
+        readonly untitled: "chevron-down";
+    };
+    readonly chevronUp: {
+        readonly lucide: "ChevronUp";
+        readonly phosphor: "CaretUp";
+        readonly untitled: "chevron-up";
+    };
+    readonly arrowLeft: {
+        readonly lucide: "ArrowLeft";
+        readonly phosphor: "ArrowLeft";
+        readonly untitled: "arrow-left";
+    };
+    readonly arrowRight: {
+        readonly lucide: "ArrowRight";
+        readonly phosphor: "ArrowRight";
+        readonly untitled: "arrow-right";
+    };
+    readonly arrowUp: {
+        readonly lucide: "ArrowUp";
+        readonly phosphor: "ArrowUp";
+        readonly untitled: "arrow-up";
+    };
+    readonly arrowDown: {
+        readonly lucide: "ArrowDown";
+        readonly phosphor: "ArrowDown";
+        readonly untitled: "arrow-down";
+    };
+    readonly add: {
+        readonly lucide: "Plus";
+        readonly phosphor: "Plus";
+        readonly untitled: "add";
+    };
+    readonly edit: {
+        readonly lucide: "Edit";
+        readonly phosphor: "Pencil";
+        readonly untitled: "edit";
+    };
+    readonly pencil: {
+        readonly lucide: "Pencil";
+        readonly phosphor: "Pencil";
+        readonly untitled: "pencil";
+    };
+    readonly delete: {
+        readonly lucide: "Trash2";
+        readonly phosphor: "Trash";
+        readonly untitled: "trash";
+    };
+    readonly trash: {
+        readonly lucide: "Trash2";
+        readonly phosphor: "Trash";
+        readonly untitled: "trash";
+    };
+    readonly upload: {
+        readonly lucide: "Upload";
+        readonly phosphor: "Upload";
+        readonly untitled: "upload";
+    };
+    readonly download: {
+        readonly lucide: "Download";
+        readonly phosphor: "Download";
+        readonly untitled: "download";
+    };
+    readonly x: {
+        readonly lucide: "X";
+        readonly phosphor: "X";
+        readonly untitled: "close";
+    };
+    readonly check: {
+        readonly lucide: "Check";
+        readonly phosphor: "Check";
+        readonly untitled: "check";
+    };
+    readonly search: {
+        readonly lucide: "Search";
+        readonly phosphor: "MagnifyingGlass";
+        readonly untitled: "search";
+    };
+    readonly share: {
+        readonly lucide: "Share";
+        readonly phosphor: "Share";
+        readonly untitled: "share";
+    };
+    readonly copy: {
+        readonly lucide: "Copy";
+        readonly phosphor: "Copy";
+        readonly untitled: "copy";
+    };
+    readonly save: {
+        readonly lucide: "Save";
+        readonly phosphor: "FloppyDisk";
+        readonly untitled: "save";
+    };
+    readonly loader: {
+        readonly lucide: "Loader2";
+        readonly phosphor: "Spinner";
+        readonly untitled: "loader";
+    };
+    readonly loader2: {
+        readonly lucide: "Loader2";
+        readonly phosphor: "Spinner";
+        readonly untitled: "loader";
+    };
+    readonly 'check-circle': {
+        readonly lucide: "CheckCircle";
+        readonly phosphor: "CheckCircle";
+        readonly untitled: "check-circle";
+    };
+    readonly checkCircle: {
+        readonly lucide: "CheckCircle";
+        readonly phosphor: "CheckCircle";
+        readonly untitled: "check-circle";
+    };
+    readonly success: {
+        readonly lucide: "CheckCircle";
+        readonly phosphor: "CheckCircle";
+        readonly untitled: "check-circle";
+    };
+    readonly error: {
+        readonly lucide: "XCircle";
+        readonly phosphor: "XCircle";
+        readonly untitled: "error";
+    };
+    readonly warning: {
+        readonly lucide: "AlertCircle";
+        readonly phosphor: "WarningCircle";
+        readonly untitled: "warning";
+    };
+    readonly info: {
+        readonly lucide: "Info";
+        readonly phosphor: "Info";
+        readonly untitled: "info";
+    };
+    readonly refresh: {
+        readonly lucide: "RefreshCw";
+        readonly phosphor: "ArrowClockwise";
+        readonly untitled: "refresh";
+    };
+    readonly refreshCw: {
+        readonly lucide: "RefreshCw";
+        readonly phosphor: "ArrowClockwise";
+        readonly untitled: "refresh";
+    };
+    readonly bell: {
+        readonly lucide: "Bell";
+        readonly phosphor: "Bell";
+        readonly untitled: "bell";
+    };
+    readonly heart: {
+        readonly lucide: "Heart";
+        readonly phosphor: "Heart";
+        readonly untitled: "heart";
+    };
+    readonly star: {
+        readonly lucide: "Star";
+        readonly phosphor: "Star";
+        readonly untitled: "star";
+    };
+    readonly bookmark: {
+        readonly lucide: "Bookmark";
+        readonly phosphor: "Bookmark";
+        readonly untitled: "bookmark";
+    };
+    readonly user: {
+        readonly lucide: "User";
+        readonly phosphor: "User";
+        readonly untitled: "user";
+    };
+    readonly userPlus: {
+        readonly lucide: "UserPlus";
+        readonly phosphor: "UserPlus";
+        readonly untitled: "user-plus";
+    };
+    readonly logIn: {
+        readonly lucide: "LogIn";
+        readonly phosphor: "SignIn";
+        readonly untitled: "log-in";
+    };
+    readonly logOut: {
+        readonly lucide: "LogOut";
+        readonly phosphor: "SignOut";
+        readonly untitled: "log-out";
+    };
+    readonly chrome: {
+        readonly lucide: "Chrome";
+        readonly phosphor: "ChromeLogo";
+        readonly untitled: "chrome";
+    };
+    readonly github: {
+        readonly lucide: "Github";
+        readonly phosphor: "GithubLogo";
+        readonly untitled: "github";
+    };
+    readonly message: {
+        readonly lucide: "MessageCircle";
+        readonly phosphor: "ChatCircle";
+        readonly untitled: "message";
+    };
+    readonly messageSquare: {
+        readonly lucide: "MessageSquare";
+        readonly phosphor: "ChatSquare";
+        readonly untitled: "message-square";
+    };
+    readonly 'message-square': {
+        readonly lucide: "MessageSquare";
+        readonly phosphor: "ChatSquare";
+        readonly untitled: "message-square";
+    };
+    readonly inbox: {
+        readonly lucide: "Inbox";
+        readonly phosphor: "Inbox";
+        readonly untitled: "inbox";
+    };
+    readonly calendar: {
+        readonly lucide: "Calendar";
+        readonly phosphor: "Calendar";
+        readonly untitled: "calendar";
+    };
+    readonly calendarPlus: {
+        readonly lucide: "CalendarPlus";
+        readonly phosphor: "CalendarPlus";
+        readonly untitled: "calendar-plus";
+    };
+    readonly checkSquare: {
+        readonly lucide: "CheckSquare";
+        readonly phosphor: "CheckSquare";
+        readonly untitled: "check-square";
+    };
+    readonly clock: {
+        readonly lucide: "Clock";
+        readonly phosphor: "Clock";
+        readonly untitled: "clock";
+    };
+    readonly book: {
+        readonly lucide: "Book";
+        readonly phosphor: "Book";
+        readonly untitled: "book";
+    };
+    readonly bookOpen: {
+        readonly lucide: "BookOpen";
+        readonly phosphor: "BookOpen";
+        readonly untitled: "book-open";
+    };
+    readonly monitor: {
+        readonly lucide: "Monitor";
+        readonly phosphor: "Monitor";
+        readonly untitled: "monitor";
+    };
+    readonly sun: {
+        readonly lucide: "Sun";
+        readonly phosphor: "Sun";
+        readonly untitled: "sun";
+    };
+    readonly moon: {
+        readonly lucide: "Moon";
+        readonly phosphor: "Moon";
+        readonly untitled: "moon";
+    };
+    readonly sparkles: {
+        readonly lucide: "Sparkles";
+        readonly phosphor: "Sparkle";
+        readonly untitled: "sparkles";
+    };
+    readonly lightbulb: {
+        readonly lucide: "Lightbulb";
+        readonly phosphor: "Lightbulb";
+        readonly untitled: "lightbulb";
+    };
+    readonly brain: {
+        readonly lucide: "Brain";
+        readonly phosphor: "Brain";
+        readonly untitled: "brain";
+    };
+    readonly zap: {
+        readonly lucide: "Zap";
+        readonly phosphor: "Lightning";
+        readonly untitled: "zap";
+    };
+    readonly chart: {
+        readonly lucide: "BarChart3";
+        readonly phosphor: "ChartBar";
+        readonly untitled: "chart";
+    };
+    readonly barChart: {
+        readonly lucide: "BarChart";
+        readonly phosphor: "ChartBar";
+        readonly untitled: "bar-chart";
+    };
+    readonly trendingUp: {
+        readonly lucide: "TrendingUp";
+        readonly phosphor: "TrendUp";
+        readonly untitled: "trending-up";
+    };
+    readonly trendingDown: {
+        readonly lucide: "TrendingDown";
+        readonly phosphor: "TrendDown";
+        readonly untitled: "trending-down";
+    };
+    readonly activity: {
+        readonly lucide: "Activity";
+        readonly phosphor: "Activity";
+        readonly untitled: "activity";
+    };
+    readonly database: {
+        readonly lucide: "Database";
+        readonly phosphor: "Database";
+        readonly untitled: "database";
+    };
+    readonly dollarSign: {
+        readonly lucide: "DollarSign";
+        readonly phosphor: "CurrencyDollar";
+        readonly untitled: "dollar-sign";
+    };
+    readonly dollar: {
+        readonly lucide: "DollarSign";
+        readonly phosphor: "CurrencyDollar";
+        readonly untitled: "dollar-sign";
+    };
+    readonly currency: {
+        readonly lucide: "DollarSign";
+        readonly phosphor: "CurrencyDollar";
+        readonly untitled: "currency";
+    };
+    readonly lock: {
+        readonly lucide: "Lock";
+        readonly phosphor: "Lock";
+        readonly untitled: "lock";
+    };
+    readonly unlock: {
+        readonly lucide: "Unlock";
+        readonly phosphor: "LockOpen";
+        readonly untitled: "unlock";
+    };
+    readonly shield: {
+        readonly lucide: "Shield";
+        readonly phosphor: "Shield";
+        readonly untitled: "shield";
+    };
+    readonly key: {
+        readonly lucide: "Key";
+        readonly phosphor: "Key";
+        readonly untitled: "key";
+    };
+    readonly play: {
+        readonly lucide: "Play";
+        readonly phosphor: "Play";
+        readonly untitled: "play";
+    };
+    readonly pause: {
+        readonly lucide: "Pause";
+        readonly phosphor: "Pause";
+        readonly untitled: "pause";
+    };
+    readonly image: {
+        readonly lucide: "Image";
+        readonly phosphor: "Image";
+        readonly untitled: "image";
+    };
+    readonly video: {
+        readonly lucide: "Video";
+        readonly phosphor: "Video";
+        readonly untitled: "video";
+    };
+    readonly camera: {
+        readonly lucide: "Camera";
+        readonly phosphor: "Camera";
+        readonly untitled: "camera";
+    };
+    readonly fileText: {
+        readonly lucide: "FileText";
+        readonly phosphor: "FileText";
+        readonly untitled: "file-text";
+    };
+    readonly file: {
+        readonly lucide: "File";
+        readonly phosphor: "File";
+        readonly untitled: "file";
+    };
+    readonly externalLink: {
+        readonly lucide: "ExternalLink";
+        readonly phosphor: "ArrowSquareOut";
+        readonly untitled: "external-link";
+    };
+    readonly link: {
+        readonly lucide: "Link";
+        readonly phosphor: "Link";
+        readonly untitled: "link";
+    };
+    readonly moreHorizontal: {
+        readonly lucide: "MoreHorizontal";
+        readonly phosphor: "DotsThreeOutline";
+        readonly untitled: "more-horizontal";
+    };
+    readonly moreVertical: {
+        readonly lucide: "MoreVertical";
+        readonly phosphor: "DotsThreeVertical";
+        readonly untitled: "more-vertical";
+    };
+    readonly remove: {
+        readonly lucide: "Minus";
+        readonly phosphor: "Minus";
+        readonly untitled: "remove";
+    };
+    readonly eye: {
+        readonly lucide: "Eye";
+        readonly phosphor: "Eye";
+        readonly untitled: "eye";
+    };
+    readonly eyeOff: {
+        readonly lucide: "EyeOff";
+        readonly phosphor: "EyeSlash";
+        readonly untitled: "eye-off";
+    };
+    readonly smile: {
+        readonly lucide: "Smile";
+        readonly phosphor: "Smiley";
+        readonly untitled: "smile";
+    };
+    readonly frown: {
+        readonly lucide: "Frown";
+        readonly phosphor: "SmileySad";
+        readonly untitled: "frown";
+    };
+    readonly meh: {
+        readonly lucide: "Meh";
+        readonly phosphor: "SmileyMeh";
+        readonly untitled: "meh";
+    };
+    readonly mail: {
+        readonly lucide: "Mail";
+        readonly phosphor: "Envelope";
+        readonly untitled: "mail";
+    };
+    readonly phone: {
+        readonly lucide: "Phone";
+        readonly phosphor: "Phone";
+        readonly untitled: "phone";
+    };
+    readonly flag: {
+        readonly lucide: "Flag";
+        readonly phosphor: "Flag";
+        readonly untitled: "flag";
+    };
+};
+
+/**
+ * Icon Names - 자동완성 지원
+ *
+ * 이 파일은 TypeScript 자동완성을 위한 아이콘 이름 목록입니다.
+ * 실제 아이콘은 icons.ts와 PROJECT_ICONS에서 관리됩니다.
+ */
+
+/**
+ * PROJECT_ICONS에 정의된 모든 아이콘 이름
+ */
+type ProjectIconName = keyof typeof PROJECT_ICONS;
+/**
+ * 사용 가능한 모든 아이콘 이름 (icons.ts + PROJECT_ICONS)
+ */
+type AllIconName = IconName | ProjectIconName;
+/**
+ * 아이콘 이름 목록 (자동완성용)
+ */
+declare const iconNames: readonly ["home", "menu", "close", "search", "settings", "user", "bell", "arrowLeft", "arrowRight", "arrowUp", "arrowDown", "chevronLeft", "chevronRight", "chevronUp", "chevronDown", "add", "edit", "delete", "remove", "check", "share", "download", "upload", "save", "copy", "refresh", "search", "loader", "success", "error", "warning", "info", "alertCircle", "heart", "star", "bookmark", "logIn", "logOut", "shield", "key", "lock", "unlock", "eye", "eyeOff", "users", "userPlus", "chart", "barChart", "pieChart", "trendingUp", "trendingDown", "activity", "database", "zap", "circle", "dollarSign", "dollar", "currency", "fileText", "file", "folder", "book", "bookOpen", "image", "video", "camera", "message", "messageSquare", "phone", "mail", "send", "play", "pause", "mic", "headphones", "smile", "frown", "meh", "laugh", "angry", "thumbsUp", "thumbsDown", "clock", "timer", "calendar", "calendarDays", "monitor", "sun", "moon", "sparkles", "lightbulb", "brain", "externalLink", "link", "moreHorizontal", "moreVertical"];
+/**
+ * 프로바이더별 아이콘 이름 매핑 (참고용)
+ *
+ * @example
+ * // Lucide 아이콘 사용
+ * <Icon name="home" provider="lucide" />  // Lucide: Home
+ *
+ * // Phosphor 아이콘 사용
+ * <Icon name="home" provider="phosphor" />  // Phosphor: House
+ *
+ * // Untitled 아이콘 사용
+ * <Icon name="home" provider="untitled" />  // Untitled: home
+ */
+declare const iconProviderMapping: Record<string, {
+    lucide: string;
+    phosphor: string;
+    untitled: string;
+}>;
+/**
+ * 아이콘 이름이 유효한지 확인
+ */
+declare function isValidIconName(name: string): name is AllIconName;
+/**
+ * 프로바이더별 아이콘 이름 가져오기
+ */
+declare function getIconNameForProvider(iconName: string, provider: 'lucide' | 'phosphor' | 'untitled'): string | null;
+
+/**
+ * Icon 컴포넌트 Props
+ *
+ * Icon component props interface.
+ *
+ * @interface IconProps
+ */
+interface IconProps {
+    /** 아이콘 이름 / Icon name */
+    name: AllIconName;
+    /** 아이콘 크기 (숫자 또는 문자열) / Icon size (number or string) */
+    size?: number | string;
+    /** 추가 CSS 클래스 / Additional CSS classes */
+    className?: string;
+    /** 감정 아이콘 타입 / Emotion icon type */
+    emotion?: keyof typeof emotionIcons;
+    /** 상태 아이콘 타입 / Status icon type */
+    status?: keyof typeof statusIcons;
+    /** 아이콘 프로바이더 오버라이드 (전역 설정 무시) / Icon provider override (ignores global config) */
+    provider?: IconSet;
+    /** 부드러운 애니메이션 효과 / Smooth animation effect */
+    animated?: boolean;
+    /** 펄스 애니메이션 / Pulse animation */
+    pulse?: boolean;
+    /** 회전 애니메이션 / Spin animation */
+    spin?: boolean;
+    /** 바운스 애니메이션 / Bounce animation */
+    bounce?: boolean;
+    /** 색상 변형 / Color variant */
+    variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'muted';
+    /** Phosphor 아이콘 weight 오버라이드 / Phosphor icon weight override */
+    weight?: PhosphorWeight;
+    /** 스크린 리더용 라벨 (의미 있는 아이콘인 경우) / Screen reader label (for meaningful icons) */
+    'aria-label'?: string;
+    /** 장식용 아이콘인 경우 true (스크린 리더에서 숨김) / Set to true for decorative icons (hidden from screen readers) */
+    'aria-hidden'?: boolean;
+}
+/**
+ * Icon 컴포넌트
+ *
+ * 다중 아이콘 라이브러리(Lucide, Phosphor, Untitled)를 지원하는 통합 아이콘 컴포넌트입니다.
+ * IconProvider를 통해 전역 설정을 관리할 수 있으며, 개별 아이콘에서도 설정을 오버라이드할 수 있습니다.
+ *
+ * Icon component that supports multiple icon libraries (Lucide, Phosphor, Untitled).
+ * Global settings can be managed through IconProvider, and individual icons can override settings.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // 기본 사용 / Basic usage
+ * <Icon name="heart" />
+ *
+ * // 크기 지정 / Specify size
+ * <Icon name="user" size={24} />
+ *
+ * // 색상 변형 / Color variant
+ * <Icon name="check" variant="success" />
+ *
+ * // 애니메이션 / Animation
+ * <Icon name="loader" spin />
+ * <Icon name="heart" pulse />
+ *
+ * // 접근성 / Accessibility
+ * <Icon name="search" aria-label="검색" />
+ * <Icon name="decorative-icon" aria-hidden />
+ *
+ * // 감정 아이콘 / Emotion icon
+ * <Icon emotion="happy" />
+ *
+ * // 상태 아이콘 / Status icon
+ * <Icon status="loading" spin />
+ * ```
+ *
+ * @param props - Icon 컴포넌트 props / Icon component props
+ * @returns Icon 컴포넌트 / Icon component
+ */
+declare const IconComponent: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
+declare const Icon: typeof IconComponent;
+/**
+ * EmotionIcon 컴포넌트
+ *
+ * 감정을 표현하는 아이콘 컴포넌트입니다.
+ * Icon component for expressing emotions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <EmotionIcon emotion="happy" />
+ * <EmotionIcon emotion="sad" size={24} />
+ * ```
+ */
+declare const EmotionIcon: React.ForwardRefExoticComponent<Omit<IconProps, "name"> & {
+    emotion: keyof typeof emotionIcons;
+} & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * StatusIcon 컴포넌트
+ *
+ * 상태를 표현하는 아이콘 컴포넌트입니다.
+ * Icon component for expressing status.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StatusIcon status="loading" spin />
+ * <StatusIcon status="success" variant="success" />
+ * ```
+ */
+declare const StatusIcon: React.ForwardRefExoticComponent<Omit<IconProps, "name"> & {
+    status: keyof typeof statusIcons;
+} & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * LoadingIcon 컴포넌트
+ *
+ * 로딩 상태를 표시하는 전용 아이콘 컴포넌트입니다.
+ * Dedicated icon component for displaying loading status.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LoadingIcon />
+ * <LoadingIcon size={32} />
+ * ```
+ */
+declare const LoadingIcon: React.ForwardRefExoticComponent<Omit<IconProps, "name" | "status"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * SuccessIcon 컴포넌트
+ *
+ * 성공 상태를 표시하는 전용 아이콘 컴포넌트입니다.
+ * Dedicated icon component for displaying success status.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SuccessIcon />
+ * <SuccessIcon size={24} />
+ * ```
+ */
+declare const SuccessIcon: React.ForwardRefExoticComponent<Omit<IconProps, "name" | "status"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ErrorIcon 컴포넌트
+ *
+ * 에러 상태를 표시하는 전용 아이콘 컴포넌트입니다.
+ * Dedicated icon component for displaying error status.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ErrorIcon />
+ * <ErrorIcon size={24} />
+ * ```
+ */
+declare const ErrorIcon: React.ForwardRefExoticComponent<Omit<IconProps, "name" | "status"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Avatar 컴포넌트의 props / Avatar component props
+ * @typedef {Object} AvatarProps
+ * @property {"sm" | "md" | "lg"} [size="md"] - 아바타 크기 / Avatar size
+ * @property {"default" | "glass"} [variant="default"] - 아바타 스타일 변형 / Avatar style variant
+ * @property {string} [src] - 이미지 URL / Image URL
+ * @property {string} [alt] - 이미지 대체 텍스트 / Image alt text
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg";
+    variant?: "default" | "glass";
+    src?: string;
+    alt?: string;
+}
+/**
+ * AvatarImage 컴포넌트의 props
+ * @typedef {Object} AvatarImageProps
+ * @extends {React.ImgHTMLAttributes<HTMLImageElement>}
+ */
+interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+}
+/**
+ * AvatarFallback 컴포넌트의 props
+ * @typedef {Object} AvatarFallbackProps
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface AvatarFallbackProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Avatar 컴포넌트 / Avatar component
+ *
+ * 사용자 프로필 이미지를 표시하는 컴포넌트입니다.
+ * 이미지가 없을 경우 대체 텍스트나 초기 문자를 표시합니다.
+ *
+ * Component for displaying user profile images.
+ * Shows fallback text or initials when image is not available.
+ *
+ * @component
+ * @example
+ * // 기본 사용 (이미지) / Basic usage (with image)
+ * <Avatar src="/user.jpg" alt="사용자" />
+ *
+ * @example
+ * // 대체 텍스트 / Fallback text
+ * <Avatar alt="홍길동">홍</Avatar>
+ *
+ * @example
+ * // Glass 스타일 / Glass style
+ * <Avatar variant="glass" size="lg" src="/user.jpg" alt="사용자" />
+ *
+ * @param {AvatarProps} props - Avatar 컴포넌트의 props / Avatar component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Avatar 컴포넌트 / Avatar component
+ */
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * AvatarImage 컴포넌트 / AvatarImage component
+ *
+ * 아바타 이미지를 표시하는 컴포넌트입니다.
+ * Displays the avatar image.
+ *
+ * @component
+ * @param {AvatarImageProps} props - AvatarImage 컴포넌트의 props / AvatarImage component props
+ * @param {React.Ref<HTMLImageElement>} ref - img 요소 ref / img element ref
+ * @returns {JSX.Element} AvatarImage 컴포넌트 / AvatarImage component
+ */
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+/**
+ * AvatarFallback 컴포넌트 / AvatarFallback component
+ *
+ * 아바타 이미지가 없을 때 표시되는 대체 컴포넌트입니다.
+ * Fallback component displayed when avatar image is not available.
+ *
+ * @component
+ * @param {AvatarFallbackProps} props - AvatarFallback 컴포넌트의 props / AvatarFallback component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} AvatarFallback 컴포넌트 / AvatarFallback component
+ */
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Modal 컴포넌트의 props / Modal component props
+ * @typedef {Object} ModalProps
+ * @property {boolean} isOpen - 모달 열림/닫힘 상태 / Modal open/close state
+ * @property {() => void} onClose - 모달 닫기 콜백 함수 / Modal close callback function
+ * @property {React.ReactNode} children - 모달 내용 / Modal content
+ * @property {"sm" | "md" | "lg" | "xl" | "2xl" | "3xl"} [size="md"] - 모달 크기 / Modal size
+ * @property {boolean} [showCloseButton=true] - 닫기 버튼 표시 여부 / Show close button
+ * @property {boolean} [closeOnOverlayClick=true] - 오버레이 클릭 시 닫기 여부 / Close on overlay click
+ * @property {string} [title] - 모달 제목 / Modal title
+ * @property {string} [description] - 모달 설명 / Modal description
+ * @property {boolean} [showBackdrop=true] - 배경 오버레이 표시 여부 / Show backdrop overlay
+ * @property {string} [backdropClassName] - 배경 오버레이 추가 CSS 클래스 / Additional CSS class for backdrop
+ * @property {boolean} [centered=true] - 모달을 화면 중앙에 배치할지 여부 / Center modal on screen
+ * @property {string} [className] - 모달 컨테이너 추가 CSS 클래스 / Additional CSS class for modal container
+ */
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+    showCloseButton?: boolean;
+    closeOnOverlayClick?: boolean;
+    title?: string;
+    description?: string;
+    showBackdrop?: boolean;
+    backdropClassName?: string;
+    centered?: boolean;
+    className?: string;
+}
+/**
+ * Modal 컴포넌트 / Modal component
+ *
+ * 오버레이와 함께 표시되는 모달 다이얼로그 컴포넌트입니다.
+ * ESC 키로 닫기, 오버레이 클릭으로 닫기, 접근성 속성(ARIA)을 지원합니다.
+ *
+ * Modal dialog component displayed with overlay.
+ * Supports closing with ESC key, overlay click, and ARIA accessibility attributes.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <p>모달 내용</p>
+ * </Modal>
+ *
+ * @example
+ * // 제목과 설명 포함 / With title and description
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="확인"
+ *   description="이 작업을 계속하시겠습니까?"
+ * >
+ *   <Button onClick={handleConfirm}>확인</Button>
+ * </Modal>
+ *
+ * @example
+ * // 큰 크기 모달 / Large size modal
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   size="xl"
+ *   closeOnOverlayClick={false}
+ * >
+ *   <div>큰 모달 내용</div>
+ * </Modal>
+ *
+ * @param {ModalProps} props - Modal 컴포넌트의 props / Modal component props
+ * @param {React.Ref<HTMLDivElement>} ref - 모달 컨테이너 ref / Modal container ref
+ * @returns {JSX.Element} Modal 컴포넌트 / Modal component
+ */
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Container 컴포넌트의 props
+ * @typedef {Object} ContainerProps
+ * @property {"sm" | "md" | "lg" | "xl" | "full"} [size="lg"] - 컨테이너 최대 너비
+ * @property {"none" | "sm" | "md" | "lg" | "xl"} [padding="md"] - 내부 패딩 크기
+ * @property {boolean} [centered=true] - 컨테이너를 중앙 정렬할지 여부
+ * @property {boolean} [fluid=false] - 최대 너비 제한 없이 전체 너비 사용
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    padding?: "none" | "sm" | "md" | "lg" | "xl";
+    centered?: boolean;
+    fluid?: boolean;
+}
+/**
+ * Container 컴포넌트
+ *
+ * 콘텐츠를 감싸는 컨테이너 컴포넌트입니다.
+ * 반응형 최대 너비와 패딩을 제공하여 일관된 레이아웃을 구성합니다.
+ *
+ * @component
+ * @example
+ * // 기본 사용
+ * <Container>
+ *   <h1>제목</h1>
+ *   <p>내용</p>
+ * </Container>
+ *
+ * @example
+ * // 작은 크기, 패딩 없음
+ * <Container size="sm" padding="none">
+ *   <div>콘텐츠</div>
+ * </Container>
+ *
+ * @example
+ * // 전체 너비 사용
+ * <Container fluid padding="xl">
+ *   <div>전체 너비 콘텐츠</div>
+ * </Container>
+ *
+ * @param {ContainerProps} props - Container 컴포넌트의 props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref
+ * @returns {JSX.Element} Container 컴포넌트
+ */
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Grid 컴포넌트의 props
+ * @typedef {Object} GridProps
+ * @property {1|2|3|4|5|6|7|8|9|10|11|12} [cols=1] - 그리드 열 개수
+ * @property {"none" | "sm" | "md" | "lg" | "xl"} [gap="md"] - 그리드 아이템 간 간격
+ * @property {"none" | "sm" | "md" | "lg" | "xl"} [gapX] - 가로 간격 (gap보다 우선)
+ * @property {"none" | "sm" | "md" | "lg" | "xl"} [gapY] - 세로 간격
+ * @property {boolean} [responsive=true] - 반응형 그리드 활성화 (모바일: 1열, 태블릿: 2열, 데스크톱: 지정 열)
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    gap?: "none" | "sm" | "md" | "lg" | "xl";
+    gapX?: "none" | "sm" | "md" | "lg" | "xl";
+    gapY?: "none" | "sm" | "md" | "lg" | "xl";
+    responsive?: boolean;
+}
+/**
+ * Grid 컴포넌트
+ *
+ * CSS Grid를 사용한 그리드 레이아웃 컴포넌트입니다.
+ * 반응형 그리드를 지원하여 모바일부터 데스크톱까지 최적화된 레이아웃을 제공합니다.
+ *
+ * @component
+ * @example
+ * // 기본 3열 그리드
+ * <Grid cols={3} gap="md">
+ *   <div>아이템 1</div>
+ *   <div>아이템 2</div>
+ *   <div>아이템 3</div>
+ * </Grid>
+ *
+ * @example
+ * // 가로/세로 간격 분리
+ * <Grid cols={4} gapX="lg" gapY="sm">
+ *   {items.map(item => <div key={item.id}>{item.content}</div>)}
+ * </Grid>
+ *
+ * @example
+ * // 반응형 비활성화 (고정 그리드)
+ * <Grid cols={6} responsive={false} gap="lg">
+ *   <div>고정 6열</div>
+ * </Grid>
+ *
+ * @param {GridProps} props - Grid 컴포넌트의 props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref
+ * @returns {JSX.Element} Grid 컴포넌트
+ */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Stack 컴포넌트의 props
+ * @typedef {Object} StackProps
+ * @property {"vertical" | "horizontal"} [direction="vertical"] - 스택 방향
+ * @property {"none" | "sm" | "md" | "lg" | "xl"} [spacing="md"] - 아이템 간 간격
+ * @property {"start" | "center" | "end" | "stretch"} [align="start"] - 교차축 정렬
+ * @property {"start" | "center" | "end" | "between" | "around" | "evenly"} [justify="start"] - 주축 정렬
+ * @property {boolean} [wrap=false] - 아이템 줄바꿈 허용
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: "vertical" | "horizontal";
+    spacing?: "none" | "sm" | "md" | "lg" | "xl";
+    align?: "start" | "center" | "end" | "stretch";
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+    wrap?: boolean;
+}
+/**
+ * Stack 컴포넌트
+ *
+ * Flexbox를 사용한 스택 레이아웃 컴포넌트입니다.
+ * 수직 또는 수평 방향으로 아이템을 배치하고 정렬할 수 있습니다.
+ *
+ * @component
+ * @example
+ * // 기본 수직 스택
+ * <Stack spacing="md">
+ *   <div>아이템 1</div>
+ *   <div>아이템 2</div>
+ * </Stack>
+ *
+ * @example
+ * // 수평 스택, 중앙 정렬
+ * <Stack direction="horizontal" spacing="lg" align="center" justify="between">
+ *   <Button>왼쪽</Button>
+ *   <Button>오른쪽</Button>
+ * </Stack>
+ *
+ * @example
+ * // 줄바꿈 허용
+ * <Stack direction="horizontal" wrap spacing="sm">
+ *   {tags.map(tag => <Badge key={tag}>{tag}</Badge>)}
+ * </Stack>
+ *
+ * @param {StackProps} props - Stack 컴포넌트의 props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref
+ * @returns {JSX.Element} Stack 컴포넌트
+ */
+declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Divider 컴포넌트의 props / Divider component props
+ * @typedef {Object} DividerProps
+ * @property {"horizontal" | "vertical"} [orientation="horizontal"] - Divider 방향 / Divider orientation
+ * @property {"solid" | "dashed" | "dotted" | "gradient" | "glass"} [variant="solid"] - Divider 스타일 변형 / Divider style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - Divider 크기 / Divider size
+ * @property {"none" | "sm" | "md" | "lg" | "xl"} [spacing="md"] - Divider 주변 여백 / Divider spacing
+ * @property {"default" | "muted" | "primary" | "secondary"} [color="default"] - Divider 색상 / Divider color
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+    variant?: "solid" | "dashed" | "dotted" | "gradient" | "glass";
+    size?: "sm" | "md" | "lg";
+    spacing?: "none" | "sm" | "md" | "lg" | "xl";
+    color?: "default" | "muted" | "primary" | "secondary";
+}
+declare const Divider: React.NamedExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Card 컴포넌트의 props / Card component props
+ * @typedef {Object} CardProps
+ * @property {"default" | "outline" | "elevated"} [variant="default"] - 카드 스타일 변형 / Card style variant
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "outline" | "elevated";
+}
+/**
+ * Card 컴포넌트 / Card component
+ *
+ * 콘텐츠를 카드 형태로 표시하는 컴포넌트입니다.
+ * CardHeader, CardTitle, CardDescription, CardContent, CardFooter와 함께 사용합니다.
+ *
+ * Component that displays content in card format.
+ * Used with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.
+ *
+ * @component
+ * @example
+ * // 기본 카드 / Basic card
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>카드 제목</CardTitle>
+ *     <CardDescription>카드 설명</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <p>카드 내용</p>
+ *   </CardContent>
+ *   <CardFooter>
+ *     <Button>액션</Button>
+ *   </CardFooter>
+ * </Card>
+ *
+ * @example
+ * // Elevated 스타일 / Elevated style
+ * <Card variant="elevated">
+ *   <CardContent>강조된 카드</CardContent>
+ * </Card>
+ *
+ * @param {CardProps} props - Card 컴포넌트의 props / Card component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Card 컴포넌트 / Card component
+ */
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CardHeader 컴포넌트의 props / CardHeader component props
+ * @typedef {Object} CardHeaderProps
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * CardHeader 컴포넌트 / CardHeader component
+ * 카드의 헤더 영역을 표시합니다. CardTitle과 CardDescription을 포함합니다.
+ * Displays the header area of a card. Contains CardTitle and CardDescription.
+ *
+ * @component
+ * @param {CardHeaderProps} props - CardHeader 컴포넌트의 props / CardHeader component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} CardHeader 컴포넌트 / CardHeader component
+ */
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CardTitle 컴포넌트의 props / CardTitle component props
+ * @typedef {Object} CardTitleProps
+ * @extends {React.HTMLAttributes<HTMLHeadingElement>}
+ */
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+}
+/**
+ * CardTitle 컴포넌트 / CardTitle component
+ * 카드의 제목을 표시합니다. h3 태그로 렌더링됩니다.
+ * Displays the card title. Renders as h3 tag.
+ *
+ * @component
+ * @param {CardTitleProps} props - CardTitle 컴포넌트의 props / CardTitle component props
+ * @param {React.Ref<HTMLParagraphElement>} ref - h3 요소 ref / h3 element ref
+ * @returns {JSX.Element} CardTitle 컴포넌트 / CardTitle component
+ */
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * CardDescription 컴포넌트의 props / CardDescription component props
+ * @typedef {Object} CardDescriptionProps
+ * @extends {React.HTMLAttributes<HTMLParagraphElement>}
+ */
+interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+/**
+ * CardDescription 컴포넌트 / CardDescription component
+ * 카드의 설명 텍스트를 표시합니다.
+ * Displays the card description text.
+ *
+ * @component
+ * @param {CardDescriptionProps} props - CardDescription 컴포넌트의 props / CardDescription component props
+ * @param {React.Ref<HTMLParagraphElement>} ref - p 요소 ref / p element ref
+ * @returns {JSX.Element} CardDescription 컴포넌트 / CardDescription component
+ */
+declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * CardContent 컴포넌트의 props / CardContent component props
+ * @typedef {Object} CardContentProps
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * CardContent 컴포넌트 / CardContent component
+ * 카드의 메인 콘텐츠 영역을 표시합니다.
+ * Displays the main content area of a card.
+ *
+ * @component
+ * @param {CardContentProps} props - CardContent 컴포넌트의 props / CardContent component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} CardContent 컴포넌트 / CardContent component
+ */
+declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CardFooter 컴포넌트의 props / CardFooter component props
+ * @typedef {Object} CardFooterProps
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * CardFooter 컴포넌트 / CardFooter component
+ * 카드의 푸터 영역을 표시합니다. 주로 액션 버튼을 배치합니다.
+ * Displays the footer area of a card. Typically used for action buttons.
+ *
+ * @component
+ * @param {CardFooterProps} props - CardFooter 컴포넌트의 props / CardFooter component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} CardFooter 컴포넌트 / CardFooter component
+ */
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * 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'>}
+ */
+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>>;
+
+/**
+ * ActionButton 인터페이스
+ * @typedef {Object} ActionButton
+ * @property {string} label - 버튼 라벨 (데스크톱)
+ * @property {string} [labelMobile] - 버튼 라벨 (모바일, 없으면 label 사용)
+ * @property {IconName} [icon] - 버튼 아이콘
+ * @property {() => void} onClick - 클릭 핸들러
+ * @property {boolean} [disabled] - 비활성화 여부
+ * @property {'default' | 'outline' | 'destructive' | 'ghost'} [variant='outline'] - 버튼 스타일
+ * @property {Object} [badge] - 배지 정보
+ * @property {number} badge.count - 배지 숫자
+ * @property {'blue' | 'red' | 'gray' | 'green'} [badge.color='gray'] - 배지 색상
+ * @property {string} [className] - 추가 CSS 클래스
+ */
+interface ActionButton {
+    label: string;
+    labelMobile?: string;
+    icon?: IconName;
+    onClick: () => void;
+    disabled?: boolean;
+    variant?: 'default' | 'outline' | 'destructive' | 'ghost';
+    badge?: {
+        count: number;
+        color?: 'blue' | 'red' | 'gray' | 'green';
+    };
+    className?: string;
+}
+/**
+ * ActionToolbar 컴포넌트의 props / ActionToolbar component props
+ * @typedef {Object} ActionToolbarProps
+ * @property {boolean} [isSelectMode=false] - 선택 모드 활성화 여부 / Enable select mode
+ * @property {number} [totalCount=0] - 전체 항목 개수 / Total item count
+ * @property {number} [selectedCount=0] - 선택된 항목 개수 / Selected item count
+ * @property {ActionButton[]} [actions=[]] - 일반 모드 액션 버튼들 / Normal mode action buttons
+ * @property {ActionButton[]} [selectModeActions=[]] - 선택 모드 액션 버튼들 / Select mode action buttons
+ * @property {() => void} [onToggleSelectMode] - 선택 모드 토글 함수 / Toggle select mode function
+ * @property {() => void} [onToggleSelectAll] - 전체 선택/해제 함수 / Toggle select all function
+ * @property {() => void} [onCancelSelect] - 선택 모드 취소 함수 / Cancel select mode function
+ * @property {boolean} [loading=false] - 로딩 상태 / Loading state
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface ActionToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 선택 모드 활성화 여부 */
+    isSelectMode?: boolean;
+    /** 전체 항목 개수 */
+    totalCount?: number;
+    /** 선택된 항목 개수 */
+    selectedCount?: number;
+    /** 일반 모드 액션 버튼들 */
+    actions?: ActionButton[];
+    /** 선택 모드 액션 버튼들 */
+    selectModeActions?: ActionButton[];
+    /** 선택 모드 토글 함수 */
+    onToggleSelectMode?: () => void;
+    /** 전체 선택/해제 함수 */
+    onToggleSelectAll?: () => void;
+    /** 선택 모드 취소 함수 */
+    onCancelSelect?: () => void;
+    /** 로딩 상태 */
+    loading?: boolean;
+}
+declare const ActionToolbar: React.NamedExoticComponent<ActionToolbarProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Navigation 컴포넌트의 props / Navigation component props
+ * @typedef {Object} NavigationProps
+ * @property {string} [value] - 제어 모드에서 활성 탭 값 / Active tab value in controlled mode
+ * @property {string} [defaultValue] - 비제어 모드에서 기본 활성 탭 값 / Default active tab value in uncontrolled mode
+ * @property {(value: string) => void} [onValueChange] - 탭 변경 콜백 / Tab change callback
+ * @property {"pills" | "underline" | "cards"} [variant="pills"] - Navigation 스타일 변형 / Navigation style variant
+ * @property {"small" | "medium" | "large"} [scale="medium"] - Navigation 크기 / Navigation size
+ * @extends {Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>}
+ */
+interface NavigationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    variant?: "pills" | "underline" | "cards";
+    scale?: "small" | "medium" | "large";
+}
+/**
+ * NavigationList 컴포넌트의 props / NavigationList component props
+ * @typedef {Object} NavigationListProps
+ * @property {string} [value] - 활성 탭 값 / Active tab value
+ * @property {(value: string) => void} [onValueChange] - 탭 변경 콜백 / Tab change callback
+ * @property {"pills" | "underline" | "cards"} [variant="pills"] - Navigation 스타일 변형 / Navigation style variant
+ * @property {"small" | "medium" | "large"} [scale="medium"] - Navigation 크기 / Navigation size
+ * @extends {Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>}
+ */
+interface NavigationListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    variant?: "pills" | "underline" | "cards";
+    scale?: "small" | "medium" | "large";
+}
+declare const NavigationList: React.ForwardRefExoticComponent<NavigationListProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * NavigationItem 컴포넌트의 props / NavigationItem component props
+ * @typedef {Object} NavigationItemProps
+ * @property {string} value - 탭 값 / Tab value
+ * @property {(value: string) => void} [onValueChange] - 탭 변경 콜백 / Tab change callback
+ * @property {"pills" | "underline" | "cards"} [variant] - Navigation 스타일 변형 (자동으로 설정됨) / Navigation style variant (auto-set)
+ * @property {"small" | "medium" | "large"} [scale] - Navigation 크기 (자동으로 설정됨) / Navigation size (auto-set)
+ * @property {boolean} [active] - 활성 상태 (자동으로 설정됨) / Active state (auto-set)
+ * @extends {Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'>}
+ */
+interface NavigationItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    value: string;
+    onValueChange?: (value: string) => void;
+    variant?: "pills" | "underline" | "cards";
+    scale?: "small" | "medium" | "large";
+    active?: boolean;
+}
+declare const NavigationItem: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * NavigationContent 컴포넌트의 props / NavigationContent component props
+ * @typedef {Object} NavigationContentProps
+ * @property {string} value - 탭 값 / Tab value
+ * @property {boolean} [active] - 활성 상태 (자동으로 설정됨) / Active state (auto-set)
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface NavigationContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+    active?: boolean;
+}
+declare const NavigationContent: React.ForwardRefExoticComponent<NavigationContentProps & React.RefAttributes<HTMLDivElement>>;
+interface NavigationComponent extends React.ForwardRefExoticComponent<NavigationProps & React.RefAttributes<HTMLDivElement>> {
+    List: typeof NavigationList;
+    Item: typeof NavigationItem;
+    Content: typeof NavigationContent;
+}
+declare const NavigationComponent: NavigationComponent;
+
+/**
+ * Breadcrumb 항목 타입 / Breadcrumb item type
+ */
+interface BreadcrumbItemData {
+    label: string;
+    href?: string;
+    icon?: string;
+}
+/**
+ * Breadcrumb 컴포넌트의 props / Breadcrumb component props
+ * @typedef {Object} BreadcrumbProps
+ * @property {React.ReactNode} [children] - BreadcrumbItem 컴포넌트들 / BreadcrumbItem components
+ * @property {BreadcrumbItemData[]} [items] - Breadcrumb 항목 배열 (children 대신 사용 가능) / Breadcrumb items array (alternative to children)
+ * @property {number} [maxItems] - 최대 표시할 항목 수 (긴 경로 처리) / Maximum number of items to display (for long paths)
+ * @property {boolean} [showHomeIcon] - 홈 아이콘 표시 여부 / Show home icon
+ * @property {string} [homeLabel] - 홈 라벨 (기본: "Home") / Home label (default: "Home")
+ * @property {React.ReactNode} [separator] - 항목 사이 구분자 (기본: chevronRight 아이콘) / Separator between items (default: chevronRight icon)
+ * @property {'default' | 'subtle' | 'transparent' | 'glass'} [variant='default'] - Breadcrumb 스타일 변형 / Breadcrumb style variant
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface BreadcrumbProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    items?: BreadcrumbItemData[];
+    maxItems?: number;
+    showHomeIcon?: boolean;
+    homeLabel?: string;
+    separator?: React.ReactNode;
+    variant?: 'default' | 'subtle' | 'transparent' | 'glass';
+}
+/**
+ * BreadcrumbItem 컴포넌트의 props / BreadcrumbItem component props
+ * @typedef {Object} BreadcrumbItemProps
+ * @property {string} [href] - 링크 URL (없으면 일반 텍스트) / Link URL (plain text if not provided)
+ * @property {boolean} [isCurrent=false] - 현재 페이지 여부 / Current page indicator
+ * @property {React.ReactNode} children - 항목 텍스트 / Item text
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ */
+interface BreadcrumbItemProps {
+    href?: string;
+    isCurrent?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Breadcrumb 컴포넌트 / Breadcrumb component
+ *
+ * 네비게이션 경로를 표시하는 breadcrumb 컴포넌트입니다.
+ * 현재 위치와 경로를 시각적으로 표현합니다.
+ *
+ * Breadcrumb component for displaying navigation paths.
+ * Visually represents current location and path.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Breadcrumb>
+ *   <BreadcrumbItem href="/">홈</BreadcrumbItem>
+ *   <BreadcrumbItem href="/products">상품</BreadcrumbItem>
+ *   <BreadcrumbItem isCurrent>상세</BreadcrumbItem>
+ * </Breadcrumb>
+ *
+ * @example
+ * // 커스텀 구분자 / Custom separator
+ * <Breadcrumb separator={<span>/</span>}>
+ *   <BreadcrumbItem href="/">홈</BreadcrumbItem>
+ *   <BreadcrumbItem isCurrent>현재</BreadcrumbItem>
+ * </Breadcrumb>
+ *
+ * @param {BreadcrumbProps} props - Breadcrumb 컴포넌트의 props / Breadcrumb component props
+ * @param {React.Ref<HTMLDivElement>} ref - nav 요소 ref / nav element ref
+ * @returns {JSX.Element} Breadcrumb 컴포넌트 / Breadcrumb component
+ */
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * BreadcrumbItem 컴포넌트
+ * Breadcrumb의 개별 항목을 표시합니다.
+ *
+ * @component
+ * @param {BreadcrumbItemProps} props - BreadcrumbItem 컴포넌트의 props
+ * @param {React.Ref<HTMLLIElement>} ref - li 요소 ref
+ * @returns {JSX.Element} BreadcrumbItem 컴포넌트
+ */
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
+
+/**
+ * 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>}
+ */
+interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    showFirstLast?: boolean;
+    showPrevNext?: boolean;
+    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>>;
+declare const PaginationOutlined: React.ForwardRefExoticComponent<Omit<PaginationProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const PaginationMinimal: React.ForwardRefExoticComponent<Omit<PaginationProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const PaginationWithInfo: React.ForwardRefExoticComponent<PaginationProps & {
+    totalItems?: number;
+    itemsPerPage?: number;
+    showInfo?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Table 컴포넌트의 props / Table component props
+ * @typedef {Object} TableProps
+ * @property {React.ReactNode} children - TableHeader, TableBody, TableFooter 등 / TableHeader, TableBody, TableFooter, etc.
+ * @property {"default" | "bordered" | "striped"} [variant="default"] - Table 스타일 변형 / Table style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - Table 크기 / Table size
+ * @extends {React.HTMLAttributes<HTMLTableElement>}
+ */
+interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+    children: React.ReactNode;
+    variant?: "default" | "bordered" | "striped";
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * TableHeader 컴포넌트의 props / TableHeader component props
+ * @typedef {Object} TableHeaderProps
+ * @property {React.ReactNode} children - TableHead 컴포넌트들 / TableHead components
+ * @extends {React.HTMLAttributes<HTMLTableSectionElement>}
+ */
+interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    children: React.ReactNode;
+}
+/**
+ * TableBody 컴포넌트의 props / TableBody component props
+ * @typedef {Object} TableBodyProps
+ * @property {React.ReactNode} children - TableRow 컴포넌트들 / TableRow components
+ * @extends {React.HTMLAttributes<HTMLTableSectionElement>}
+ */
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    children: React.ReactNode;
+}
+/**
+ * TableFooter 컴포넌트의 props / TableFooter component props
+ * @typedef {Object} TableFooterProps
+ * @property {React.ReactNode} children - TableRow 컴포넌트들 / TableRow components
+ * @extends {React.HTMLAttributes<HTMLTableSectionElement>}
+ */
+interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    children: React.ReactNode;
+}
+/**
+ * TableRow 컴포넌트의 props / TableRow component props
+ * @typedef {Object} TableRowProps
+ * @property {React.ReactNode} children - TableHead 또는 TableCell 컴포넌트들 / TableHead or TableCell components
+ * @property {"default" | "hover"} [variant="default"] - Row 스타일 변형 / Row style variant
+ * @extends {React.HTMLAttributes<HTMLTableRowElement>}
+ */
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    children: React.ReactNode;
+    variant?: "default" | "hover";
+}
+/**
+ * TableHead 컴포넌트의 props / TableHead component props
+ * @typedef {Object} TableHeadProps
+ * @property {React.ReactNode} children - 헤더 셀 내용 / Header cell content
+ * @extends {React.ThHTMLAttributes<HTMLTableCellElement>}
+ */
+interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    children: React.ReactNode;
+}
+/**
+ * TableCell 컴포넌트의 props / TableCell component props
+ * @typedef {Object} TableCellProps
+ * @property {React.ReactNode} children - 셀 내용 / Cell content
+ * @extends {React.TdHTMLAttributes<HTMLTableCellElement>}
+ */
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    children: React.ReactNode;
+}
+/**
+ * Table 컴포넌트 / Table component
+ *
+ * 데이터를 표 형태로 표시하는 테이블 컴포넌트입니다.
+ * TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell과 함께 사용합니다.
+ *
+ * Table component that displays data in tabular format.
+ * Used with TableHeader, TableBody, TableFooter, TableRow, TableHead, and TableCell.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Table>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>이름</TableHead>
+ *       <TableHead>나이</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>홍길동</TableCell>
+ *       <TableCell>30</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ *
+ * @example
+ * // Bordered 스타일 / Bordered style
+ * <Table variant="bordered">
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>항목</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>값</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ *
+ * @example
+ * // Striped 스타일, 호버 효과 / Striped style with hover effect
+ * <Table variant="striped">
+ *   <TableBody>
+ *     <TableRow variant="hover">
+ *       <TableCell>데이터</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ *
+ * @param {TableProps} props - Table 컴포넌트의 props / Table component props
+ * @param {React.Ref<HTMLTableElement>} ref - table 요소 ref / table element ref
+ * @returns {JSX.Element} Table 컴포넌트 / Table component
+ */
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+/**
+ * TableHeader 컴포넌트 / TableHeader component
+ * 테이블의 헤더 영역을 표시합니다.
+ * Displays the header area of a table.
+ *
+ * @component
+ * @param {TableHeaderProps} props - TableHeader 컴포넌트의 props / TableHeader component props
+ * @param {React.Ref<HTMLTableSectionElement>} ref - thead 요소 ref / thead element ref
+ * @returns {JSX.Element} TableHeader 컴포넌트 / TableHeader component
+ */
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableSectionElement>>;
+/**
+ * TableBody 컴포넌트 / TableBody component
+ * 테이블의 본문 영역을 표시합니다.
+ * Displays the body area of a table.
+ *
+ * @component
+ * @param {TableBodyProps} props - TableBody 컴포넌트의 props / TableBody component props
+ * @param {React.Ref<HTMLTableSectionElement>} ref - tbody 요소 ref / tbody element ref
+ * @returns {JSX.Element} TableBody 컴포넌트 / TableBody component
+ */
+declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+/**
+ * TableFooter 컴포넌트 / TableFooter component
+ * 테이블의 푸터 영역을 표시합니다.
+ * Displays the footer area of a table.
+ *
+ * @component
+ * @param {TableFooterProps} props - TableFooter 컴포넌트의 props / TableFooter component props
+ * @param {React.Ref<HTMLTableSectionElement>} ref - tfoot 요소 ref / tfoot element ref
+ * @returns {JSX.Element} TableFooter 컴포넌트 / TableFooter component
+ */
+declare const TableFooter: React.ForwardRefExoticComponent<TableFooterProps & React.RefAttributes<HTMLTableSectionElement>>;
+/**
+ * TableRow 컴포넌트 / TableRow component
+ * 테이블의 행을 표시합니다.
+ * Displays a table row.
+ *
+ * @component
+ * @param {TableRowProps} props - TableRow 컴포넌트의 props / TableRow component props
+ * @param {React.Ref<HTMLTableRowElement>} ref - tr 요소 ref / tr element ref
+ * @returns {JSX.Element} TableRow 컴포넌트 / TableRow component
+ */
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+/**
+ * TableHead 컴포넌트 / TableHead component
+ * 테이블의 헤더 셀을 표시합니다.
+ * Displays a table header cell.
+ *
+ * @component
+ * @param {TableHeadProps} props - TableHead 컴포넌트의 props / TableHead component props
+ * @param {React.Ref<HTMLTableCellElement>} ref - th 요소 ref / th element ref
+ * @returns {JSX.Element} TableHead 컴포넌트 / TableHead component
+ */
+declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+/**
+ * TableCell 컴포넌트 / TableCell component
+ * 테이블의 데이터 셀을 표시합니다.
+ * Displays a table data cell.
+ *
+ * @component
+ * @param {TableCellProps} props - TableCell 컴포넌트의 props / TableCell component props
+ * @param {React.Ref<HTMLTableCellElement>} ref - td 요소 ref / td element ref
+ * @returns {JSX.Element} TableCell 컴포넌트 / TableCell component
+ */
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+/**
+ * TableCaption 컴포넌트 / TableCaption component
+ * 테이블의 캡션을 표시합니다.
+ * Displays a table caption.
+ *
+ * @component
+ * @param {React.HTMLAttributes<HTMLTableCaptionElement>} props - TableCaption 컴포넌트의 props / TableCaption component props
+ * @param {React.Ref<HTMLTableCaptionElement>} ref - caption 요소 ref / caption element ref
+ * @returns {JSX.Element} TableCaption 컴포넌트 / TableCaption component
+ */
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+
+/**
+ * Badge 컴포넌트의 props / Badge component props
+ * @typedef {Object} BadgeProps
+ * @property {"default" | "secondary" | "destructive" | "error" | "outline" | "glass"} [variant="default"] - Badge 스타일 변형 / Badge style variant
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "secondary" | "destructive" | "error" | "outline" | "glass";
+}
+/**
+ * Badge 컴포넌트 / Badge component
+ *
+ * 상태나 카테고리를 표시하는 작은 배지 컴포넌트입니다.
+ * React.memo로 최적화되어 있어 불필요한 리렌더링을 방지합니다.
+ *
+ * Small badge component for displaying status or category.
+ * Optimized with React.memo to prevent unnecessary re-renders.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Badge>New</Badge>
+ *
+ * @example
+ * // 다양한 변형 / Various variants
+ * <Badge variant="destructive">완료</Badge>
+ * <Badge variant="error">오류</Badge>
+ * <Badge variant="outline">대기</Badge>
+ *
+ * @param {BadgeProps} props - Badge 컴포넌트의 props / Badge component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Badge 컴포넌트 / Badge component
+ */
+declare const Badge: React.NamedExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * 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>}
+ */
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    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>>;
+declare const ProgressSuccess: React.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const ProgressWarning: React.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const ProgressError: React.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const ProgressInfo: React.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const ProgressGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Skeleton 컴포넌트의 props
+ * @typedef {Object} SkeletonProps
+ * @property {"text" | "circular" | "rectangular" | "rounded"} [variant="text"] - Skeleton 모양
+ * @property {string | number} [width] - 너비 (기본값: variant에 따라 다름)
+ * @property {string | number} [height] - 높이 (기본값: variant에 따라 다름)
+ * @property {"pulse" | "wave" | "shimmer"} [animation="pulse"] - 애니메이션 타입
+ * @property {string} [className] - 추가 CSS 클래스
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "text" | "circular" | "rectangular" | "rounded";
+    width?: string | number;
+    height?: string | number;
+    animation?: "pulse" | "wave" | "shimmer";
+    className?: string;
+}
+/**
+ * Skeleton 컴포넌트 / Skeleton component
+ *
+ * 로딩 중 콘텐츠의 플레이스홀더를 표시하는 스켈레톤 컴포넌트입니다.
+ * 다양한 모양과 애니메이션을 지원합니다.
+ *
+ * Skeleton component that displays placeholders for content while loading.
+ * Supports various shapes and animations.
+ *
+ * @component
+ * @example
+ * // 기본 사용 (텍스트) / Basic usage (text)
+ * <Skeleton />
+ *
+ * @example
+ * // 원형 아바타 / Circular avatar
+ * <Skeleton variant="circular" width={40} height={40} />
+ *
+ * @example
+ * // Wave 애니메이션 / Wave animation
+ * <Skeleton
+ *   variant="rounded"
+ *   width="100%"
+ *   height={200}
+ *   animation="wave"
+ * />
+ *
+ * @param {SkeletonProps} props - Skeleton 컴포넌트의 props / Skeleton component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Skeleton 컴포넌트 / Skeleton component
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+declare const SkeletonText: React.ForwardRefExoticComponent<Omit<SkeletonProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const SkeletonCircle: React.ForwardRefExoticComponent<Omit<SkeletonProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const SkeletonRectangle: React.ForwardRefExoticComponent<Omit<SkeletonProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const SkeletonRounded: React.ForwardRefExoticComponent<Omit<SkeletonProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const SkeletonCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const SkeletonAvatar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const SkeletonImage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const SkeletonUserProfile: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const SkeletonList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const SkeletonTable: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Alert 컴포넌트의 props
+ * @typedef {Object} AlertProps
+ * @property {"default" | "success" | "warning" | "error" | "info"} [variant="default"] - Alert 스타일 변형
+ * @property {string} [title] - Alert 제목
+ * @property {string} [description] - Alert 설명
+ * @property {React.ReactNode} [icon] - 커스텀 아이콘
+ * @property {React.ReactNode} [action] - 액션 버튼/요소
+ * @property {boolean} [closable=false] - 닫기 버튼 표시 여부
+ * @property {() => void} [onClose] - 닫기 버튼 클릭 시 호출되는 콜백
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "success" | "warning" | "error" | "info";
+    title?: string;
+    description?: string;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+    closable?: boolean;
+    onClose?: () => void;
+}
+/**
+ * Alert 컴포넌트 / Alert component
+ *
+ * 사용자에게 중요한 정보나 경고를 표시하는 컴포넌트입니다.
+ * 다양한 변형(variant)을 지원하며, 아이콘, 제목, 설명, 액션 버튼을 포함할 수 있습니다.
+ *
+ * Component for displaying important information or warnings to users.
+ * Supports various variants and can include icons, titles, descriptions, and action buttons.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Alert variant="info" title="정보" description="이것은 정보 메시지입니다." />
+ *
+ * @example
+ * // 닫기 버튼 포함 / With close button
+ * <Alert
+ *   variant="warning"
+ *   title="경고"
+ *   closable
+ *   onClose={() => console.log('닫기')}
+ * />
+ *
+ * @example
+ * // 커스텀 아이콘과 액션 / Custom icon and action
+ * <Alert
+ *   variant="success"
+ *   icon={<Icon name="check" />}
+ *   action={<Button size="sm">확인</Button>}
+ * >
+ *   작업이 완료되었습니다.
+ * </Alert>
+ *
+ * @param {AlertProps} props - Alert 컴포넌트의 props / Alert component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Alert 컴포넌트 / Alert component
+ */
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+declare const AlertSuccess: React.ForwardRefExoticComponent<Omit<AlertProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertWarning: React.ForwardRefExoticComponent<Omit<AlertProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertError: React.ForwardRefExoticComponent<Omit<AlertProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertInfo: React.ForwardRefExoticComponent<Omit<AlertProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * LoadingSpinner 컴포넌트의 props / LoadingSpinner component props
+ * @typedef {Object} LoadingSpinnerProps
+ * @property {"sm" | "md" | "lg" | "xl"} [size="md"] - Spinner 크기 / Spinner size
+ * @property {"default" | "dots" | "bars" | "ring" | "ripple"} [variant="default"] - Spinner 애니메이션 타입 / Spinner animation type
+ * @property {string} [text] - Spinner 아래 표시할 텍스트 / Text to display below spinner
+ * @property {"default" | "primary" | "secondary" | "success" | "warning" | "error" | "glass"} [color="default"] - Spinner 색상 / Spinner color
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ */
+interface LoadingSpinnerProps {
+    size?: "sm" | "md" | "lg" | "xl";
+    variant?: "default" | "dots" | "bars" | "ring" | "ripple";
+    text?: string;
+    color?: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "glass";
+    className?: string;
+}
+/**
+ * LoadingSpinner 컴포넌트 / LoadingSpinner component
+ *
+ * 로딩 상태를 표시하는 스피너 컴포넌트입니다.
+ * 다양한 애니메이션 타입과 크기를 지원합니다.
+ *
+ * Spinner component that displays loading state.
+ * Supports various animation types and sizes.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <LoadingSpinner />
+ *
+ * @example
+ * // 텍스트와 함께 / With text
+ * <LoadingSpinner
+ *   text="로딩 중..."
+ *   size="lg"
+ *   color="primary"
+ * />
+ *
+ * @example
+ * // 다양한 애니메이션 / Various animations
+ * <LoadingSpinner variant="dots" />
+ * <LoadingSpinner variant="bars" color="success" />
+ * <LoadingSpinner variant="ripple" size="xl" />
+ *
+ * @param {LoadingSpinnerProps} props - LoadingSpinner 컴포넌트의 props / LoadingSpinner component props
+ * @returns {JSX.Element} LoadingSpinner 컴포넌트 / LoadingSpinner component
+ */
+declare function LoadingSpinner({ className, size, variant, text, color }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Tooltip 컴포넌트의 props / Tooltip component props
+ * @typedef {Object} TooltipProps
+ * @property {string} content - Tooltip 내용 / Tooltip content
+ * @property {React.ReactNode} children - Tooltip이 연결될 요소 / Element to attach tooltip to
+ * @property {"top" | "bottom" | "left" | "right"} [position="top"] - Tooltip 표시 위치 / Tooltip display position
+ * @property {"default" | "light" | "dark"} [variant="default"] - Tooltip 스타일 변형 / Tooltip style variant
+ * @property {number} [delay=300] - Tooltip 표시 지연 시간(ms) / Tooltip display delay (ms)
+ * @property {boolean} [disabled=false] - Tooltip 비활성화 여부 / Disable tooltip
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
+    content: string;
+    children: React.ReactNode;
+    position?: "top" | "bottom" | "left" | "right";
+    variant?: "default" | "light" | "dark";
+    delay?: number;
+    disabled?: boolean;
+}
+/**
+ * Tooltip 컴포넌트 / Tooltip component
+ *
+ * 호버 시 추가 정보를 표시하는 툴팁 컴포넌트입니다.
+ * 마우스 호버 시 지연 시간 후 표시됩니다.
+ *
+ * Tooltip component that displays additional information on hover.
+ * Appears after a delay when the mouse hovers over the element.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Tooltip content="이것은 도움말입니다">
+ *   <Button>호버하세요</Button>
+ * </Tooltip>
+ *
+ * @example
+ * // 다양한 위치 / Different positions
+ * <Tooltip content="위치 변경" position="bottom">
+ *   <Icon name="info" />
+ * </Tooltip>
+ *
+ * @example
+ * // 커스텀 스타일 / Custom styles
+ * <Tooltip content="라이트 스타일" variant="light" delay={500}>
+ *   <span>호버</span>
+ * </Tooltip>
+ *
+ * @param {TooltipProps} props - Tooltip 컴포넌트의 props / Tooltip component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Tooltip 컴포넌트 / Tooltip component
+ *
+ * @todo 접근성 개선: role="tooltip" 추가 필요 / Accessibility: Add role="tooltip"
+ * @todo 접근성 개선: aria-describedby 연결 필요 / Accessibility: Connect aria-describedby
+ * @todo 접근성 개선: 키보드 포커스 시 Tooltip 표시 필요 / Accessibility: Show tooltip on keyboard focus
+ */
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+declare const TooltipLight: React.ForwardRefExoticComponent<Omit<TooltipProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const TooltipDark: React.ForwardRefExoticComponent<Omit<TooltipProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * 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>}
+ */
+interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    trigger: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    position?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    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>>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Dropdown 컴포넌트의 props / Dropdown component props
+ * @typedef {Object} DropdownProps
+ * @property {React.ReactNode} trigger - Dropdown을 열기 위한 트리거 요소 / Trigger element to open dropdown
+ * @property {React.ReactNode} children - Dropdown 내용 / Dropdown content
+ * @property {boolean} [open] - 제어 모드에서 열림/닫힘 상태 / Open/close state in controlled mode
+ * @property {(open: boolean) => void} [onOpenChange] - 상태 변경 콜백 / State change callback
+ * @property {"top" | "bottom" | "left" | "right"} [placement="bottom"] - Dropdown 표시 위치 / Dropdown display position
+ * @property {"start" | "center" | "end"} [align="start"] - Dropdown 정렬 / Dropdown alignment
+ * @property {number} [offset=8] - 트리거와 Dropdown 사이 간격 (px) / Spacing between trigger and dropdown (px)
+ * @property {boolean} [disabled=false] - Dropdown 비활성화 여부 / Disable dropdown
+ * @property {boolean} [showArrow=true] - 화살표 표시 여부 / Show arrow
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    offset?: number;
+    disabled?: boolean;
+    showArrow?: boolean;
+}
+/**
+ * Dropdown 컴포넌트 / Dropdown component
+ *
+ * 트리거 요소를 클릭하면 표시되는 드롭다운 메뉴 컴포넌트입니다.
+ * 외부 클릭 시 자동으로 닫히며, 뷰포트 경계를 자동으로 감지하여 위치를 조정합니다.
+ *
+ * Dropdown menu component that appears when the trigger element is clicked.
+ * Automatically closes on outside click and adjusts position by detecting viewport boundaries.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Dropdown trigger={<Button>메뉴</Button>}>
+ *   <Menu>
+ *     <MenuItem>항목 1</MenuItem>
+ *     <MenuItem>항목 2</MenuItem>
+ *   </Menu>
+ * </Dropdown>
+ *
+ * @example
+ * // 제어 모드, 화살표 없음 / Controlled mode, no arrow
+ * const [open, setOpen] = useState(false)
+ * <Dropdown
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   trigger={<Button>제어 모드</Button>}
+ *   placement="top"
+ *   showArrow={false}
+ * >
+ *   <div className="p-4">내용</div>
+ * </Dropdown>
+ *
+ * @param {DropdownProps} props - Dropdown 컴포넌트의 props / Dropdown component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Dropdown 컴포넌트 / Dropdown component
+ */
+declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    variant?: "default" | "destructive" | "disabled";
+}
+declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLButtonElement>>;
+interface DropdownSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const DropdownSeparator: React.ForwardRefExoticComponent<DropdownSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const DropdownLabel: React.ForwardRefExoticComponent<DropdownLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenu: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Drawer 컴포넌트의 props / Drawer component props
+ * @typedef {Object} DrawerProps
+ * @property {boolean} open - Drawer 열림/닫힘 상태 / Drawer open/close state
+ * @property {(open: boolean) => void} onOpenChange - 상태 변경 콜백 / State change callback
+ * @property {React.ReactNode} children - Drawer 내용 / Drawer content
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {"left" | "right" | "top" | "bottom"} [side="right"] - Drawer 표시 위치 / Drawer display position
+ * @property {"sm" | "md" | "lg" | "xl" | "full"} [size="md"] - Drawer 크기 / Drawer size
+ * @property {boolean} [showBackdrop=true] - 배경 오버레이 표시 여부 / Show backdrop overlay
+ * @property {string} [backdropClassName] - 배경 오버레이 추가 CSS 클래스 / Backdrop overlay additional CSS class
+ * @property {boolean} [closeOnBackdropClick=true] - 배경 클릭 시 닫기 여부 / Close on backdrop click
+ * @property {boolean} [closeOnEscape=true] - ESC 키로 닫기 여부 / Close on ESC key
+ */
+interface DrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: React.ReactNode;
+    className?: string;
+    side?: "left" | "right" | "top" | "bottom";
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    showBackdrop?: boolean;
+    backdropClassName?: string;
+    closeOnBackdropClick?: boolean;
+    closeOnEscape?: boolean;
+}
+/**
+ * Drawer 컴포넌트 / Drawer component
+ *
+ * 사이드에서 슬라이드되는 패널 컴포넌트입니다.
+ * Modal과 유사하지만 특정 방향에서 슬라이드되는 애니메이션을 제공합니다.
+ * ESC 키로 닫기, 배경 클릭으로 닫기 기능을 지원합니다.
+ *
+ * Panel component that slides from the side.
+ * Similar to Modal but provides slide animation from a specific direction.
+ * Supports closing with ESC key and backdrop click.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * const [open, setOpen] = useState(false)
+ *
+ * <Drawer open={open} onOpenChange={setOpen}>
+ *   <DrawerHeader>제목</DrawerHeader>
+ *   <DrawerContent>내용</DrawerContent>
+ *   <DrawerFooter>
+ *     <Button onClick={() => setOpen(false)}>닫기</Button>
+ *   </DrawerFooter>
+ * </Drawer>
+ *
+ * @example
+ * // 왼쪽에서 열기 / Open from left
+ * <Drawer open={open} onOpenChange={setOpen} side="left" size="lg">
+ *   <DrawerContent>사이드바 내용</DrawerContent>
+ * </Drawer>
+ *
+ * @param {DrawerProps} props - Drawer 컴포넌트의 props / Drawer component props
+ * @param {React.Ref<HTMLDivElement>} ref - Drawer 컨테이너 ref / Drawer container ref
+ * @returns {JSX.Element} Drawer 컴포넌트 / Drawer component
+ *
+ * @todo 접근성 개선: role="dialog", aria-modal="true" 추가 필요 / Accessibility: Add role="dialog", aria-modal="true"
+ * @todo 접근성 개선: aria-labelledby, aria-describedby 연결 필요 / Accessibility: Connect aria-labelledby, aria-describedby
+ */
+declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DrawerHeader 컴포넌트의 props / DrawerHeader component props
+ * @typedef {Object} DrawerHeaderProps
+ * @property {React.ReactNode} children - 헤더 내용 / Header content
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {boolean} [showCloseButton=true] - 닫기 버튼 표시 여부 / Show close button
+ * @property {() => void} [onClose] - 닫기 버튼 클릭 콜백 / Close button click callback
+ */
+interface DrawerHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+    showCloseButton?: boolean;
+    onClose?: () => void;
+}
+/**
+ * DrawerHeader 컴포넌트 / DrawerHeader component
+ * Drawer의 헤더 영역을 표시합니다.
+ * Displays the header area of a Drawer.
+ *
+ * @component
+ * @param {DrawerHeaderProps} props - DrawerHeader 컴포넌트의 props / DrawerHeader component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} DrawerHeader 컴포넌트 / DrawerHeader component
+ */
+declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DrawerContent 컴포넌트의 props / DrawerContent component props
+ * @typedef {Object} DrawerContentProps
+ * @property {React.ReactNode} children - 콘텐츠 / Content
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ */
+interface DrawerContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * DrawerContent 컴포넌트 / DrawerContent component
+ * Drawer의 메인 콘텐츠 영역을 표시합니다.
+ * Displays the main content area of a Drawer.
+ *
+ * @component
+ * @param {DrawerContentProps} props - DrawerContent 컴포넌트의 props / DrawerContent component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} DrawerContent 컴포넌트 / DrawerContent component
+ */
+declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * DrawerFooter 컴포넌트의 props / DrawerFooter component props
+ * @typedef {Object} DrawerFooterProps
+ * @property {React.ReactNode} children - 푸터 내용 / Footer content
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ */
+interface DrawerFooterProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * DrawerFooter 컴포넌트 / DrawerFooter component
+ * Drawer의 푸터 영역을 표시합니다. 주로 액션 버튼을 배치합니다.
+ * Displays the footer area of a Drawer. Typically used for action buttons.
+ *
+ * @component
+ * @param {DrawerFooterProps} props - DrawerFooter 컴포넌트의 props / DrawerFooter component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} DrawerFooter 컴포넌트 / DrawerFooter component
+ */
+declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * BottomSheet 컴포넌트의 props / BottomSheet component props
+ * @typedef {Object} BottomSheetProps
+ * @property {boolean} open - BottomSheet 열림/닫힘 상태 / BottomSheet open/close state
+ * @property {(open: boolean) => void} onOpenChange - 상태 변경 콜백 / State change callback
+ * @property {React.ReactNode} children - BottomSheet 내용 / BottomSheet content
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {"sm" | "md" | "lg" | "xl" | "full"} [height="md"] - BottomSheet 높이 / BottomSheet height
+ * @property {boolean} [showBackdrop=true] - 배경 오버레이 표시 여부 / Show backdrop overlay
+ * @property {string} [backdropClassName] - 배경 오버레이 추가 CSS 클래스 / Backdrop overlay additional CSS class
+ * @property {boolean} [closeOnBackdropClick=true] - 배경 클릭 시 닫기 여부 / Close on backdrop click
+ * @property {boolean} [closeOnEscape=true] - ESC 키로 닫기 여부 / Close on ESC key
+ * @property {boolean} [showDragHandle=true] - 드래그 핸들 표시 여부 / Show drag handle
+ * @property {number[]} [snapPoints=[25, 50, 75, 100]] - 스냅 포인트 (퍼센트) / Snap points (percentage)
+ * @property {number} [defaultSnap=50] - 기본 스냅 포인트 (퍼센트) / Default snap point (percentage)
+ */
+interface BottomSheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: React.ReactNode;
+    className?: string;
+    height?: "sm" | "md" | "lg" | "xl" | "full";
+    showBackdrop?: boolean;
+    backdropClassName?: string;
+    closeOnBackdropClick?: boolean;
+    closeOnEscape?: boolean;
+    showDragHandle?: boolean;
+    snapPoints?: number[];
+    defaultSnap?: number;
+}
+/**
+ * BottomSheet 컴포넌트 / BottomSheet component
+ *
+ * 화면 하단에서 올라오는 시트 컴포넌트입니다.
+ * 모바일 친화적인 UI를 제공하며, 드래그로 높이를 조절할 수 있습니다.
+ * 스냅 포인트를 지원하여 특정 높이에서 멈출 수 있습니다.
+ *
+ * Sheet component that slides up from the bottom of the screen.
+ * Provides mobile-friendly UI and allows height adjustment by dragging.
+ * Supports snap points to stop at specific heights.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * const [open, setOpen] = useState(false)
+ *
+ * <BottomSheet open={open} onOpenChange={setOpen}>
+ *   <BottomSheetHeader>제목</BottomSheetHeader>
+ *   <BottomSheetContent>내용</BottomSheetContent>
+ * </BottomSheet>
+ *
+ * @example
+ * // 커스텀 스냅 포인트 / Custom snap points
+ * <BottomSheet
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   snapPoints={[30, 60, 90]}
+ *   defaultSnap={30}
+ * >
+ *   <BottomSheetContent>내용</BottomSheetContent>
+ * </BottomSheet>
+ *
+ * @param {BottomSheetProps} props - BottomSheet 컴포넌트의 props / BottomSheet component props
+ * @param {React.Ref<HTMLDivElement>} ref - BottomSheet 컨테이너 ref / BottomSheet container ref
+ * @returns {JSX.Element} BottomSheet 컴포넌트 / BottomSheet component
+ *
+ * @todo 접근성 개선: role="dialog", aria-modal="true" 추가 필요 / Accessibility: Add role="dialog", aria-modal="true"
+ * @todo 접근성 개선: aria-labelledby, aria-describedby 연결 필요 / Accessibility: Connect aria-labelledby, aria-describedby
+ */
+declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * ConfirmModal 컴포넌트의 props / ConfirmModal component props
+ * @typedef {Object} ConfirmModalProps
+ * @property {boolean} isOpen - 모달 열림/닫힘 상태 / Modal open/close state
+ * @property {() => void} onClose - 닫기 콜백 / Close callback
+ * @property {() => void} onConfirm - 확인 콜백 / Confirm callback
+ * @property {string} title - 모달 제목 / Modal title
+ * @property {string} message - 모달 메시지 / Modal message
+ * @property {string} [warning] - 경고 메시지 / Warning message
+ * @property {string} [confirmText="확인"] - 확인 버튼 텍스트 / Confirm button text
+ * @property {string} [cancelText="취소"] - 취소 버튼 텍스트 / Cancel button text
+ * @property {string} [confirmButtonText] - 확인 버튼 커스텀 텍스트 / Custom confirm button text
+ * @property {"danger" | "warning" | "info" | "success" | "error"} [type="danger"] - 모달 타입 / Modal type
+ * @property {boolean} [loading=false] - 로딩 상태 / Loading state
+ * @property {boolean} [disabled=false] - 비활성화 여부 / Disabled state
+ * @property {boolean} [showInput=false] - 입력 필드 표시 여부 / Show input field
+ * @property {string} [inputValue=""] - 입력 필드 값 / Input field value
+ * @property {(value: string) => void} [onInputChange] - 입력 값 변경 콜백 / Input value change callback
+ * @property {string} [inputPlaceholder] - 입력 필드 플레이스홀더 / Input field placeholder
+ * @property {string} [inputLabel] - 입력 필드 라벨 / Input field label
+ * @property {string} [requiredInputValue] - 필수 입력 값 (확인 버튼 활성화 조건) / Required input value (confirm button activation condition)
+ * @property {boolean} [showCancel=true] - 취소 버튼 표시 여부 / Show cancel button
+ * @property {"sm" | "md" | "lg" | "xl" | "2xl"} [size="md"] - 모달 크기 / Modal size
+ */
+interface ConfirmModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    message: string;
+    warning?: string;
+    confirmText?: string;
+    cancelText?: string;
+    confirmButtonText?: string;
+    type?: "danger" | "warning" | "info" | "success" | "error";
+    loading?: boolean;
+    disabled?: boolean;
+    showInput?: boolean;
+    inputValue?: string;
+    onInputChange?: (value: string) => void;
+    inputPlaceholder?: string;
+    inputLabel?: string;
+    requiredInputValue?: string;
+    showCancel?: boolean;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl";
+}
+/**
+ * ConfirmModal 컴포넌트 / ConfirmModal component
+ *
+ * 확인/취소가 필요한 모달 컴포넌트입니다.
+ * 다양한 타입(danger, warning, info, success, error)을 지원하며,
+ * 입력 필드와 필수 입력 값 검증을 지원합니다.
+ *
+ * Modal component that requires confirmation/cancellation.
+ * Supports various types (danger, warning, info, success, error),
+ * and supports input fields and required input value validation.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <ConfirmModal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   onConfirm={handleConfirm}
+ *   title="삭제 확인"
+ *   message="정말 삭제하시겠습니까?"
+ * />
+ *
+ * @example
+ * // 입력 필드와 함께 / With input field
+ * <ConfirmModal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   onConfirm={handleDelete}
+ *   title="삭제 확인"
+ *   message="삭제하려면 'DELETE'를 입력하세요"
+ *   showInput
+ *   inputLabel="확인 입력"
+ *   requiredInputValue="DELETE"
+ *   inputValue={inputValue}
+ *   onInputChange={setInputValue}
+ * />
+ *
+ * @param {ConfirmModalProps} props - ConfirmModal 컴포넌트의 props / ConfirmModal component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} ConfirmModal 컴포넌트 / ConfirmModal component
+ */
+declare const ConfirmModal: React.ForwardRefExoticComponent<ConfirmModalProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Accordion 컴포넌트의 props / Accordion component props
+ * @typedef {Object} AccordionProps
+ * @property {React.ReactNode} children - AccordionItem 컴포넌트들 / AccordionItem components
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {"single" | "multiple"} [type="single"] - 단일 또는 다중 아이템 열기 허용 / Allow single or multiple items to be open
+ * @property {string | string[]} [defaultValue] - 초기 열린 아이템 값 (비제어 컴포넌트) / Initial open item value (uncontrolled component)
+ * @property {string | string[]} [value] - 현재 열린 아이템 값 (제어 컴포넌트) / Current open item value (controlled component)
+ * @property {(value: string | string[]) => void} [onValueChange] - 아이템 열림/닫힘 콜백 / Item open/close callback
+ * @property {boolean} [collapsible=false] - 단일 모드에서 열린 아이템을 닫을 수 있는지 여부 / Whether open item can be closed in single mode
+ */
+interface AccordionProps {
+    children: React.ReactNode;
+    className?: string;
+    type?: "single" | "multiple";
+    defaultValue?: string | string[];
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    collapsible?: boolean;
+}
+/**
+ * Accordion 컴포넌트 / Accordion component
+ *
+ * 접을 수 있는 콘텐츠 섹션을 제공하는 컴포넌트입니다.
+ * 키보드 네비게이션(Arrow keys, Home/End)을 지원하며, ARIA 속성을 자동으로 설정합니다.
+ *
+ * Component that provides collapsible content sections.
+ * Supports keyboard navigation (Arrow keys, Home/End) and automatically sets ARIA attributes.
+ *
+ * @component
+ * @example
+ * // 기본 사용 (단일 열기) / Basic usage (single open)
+ * <Accordion type="single">
+ *   <AccordionItem value="item1">
+ *     <AccordionTrigger>제목 1</AccordionTrigger>
+ *     <AccordionContent>내용 1</AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item2">
+ *     <AccordionTrigger>제목 2</AccordionTrigger>
+ *     <AccordionContent>내용 2</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * @example
+ * // 다중 열기 / Multiple open
+ * <Accordion type="multiple" defaultValue={["item1", "item2"]}>
+ *   <AccordionItem value="item1">
+ *     <AccordionTrigger>제목 1</AccordionTrigger>
+ *     <AccordionContent>내용 1</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * @example
+ * // 제어 컴포넌트 / Controlled component
+ * const [openItems, setOpenItems] = useState<string[]>([])
+ * <Accordion type="multiple" value={openItems} onValueChange={setOpenItems}>
+ *   <AccordionItem value="item1">
+ *     <AccordionTrigger>제목</AccordionTrigger>
+ *     <AccordionContent>내용</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * @param {AccordionProps} props - Accordion 컴포넌트의 props / Accordion component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Accordion 컴포넌트 / Accordion component
+ */
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * AccordionItem 컴포넌트의 props / AccordionItem component props
+ * @typedef {Object} AccordionItemProps
+ * @property {string} value - 아이템의 고유 값 / Item unique value
+ * @property {React.ReactNode} children - AccordionTrigger와 AccordionContent / AccordionTrigger and AccordionContent
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {boolean} [disabled=false] - 아이템 비활성화 여부 / Item disabled state
+ * @property {string[]} [openItems] - 열린 아이템 목록 (Accordion에서 자동 전달) / Open items list (auto-passed from Accordion)
+ * @property {(value: string) => void} [onToggle] - 토글 콜백 (Accordion에서 자동 전달) / Toggle callback (auto-passed from Accordion)
+ */
+interface AccordionItemProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    openItems?: string[];
+    onToggle?: (value: string) => void;
+}
+/**
+ * AccordionItem 컴포넌트 / AccordionItem component
+ * 아코디언의 개별 아이템을 감싸는 컨테이너입니다.
+ * Container that wraps an individual accordion item.
+ *
+ * @component
+ * @param {AccordionItemProps} props - AccordionItem 컴포넌트의 props / AccordionItem component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} AccordionItem 컴포넌트 / AccordionItem component
+ */
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+interface AccordionTriggerProps {
+    children: React.ReactNode;
+    className?: string;
+    icon?: React.ReactNode;
+    iconPosition?: "left" | "right";
+    value?: string;
+    isOpen?: boolean;
+    disabled?: boolean;
+    onToggle?: () => void;
+}
+declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * AccordionTrigger 컴포넌트 / AccordionTrigger component
+ * 아코디언 아이템을 열고 닫는 트리거 버튼입니다.
+ * Button that opens and closes an accordion item.
+ *
+ * @component
+ * @param {AccordionTriggerProps} props - AccordionTrigger 컴포넌트의 props / AccordionTrigger component props
+ * @param {React.Ref<HTMLButtonElement>} ref - button 요소 ref / button element ref
+ * @returns {JSX.Element} AccordionTrigger 컴포넌트 / AccordionTrigger component
+ */
+/**
+ * AccordionContent 컴포넌트의 props
+ * @typedef {Object} AccordionContentProps
+ * @property {React.ReactNode} children - 콘텐츠
+ * @property {string} [className] - 추가 CSS 클래스
+ * @property {boolean} [isOpen] - 열림 상태 (AccordionItem에서 자동 전달)
+ * @property {string} [value] - 아이템 값 (AccordionItem에서 자동 전달)
+ * @property {string} ['data-accordion-value'] - 아이템 값 (내부 사용)
+ */
+interface AccordionContentProps {
+    children: React.ReactNode;
+    className?: string;
+    isOpen?: boolean;
+    value?: string;
+    'data-accordion-value'?: string;
+}
+/**
+ * AccordionContent 컴포넌트 / AccordionContent component
+ * 아코디언 아이템의 콘텐츠를 표시합니다.
+ * Displays the content of an accordion item.
+ *
+ * @component
+ * @param {AccordionContentProps} props - AccordionContent 컴포넌트의 props / AccordionContent component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} AccordionContent 컴포넌트 / AccordionContent component
+ */
+declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * TabsContent 컴포넌트의 props / TabsContent component props
+ * @typedef {Object} TabsContentProps
+ * @property {string} value - 탭 패널의 고유 값 (TabsTrigger의 value와 일치해야 함) / Unique value for tab panel (must match TabsTrigger value)
+ * @property {boolean} [active] - 탭 패널 활성화 상태 (자동 설정됨) / Tab panel active state (auto-set)
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+    active?: boolean;
+}
+/**
+ * TabsContent 컴포넌트 / TabsContent component
+ * 탭의 콘텐츠 패널을 표시합니다. Tabs 컴포넌트 내부에서 사용됩니다.
+ * Displays the tab content panel. Used inside Tabs component.
+ *
+ * @component
+ * @param {TabsContentProps} props - TabsContent 컴포넌트의 props / TabsContent component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} TabsContent 컴포넌트 / TabsContent component
+ */
+declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Tabs 컴포넌트의 props / Tabs component props
+ * @typedef {Object} TabsProps
+ * @property {string} [value] - 현재 활성화된 탭 값 (제어 컴포넌트) / Currently active tab value (controlled component)
+ * @property {string} [defaultValue] - 초기 활성화된 탭 값 (비제어 컴포넌트) / Initial active tab value (uncontrolled component)
+ * @property {(value: string) => void} [onValueChange] - 탭 변경 시 호출되는 콜백 / Callback when tab changes
+ * @property {"horizontal" | "vertical"} [orientation="horizontal"] - 탭 방향 / Tab orientation
+ * @property {"default" | "pills" | "underline" | "cards"} [variant="default"] - 탭 스타일 변형 / Tab style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - 탭 크기 / Tab size
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
+    variant?: "default" | "pills" | "underline" | "cards";
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Tabs 컴포넌트 / Tabs component
+ *
+ * 탭 네비게이션을 제공하는 컴포넌트입니다.
+ * 키보드 네비게이션(Arrow keys, Home/End)을 지원하며, ARIA 속성을 자동으로 설정합니다.
+ *
+ * Component that provides tab navigation.
+ * Supports keyboard navigation (Arrow keys, Home/End) and automatically sets ARIA attributes.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">탭 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">탭 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">탭 1 내용</TabsContent>
+ *   <TabsContent value="tab2">탭 2 내용</TabsContent>
+ * </Tabs>
+ *
+ * @example
+ * // 제어 컴포넌트 / Controlled component
+ * const [activeTab, setActiveTab] = useState("tab1")
+ * <Tabs value={activeTab} onValueChange={setActiveTab}>
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">탭 1</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">내용</TabsContent>
+ * </Tabs>
+ *
+ * @example
+ * // 다양한 변형 / Various variants
+ * <Tabs variant="pills" size="lg">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Pills 스타일</TabsTrigger>
+ *   </TabsList>
+ * </Tabs>
+ *
+ * @param {TabsProps} props - Tabs 컴포넌트의 props / Tabs component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Tabs 컴포넌트 / Tabs component
+ */
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * TabsList 컴포넌트의 props / TabsList component props
+ * @typedef {Object} TabsListProps
+ * @property {string} [value] - 현재 활성화된 탭 값 (Tabs에서 자동 전달) / Currently active tab value (auto-passed from Tabs)
+ * @property {(value: string) => void} [onValueChange] - 탭 변경 콜백 (Tabs에서 자동 전달) / Tab change callback (auto-passed from Tabs)
+ * @property {"horizontal" | "vertical"} [orientation] - 탭 방향 (Tabs에서 자동 전달) / Tab orientation (auto-passed from Tabs)
+ * @property {"default" | "pills" | "underline" | "cards"} [variant] - 탭 스타일 (Tabs에서 자동 전달) / Tab style (auto-passed from Tabs)
+ * @property {"sm" | "md" | "lg"} [size] - 탭 크기 (Tabs에서 자동 전달) / Tab size (auto-passed from Tabs)
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
+    variant?: "default" | "pills" | "underline" | "cards";
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * TabsList 컴포넌트 / TabsList component
+ * 탭 트리거 목록을 표시합니다. Tabs 컴포넌트 내부에서 사용됩니다.
+ * Displays the list of tab triggers. Used inside Tabs component.
+ *
+ * @component
+ * @param {TabsListProps} props - TabsList 컴포넌트의 props / TabsList component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} TabsList 컴포넌트 / TabsList component
+ */
+declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * TabsTrigger 컴포넌트의 props
+ * @typedef {Object} TabsTriggerProps
+ * @property {string} value - 탭 트리거의 고유 값 (TabsContent의 value와 일치해야 함)
+ * @property {(value: string) => void} [onValueChange] - 탭 변경 콜백 (TabsList에서 자동 전달)
+ * @property {"horizontal" | "vertical"} [orientation] - 탭 방향 (TabsList에서 자동 전달)
+ * @property {"default" | "pills" | "underline" | "cards"} [variant] - 탭 스타일 (TabsList에서 자동 전달)
+ * @property {"sm" | "md" | "lg"} [size] - 탭 크기 (TabsList에서 자동 전달)
+ * @property {boolean} [active] - 탭 활성화 상태 (자동 설정됨)
+ * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}
+ */
+interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+    onValueChange?: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
+    variant?: "default" | "pills" | "underline" | "cards";
+    size?: "sm" | "md" | "lg";
+    active?: boolean;
+}
+/**
+ * TabsTrigger 컴포넌트 / TabsTrigger component
+ * 탭을 활성화하는 버튼입니다. TabsList 컴포넌트 내부에서 사용됩니다.
+ * Button that activates a tab. Used inside TabsList component.
+ *
+ * @component
+ * @param {TabsTriggerProps} props - TabsTrigger 컴포넌트의 props / TabsTrigger component props
+ * @param {React.Ref<HTMLButtonElement>} ref - button 요소 ref / button element ref
+ * @returns {JSX.Element} TabsTrigger 컴포넌트 / TabsTrigger component
+ */
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsPills: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsUnderline: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsCards: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Menu 컴포넌트의 props / Menu component props
+ * @typedef {Object} MenuProps
+ * @property {React.ReactNode} children - MenuItem, MenuSeparator, MenuLabel 컴포넌트들 / MenuItem, MenuSeparator, MenuLabel components
+ * @property {"default" | "horizontal" | "vertical" | "compact"} [variant="default"] - 메뉴 방향 및 스타일 / Menu direction and style
+ * @property {"sm" | "md" | "lg"} [size="md"] - 메뉴 아이템 크기 / Menu item size
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    variant?: "default" | "horizontal" | "vertical" | "compact";
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Menu 컴포넌트 / Menu component
+ *
+ * 메뉴 리스트를 제공하는 컴포넌트입니다.
+ * MenuItem, MenuSeparator, MenuLabel과 함께 사용합니다.
+ *
+ * Component that provides menu lists.
+ * Used with MenuItem, MenuSeparator, and MenuLabel.
+ *
+ * @component
+ * @example
+ * // 기본 수직 메뉴 / Basic vertical menu
+ * <Menu>
+ *   <MenuItem icon={<Icon name="home" />}>홈</MenuItem>
+ *   <MenuItem icon={<Icon name="settings" />}>설정</MenuItem>
+ *   <MenuSeparator />
+ *   <MenuItem>로그아웃</MenuItem>
+ * </Menu>
+ *
+ * @example
+ * // 수평 메뉴 / Horizontal menu
+ * <Menu variant="horizontal">
+ *   <MenuItem>메뉴 1</MenuItem>
+ *   <MenuItem>메뉴 2</MenuItem>
+ * </Menu>
+ *
+ * @param {MenuProps} props - Menu 컴포넌트의 props / Menu component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Menu 컴포넌트 / Menu component
+ */
+declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * MenuItem 컴포넌트의 props / MenuItem component props
+ * @typedef {Object} MenuItemProps
+ * @property {React.ReactNode} [icon] - 메뉴 아이템 아이콘 / Menu item icon
+ * @property {"default" | "horizontal" | "vertical" | "compact"} [variant] - 메뉴 변형 (Menu에서 자동 전달) / Menu variant (auto-passed from Menu)
+ * @property {"sm" | "md" | "lg"} [size] - 메뉴 크기 (Menu에서 자동 전달) / Menu size (auto-passed from Menu)
+ * @property {boolean} [active=false] - 활성화 상태 / Active state
+ * @property {boolean} [disabled=false] - 비활성화 상태 / Disabled state
+ * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}
+ */
+interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    variant?: "default" | "horizontal" | "vertical" | "compact";
+    size?: "sm" | "md" | "lg";
+    active?: boolean;
+    disabled?: boolean;
+}
+/**
+ * MenuItem 컴포넌트 / MenuItem component
+ * 메뉴의 개별 아이템을 표시합니다.
+ * Displays an individual menu item.
+ *
+ * @component
+ * @param {MenuItemProps} props - MenuItem 컴포넌트의 props / MenuItem component props
+ * @param {React.Ref<HTMLButtonElement>} ref - button 요소 ref / button element ref
+ * @returns {JSX.Element} MenuItem 컴포넌트 / MenuItem component
+ */
+declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * MenuSeparator 컴포넌트의 props / MenuSeparator component props
+ * @typedef {Object} MenuSeparatorProps
+ * @property {"default" | "horizontal" | "vertical" | "compact"} [variant] - 메뉴 변형 (Menu에서 자동 전달) / Menu variant (auto-passed from Menu)
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface MenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "horizontal" | "vertical" | "compact";
+}
+/**
+ * MenuSeparator 컴포넌트 / MenuSeparator component
+ * 메뉴 아이템들을 구분하는 구분선을 표시합니다.
+ * Displays a separator line between menu items.
+ *
+ * @component
+ * @param {MenuSeparatorProps} props - MenuSeparator 컴포넌트의 props / MenuSeparator component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} MenuSeparator 컴포넌트 / MenuSeparator component
+ */
+declare const MenuSeparator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * MenuLabel 컴포넌트의 props / MenuLabel component props
+ * @typedef {Object} MenuLabelProps
+ * @property {"default" | "horizontal" | "vertical" | "compact"} [variant] - 메뉴 변형 (Menu에서 자동 전달) / Menu variant (auto-passed from Menu)
+ * @property {"sm" | "md" | "lg"} [size] - 메뉴 크기 (Menu에서 자동 전달) / Menu size (auto-passed from Menu)
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface MenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "horizontal" | "vertical" | "compact";
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * MenuLabel 컴포넌트 / MenuLabel component
+ * 메뉴 섹션의 레이블을 표시합니다.
+ * Displays a label for a menu section.
+ *
+ * @component
+ * @param {MenuLabelProps} props - MenuLabel 컴포넌트의 props / MenuLabel component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} MenuLabel 컴포넌트 / MenuLabel component
+ */
+declare const MenuLabel: React.ForwardRefExoticComponent<MenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuHorizontal: React.ForwardRefExoticComponent<Omit<MenuProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuVertical: React.ForwardRefExoticComponent<Omit<MenuProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuCompact: React.ForwardRefExoticComponent<Omit<MenuProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * ContextMenu 컴포넌트의 props / ContextMenu component props
+ * @typedef {Object} ContextMenuProps
+ * @property {React.ReactNode} children - ContextMenu 내용 / ContextMenu content
+ * @property {boolean} [open] - 제어 모드에서 열림/닫힘 상태 / Open/close state in controlled mode
+ * @property {(open: boolean) => void} [onOpenChange] - 상태 변경 콜백 / State change callback
+ * @property {React.ReactNode} [trigger] - ContextMenu를 열기 위한 트리거 요소 (우클릭 이벤트) / Trigger element to open context menu (right-click event)
+ * @property {"top" | "bottom" | "left" | "right"} [placement="bottom"] - ContextMenu 표시 위치 / ContextMenu display position
+ * @property {"start" | "center" | "end"} [align="start"] - ContextMenu 정렬 / ContextMenu alignment
+ * @property {number} [offset=8] - 트리거와 ContextMenu 사이 간격 (px) / Spacing between trigger and context menu (px)
+ * @property {boolean} [disabled=false] - ContextMenu 비활성화 여부 / Disable context menu
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface ContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: React.ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    offset?: number;
+    disabled?: boolean;
+}
+/**
+ * ContextMenu 컴포넌트 / ContextMenu component
+ *
+ * 우클릭 시 표시되는 컨텍스트 메뉴 컴포넌트입니다.
+ * 트리거 요소에 우클릭 이벤트를 자동으로 연결합니다.
+ *
+ * Context menu component that appears on right-click.
+ * Automatically connects right-click events to the trigger element.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <ContextMenu trigger={<div>우클릭하세요</div>}>
+ *   <div className="p-2">
+ *     <button>항목 1</button>
+ *     <button>항목 2</button>
+ *   </div>
+ * </ContextMenu>
+ *
+ * @example
+ * // 제어 모드 / Controlled mode
+ * const [open, setOpen] = useState(false)
+ * <ContextMenu
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   trigger={<div>우클릭</div>}
+ * >
+ *   <Menu>
+ *     <MenuItem>복사</MenuItem>
+ *     <MenuItem>삭제</MenuItem>
+ *   </Menu>
+ * </ContextMenu>
+ *
+ * @param {ContextMenuProps} props - ContextMenu 컴포넌트의 props / ContextMenu component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} ContextMenu 컴포넌트 / ContextMenu component
+ */
+declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    variant?: "default" | "destructive" | "disabled";
+}
+declare const ContextMenuItem: React.ForwardRefExoticComponent<ContextMenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+interface ContextMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ContextMenuSeparator: React.ForwardRefExoticComponent<ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ContextMenuLabel: React.ForwardRefExoticComponent<ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Command 컴포넌트의 props / Command component props
+ * @typedef {Object} CommandProps
+ * @property {React.ReactNode} children - CommandList, CommandItem 등 / CommandList, CommandItem, etc.
+ * @property {boolean} [open] - 제어 모드에서 열림/닫힘 상태 / Open/close state in controlled mode
+ * @property {(open: boolean) => void} [onOpenChange] - 상태 변경 콜백 / State change callback
+ * @property {string} [placeholder="명령어를 검색하세요..."] - 검색 입력 플레이스홀더 / Search input placeholder
+ * @property {string} [searchValue] - 제어 모드에서 검색 값 / Search value in controlled mode
+ * @property {(value: string) => void} [onSearchChange] - 검색 값 변경 콜백 / Search value change callback
+ * @property {boolean} [disabled=false] - Command 비활성화 여부 / Disable command
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placeholder?: string;
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    disabled?: boolean;
+}
+/**
+ * Command 컴포넌트 / Command component
+ *
+ * 명령 팔레트(Command Palette) 컴포넌트입니다.
+ * Cmd+K (Mac) 또는 Ctrl+K (Windows)로 열 수 있습니다.
+ * 키보드 네비게이션(Arrow keys, Enter, Escape)을 지원합니다.
+ *
+ * Command Palette component.
+ * Can be opened with Cmd+K (Mac) or Ctrl+K (Windows).
+ * Supports keyboard navigation (Arrow keys, Enter, Escape).
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Command>
+ *   <CommandInput placeholder="검색..." />
+ *   <CommandList>
+ *     <CommandItem>항목 1</CommandItem>
+ *     <CommandItem>항목 2</CommandItem>
+ *   </CommandList>
+ * </Command>
+ *
+ * @example
+ * // 제어 모드 / Controlled mode
+ * const [open, setOpen] = useState(false)
+ * <Command
+ *   open={open}
+ *   onOpenChange={setOpen}
+ * >
+ *   <CommandList>
+ *     <CommandGroup heading="파일">
+ *       <CommandItem>새 파일</CommandItem>
+ *     </CommandGroup>
+ *   </CommandList>
+ * </Command>
+ *
+ * @param {CommandProps} props - Command 컴포넌트의 props / Command component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} Command 컴포넌트 / Command component
+ */
+declare const Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CommandInput 컴포넌트의 props / CommandInput component props
+ * @typedef {Object} CommandInputProps
+ * @extends {React.InputHTMLAttributes<HTMLInputElement>}
+ */
+interface CommandInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
+interface CommandListProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CommandList: React.ForwardRefExoticComponent<CommandListProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CommandItem 컴포넌트의 props / CommandItem component props
+ * @typedef {Object} CommandItemProps
+ * @property {React.ReactNode} [icon] - 항목 아이콘 / Item icon
+ * @property {boolean} [selected=false] - 선택 상태 / Selected state
+ * @property {() => void} [onSelect] - 선택 시 콜백 / Selection callback
+ * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}
+ */
+interface CommandItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    selected?: boolean;
+    onSelect?: () => void;
+}
+declare const CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * CommandGroup 컴포넌트의 props / CommandGroup component props
+ * @typedef {Object} CommandGroupProps
+ * @property {React.ReactNode} [heading] - 그룹 제목 / Group heading
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    heading?: React.ReactNode;
+}
+declare const CommandGroup: React.ForwardRefExoticComponent<CommandGroupProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CommandSeparator 컴포넌트의 props / CommandSeparator component props
+ * @typedef {Object} CommandSeparatorProps
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface CommandSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CommandSeparator: React.ForwardRefExoticComponent<CommandSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CommandEmpty 컴포넌트의 props / CommandEmpty component props
+ * @typedef {Object} CommandEmptyProps
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface CommandEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CommandEmpty: React.ForwardRefExoticComponent<CommandEmptyProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandDialog: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * 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;
+    orientation?: "vertical" | "horizontal" | "both";
+    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>>;
+
+/**
+ * ScrollToTop 컴포넌트의 props / ScrollToTop component props
+ * @typedef {Object} ScrollToTopProps
+ * @property {number} [threshold=400] - 표시 임계값 (px, 이 값 이상 스크롤 시 표시) / Display threshold (px, shows when scrolled beyond this value)
+ * @property {boolean} [smooth=true] - 부드러운 스크롤 여부 / Smooth scroll
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {IconName} [icon='arrowUp'] - 아이콘 이름 / Icon name
+ * @property {"sm" | "md" | "lg"} [size="md"] - 버튼 크기 / Button size
+ * @property {"default" | "primary" | "secondary" | "outline" | "ghost"} [variant="default"] - 버튼 스타일 변형 / Button style variant
+ * @property {boolean} [showOnMount=false] - 마운트 시 즉시 표시 여부 / Show immediately on mount
+ * @extends {React.HTMLAttributes<HTMLButtonElement>}
+ */
+interface ScrollToTopProps extends React.HTMLAttributes<HTMLButtonElement> {
+    threshold?: number;
+    smooth?: boolean;
+    className?: string;
+    icon?: IconName;
+    size?: "sm" | "md" | "lg";
+    variant?: "default" | "primary" | "secondary" | "outline" | "ghost";
+    showOnMount?: boolean;
+}
+/**
+ * ScrollToTop 컴포넌트 / ScrollToTop component
+ *
+ * 페이지 상단으로 스크롤하는 버튼 컴포넌트입니다.
+ * 지정된 임계값 이상 스크롤 시 자동으로 표시됩니다.
+ *
+ * Button component that scrolls to top of page.
+ * Automatically appears when scrolled beyond specified threshold.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <ScrollToTop />
+ *
+ * @example
+ * // 커스텀 설정 / Custom settings
+ * <ScrollToTop
+ *   threshold={500}
+ *   variant="primary"
+ *   size="lg"
+ *   icon="arrowUp"
+ * />
+ *
+ * @param {ScrollToTopProps} props - ScrollToTop 컴포넌트의 props / ScrollToTop component props
+ * @returns {JSX.Element} ScrollToTop 컴포넌트 / ScrollToTop component
+ */
+declare const ScrollToTop: ({ className, threshold, smooth, icon, size, variant, showOnMount, ...props }: ScrollToTopProps) => react_jsx_runtime.JSX.Element;
+
+type Theme = "light" | "dark" | "system";
+/**
+ * ThemeProvider 컴포넌트의 props / ThemeProvider component props
+ * @typedef {Object} ThemeProviderProps
+ * @property {React.ReactNode} children - 자식 컴포넌트 / Child components
+ * @property {"light" | "dark" | "system"} [defaultTheme="light"] - 기본 테마 / Default theme
+ * @property {string} [storageKey="hua-ui-theme"] - localStorage 키 / localStorage key
+ * @property {boolean} [enableSystem=true] - 시스템 테마 감지 활성화 / Enable system theme detection
+ * @property {boolean} [enableTransition=true] - 테마 전환 애니메이션 활성화 / Enable theme transition animation
+ */
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+    enableSystem?: boolean;
+    enableTransition?: boolean;
+}
+/**
+ * ThemeProvider의 상태 타입 / ThemeProvider state type
+ * @typedef {Object} ThemeProviderState
+ * @property {"light" | "dark" | "system"} theme - 현재 테마 / Current theme
+ * @property {(theme: "light" | "dark" | "system") => void} setTheme - 테마 설정 함수 / Theme setter function
+ * @property {"light" | "dark"} resolvedTheme - 실제 적용된 테마 (system일 경우 시스템 테마) / Actually applied theme (system theme when system is selected)
+ * @property {() => void} toggleTheme - 테마 토글 함수 / Theme toggle function
+ */
+interface ThemeProviderState {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    resolvedTheme: "light" | "dark";
+    toggleTheme: () => void;
+}
+/**
+ * ThemeProvider 컴포넌트 / ThemeProvider component
+ *
+ * 테마 관리를 위한 Context Provider 컴포넌트입니다.
+ * localStorage에 테마를 저장하고, 시스템 테마를 감지할 수 있습니다.
+ * useTheme 훅을 통해 테마 상태에 접근할 수 있습니다.
+ *
+ * Context Provider component for theme management.
+ * Saves theme to localStorage and can detect system theme.
+ * Access theme state through useTheme hook.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <ThemeProvider>
+ *   <App />
+ * </ThemeProvider>
+ *
+ * @example
+ * // 커스텀 설정 / Custom settings
+ * <ThemeProvider
+ *   defaultTheme="dark"
+ *   storageKey="my-app-theme"
+ *   enableSystem={true}
+ *   enableTransition={true}
+ * >
+ *   <App />
+ * </ThemeProvider>
+ *
+ * @param {ThemeProviderProps} props - ThemeProvider 컴포넌트의 props / ThemeProvider component props
+ * @returns {JSX.Element} ThemeProvider 컴포넌트 / ThemeProvider component
+ */
+declare function ThemeProvider({ children, defaultTheme, // system에서 light로 변경
+storageKey, enableSystem, enableTransition, ...props }: ThemeProviderProps): React.ReactElement;
+/**
+ * useTheme 훅 / useTheme hook
+ *
+ * ThemeProvider의 테마 상태에 접근하는 훅입니다.
+ * ThemeProvider 내부에서만 사용할 수 있습니다.
+ *
+ * Hook to access ThemeProvider's theme state.
+ * Can only be used inside ThemeProvider.
+ *
+ * @example
+ * const { theme, setTheme, resolvedTheme, toggleTheme } = useTheme()
+ *
+ * @returns {ThemeProviderState} 테마 상태와 함수들 / Theme state and functions
+ * @throws {Error} ThemeProvider 외부에서 사용 시 에러 발생 / Error when used outside ThemeProvider
+ */
+declare const useTheme: () => ThemeProviderState;
+
+/**
+ * ThemeToggle 컴포넌트의 props / ThemeToggle component props
+ * @typedef {Object} ThemeToggleProps
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ * @property {"sm" | "md" | "lg"} [size="md"] - Toggle 크기 / Toggle size
+ * @property {"button" | "icon" | "switch"} [variant="button"] - Toggle 스타일 변형 / Toggle style variant
+ * @property {boolean} [showLabel=false] - 라벨 표시 여부 / Show label
+ * @property {Object} [label] - 커스텀 라벨 텍스트 / Custom label text
+ * @property {string} [label.light="라이트"] - 라이트 모드 라벨 / Light mode label
+ * @property {string} [label.dark="다크"] - 다크 모드 라벨 / Dark mode label
+ * @property {string} [label.system="시스템"] - 시스템 모드 라벨 / System mode label
+ */
+interface ThemeToggleProps {
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    variant?: "button" | "icon" | "switch";
+    showLabel?: boolean;
+    label?: {
+        light?: string;
+        dark?: string;
+        system?: string;
+    };
+}
+/**
+ * ThemeToggle 컴포넌트 / ThemeToggle component
+ *
+ * 테마를 전환하는 토글 컴포넌트입니다.
+ * ThemeProvider와 함께 사용하며, light/dark/system 테마를 지원합니다.
+ *
+ * Toggle component for switching themes.
+ * Used with ThemeProvider, supports light/dark/system themes.
+ *
+ * @component
+ * @example
+ * // 기본 사용 (버튼 스타일) / Basic usage (button style)
+ * <ThemeToggle />
+ *
+ * @example
+ * // 아이콘만 표시 / Icon only
+ * <ThemeToggle variant="icon" size="lg" />
+ *
+ * @example
+ * // Switch 스타일 / Switch style
+ * <ThemeToggle variant="switch" />
+ *
+ * @example
+ * // 라벨과 함께 / With label
+ * <ThemeToggle
+ *   showLabel
+ *   label={{ light: "밝게", dark: "어둡게" }}
+ * />
+ *
+ * @param {ThemeToggleProps} props - ThemeToggle 컴포넌트의 props / ThemeToggle component props
+ * @returns {JSX.Element} ThemeToggle 컴포넌트 / ThemeToggle component
+ */
+declare function ThemeToggle({ className, size, variant, showLabel, label, ...props }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Icon Aliases
+ *
+ * 여러 이름이 같은 아이콘을 가리키도록 하는 alias 시스템
+ * DX 향상을 위해 직관적인 이름들을 지원합니다.
+ */
+declare const ICON_ALIASES: Record<string, string>;
+/**
+ * Resolve icon alias to actual icon name
+ *
+ * @param iconName - 아이콘 이름 또는 별칭 / Icon name or alias
+ * @returns 실제 아이콘 이름 / Actual icon name
+ * @throws {TypeError} iconName이 문자열이 아닌 경우
+ */
+declare function resolveIconAlias(iconName: string): string;
+/**
+ * Get all aliases for an icon name
+ *
+ * @param iconName - 아이콘 이름 / Icon name
+ * @returns 해당 아이콘의 모든 별칭 배열 / Array of all aliases for the icon
+ * @throws {TypeError} iconName이 문자열이 아닌 경우
+ */
+declare function getIconAliases(iconName: string): string[];
+
+/**
+ * HUA UI의 스마트 클래스 병합 유틸리티
+ * clsx와 tailwind-merge를 결합하여 중복 클래스를 자동으로 해결합니다.
+ *
+ * @param inputs - 병합할 클래스 값들
+ * @returns 병합된 클래스 문자열
+ *
+ * @example
+ * ```tsx
+ * merge("px-2 py-1", "px-4") // "py-1 px-4"
+ * merge("text-red-500", "text-blue-500") // "text-blue-500"
+ * merge("bg-white", "dark:bg-slate-900") // "bg-white dark:bg-slate-900"
+ * ```
+ */
+declare function merge(...inputs: ClassValue[]): string;
+/**
+ * 조건부 클래스 병합 유틸리티
+ * 조건에 따라 클래스를 선택적으로 병합합니다.
+ *
+ * @param condition - 클래스를 적용할 조건
+ * @param trueClass - 조건이 true일 때 적용할 클래스
+ * @param falseClass - 조건이 false일 때 적용할 클래스 (선택사항)
+ * @returns 병합된 클래스 문자열
+ *
+ * @example
+ * ```tsx
+ * mergeIf(isActive, "bg-blue-500", "bg-gray-200")
+ * mergeIf(isLoading, "opacity-50 cursor-not-allowed")
+ * ```
+ */
+declare function mergeIf(condition: boolean, trueClass: ClassValue, falseClass?: ClassValue): string;
+/**
+ * 상대 시간 포맷팅 유틸리티
+ *
+ * 날짜를 상대 시간 형식으로 포맷팅합니다 (예: "방금 전", "5분 전", "2시간 전", "3일 전").
+ * 7일 이상 경과한 경우 절대 날짜를 반환합니다.
+ *
+ * Formats a date as relative time (e.g., "방금 전", "5분 전", "2시간 전", "3일 전").
+ * Returns absolute date for dates older than 7 days.
+ *
+ * @param timestamp - 포맷팅할 날짜 (Date 객체 또는 ISO 문자열) / Date to format (Date object or ISO string)
+ * @param locale - 로케일 (기본값: "ko-KR") / Locale (default: "ko-KR")
+ * @returns 포맷팅된 상대 시간 문자열 / Formatted relative time string
+ *
+ * @example
+ * ```tsx
+ * formatRelativeTime(new Date()) // "방금 전"
+ * formatRelativeTime(new Date(Date.now() - 5 * 60000)) // "5분 전"
+ * formatRelativeTime(new Date(Date.now() - 2 * 3600000)) // "2시간 전"
+ * formatRelativeTime(new Date(Date.now() - 3 * 86400000)) // "3일 전"
+ * formatRelativeTime(new Date("2024-01-01")) // "2024. 1. 1." (7일 이상 경과)
+ * ```
+ */
+declare function formatRelativeTime(timestamp: Date | string, locale?: string): string;
+/**
+ * 객체 기반 클래스 병합 유틸리티
+ * 객체의 키-값 쌍을 기반으로 조건부 클래스를 병합합니다.
+ *
+ * @param classMap - 클래스 맵 객체
+ * @returns 병합된 클래스 문자열
+ *
+ * @example
+ * ```tsx
+ * mergeMap({
+ *   "bg-blue-500": isPrimary,
+ *   "bg-gray-500": !isPrimary,
+ *   "text-white": true,
+ *   "opacity-50": isDisabled
+ * })
+ * ```
+ */
+declare function mergeMap(classMap: Record<string, boolean | undefined | null>): string;
+declare const cn: typeof merge;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Action as Act, Action, type ActionButton, ActionToolbar, type ActionToolbarProps, Alert, AlertError, AlertInfo, AlertSuccess, AlertWarning, type AllIconName, Alert as Alt, Avatar, AvatarFallback, AvatarImage, Avatar as Avt, Badge, BottomSheet, Breadcrumb, BreadcrumbItem, type BreadcrumbItemData, type BreadcrumbItemProps, type BreadcrumbProps, Button as Btn, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, ConfirmModal, Container as Cont, Container, ContextMenu, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, Card as Crd, Divider, Drawer, DrawerContent, DrawerFooter, DrawerHeader, Dropdown, DropdownGroup, DropdownItem, DropdownLabel, DropdownMenu, DropdownSeparator, EmotionIcon, ErrorIcon, Grid, ICON_ALIASES, Icon as Ic, Icon, type IconConfig, IconName, type IconProps, IconProvider, type IconProviderProps, type IconSet, Link, Link as Lnk, LoadingSpinner as Loading, LoadingIcon, LoadingSpinner, Modal as Mdl, Menu, MenuCompact, MenuHorizontal, MenuItem, MenuLabel, MenuSeparator, MenuVertical, Modal, type ModalProps, NavigationComponent as Navigation, NavigationContent, NavigationItem, NavigationList, Pagination, PaginationMinimal, PaginationOutlined, PaginationWithInfo, Panel, type PhosphorWeight, Popover, PopoverContent, PopoverTrigger, Progress, ProgressError, ProgressGroup, ProgressInfo, ProgressSuccess, ProgressWarning, type ProjectIconName, ScrollArea, ScrollToTop, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonImage, SkeletonList, SkeletonRectangle, SkeletonRounded, SkeletonTable, SkeletonText, SkeletonUserProfile, Stack, StatusIcon, SuccessIcon, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsCards, TabsContent, TabsList, TabsPills, TabsTrigger, TabsUnderline, Table as Tbl, ThemeProvider, ThemeToggle, Tooltip, TooltipDark, TooltipLight, cn, defaultIconConfig, emotionIcons, formatRelativeTime, getDefaultStrokeWidth, getIconAliases, getIconNameForProvider, iconNames, iconProviderMapping, isValidIconName, merge, mergeIf, mergeMap, resolveIconAlias, statusIcons, useIconContext, useTheme };