@ncds/ui-admin 0.0.2

package/dist/ui-admin/src/components/input/InputBase.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputBase = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _color = require("../../../constant/color");
+var _Label = require("../shared/label/Label");
+var _HintText = require("../shared/hintText/HintText");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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;
+};
+var validationSvgSize = {
+  xs: 14,
+  md: 16
+};
+var generalSvgSize = {
+  xs: 14,
+  md: 20
+};
+var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'md' : _b,
+    required = _a.required,
+    label = _a.label,
+    hintText = _a.hintText,
+    disabled = _a.disabled,
+    validation = _a.validation,
+    destructive = _a.destructive,
+    leadingElement = _a.leadingElement,
+    trailingElement = _a.trailingElement,
+    props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement"]);
+  var renderOutsideSlot = function (slot, position) {
+    if (slot.type === 'custom' && slot.placement !== 'outside') {
+      return null;
+    }
+    switch (slot.type) {
+      case 'button':
+        return (0, _jsxRuntime.jsx)("button", __assign({
+          type: slot.isSubmit ? 'submit' : 'button',
+          className: (0, _classnames.default)('ncua-input__button', "ncua-input__button--".concat(size)),
+          onClick: slot.onClick
+        }, {
+          children: slot.label
+        }));
+      case 'text':
+        return (0, _jsxRuntime.jsx)("span", __assign({
+          className: (0, _classnames.default)('ncua-input__leading-text', "ncua-input__leading-text--".concat(size))
+        }, {
+          children: slot.text
+        }));
+      case 'custom':
+        return slot.children;
+      default:
+        return null;
+    }
+  };
+  var renderInsideSlot = function (slot, position) {
+    switch (slot.type) {
+      case 'icon':
+        return (0, _jsxRuntime.jsx)("div", __assign({
+          className: "ncua-input__icon-wrap"
+        }, {
+          children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+            className: (0, _classnames.default)("ncua-input__".concat(position, "-icon"), slot.className),
+            name: slot.icon,
+            color: slot.color ? _color.COLOR[slot.color] : undefined,
+            width: generalSvgSize[size],
+            height: generalSvgSize[size]
+          })
+        }));
+      case 'custom':
+        return slot.children;
+      default:
+        return null;
+    }
+  };
+  var renderClearButton = function () {
+    if (!props.clearText) return null;
+    return (0, _jsxRuntime.jsx)("button", __assign({
+      className: "ncua-input__icon-wrap ncua-input__right-icon ncua-input__clear",
+      onClick: props.onClearText
+    }, {
+      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+        name: "x",
+        className: "ncua-input__clear-icon",
+        width: validationSvgSize[size],
+        height: validationSvgSize[size]
+      })
+    }));
+  };
+  var renderStatusIcon = function () {
+    if (destructive) {
+      return (0, _jsxRuntime.jsx)("div", __assign({
+        className: "ncua-input__icon-wrap ncua-input__right-icon"
+      }, {
+        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+          name: "info-circle",
+          className: "ncua-input__destructive-icon",
+          width: validationSvgSize[size],
+          height: validationSvgSize[size]
+        })
+      }));
+    }
+    if (validation) {
+      return (0, _jsxRuntime.jsx)("div", __assign({
+        className: "ncua-input__icon-wrap ncua-input__right-icon"
+      }, {
+        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+          name: "check-circle",
+          className: "ncua-input__validation-icon",
+          width: validationSvgSize[size],
+          height: validationSvgSize[size]
+        })
+      }));
+    }
+    return null;
+  };
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: (0, _classnames.default)('ncua-input', "ncua-input--".concat(size), {
+      destructive: destructive,
+      'is-disabled': disabled,
+      'ncua-input__trailing-button': (trailingElement === null || trailingElement === void 0 ? void 0 : trailingElement.type) === 'button'
+    })
+  }, {
+    children: [label && (0, _jsxRuntime.jsx)(_Label.Label, __assign({
+      isRequired: required,
+      className: "ncua-input__label--".concat(size)
+    }, {
+      children: label
+    })), (0, _jsxRuntime.jsxs)("div", __assign({
+      className: "ncua-input__content"
+    }, {
+      children: [leadingElement && renderOutsideSlot(leadingElement, 'left'), (0, _jsxRuntime.jsxs)("div", __assign({
+        className: (0, _classnames.default)('ncua-input__field', "ncua-input--".concat(size))
+      }, {
+        children: [leadingElement && renderInsideSlot(leadingElement, 'left'), (0, _jsxRuntime.jsx)("input", __assign({
+          ref: ref,
+          type: "text",
+          disabled: disabled
+        }, props)), trailingElement && renderInsideSlot(trailingElement, 'right'), renderClearButton(), renderStatusIcon()]
+      })), trailingElement && renderOutsideSlot(trailingElement, 'right')]
+    })), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, __assign({
+      destructive: destructive
+    }, {
+      children: hintText
+    }))]
+  }));
+});

