@hua-labs/ui 1.1.0-alpha.6 → 2.0.0-alpha.10

package/dist/ComponentLayout-btJq4TjA.d.mts

@@ -0,0 +1,698 @@
+import { I as IconName } from './icons-Bj_nr8Ba.mjs';
+import React$1 from 'react';
+
+/**
+ * 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 iconsax: "Home2";
+    };
+    readonly 'layout-dashboard': {
+        readonly lucide: "LayoutDashboard";
+        readonly phosphor: "SquaresFour";
+    };
+    readonly folder: {
+        readonly lucide: "Folder";
+        readonly phosphor: "Folder";
+        readonly iconsax: "Folder";
+    };
+    readonly 'alert-circle': {
+        readonly lucide: "AlertCircle";
+        readonly phosphor: "WarningCircle";
+        readonly iconsax: "Danger";
+    };
+    readonly alertCircle: {
+        readonly lucide: "AlertCircle";
+        readonly phosphor: "WarningCircle";
+        readonly iconsax: "Danger";
+    };
+    readonly columns: {
+        readonly lucide: "Columns";
+        readonly phosphor: "Columns";
+    };
+    readonly users: {
+        readonly lucide: "Users";
+        readonly phosphor: "Users";
+        readonly iconsax: "People";
+    };
+    readonly settings: {
+        readonly lucide: "Settings";
+        readonly phosphor: "Gear";
+    };
+    readonly menu: {
+        readonly lucide: "Menu";
+        readonly phosphor: "List";
+        readonly iconsax: "Menu";
+    };
+    readonly close: {
+        readonly lucide: "X";
+        readonly phosphor: "X";
+        readonly iconsax: "CloseCircle";
+    };
+    readonly chevronLeft: {
+        readonly lucide: "ChevronLeft";
+        readonly phosphor: "CaretLeft";
+        readonly iconsax: "ArrowLeft2";
+    };
+    readonly chevronRight: {
+        readonly lucide: "ChevronRight";
+        readonly phosphor: "CaretRight";
+        readonly iconsax: "ArrowRight2";
+    };
+    readonly chevronDown: {
+        readonly lucide: "ChevronDown";
+        readonly phosphor: "CaretDown";
+        readonly iconsax: "ArrowDown2";
+    };
+    readonly chevronUp: {
+        readonly lucide: "ChevronUp";
+        readonly phosphor: "CaretUp";
+        readonly iconsax: "ArrowUp2";
+    };
+    readonly arrowLeft: {
+        readonly lucide: "ArrowLeft";
+        readonly phosphor: "ArrowLeft";
+        readonly iconsax: "ArrowLeft";
+    };
+    readonly arrowRight: {
+        readonly lucide: "ArrowRight";
+        readonly phosphor: "ArrowRight";
+        readonly iconsax: "ArrowRight";
+    };
+    readonly arrowUp: {
+        readonly lucide: "ArrowUp";
+        readonly phosphor: "ArrowUp";
+        readonly iconsax: "ArrowUp";
+    };
+    readonly arrowDown: {
+        readonly lucide: "ArrowDown";
+        readonly phosphor: "ArrowDown";
+        readonly iconsax: "ArrowDown";
+    };
+    readonly add: {
+        readonly lucide: "Plus";
+        readonly phosphor: "Plus";
+        readonly iconsax: "Add";
+    };
+    readonly edit: {
+        readonly lucide: "Edit";
+        readonly phosphor: "Pencil";
+    };
+    readonly pencil: {
+        readonly lucide: "Pencil";
+        readonly phosphor: "Pencil";
+    };
+    readonly delete: {
+        readonly lucide: "Trash2";
+        readonly phosphor: "Trash";
+        readonly iconsax: "Trash";
+    };
+    readonly trash: {
+        readonly lucide: "Trash2";
+        readonly phosphor: "Trash";
+        readonly iconsax: "Trash";
+    };
+    readonly upload: {
+        readonly lucide: "Upload";
+        readonly phosphor: "Upload";
+        readonly iconsax: "Upload";
+    };
+    readonly download: {
+        readonly lucide: "Download";
+        readonly phosphor: "Download";
+        readonly iconsax: "Download";
+    };
+    readonly x: {
+        readonly lucide: "X";
+        readonly phosphor: "X";
+    };
+    readonly check: {
+        readonly lucide: "Check";
+        readonly phosphor: "Check";
+        readonly iconsax: "Check";
+    };
+    readonly search: {
+        readonly lucide: "Search";
+        readonly phosphor: "MagnifyingGlass";
+        readonly iconsax: "SearchNormal";
+    };
+    readonly share: {
+        readonly lucide: "Share";
+        readonly phosphor: "Share";
+    };
+    readonly copy: {
+        readonly lucide: "Copy";
+        readonly phosphor: "Copy";
+    };
+    readonly save: {
+        readonly lucide: "Save";
+        readonly phosphor: "FloppyDisk";
+    };
+    readonly loader: {
+        readonly lucide: "Loader2";
+        readonly phosphor: "Spinner";
+    };
+    readonly loader2: {
+        readonly lucide: "Loader2";
+        readonly phosphor: "Spinner";
+    };
+    readonly 'check-circle': {
+        readonly lucide: "CheckCircle";
+        readonly phosphor: "CheckCircle";
+        readonly iconsax: "TickCircle";
+    };
+    readonly checkCircle: {
+        readonly lucide: "CheckCircle";
+        readonly phosphor: "CheckCircle";
+        readonly iconsax: "TickCircle";
+    };
+    readonly success: {
+        readonly lucide: "CheckCircle";
+        readonly phosphor: "CheckCircle";
+        readonly iconsax: "TickCircle";
+    };
+    readonly error: {
+        readonly lucide: "XCircle";
+        readonly phosphor: "XCircle";
+        readonly iconsax: "CloseCircle";
+    };
+    readonly warning: {
+        readonly lucide: "AlertCircle";
+        readonly phosphor: "WarningCircle";
+        readonly iconsax: "Warning2";
+    };
+    readonly info: {
+        readonly lucide: "Info";
+        readonly phosphor: "Info";
+        readonly iconsax: "InfoCircle";
+    };
+    readonly refresh: {
+        readonly lucide: "RefreshCw";
+        readonly phosphor: "ArrowClockwise";
+        readonly iconsax: "Refresh";
+    };
+    readonly refreshCw: {
+        readonly lucide: "RefreshCw";
+        readonly phosphor: "ArrowClockwise";
+        readonly iconsax: "Refresh";
+    };
+    readonly bell: {
+        readonly lucide: "Bell";
+        readonly phosphor: "Bell";
+        readonly iconsax: "Bell";
+    };
+    readonly heart: {
+        readonly lucide: "Heart";
+        readonly phosphor: "Heart";
+        readonly iconsax: "Heart";
+    };
+    readonly star: {
+        readonly lucide: "Star";
+        readonly phosphor: "Star";
+        readonly iconsax: "Star";
+    };
+    readonly bookmark: {
+        readonly lucide: "Bookmark";
+        readonly phosphor: "Bookmark";
+    };
+    readonly user: {
+        readonly lucide: "User";
+        readonly phosphor: "User";
+        readonly iconsax: "User";
+    };
+    readonly userPlus: {
+        readonly lucide: "UserPlus";
+        readonly phosphor: "UserPlus";
+        readonly iconsax: "UserAdd";
+    };
+    readonly logIn: {
+        readonly lucide: "LogIn";
+        readonly phosphor: "SignIn";
+        readonly iconsax: "Login";
+    };
+    readonly logOut: {
+        readonly lucide: "LogOut";
+        readonly phosphor: "SignOut";
+        readonly iconsax: "Logout";
+    };
+    readonly chrome: {
+        readonly lucide: "Chrome";
+        readonly phosphor: "ChromeLogo";
+        readonly iconsax: "Chrome";
+    };
+    readonly github: {
+        readonly lucide: "Github";
+        readonly phosphor: "GithubLogo";
+    };
+    readonly message: {
+        readonly lucide: "MessageCircle";
+        readonly phosphor: "ChatCircle";
+    };
+    readonly messageSquare: {
+        readonly lucide: "MessageSquare";
+        readonly phosphor: "ChatSquare";
+    };
+    readonly 'message-square': {
+        readonly lucide: "MessageSquare";
+        readonly phosphor: "ChatSquare";
+    };
+    readonly inbox: {
+        readonly lucide: "Inbox";
+        readonly phosphor: "Inbox";
+    };
+    readonly calendar: {
+        readonly lucide: "Calendar";
+        readonly phosphor: "Calendar";
+    };
+    readonly calendarPlus: {
+        readonly lucide: "CalendarPlus";
+        readonly phosphor: "CalendarPlus";
+    };
+    readonly checkSquare: {
+        readonly lucide: "CheckSquare";
+        readonly phosphor: "CheckSquare";
+        readonly iconsax: "TickSquare";
+    };
+    readonly clock: {
+        readonly lucide: "Clock";
+        readonly phosphor: "Clock";
+    };
+    readonly book: {
+        readonly lucide: "Book";
+        readonly phosphor: "Book";
+        readonly iconsax: "Book";
+    };
+    readonly bookOpen: {
+        readonly lucide: "BookOpen";
+        readonly phosphor: "BookOpen";
+        readonly iconsax: "Book";
+    };
+    readonly monitor: {
+        readonly lucide: "Monitor";
+        readonly phosphor: "Monitor";
+        readonly iconsax: "Monitor";
+    };
+    readonly sun: {
+        readonly lucide: "Sun";
+        readonly phosphor: "Sun";
+        readonly iconsax: "Sun";
+    };
+    readonly moon: {
+        readonly lucide: "Moon";
+        readonly phosphor: "Moon";
+        readonly iconsax: "Moon";
+    };
+    readonly sparkle: {
+        readonly lucide: "Sparkle";
+        readonly phosphor: "Sparkle";
+    };
+    readonly sparkles: {
+        readonly lucide: "Sparkles";
+        readonly phosphor: "Sparkle";
+    };
+    readonly lightbulb: {
+        readonly lucide: "Lightbulb";
+        readonly phosphor: "Lightbulb";
+    };
+    readonly brain: {
+        readonly lucide: "Brain";
+        readonly phosphor: "Brain";
+    };
+    readonly zap: {
+        readonly lucide: "Zap";
+        readonly phosphor: "Lightning";
+    };
+    readonly globe: {
+        readonly lucide: "Globe";
+        readonly phosphor: "Globe";
+        readonly iconsax: "Global";
+    };
+    readonly deviceMobile: {
+        readonly lucide: "Smartphone";
+        readonly phosphor: "DeviceMobile";
+    };
+    readonly smartphone: {
+        readonly lucide: "Smartphone";
+        readonly phosphor: "DeviceMobile";
+    };
+    readonly floppyDisk: {
+        readonly lucide: "Save";
+        readonly phosphor: "FloppyDisk";
+    };
+    readonly chart: {
+        readonly lucide: "BarChart3";
+        readonly phosphor: "ChartBar";
+    };
+    readonly barChart: {
+        readonly lucide: "BarChart";
+        readonly phosphor: "ChartBar";
+    };
+    readonly trendingUp: {
+        readonly lucide: "TrendingUp";
+        readonly phosphor: "TrendUp";
+    };
+    readonly trendingDown: {
+        readonly lucide: "TrendingDown";
+        readonly phosphor: "TrendDown";
+    };
+    readonly activity: {
+        readonly lucide: "Activity";
+        readonly phosphor: "Pulse";
+    };
+    readonly database: {
+        readonly lucide: "Database";
+        readonly phosphor: "Database";
+    };
+    readonly dollarSign: {
+        readonly lucide: "DollarSign";
+        readonly phosphor: "CurrencyDollar";
+    };
+    readonly dollar: {
+        readonly lucide: "DollarSign";
+        readonly phosphor: "CurrencyDollar";
+    };
+    readonly currency: {
+        readonly lucide: "DollarSign";
+        readonly phosphor: "CurrencyDollar";
+    };
+    readonly layers: {
+        readonly lucide: "Layers";
+        readonly phosphor: "Stack";
+    };
+    readonly ban: {
+        readonly lucide: "Ban";
+        readonly phosphor: "Prohibit";
+    };
+    readonly lock: {
+        readonly lucide: "Lock";
+        readonly phosphor: "Lock";
+        readonly iconsax: "Lock";
+    };
+    readonly unlock: {
+        readonly lucide: "Unlock";
+        readonly phosphor: "LockOpen";
+        readonly iconsax: "Unlock";
+    };
+    readonly shield: {
+        readonly lucide: "Shield";
+        readonly phosphor: "Shield";
+        readonly iconsax: "Shield";
+    };
+    readonly key: {
+        readonly lucide: "Key";
+        readonly phosphor: "Key";
+    };
+    readonly play: {
+        readonly lucide: "Play";
+        readonly phosphor: "Play";
+        readonly iconsax: "Play";
+    };
+    readonly pause: {
+        readonly lucide: "Pause";
+        readonly phosphor: "Pause";
+        readonly iconsax: "Pause";
+    };
+    readonly image: {
+        readonly lucide: "Image";
+        readonly phosphor: "Image";
+        readonly iconsax: "Image";
+    };
+    readonly video: {
+        readonly lucide: "Video";
+        readonly phosphor: "Video";
+        readonly iconsax: "Video";
+    };
+    readonly camera: {
+        readonly lucide: "Camera";
+        readonly phosphor: "Camera";
+        readonly iconsax: "Camera";
+    };
+    readonly fileText: {
+        readonly lucide: "FileText";
+        readonly phosphor: "FileText";
+    };
+    readonly file: {
+        readonly lucide: "File";
+        readonly phosphor: "File";
+    };
+    readonly externalLink: {
+        readonly lucide: "ExternalLink";
+        readonly phosphor: "ArrowSquareOut";
+    };
+    readonly link: {
+        readonly lucide: "Link";
+        readonly phosphor: "Link";
+        readonly iconsax: "Link";
+    };
+    readonly moreHorizontal: {
+        readonly lucide: "MoreHorizontal";
+        readonly phosphor: "DotsThreeOutline";
+    };
+    readonly moreVertical: {
+        readonly lucide: "MoreVertical";
+        readonly phosphor: "DotsThreeVertical";
+    };
+    readonly remove: {
+        readonly lucide: "Minus";
+        readonly phosphor: "Minus";
+        readonly iconsax: "Minus";
+    };
+    readonly eye: {
+        readonly lucide: "Eye";
+        readonly phosphor: "Eye";
+        readonly iconsax: "Eye";
+    };
+    readonly eyeOff: {
+        readonly lucide: "EyeOff";
+        readonly phosphor: "EyeSlash";
+        readonly iconsax: "EyeSlash";
+    };
+    readonly smile: {
+        readonly lucide: "Smile";
+        readonly phosphor: "Smiley";
+        readonly iconsax: "EmojiHappy";
+    };
+    readonly frown: {
+        readonly lucide: "Frown";
+        readonly phosphor: "SmileySad";
+        readonly iconsax: "EmojiSad";
+    };
+    readonly meh: {
+        readonly lucide: "Meh";
+        readonly phosphor: "SmileyMeh";
+        readonly iconsax: "EmojiNormal";
+    };
+    readonly mail: {
+        readonly lucide: "Mail";
+        readonly phosphor: "Envelope";
+    };
+    readonly phone: {
+        readonly lucide: "Phone";
+        readonly phosphor: "Phone";
+    };
+    readonly flag: {
+        readonly lucide: "Flag";
+        readonly phosphor: "Flag";
+        readonly iconsax: "Flag";
+    };
+    readonly rocket: {
+        readonly lucide: "Rocket";
+        readonly phosphor: "Rocket";
+        readonly iconsax: "Rocket";
+    };
+    readonly ticket: {
+        readonly lucide: "Ticket";
+        readonly phosphor: "Ticket";
+        readonly iconsax: "Ticket";
+    };
+    readonly clipboard: {
+        readonly lucide: "ClipboardList";
+        readonly phosphor: "Clipboard";
+        readonly iconsax: "Sticker";
+    };
+    readonly wifi: {
+        readonly lucide: "Wifi";
+        readonly phosphor: "WifiHigh";
+        readonly iconsax: "Wifi";
+    };
+    readonly wifiOff: {
+        readonly lucide: "WifiOff";
+        readonly phosphor: "WifiSlash";
+    };
+    readonly cpu: {
+        readonly lucide: "Cpu";
+        readonly phosphor: "Cpu";
+        readonly iconsax: "Computing";
+    };
+    readonly mask: {
+        readonly lucide: "Drama";
+        readonly phosphor: "MaskHappy";
+        readonly iconsax: "EmojiHappy";
+    };
+    readonly bold: {
+        readonly lucide: "Bold";
+        readonly phosphor: "TextB";
+    };
+    readonly italic: {
+        readonly lucide: "Italic";
+        readonly phosphor: "TextItalic";
+    };
+    readonly strikethrough: {
+        readonly lucide: "Strikethrough";
+        readonly phosphor: "TextStrikethrough";
+    };
+    readonly heading: {
+        readonly lucide: "Heading";
+        readonly phosphor: "TextHOne";
+    };
+    readonly code: {
+        readonly lucide: "Code";
+        readonly phosphor: "Code";
+        readonly iconsax: "Code";
+    };
+    readonly fileCode: {
+        readonly lucide: "FileCode";
+        readonly phosphor: "FileCode";
+    };
+    readonly quote: {
+        readonly lucide: "Quote";
+        readonly phosphor: "Quotes";
+        readonly iconsax: "QuoteUp";
+    };
+    readonly list: {
+        readonly lucide: "List";
+        readonly phosphor: "List";
+    };
+    readonly listOrdered: {
+        readonly lucide: "ListOrdered";
+        readonly phosphor: "ListNumbers";
+    };
+    readonly minus: {
+        readonly lucide: "Minus";
+        readonly phosphor: "Minus";
+        readonly iconsax: "Minus";
+    };
+};
+
+/**
+ * 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", "sparkle", "sparkles", "lightbulb", "brain", "globe", "deviceMobile", "smartphone", "floppyDisk", "externalLink", "link", "moreHorizontal", "moreVertical", "rocket", "ticket", "clipboard", "wifi", "wifiOff", "cpu", "mask"];
+/**
+ * 프로바이더별 아이콘 이름 매핑 (참고용)
+ *
+ * @example
+ * // Lucide 아이콘 사용
+ * <Icon name="home" provider="lucide" />  // Lucide: Home
+ *
+ * // Phosphor 아이콘 사용
+ * <Icon name="home" provider="phosphor" />  // Phosphor: House
+ *
+ * // Iconsax 아이콘 사용 (requires '@hua-labs/ui/iconsax' import)
+ * <Icon name="home" provider="iconsax" />  // Iconsax: Home2
+ */
+declare const iconProviderMapping: Record<string, {
+    lucide: string;
+    phosphor: string;
+    iconsax?: string;
+}>;
+/**
+ * 아이콘 이름이 유효한지 확인
+ */
+declare function isValidIconName(name: string): name is AllIconName;
+/**
+ * 프로바이더별 아이콘 이름 가져오기
+ */
+declare function getIconNameForProvider(iconName: string, provider: 'lucide' | 'phosphor' | 'iconsax'): string | null;
+
+/**
+ * ComponentLayout 컴포넌트의 props / ComponentLayout component props
+ * @typedef {Object} ComponentLayoutProps
+ * @property {string} title - 페이지 제목 / Page title
+ * @property {string} description - 페이지 설명 / Page description
+ * @property {React.ReactNode} children - 페이지 내용 / Page content
+ * @property {Object} [prevPage] - 이전 페이지 정보 / Previous page information
+ * @property {string} prevPage.title - 이전 페이지 제목 / Previous page title
+ * @property {string} prevPage.href - 이전 페이지 링크 / Previous page link
+ * @property {Object} [nextPage] - 다음 페이지 정보 / Next page information
+ * @property {string} nextPage.title - 다음 페이지 제목 / Next page title
+ * @property {string} nextPage.href - 다음 페이지 링크 / Next page link
+ * @property {Array<Object>} [breadcrumbItems] - Breadcrumb 항목들 / Breadcrumb items
+ * @property {string} breadcrumbItems[].label - Breadcrumb 라벨 / Breadcrumb label
+ * @property {string} [breadcrumbItems[].href] - Breadcrumb 링크 / Breadcrumb link
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ */
+interface ComponentLayoutProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description: string;
+    children: React$1.ReactNode;
+    prevPage?: {
+        title: string;
+        href: string;
+    };
+    nextPage?: {
+        title: string;
+        href: string;
+    };
+    breadcrumbItems?: Array<{
+        label: string;
+        href?: string;
+    }>;
+}
+/**
+ * ComponentLayout 컴포넌트 / ComponentLayout component
+ *
+ * 컴포넌트 문서 페이지 레이아웃을 제공하는 컴포넌트입니다.
+ * 제목, 설명, Breadcrumb, 이전/다음 페이지 네비게이션을 포함합니다.
+ *
+ * Component that provides layout for component documentation pages.
+ * Includes title, description, Breadcrumb, and previous/next page navigation.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <ComponentLayout
+ *   title="Button 컴포넌트"
+ *   description="버튼 컴포넌트 사용법"
+ * >
+ *   <Button>예제</Button>
+ * </ComponentLayout>
+ *
+ * @example
+ * // 이전/다음 페이지 네비게이션 포함 / With previous/next page navigation
+ * <ComponentLayout
+ *   title="Input 컴포넌트"
+ *   description="입력 컴포넌트 사용법"
+ *   prevPage={{ title: "Button", href: "/components/button" }}
+ *   nextPage={{ title: "Select", href: "/components/select" }}
+ * >
+ *   <Input placeholder="입력하세요" />
+ * </ComponentLayout>
+ *
+ * @param {ComponentLayoutProps} props - ComponentLayout 컴포넌트의 props / ComponentLayout component props
+ * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
+ * @returns {JSX.Element} ComponentLayout 컴포넌트 / ComponentLayout component
+ */
+declare const ComponentLayout: React$1.ForwardRefExoticComponent<ComponentLayoutProps & React$1.RefAttributes<HTMLDivElement>>;
+
+export { type AllIconName as A, ComponentLayout as C, type ProjectIconName as P, iconProviderMapping as a, isValidIconName as b, getIconNameForProvider as g, iconNames as i };