@jbpark/ui-kit 10.0.1 → 10.1.0

package/README.ko.md

@@ -9,8 +9,8 @@ TypeScript와 Tailwind CSS를 기반으로 구축된 현대적이고 재사용
 - **패키지명**: `@jbpark/ui-kit`
 - **라이선스**: MIT
 - **패키지 매니저**: pnpm
-- **Node.js 요구사항**: >= 18
-- **React 요구사항**: ^18.0.0 || ^19.0.0
+- **Node.js 요구사항**: >= 20
+- **React 요구사항**: ^19.0.0
 
 ## 🏗 아키텍처
 
@@ -27,8 +27,10 @@ src/
 │   └── templates/    # 📄 템플릿 - 페이지 레이아웃
 ├── core/             # ⚙️ 핵심 UI 로직 (Base UI 기반)
 ├── lib/
-│   ├── enums/        # 📋 열거형 타입
-│   └── utils/        # 🛠 유틸리티 함수
+│   ├── utils/        # 🛠 유틸리티 함수
+│   ├── colors.ts     # 🎨 색상 토큰 해석
+│   └── z-layers.ts   # 🪟 포털 공용 z-index 스케일
+├── providers/        # 🧩 Config 프로바이더 및 테마
 ├── globals.css       # 🎨 전역 스타일
 └── index.ts          # 📥 패키지 진입점
 ```
@@ -103,7 +105,7 @@ Base UI 기반의 접근성 우선 핵심 컴포넌트들:
 ### 유틸리티
 
 - **`cn()`** - 클래스명 병합 유틸리티 (clsx + tailwind-merge)
-- **`TEXT_LEVELS`** - 타이포그래피 레벨 상수
+- **`renderConditional()`** - 조건부 렌더 헬퍼
 
 ## 🚀 설치 및 사용법
 
@@ -143,6 +145,13 @@ function App() {
 해당 요소에 `isolation: isolate`를 적용해 Base UI 포털이 앱 내부의 z-index와
 경쟁하지 않고 페이지 콘텐츠 위에 표시되도록 합니다.
 
+반대 방향으로도 효과가 있습니다. 오버레이(Modal, Drawer, Select, Popover)와
+페이지 흐름 안에 고정되는 요소(sticky/fixed `Layout.Header`, `FloatButton`,
+Dropdown 메뉴)는 모두 `z-index: 1000`을 씁니다. 루트를 격리하지 않으면 이
+요소들이 z-index가 더 낮은 앱 자체의 다이얼로그(예: shadcn의 `z-50`)를 덮습니다.
+`data-ui-root`를 지정하면 `body`로 포털되는 앱의 오버레이가 이 요소들을 포함한
+앱 전체를 덮습니다.
+
 ### 개별 컴포넌트 import
 
 ```tsx
@@ -171,13 +180,12 @@ import Typography from '@jbpark/ui-kit/Typography';
 > 이펙트로 불러오기 때문에 Node/SSR 빌드(예: Astro static build)에서 순수
 > `.css` import를 처리 못 해 빌드가 깨질 수 있습니다.
 
-### 유틸리티 및 열거형 import
+### 유틸리티 및 프로바이더 import
 
 ```tsx
 // 유틸리티 함수
-// 열거형 상수
-import { TEXT_LEVELS } from '@jbpark/ui-kit/enums';
-import { cn } from '@jbpark/ui-kit/utils';
+import { Config } from '@jbpark/ui-kit/providers';
+import { cn, renderConditional } from '@jbpark/ui-kit/utils';
 ```
 
 ### 스타일 import
@@ -210,28 +218,29 @@ import '@jbpark/ui-kit/style.css';
 
 ### 핵심 라이브러리
 
-- **React 19.1.0** - UI 라이브러리
-- **TypeScript 5.9.2** - 정적 타입 체크
-- **Tailwind CSS 4.1.12** - 유틸리티 CSS 프레임워크
+- **React 19.2** - UI 라이브러리
+- **TypeScript 6.0** - 정적 타입 체크
+- **Tailwind CSS 4.3** - 유틸리티 CSS 프레임워크
 
 ### UI 라이브러리
 
