@ncds/ui-admin 1.8.2 → 1.8.4

package/dist/cjs/src/components/layout/block-container/BlockContainer.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockContainer = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BlockContainerBase = _ref => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
+  return (0, _jsxRuntime.jsx)("section", {
+    className: (0, _classnames.default)('ncua-block-container', className),
+    ...rest,
+    children: children
+  });
+};
+BlockContainerBase.displayName = 'BlockContainer';
+const Body = _ref2 => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref2;
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('ncua-block-container__body', className),
+    ...rest,
+    children: children
+  });
+};
+Body.displayName = 'BlockContainer.Body';
+const BlockContainer = exports.BlockContainer = Object.assign(BlockContainerBase, {
+  Body
+});

package/dist/cjs/src/components/layout/block-container/index.js

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

package/dist/cjs/src/components/layout/block-header/BlockHeader.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockHeader = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Tooltip = require("../../overlays/tooltip/Tooltip");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ICON_SIZE = 24;
+const CollapsibleButton = _ref => {
+  let {
+    expanded,
+    onToggle
+  } = _ref;
+  return (0, _jsxRuntime.jsx)("button", {
+    type: "button",
+    className: "ncua-block-header__collapsible-btn",
+    onClick: onToggle,
+    "aria-expanded": expanded,
+    children: expanded ? (0, _jsxRuntime.jsx)(_uiAdminIcon.ChevronUp, {
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      color: "var(--gray-300)"
+    }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.ChevronDown, {
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      color: "var(--gray-300)"
+    })
+  });
+};
+const BlockHeader = _ref2 => {
+  let {
+    title,
+    tooltip,
+    action,
+    showDivider = true,
+    badge,
+    description,
+    collapsible,
+    showRequiredNotice = false,
+    controlStrip,
+    children,
+    className,
+    ...rest
+  } = _ref2;
+  const hasColumnLayout = !!description;
+  const hasTabChildren = !!children;
+  const hasControlStrip = !!controlStrip;
+  const isCollapsed = !!collapsible && !collapsible.expanded;
+  return (0, _jsxRuntime.jsxs)("header", {
+    className: (0, _classnames.default)('ncua-block-header', {
+      'ncua-block-header--column': hasColumnLayout,
+      'ncua-block-header--no-divider': !showDivider || hasTabChildren || isCollapsed,
+      'ncua-block-header--has-tab': hasTabChildren && !isCollapsed,
+      'ncua-block-header--has-control-strip': hasControlStrip,
+      'ncua-block-header--is-required': showRequiredNotice
+    }, className),
+    ...rest,
+    children: [(0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-block-header__row",
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-block-header__title-area",
+        children: [(0, _jsxRuntime.jsx)("span", {
+          className: "ncua-block-header__title",
+          children: title
+        }), tooltip && (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+          content: tooltip,
+          size: "sm",
+          position: "top",
+          hideArrow: true,
+          iconType: "fill"
+        }), badge && (0, _jsxRuntime.jsx)("span", {
+          className: "ncua-block-header__badge",
+          children: badge
+        })]
+      }), (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-block-header__action-area",
+        children: [showRequiredNotice && (0, _jsxRuntime.jsxs)("span", {
+          className: "ncua-block-header__required-notice",
+          children: [(0, _jsxRuntime.jsx)("span", {
+            className: "ncua-block-header__required-notice--red",
+            children: "* \uB294 \uD544\uC218 \uC785\uB825"
+          }), (0, _jsxRuntime.jsx)("span", {
+            className: "ncua-block-header__required-notice--gray",
+            children: " \uD56D\uBAA9\uC785\uB2C8\uB2E4."
+          })]
+        }), action, collapsible && (0, _jsxRuntime.jsx)(CollapsibleButton, {
+          ...collapsible
+        })]
+      })]
+    }), hasColumnLayout && (0, _jsxRuntime.jsx)("p", {
+      className: "ncua-block-header__description",
+      children: description
+    }), hasControlStrip && (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-block-header__control-strip",
+      children: controlStrip
+    }), hasTabChildren && !isCollapsed && (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-block-header__tabs",
+      children: children
+    })]
+  });
+};
+exports.BlockHeader = BlockHeader;
+BlockHeader.displayName = 'BlockHeader';

package/dist/cjs/src/components/layout/block-header/SubTitle.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubTitle = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Tooltip = require("../../overlays/tooltip/Tooltip");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SubTitle = _ref => {
+  let {
+    title,
+    size = 'sm',
+    tooltip,
+    description,
+    error,
+    action,
+    required = false,
+    className,
+    ...rest
+  } = _ref;
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('ncua-sub-title', `ncua-sub-title--${size}`, className),
+    ...rest,
+    children: [(0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-sub-title__title-row",
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-sub-title__title-area",
+        children: [required && (0, _jsxRuntime.jsx)("span", {
+          className: "ncua-sub-title__required-marker",
+          children: "*"
+        }), (0, _jsxRuntime.jsx)("span", {
+          className: "ncua-sub-title__title",
+          children: title
+        }), tooltip && (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+          content: tooltip,
+          size: "sm",
+          position: "right",
+          hideArrow: true
+        })]
+      }), action && (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-sub-title__action",
+        children: action
+      })]
+    }), description && (0, _jsxRuntime.jsx)("p", {
+      className: "ncua-sub-title__description",
+      children: description
+    }), error && (0, _jsxRuntime.jsx)("p", {
+      className: "ncua-sub-title__error",
+      children: error
+    })]
+  });
+};
+exports.SubTitle = SubTitle;
+SubTitle.displayName = 'BlockHeader.SubTitle';

