@ncds/ui-admin 1.8.2 → 1.8.4

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

@@ -1,44 +1,56 @@
-export * from './badge';
-export * from './badge-group';
-export * from './bread-crumb';
-export * from './button';
-export * from './button-group';
-export * from './carousel-arrow';
-export * from './carousel-number-group';
-export * from './checkbox';
-export * from './combo-box';
-export * from './data-grid';
-export * from './date-picker';
-export * from './divider';
-export * from './dot';
-export * from './dropdown';
-export * from './empty-state';
-export * from './featured-icon';
-export * from './file-input';
-export * from './horizontal-tab';
-export * from './image-file-input';
-export * from './input-base';
-export * from './modal';
-export * from './notification';
-export * from './number-input';
-export * from './pagination';
-export * from './password-input';
-export * from './progress-bar';
-export * from './progress-circle';
-export * from './radio';
-export * from './range-date-picker';
-export * from './range-date-picker-with-buttons';
-export * from './select';
-export * from './select-box';
+// Action
+export * from './action/button';
+export * from './action/button-group';
+// Data Display
+export * from './data-display/data-grid';
+export * from './data-display/table';
+// Feedback & Status
+export * from './feedback-and-status/badge';
+export * from './feedback-and-status/badge-group';
+export * from './feedback-and-status/carousel-arrow';
+export * from './feedback-and-status/carousel-number-group';
+export * from './feedback-and-status/empty-state';
+export * from './feedback-and-status/progress-bar';
+export * from './feedback-and-status/progress-circle';
+export * from './feedback-and-status/spinner';
+export * from './feedback-and-status/tag';
+// Forms and Input
+export * from './forms-and-input/checkbox';
+export * from './forms-and-input/combo-box';
+export * from './forms-and-input/date-picker';
+export * from './forms-and-input/file-input';
+export * from './forms-and-input/image-file-input';
+export * from './forms-and-input/input-base';
+export * from './forms-and-input/number-input';
+export * from './forms-and-input/password-input';
+export * from './forms-and-input/radio';
+export * from './forms-and-input/range-date-picker';
+export * from './forms-and-input/range-date-picker-with-buttons';
+export * from './forms-and-input/select';
+export * from './forms-and-input/select-box';
+export * from './forms-and-input/slider';
+export * from './forms-and-input/switch';
+export * from './forms-and-input/textarea';
+export * from './forms-and-input/toggle';
+// Image and Icons
+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';
+export * from './navigation/pagination';
+export * from './navigation/vertical-tab';
+// Overlays
+export * from './overlays/dropdown';
+export * from './overlays/modal';
+export * from './overlays/notification';
+export * from './overlays/tooltip';
+// Shared
 export * from './select-dropdown';
 export * from './shared';
-export * from './slider';
-export * from './spinner';
-export * from './switch';
-export * from './tab';
-export * from './table';
-export * from './tag';
-export * from './textarea';
-export * from './toggle';
-export * from './tooltip';
-export * from './vertical-tab';
+export * from './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';

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { Fragment } from 'react';
+import { Button } from '../../action/button/Button';
+const renderBreadcrumb = items => _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
+  _jsx(Fragment, {
+    children: i < items.length - 1 ? _jsxs(_Fragment, {
+      children: [_jsx("span", {
+        className: "ncua-page-title__breadcrumb-item",
+        children: item.href ? _jsx("a", {
+          href: item.href,
+          children: item.label
+        }) : item.label
+      }), _jsx(ChevronRight, {
+        className: "ncua-page-title__breadcrumb-separator"
+      })]
+    }) : _jsx("span", {
+      className: "ncua-page-title__breadcrumb-current",
+      children: item.label
+    })
+  }, i))
+});
+const renderBackButton = onBack => _jsx(Button, {
+  label: "",
+  hierarchy: "secondary-gray",
+  size: "xs",
+  onlyIcon: true,
+  leadingIcon: {
+    type: 'icon',
+    icon: 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 _jsx("header", {
+    className: classNames('ncua-page-title', {
+      'ncua-page-title--fixed': isFixed
+    }, className),
+    ...rest,
+    children: _jsx("div", {
+      className: "ncua-page-title__page-header",
+      children: _jsxs("div", {
+        className: classNames('ncua-page-title__header', {
+          'ncua-page-title__header--has-breadcrumb': hasBreadcrumb
+        }),
+        children: [_jsxs("div", {
+          className: "ncua-page-title__container",
+          children: [hasBreadcrumb && renderBreadcrumb(breadcrumbItems), _jsxs("div", {
+            className: "ncua-page-title__title-row",
+            children: [isDetail && onBack && renderBackButton(onBack), _jsx("h1", {
+              className: "ncua-page-title__title",
+              children: title
+            }), guideButton && _jsx("div", {
+              className: "ncua-page-title__guide-btn",
+              children: guideButton
+            })]
+          })]
+        }), (secondaryAction || primaryAction) && _jsxs("div", {
+          className: "ncua-page-title__actions",
+          children: [secondaryAction, primaryAction]
+        })]
+      })
+    })
+  });
+};
+PageTitle.displayName = 'PageTitle';
+export { PageTitle };

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

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

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { uniqueId } from 'lodash-es';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { TabButton } from '../tab/TabButton';
+import { TabButton } from '../../tab/TabButton';
 const UNDERLINE_GAP = 16;
 const DEFAULT_GAP = 8;
 const HorizontalTab = _ref => {

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ArrowLeft, ArrowRight, ChevronLeft, ChevronLeftDouble, ChevronRight, ChevronRightDouble } from '@ncds/ui-admin-icon';
-import { Button } from '../button';
+import { Button } from '../../action/button';
 const ICON_SIZE_PC = 16;
 const ICON_SIZE_MOBILE = 20;
 const NAV_BUTTON_CONFIG = {

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { Select } from '../select/Select';
-import { TabButton } from '../tab/TabButton';
+import { Select } from '../../forms-and-input/select/Select';
+import { TabButton } from '../../tab/TabButton';
 export const VerticalTab = _ref => {
   let {
     type = 'button-primary',