-- **Base UI** - 접근성 우선 헤드리스 UI 컴포넌트
-- **Lucide React 0.542.0** - 아이콘 라이브러리
-- **Motion 12.23.12** - 애니메이션 라이브러리
-- **Swiper 11.2.10** - 터치 슬라이더
-- **Vaul 1.1.2** - 드로어 컴포넌트
+- **Base UI 1.8** - 접근성 우선 헤드리스 UI 프리미티브
+- **Lucide React 1.45** - 아이콘 라이브러리
+- **Motion 13.1** - 애니메이션 라이브러리
+- **Swiper 14.1** - 터치 슬라이더
+- **TipTap 3.30** - RichTextEditor 엔진
+- **react-day-picker 10.0** - DatePicker 캘린더
+- **react-resizable-panels 4.12** - Splitter 패널
 
 ### 유틸리티
 
 - **class-variance-authority 0.7.1** - 컴포넌트 variants 관리
 - **clsx 2.1.1** - 조건부 클래스명
-- **tailwind-merge 3.3.1** - Tailwind 클래스 병합
-- **react-use 17.6.0** - React 훅 모음
-- **@uidotdev/usehooks 2.4.1** - 추가 React 훅
-- **uuid 11.1.0** - 고유 ID 생성
-- **@gsap/react 2.1.2** - GSAP 애니메이션
-- **tw-animate-css 1.3.7** - Tailwind 애니메이션
+- **tailwind-merge 3.6** - Tailwind 클래스 병합
+- **@jbpark/use-hooks 4.0** - React 훅 모음
+- **date-fns 4.4** - 날짜 포매팅/파싱
+- **react-colorful 5.8** - ColorPicker 입력
+- **GSAP 3.15 / @gsap/react 2.1** - GSAP 애니메이션
 
 ## 🔧 개발
 
@@ -267,10 +276,16 @@ pnpm run generate:component
 
 - `@jbpark/ui-kit` - 메인 패키지 (모든 컴포넌트)
 - `@jbpark/ui-kit/Typography` - Typography 컴포넌트
+- `@jbpark/ui-kit/Button` - Button 컴포넌트
+- `@jbpark/ui-kit/Tag` - Tag 컴포넌트
+- `@jbpark/ui-kit/Card` - Card 컴포넌트
+- `@jbpark/ui-kit/Space` - Space 컴포넌트
 - `@jbpark/ui-kit/Menu` - Menu 컴포넌트
 - `@jbpark/ui-kit/Reveals` - Reveals 컴포넌트
-- `@jbpark/ui-kit/utils` - 유틸리티 함수 (`cn` 등)
-- `@jbpark/ui-kit/enums` - 열거형 상수 (`TEXT_LEVELS` 등)
+- `@jbpark/ui-kit/CodeEditor` - CodeEditor 컴포넌트
+- `@jbpark/ui-kit/Layout` - Layout 템플릿
+- `@jbpark/ui-kit/utils` - 유틸리티 함수 (`cn`, `renderConditional`)
+- `@jbpark/ui-kit/providers` - Config 프로바이더 및 테마
 - `@jbpark/ui-kit/style.css` - 전역 스타일 (필수)
 
 ## 🤝 기여하기

package/README.md

@@ -9,8 +9,8 @@ A modern and reusable React UI component library built with TypeScript and Tailw
 - **Package Name**: `@jbpark/ui-kit`
 - **License**: MIT
 - **Package Manager**: pnpm
-- **Node.js Requirement**: >= 18
-- **React Requirement**: ^18.0.0 || ^19.0.0
+- **Node.js Requirement**: >= 20
+- **React Requirement**: ^19.0.0
 
 ## 🏗 Architecture
 
@@ -27,8 +27,10 @@ src/
 │   └── templates/    # 📄 Templates - Page layouts
 ├── core/             # ⚙️ Core UI logic (Base UI based)
 ├── lib/
