@ncds/ui-admin 1.8.2 → 1.8.4

package/dist/temp/src/components/{input-base → forms-and-input/input-base}/InputBase.d.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
-import { COLOR } from '../../../constant/color';
-import type { Size } from '../../../constant/size';
-import type { SlotIconComponent } from '../../types/side-slot';
+import { COLOR } from '../../../../constant/color';
+import type { Size } from '../../../../constant/size';
+import type { SlotIconComponent } from '../../../types/side-slot';
 interface InputSideButtonSlot {
     type: 'button';
     label: string;

package/dist/temp/src/components/{input-base → forms-and-input/input-base}/InputBase.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckCircle, HelpCircle, InfoCircle, X } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { COLOR } from '../../../constant/color';
-import { HintText } from '../shared/hintText/HintText';
-import { Label } from '../shared/label/Label';
+import { COLOR } from '../../../../constant/color';
+import { HintText } from '../../shared/hintText/HintText';
+import { Label } from '../../shared/label/Label';
 const validationSvgSize = {
     xs: 14,
     sm: 16,

package/dist/temp/src/components/{number-input → forms-and-input/number-input}/NumberInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useRef } from 'react';
-import { useMergeRefs } from '../../hooks';
-import { ButtonStepper } from '../button';
+import { useMergeRefs } from '../../../hooks';
+import { ButtonStepper } from '../../action/button';
 import { InputBase } from '../input-base/InputBase';
 export const NumberInput = forwardRef(({ size = 'xs', minValue, maxValue, step = 1, stepperPosition, disabled, ...props }, ref) => {
     const inputRef = useRef(null);

package/dist/temp/src/components/{radio → forms-and-input/radio}/RadioInput.d.ts

@@ -1,5 +1,5 @@
 import { type ChangeEvent, type ComponentPropsWithRef } from 'react';
-import type { Size } from '../../../constant/size';
+import type { Size } from '../../../../constant/size';
 export interface RadioInputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'ref'> {
     size?: Extract<Size, 'xs' | 'sm'>;
     destructive?: boolean;

package/dist/temp/src/components/{range-date-picker-with-buttons → forms-and-input/range-date-picker-with-buttons}/RangeDatePickerWithButtons.d.ts

@@ -1,5 +1,5 @@
 import { type Dispatch, type SetStateAction } from 'react';
-import { PERIOD_ITEM, type PeriodItemMap } from '../../constant/date-picker';
+import { PERIOD_ITEM, type PeriodItemMap } from '../../../constant/date-picker';
 import { type RangeDatePickerProps } from '../range-date-picker/RangeDatePicker';
 type PeriodKeyType = keyof typeof PERIOD_ITEM;
 type RangeDatePickerWithButtonsProps<T extends PeriodItemMap = typeof PERIOD_ITEM> = {

package/dist/temp/src/components/{range-date-picker-with-buttons → forms-and-input/range-date-picker-with-buttons}/RangeDatePickerWithButtons.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { PERIOD_ITEM } from '../../constant/date-picker';
-import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
-import { ButtonGroup } from '../button-group';
+import { PERIOD_ITEM } from '../../../constant/date-picker';
+import { getDateFormat, getSubtractDate } from '../../../utils/date-picker';
+import { ButtonGroup } from '../../action/button-group';
 import { RangeDatePicker } from '../range-date-picker/RangeDatePicker';
 const RangeDatePickerWithButtons = ({ useYesterdayAsEndDate = false, size = 'xs', currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, periodItems, onDateValidation, }) => {
     const items = (periodItems ?? PERIOD_ITEM);

package/dist/temp/src/components/{select → forms-and-input/select}/Select.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import type { UseFormRegisterReturn } from 'react-hook-form';
-import type { Size } from '../../../constant/size';
-import type { OptionType } from '../../types/dropdown';
+import type { Size } from '../../../../constant/size';
+import type { OptionType } from '../../../types/dropdown';
 export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, 'size'> {
     placeholder?: string;
     disabledPlaceholder?: boolean;

package/dist/temp/src/components/{select → forms-and-input/select}/Select.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
-import { HintText } from '../shared/hintText/HintText';
+import { HintText } from '../../shared/hintText/HintText';
 export const Select = forwardRef(({ placeholder, disabledPlaceholder = false, id, className, hintText, children, size = 'xs', type = 'default', destructive = false, value, optionItems, register, disabled = false, ...props }, ref) => {
     return (_jsxs("span", { className: classNames('ncua-select', {
             destructive: destructive,

package/dist/temp/src/components/{select-box → forms-and-input/select-box}/SelectBox.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import type { UseFormRegisterReturn } from 'react-hook-form';
-import type { Size } from '../../../constant/size';
-import type { OptionChangeHandler, OptionType, OptionValue } from '../../types/dropdown';
+import type { Size } from '../../../../constant/size';
+import type { OptionChangeHandler, OptionType, OptionValue } from '../../../types/dropdown';
 declare const DEFAULT_MAX_HEIGHT = 275;
 type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> & {
     children?: ReactNode;

package/dist/temp/src/components/{select-box → forms-and-input/select-box}/SelectBox.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronDown } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { COLOR } from '../../../constant/color';
-import { useDropdown, useScrollLock } from '../../hooks/dropdown';
-import { useMultiSelect } from '../../utils/dropdown/multiSelect';
-import { SelectDropdown } from '../select-dropdown';
-import { HintText } from '../shared/hintText/HintText';
-import { Tag } from '../tag';
+import { COLOR } from '../../../../constant/color';
+import { useDropdown, useScrollLock } from '../../../hooks/dropdown';
+import { useMultiSelect } from '../../../utils/dropdown/multiSelect';
+import { Tag } from '../../feedback-and-status/tag';
+import { SelectDropdown } from '../../select-dropdown';
+import { HintText } from '../../shared/hintText/HintText';
 const ICON_SIZE_XS = 14;
 const ICON_SIZE_SM = 16;
 const DEFAULT_MAX_HEIGHT = 275;

package/dist/temp/src/components/{slider → forms-and-input/slider}/Slider.d.ts

@@ -1,4 +1,4 @@
-import { type SliderOptions } from '../../../assets/scripts/slider';
+import { type SliderOptions } from '../../../../assets/scripts/slider';
 export type SliderLabelPosition = SliderOptions['labelPosition'];
 export interface SliderProps {
     min?: number;

package/dist/temp/src/components/{slider → forms-and-input/slider}/Slider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { Slider as NcuaSlider } from '../../../assets/scripts/slider';
+import { Slider as NcuaSlider } from '../../../../assets/scripts/slider';
 export const Slider = ({ min = 0, max = 100, step = 1, value = 0, onChange, labelPosition, disabled = false, className, }) => {
     const containerRef = useRef(null);
     const sliderInstanceRef = useRef(null);

package/dist/{types/src/components → temp/src/components/forms-and-input}/switch/Switch.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode, type Ref } from 'react';
-import type { Size } from '../../../constant/size';
+import type { Size } from '../../../../constant/size';
 type SwitchOption = {
     label: ReactNode;
     value: string | boolean;

package/dist/{types/src/components → temp/src/components/forms-and-input}/textarea/Textarea.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithRef } from 'react';
-import type { Size } from '../../../constant/size';
+import type { Size } from '../../../../constant/size';
 interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
     className?: string;
     size?: Extract<Size, 'xs' | 'sm'>;

package/dist/temp/src/components/{textarea → forms-and-input/textarea}/Textarea.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { HintText } from '../shared/hintText/HintText';
-import { Label } from '../shared/label/Label';
+import { HintText } from '../../shared/hintText/HintText';
+import { Label } from '../../shared/label/Label';
 export const Textarea = forwardRef(({ className, size = 'xs', label, required, disabled, hintText, characterCount, destructive, ...props }, ref) => {
     const textareaRef = useRef(null);
     const [textCount, setTextCount] = useState(0);

package/dist/temp/src/components/{dot → image-and-icons/dot}/Dot.d.ts

@@ -1,6 +1,6 @@
 import { type HTMLAttributes } from 'react';
-import type { ColorTone } from '../../../constant/color';
-import type { Size } from '../../../constant/size';
+import type { ColorTone } from '../../../../constant/color';
+import type { Size } from '../../../../constant/size';
 type DotColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
 type DotSize = Extract<Size, 'sm' | 'md' | 'lg'>;
 interface DotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {

package/dist/temp/src/components/{featured-icon → image-and-icons/featured-icon}/FeaturedIcon.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef } from 'react';
-import type { SlotIconComponent } from '../../types/side-slot';
+import type { SlotIconComponent } from '../../../types/side-slot';
 type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
 type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';
 type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';

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

@@ -1,45 +1,48 @@
 export type { SideSlotType, SlotIconComponent } from '../types';
-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';
+export * from './action/button';
+export * from './action/button-group';
+export * from './data-display/data-grid';
+export * from './data-display/table';
+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';
+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';
+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';
+export * from './navigation/vertical-tab';
+export * from './overlays/dropdown';
+export * from './overlays/modal';
+export * from './overlays/notification';
+export * from './overlays/tooltip';
 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';

package/dist/temp/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';

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/temp/src/components/{horizontal-tab → navigation/horizontal-tab}/HorizontalTab.d.ts

@@ -1,4 +1,4 @@
-import { type TabButtonProps, type TabSize, type TabType } from '../tab/TabButton';
+import { type TabButtonProps, type TabSize, type TabType } from '../../tab/TabButton';
 type HorizontalTabProps = {
     type?: Exclude<TabType, 'line-vertical'>;
     size?: TabSize;

package/dist/temp/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 = ({ type = 'button-primary', size = 'sm', activeTab, fullWidth = false, menus = [], className, }) => {

package/dist/temp/src/components/{pagination → navigation/pagination}/NavButton.d.ts

@@ -1,4 +1,4 @@
-import type { SlotIconComponent } from '../../types/side-slot';
+import type { SlotIconComponent } from '../../../types/side-slot';
 declare const NAV_BUTTON_CONFIG: {
     readonly first: {
         readonly label: "처음";

package/dist/temp/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/temp/src/components/{vertical-tab → navigation/vertical-tab}/VerticalTab.d.ts

@@ -1,4 +1,4 @@
-import { type TabButtonProps } from '../tab/TabButton';
+import { type TabButtonProps } from '../../tab/TabButton';
 export type VerticalTabProps = {
     type?: 'button-primary' | 'button-white' | 'line-vertical';
     breakPoint?: 'mobile' | 'pc';

package/dist/temp/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 = ({ type = 'button-primary', breakPoint = 'pc', activeTab, menus, onSelect, }) => {
     const handleSelectChange = (e) => {
         onSelect?.(e.target.value);