@kkcompany/app-ui 0.1.29 → 0.1.31

package/dist/index.cjs

@@ -712,6 +712,396 @@ const Icon = ({ style = {}, src }) => /* @__PURE__ */ (0, __emotion_react_jsx_ru
 ] });
 var Icon_default = Icon;
 
+//#endregion
+//#region src/Modal/styles.ts
+const modalStyle = __emotion_react.css`
+	:where(&) {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 1000;
+		padding: 1rem;
+		overflow-x: hidden;
+		overflow-y: auto;
+		visibility: hidden;
+		opacity: 0;
+		background-color: rgba(0, 0, 0, 0.7);
+		transition: opacity 0.3s;
+	}
+
+	:where(&.modal--show),
+	:where(&.modal--shown) {
+		display: flex;
+		justify-content: center;
+		visibility: visible;
+		opacity: 1;
+	}
+
+	:where(.modal__content) {
+		width: 100%;
+		max-width: 700px;
+		margin: auto 0;
+	}
+`;
+
+//#endregion
+//#region src/Modal/index.tsx
+const MODAL_STATE = {
+	SHOW: "show",
+	SHOWN: "shown",
+	HIDE: "hide",
+	HIDDEN: "hidden"
+};
+const isShowing = (state) => state === MODAL_STATE.SHOW || state === MODAL_STATE.SHOWN;
+const Modal = (0, react.memo)((0, react.forwardRef)(function Modal$1({ children, className = "", isHideModalOnClickOverlay = true, isShow, onHidden = () => {}, onShown = () => {}, onTriggerHiding = () => {} }, ref) {
+	const [visualState, setVisualState] = (0, react.useState)(MODAL_STATE.HIDDEN);
+	const shouldLockBody = isShowing(visualState);
+	if (isShow && !isShowing(visualState)) setVisualState(MODAL_STATE.SHOW);
+	else if (!isShow && isShowing(visualState)) setVisualState(MODAL_STATE.HIDE);
+	(0, react.useLayoutEffect)(() => {
+		if (!shouldLockBody) return;
+		const previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = previousOverflow;
+		};
+	}, [shouldLockBody]);
+	const previousVisualState = (0, react.useRef)(visualState);
+	(0, react.useLayoutEffect)(() => {
+		if (previousVisualState.current === visualState) return;
+		previousVisualState.current = visualState;
+		if (visualState === MODAL_STATE.SHOWN) onShown();
+		else if (visualState === MODAL_STATE.HIDDEN) onHidden();
+	}, [
+		visualState,
+		onShown,
+		onHidden
+	]);
+	const handleAnimationEnd = (0, react.useCallback)(() => {
+		setVisualState((previousState) => {
+			if (previousState === MODAL_STATE.SHOW) return MODAL_STATE.SHOWN;
+			if (previousState === MODAL_STATE.HIDE) return MODAL_STATE.HIDDEN;
+			return previousState;
+		});
+	}, []);
+	const handleClick = (0, react.useCallback)((event) => {
+		if (event.target.getAttribute("data-dismiss") === "modal") onTriggerHiding();
+	}, [onTriggerHiding]);
+	const handleKeyDown = (0, react.useCallback)((event) => {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		if (event.target.getAttribute("data-dismiss") !== "modal") return;
+		event.preventDefault();
+		onTriggerHiding();
+	}, [onTriggerHiding]);
+	return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
+		css: modalStyle,
+		ref,
+		role: "presentation",
+		className: `modal modal--${visualState} ${className}`,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		onAnimationEnd: handleAnimationEnd,
+		onTransitionEnd: handleAnimationEnd,
+		"data-dismiss": isHideModalOnClickOverlay ? "modal" : void 0,
+		children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
+			className: "modal__content",
+			children
+		})
+	});
+}));
+var Modal_default = Modal;
+
+//#endregion
+//#region src/Pagination/PaginationLink.tsx
+const PaginationLink = ({ routeData, nextLink: NextLinkComponent, children, ...anchorProps }) => {
+	const anchor = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		...anchorProps,
+		href: NextLinkComponent ? void 0 : routeData.route,
+		children
+	});
+	if (!NextLinkComponent) return anchor;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NextLinkComponent, {
+		route: routeData.route,
+		params: routeData.routeParams,
+		...routeData.routeOptions || {},
+		children: anchor
+	});
+};
+var PaginationLink_default = PaginationLink;
+
+//#endregion
+//#region src/Pagination/ArrowButton.tsx
+const ArrowButton = ({ type, routeData, nextLink, disabled = false, onClick }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationLink_default, {
+	className: `kks-pagination__btn kks-pagination__arrow-btn kks-pagination__arrow-btn--${type}${disabled ? " kks-pagination__arrow-btn--hidden" : ""}`,
+	routeData,
+	nextLink,
+	rel: type,
+	"aria-label": type === "prev" ? "Previous page" : "Next page",
+	onClick,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `kks-pagination__icon kks-pagination__icon-${type}` })
+});
+var ArrowButton_default = ArrowButton;
+
+//#endregion
+//#region src/Pagination/DotsButton.tsx
+const DotsButton = ({ dots }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	className: "kks-pagination__dots",
+	children: dots
+});
+var DotsButton_default = DotsButton;
+
+//#endregion
+//#region src/Pagination/NumberButton.tsx
+const NumberButton = ({ totalPages, pageNumber, routeData, nextLink, active = false, onClick }) => {
+	if (active) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "kks-pagination__btn kks-pagination__num-btn kks-pagination__num-btn--active",
+		"data-total-pages": ` / ${totalPages}`,
+		"aria-current": "page",
+		children: pageNumber
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationLink_default, {
+		className: "kks-pagination__btn kks-pagination__num-btn",
+		routeData,
+		nextLink,
+		onClick,
+		children: pageNumber
+	});
+};
+var NumberButton_default = NumberButton;
+
+//#endregion
+//#region src/Pagination/styles.ts
+const paginationStyle = __emotion_react.css`
+	:where(&) {
+		display: inline-block;
+	}
+
+	:where(.kks-pagination__content) {
+		display: flex;
+		margin: 0;
+		padding-left: 0;
+		list-style: none;
+	}
+
+	:where(.kks-pagination__num-item:not(.kks-pagination__num-item--current)) {
+		display: none;
+	}
+
+	:where(.kks-pagination__btn) {
+		display: block;
+		margin: 0 12px;
+		padding: 0.64rem 0.8rem;
+		border-radius: 3px;
+		font-size: 1rem;
+		line-height: 1;
+		user-select: none;
+	}
+
+	:where(.kks-pagination__num-btn) {
+		text-decoration: none;
+		color: #666;
+	}
+
+	:where(.kks-pagination__num-btn)::after {
+		content: attr(data-total-pages);
+	}
+
+	:where(.kks-pagination__arrow-btn--prev) {
+		margin-left: 0;
+	}
+
+	:where(.kks-pagination__arrow-btn--next) {
+		margin-right: 0;
+	}
+
+	:where(.kks-pagination__arrow-btn--hidden) {
+		display: none;
+	}
+
+	:where(.kks-pagination__icon) {
+		display: block;
+		width: 1rem;
+		height: 1rem;
+		background-size: contain;
+	}
+
+	:where(.kks-pagination__icon-prev) {
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath fill='%23666' d='M88.6 121.3a4.1 4.1 0 0 1-5.8 0L28.9 67.4a4.1 4.1 0 0 1 0-5.8L82.8 7.7a4.1 4.1 0 0 1 5.8 5.8l-51 51 51 51a4.1 4.1 0 0 1 0 5.8z'/%3E%3C/svg%3E");
+	}
+
+	:where(.kks-pagination__icon-next) {
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath fill='%23666' d='M40.4 121.3a4.1 4.1 0 0 1 0-5.8l51-51-51-51a4.1 4.1 0 0 1 5.8-5.8l53.9 53.9a4.1 4.1 0 0 1 0 5.8l-53.9 53.9a4.1 4.1 0 0 1-5.8 0z'/%3E%3C/svg%3E");
+	}
+
+	:where(.kks-pagination__dots) {
+		display: block;
+		margin: 0 12px;
+		padding: 0.64rem 0;
+		font-size: 1rem;
+		line-height: 50%;
+		color: #aaa;
+		user-select: none;
+	}
+
+	@media (min-width: 768px) {
+		:where(.kks-pagination__num-item:not(.kks-pagination__num-item--current)) {
+			display: block;
+		}
+
+		:where(.kks-pagination__btn),
+		:where(.kks-pagination__dots) {
+			margin: 0 6px;
+		}
+
+		:where(.kks-pagination__num-btn)::after {
+			content: "";
+		}
+
+		:where(.kks-pagination__num-btn:hover:not(.kks-pagination__num-btn--active)),
+		:where(.kks-pagination__arrow-btn:hover) {
+			background: rgba(0, 161, 179, 0.1);
+		}
+
+		:where(.kks-pagination__num-btn--active) {
+			font-weight: 500;
+			color: #fff;
+			background: #00a1b3;
+		}
+	}
+`;
+
+//#endregion
+//#region src/Pagination/index.tsx
+const DEFAULT_CURRENT_PAGE = 1;
+const DEFAULT_PAGE_NEIGHBOURS = 2;
+const ROUTE_URL_REPLACE_STRING = "$(pageNumber)";
+const range = (start, end) => Array.from({ length: end - start + 1 }, (_, index) => start + index);
+const getPageNumbers = (currentPage, pageNeighbours, totalPages) => {
+	const numberBlocks = pageNeighbours * 2 + 3;
+	if (totalPages <= numberBlocks + 2) return range(1, totalPages);
+	const startPage = Math.max(2, currentPage - pageNeighbours);
+	const endPage = Math.min(totalPages - 1, currentPage + pageNeighbours);
+	let pages = range(startPage, endPage);
+	const hasLeftDots = startPage > 2;
+	const hasRightDots = totalPages - endPage > 1;
+	const offset = numberBlocks - (pages.length + 2);
+	if (hasLeftDots && !hasRightDots) pages = [
+		"...",
+		...range(startPage - offset, startPage - 1),
+		...pages
+	];
+	else if (!hasLeftDots && hasRightDots) pages = [
+		...pages,
+		...range(endPage + 1, endPage + offset),
+		"..."
+	];
+	else pages = [
+		"...",
+		...pages,
+		"..."
+	];
+	return [
+		1,
+		...pages,
+		totalPages
+	];
+};
+const toPositiveInt = (value, fallback) => {
+	const parsed = Number(value);
+	return parsed > 0 ? parsed : fallback;
+};
+const toValidPage = (value, totalPages) => {
+	const page = Number(value);
+	return Number.isNaN(page) || page < 1 || page > totalPages ? DEFAULT_CURRENT_PAGE : page;
+};
+const normalizePaginationParams = ({ totalCount: rawTotalCount, perPageCount: rawPerPageCount, currentPage: rawCurrentPage = DEFAULT_CURRENT_PAGE, pageNeighbours: rawPageNeighbours = DEFAULT_PAGE_NEIGHBOURS }) => {
+	const totalCount = Number(rawTotalCount);
+	const perPageCount = Number(rawPerPageCount);
+	const totalPages = totalCount && perPageCount ? Math.ceil(totalCount / perPageCount) : 1;
+	return {
+		totalCount,
+		perPageCount,
+		totalPages,
+		currentPage: toValidPage(rawCurrentPage, totalPages),
+		pageNeighbours: toPositiveInt(rawPageNeighbours, DEFAULT_PAGE_NEIGHBOURS)
+	};
+};
+const renderEllipsis = (ellipsis, index) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("li", {
+	className: "kks-pagination__num-item",
+	children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(DotsButton_default, { dots: ellipsis })
+}, `dots-${index}`);
+const Pagination = (props) => {
+	const { totalCount, perPageCount, totalPages, currentPage, pageNeighbours } = normalizePaginationParams(props);
+	const { route = null, routeParams = null, routeOptions = null, nextRouter = null, nextLink = null, className = "", onPageChange = () => {} } = props;
+	if (totalPages === 1) return null;
+	const getRouteData = (page) => {
+		if (!route) return { route: "#" };
+		const nextRouteParams = routeParams ? Object.fromEntries(Object.entries(routeParams).map(([key, value]) => [key, value === ROUTE_URL_REPLACE_STRING ? page : value])) : null;
+		if (nextRouteParams && !Object.values(routeParams).includes(ROUTE_URL_REPLACE_STRING)) nextRouteParams.page = page;
+		return {
+			route: route.replace(ROUTE_URL_REPLACE_STRING, String(page)),
+			routeParams: nextRouteParams,
+			routeOptions
+		};
+	};
+	const handleClick = (page, routeData) => (event) => {
+		event.preventDefault();
+		const isNavigable = routeData.route !== "#";
+		onPageChange({
+			currentPage: page,
+			totalPages,
+			totalCount,
+			perPageCount,
+			route: isNavigable ? routeData.route : null,
+			...isNavigable ? routeData : {}
+		});
+		if (nextRouter && isNavigable) nextRouter.pushRoute(routeData.route, routeData.routeParams || {}, routeData.routeOptions || {});
+	};
+	const previousPage = currentPage === 1 ? 1 : currentPage - 1;
+	const nextPage = currentPage === totalPages ? totalPages : currentPage + 1;
+	const renderArrow = (type, page, disabled) => {
+		const routeData = getRouteData(page);
+		return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(ArrowButton_default, {
+			type,
+			routeData,
+			nextLink,
+			disabled,
+			onClick: handleClick(page, routeData)
+		});
+	};
+	const renderPageNumber = (page) => {
+		const routeData = getRouteData(page);
+		const isCurrentPage = page === currentPage;
+		return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("li", {
+			className: `kks-pagination__num-item${isCurrentPage ? " kks-pagination__num-item--current" : ""}`,
+			children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(NumberButton_default, {
+				totalPages,
+				pageNumber: page,
+				routeData,
+				nextLink,
+				active: isCurrentPage,
+				onClick: handleClick(page, routeData)
+			})
+		}, `page-${page}`);
+	};
+	return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("nav", {
+		css: paginationStyle,
+		className: `kks-pagination ${className}`,
+		"aria-label": "Page navigation",
+		children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("ul", {
+			className: "kks-pagination__content",
+			children: [
+				/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("li", { children: renderArrow("prev", previousPage, currentPage === 1) }),
+				getPageNumbers(currentPage, pageNeighbours, totalPages).map((page, index) => typeof page === "number" ? renderPageNumber(page) : renderEllipsis(page, index)),
+				/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("li", { children: renderArrow("next", nextPage, currentPage === totalPages) })
+			]
+		})
+	});
+};
+var Pagination_default = Pagination;
+
 //#endregion
 //#region src/icons/see-more.svg
 var see_more_default = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSI4IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTQgOCI+CiAgPHBhdGggc3Ryb2tlPSIjY2NjIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNLjc1Ljc1IDYuNyA2LjY4cS4wNy4wNi4xNCAwbTAgMHEwIDAgMCAwWm0wIDBMMTIuNzUuNzUiLz4KPC9zdmc+";
