@ncds/ui-admin 1.6.4-alpha.1 → 1.7.0

package/dist/temp/src/components/notification/FloatingNotification.js

@@ -0,0 +1,79 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, AlertTriangle, CheckCircle, Pin02 } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { MEDIA_QUERY } from '../../constant/breakpoint';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
+import { Button } from '../button';
+import { ButtonCloseX } from '../button/ButtonCloseX';
+import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
+var iconMap = {
+    neutral: Pin02,
+    error: AlertTriangle,
+    warning: AlertCircle,
+    success: CheckCircle,
+    // info는 floating에서는 지원하지 않음
+};
+var FloatingNotification = forwardRef(function (_a, ref) {
+    var title = _a.title, supportingText = _a.supportingText, _b = _a.color, color = _b === void 0 ? 'neutral' : _b, onClose = _a.onClose, className = _a.className, actions = _a.actions, _c = _a.autoClose, autoClose = _c === void 0 ? 0 : _c, rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions", "autoClose"]);
+    var _d = useState(false), shouldRemove = _d[0], setShouldRemove = _d[1];
+    var iconColor = color;
+    var featuredIconProps = {
+        icon: iconMap[color] || Pin02,
+        size: 'sm',
+        color: iconColor,
+        theme: 'dark-circle',
+    };
+    var isMobile = useMediaQuery(MEDIA_QUERY.mobile, {
+        onMatched: onClose,
+    });
+    // autoClose 타이머 관리
+    var timerRef = useRef(null);
+    useEffect(function () {
+        // autoClose가 0보다 크면 무조건 타이머 설정
+        if (autoClose > 0) {
+            timerRef.current = setTimeout(function () {
+                if (onClose) {
+                    onClose();
+                }
+                // DOM에서 바로 제거
+                setShouldRemove(true);
+            }, autoClose);
+        }
+        // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
+        return function () {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+        };
+    }, [autoClose, onClose]);
+    // DOM에서 완전히 제거
+    if (shouldRemove) {
+        return null;
+    }
+    return (_jsxs("div", __assign({ ref: ref, className: classNames('ncua-floating-notification', "ncua-floating-notification--".concat(color), className), role: "alert" }, rest, { children: [_jsx("div", __assign({ className: "ncua-floating-notification__content" }, { children: _jsxs("div", __assign({ className: "ncua-floating-notification__container" }, { children: [iconMap[color] && _jsx(FeaturedIcon, __assign({}, featuredIconProps, { size: isMobile ? 'md' : 'sm' })), _jsxs("div", __assign({ className: "ncua-floating-notification__text-container" }, { children: [_jsx("div", __assign({ className: "ncua-floating-notification__title-wrapper" }, { children: _jsx("span", __assign({ className: "ncua-floating-notification__title" }, { children: title })) })), supportingText && _jsx("span", __assign({ className: "ncua-floating-notification__supporting-text" }, { children: supportingText })), actions && (_jsx("div", __assign({ className: "ncua-floating-notification__actions" }, { children: actions.map(function (action) { return (_jsx(Button, { size: "xs", hierarchy: action.hierarchy || 'text', label: action.label, onClick: action === null || action === void 0 ? void 0 : action.onClick }, "".concat(action.label, "-").concat(action.hierarchy))); }) })))] }))] })) })), onClose && (_jsx(ButtonCloseX, { theme: "light", className: "ncua-floating-notification__close-button", size: isMobile ? 'sm' : 'xs', onClick: onClose }))] })));
+});
+export { FloatingNotification };

package/dist/temp/src/components/notification/FullWidthNotification.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import type { NotificationAction, NotificationColor } from './Notification';
+interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * 알림 제목 텍스트
+     */
+    title: ReactNode;
+    /**
+     * 알림 본문 텍스트 (선택사항)
+     */
+    supportingText?: ReactNode;
+    /**
+     * 알림 색상 스타일 (neutral, error, warning, success, info)
+     * @default 'neutral'
+     */
+    color?: NotificationColor;
+    /**
+     * 닫기 버튼 클릭 이벤트 핸들러
+     */
+    onClose?: () => void;
+    /**
+     * 추가 CSS 클래스
+     */
+    className?: string;
+    /**
+     * 버튼 영역 (선택사항)
+     */
+    actions?: NotificationAction[];
+    /**
+     * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
+     * full-width 타입에서는 일반적으로 사용하지 않음 (중요한 공지사항이므로)
+     * @default 0
+     */
+    autoClose?: number;
+    /**
+     * info 링크 영역 (선택사항)
+     */
+    supportTextLink?: string;
+    /**
+     * 다시보지 않기 이벤트 핸들러 (선택사항)
+     */
+    onHidePermanently?: () => void;
+}
+declare const FullWidthNotification: import("react").ForwardRefExoticComponent<FullWidthNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { FullWidthNotificationProps };
+export { FullWidthNotification };