package/dist/ui-admin/src/components/input/PasswordInput.d.ts

@@ -0,0 +1,3 @@
+import { InputBaseProps } from './InputBase';
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<InputBaseProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=PasswordInput.d.ts.map

package/dist/ui-admin/src/components/input/PasswordInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/PasswordInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AASxD,eAAO,MAAM,aAAa,6GAuDxB,CAAC"}

package/dist/ui-admin/src/components/input/PasswordInput.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PasswordInput = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _InputBase = require("./InputBase");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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;
+};
+var svgSize = {
+  xs: 14,
+  md: 20
+};
+var PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'md' : _b,
+    props = __rest(_a, ["size"]);
+  var inputRef = (0, _react.useRef)(null);
+  var _c = (0, _react.useState)(false),
+    isVisible = _c[0],
+    setIsVisible = _c[1];
+  var _d = (0, _react.useState)(false),
+    hasContent = _d[0],
+    setHasContent = _d[1];
+  var svgProps = {
+    width: svgSize[size],
+    height: svgSize[size]
+  };
+  var handleVisibilityChange = function () {
+    setIsVisible(!isVisible);
+  };
+  (0, _react.useEffect)(function () {
+    if (inputRef.current) {
+      setHasContent(!!inputRef.current.value);
+      inputRef.current.addEventListener('input', function () {
+        var _a;
+        setHasContent(!!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value));
+      });
+    }
+  }, []);
+  return (0, _jsxRuntime.jsx)(_InputBase.InputBase, __assign({
+    ref: function (node) {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+      inputRef.current = node;
+    },
+    type: isVisible ? 'text' : 'password',
+    leadingElement: {
+      type: 'icon',
+      icon: 'lock-01',
+      color: hasContent ? 'gray600' : 'gray300'
+    },
+    trailingElement: {
+      type: 'custom',
+      placement: 'inside',
+      children: (0, _jsxRuntime.jsx)("button", __assign({
+        className: (0, _classnames.default)('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__password-icon'),
+        onClick: handleVisibilityChange
+      }, {
+        children: isVisible ? (0, _jsxRuntime.jsx)(_uiAdminIcon.Eye, __assign({}, svgProps)) : (0, _jsxRuntime.jsx)(_uiAdminIcon.EyeOff, __assign({}, svgProps))
+      }))
+    }
+  }, props));
+});

package/dist/ui-admin/src/components/input/index.d.ts

@@ -0,0 +1,3 @@
+export * from './InputBase';
+export * from './PasswordInput';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui-admin/src/components/input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}

package/dist/ui-admin/src/components/input/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _InputBase = require("./InputBase");
+Object.keys(_InputBase).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputBase[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InputBase[key];
+    }
+  });
+});
+var _PasswordInput = require("./PasswordInput");
+Object.keys(_PasswordInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PasswordInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PasswordInput[key];
+    }
+  });
+});