@@ -808,17 +1198,19 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
 	const [expandedHeight, setExpandedHeight] = (0, react.useState)();
 	const rootRef = (0, react.useRef)(null);
 	const containeRef = (0, react.useRef)();
-	(0, react.useEffect)(() => {
+	(0, react.useLayoutEffect)(() => {
 		if (!rootRef.current) return;
-		return onResize(rootRef.current, () => {
+		const updateExpandStatus = () => {
 			if (!containeRef.current) return;
 			const collapsedLines = Number.parseInt(window.getComputedStyle(containeRef.current).getPropertyValue("--see-more-collapsed-lines"), 10) || 2;
 			const lineCount = getLineCount(containeRef.current);
 			const scrollable = lineCount > collapsedLines;
 			const fit = lineCount <= collapsedLines;
 			setStatus((current) => current === "no-expand" && scrollable ? "collapsed" : current !== "no-expand" && fit ? "no-expand" : current);
-			setExpandedHeight(containeRef.current?.scrollHeight);
-		});
+			setExpandedHeight(containeRef.current.scrollHeight);
+		};
+		updateExpandStatus();
+		return onResize(rootRef.current, updateExpandStatus);
 	}, []);
 	const toggle = () => setStatus((current) => current === "collapsed" ? "expanded" : "collapsing");
 	return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
@@ -1081,6 +1473,8 @@ exports.Banner = Banner_default;
 exports.Dropdown = Dropdown_default;
 exports.HiddenToggle = HiddenToggle_default;
 exports.Icon = Icon_default;
+exports.Modal = Modal_default;
+exports.Pagination = Pagination_default;
 exports.SeeMore = SeeMore_default;
 exports.VideoItem = VideoItem_default;
 exports.VideoThumbnail = VideoThumbnail_default;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react0 from "react";
-import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
+import { ComponentType, ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
 import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
 import { CSSObject } from "@emotion/react";
 import Link from "next/link";
@@ -76,6 +76,54 @@ declare const Icon: ({
   src: any;
 }) => _emotion_react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/Modal/index.d.ts
+type ModalProps = {
+  children: ReactNode;
+  className?: string;
+  isHideModalOnClickOverlay?: boolean;
+  isShow: boolean;
+  onHidden?: () => void;
+  onShown?: () => void;
+  onTriggerHiding?: () => void;
+};
+declare const Modal: react0.MemoExoticComponent<react0.ForwardRefExoticComponent<ModalProps & react0.RefAttributes<HTMLDivElement>>>;
+//#endregion
+//#region src/Pagination/types.d.ts
+type RouteParams = Record<string, unknown>;
+type RouteOptions = Record<string, unknown>;
+type NextLinkProps = {
+  route: string;
+  params?: RouteParams | null;
+  children: ReactNode;
+} & RouteOptions;
+type NextLink = ComponentType<NextLinkProps>;
+//#endregion
+//#region src/Pagination/index.d.ts
+type PaginationProps = {
+  totalCount: number | string;
+  perPageCount: number | string;
+  currentPage?: number | string;
+  pageNeighbours?: number | string;
+  route?: string | null;
+  routeParams?: RouteParams | null;
+  routeOptions?: RouteOptions | null;
+  nextRouter?: {
+    pushRoute: (route: string, routeParams?: RouteParams, routeOptions?: RouteOptions) => void;
+  } | null;
+  nextLink?: NextLink | null;
+  className?: string;
+  onPageChange?: (page: {
+    currentPage: number;
+    totalPages: number;
+    totalCount: number;
+    perPageCount: number;
+    route: string | null;
+    routeParams?: RouteParams | null;
+    routeOptions?: RouteOptions | null;
+  }) => void;
+};
+declare const Pagination: (props: PaginationProps) => ReactElement | null;
+//#endregion
 //#region src/SeeMore.d.ts
 declare const defaultMessages: {
   seeMore: string;
@@ -156,4 +204,4 @@ declare const VideoThumbnail: ({
   onClick?: MouseEventHandler<HTMLAnchorElement>;
 }) => _emotion_react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Banner, Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
+export { Banner, Dropdown, HiddenToggle, Icon, Modal, Pagination, SeeMore, VideoItem, VideoThumbnail };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react0 from "react";
-import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
+import { ComponentType, ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
 import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
 import { CSSObject } from "@emotion/react";
 import Link from "next/link";
@@ -76,6 +76,54 @@ declare const Icon: ({
   src: any;
 }) => _emotion_react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/Modal/index.d.ts
+type ModalProps = {
+  children: ReactNode;
+  className?: string;
+  isHideModalOnClickOverlay?: boolean;
+  isShow: boolean;
+  onHidden?: () => void;
+  onShown?: () => void;
+  onTriggerHiding?: () => void;
+};
+declare const Modal: react0.MemoExoticComponent<react0.ForwardRefExoticComponent<ModalProps & react0.RefAttributes<HTMLDivElement>>>;
+//#endregion
+//#region src/Pagination/types.d.ts
+type RouteParams = Record<string, unknown>;
+type RouteOptions = Record<string, unknown>;
+type NextLinkProps = {
+  route: string;
+  params?: RouteParams | null;
+  children: ReactNode;
+} & RouteOptions;
+type NextLink = ComponentType<NextLinkProps>;
+//#endregion
+//#region src/Pagination/index.d.ts
+type PaginationProps = {
+  totalCount: number | string;
+  perPageCount: number | string;
+  currentPage?: number | string;
+  pageNeighbours?: number | string;
+  route?: string | null;
+  routeParams?: RouteParams | null;
+  routeOptions?: RouteOptions | null;
+  nextRouter?: {
+    pushRoute: (route: string, routeParams?: RouteParams, routeOptions?: RouteOptions) => void;
+  } | null;
+  nextLink?: NextLink | null;
+  className?: string;
+  onPageChange?: (page: {
+    currentPage: number;
+    totalPages: number;
+    totalCount: number;
+    perPageCount: number;
+    route: string | null;
+    routeParams?: RouteParams | null;
+    routeOptions?: RouteOptions | null;
+  }) => void;
+};
+declare const Pagination: (props: PaginationProps) => ReactElement | null;
+//#endregion
 //#region src/SeeMore.d.ts
 declare const defaultMessages: {
   seeMore: string;
@@ -156,4 +204,4 @@ declare const VideoThumbnail: ({
   onClick?: MouseEventHandler<HTMLAnchorElement>;
 }) => _emotion_react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Banner, Dropdown, HiddenToggle, Icon, SeeMore, VideoItem, VideoThumbnail };
+export { Banner, Dropdown, HiddenToggle, Icon, Modal, Pagination, SeeMore, VideoItem, VideoThumbnail };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
+import { Children, forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { jsx as jsx$1, jsxs } from "@emotion/react/jsx-runtime";
 import { css } from "@emotion/react";
@@ -712,6 +712,396 @@ const Icon = ({ style = {}, src }) => /* @__PURE__ */ jsx$1("span", { css: [
 ] });
 var Icon_default = Icon;
 
+//#endregion
+//#region src/Modal/styles.ts
+const modalStyle = css`
+	:where(&) {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 1000;
+		padding: 1rem;
+		overflow-x: hidden;
+		overflow-y: auto;
+		visibility: hidden;
+		opacity: 0;
+		background-color: rgba(0, 0, 0, 0.7);
+		transition: opacity 0.3s;
+	}
+
+	:where(&.modal--show),
+	:where(&.modal--shown) {
+		display: flex;
+		justify-content: center;
+		visibility: visible;
+		opacity: 1;
+	}
+
+	:where(.modal__content) {
+		width: 100%;
+		max-width: 700px;
+		margin: auto 0;
+	}
+`;
+
+//#endregion
+//#region src/Modal/index.tsx
+const MODAL_STATE = {
+	SHOW: "show",
+	SHOWN: "shown",
+	HIDE: "hide",
+	HIDDEN: "hidden"
+};
+const isShowing = (state) => state === MODAL_STATE.SHOW || state === MODAL_STATE.SHOWN;
+const Modal = memo(forwardRef(function Modal$1({ children, className = "", isHideModalOnClickOverlay = true, isShow, onHidden = () => {}, onShown = () => {}, onTriggerHiding = () => {} }, ref) {
+	const [visualState, setVisualState] = useState(MODAL_STATE.HIDDEN);
+	const shouldLockBody = isShowing(visualState);
+	if (isShow && !isShowing(visualState)) setVisualState(MODAL_STATE.SHOW);
+	else if (!isShow && isShowing(visualState)) setVisualState(MODAL_STATE.HIDE);
+	useLayoutEffect(() => {
+		if (!shouldLockBody) return;
+		const previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = previousOverflow;
+		};
+	}, [shouldLockBody]);
+	const previousVisualState = useRef(visualState);
+	useLayoutEffect(() => {
+		if (previousVisualState.current === visualState) return;
+		previousVisualState.current = visualState;
+		if (visualState === MODAL_STATE.SHOWN) onShown();
+		else if (visualState === MODAL_STATE.HIDDEN) onHidden();
+	}, [
+		visualState,
+		onShown,
+		onHidden
+	]);
+	const handleAnimationEnd = useCallback(() => {
+		setVisualState((previousState) => {
+			if (previousState === MODAL_STATE.SHOW) return MODAL_STATE.SHOWN;
+			if (previousState === MODAL_STATE.HIDE) return MODAL_STATE.HIDDEN;
+			return previousState;
+		});
+	}, []);
+	const handleClick = useCallback((event) => {
+		if (event.target.getAttribute("data-dismiss") === "modal") onTriggerHiding();
+	}, [onTriggerHiding]);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		if (event.target.getAttribute("data-dismiss") !== "modal") return;
+		event.preventDefault();
+		onTriggerHiding();
+	}, [onTriggerHiding]);
+	return /* @__PURE__ */ jsx$1("div", {
+		css: modalStyle,
+		ref,
+		role: "presentation",
+		className: `modal modal--${visualState} ${className}`,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		onAnimationEnd: handleAnimationEnd,
+		onTransitionEnd: handleAnimationEnd,
+		"data-dismiss": isHideModalOnClickOverlay ? "modal" : void 0,
+		children: /* @__PURE__ */ jsx$1("div", {
+			className: "modal__content",
+			children
+		})
+	});
+}));
+var Modal_default = Modal;
+
+//#endregion
+//#region src/Pagination/PaginationLink.tsx
+const PaginationLink = ({ routeData, nextLink: NextLinkComponent, children, ...anchorProps }) => {
+	const anchor = /* @__PURE__ */ jsx("a", {
+		...anchorProps,
+		href: NextLinkComponent ? void 0 : routeData.route,
+		children
+	});
+	if (!NextLinkComponent) return anchor;
+	return /* @__PURE__ */ jsx(NextLinkComponent, {
+		route: routeData.route,
+		params: routeData.routeParams,
+		...routeData.routeOptions || {},
+		children: anchor
+	});
+};
+var PaginationLink_default = PaginationLink;
+
+//#endregion
+//#region src/Pagination/ArrowButton.tsx
+const ArrowButton = ({ type, routeData, nextLink, disabled = false, onClick }) => /* @__PURE__ */ jsx(PaginationLink_default, {
+	className: `kks-pagination__btn kks-pagination__arrow-btn kks-pagination__arrow-btn--${type}${disabled ? " kks-pagination__arrow-btn--hidden" : ""}`,
+	routeData,
+	nextLink,
+	rel: type,
+	"aria-label": type === "prev" ? "Previous page" : "Next page",
+	onClick,
+	children: /* @__PURE__ */ jsx("span", { className: `kks-pagination__icon kks-pagination__icon-${type}` })
+});
+var ArrowButton_default = ArrowButton;
+
+//#endregion
+//#region src/Pagination/DotsButton.tsx
+const DotsButton = ({ dots }) => /* @__PURE__ */ jsx("span", {
+	className: "kks-pagination__dots",
+	children: dots
+});
+var DotsButton_default = DotsButton;
+
+//#endregion
+//#region src/Pagination/NumberButton.tsx
+const NumberButton = ({ totalPages, pageNumber, routeData, nextLink, active = false, onClick }) => {
+	if (active) return /* @__PURE__ */ jsx("span", {
+		className: "kks-pagination__btn kks-pagination__num-btn kks-pagination__num-btn--active",
+		"data-total-pages": ` / ${totalPages}`,
+		"aria-current": "page",
+		children: pageNumber
+	});
+	return /* @__PURE__ */ jsx(PaginationLink_default, {
+		className: "kks-pagination__btn kks-pagination__num-btn",
+		routeData,
+		nextLink,
+		onClick,
+		children: pageNumber
+	});
+};
+var NumberButton_default = NumberButton;
+
+//#endregion
+//#region src/Pagination/styles.ts
+const paginationStyle = css`
+	:where(&) {
+		display: inline-block;
+	}
+
+	:where(.kks-pagination__content) {
+		display: flex;
+		margin: 0;
+		padding-left: 0;
+		list-style: none;
+	}
+
+	:where(.kks-pagination__num-item:not(.kks-pagination__num-item--current)) {
+		display: none;
+	}
+
+	:where(.kks-pagination__btn) {
+		display: block;
+		margin: 0 12px;
+		padding: 0.64rem 0.8rem;
+		border-radius: 3px;
+		font-size: 1rem;
+		line-height: 1;
+		user-select: none;
+	}
+
+	:where(.kks-pagination__num-btn) {
+		text-decoration: none;
+		color: #666;
+	}
+
+	:where(.kks-pagination__num-btn)::after {
+		content: attr(data-total-pages);
+	}
+
+	:where(.kks-pagination__arrow-btn--prev) {
+		margin-left: 0;
+	}
+
+	:where(.kks-pagination__arrow-btn--next) {
+		margin-right: 0;
+	}
+
+	:where(.kks-pagination__arrow-btn--hidden) {
+		display: none;
+	}
+
+	:where(.kks-pagination__icon) {
+		display: block;
+		width: 1rem;
+		height: 1rem;
+		background-size: contain;
+	}
+
+	:where(.kks-pagination__icon-prev) {
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath fill='%23666' d='M88.6 121.3a4.1 4.1 0 0 1-5.8 0L28.9 67.4a4.1 4.1 0 0 1 0-5.8L82.8 7.7a4.1 4.1 0 0 1 5.8 5.8l-51 51 51 51a4.1 4.1 0 0 1 0 5.8z'/%3E%3C/svg%3E");
+	}
+
+	:where(.kks-pagination__icon-next) {
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath fill='%23666' d='M40.4 121.3a4.1 4.1 0 0 1 0-5.8l51-51-51-51a4.1 4.1 0 0 1 5.8-5.8l53.9 53.9a4.1 4.1 0 0 1 0 5.8l-53.9 53.9a4.1 4.1 0 0 1-5.8 0z'/%3E%3C/svg%3E");
+	}
+
+	:where(.kks-pagination__dots) {
+		display: block;
+		margin: 0 12px;
+		padding: 0.64rem 0;
+		font-size: 1rem;
+		line-height: 50%;
+		color: #aaa;
+		user-select: none;
+	}
+
+	@media (min-width: 768px) {
+		:where(.kks-pagination__num-item:not(.kks-pagination__num-item--current)) {
+			display: block;
+		}
+
+		:where(.kks-pagination__btn),
+		:where(.kks-pagination__dots) {
+			margin: 0 6px;
+		}
+
+		:where(.kks-pagination__num-btn)::after {
+			content: "";
+		}
+
+		:where(.kks-pagination__num-btn:hover:not(.kks-pagination__num-btn--active)),
+		:where(.kks-pagination__arrow-btn:hover) {
+			background: rgba(0, 161, 179, 0.1);
+		}
+
+		:where(.kks-pagination__num-btn--active) {
+			font-weight: 500;
+			color: #fff;
+			background: #00a1b3;
+		}
+	}
+`;
+
+//#endregion
+//#region src/Pagination/index.tsx
+const DEFAULT_CURRENT_PAGE = 1;
+const DEFAULT_PAGE_NEIGHBOURS = 2;
+const ROUTE_URL_REPLACE_STRING = "$(pageNumber)";
+const range = (start, end) => Array.from({ length: end - start + 1 }, (_, index) => start + index);
+const getPageNumbers = (currentPage, pageNeighbours, totalPages) => {
+	const numberBlocks = pageNeighbours * 2 + 3;
+	if (totalPages <= numberBlocks + 2) return range(1, totalPages);
+	const startPage = Math.max(2, currentPage - pageNeighbours);
+	const endPage = Math.min(totalPages - 1, currentPage + pageNeighbours);
+	let pages = range(startPage, endPage);
+	const hasLeftDots = startPage > 2;
+	const hasRightDots = totalPages - endPage > 1;
+	const offset = numberBlocks - (pages.length + 2);
+	if (hasLeftDots && !hasRightDots) pages = [
+		"...",
+		...range(startPage - offset, startPage - 1),
+		...pages
+	];
+	else if (!hasLeftDots && hasRightDots) pages = [
+		...pages,
+		...range(endPage + 1, endPage + offset),
+		"..."
+	];
+	else pages = [
+		"...",
+		...pages,
+		"..."
+	];
+	return [
+		1,
+		...pages,
+		totalPages
+	];
+};
+const toPositiveInt = (value, fallback) => {
+	const parsed = Number(value);
+	return parsed > 0 ? parsed : fallback;
+};
+const toValidPage = (value, totalPages) => {
+	const page = Number(value);
+	return Number.isNaN(page) || page < 1 || page > totalPages ? DEFAULT_CURRENT_PAGE : page;
+};
+const normalizePaginationParams = ({ totalCount: rawTotalCount, perPageCount: rawPerPageCount, currentPage: rawCurrentPage = DEFAULT_CURRENT_PAGE, pageNeighbours: rawPageNeighbours = DEFAULT_PAGE_NEIGHBOURS }) => {
+	const totalCount = Number(rawTotalCount);
+	const perPageCount = Number(rawPerPageCount);
+	const totalPages = totalCount && perPageCount ? Math.ceil(totalCount / perPageCount) : 1;
+	return {
+		totalCount,
+		perPageCount,
+		totalPages,
+		currentPage: toValidPage(rawCurrentPage, totalPages),
+		pageNeighbours: toPositiveInt(rawPageNeighbours, DEFAULT_PAGE_NEIGHBOURS)
+	};
+};
+const renderEllipsis = (ellipsis, index) => /* @__PURE__ */ jsx$1("li", {
+	className: "kks-pagination__num-item",
+	children: /* @__PURE__ */ jsx$1(DotsButton_default, { dots: ellipsis })
+}, `dots-${index}`);
+const Pagination = (props) => {
+	const { totalCount, perPageCount, totalPages, currentPage, pageNeighbours } = normalizePaginationParams(props);
+	const { route = null, routeParams = null, routeOptions = null, nextRouter = null, nextLink = null, className = "", onPageChange = () => {} } = props;
+	if (totalPages === 1) return null;
+	const getRouteData = (page) => {
+		if (!route) return { route: "#" };
+		const nextRouteParams = routeParams ? Object.fromEntries(Object.entries(routeParams).map(([key, value]) => [key, value === ROUTE_URL_REPLACE_STRING ? page : value])) : null;
+		if (nextRouteParams && !Object.values(routeParams).includes(ROUTE_URL_REPLACE_STRING)) nextRouteParams.page = page;
+		return {
+			route: route.replace(ROUTE_URL_REPLACE_STRING, String(page)),
+			routeParams: nextRouteParams,
+			routeOptions
+		};
+	};
+	const handleClick = (page, routeData) => (event) => {
+		event.preventDefault();
+		const isNavigable = routeData.route !== "#";
+		onPageChange({
+			currentPage: page,
+			totalPages,
+			totalCount,
+			perPageCount,
+			route: isNavigable ? routeData.route : null,
+			...isNavigable ? routeData : {}
+		});
+		if (nextRouter && isNavigable) nextRouter.pushRoute(routeData.route, routeData.routeParams || {}, routeData.routeOptions || {});
+	};
+	const previousPage = currentPage === 1 ? 1 : currentPage - 1;
+	const nextPage = currentPage === totalPages ? totalPages : currentPage + 1;
+	const renderArrow = (type, page, disabled) => {
+		const routeData = getRouteData(page);
+		return /* @__PURE__ */ jsx$1(ArrowButton_default, {
+			type,
+			routeData,
+			nextLink,
+			disabled,
+			onClick: handleClick(page, routeData)
+		});
+	};
+	const renderPageNumber = (page) => {
+		const routeData = getRouteData(page);
+		const isCurrentPage = page === currentPage;
+		return /* @__PURE__ */ jsx$1("li", {
+			className: `kks-pagination__num-item${isCurrentPage ? " kks-pagination__num-item--current" : ""}`,
+			children: /* @__PURE__ */ jsx$1(NumberButton_default, {
+				totalPages,
+				pageNumber: page,
+				routeData,
+				nextLink,
+				active: isCurrentPage,
+				onClick: handleClick(page, routeData)
+			})
+		}, `page-${page}`);
+	};
+	return /* @__PURE__ */ jsx$1("nav", {
+		css: paginationStyle,
+		className: `kks-pagination ${className}`,
+		"aria-label": "Page navigation",
+		children: /* @__PURE__ */ jsxs("ul", {
+			className: "kks-pagination__content",
+			children: [
+				/* @__PURE__ */ jsx$1("li", { children: renderArrow("prev", previousPage, currentPage === 1) }),
+				getPageNumbers(currentPage, pageNeighbours, totalPages).map((page, index) => typeof page === "number" ? renderPageNumber(page) : renderEllipsis(page, index)),
+				/* @__PURE__ */ jsx$1("li", { children: renderArrow("next", nextPage, currentPage === totalPages) })
+			]
+		})
+	});
+};
+var Pagination_default = Pagination;
+
 //#endregion
 //#region src/icons/see-more.svg
 var see_more_default = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSI4IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTQgOCI+CiAgPHBhdGggc3Ryb2tlPSIjY2NjIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNLjc1Ljc1IDYuNyA2LjY4cS4wNy4wNi4xNCAwbTAgMHEwIDAgMCAwWm0wIDBMMTIuNzUuNzUiLz4KPC9zdmc+";
@@ -808,17 +1198,19 @@ const SeeMore = ({ style, messages = defaultMessages, children, ...rest }) => {
 	const [expandedHeight, setExpandedHeight] = useState();
 	const rootRef = useRef(null);
 	const containeRef = useRef();
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (!rootRef.current) return;
-		return onResize(rootRef.current, () => {
+		const updateExpandStatus = () => {
 			if (!containeRef.current) return;
 			const collapsedLines = Number.parseInt(window.getComputedStyle(containeRef.current).getPropertyValue("--see-more-collapsed-lines"), 10) || 2;
 			const lineCount = getLineCount(containeRef.current);
 			const scrollable = lineCount > collapsedLines;
 			const fit = lineCount <= collapsedLines;
 			setStatus((current) => current === "no-expand" && scrollable ? "collapsed" : current !== "no-expand" && fit ? "no-expand" : current);
-			setExpandedHeight(containeRef.current?.scrollHeight);
-		});
+			setExpandedHeight(containeRef.current.scrollHeight);
+		};
+		updateExpandStatus();
+		return onResize(rootRef.current, updateExpandStatus);
 	}, []);
 	const toggle = () => setStatus((current) => current === "collapsed" ? "expanded" : "collapsing");
 	return /* @__PURE__ */ jsxs("div", {
@@ -1077,4 +1469,4 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
 var VideoItem_default = VideoItem;
 
 //#endregion
-export { Banner_default as Banner, Dropdown_default as Dropdown, HiddenToggle_default as HiddenToggle, Icon_default as Icon, SeeMore_default as SeeMore, VideoItem_default as VideoItem, VideoThumbnail_default as VideoThumbnail };
+export { Banner_default as Banner, Dropdown_default as Dropdown, HiddenToggle_default as HiddenToggle, Icon_default as Icon, Modal_default as Modal, Pagination_default as Pagination, SeeMore_default as SeeMore, VideoItem_default as VideoItem, VideoThumbnail_default as VideoThumbnail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkcompany/app-ui",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "module": "dist/index.mjs",
   "main": "dist/index.js",
   "types": "dist/index.d.mts",
@@ -19,7 +19,8 @@
   "license": "MIT",
   "scripts": {
     "dev": "next",
-    "build": "tsdown --format esm --format cjs"
+    "build": "tsdown --format esm --format cjs",
+    "test": "vitest run"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0"
@@ -30,10 +31,13 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.5",
+    "@testing-library/react": "^13.4.0",
     "binary-base64-loader": "^1.0.0",
+    "jsdom": "^26.1.0",
     "next": "^16.0.2",
     "rollup-plugin-base64": "^1.0.1",
     "tsdown": "^0.16.4",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.0"
   }
 }