package/dist/temp/src/components/notification/FullWidthNotification.js

@@ -0,0 +1,79 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle, CheckCircle, InfoCircle, MessageChatSquare, XClose } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { COLOR } from '../../../constant/color';
+var iconMap = {
+    neutral: MessageChatSquare,
+    error: AlertTriangle,
+    warning: AlertTriangle,
+    success: CheckCircle,
+    info: InfoCircle,
+};
+var iconColorMap = {
+    neutral: 'gray700',
+    error: 'red500',
+    warning: 'orange500',
+    success: 'green600',
+    info: 'violet600',
+};
+var FullWidthNotification = forwardRef(function (_a, ref) {
+    var title = _a.title, supportingText = _a.supportingText, _b = _a.color, color = _b === void 0 ? 'neutral' : _b, onClose = _a.onClose, className = _a.className, actions = _a.actions, _c = _a.autoClose, autoClose = _c === void 0 ? 0 : _c, supportTextLink = _a.supportTextLink, onHidePermanently = _a.onHidePermanently, rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions", "autoClose", "supportTextLink", "onHidePermanently"]);
+    var _d = useState(false), shouldRemove = _d[0], setShouldRemove = _d[1];
+    var closeIconSize = {
+        width: 20,
+        height: 20,
+    };
+    // autoClose 타이머 관리
+    var timerRef = useRef(null);
+    useEffect(function () {
+        // autoClose가 0보다 크면 무조건 타이머 설정
+        if (autoClose > 0) {
+            timerRef.current = setTimeout(function () {
+                if (onClose) {
+                    onClose();
+                }
+                // DOM에서 바로 제거
+                setShouldRemove(true);
+            }, autoClose);
+        }
+        // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
+        return function () {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+        };
+    }, [autoClose, onClose]);
+    // DOM에서 완전히 제거
+    if (shouldRemove) {
+        return null;
+    }
+    return (_jsx("div", __assign({ ref: ref, className: classNames('ncua-full-width-notification', "ncua-full-width-notification--".concat(color), className), role: "alert" }, rest, { children: _jsx("div", __assign({ className: "ncua-full-width-notification__container" }, { children: _jsxs("div", __assign({ className: "ncua-full-width-notification__content" }, { children: [_jsxs("div", __assign({ className: "ncua-full-width-notification__content-wrapper" }, { children: [(function () {
+                                var IconComponent = iconMap[color];
+                                return (_jsx(IconComponent, { width: 16, height: 16, color: COLOR[iconColorMap[color]], className: "ncua-full-width-notification__icon" }));
+                            })(), _jsxs("div", __assign({ className: "ncua-full-width-notification__text-container" }, { children: [_jsx("span", __assign({ className: "ncua-full-width-notification__title" }, { children: title })), !supportTextLink && supportingText && (_jsx("span", __assign({ className: "ncua-full-width-notification__supporting-text" }, { children: supportingText }))), supportTextLink && supportingText && (_jsx("a", __assign({ href: supportTextLink, className: "ncua-full-width-notification__link" }, { children: _jsx("span", __assign({ className: "ncua-full-width-notification__supporting-text" }, { children: supportingText })) })))] }))] })), _jsxs("div", __assign({ className: "ncua-full-width-notification__actions-container" }, { children: [actions && (_jsx("div", __assign({ className: "ncua-full-width-notification__actions" }, { children: actions.map(function (action) { return (_jsx("button", __assign({ onClick: action.onClick, className: classNames('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'text')) }, { children: action.label }), "".concat(action.label, "-").concat(action.hierarchy))); }) }))), onHidePermanently && (_jsx("button", __assign({ type: "button", className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'), onClick: onHidePermanently }, { children: "\uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30" }))), onClose && (_jsx("button", __assign({ type: "button", className: "ncua-full-width-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30" }, { children: _jsx(XClose, __assign({}, closeIconSize, { color: COLOR[iconColorMap[color]] })) })))] }))] })) })) })));
+});
+export { FullWidthNotification };

package/dist/temp/src/components/notification/MessageNotification.d.ts

@@ -0,0 +1,41 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import type { SlotIconComponent } from '../../types/side-slot';
+import type { NotificationAction, NotificationColor } from './Notification';
+interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * 알림 제목 텍스트
+     */
+    title: ReactNode;
+    /**
+     * 알림 본문 텍스트 (선택사항)
+     */
+    supportingText?: ReactNode;
+    /**
+     * 알림 아이콘 컴포넌트 (지정하지 않으면 color에 따라 기본 아이콘 사용)
+     */
+    icon?: SlotIconComponent;
+    /**
+     * 알림 색상 스타일
+     * @default 'neutral'
+     */
+    color?: NotificationColor;
+    /**
+     * 닫기 버튼 클릭 이벤트 핸들러
+     */
+    onClose?: () => void;
+    /**
+     * 추가 CSS 클래스
+     */
+    className?: string;
+    /**
+     * 액션 버튼 영역 (선택사항)
+     */
+    actions?: NotificationAction[];
+    /**
+     * 다시보지 않기 이벤트 핸들러 (선택사항)
+     */
+    onHidePermanently?: () => void;
+}
+declare const MessageNotification: import("react").ForwardRefExoticComponent<MessageNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { MessageNotificationProps };
+export { MessageNotification };

package/dist/temp/src/components/notification/MessageNotification.js

@@ -0,0 +1,57 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, AlertTriangle, CheckCircle, Pin02, XClose } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { COLOR } from '../../../constant/color';
+import { Button } from '../button';
+import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
+var iconMap = {
+    neutral: Pin02,
+    error: AlertTriangle,
+    warning: AlertCircle,
+    success: CheckCircle,
+};
+var iconColorMap = {
+    neutral: 'gray700',
+    error: 'red500',
+    warning: 'orange500',
+    success: 'green600',
+};
+var MessageNotification = forwardRef(function (_a, ref) {
+    var title = _a.title, supportingText = _a.supportingText, Icon = _a.icon, _b = _a.color, color = _b === void 0 ? 'neutral' : _b, onClose = _a.onClose, className = _a.className, actions = _a.actions, onHidePermanently = _a.onHidePermanently, rest = __rest(_a, ["title", "supportingText", "icon", "color", "onClose", "className", "actions", "onHidePermanently"]);
+    // message 타입은 neutral, error, warning, success 4가지 색상만 지원
+    var validColor = color === 'info' ? 'neutral' : color;
+    var iconColor = validColor;
+    var featuredIconProps = {
+        icon: Icon || iconMap[validColor] || Pin02,
+        size: 'lg',
+        color: iconColor,
+        theme: 'light-circle',
+    };
+    var closeIconColor = COLOR[iconColorMap[validColor] || 'gray700'];
+    return (_jsx("div", __assign({ ref: ref, className: classNames('ncua-message-notification', "ncua-message-notification--".concat(validColor), className), role: "alert" }, rest, { children: _jsx("div", __assign({ className: "ncua-message-notification__container" }, { children: _jsxs("div", __assign({ className: "ncua-message-notification__content" }, { children: [_jsxs("div", __assign({ className: "ncua-message-notification__content-wrapper" }, { children: [iconMap[validColor] && (_jsx(FeaturedIcon, __assign({}, featuredIconProps, { className: "ncua-message-notification__icon" }))), _jsxs("div", __assign({ className: "ncua-message-notification__text-container" }, { children: [_jsx("span", __assign({ className: "ncua-message-notification__title" }, { children: title })), supportingText && _jsx("span", __assign({ className: "ncua-message-notification__supporting-text" }, { children: supportingText }))] }))] })), _jsx("div", __assign({ className: "ncua-message-notification__actions-container" }, { children: actions && (_jsx("div", __assign({ className: "ncua-message-notification__actions" }, { children: actions.map(function (action) { return (_jsx(Button, { size: "xs", hierarchy: action.hierarchy || 'text', label: action.label, onClick: action === null || action === void 0 ? void 0 : action.onClick }, "".concat(action.label, "-").concat(action.hierarchy))); }) }))) })), _jsxs("div", __assign({ className: "ncua-message-notification__footer-container" }, { children: [onHidePermanently && (_jsx("button", __assign({ type: "button", className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--link', 'ncua-message-notification__hide-link'), onClick: onHidePermanently }, { children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30" }))), onClose && (_jsx("button", __assign({ type: "button", className: "ncua-message-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30" }, { children: _jsx(XClose, { width: 20, height: 20, color: closeIconColor }) })))] }))] })) })) })));
+});
+MessageNotification.displayName = 'MessageNotification';
+export { MessageNotification };

package/dist/temp/src/components/notification/Notification.d.ts

@@ -0,0 +1,72 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import type { ColorTone } from '../../../constant/color';
+import type { SlotIconComponent } from '../../types/side-slot';
+import type { ButtonTheme } from '../button';
+type NotificationType = 'floating' | 'full-width' | 'message';
+type NotificationColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'info'>;
+type NotificationSize = 'desktop' | 'mobile';
+interface NotificationAction {
+    /**
+     * 액션 버튼 텍스트
+     */
+    label: string;
+    /**
+     * 액션 버튼 클릭 이벤트 핸들러
+     */
+    onClick?: () => void;
+    /**
+     * 액션 버튼 색상 (3가지만 지원)
+     */
+    hierarchy?: Extract<ButtonTheme, 'text' | 'text-gray'>;
+}
+interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * 알림 유형 (floating: 측면에 표시되는 알림, full-width: 전체 너비 알림)
+     * @default 'floating'
+     */
+    type?: NotificationType;
+    /**
+     * 알림 제목 텍스트
+     */
+    title: ReactNode;
+    /**
+     * 알림 본문 텍스트 (선택사항)
+     */
+    supportingText?: ReactNode;
+    /**
+     * 알림 아이콘 컴포넌트 (지정하지 않으면 variant에 따라 기본 아이콘 사용)
+     */
+    icon?: SlotIconComponent;
+    /**
+     * 알림 색상 스타일
+     * @default 'neutral'
+     */
+    color?: NotificationColor;
+    /**
+     * 닫기 버튼 클릭 이벤트 핸들러
+     */
+    onClose?: () => void;
+    /**
+     * 추가 CSS 클래스
+     */
+    className?: string;
+    /**
+     * 액션 버튼 영역 (선택사항)
+     * NotificationAction[]
+     */
+    actions?: NotificationAction[];
+    /**
+     * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
+     * floating 타입에서만 동작
+     * @default 0
+     */
+    autoClose?: number;
+    /**
+     * 다시보지 않기 이벤트 핸들러 (선택사항)
+     * message, full-width 타입에서 사용 가능
+     */
+    onHidePermanently?: () => void;
+}
+declare const Notification: import("react").ForwardRefExoticComponent<NotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { NotificationType, NotificationColor, NotificationSize, NotificationAction, NotificationProps };
+export { Notification };

package/dist/temp/src/components/notification/Notification.js

@@ -0,0 +1,42 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { FloatingNotification } from './FloatingNotification';
+import { FullWidthNotification } from './FullWidthNotification';
+import { MessageNotification } from './MessageNotification';
+var Notification = forwardRef(function (_a, ref) {
+    var _b = _a.type, type = _b === void 0 ? 'floating' : _b, _c = _a.color, color = _c === void 0 ? 'neutral' : _c, rest = __rest(_a, ["type", "color"]);
+    if (type === 'floating') {
+        return _jsx(FloatingNotification, __assign({ color: color }, rest, { ref: ref }));
+    }
+    if (type === 'full-width') {
+        return _jsx(FullWidthNotification, __assign({ color: color }, rest, { ref: ref }));
+    }
+    if (type === 'message') {
+        return _jsx(MessageNotification, __assign({ color: color }, rest, { ref: ref }));
+    }
+    return null;
+});
+Notification.displayName = 'Notification';
+export { Notification };

package/dist/temp/src/components/notification/index.d.ts

@@ -0,0 +1,4 @@
+export * from './FloatingNotification';
+export * from './FullWidthNotification';
+export * from './MessageNotification';
+export * from './Notification';

package/dist/temp/src/components/notification/index.js

@@ -0,0 +1,4 @@
+export * from './FloatingNotification';
+export * from './FullWidthNotification';
+export * from './MessageNotification';
+export * from './Notification';

package/dist/temp/src/components/pagination/NavButton.d.ts

@@ -0,0 +1,31 @@
+import type { SlotIconComponent } from '../../types/side-slot';
+declare const NAV_BUTTON_CONFIG: {
+    readonly first: {
+        readonly label: "처음";
+        readonly className: "ncua-pagination__first";
+        readonly getIcon: (_isPC: boolean) => SlotIconComponent;
+    };
+    readonly prev: {
+        readonly label: "이전";
+        readonly className: "ncua-pagination__before";
+        readonly getIcon: (isPC: boolean) => SlotIconComponent;
+    };
+    readonly next: {
+        readonly label: "다음";
+        readonly className: "ncua-pagination__next";
+        readonly getIcon: (isPC: boolean) => SlotIconComponent;
+    };
+    readonly last: {
+        readonly label: "마지막";
+        readonly className: "ncua-pagination__last";
+        readonly getIcon: (_isPC: boolean) => SlotIconComponent;
+    };
+};
+export declare const NavButton: ({ type, breakPoint, noPrev, noNext, onClick, }: {
+    type: keyof typeof NAV_BUTTON_CONFIG;
+    breakPoint: 'pc' | 'mo';
+    noPrev: boolean;
+    noNext: boolean;
+    onClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/temp/src/components/pagination/NavButton.js

@@ -0,0 +1,66 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight, ChevronLeft, ChevronLeftDouble, ChevronRight, ChevronRightDouble, } from '@ncds/ui-admin-icon';
+import { Button } from '../button';
+var ICON_SIZE_PC = 16;
+var ICON_SIZE_MOBILE = 20;
+var NAV_BUTTON_CONFIG = {
+    first: {
+        label: '처음',
+        className: 'ncua-pagination__first',
+        getIcon: function (_isPC) { return ChevronLeftDouble; },
+    },
+    prev: {
+        label: '이전',
+        className: 'ncua-pagination__before',
+        getIcon: function (isPC) { return (isPC ? ChevronLeft : ArrowLeft); },
+    },
+    next: {
+        label: '다음',
+        className: 'ncua-pagination__next',
+        getIcon: function (isPC) { return (isPC ? ChevronRight : ArrowRight); },
+    },
+    last: {
+        label: '마지막',
+        className: 'ncua-pagination__last',
+        getIcon: function (_isPC) { return ChevronRightDouble; },
+    },
+};
+export var NavButton = function (_a) {
+    var type = _a.type, breakPoint = _a.breakPoint, noPrev = _a.noPrev, noNext = _a.noNext, onClick = _a.onClick;
+    var config = NAV_BUTTON_CONFIG[type];
+    var isNavigationButton = type === 'first' || type === 'prev' || type === 'next' || type === 'last';
+    var isFirstOrPrev = type === 'first' || type === 'prev';
+    var isNextOrLast = type === 'next' || type === 'last';
+    var disabled = (isFirstOrPrev ? noPrev : false) || (isNextOrLast ? noNext : false);
+    var isPC = breakPoint === 'pc';
+    // key를 제외한 공통 props
+    var buttonProps = {
+        label: config.label,
+        className: config.className,
+        onlyIcon: true,
+        leadingIcon: {
+            type: 'icon',
+            icon: config.getIcon(isPC),
+            size: isPC ? ICON_SIZE_PC : ICON_SIZE_MOBILE,
+            color: disabled ? 'gray200' : 'gray700',
+        },
+        hierarchy: 'secondary-gray',
+        size: (isPC ? 'xs' : 'sm'),
+        disabled: disabled,
+        onClick: onClick,
+    };
+    // key 값 별도 계산
+    var buttonKey = isNavigationButton ? "".concat(breakPoint, "-").concat(type) : undefined;
+    return _jsx(Button, __assign({}, buttonProps), buttonKey);
+};

package/dist/temp/src/components/pagination/Pagination.d.ts

@@ -0,0 +1,11 @@
+type PaginationProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
+    className?: string;
+    totalCount: number;
+    itemCountPerPage?: number;
+    pageCount?: number;
+    currentPage: number;
+    breakPoint?: 'pc' | 'mo';
+    onPageChange?: (page: number) => void;
+};
+export declare const Pagination: ({ className, totalCount, itemCountPerPage, pageCount, currentPage, breakPoint, onPageChange, ...restProps }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/temp/src/components/pagination/Pagination.js

@@ -0,0 +1,93 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { isFunction, range, uniqueId } from 'lodash-es';
+import { useEffect, useState } from 'react';
+import { NavButton } from './NavButton';
+// 네비게이션 버튼 설정
+export var Pagination = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, totalCount = _a.totalCount, _c = _a.itemCountPerPage, itemCountPerPage = _c === void 0 ? 10 : _c, _d = _a.pageCount, pageCount = _d === void 0 ? 10 : _d, currentPage = _a.currentPage, _e = _a.breakPoint, breakPoint = _e === void 0 ? 'pc' : _e, onPageChange = _a.onPageChange, restProps = __rest(_a, ["className", "totalCount", "itemCountPerPage", "pageCount", "currentPage", "breakPoint", "onPageChange"]);
+    var totalPage = Math.ceil(totalCount / itemCountPerPage);
+    var _f = useState(1), start = _f[0], setStart = _f[1];
+    var noPrev = breakPoint === 'mo' ? currentPage === 1 : start === 1;
+    var noNext = breakPoint === 'mo' ? currentPage >= totalPage : start + pageCount - 1 >= totalPage;
+    var showJumpPageButton = totalPage > pageCount;
+    var handleClickButton = function (pageNum) {
+        if (isFunction(onPageChange)) {
+            onPageChange(pageNum);
+        }
+    };
+    useEffect(function () {
+        if (currentPage === start + pageCount) {
+            setStart(start + pageCount);
+        }
+        if (currentPage > start + pageCount) {
+            var newStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
+            setStart(newStart);
+        }
+        if (currentPage < start) {
+            setStart(Math.max(1, start - pageCount));
+        }
+        if (currentPage === 1) {
+            setStart(1);
+        }
+        if (currentPage === totalPage) {
+            var lastGroupStart = Math.floor((totalPage - 1) / pageCount) * pageCount + 1;
+            setStart(lastGroupStart);
+        }
+    }, [currentPage]);
+    return (_jsxs("div", __assign({ className: classNames('ncua-pagination', "ncua-pagination--".concat(breakPoint), className) }, { children: [showJumpPageButton && (_jsxs(_Fragment, { children: [NavButton({
+                        type: 'first',
+                        breakPoint: breakPoint,
+                        noPrev: noPrev,
+                        noNext: noNext,
+                        onClick: function () { return handleClickButton(1); },
+                    }), NavButton({
+                        type: 'prev',
+                        breakPoint: breakPoint,
+                        noPrev: noPrev,
+                        noNext: noNext,
+                        onClick: function () {
+                            return breakPoint === 'mo'
+                                ? handleClickButton(Math.max(currentPage - 1, 1))
+                                : handleClickButton(Math.max(start - pageCount, 1));
+                        },
+                    })] })), _jsx("ul", __assign({ className: "ncua-pagination__list" }, { children: range(start, Math.min(totalPage + 1, start + pageCount)).map(function (pageNumber, i) { return (_jsx("li", __assign({ className: "ncua-pagination__item" }, { children: _jsx("button", __assign({ className: classNames('ncua-pagination__page-num', { 'is-current': pageNumber === currentPage }), onClick: function () { return handleClickButton(start + i); } }, restProps, { children: start + i })) }), uniqueId('ncua-pagination__page-num'))); }) })), _jsxs("p", __assign({ className: "ncua-pagination__page-info" }, { children: [_jsx("em", __assign({ className: "ncua-pagination__current-num" }, { children: currentPage })), " / ", totalPage] })), showJumpPageButton && (_jsxs(_Fragment, { children: [NavButton({
+                        type: 'next',
+                        breakPoint: breakPoint,
+                        noPrev: noPrev,
+                        noNext: noNext,
+                        onClick: function () {
+                            return breakPoint === 'mo'
+                                ? handleClickButton(Math.min(currentPage + 1, totalPage))
+                                : handleClickButton(Math.min(start + pageCount, totalPage));
+                        },
+                    }), NavButton({
+                        type: 'last',
+                        breakPoint: breakPoint,
+                        noPrev: noPrev,
+                        noNext: noNext,
+                        onClick: function () { return handleClickButton(totalPage); },
+                    })] }))] })));
+};

package/dist/temp/src/components/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NavButton';
+export * from './Pagination';

package/dist/temp/src/components/pagination/index.js

@@ -0,0 +1,2 @@
+export * from './NavButton';
+export * from './Pagination';

package/dist/temp/src/components/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,2 @@
+import type { ProgressBarProps } from './types';
+export declare const ProgressBar: ({ label, value, segments, showZeroLabel, valueToPercent, }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;