package/dist/ui-admin/src/components/pagination/NavButton.d.ts

@@ -0,0 +1,34 @@
+declare const NAV_BUTTON_CONFIG: {
+    readonly first: {
+        readonly label: "처음";
+        readonly className: "ncua-pagination__first";
+        readonly getIcon: (isPC: boolean) => string;
+    };
+    readonly prev: {
+        readonly label: "이전";
+        readonly className: "ncua-pagination__before";
+        readonly getIcon: (isPC: boolean) => "arrow-left" | "chevron-left";
+    };
+    readonly next: {
+        readonly label: "다음";
+        readonly className: "ncua-pagination__next";
+        readonly getIcon: (isPC: boolean) => "arrow-right" | "chevron-right";
+    };
+    readonly last: {
+        readonly label: "마지막";
+        readonly className: "ncua-pagination__last";
+        readonly getIcon: (isPC: boolean) => string;
+    };
+};
+export declare const NavButton: ({ type, as, isPC, noPrev, noNext, href, target, onClick, }: {
+    type: keyof typeof NAV_BUTTON_CONFIG;
+    as: 'button' | 'a';
+    isPC: boolean;
+    noPrev: boolean;
+    noNext: boolean;
+    href: string;
+    target: string;
+    onClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NavButton.d.ts.map

package/dist/ui-admin/src/components/pagination/NavButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/pagination/NavButton.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,iBAAiB;;;;iCAIH,OAAO;;;;;iCAKP,OAAO;;;;;iCAKP,OAAO;;;;;iCAKP,OAAO;;CAEjB,CAAC;AAEX,eAAO,MAAM,SAAS;UAUd,MAAM,wBAAwB;QAChC,QAAQ,GAAG,GAAG;UACZ,OAAO;YACL,OAAO;YACP,OAAO;UACT,MAAM;YACJ,MAAM;aACL,MAAM,IAAI;6CAgCpB,CAAC"}

package/dist/ui-admin/src/components/pagination/NavButton.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavButton = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _Button = require("../button/Button");
+var __assign = void 0 && (void 0).__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 NAV_BUTTON_CONFIG = {
+  first: {
+    label: '처음',
+    className: 'ncua-pagination__first',
+    getIcon: function (isPC) {
+      return 'chevron-left-double';
+    }
+  },
+  prev: {
+    label: '이전',
+    className: 'ncua-pagination__before',
+    getIcon: function (isPC) {
+      return isPC ? 'chevron-left' : 'arrow-left';
+    }
+  },
+  next: {
+    label: '다음',
+    className: 'ncua-pagination__next',
+    getIcon: function (isPC) {
+      return isPC ? 'chevron-right' : 'arrow-right';
+    }
+  },
+  last: {
+    label: '마지막',
+    className: 'ncua-pagination__last',
+    getIcon: function (isPC) {
+      return 'chevron-right-double';
+    }
+  }
+};
+var NavButton = function (_a) {
+  var type = _a.type,
+    as = _a.as,
+    isPC = _a.isPC,
+    noPrev = _a.noPrev,
+    noNext = _a.noNext,
+    href = _a.href,
+    target = _a.target,
+    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 : isNextOrLast ? noNext : false;
+  // key를 제외한 공통 props
+  var buttonProps = {
+    label: config.label,
+    className: config.className,
+    onlyIcon: true,
+    leadingIcon: {
+      type: 'icon',
+      icon: config.getIcon(isPC),
+      color: disabled ? 'gray200' : 'gray700'
+    },
+    hierarchy: 'secondary-gray',
+    size: 'xs',
+    disabled: disabled,
+    onClick: onClick
+  };
+  // key 값 별도 계산
+  var buttonKey = isNavigationButton ? "".concat(isPC ? 'pc' : 'mobile', "-").concat(type) : undefined;
+  if (as === 'a') {
+    return (0, _jsxRuntime.jsx)(_Button.Button, __assign({
+      as: "a",
+      href: href,
+      target: target
+    }, buttonProps), buttonKey);
+  }
+  return (0, _jsxRuntime.jsx)(_Button.Button, __assign({
+    as: "button"
+  }, buttonProps), buttonKey);
+};
+exports.NavButton = NavButton;

package/dist/ui-admin/src/components/pagination/Pagination.d.ts

@@ -0,0 +1,22 @@
+type CommonPaginationProps = {
+    className?: string;
+    totalCount: number;
+    itemCountPerPage?: number;
+    pageCount?: number;
+    currentPage: number;
+    onPageChange?: (page: number) => void;
+};
+type PaginationButtonProps = CommonPaginationProps & {
+    as?: 'button';
+    href?: never;
+    target?: never;
+};
+type PaginationAnchorProps = CommonPaginationProps & {
+    as: 'a';
+    href: string;
+    target?: string;
+};
+type PaginationProps = PaginationButtonProps | PaginationAnchorProps;
+export declare const Pagination: ({ className, totalCount, itemCountPerPage, pageCount, currentPage, as, onPageChange, ...restProps }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/ui-admin/src/components/pagination/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/pagination/Pagination.tsx"],"names":[],"mappings":"AAMA,KAAK,qBAAqB,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,KAAK,qBAAqB,GAAG,qBAAqB,GAAG;IACnD,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,CAAC;AAEF,KAAK,qBAAqB,GAAG,qBAAqB,GAAG;IACnD,EAAE,EAAE,GAAG,CAAC;IACR,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,eAAe,GAAG,qBAAqB,GAAG,qBAAqB,CAAC;AAIrE,eAAO,MAAM,UAAU,wGASpB,eAAe,4CAwHjB,CAAC"}

package/dist/ui-admin/src/components/pagination/Pagination.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pagination = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodashEs = require("lodash-es");
+var _react = require("react");
+var _constant = require("../../constant");
+var _NavButton = require("./NavButton");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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;
+};
+// 네비게이션 버튼 설정
+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.as,
+    as = _e === void 0 ? 'button' : _e,
+    onPageChange = _a.onPageChange,
+    restProps = __rest(_a, ["className", "totalCount", "itemCountPerPage", "pageCount", "currentPage", "as", "onPageChange"]);
+  var totalPage = Math.ceil(totalCount / itemCountPerPage);
+  var _f = (0, _react.useState)(1),
+    start = _f[0],
+    setStart = _f[1];
+  var _g = (0, _react.useState)(window.innerWidth > _constant.MINIMUM_PC_SIZE),
+    isPC = _g[0],
+    setIsPC = _g[1];
+  var noPrev = start === 1;
+  var noNext = start + pageCount - 1 >= totalPage;
+  var showJumpPageButton = totalPage > pageCount;
+  var handleClickButton = function (pageNum) {
+    (0, _lodashEs.isFunction)(onPageChange);
+    if ((0, _lodashEs.isFunction)(onPageChange)) {
+      onPageChange(pageNum);
+    }
+  };
+  (0, _react.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(start - pageCount);
+    }
+    if (currentPage === 1) {
+      setStart(1);
+    }
+    if (currentPage === totalPage) {
+      var lastGroupStart = Math.max(1, totalPage - pageCount + 1);
+      setStart(lastGroupStart);
+    }
+  }, [currentPage]);
+  (0, _react.useEffect)(function () {
+    var mql = window.matchMedia("(min-width: ".concat(_constant.MINIMUM_PC_SIZE, "px)"));
+    setIsPC(mql.matches);
+    var handleResize = function (e) {
+      setIsPC(e.matches);
+    };
+    mql.addEventListener('change', handleResize);
+    return function () {
+      return mql.removeEventListener('change', handleResize);
+    };
+  }, []);
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsxs)("div", __assign({
+      className: (0, _classnames.default)('ncua-pagination', className)
+    }, {
+      children: [showJumpPageButton && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [(0, _NavButton.NavButton)({
+          type: 'first',
+          as: as,
+          isPC: isPC,
+          noPrev: noPrev,
+          noNext: noNext,
+          href: restProps.href || '',
+          target: restProps.target || '',
+          onClick: function () {
+            return handleClickButton(1);
+          }
+        }), (0, _NavButton.NavButton)({
+          type: 'prev',
+          as: as,
+          isPC: isPC,
+          noPrev: noPrev,
+          noNext: noNext,
+          href: restProps.href || '',
+          target: restProps.target || '',
+          onClick: function () {
+            return handleClickButton(Math.max(start - pageCount, 1));
+          }
+        })]
+      }), (0, _jsxRuntime.jsx)("ul", __assign({
+        className: "ncua-pagination__list"
+      }, {
+        children: (0, _lodashEs.range)(start, Math.min(totalPage + 1, start + pageCount)).map(function (pageNumber, i) {
+          return (0, _jsxRuntime.jsx)("li", __assign({
+            className: "ncua-pagination__item"
+          }, {
+            children: (0, _jsxRuntime.jsx)("button", __assign({
+              className: (0, _classnames.default)('ncua-pagination__page-num', {
+                'is-current': pageNumber === currentPage
+              }),
+              onClick: function () {
+                return handleClickButton(start + i);
+              }
+            }, restProps, {
+              children: start + i
+            }))
+          }), (0, _lodashEs.uniqueId)('ncua-pagination__page-num'));
+        })
+      })), (0, _jsxRuntime.jsxs)("p", __assign({
+        className: "ncua-pagination__page-info"
+      }, {
+        children: [(0, _jsxRuntime.jsx)("em", __assign({
+          className: "ncua-pagination__current-num"
+        }, {
+          children: currentPage
+        })), " / ", totalPage]
+      })), showJumpPageButton && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [(0, _NavButton.NavButton)({
+          type: 'next',
+          as: as,
+          isPC: isPC,
+          noPrev: noPrev,
+          noNext: noNext,
+          href: restProps.href || '',
+          target: restProps.target || '',
+          onClick: function () {
+            return handleClickButton(Math.min(start + pageCount, totalPage));
+          }
+        }), (0, _NavButton.NavButton)({
+          type: 'last',
+          as: as,
+          isPC: isPC,
+          noPrev: noPrev,
+          noNext: noNext,
+          href: restProps.href || '',
+          target: restProps.target || '',
+          onClick: function () {
+            return handleClickButton(totalPage);
+          }
+        })]
+      })]
+    }))
+  });
+};
+exports.Pagination = Pagination;

package/dist/ui-admin/src/components/pagination/index.d.ts

@@ -0,0 +1,3 @@
+export * from './NavButton';
+export * from './Pagination';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui-admin/src/components/pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/pagination/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/ui-admin/src/components/pagination/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _NavButton = require("./NavButton");
+Object.keys(_NavButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NavButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NavButton[key];
+    }
+  });
+});
+var _Pagination = require("./Pagination");
+Object.keys(_Pagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Pagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Pagination[key];
+    }
+  });
+});

package/dist/ui-admin/src/components/radio/Radio.d.ts

@@ -0,0 +1,10 @@
+import { ChangeEvent, FC, MutableRefObject, ReactNode, RefCallback } from 'react';
+import { RadioInputProps } from './RadioInput';
+export interface RadioProps extends Omit<RadioInputProps, 'type'> {
+    text?: ReactNode;
+    supportText?: string;
+    radioRef?: RefCallback<HTMLInputElement> | MutableRefObject<HTMLInputElement | null>;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const Radio: FC<RadioProps>;
+//# sourceMappingURL=Radio.d.ts.map