@ncds/ui-admin 1.8.2 → 1.8.4

package/dist/esm/src/components/overlays/dropdown/utils.js

@@ -0,0 +1,86 @@
+/**
+ * 배열에서 fromId 위치의 요소를 toId 위치로 이동.
+ * id 중 하나라도 없으면 원본 그대로 반환. immutable.
+ */
+export function arrayMoveById(order, fromId, toId) {
+  const fromIndex = order.indexOf(fromId);
+  const toIndex = order.indexOf(toId);
+  if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
+    return order;
+  }
+  const next = [...order];
+  const [moved] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, moved);
+  return next;
+}
+/**
+ * fromId 요소를 toId 기준 edge('top'=직전, 'bottom'=직후)에 삽입.
+ * indicator 위치와 정확히 일치하는 reorder를 위해 사용.
+ */
+export function arrayReorderByEdge(order, fromId, toId, edge) {
+  if (fromId === toId) return order;
+  const fromIndex = order.indexOf(fromId);
+  const toIndex = order.indexOf(toId);
+  if (fromIndex === -1 || toIndex === -1) return order;
+  const next = [...order];
+  next.splice(fromIndex, 1);
+  // 목표 인덱스 재계산 (제거로 인해 toIndex가 한 칸 당겨질 수 있음)
+  const adjustedToIndex = fromIndex < toIndex ? toIndex - 1 : toIndex;
+  const insertIndex = edge === 'bottom' ? adjustedToIndex + 1 : adjustedToIndex;
+  next.splice(insertIndex, 0, fromId);
+  return next;
+}
+/**
+ * groups를 받아 초기 draft state를 만든다.
+ * - order: 모든 그룹·아이템의 id를 순서대로 평탄화
+ * - visibility: item.visible (undefined면 true)
+ */
+export function initDraftState(groups) {
+  const order = [];
+  const visibility = {};
+  for (const group of groups) {
+    for (const item of group.items) {
+      order.push(item.id);
+      visibility[item.id] = item.visible ?? true;
+    }
+  }
+  return {
+    order,
+    visibility
+  };
+}
+/**
+ * 모든 그룹의 items를 평탄화하고, draft.order 순서로 재배열.
+ * 각 item의 visible은 원래 visible이 정의되어 있던 경우에만 draft.visibility 값으로 갱신.
+ * 그 외 필드는 props 원본 그대로 보존.
+ */
+export function applyDraftToItems(groups, draft) {
+  const itemsById = new Map();
+  for (const group of groups) {
+    for (const item of group.items) {
+      itemsById.set(item.id, item);
+    }
+  }
+  return draft.order.map(id => itemsById.get(id)).filter(item => item !== undefined).map(item => {
+    if (item.visible === undefined) return item;
+    return {
+      ...item,
+      visible: draft.visibility[item.id]
+    };
+  });
+}
+/**
+ * draft가 original과 비교해 변경되었는지 판단.
+ * order 배열 또는 visibility 객체 중 하나라도 다르면 true.
+ */
+export function hasDraftChanged(original, draft) {
+  if (original.order.length !== draft.order.length) return true;
+  for (let i = 0; i < original.order.length; i++) {
+    if (original.order[i] !== draft.order[i]) return true;
+  }
+  const keys = new Set([...Object.keys(original.visibility), ...Object.keys(draft.visibility)]);
+  for (const key of keys) {
+    if (original.visibility[key] !== draft.visibility[key]) return true;
+  }
+  return false;
+}