-│   ├── enums/        # 📋 Enumeration types
-│   └── utils/        # 🛠 Utility functions
+│   ├── utils/        # 🛠 Utility functions
+│   ├── colors.ts     # 🎨 Colour token resolution
+│   └── z-layers.ts   # 🪟 Shared portal z-index scale
+├── providers/        # 🧩 Config provider and theming
 ├── globals.css       # 🎨 Global styles
 └── index.ts          # 📥 Package entry point
 ```
@@ -103,7 +105,7 @@ Accessibility-first core components based on Base UI:
 ### Utilities
 
 - **`cn()`** - Class name merging utility (clsx + tailwind-merge)
-- **`TEXT_LEVELS`** - Typography level constants
+- **`renderConditional()`** - Conditional render helper
 
 ## 🚀 Installation & Usage
 
@@ -143,6 +145,13 @@ Put `data-ui-root` on your application layout root. The included stylesheet
 applies `isolation: isolate` there so Base UI portals render above page content
 without competing with z-index values inside the app.
 
+It also works in the other direction. Overlays (Modal, Drawer, Select,
+Popover) and in-flow chrome (sticky/fixed `Layout.Header`, `FloatButton`,
+Dropdown menus) share `z-index: 1000`. Without an isolated root, that
+chrome paints over your own dialogs if they use a lower z-index (for example
+shadcn's `z-50`). With `data-ui-root`, any overlay you portal to `body`
+covers the whole app, including this chrome.
+
 ### Import Individual Components
 
 ```tsx
@@ -171,13 +180,12 @@ import Typography from '@jbpark/ui-kit/Typography';
 > `swiper`'s CSS as a side effect and can break Node/SSR builds (e.g. an
 > Astro static build) that don't expect a bare `.css` import.
 
-### Import Utilities and Enums
+### Import Utilities and Providers
 
 ```tsx
 // Utility functions
-// Enumeration constants
-import { TEXT_LEVELS } from '@jbpark/ui-kit/enums';
-import { cn } from '@jbpark/ui-kit/utils';
+import { Config } from '@jbpark/ui-kit/providers';
+import { cn, renderConditional } from '@jbpark/ui-kit/utils';
 ```
 
 ### Import Styles
@@ -210,28 +218,29 @@ import '@jbpark/ui-kit/style.css';
 
 ### Core Libraries
 
-- **React 19.1.0** - UI library
-- **TypeScript 5.9.2** - Static type checking
-- **Tailwind CSS 4.1.12** - Utility-first CSS framework
+- **React 19.2** - UI library
+- **TypeScript 6.0** - Static type checking
+- **Tailwind CSS 4.3** - Utility-first CSS framework
 
 ### UI Libraries
 
-- **Base UI** - Accessible headless UI components
-- **Lucide React 0.542.0** - Icon library
-- **Motion 12.23.12** - Animation library
-- **Swiper 11.2.10** - Touch slider
-- **Vaul 1.1.2** - Drawer component
+- **Base UI 1.8** - Accessible headless UI primitives
+- **Lucide React 1.45** - Icon library
+- **Motion 13.1** - Animation library
+- **Swiper 14.1** - Touch slider
+- **TipTap 3.30** - RichTextEditor engine
+- **react-day-picker 10.0** - DatePicker calendar
+- **react-resizable-panels 4.12** - Splitter panels
 
 ### Utilities
 
 - **class-variance-authority 0.7.1** - Component variants management
 - **clsx 2.1.1** - Conditional class names
-- **tailwind-merge 3.3.1** - Tailwind class merging
-- **react-use 17.6.0** - React hooks collection
-- **@uidotdev/usehooks 2.4.1** - Additional React hooks
-- **uuid 11.1.0** - Unique ID generation
-- **@gsap/react 2.1.2** - GSAP animation
-- **tw-animate-css 1.3.7** - Tailwind animations
+- **tailwind-merge 3.6** - Tailwind class merging
+- **@jbpark/use-hooks 4.0** - React hooks collection
+- **date-fns 4.4** - Date formatting and parsing
+- **react-colorful 5.8** - ColorPicker input
+- **GSAP 3.15 / @gsap/react 2.1** - GSAP animation
 
 ## 🔧 Development
 
@@ -267,10 +276,16 @@ This package exports the following modules:
 
 - `@jbpark/ui-kit` - Main package (all components)
 - `@jbpark/ui-kit/Typography` - Typography component
+- `@jbpark/ui-kit/Button` - Button component
+- `@jbpark/ui-kit/Tag` - Tag component
+- `@jbpark/ui-kit/Card` - Card component
+- `@jbpark/ui-kit/Space` - Space component
 - `@jbpark/ui-kit/Menu` - Menu component
 - `@jbpark/ui-kit/Reveals` - Reveals component
-- `@jbpark/ui-kit/utils` - Utility functions (`cn` etc)
-- `@jbpark/ui-kit/enums` - Enumeration constants (`TEXT_LEVELS` etc)
+- `@jbpark/ui-kit/CodeEditor` - CodeEditor component
+- `@jbpark/ui-kit/Layout` - Layout template
+- `@jbpark/ui-kit/utils` - Utility functions (`cn`, `renderConditional`)
+- `@jbpark/ui-kit/providers` - Config provider and theming
 - `@jbpark/ui-kit/style.css` - Global styles (required)
 
 ## 🤝 Contributing

