@ncds/ui-admin 1.8.3 → 1.8.4

package/dist/cjs/src/components/index.js

@@ -355,6 +355,28 @@ Object.keys(_featuredIcon).forEach(function (key) {
     }
   });
 });
+var _blockContainer = require("./layout/block-container");
+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];
+    }
+  });
+});
+var _blockHeader = require("./layout/block-header");
+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 _divider = require("./layout/divider");
 Object.keys(_divider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -366,6 +388,17 @@ Object.keys(_divider).forEach(function (key) {
     }
   });
 });
+var _pageTitle = require("./layout/page-title");
+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];
+    }
+  });
+});
 var _breadCrumb = require("./navigation/bread-crumb");
 Object.keys(_breadCrumb).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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/esm/src/components/index.js

@@ -36,7 +36,10 @@ export * from './forms-and-input/toggle';
 export * from './image-and-icons/dot';
 export * from './image-and-icons/featured-icon';
 // Layout
+export * from './layout/block-container';
+export * from './layout/block-header';
 export * from './layout/divider';
+export * from './layout/page-title';
 // Navigation
 export * from './navigation/bread-crumb';
 export * from './navigation/horizontal-tab';

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const BlockContainerBase = _ref => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
+  return _jsx("section", {
+    className: classNames('ncua-block-container', className),
+    ...rest,
+    children: children
+  });
+};
+BlockContainerBase.displayName = 'BlockContainer';
+const Body = _ref2 => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref2;
+  return _jsx("div", {
+    className: classNames('ncua-block-container__body', className),
+    ...rest,
+    children: children
+  });
+};
+Body.displayName = 'BlockContainer.Body';
+export const BlockContainer = Object.assign(BlockContainerBase, {
+  Body
+});

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

@@ -0,0 +1 @@
+export * from './BlockContainer';

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { Tooltip } from '../../overlays/tooltip/Tooltip';
+const ICON_SIZE = 24;
+const CollapsibleButton = _ref => {
+  let {
+    expanded,
+    onToggle
+  } = _ref;
+  return _jsx("button", {
+    type: "button",
+    className: "ncua-block-header__collapsible-btn",
+    onClick: onToggle,
+    "aria-expanded": expanded,
+    children: expanded ? _jsx(ChevronUp, {
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      color: "var(--gray-300)"
+    }) : _jsx(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 _jsxs("header", {
+    className: classNames('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: [_jsxs("div", {
+      className: "ncua-block-header__row",
+      children: [_jsxs("div", {
+        className: "ncua-block-header__title-area",
+        children: [_jsx("span", {
+          className: "ncua-block-header__title",
+          children: title
+        }), tooltip && _jsx(Tooltip, {
+          content: tooltip,
+          size: "sm",
+          position: "top",
+          hideArrow: true,
+          iconType: "fill"
+        }), badge && _jsx("span", {
+          className: "ncua-block-header__badge",
+          children: badge
+        })]
+      }), _jsxs("div", {
+        className: "ncua-block-header__action-area",
+        children: [showRequiredNotice && _jsxs("span", {
+          className: "ncua-block-header__required-notice",
+          children: [_jsx("span", {
+            className: "ncua-block-header__required-notice--red",
+            children: "* \uB294 \uD544\uC218 \uC785\uB825"
+          }), _jsx("span", {
+            className: "ncua-block-header__required-notice--gray",
+            children: " \uD56D\uBAA9\uC785\uB2C8\uB2E4."
+          })]
+        }), action, collapsible && _jsx(CollapsibleButton, {
+          ...collapsible
+        })]
+      })]
+    }), hasColumnLayout && _jsx("p", {
+      className: "ncua-block-header__description",
+      children: description
+    }), hasControlStrip && _jsx("div", {
+      className: "ncua-block-header__control-strip",
+      children: controlStrip
+    }), hasTabChildren && !isCollapsed && _jsx("div", {
+      className: "ncua-block-header__tabs",
+      children: children
+    })]
+  });
+};
+BlockHeader.displayName = 'BlockHeader';
+export { BlockHeader };

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Tooltip } from '../../overlays/tooltip/Tooltip';
+const SubTitle = _ref => {
+  let {
+    title,
+    size = 'sm',
+    tooltip,
+    description,
+    error,
+    action,
+    required = false,
+    className,
+    ...rest
+  } = _ref;
+  return _jsxs("div", {
+    className: classNames('ncua-sub-title', `ncua-sub-title--${size}`, className),
+    ...rest,
+    children: [_jsxs("div", {
+      className: "ncua-sub-title__title-row",
+      children: [_jsxs("div", {
+        className: "ncua-sub-title__title-area",
+        children: [required && _jsx("span", {
+          className: "ncua-sub-title__required-marker",
+          children: "*"
+        }), _jsx("span", {
+          className: "ncua-sub-title__title",
+          children: title
+        }), tooltip && _jsx(Tooltip, {
+          content: tooltip,
+          size: "sm",
+          position: "right",
+          hideArrow: true
+        })]
+      }), action && _jsx("div", {
+        className: "ncua-sub-title__action",
+        children: action
+      })]
+    }), description && _jsx("p", {
+      className: "ncua-sub-title__description",
+      children: description
+    }), error && _jsx("p", {
+      className: "ncua-sub-title__error",
+      children: error
+    })]
+  });
+};
+SubTitle.displayName = 'BlockHeader.SubTitle';
+export { SubTitle };

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

@@ -0,0 +1,2 @@
+export * from './BlockHeader';
+export * from './SubTitle';