package/dist/esm/src/components/{modal → overlays/modal}/Modal.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import classnames from 'classnames';
 import { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { ButtonCloseX } from '../button/ButtonCloseX';
-import { FeaturedIcon } from '../featured-icon';
+import { ButtonCloseX } from '../../action/button/ButtonCloseX';
+import { FeaturedIcon } from '../../image-and-icons/featured-icon';
 const Modal = _ref => {
   let {
     isOpen,

package/dist/esm/src/components/{notification → overlays/notification}/FloatingNotification.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircle, AlertTriangle, CheckCircle, Pin02 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { MEDIA_QUERY } from '../../constant/breakpoint';
-import { useMediaQuery } from '../../hooks/useMediaQuery';
-import { Button } from '../button';
-import { ButtonCloseX } from '../button/ButtonCloseX';
-import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
+import { MEDIA_QUERY } from '../../../constant/breakpoint';
+import { useMediaQuery } from '../../../hooks/useMediaQuery';
+import { Button } from '../../action/button';
+import { ButtonCloseX } from '../../action/button/ButtonCloseX';
+import { FeaturedIcon } from '../../image-and-icons/featured-icon/FeaturedIcon';
 const iconMap = {
   neutral: Pin02,
   error: AlertTriangle,

package/dist/esm/src/components/{notification → overlays/notification}/FullWidthNotification.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertTriangle, CheckCircle, InfoCircle, MessageChatSquare, XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { COLOR } from '../../../constant/color';
+import { COLOR } from '../../../../constant/color';
 const iconMap = {
   neutral: MessageChatSquare,
   error: AlertTriangle,

package/dist/esm/src/components/{notification → overlays/notification}/MessageNotification.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircle, AlertTriangle, CheckCircle, Pin02, XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
-import { COLOR } from '../../../constant/color';
-import { Button } from '../button';
-import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
+import { COLOR } from '../../../../constant/color';
+import { Button } from '../../action/button';
+import { FeaturedIcon } from '../../image-and-icons/featured-icon/FeaturedIcon';
 const iconMap = {
   neutral: Pin02,
   error: AlertTriangle,

package/dist/esm/src/components/{tooltip → overlays/tooltip}/Tooltip.js

@@ -3,7 +3,7 @@ import { AlertCircle, AlertCircleFill, HelpCircle, HelpCircleFill } from '@ncds/
 import classNames from 'classnames';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { ButtonCloseX } from '../button/ButtonCloseX';
+import { ButtonCloseX } from '../../action/button/ButtonCloseX';
 const ICON_SIZE_SM = 14;
 const ICON_SIZE_DEFAULT = 16;
 // HTML 구현체(assets/scripts/tooltip)와 동일한 상수

package/dist/esm/src/components/select-dropdown/SelectDropdown.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 { Button } from '../button';
+import { Button } from '../action/button';
 const SelectDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     isOpen,

package/dist/esm/src/components/tab/TabButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { Badge } from '../badge/Badge';
+import { Badge } from '../feedback-and-status/badge/Badge';
 const TabButton = _ref => {
   let {
     id,

package/dist/esm/vitest.config.js

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vitest/config';
 export default defineConfig({
   test: {
-    include: ['scripts/**/__tests__/**/*.test.ts'],
+    include: ['scripts/**/__tests__/**/*.test.ts', 'src/**/__tests__/**/*.test.ts', 'assets/scripts/**/__tests__/**/*.test.ts'],
     environment: 'node'
   }
 });

package/dist/temp/assets/scripts/slider.js

@@ -1,3 +1,7 @@
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const DEFAULT_STEP = 1;
+const PERCENT = 100;
 export class Slider {
     constructor(element, options) {
         this.activeHandle = null;
@@ -40,17 +44,19 @@ export class Slider {
             this.isDragging = false;
         };
         this.element = element;
-        this.options = Object.assign({
-            min: 0,
-            max: 100,
-            step: 1,
-            value: 0,
-            disabled: false,
-        }, options);
+        // 화이트리스트 기반 옵션 복사. SliderOptions에 정의된 키만 받아들여
+        // __proto__, constructor, prototype 같은 위험 키가 외부 입력으로 들어와도
+        // Object.prototype을 오염시킬 수 없다 (CWE-1321 Prototype Pollution 차단).
+        this.options = {
+            min: Number(options.min ?? DEFAULT_MIN),
+            max: Number(options.max ?? DEFAULT_MAX),
+            step: Number(options.step ?? DEFAULT_STEP),
+            value: options.value ?? DEFAULT_MIN,
+            onChange: options.onChange,
+            labelPosition: options.labelPosition,
+            disabled: options.disabled ?? false,
+        };
         this.value = this.options.value;
-        this.options.min = Number(this.options.min);
-        this.options.max = Number(this.options.max);
-        this.options.step = Number(this.options.step);
         this.init();
     }
     init() {
@@ -105,19 +111,20 @@ export class Slider {
         });
         if (this.options.labelPosition === 'bottom') {
             const label = document.createElement('div');
-            label.className = `ncua-slider__label`;
+            label.className = 'ncua-slider__label';
             label.textContent = `${value}%`;
             handle.appendChild(label);
         }
         if (this.options.labelPosition === 'top-floating') {
             const label = document.createElement('div');
-            label.className = `ncua-slider__label ncua-slider__label--tooltip`;
+            label.className = 'ncua-slider__label ncua-slider__label--tooltip';
             label.textContent = `${value}%`;
             handle.appendChild(label);
         }
         this.element.appendChild(handle);
         this.handleElements[index] = handle;
     }
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 단일/range 분기와 라벨/progress 업데이트를 한 함수에 묶는 기존 구조 유지. 분리 리팩토링은 별도 작업 범위.
     updateHandlePositions() {
         if (Array.isArray(this.value)) {
             // Range slider
@@ -181,14 +188,15 @@ export class Slider {
         }
     }
     getPositionFromValue(value) {
-        return ((value - this.options.min) / (this.options.max - this.options.min)) * 100;
+        return ((value - this.options.min) / (this.options.max - this.options.min)) * PERCENT;
     }
     getValueFromPosition(position) {
-        const percentage = Math.min(Math.max(position, 0), 100);
-        const exactValue = this.options.min + (percentage / 100) * (this.options.max - this.options.min);
+        const percentage = Math.min(Math.max(position, 0), PERCENT);
+        const exactValue = this.options.min + (percentage / PERCENT) * (this.options.max - this.options.min);
         const steppedValue = Math.round(exactValue / this.options.step) * this.options.step;
         return Math.min(Math.max(steppedValue, this.options.min), this.options.max);
     }
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 핸들/트랙 클릭 분기와 가까운 핸들 결정 로직을 한 함수에 묶는 기존 구조 유지. 분리 리팩토링은 별도 작업 범위.
     handleInteractionStart(clientX, target) {
         // 슬라이더 영역 내부를 클릭/터치한 경우
         if (target.closest('.ncua-slider')) {
@@ -202,13 +210,13 @@ export class Slider {
                     this.activeHandle = 1;
                 }
                 else {
-                    this.activeHandle = parseInt(handleElement.dataset.index || '0', 10);
+                    this.activeHandle = Number.parseInt(handleElement.dataset.index || '0', 10);
                 }
             }
             else {
                 // 슬라이더 트랙을 클릭/터치한 경우, 가장 가까운 핸들을 결정
                 const rect = this.element.getBoundingClientRect();
-                const position = ((clientX - rect.left) / rect.width) * 100;
+                const position = ((clientX - rect.left) / rect.width) * PERCENT;
                 if (Array.isArray(this.value)) {
                     const [leftValue, rightValue] = this.value;
                     const leftPosition = this.getPositionFromValue(leftValue);
@@ -237,7 +245,7 @@ export class Slider {
         if (!this.element || this.activeHandle === null)
             return;
         const rect = this.element.getBoundingClientRect();
-        const position = ((clientX - rect.left) / rect.width) * 100;
+        const position = ((clientX - rect.left) / rect.width) * PERCENT;
         const newValue = this.getValueFromPosition(position);
         const prevValue = this.value;
         if (Array.isArray(this.value)) {

package/dist/{types/src/components → temp/src/components/action}/button/Button.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentProps, type ReactNode } from 'react';
-import type { Size } from '../../../constant/size';
-import type { SideSlotType } from '../../types/side-slot';
-import { type DotProps } from '../dot';
+import type { Size } from '../../../../constant/size';
+import type { SideSlotType } from '../../../types/side-slot';
+import { type DotProps } from '../../image-and-icons/dot';
 export type ButtonProps = Omit<ComponentProps<'button'>, 'ref'> & {
     label: ReactNode;
     className?: string;

package/dist/temp/src/components/{button → action/button}/Button.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classnames from 'classnames';
 import { createElement, forwardRef } from 'react';
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot';
 export const svgSize = {
     xxs: 12,
     xs: 14,

package/dist/{types/src/components → temp/src/components/action}/button/ButtonCloseX.d.ts

@@ -1,4 +1,4 @@
-import type { Size } from '../../../constant/size';
+import type { Size } from '../../../../constant/size';
 type ButtonCloseXProps = {
     size: Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
     theme?: 'dark' | 'light';

package/dist/{types/src/components → temp/src/components/action}/button/ButtonStepper.d.ts

@@ -1,4 +1,4 @@
-import type { Size } from '../../../constant/size';
+import type { Size } from '../../../../constant/size';
 export type ButtonStepperProps = {
     size: Extract<Size, 'xs' | 'sm'>;
     direction: 'up' | 'down';

package/dist/{types/src/components → temp/src/components/action}/button-group/ButtonGroup.d.ts

@@ -1,6 +1,6 @@
 import React, { type ComponentProps } from 'react';
-import type { Size } from '../../../constant/size';
-import type { SideSlotType } from '../../types/side-slot';
+import type { Size } from '../../../../constant/size';
+import type { SideSlotType } from '../../../types/side-slot';
 type ButtonGroupSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
 interface SideCommon {
     position?: 'leading' | 'trailing';

package/dist/temp/src/components/{button-group → action/button-group}/ButtonGroup.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import React, { createElement } from 'react';
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot';
 const svgSize = {
     xxs: 12,
     xs: 16,

package/dist/temp/src/components/{badge → feedback-and-status/badge}/Badge.d.ts

@@ -1,6 +1,6 @@
-import type { ColorTone } from '../../../constant/color';
-import type { Size } from '../../../constant/size';
-import type { SideSlotType } from '../../types/side-slot';
+import type { ColorTone } from '../../../../constant/color';
+import type { Size } from '../../../../constant/size';
+import type { SideSlotType } from '../../../types/side-slot';
 type BadgeType = 'pill-outline' | 'pill-dark-color';
 type BadgeColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
 type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md'>;

package/dist/temp/src/components/{badge → feedback-and-status/badge}/utils.d.ts

@@ -1,4 +1,4 @@
-import type { SideSlotType } from '../../types/side-slot';
+import type { SideSlotType } from '../../../types/side-slot';
 type SideSlotRenderProps = {
     slot: SideSlotType;
     defaultIconSize: number;

package/dist/temp/src/components/{badge → feedback-and-status/badge}/utils.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot/Dot';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot/Dot';
 const DEFAULT_DOT_COLOR = 'neutral';
 const sideSlotRender = ({ slot, defaultIconSize }) => {
     if (slot.type === 'icon') {

package/dist/temp/src/components/{badge-group → feedback-and-status/badge-group}/BadgeGroup.d.ts

@@ -1,6 +1,6 @@
-import type { ColorTone } from '../../../constant/color';
-import type { Size } from '../../../constant/size';
-import type { SideSlotType } from '../../types/side-slot';
+import type { ColorTone } from '../../../../constant/color';
+import type { Size } from '../../../../constant/size';
+import type { SideSlotType } from '../../../types/side-slot';
 import { type BadgeProps } from '../badge';
 type BadgeGroupSize = Extract<Size, 'xs' | 'sm'>;
 type BadgeGroupColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success'>;

package/dist/{types/src/components → temp/src/components/feedback-and-status}/empty-state/EmptyState.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonProps } from '../button/Button';
+import { type ButtonProps } from '../../action/button/Button';
 export interface ButtonOptions extends Pick<ButtonProps, 'hierarchy' | 'size' | 'leadingIcon' | 'trailingIcon'> {
     label: string;
     onClick?: () => void;

package/dist/temp/src/components/{empty-state → feedback-and-status/empty-state}/EmptyState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../button/Button';
+import { Button } from '../../action/button/Button';
 export const EmptyState = ({ title, description, buttons }) => {
     const emptyStateButtons = buttons ? (Array.isArray(buttons) ? buttons : [buttons]) : [];
     return (_jsxs("div", { className: "ncua-empty-state", children: [_jsx("p", { className: "ncua-empty-state__title", children: title }), _jsx("span", { className: "ncua-empty-state__description", children: description }), emptyStateButtons.length > 0 && (_jsx("div", { className: "ncua-empty-state__button-group", children: emptyStateButtons.map(({ size, label, ...rest }) => (_jsx(Button, { size: size ?? 'xs', label: label, ...rest }, label))) }))] }));

package/dist/temp/src/components/{tag → feedback-and-status/tag}/Tag.d.ts

@@ -1,6 +1,6 @@
 import { type MouseEventHandler } from 'react';
-import type { Size } from '../../../constant/size';
-import type { SideSlotType } from '../../types/side-slot';
+import type { Size } from '../../../../constant/size';
+import type { SideSlotType } from '../../../types/side-slot';
 export interface TagProps {
     size?: Extract<Size, 'sm' | 'md'>;
     icon?: SideSlotType;

package/dist/temp/src/components/{tag → feedback-and-status/tag}/Tag.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { useCallback, useRef, useState } from 'react';
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot';
 const MARGIN = 10;
 const DEFAULT_TOOLTIP_WIDTH = 200;
 const DEFAULT_TOOLTIP_HEIGHT = 60;

package/dist/{types/src/components → temp/src/components/forms-and-input}/checkbox/CheckboxInput.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 CheckboxInputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'ref'> {
     size?: Extract<Size, 'xs' | 'sm'>;
     indeterminate?: boolean;

package/dist/temp/src/components/{combo-box → forms-and-input/combo-box}/ComboBox.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 defaultMaxHeight = 275;
 interface ComboBoxProps extends Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> {
     children?: ReactNode;

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

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronSelectorVertical, SearchLg } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { useDropdown } from '../../hooks/dropdown';
-import { useMultiSelect } from '../../utils/dropdown/multiSelect';
-import { Button } from '../button';
+import { useDropdown } from '../../../hooks/dropdown';
+import { useMultiSelect } from '../../../utils/dropdown/multiSelect';
+import { Button } from '../../action/button';
+import { Tag } from '../../feedback-and-status/tag';
+import { SelectDropdown } from '../../select-dropdown';
+import { HintText } from '../../shared/hintText/HintText';
 import { InputBase } from '../input-base/InputBase';
-import { SelectDropdown } from '../select-dropdown';
-import { HintText } from '../shared/hintText/HintText';
-import { Tag } from '../tag';
 const defaultMaxHeight = 275;
 const toggleMultiSelectValue = (currentValue, optionId) => {
     const currentValues = Array.isArray(currentValue) ? currentValue : [];

package/dist/temp/src/components/{date-picker → forms-and-input/date-picker}/CustomInput.d.ts

@@ -1,5 +1,5 @@
 import { type InputHTMLAttributes } from 'react';
-import type { Size } from '../../../constant/size';
+import type { Size } from '../../../../constant/size';
 interface CustomInputProps extends InputHTMLAttributes<HTMLInputElement> {
     disabled: boolean;
     iconName: 'calendar' | 'clock';

package/dist/{types/src/components → temp/src/components/forms-and-input}/date-picker/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import type { DateOption, Options } from 'flatpickr/dist/types/options';
 import { type DateTimePickerHandle, type DateTimePickerProps } from 'react-flatpickr';
-import type { Size } from '../../../constant/size';
+import type { Size } from '../../../../constant/size';
 export type DatePickerProps = {
     size?: Extract<Size, 'xs' | 'sm'>;
     shouldFocus?: boolean;

package/dist/temp/src/components/{date-picker → forms-and-input/date-picker}/DatePicker.js

@@ -4,14 +4,14 @@ import { Korean } from 'flatpickr/dist/l10n/ko';
 import moment from 'moment';
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
 import Flatpickr from 'react-flatpickr';
-import { formatDateInput, formatHourInput, formatMinuteInput } from '../../utils/date-picker';
+import { formatDateInput, formatHourInput, formatMinuteInput } from '../../../utils/date-picker';
 import { CustomInput } from './CustomInput';
 // ══════════════════════════════════════════
 // 유틸리티 함수
 // ══════════════════════════════════════════
 const isValidDate = (dateString) => {
     const date = new Date(dateString);
-    return date instanceof Date && !isNaN(date.getTime());
+    return date instanceof Date && !Number.isNaN(date.getTime());
 };
 /** input의 스크롤 가능한 부모 요소들을 수집 */
 const collectScrollParents = (element) => {
@@ -35,11 +35,11 @@ const getOpenCalendar = (instance, input, isPortal) => {
 };
 /** selectedDate가 유효하지 않으면 이전 날짜로 복원하고 true 반환 */
 const restoreIfInvalidDate = (date, instance) => {
-    if (date && date instanceof Date && !isNaN(date.getTime())) {
+    if (date && date instanceof Date && !Number.isNaN(date.getTime())) {
         return false;
     }
     const previousDate = instance._previousDateBeforeInput;
-    if (previousDate && previousDate instanceof Date && !isNaN(previousDate.getTime())) {
+    if (previousDate && previousDate instanceof Date && !Number.isNaN(previousDate.getTime())) {
         instance.selectedDates = [previousDate];
         instance.setDate(previousDate, false);
     }
@@ -259,7 +259,7 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
     const restorePreviousDate = (target, instance) => {
         if (instance.selectedDates.length > 0) {
             const prevDate = instance.selectedDates[0];
-            if (prevDate instanceof Date && !isNaN(prevDate.getTime())) {
+            if (prevDate instanceof Date && !Number.isNaN(prevDate.getTime())) {
                 const momentFormat = dateFormatRef.current.replace(/Y/g, 'YYYY').replace(/m/g, 'MM').replace(/d/g, 'DD');
                 target.value = moment(prevDate).format(momentFormat);
                 instance.setDate(prevDate, false);
@@ -284,7 +284,7 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
         const violations = checkDateViolations(selectedDate, minDate, maxDate);
         if (violations.length > 0 && onValidationErrorRef.current) {
             const prevDate = instance?.selectedDates?.[0];
-            const validPrevDate = prevDate instanceof Date && !isNaN(prevDate.getTime()) ? prevDate : undefined;
+            const validPrevDate = prevDate instanceof Date && !Number.isNaN(prevDate.getTime()) ? prevDate : undefined;
             onValidationErrorRef.current({
                 date: selectedDate,
                 minDate,
@@ -297,7 +297,7 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
         instance._previousDateBeforeInput = selectedDate;
         const formattedDate = formatDateInput(dateStr);
         isValidDate(formattedDate) ? onChangeDateRef.current(formattedDate) : onChangeDateRef.current(dateStr);
-    }, []);
+    }, [checkDateViolations, restorePreviousDate]);
     /** input에 직접 타이핑할 때 날짜 형식 자동 변환 및 유효성 검사 */
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const onInputHandler = useCallback((e) => {
@@ -333,7 +333,7 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
         if (violations.length > 0) {
             return;
         }
-    }, []);
+    }, [checkDateViolations, restorePreviousDate]);
     /** 시간 입력 필드 - 시(hour) 값 포맷팅 (0~23) */
     const onHourInputHandler = useCallback((e) => {
         const target = e.target;
@@ -360,7 +360,7 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
     // 주의: JSON.stringify는 함수를 무시하고 Date를 문자열로 변환하므로,
     // datePickerOptions에 함수나 Date 객체를 넘기면 변경 감지가 누락될 수 있음
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const datePickerOptionsKey = JSON.stringify(datePickerOptions);
+    const _datePickerOptionsKey = JSON.stringify(datePickerOptions);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const options = useMemo(() => ({
         mode: 'single',
@@ -375,7 +375,7 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
         /** flatpickr 기본 포맷 대신 moment를 사용하여 한국어 날짜 형식 지원 */
         formatDate: (date, format, _locale) => {
             try {
-                if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+                if (!date || !(date instanceof Date) || Number.isNaN(date.getTime())) {
                     return '';
                 }
                 const momentDate = moment(date);
@@ -452,15 +452,16 @@ export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size =
             cleanupPositioning(instance);
         },
         ...datePickerOptions,
+        // 어드민 환경 — 모바일에서 native picker 로 fallback 되지 않도록 강제 (datePickerOptions 로 override 불가)
+        disableMobile: true,
     }), [
         portal,
-        size,
-        hasTimeOption,
-        datePickerOptionsKey,
         onChangeDateHandler,
         onInputHandler,
         onHourInputHandler,
         onMinuteInputHandler,
+        datePickerOptions,
+        getPortalContainer,
     ]);
     const iconName = hasTimeOption && datePickerOptions && Object.hasOwn(datePickerOptions, 'noCalendar') ? 'clock' : 'calendar';
     // ──────────────────────────────────────────────

package/dist/temp/src/components/{file-input → forms-and-input/file-input}/FileInput.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { Button } from '../button';
-import { HintText, Label } from '../shared';
-import { Tag } from '../tag/Tag';
+import { Button } from '../../action/button';
+import { Tag } from '../../feedback-and-status/tag/Tag';
+import { HintText, Label } from '../../shared';
 export var FileInputErrorType;
 (function (FileInputErrorType) {
     FileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";

package/dist/temp/src/components/{image-file-input → forms-and-input/image-file-input}/ImageFileInput.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Button } from '../button';
+import { Button } from '../../action/button';
+import { Tooltip } from '../../overlays/tooltip';
+import { HintText, Label } from '../../shared';
 import { FileInputErrorType as ImageFileInputErrorType } from '../file-input/FileInput';
-import { HintText, Label } from '../shared';
-import { Tooltip } from '../tooltip';
 import { ImagePreview } from './components/ImagePreview';
 export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = false, maxFileSize, maxFileCount, value, onChange, onFileSelect, onFail, buttonLabel = '파일 찾기', imagePreviewTooltipLabel = '이미지 업로드', disabled, label, hintItems, validation, destructive, isRequired, showHelpIcon, hintText, showFileTagList = true, showHintText = true, showFileInput = true, ...props }, ref) => {
     const fileInputRef = useRef(null);

package/dist/temp/src/components/{image-file-input → forms-and-input/image-file-input}/components/ImagePreview.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Trash03 } from '@ncds/ui-admin-icon';
-import { Button } from '../../button';
+import { Button } from '../../../action/button';
 export const ImagePreview = ({ file, onRemove }) => {
     return (_jsxs("div", { className: "ncua-image-file-input__preview-container", children: [_jsx("img", { className: "ncua-image-file-input__preview-image", src: URL.createObjectURL(file), alt: file.name }), _jsx(Button, { size: "sm", hierarchy: "text", onlyIcon: true, leadingIcon: { type: 'icon', icon: Trash03, color: 'gray200' }, label: "Remove image", onClick: onRemove, className: "ncua-image-file-input__preview-remove-button" })] }));
 };