@ncds/ui-admin 1.4.1 → 1.5.1

package/dist/esm/src/components/notification/Notification.js

@@ -20,20 +20,34 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { FloatingNotification } from './FloatingNotification';
 import { FullWidthNotification } from './FullWidthNotification';
+import { MessageNotification } from './MessageNotification';
 export var Notification = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.type,
     type = _b === void 0 ? 'floating' : _b,
     _c = _a.color,
     color = _c === void 0 ? 'neutral' : _c,
     rest = __rest(_a, ["type", "color"]);
-  return type === 'floating' ? _jsx(FloatingNotification, __assign({
-    color: color
-  }, rest, {
-    ref: ref
-  })) : _jsx(FullWidthNotification, __assign({
-    color: color
-  }, rest, {
-    ref: ref
-  }));
+  if (type === 'floating') {
+    return _jsx(FloatingNotification, __assign({
+      color: color
+    }, rest, {
+      ref: ref
+    }));
+  }
+  if (type === 'full-width') {
+    return _jsx(FullWidthNotification, __assign({
+      color: color
+    }, rest, {
+      ref: ref
+    }));
+  }
+  if (type === 'message') {
+    return _jsx(MessageNotification, __assign({
+      color: color
+    }, rest, {
+      ref: ref
+    }));
+  }
+  return null;
 });
 Notification.displayName = 'Notification';

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

@@ -1,3 +1,4 @@
 export * from './Notification';
 export * from './FloatingNotification';
-export * from './FullWidthNotification';
+export * from './FullWidthNotification';
+export * from './MessageNotification';

package/dist/esm/src/components/tooltip/Tooltip.js

@@ -9,7 +9,7 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HelpCircle, HelpCircleFill } from '@ncds/ui-admin-icon';
+import { AlertCircle, AlertCircleFill, HelpCircle, HelpCircleFill } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { useRef, useState, useCallback, useMemo } from 'react';
 import { ButtonCloseX } from '../button/ButtonCloseX';