package/dist/Breadcrumb.d.mts

@@ -0,0 +1,39 @@
+//#region src/components/molecules/breadcrumb.d.ts
+interface Item {
+  key?: React.Key;
+  title: React.ReactNode;
+  href?: string;
+  target?: React.HTMLAttributeAnchorTarget;
+  rel?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  className?: string;
+  'aria-label'?: string;
+  /** Decorative icon placed before the title. */
+  icon?: React.ReactNode;
+  /** Overrides the separator after this item. */
+  separator?: React.ReactNode;
+}
+interface Props extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'children'> {
+  items: Item[];
+  separator?: React.ReactNode;
+  /** Collapse middle items when the trail has more than this many entries. */
+  maxItems?: number;
+  itemsBeforeCollapse?: number;
+  itemsAfterCollapse?: number;
+  expandText?: string;
+  /** Render custom router links. The renderer owns aria-current for the last item. */
+  itemRender?: (item: Item, index: number, isCurrent: boolean) => React.ReactNode;
+  classNames?: {
+    list?: string;
+    item?: string;
+    link?: string;
+    current?: string;
+    separator?: string;
+    collapsed?: string;
+    popup?: string;
+  };
+}
+declare const Breadcrumb: ({ items, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse, expandText, itemRender, className, classNames, dir, "aria-label": ariaLabel, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Item, Props, Breadcrumb as default };
+//# sourceMappingURL=Breadcrumb.d.mts.map

package/dist/Breadcrumb.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.mts","names":[],"sources":["../src/components/molecules/breadcrumb.tsx"],"mappings":";UAUiB;EACf,MAAM,MAAM;EACZ,OAAO,MAAM;EACb;EACA,SAAS,MAAM;EACf;EACA,UAAU,MAAM,kBAAkB;EAClC;EACA;;EAEA,OAAO,MAAM;;EAEb,YAAY,MAAM;;UAGH,cAAc,KAC7B,MAAM;EAGN,OAAO;EACP,YAAY,MAAM;;EAElB;EACA;EACA;EACA;;EAEA,cACE,MAAM,MACN,eACA,uBACG,MAAM;EACX;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;cAOE,eAAc,OAAA,WAAA,UAAA,qBAAA,oBAAA,YAAA,YAAA,WAAA,YAAA,mBAAA,cAAA,SAajB,0BAAK,IAAA"}

package/dist/Breadcrumb.mjs

@@ -0,0 +1,103 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import Button from "./Button.mjs";
+import Popover from "./components/atoms/popover.mjs";
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/breadcrumb.tsx
+const safeCount = (value, minimum) => Number.isFinite(value) ? Math.max(minimum, Math.floor(value)) : minimum;
+const Breadcrumb = ({ items, separator = "/", maxItems = 8, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, expandText = "Show path", itemRender, className, classNames, dir, "aria-label": ariaLabel, ...props }) => {
+	const { direction } = useConfig();
+	const limit = safeCount(maxItems, 3);
+	const before = Math.min(safeCount(itemsBeforeCollapse, 1), limit - 2);
+	const after = Math.min(safeCount(itemsAfterCollapse, 1), limit - before - 1);
+	const collapsed = items.length > limit && items.length - before - after > 0;
+	const visibleIndices = collapsed ? [...Array.from({ length: before }, (_, index) => index), ...Array.from({ length: after }, (_, index) => items.length - after + index)] : items.map((_, index) => index);
+	const hiddenIndices = collapsed ? Array.from({ length: items.length - before - after }, (_, index) => before + index) : [];
+	const renderItem = (index) => {
+		const item = items[index];
+		const isCurrent = index === items.length - 1;
+		if (itemRender) return itemRender(item, index, isCurrent);
+		const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [item.icon != null && /* @__PURE__ */ jsx("span", {
+			"data-slot": "breadcrumb-icon",
+			"aria-hidden": "true",
+			className: "inline-flex shrink-0",
+			children: item.icon
+		}), item.title] });
+		const itemClassName = cn("inline-flex items-center gap-1.5 rounded-sm", (item.href !== void 0 || item.onClick) && "hover:text-foreground focus-visible:outline-ring focus-visible:outline-2", isCurrent ? "text-foreground font-medium" : "text-muted-foreground", (item.href !== void 0 || item.onClick) && classNames?.link, isCurrent && classNames?.current, item.className);
+		if (item.href !== void 0) return /* @__PURE__ */ jsx("a", {
+			href: item.href,
+			target: item.target,
+			rel: item.rel,
+			onClick: item.onClick,
+			"aria-label": item["aria-label"],
+			"aria-current": isCurrent ? "page" : void 0,
+			className: itemClassName,
+			children: content
+		});
+		if (item.onClick) return /* @__PURE__ */ jsx(Button, {
+			variant: "text",
+			size: "small",
+			onClick: item.onClick,
+			"aria-label": item["aria-label"],
+			"aria-current": isCurrent ? "page" : void 0,
+			className: cn("h-auto px-0 py-0 font-normal", itemClassName),
+			children: content
+		});
+		return /* @__PURE__ */ jsx("span", {
+			"aria-label": item["aria-label"],
+			"aria-current": isCurrent ? "page" : void 0,
+			className: itemClassName,
+			children: content
+		});
+	};
+	const renderSeparator = (index) => /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-separator",
+		"aria-hidden": "true",
+		className: cn("text-muted-foreground mx-2 shrink-0", classNames?.separator),
+		children: items[index]?.separator ?? separator
+	});
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		"data-slot": "breadcrumb",
+		dir: dir ?? direction,
+		"aria-label": ariaLabel ?? "Breadcrumb",
+		className: cn("text-sm", className),
+		children: /* @__PURE__ */ jsx("ol", {
+			"data-slot": "breadcrumb-list",
+			className: cn("m-0 flex min-w-0 flex-wrap items-center p-0", classNames?.list),
+			children: visibleIndices.map((index, position) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				position > 0 && renderSeparator(collapsed && position === before ? index - 1 : visibleIndices[position - 1]),
+				/* @__PURE__ */ jsx("li", {
+					"data-slot": "breadcrumb-item",
+					className: cn("inline-flex min-w-0 items-center", classNames?.item),
+					children: renderItem(index)
+				}),
+				collapsed && position === before - 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [renderSeparator(index), /* @__PURE__ */ jsx("li", {
+					"data-slot": "breadcrumb-collapsed",
+					className: classNames?.collapsed,
+					children: /* @__PURE__ */ jsx(Popover, {
+						placement: "bottom",
+						className: classNames?.popup,
+						content: /* @__PURE__ */ jsx("ol", {
+							className: "m-0 grid list-none gap-1 p-0",
+							children: hiddenIndices.map((hiddenIndex) => /* @__PURE__ */ jsx("li", { children: renderItem(hiddenIndex) }, items[hiddenIndex]?.key ?? hiddenIndex))
+						}),
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "text",
+							size: "small",
+							"aria-label": expandText,
+							className: "h-auto px-1",
+							children: "…"
+						})
+					})
+				})] })
+			] }, items[index]?.key ?? index))
+		})
+	});
+};
+//#endregion
+export { Breadcrumb as default };
+
+//# sourceMappingURL=Breadcrumb.mjs.map

