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

package/dist/navigation.d.mts

@@ -1,4 +1,230 @@
-import React__default from 'react';
+import React from 'react';
+import { I as IconName } from './icons-Bj_nr8Ba.mjs';
+import '@phosphor-icons/react';
+
+/**
+ * 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?: IconName;
+}
+/**
+ * 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>>;
 
 /**
  * PageNavigation 컴포넌트의 props / PageNavigation component props
@@ -12,7 +238,7 @@ import React__default from 'react';
  * @property {boolean} [showOnMobile=false] - 모바일에서 표시 여부 / Show on mobile
  * @extends {React.HTMLAttributes<HTMLDivElement>}
  */
-interface PageNavigationProps extends React__default.HTMLAttributes<HTMLDivElement> {
+interface PageNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
     prevPage?: {
         title: string;
         href: string;
@@ -44,7 +270,7 @@ interface PageNavigationProps extends React__default.HTMLAttributes<HTMLDivEleme
  * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
  * @returns {JSX.Element} PageNavigation 컴포넌트 / PageNavigation component
  */
-declare const PageNavigation: React__default.ForwardRefExoticComponent<PageNavigationProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const PageNavigation: React.ForwardRefExoticComponent<PageNavigationProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * PageTransition 컴포넌트의 props / PageTransition component props
@@ -60,7 +286,7 @@ declare const PageNavigation: React__default.ForwardRefExoticComponent<PageNavig
  * @property {() => void} [onTransitionEnd] - 전환 종료 콜백 / Transition end callback
  */
 interface PageTransitionProps {
-    children: React__default.ReactNode;
+    children: React.ReactNode;
     className?: string;
     duration?: number;
     variant?: 'fade' | 'slide' | 'scale' | 'flip';
@@ -100,6 +326,6 @@ interface PageTransitionProps {
  * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref
  * @returns {JSX.Element} PageTransition 컴포넌트 / PageTransition component
  */
-declare const PageTransition: React__default.ForwardRefExoticComponent<PageTransitionProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const PageTransition: React.ForwardRefExoticComponent<PageTransitionProps & React.RefAttributes<HTMLDivElement>>;
 
-export { PageNavigation, type PageNavigationProps, PageTransition, type PageTransitionProps };
+export { Breadcrumb, BreadcrumbItem, type BreadcrumbItemData, type BreadcrumbItemProps, type BreadcrumbProps, NavigationComponent as Navigation, NavigationContent, NavigationItem, NavigationList, PageNavigation, type PageNavigationProps, PageTransition, type PageTransitionProps, Pagination, PaginationMinimal, PaginationOutlined, PaginationWithInfo };

package/dist/navigation.d.ts

@@ -1,20 +1,21 @@
 /**
  * Navigation Components Entrypoint
  *
- * 네비게이션 관련 컴포넌트들을 모아서 export하는 엔트리 포인트입니다.
- * 대규모 앱 구조에 필요한 네비게이션 컴포넌트만 포함합니다.
+ * 네비게이션 관련 컴포넌트들의 엔트리 포인트입니다.
+ * 기본 네비게이션, 브레드크럼, 페이지네이션, 페이지 전환 등을 포함합니다.
  *
- * Entry point that aggregates navigation-related components.
- * Includes navigation components needed for large-scale app structures.
+ * Entry point for all navigation-related components.
+ * Includes Navigation, Breadcrumb, Pagination, PageNavigation, PageTransition.
  *
  * @example
- * // 네비게이션 컴포넌트만 import / Import only navigation components
- * import { PageNavigation, PageTransition } from '@hua-labs/ui/navigation';
- *
- * @example
- * // Core에서도 여전히 사용 가능 (하위 호환성) / Still available from core (backward compatibility)
- * import { PageNavigation, PageTransition } from '@hua-labs/ui';
+ * import { Navigation, NavigationList, NavigationItem } from '@hua-labs/ui/navigation';
+ * import { Breadcrumb, BreadcrumbItem } from '@hua-labs/ui/navigation';
+ * import { Pagination } from '@hua-labs/ui/navigation';
  */
+export { Navigation, NavigationList, NavigationItem, NavigationContent } from './components/Navigation';
+export { Breadcrumb, BreadcrumbItem } from './components/Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItemProps, BreadcrumbItemData } from './components/Breadcrumb';
+export { Pagination, PaginationOutlined, PaginationMinimal, PaginationWithInfo } from './components/Pagination';
 export { PageNavigation } from './components/PageNavigation';
 export type { PageNavigationProps } from './components/PageNavigation';
 export { PageTransition } from './components/PageTransition';

package/dist/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../src/navigation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../src/navigation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAGH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGxG,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAGxG,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAGhH,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC"}