@ncds/ui-admin 1.8.3 → 1.8.4

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/temp/src/components/index.d.ts

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

package/dist/temp/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/temp/src/components/layout/block-container/BlockContainer.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+interface BlockContainerProps extends ComponentPropsWithoutRef<'section'> {
+    children: ReactNode;
+    className?: string;
+}
+interface BlockContainerBodyProps extends ComponentPropsWithoutRef<'div'> {
+    children: ReactNode;
+    className?: string;
+}
+export declare const BlockContainer: {
+    ({ children, className, ...rest }: BlockContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Body: {
+        ({ children, className, ...rest }: BlockContainerBodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type { BlockContainerProps, BlockContainerBodyProps };

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const BlockContainerBase = ({ children, className, ...rest }) => {
+    return (_jsx("section", { className: classNames('ncua-block-container', className), ...rest, children: children }));
+};
+BlockContainerBase.displayName = 'BlockContainer';
+const Body = ({ children, className, ...rest }) => {
+    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/temp/src/components/layout/block-container/index.d.ts

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

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

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

package/dist/temp/src/components/layout/block-header/BlockHeader.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+interface BlockHeaderProps extends Omit<ComponentPropsWithoutRef<'header'>, 'title' | 'children'> {
+    title: ReactNode;
+    tooltip?: string;
+    action?: ReactNode;
+    showDivider?: boolean;
+    badge?: ReactNode;
+    description?: string;
+    collapsible?: {
+        expanded: boolean;
+        onToggle: () => void;
+    };
+    showRequiredNotice?: boolean;
+    controlStrip?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}
+declare const BlockHeader: {
+    ({ title, tooltip, action, showDivider, badge, description, collapsible, showRequiredNotice, controlStrip, children, className, ...rest }: BlockHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { BlockHeader };
+export type { BlockHeaderProps };

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

@@ -0,0 +1,21 @@
+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 = ({ expanded, onToggle }) => (_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 = ({ title, tooltip, action, showDivider = true, badge, description, collapsible, showRequiredNotice = false, controlStrip, children, className, ...rest }) => {
+    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/temp/src/components/layout/block-header/SubTitle.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { Size } from '../../../../constant/size';
+type SubTitleSize = 'middle' | Extract<Size, 'sm' | 'xs'>;
+interface SubTitleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    title: ReactNode;
+    size?: SubTitleSize;
+    tooltip?: string;
+    description?: string;
+    error?: string;
+    action?: ReactNode;
+    required?: boolean;
+    className?: string;
+}
+declare const SubTitle: {
+    ({ title, size, tooltip, description, error, action, required, className, ...rest }: SubTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SubTitle };
+export type { SubTitleProps, SubTitleSize };

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Tooltip } from '../../overlays/tooltip/Tooltip';
+const SubTitle = ({ title, size = 'sm', tooltip, description, error, action, required = false, className, ...rest }) => {
+    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/temp/src/components/layout/block-header/index.d.ts

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

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

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

package/dist/temp/src/components/layout/page-title/PageTitle.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+type PageTitleVariant = 'default' | 'detail' | 'fixed' | 'fixed-detail';
+interface PageTitleBreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface PageTitleProps extends ComponentPropsWithoutRef<'header'> {
+    title: string;
+    variant?: PageTitleVariant;
+    breadcrumbItems?: PageTitleBreadcrumbItem[];
+    onBack?: () => void;
+    guideButton?: ReactNode;
+    primaryAction?: ReactNode;
+    secondaryAction?: ReactNode;
+    className?: string;
+}
+declare const PageTitle: {
+    ({ title, variant, breadcrumbItems, onBack, guideButton, primaryAction, secondaryAction, className, ...rest }: PageTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { PageTitle };
+export type { PageTitleProps, PageTitleVariant, PageTitleBreadcrumbItem };

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

@@ -0,0 +1,19 @@
+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 = ({ title, variant = 'default', breadcrumbItems, onBack, guideButton, primaryAction, secondaryAction, className, ...rest }) => {
+    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/temp/src/components/layout/page-title/index.d.ts

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

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

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

package/dist/types/src/components/index.d.ts

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

package/dist/types/src/components/layout/block-container/BlockContainer.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+interface BlockContainerProps extends ComponentPropsWithoutRef<'section'> {
+    children: ReactNode;
+    className?: string;
+}
+interface BlockContainerBodyProps extends ComponentPropsWithoutRef<'div'> {
+    children: ReactNode;
+    className?: string;
+}
+export declare const BlockContainer: {
+    ({ children, className, ...rest }: BlockContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Body: {
+        ({ children, className, ...rest }: BlockContainerBodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type { BlockContainerProps, BlockContainerBodyProps };

package/dist/types/src/components/layout/block-container/index.d.ts

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

package/dist/types/src/components/layout/block-header/BlockHeader.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+interface BlockHeaderProps extends Omit<ComponentPropsWithoutRef<'header'>, 'title' | 'children'> {
+    title: ReactNode;
+    tooltip?: string;
+    action?: ReactNode;
+    showDivider?: boolean;
+    badge?: ReactNode;
+    description?: string;
+    collapsible?: {
+        expanded: boolean;
+        onToggle: () => void;
+    };
+    showRequiredNotice?: boolean;
+    controlStrip?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}
+declare const BlockHeader: {
+    ({ title, tooltip, action, showDivider, badge, description, collapsible, showRequiredNotice, controlStrip, children, className, ...rest }: BlockHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { BlockHeader };
+export type { BlockHeaderProps };

package/dist/types/src/components/layout/block-header/SubTitle.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { Size } from '../../../../constant/size';
+type SubTitleSize = 'middle' | Extract<Size, 'sm' | 'xs'>;
+interface SubTitleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    title: ReactNode;
+    size?: SubTitleSize;
+    tooltip?: string;
+    description?: string;
+    error?: string;
+    action?: ReactNode;
+    required?: boolean;
+    className?: string;
+}
+declare const SubTitle: {
+    ({ title, size, tooltip, description, error, action, required, className, ...rest }: SubTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SubTitle };
+export type { SubTitleProps, SubTitleSize };

package/dist/types/src/components/layout/block-header/index.d.ts

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

package/dist/types/src/components/layout/page-title/PageTitle.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+type PageTitleVariant = 'default' | 'detail' | 'fixed' | 'fixed-detail';
+interface PageTitleBreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface PageTitleProps extends ComponentPropsWithoutRef<'header'> {
+    title: string;
+    variant?: PageTitleVariant;
+    breadcrumbItems?: PageTitleBreadcrumbItem[];
+    onBack?: () => void;
+    guideButton?: ReactNode;
+    primaryAction?: ReactNode;
+    secondaryAction?: ReactNode;
+    className?: string;
+}
+declare const PageTitle: {
+    ({ title, variant, breadcrumbItems, onBack, guideButton, primaryAction, secondaryAction, className, ...rest }: PageTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { PageTitle };
+export type { PageTitleProps, PageTitleVariant, PageTitleBreadcrumbItem };

package/dist/types/src/components/layout/page-title/index.d.ts

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