package/dist/cjs/src/components/layout/block-header/index.js

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

package/dist/cjs/src/components/layout/page-title/PageTitle.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PageTitle = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _Button = require("../../action/button/Button");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const renderBreadcrumb = items => (0, _jsxRuntime.jsx)("nav", {
+  className: "ncua-page-title__breadcrumb",
+  "aria-label": "breadcrumb",
+  children: items.map((item, i) =>
+  // biome-ignore lint/suspicious/noArrayIndexKey: breadcrumb items may have duplicate labels
+  (0, _jsxRuntime.jsx)(_react.Fragment, {
+    children: i < items.length - 1 ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(0, _jsxRuntime.jsx)("span", {
+        className: "ncua-page-title__breadcrumb-item",
+        children: item.href ? (0, _jsxRuntime.jsx)("a", {
+          href: item.href,
+          children: item.label
+        }) : item.label
+      }), (0, _jsxRuntime.jsx)(_uiAdminIcon.ChevronRight, {
+        className: "ncua-page-title__breadcrumb-separator"
+      })]
+    }) : (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-page-title__breadcrumb-current",
+      children: item.label
+    })
+  }, i))
+});
+const renderBackButton = onBack => (0, _jsxRuntime.jsx)(_Button.Button, {
+  label: "",
+  hierarchy: "secondary-gray",
+  size: "xs",
+  onlyIcon: true,
+  leadingIcon: {
+    type: 'icon',
+    icon: _uiAdminIcon.ChevronLeft
+  },
+  onClick: onBack,
+  "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0\uB85C \uB3CC\uC544\uAC00\uAE30",
+  className: "ncua-page-title__back-btn"
+});
+const PageTitle = _ref => {
+  let {
+    title,
+    variant = 'default',
+    breadcrumbItems,
+    onBack,
+    guideButton,
+    primaryAction,
+    secondaryAction,
+    className,
+    ...rest
+  } = _ref;
+  const isFixed = variant === 'fixed' || variant === 'fixed-detail';
+  const isDetail = variant === 'detail' || variant === 'fixed-detail';
+  const hasBreadcrumb = !isFixed && breadcrumbItems && breadcrumbItems.length > 0;
+  return (0, _jsxRuntime.jsx)("header", {
+    className: (0, _classnames.default)('ncua-page-title', {
+      'ncua-page-title--fixed': isFixed
+    }, className),
+    ...rest,
+    children: (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-page-title__page-header",
+      children: (0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)('ncua-page-title__header', {
+          'ncua-page-title__header--has-breadcrumb': hasBreadcrumb
+        }),
+        children: [(0, _jsxRuntime.jsxs)("div", {
+          className: "ncua-page-title__container",
+          children: [hasBreadcrumb && renderBreadcrumb(breadcrumbItems), (0, _jsxRuntime.jsxs)("div", {
+            className: "ncua-page-title__title-row",
+            children: [isDetail && onBack && renderBackButton(onBack), (0, _jsxRuntime.jsx)("h1", {
+              className: "ncua-page-title__title",
+              children: title
+            }), guideButton && (0, _jsxRuntime.jsx)("div", {
+              className: "ncua-page-title__guide-btn",
+              children: guideButton
+            })]
+          })]
+        }), (secondaryAction || primaryAction) && (0, _jsxRuntime.jsxs)("div", {
+          className: "ncua-page-title__actions",
+          children: [secondaryAction, primaryAction]
+        })]
+      })
+    })
+  });
+};
+exports.PageTitle = PageTitle;
+PageTitle.displayName = 'PageTitle';

package/dist/cjs/src/components/layout/page-title/index.js

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

package/dist/cjs/src/components/{horizontal-tab → navigation/horizontal-tab}/HorizontalTab.js

@@ -8,7 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _lodashEs = require("lodash-es");
 var _react = require("swiper/react");
-var _TabButton = require("../tab/TabButton");
+var _TabButton = require("../../tab/TabButton");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const UNDERLINE_GAP = 16;
 const DEFAULT_GAP = 8;

package/dist/cjs/src/components/{pagination → navigation/pagination}/NavButton.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.NavButton = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
-var _button = require("../button");
+var _button = require("../../action/button");
 const ICON_SIZE_PC = 16;
 const ICON_SIZE_MOBILE = 20;
 const NAV_BUTTON_CONFIG = {

package/dist/cjs/src/components/{vertical-tab → navigation/vertical-tab}/VerticalTab.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.VerticalTab = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _Select = require("../select/Select");
-var _TabButton = require("../tab/TabButton");
+var _Select = require("../../forms-and-input/select/Select");
+var _TabButton = require("../../tab/TabButton");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const VerticalTab = _ref => {
   let {