@@ -67,22 +67,26 @@ export var Tooltip = function (_a) {
     hideArrow = _f === void 0 ? false : _f,
     _g = _a.type,
     type = _g === void 0 ? 'short' : _g,
+    _h = _a.iconColor,
+    iconColor = _h === void 0 ? 'var(--gray-300)' : _h,
+    _j = _a.iconStyle,
+    iconStyle = _j === void 0 ? 'help-circle' : _j,
     className = _a.className;
   var iconSize = size === 'sm' ? 14 : 16;
   var tooltipRef = useRef(null);
   var tooltipBgRef = useRef(null);
-  var _h = useState(position === 'auto' ? 'bottom' : position),
-    calculatedPosition = _h[0],
-    setCalculatedPosition = _h[1];
-  var _j = useState(false),
-    isVisible = _j[0],
-    setIsVisible = _j[1];
-  var _k = useState(false),
-    isManuallyClose = _k[0],
-    setIsManuallyClose = _k[1];
+  var _k = useState(position === 'auto' ? 'bottom' : position),
+    calculatedPosition = _k[0],
+    setCalculatedPosition = _k[1];
   var _l = useState(false),
-    isMeasuring = _l[0],
-    setIsMeasuring = _l[1];
+    isVisible = _l[0],
+    setIsVisible = _l[1];
+  var _m = useState(false),
+    isManuallyClose = _m[0],
+    setIsManuallyClose = _m[1];
+  var _o = useState(false),
+    isMeasuring = _o[0],
+    setIsMeasuring = _o[1];
   var handleMouseEnter = useCallback(function () {
     if (isManuallyClose) return;
     setIsVisible(true);
@@ -130,15 +134,23 @@ export var Tooltip = function (_a) {
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
   }, {
-    children: [iconType === 'stroke' ? _jsx(HelpCircle, {
+    children: [iconStyle === 'help-circle' && (iconType === 'stroke' ? _jsx(HelpCircle, {
       width: iconSize,
       height: iconSize,
-      color: "var(--gray-300)"
+      color: iconColor
     }) : _jsx(HelpCircleFill, {
       width: iconSize,
       height: iconSize,
-      color: "var(--gray-300)"
-    }), _jsxs("span", __assign({
+      color: iconColor
+    })), iconStyle === 'alert-circle' && (iconType === 'stroke' ? _jsx(AlertCircle, {
+      width: iconSize,
+      height: iconSize,
+      color: iconColor
+    }) : _jsx(AlertCircleFill, {
+      width: iconSize,
+      height: iconSize,
+      color: iconColor
+    })), _jsxs("span", __assign({
       ref: tooltipBgRef,
       className: tooltipBgClassName
     }, {
@@ -146,12 +158,11 @@ export var Tooltip = function (_a) {
         className: "ncua-tooltip__title"
       }, {
         children: title
-      })), content && _jsx("span", {
-        className: "ncua-tooltip__content",
-        dangerouslySetInnerHTML: {
-          __html: content
-        }
-      }), type === 'long' && _jsx(ButtonCloseX, {
+      })), content && _jsx("span", __assign({
+        className: "ncua-tooltip__content"
+      }, {
+        children: content
+      })), type === 'long' && _jsx(ButtonCloseX, {
         className: "ncua-tooltip__close-button",
         size: "xs",
         theme: tooltipType === 'white' ? 'dark' : 'light',

package/dist/types/assets/scripts/comboBox.d.ts

@@ -75,5 +75,17 @@ export declare class ComboBox {
     getSelectedCount(): number;
     isMultiple(): boolean;
     toggleSelectAll(): void;
+    /**
+     * 드롭다운을 스크롤의 바닥으로 이동
+     */
+    scrollToBottom(): void;
+    /**
+     * 전체 선택 버튼의 텍스트를 외부에서 변경
+     */
+    setSelectAllButtonText(text: string): void;
+    /**
+     * 특정 인덱스의 옵션으로 포커스 이동
+     */
+    setFocusIndex(index: number): void;
 }
 //# sourceMappingURL=comboBox.d.ts.map

package/dist/types/assets/scripts/datePicker.d.ts

@@ -46,6 +46,7 @@ export declare class DatePicker {
     private updateButtonsByPeriod;
     private calculateDatesFromButton;
     setDate(dates: string[]): void;
+    private convertFlatpickrFormatToMoment;
     getDates(): string[];
 }
 export {};

package/dist/types/assets/scripts/notification/MessageNotification.d.ts

@@ -0,0 +1,23 @@
+import type { BaseNotificationOptions } from './const';
+export interface MessageNotificationOptions extends BaseNotificationOptions {
+    type?: 'message';
+}
+export declare class MessageNotification {
+    private element;
+    private options;
+    private autoCloseTimer?;
+    private featuredIcon?;
+    constructor(options: MessageNotificationOptions);
+    private createElement;
+    private buildTemplate;
+    private renderHidePermanentlyButton;
+    private renderCloseButton;
+    private bindEvents;
+    private setupAutoClose;
+    getElement(): HTMLElement;
+    appendTo(parent: HTMLElement): void;
+    remove(): void;
+    destroy(): void;
+    static create(options: MessageNotificationOptions): MessageNotification;
+}
+//# sourceMappingURL=MessageNotification.d.ts.map

package/dist/types/assets/scripts/notification/Notification.d.ts

@@ -1,6 +1,6 @@
 import type { NotificationColor, BaseNotificationOptions } from './const';
 export interface NotificationOptions extends BaseNotificationOptions {
-    type?: 'full-width' | 'floating';
+    type?: 'full-width' | 'floating' | 'message';
 }
 export declare class Notification {
     private instance;

package/dist/types/assets/scripts/notification/const/classNames.d.ts

@@ -23,6 +23,20 @@ export declare const CLASS_NAMES: {
         readonly ACTIONS: "ncua-floating-notification__actions";
         readonly CLOSE_BUTTON: "ncua-floating-notification__close-button";
     };
+    readonly MESSAGE: {
+        readonly BASE: "ncua-message-notification";
+        readonly CONTAINER: "ncua-message-notification__container";
+        readonly CONTENT: "ncua-message-notification__content";
+        readonly CONTENT_WRAPPER: "ncua-message-notification__content-wrapper";
+        readonly ICON: "ncua-message-notification__icon";
+        readonly TEXT_CONTAINER: "ncua-message-notification__text-container";
+        readonly TITLE: "ncua-message-notification__title";
+        readonly SUPPORTING_TEXT: "ncua-message-notification__supporting-text";
+        readonly ACTIONS_CONTAINER: "ncua-message-notification__actions-container";
+        readonly ACTIONS: "ncua-message-notification__actions";
+        readonly HIDE_LINK: "ncua-message-notification__hide-link";
+        readonly CLOSE_BUTTON: "ncua-message-notification__close-button";
+    };
     readonly COMMON: {
         readonly ACTION_BUTTON: "ncua-notification__action-button";
     };

package/dist/types/assets/scripts/notification/const/index.d.ts

@@ -1,5 +1,6 @@
 export type { NotificationColor, NotificationHierarchy, NotificationAction, BaseNotificationOptions } from './types';
 export { SVG_ICONS, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP } from './icons';
 export { CLASS_NAMES } from './classNames';
-export { FEATURED_ICON_SIZES, ICON_PIXEL_SIZES, CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FULL_WIDTH_SIZES, getSizes, } from './sizes';
+export { FEATURED_ICON_SIZES, ICON_PIXEL_SIZES, CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FULL_WIDTH_SIZES, MESSAGE_SIZES, getSizes, } from './sizes';
+export { MESSAGE_CLOSE_ICON_COLORS } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/assets/scripts/notification/const/sizes.d.ts

@@ -19,6 +19,11 @@ export declare const FULL_WIDTH_SIZES: {
     readonly ICON: "16";
     readonly CLOSE_BUTTON: "20";
 };
+export declare const MESSAGE_SIZES: {
+    readonly FEATURED_ICON: "lg";
+    readonly ICON_PIXEL: "24";
+    readonly CLOSE_BUTTON: "20";
+};
 export declare const getSizes: {
     readonly featuredIcon: (isMobile: boolean) => "sm" | "md";
     readonly iconPixel: (isMobile: boolean) => "16" | "20";

package/dist/types/assets/scripts/notification/const/types.d.ts

@@ -16,4 +16,5 @@ export interface BaseNotificationOptions {
     supportTextLink?: string;
     onHidePermanently?: () => void;
 }
+export declare const MESSAGE_CLOSE_ICON_COLORS: Record<NotificationColor, string>;
 //# sourceMappingURL=types.d.ts.map

package/dist/types/assets/scripts/notification/index.d.ts

@@ -1,6 +1,7 @@
 export { Notification, type NotificationOptions } from './Notification';
 export { FullWidthNotification, type FullWidthNotificationOptions } from './FullWidthNotification';
 export { FloatingNotification, type FloatingNotificationOptions } from './FloatingNotification';
+export { MessageNotification, type MessageNotificationOptions } from './MessageNotification';
 export * from './utils';
 export type { NotificationColor, NotificationHierarchy, NotificationAction, BaseNotificationOptions } from './const';
 export { SVG_ICONS, CLASS_NAMES, ICON_MAP, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP } from './const';

package/dist/types/assets/scripts/utils/selectbox/DropdownModel.d.ts

@@ -114,6 +114,10 @@ export declare class DropdownModel {
      * 검색 및 필터링 업데이트 (SearchFilterUtils에서 이동)
      */
     updateSearchAndFilter(searchValue: string, showAllItems?: boolean): void;
+    /**
+     * 검색어만 업데이트 (필터링 없이, API 모드용)
+     */
+    updateSearchValue(searchValue: string): void;
     /**
      * 드롭다운이 열릴 수 있는지 확인 (ComboBox용)
      */

package/dist/types/assets/scripts/utils/selectbox/UnifiedSelectBox.d.ts

@@ -5,7 +5,7 @@ export interface UnifiedSelectBoxConfig {
     placeholder?: string;
     value?: OptionValue;
     onChange?: (value: OptionValue) => void;
-    onSearch?: (searchValue: string) => void;
+    onSearch?: (searchValue: string) => void | Promise<void>;
     onEdit?: () => void;
     onSelectAll?: () => void;
     onSearchAll?: () => void;
@@ -48,6 +48,10 @@ export declare class UnifiedSelectBox {
     private createSelectBoxUI;
     private createDropdown;
     private setupController;
+    /**
+     * 디바운싱 타이머 취소
+     */
+    private cancelDebounceTimer;
     private handleInput;
     private handleInputClick;
     private handleClearInput;
@@ -76,5 +80,20 @@ export declare class UnifiedSelectBox {
         modelState: any;
         isOpen: boolean;
     };
+    /**
+     * 드롭다운을 스크롤의 바닥으로 이동
+     * 전체 선택 시 추가 데이터 로드를 트리거하기 위해 사용
+     */
+    scrollToBottom(): void;
+    /**
+     * 전체 선택 버튼의 텍스트를 외부에서 변경
+     * @param text 버튼에 표시할 텍스트
+     */
+    setSelectAllButtonText(text: string): void;
+    /**
+     * 특정 인덱스의 옵션으로 포커스 이동
+     * @param index 포커스를 이동할 옵션의 인덱스
+     */
+    setFocusIndex(index: number): void;
 }
 //# sourceMappingURL=UnifiedSelectBox.d.ts.map

package/dist/types/src/components/button/ButtonGroup.d.ts

@@ -164,7 +164,7 @@ export declare const ButtonGroup: {
         onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
         onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
         onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
         onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
         onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
@@ -214,8 +214,6 @@ export declare const ButtonGroup: {
         onProgressCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
-        onResize?: React.ReactEventHandler<HTMLButtonElement> | undefined;
-        onResizeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeking?: React.ReactEventHandler<HTMLButtonElement> | undefined;

package/dist/types/src/components/button/ButtonStepper.d.ts

@@ -0,0 +1,10 @@
+import { Size } from '../../../constant/size';
+export type ButtonStepperProps = {
+    size: Extract<Size, 'xs' | 'sm'>;
+    direction: 'up' | 'down';
+    disabled?: boolean;
+    onClick?: () => void;
+    className?: string;
+};
+export declare const ButtonStepper: ({ size, direction, disabled, onClick, className }: ButtonStepperProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ButtonStepper.d.ts.map

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

@@ -1,3 +1,5 @@
 export * from './Button';
+export * from './ButtonCloseX';
 export * from './ButtonGroup';
+export * from './ButtonStepper';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/date-picker/DatePicker.d.ts

@@ -8,6 +8,7 @@ export type DatePickerProps = {
     datePickerOptions?: Options;
     destructive?: string;
     placeholder?: string;
+    isEndDate?: boolean;
     onChangeDate: (date: string) => void;
 } & Omit<DateTimePickerProps, 'size' | 'options' | 'value'>;
 export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<DateTimePickerHandle>>;

package/dist/types/src/components/date-picker/RangeDatePickerWithButtons.d.ts

@@ -1,14 +1,14 @@
-import { Dispatch, SetStateAction } from 'react';
+import { type Dispatch, type SetStateAction } from 'react';
 import { PERIOD_ITEM } from '../../constant/date-picker';
-import { RangeDatePickerProps } from './RangeDatePicker';
+import { type RangeDatePickerProps } from './RangeDatePicker';
 export type PeriodKeyType = keyof typeof PERIOD_ITEM;
 type RangeDatePickerWithButtonsProps = {
-    fixedEndDate?: string;
+    useYesterdayAsEndDate?: boolean;
     currentButtonId: PeriodKeyType;
     setCurrentButtonId: Dispatch<SetStateAction<PeriodKeyType>>;
     periodKeys: PeriodKeyType[];
     size?: 'xs' | 'sm';
 } & RangeDatePickerProps;
-export declare const RangeDatePickerWithButtons: ({ fixedEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, onDateValidation, }: RangeDatePickerWithButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RangeDatePickerWithButtons: ({ useYesterdayAsEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, onDateValidation, }: RangeDatePickerWithButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RangeDatePickerWithButtons.d.ts.map

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

@@ -28,4 +28,5 @@ export * from './tab';
 export * from './tag';
 export * from './toggle';
 export * from './tooltip';
+export * from './image-file-input';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/input/NumberInput.d.ts

@@ -0,0 +1,10 @@
+import { InputBaseProps } from './InputBase';
+type NumberInputProps = InputBaseProps & {
+    minValue?: number;
+    maxValue?: number;
+    step?: number;
+    stepperPosition?: 'leading' | 'trailing';
+};
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=NumberInput.d.ts.map

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

@@ -1,4 +1,5 @@
 export * from './InputBase';
+export * from './NumberInput';
 export * from './PasswordInput';
 export * from './Textarea';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/modal/Modal.d.ts

@@ -58,8 +58,8 @@ export type ModalHeaderProps = {
         theme: FeaturedIconTheme;
     };
     align?: ModalHeaderAlign;
-    title?: string;
-    subtitle?: string;
+    title?: string | ReactNode;
+    subtitle?: string | ReactNode;
     showDivider?: boolean;
     hideCloseButton?: boolean;
 };

package/dist/types/src/components/notification/MessageNotification.d.ts

@@ -0,0 +1,40 @@
+import { type IconName } from '@ncds/ui-admin-icon/dynamic';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { NotificationAction, NotificationColor } from './Notification';
+export interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * 알림 제목 텍스트
+     */
+    title: ReactNode;
+    /**
+     * 알림 본문 텍스트 (선택사항)
+     */
+    supportingText?: ReactNode;
+    /**
+     * 알림 아이콘 이름 (지정하지 않으면 color에 따라 기본 아이콘 사용)
+     */
+    icon?: IconName;
+    /**
+     * 알림 색상 스타일
+     * @default 'neutral'
+     */
+    color?: NotificationColor;
+    /**
+     * 닫기 버튼 클릭 이벤트 핸들러
+     */
+    onClose?: () => void;
+    /**
+     * 추가 CSS 클래스
+     */
+    className?: string;
+    /**
+     * 액션 버튼 영역 (선택사항)
+     */
+    actions?: NotificationAction[];
+    /**
+     * 다시보지 않기 이벤트 핸들러 (선택사항)
+     */
+    onHidePermanently?: () => void;
+}
+export declare const MessageNotification: import("react").ForwardRefExoticComponent<MessageNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=MessageNotification.d.ts.map

package/dist/types/src/components/notification/Notification.d.ts

@@ -2,7 +2,7 @@ import type { IconName } from '@ncds/ui-admin-icon/dynamic';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ColorTone } from '../../../constant/color';
 import { ButtonTheme } from '../button';
-export type NotificationType = 'floating' | 'full-width';
+export type NotificationType = 'floating' | 'full-width' | 'message';
 export type NotificationColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'info'>;
 export type NotificationSize = 'desktop' | 'mobile';
 export interface NotificationAction {
@@ -61,6 +61,11 @@ export interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
      * @default 0
      */
     autoClose?: number;
+    /**
+     * 다시보지 않기 이벤트 핸들러 (선택사항)
+     * message, full-width 타입에서 사용 가능
+     */
+    onHidePermanently?: () => void;
 }
 export declare const Notification: import("react").ForwardRefExoticComponent<NotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Notification.d.ts.map

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

@@ -1,4 +1,5 @@
 export * from './Notification';
 export * from './FloatingNotification';
 export * from './FullWidthNotification';
+export * from './MessageNotification';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/selectbox/SelectBox.d.ts

@@ -1,6 +1,6 @@
-import { Size } from '@ncds/ui-admin/constant/size';
 import { ComponentPropsWithRef, PropsWithChildren } from 'react';
 import { UseFormRegisterReturn } from 'react-hook-form';
+import { Size } from '../../../constant/size';
 import { OptionChangeHandler, OptionType, OptionValue } from '../../types/dropdown';
 export declare const DEFAULT_MAX_HEIGHT = 275;
 type BaseSelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'>;

package/dist/types/src/components/tooltip/Tooltip.d.ts

@@ -5,10 +5,12 @@ interface TooltipProps {
     size?: 'sm' | 'md';
     hideArrow?: boolean;
     title?: string;
-    content?: string;
+    content?: React.ReactNode;
     type?: 'long' | 'short';
     className?: string;
+    iconColor?: string;
+    iconStyle?: 'help-circle' | 'alert-circle';
 }
-export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, type, className, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, type, iconColor, iconStyle, className, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Tooltip.d.ts.map