package/dist/Breadcrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.mjs","names":[],"sources":["../src/components/molecules/breadcrumb.tsx"],"sourcesContent":["'use client';\n\nimport { Fragment } from 'react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\nimport Popover from '../atoms/popover';\n\nexport interface Item {\n  key?: React.Key;\n  title: React.ReactNode;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  rel?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  className?: string;\n  'aria-label'?: string;\n  /** Decorative icon placed before the title. */\n  icon?: React.ReactNode;\n  /** Overrides the separator after this item. */\n  separator?: React.ReactNode;\n}\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'nav'>,\n  'children'\n> {\n  items: Item[];\n  separator?: React.ReactNode;\n  /** Collapse middle items when the trail has more than this many entries. */\n  maxItems?: number;\n  itemsBeforeCollapse?: number;\n  itemsAfterCollapse?: number;\n  expandText?: string;\n  /** Render custom router links. The renderer owns aria-current for the last item. */\n  itemRender?: (\n    item: Item,\n    index: number,\n    isCurrent: boolean,\n  ) => React.ReactNode;\n  classNames?: {\n    list?: string;\n    item?: string;\n    link?: string;\n    current?: string;\n    separator?: string;\n    collapsed?: string;\n    popup?: string;\n  };\n}\n\nconst safeCount = (value: number, minimum: number) =>\n  Number.isFinite(value) ? Math.max(minimum, Math.floor(value)) : minimum;\n\nconst Breadcrumb = ({\n  items,\n  separator = '/',\n  maxItems = 8,\n  itemsBeforeCollapse = 1,\n  itemsAfterCollapse = 1,\n  expandText = 'Show path',\n  itemRender,\n  className,\n  classNames,\n  dir,\n  'aria-label': ariaLabel,\n  ...props\n}: Props) => {\n  const { direction } = useConfig();\n  const limit = safeCount(maxItems, 3);\n  const before = Math.min(safeCount(itemsBeforeCollapse, 1), limit - 2);\n  const after = Math.min(safeCount(itemsAfterCollapse, 1), limit - before - 1);\n  const collapsed = items.length > limit && items.length - before - after > 0;\n  const visibleIndices = collapsed\n    ? [\n        ...Array.from({ length: before }, (_, index) => index),\n        ...Array.from(\n          { length: after },\n          (_, index) => items.length - after + index,\n        ),\n      ]\n    : items.map((_, index) => index);\n  const hiddenIndices = collapsed\n    ? Array.from(\n        { length: items.length - before - after },\n        (_, index) => before + index,\n      )\n    : [];\n\n  const renderItem = (index: number) => {\n    const item = items[index]!;\n    const isCurrent = index === items.length - 1;\n\n    if (itemRender) {\n      return itemRender(item, index, isCurrent);\n    }\n\n    const content = (\n      <>\n        {item.icon != null && (\n          <span\n            data-slot=\"breadcrumb-icon\"\n            aria-hidden=\"true\"\n            className=\"inline-flex shrink-0\"\n          >\n            {item.icon}\n          </span>\n        )}\n        {item.title}\n      </>\n    );\n    const itemClassName = cn(\n      'inline-flex items-center gap-1.5 rounded-sm',\n      (item.href !== undefined || item.onClick) &&\n        'hover:text-foreground focus-visible:outline-ring focus-visible:outline-2',\n      isCurrent ? 'text-foreground font-medium' : 'text-muted-foreground',\n      (item.href !== undefined || item.onClick) && classNames?.link,\n      isCurrent && classNames?.current,\n      item.className,\n      //\n    );\n\n    if (item.href !== undefined) {\n      return (\n        <a\n          href={item.href}\n          target={item.target}\n          rel={item.rel}\n          onClick={item.onClick}\n          aria-label={item['aria-label']}\n          aria-current={isCurrent ? 'page' : undefined}\n          className={itemClassName}\n        >\n          {content}\n        </a>\n      );\n    }\n\n    if (item.onClick) {\n      return (\n        <Button\n          variant=\"text\"\n          size=\"small\"\n          onClick={item.onClick}\n          aria-label={item['aria-label']}\n          aria-current={isCurrent ? 'page' : undefined}\n          className={cn('h-auto px-0 py-0 font-normal', itemClassName)}\n        >\n          {content}\n        </Button>\n      );\n    }\n\n    return (\n      <span\n        aria-label={item['aria-label']}\n        aria-current={isCurrent ? 'page' : undefined}\n        className={itemClassName}\n      >\n        {content}\n      </span>\n    );\n  };\n\n  const renderSeparator = (index: number) => (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      aria-hidden=\"true\"\n      className={cn(\n        'text-muted-foreground mx-2 shrink-0',\n        classNames?.separator,\n        //\n      )}\n    >\n      {items[index]?.separator ?? separator}\n    </li>\n  );\n\n  return (\n    <nav\n      {...props}\n      data-slot=\"breadcrumb\"\n      dir={dir ?? direction}\n      aria-label={ariaLabel ?? 'Breadcrumb'}\n      className={cn(\n        'text-sm',\n        className, //\n      )}\n    >\n      <ol\n        data-slot=\"breadcrumb-list\"\n        className={cn(\n          'm-0 flex min-w-0 flex-wrap items-center p-0',\n          classNames?.list,\n          //\n        )}\n      >\n        {visibleIndices.map((index, position) => (\n          <Fragment key={items[index]?.key ?? index}>\n            {position > 0 &&\n              renderSeparator(\n                collapsed && position === before\n                  ? index - 1\n                  : visibleIndices[position - 1]!,\n              )}\n            <li\n              data-slot=\"breadcrumb-item\"\n              className={cn(\n                'inline-flex min-w-0 items-center',\n                classNames?.item, //\n              )}\n            >\n              {renderItem(index)}\n            </li>\n            {collapsed && position === before - 1 && (\n              <>\n                {renderSeparator(index)}\n                <li\n                  data-slot=\"breadcrumb-collapsed\"\n                  className={classNames?.collapsed}\n                >\n                  <Popover\n                    placement=\"bottom\"\n                    className={classNames?.popup}\n                    content={\n                      <ol className=\"m-0 grid list-none gap-1 p-0\">\n                        {hiddenIndices.map(hiddenIndex => (\n                          <li key={items[hiddenIndex]?.key ?? hiddenIndex}>\n                            {renderItem(hiddenIndex)}\n                          </li>\n                        ))}\n                      </ol>\n                    }\n                  >\n                    <Button\n                      variant=\"text\"\n                      size=\"small\"\n                      aria-label={expandText}\n                      className=\"h-auto px-1\"\n                    >\n                      …\n                    </Button>\n                  </Popover>\n                </li>\n              </>\n            )}\n          </Fragment>\n        ))}\n      </ol>\n    </nav>\n  );\n};\n\nexport default Breadcrumb;\n"],"mappings":"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"}

package/dist/Pagination.d.mts

@@ -0,0 +1,53 @@
+//#region src/components/molecules/pagination.d.ts
+interface Props extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'children' | 'onChange'> {
+  /** Total number of items, not pages. */
+  total: number;
+  /** Controlled number of items per page. */
+  pageSize?: number;
+  defaultPageSize?: number;
+  onPageSizeChange?: (pageSize: number) => void;
+  pageSizeOptions?: number[];
+  showSizeChanger?: boolean;
+  /** Render the total and the 1-based inclusive range of visible items. */
+  showTotal?: (total: number, range: [number, number]) => React.ReactNode;
+  showQuickJumper?: boolean;
+  /** 1-based controlled page. */
+  page?: number;
+  defaultPage?: number;
+  onChange?: (page: number) => void;
+  siblingCount?: number;
+  boundaryCount?: number;
+  showFirstLast?: boolean;
+  hideOnSinglePage?: boolean;
+  /** Render available page controls as links to these URLs. */
+  getPageHref?: (page: number) => string;
+  disabled?: boolean;
+  size?: 'small' | 'middle' | 'large';
+  labels?: {
+    navigation?: string;
+    page?: (page: number) => string;
+    previous?: string;
+    next?: string;
+    first?: string;
+    last?: string;
+    pageSize?: string;
+    jump?: string;
+    go?: string;
+  };
+  classNames?: {
+    item?: string;
+    active?: string;
+    previous?: string;
+    next?: string;
+    first?: string;
+    last?: string;
+    ellipsis?: string;
+    total?: string;
+    sizeChanger?: string;
+    jumper?: string;
+  };
+}
+declare const Pagination: ({ total, pageSize, defaultPageSize, onPageSizeChange, pageSizeOptions, showSizeChanger, showTotal, showQuickJumper, page, defaultPage, onChange, siblingCount, boundaryCount, showFirstLast, hideOnSinglePage, getPageHref, disabled, size, labels, className, classNames, "aria-label": ariaLabel, ...props }: Props) => import("react").JSX.Element | null;
+//#endregion
+export { Props, Pagination as default };
+//# sourceMappingURL=Pagination.d.mts.map

package/dist/Pagination.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.mts","names":[],"sources":["../src/components/molecules/pagination.tsx"],"mappings":";UAoBiB,cAAc,KAC7B,MAAM;;EAIN;;EAEA;EACA;EACA,oBAAoB;EACpB;EACA;;EAEA,aAAa,eAAe,4BAA4B,MAAM;EAC9D;;EAEA;EACA;EACA,YAAY;EACZ;EACA;EACA;EACA;;EAEA,eAAe;EACf;EACA;EACA;IACE;IACA,QAAQ;IACR;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;cAkEE,eAAc,OAAA,UAAA,iBAAA,kBAAA,iBAAA,iBAAA,WAAA,iBAAA,MAAA,aAAA,UAAA,cAAA,eAAA,eAAA,kBAAA,aAAA,UAAA,MAAA,QAAA,WAAA,0BAAA,cAAA,SAwBjB,0BAAK,IAAA"}