@ncds/ui-admin 1.8.1 → 1.8.3

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

@@ -0,0 +1,500 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+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 { CustomInput } from './CustomInput';
+// ══════════════════════════════════════════
+// 유틸리티 함수
+// ══════════════════════════════════════════
+const isValidDate = (dateString) => {
+    const date = new Date(dateString);
+    return date instanceof Date && !Number.isNaN(date.getTime());
+};
+/** input의 스크롤 가능한 부모 요소들을 수집 */
+const collectScrollParents = (element) => {
+    const parents = [];
+    let parentEl = element.parentElement;
+    while (parentEl) {
+        const { overflow, overflowY } = getComputedStyle(parentEl);
+        if (overflow !== 'visible' || overflowY !== 'visible') {
+            parents.push(parentEl);
+        }
+        parentEl = parentEl.parentElement;
+    }
+    return parents;
+};
+/** 현재 열려있는 flatpickr 캘린더 요소를 반환 */
+const getOpenCalendar = (instance, input, isPortal) => {
+    if (isPortal) {
+        return instance.calendarContainer?.classList.contains('open') ? instance.calendarContainer : null;
+    }
+    return input.parentElement?.querySelector('.flatpickr-calendar.open') ?? null;
+};
+/** selectedDate가 유효하지 않으면 이전 날짜로 복원하고 true 반환 */
+const restoreIfInvalidDate = (date, instance) => {
+    if (date && date instanceof Date && !Number.isNaN(date.getTime())) {
+        return false;
+    }
+    const previousDate = instance._previousDateBeforeInput;
+    if (previousDate && previousDate instanceof Date && !Number.isNaN(previousDate.getTime())) {
+        instance.selectedDates = [previousDate];
+        instance.setDate(previousDate, false);
+    }
+    else if (instance.input) {
+        instance.input.value = '';
+        instance.setDate('', false);
+    }
+    return true;
+};
+/** 시간 전용 모드의 기본값 반환 */
+const getTimeOnlyDefault = (hasSeconds, isEndDate) => {
+    const endTime = hasSeconds ? '23:59:59' : '23:59';
+    const startTime = hasSeconds ? '00:00:00' : '00:00';
+    return isEndDate ? endTime : startTime;
+};
+/** 날짜+시간 모드에서 시간이 없는 경우 기본값 부여 */
+const getDateTimeDefault = (currentDate, hasSeconds, isEndDate) => {
+    if (!currentDate)
+        return '';
+    const format = hasSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
+    const momentDate = moment(currentDate);
+    return isEndDate ? momentDate.endOf('day').format(format) : momentDate.startOf('day').format(format);
+};
+// ══════════════════════════════════════════
+// 캘린더 위치 조정 (setup / cleanup)
+// ══════════════════════════════════════════
+/** portal 모드: 캘린더 위치 재조정 및 스크롤 이벤트 연결 */
+const setupPortalPositioning = (instance, input) => {
+    const reposition = () => {
+        if (instance.config)
+            instance._positionCalendar();
+    };
+    instance._reposition = reposition;
+    const scrollParents = collectScrollParents(input);
+    instance._portalScrollParents = scrollParents;
+    instance.config.onOpen.push(() => {
+        scrollParents.forEach((target) => {
+            target.addEventListener('scroll', reposition, { passive: true });
+        });
+        window.addEventListener('scroll', reposition, { passive: true });
+    });
+    instance.config.onClose.push(() => {
+        scrollParents.forEach((target) => {
+            target.removeEventListener('scroll', reposition);
+        });
+        window.removeEventListener('scroll', reposition);
+    });
+};
+/** 일반 모드: 아래 공간 부족 시 캘린더를 위에 표시하고 스크롤/리사이즈 이벤트 연결 */
+const setupStaticPositioning = (instance, input) => {
+    const adjustPosition = () => {
+        const calendar = instance.calendarContainer;
+        if (!calendar)
+            return;
+        const wrapperEl = input.closest('.ncua-date-picker');
+        const rect = wrapperEl ? wrapperEl.getBoundingClientRect() : input.getBoundingClientRect();
+        const calendarHeight = calendar.offsetHeight;
+        const CALENDAR_GAP = 6;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        calendar.style.top = spaceBelow < calendarHeight + CALENDAR_GAP ? `${-(calendarHeight + CALENDAR_GAP)}px` : '';
+    };
+    const scrollParents = collectScrollParents(input);
+    instance._adjustPosition = adjustPosition;
+    instance._scrollParents = scrollParents;
+    instance.config.onOpen.push(() => {
+        adjustPosition();
+        scrollParents.forEach((target) => {
+            target.addEventListener('scroll', adjustPosition, { passive: true });
+        });
+        window.addEventListener('scroll', adjustPosition, { passive: true });
+        window.addEventListener('resize', adjustPosition);
+    });
+    instance.config.onClose.push(() => {
+        scrollParents.forEach((target) => {
+            target.removeEventListener('scroll', adjustPosition);
+        });
+        window.removeEventListener('scroll', adjustPosition);
+        window.removeEventListener('resize', adjustPosition);
+    });
+};
+/** scroll/resize 리스너 정리 */
+const cleanupPositioning = (instance) => {
+    const reposition = instance._reposition;
+    if (reposition) {
+        const portalScrollParents = instance._portalScrollParents || [];
+        portalScrollParents.forEach((target) => {
+            target.removeEventListener('scroll', reposition);
+        });
+        window.removeEventListener('scroll', reposition);
+    }
+    const adjustPosition = instance._adjustPosition;
+    if (adjustPosition) {
+        const scrollParents = instance._scrollParents || [];
+        scrollParents.forEach((target) => {
+            target.removeEventListener('scroll', adjustPosition);
+        });
+        window.removeEventListener('scroll', adjustPosition);
+        window.removeEventListener('resize', adjustPosition);
+    }
+};
+// ══════════════════════════════════════════
+// 시간 입력 필드 (setup / cleanup)
+// ══════════════════════════════════════════
+/** enableTime 옵션 사용 시 시간 입력 필드 이벤트 설정 */
+const setupTimeInputHandlers = (instance, input, isPortal, onHourInput, onMinuteInput) => {
+    const timeContainer = isPortal ? instance.calendarContainer : input.parentElement;
+    const timeInputWrapper = timeContainer?.querySelector('.flatpickr-time');
+    if (!timeInputWrapper)
+        return;
+    const hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
+    const minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+    if (!hourInput || !minuteInput)
+        return;
+    hourInput.addEventListener('input', onHourInput);
+    minuteInput.addEventListener('input', onMinuteInput);
+    const handleMouseDown = (e) => {
+        const flatpickrCalendar = getOpenCalendar(instance, input, isPortal);
+        if (flatpickrCalendar && !flatpickrCalendar.contains(e.target)) {
+            const timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
+            timeInputs.forEach((timeInput) => {
+                if (document.activeElement === timeInput) {
+                    timeInput.blur();
+                }
+            });
+        }
+    };
+    document.addEventListener('mousedown', handleMouseDown, true);
+    instance._handleMouseDown = handleMouseDown;
+};
+/** 시간 입력 필드 이벤트 리스너 정리 */
+const cleanupTimeInputHandlers = (instance, input, isPortal, onHourInput, onMinuteInput) => {
+    const timeContainer = isPortal ? instance.calendarContainer : input.parentElement;
+    const timeInputWrapper = timeContainer?.querySelector('.flatpickr-time');
+    if (!timeInputWrapper)
+        return;
+    const hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
+    if (hourInput) {
+        hourInput.removeEventListener('input', onHourInput);
+    }
+    const minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+    if (minuteInput) {
+        minuteInput.removeEventListener('input', onMinuteInput);
+    }
+    const handleMouseDown = instance._handleMouseDown;
+    if (handleMouseDown) {
+        document.removeEventListener('mousedown', handleMouseDown, true);
+    }
+};
+// ══════════════════════════════════════════
+// DatePicker 컴포넌트
+// ══════════════════════════════════════════
+export const DatePicker = forwardRef(({ shouldFocus = true, currentDate, size = 'xs', onChangeDate, datePickerOptions, isEndDate = false, onValidationError, className, portal = false, ...attrs }, ref) => {
+    const flatpickrInstanceRef = useRef(null);
+    const dateFormatRef = useRef('Y-m-d');
+    const minMaxDateRef = useRef({});
+    /** portal 모드: 캘린더를 담을 persistent 컨테이너 (한 번 생성, 언마운트 시 제거) */
+    const portalContainerRef = useRef(null);
+    const hasTimeOption = datePickerOptions && Object.hasOwn(datePickerOptions, 'enableTime');
+    // 콜백 props를 ref에 저장하여 memoized options에서 최신값 참조
+    const onChangeDateRef = useRef(onChangeDate);
+    onChangeDateRef.current = onChangeDate;
+    const onValidationErrorRef = useRef(onValidationError);
+    onValidationErrorRef.current = onValidationError;
+    /** portal 컨테이너를 lazily 생성 (이미 있으면 재사용), className은 매번 갱신 */
+    const getPortalContainer = () => {
+        if (!portal || typeof document === 'undefined')
+            return undefined;
+        const portalClassName = classNames('ncua-date-picker', 'ncua-date-picker--portal', `ncua-date-picker--${size}`, {
+            'ncua-date-picker--has-time': hasTimeOption,
+        });
+        if (portalContainerRef.current) {
+            portalContainerRef.current.className = portalClassName;
+            return portalContainerRef.current;
+        }
+        const el = document.createElement('div');
+        el.className = portalClassName;
+        // ncua-date-picker의 position/width/height가 캘린더 배치를 방해하지 않도록 무력화
+        el.style.cssText = 'position:static;width:auto;height:auto;overflow:visible;';
+        document.body.appendChild(el);
+        portalContainerRef.current = el;
+        return el;
+    };
+    /** 컴포넌트 언마운트 시 포탈 컨테이너 및 스크롤 리스너 정리 */
+    useEffect(() => {
+        return () => {
+            portalContainerRef.current?.remove();
+            portalContainerRef.current = null;
+        };
+    }, []);
+    // ──────────────────────────────────────────────
+    // 날짜 유효성 검사
+    // ──────────────────────────────────────────────
+    /** minDate/maxDate 범위를 벗어났는지 확인 */
+    const checkDateViolations = (date, minDate, maxDate) => {
+        const violations = [];
+        const inputDate = moment(date);
+        if (!inputDate.isValid())
+            return violations;
+        if (minDate) {
+            const min = moment(minDate);
+            if (min.isValid() && inputDate.isBefore(min, 'day')) {
+                violations.push('minDate');
+            }
+        }
+        if (maxDate) {
+            const max = moment(maxDate);
+            if (max.isValid() && inputDate.isAfter(max, 'day')) {
+                violations.push('maxDate');
+            }
+        }
+        return violations;
+    };
+    // ──────────────────────────────────────────────
+    // 이벤트 핸들러
+    // ──────────────────────────────────────────────
+    /** 유효하지 않은 입력 시 이전 날짜로 복원 */
+    const restorePreviousDate = (target, instance) => {
+        if (instance.selectedDates.length > 0) {
+            const prevDate = instance.selectedDates[0];
+            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);
+                return;
+            }
+        }
+        target.value = '';
+        instance.setDate('', false);
+    };
+    /** flatpickr에서 날짜가 변경되었을 때 호출 */
+    const onChangeDateHandler = useCallback((dateTimeStamp, dateStr, fpInstance) => {
+        const instance = fpInstance;
+        if (!dateTimeStamp || dateTimeStamp.length === 0) {
+            restorePreviousDate(instance.input, instance);
+            return;
+        }
+        if (restoreIfInvalidDate(dateTimeStamp[0], instance))
+            return;
+        const selectedDate = dateTimeStamp[0];
+        const minDate = instance.config.minDate;
+        const maxDate = instance.config.maxDate;
+        const violations = checkDateViolations(selectedDate, minDate, maxDate);
+        if (violations.length > 0 && onValidationErrorRef.current) {
+            const prevDate = instance?.selectedDates?.[0];
+            const validPrevDate = prevDate instanceof Date && !Number.isNaN(prevDate.getTime()) ? prevDate : undefined;
+            onValidationErrorRef.current({
+                date: selectedDate,
+                minDate,
+                maxDate,
+                violations,
+                previousDate: validPrevDate,
+            });
+            return;
+        }
+        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) => {
+        const target = e.target;
+        const input = target.value;
+        const instance = flatpickrInstanceRef.current;
+        if (!instance)
+            return;
+        if (!input?.trim()) {
+            target.value = '';
+            instance.setDate('', false);
+            onChangeDateRef.current('');
+            return;
+        }
+        if (!/[0-9]/.test(input)) {
+            restorePreviousDate(target, instance);
+            return;
+        }
+        const formattedInput = formatDateInput(input);
+        if (formattedInput !== input) {
+            target.value = formattedInput;
+            return;
+        }
+        if (!formattedInput || formattedInput.length < 10)
+            return;
+        const parsedDate = moment(formattedInput);
+        if (!parsedDate.isValid()) {
+            restorePreviousDate(target, instance);
+            return;
+        }
+        const parsedDateObj = parsedDate.toDate();
+        const violations = checkDateViolations(parsedDateObj, minMaxDateRef.current.minDate, minMaxDateRef.current.maxDate);
+        if (violations.length > 0) {
+            return;
+        }
+    }, [checkDateViolations, restorePreviousDate]);
+    /** 시간 입력 필드 - 시(hour) 값 포맷팅 (0~23) */
+    const onHourInputHandler = useCallback((e) => {
+        const target = e.target;
+        const input = target.value;
+        const formattedInput = formatHourInput(input);
+        if (formattedInput === input)
+            return;
+        target.value = formattedInput;
+    }, []);
+    /** 시간 입력 필드 - 분(minute) 값 포맷팅 (0~59) */
+    const onMinuteInputHandler = useCallback((e) => {
+        const target = e.target;
+        const input = target.value;
+        const formattedInput = formatMinuteInput(input);
+        if (formattedInput === input)
+            return;
+        target.value = formattedInput;
+    }, []);
+    const inputId = useId();
+    // ──────────────────────────────────────────────
+    // flatpickr 옵션
+    // ──────────────────────────────────────────────
+    // datePickerOptions는 부모에서 매 렌더 새 객체일 수 있으므로 값 기반 비교
+    // 주의: JSON.stringify는 함수를 무시하고 Date를 문자열로 변환하므로,
+    // datePickerOptions에 함수나 Date 객체를 넘기면 변경 감지가 누락될 수 있음
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const _datePickerOptionsKey = JSON.stringify(datePickerOptions);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const options = useMemo(() => ({
+        mode: 'single',
+        static: !portal,
+        ...(portal && {
+            appendTo: getPortalContainer(),
+        }),
+        locale: Korean,
+        dateFormat: 'Y-m-d',
+        clickOpens: true,
+        time_24hr: true,
+        /** flatpickr 기본 포맷 대신 moment를 사용하여 한국어 날짜 형식 지원 */
+        formatDate: (date, format, _locale) => {
+            try {
+                if (!date || !(date instanceof Date) || Number.isNaN(date.getTime())) {
+                    return '';
+                }
+                const momentDate = moment(date);
+                if (!momentDate.isValid()) {
+                    return '';
+                }
+                const momentFormat = format
+                    .replace(/Y/g, 'YYYY')
+                    .replace(/y/g, 'YY')
+                    .replace(/m/g, 'MM')
+                    .replace(/d/g, 'DD')
+                    .replace(/H/g, 'HH')
+                    .replace(/i/g, 'mm')
+                    .replace(/S/g, 'ss');
+                return momentDate.format(momentFormat);
+            }
+            catch (_error) {
+                return '';
+            }
+        },
+        onChange: onChangeDateHandler,
+        allowInvalidPreload: true,
+        // ──────────────────────────────────────────────
+        // onReady: flatpickr 인스턴스 초기화 후 실행
+        // ──────────────────────────────────────────────
+        onReady: (_selectedDates, _dateStr, fpInstance) => {
+            const instance = fpInstance;
+            const input = instance.input;
+            if (!input)
+                return;
+            flatpickrInstanceRef.current = instance;
+            dateFormatRef.current = instance.config.dateFormat || 'Y-m-d';
+            minMaxDateRef.current = {
+                minDate: instance.config.minDate,
+                maxDate: instance.config.maxDate,
+            };
+            // blur 시 현재 날짜를 저장하여 잘못된 입력 시 복원에 사용
+            const onBlurHandler = (_e) => {
+                if (instance && instance.selectedDates.length > 0) {
+                    instance._previousDateBeforeInput = instance.selectedDates[0];
+                }
+            };
+            input.addEventListener('input', onInputHandler);
+            input.addEventListener('blur', onBlurHandler);
+            if (instance.selectedDates.length > 0) {
+                instance._previousDateBeforeInput = instance.selectedDates[0];
+            }
+            instance._onBlurHandler = onBlurHandler;
+            // 캘린더 위치 조정 및 스크롤/리사이즈 이벤트 연결
+            if (portal) {
+                setupPortalPositioning(instance, input);
+            }
+            else {
+                setupStaticPositioning(instance, input);
+            }
+            // 시간 입력 필드 이벤트 설정
+            setupTimeInputHandlers(instance, input, portal, onHourInputHandler, onMinuteInputHandler);
+        },
+        // ──────────────────────────────────────────────
+        // onDestroy: flatpickr 인스턴스 파괴 시 이벤트 리스너 정리
+        // ──────────────────────────────────────────────
+        onDestroy: (_selectedDates, _dateStr, fpInstance) => {
+            const instance = fpInstance;
+            const input = instance.input;
+            if (!input)
+                return;
+            flatpickrInstanceRef.current = null;
+            input.removeEventListener('input', onInputHandler);
+            const onBlurHandler = instance._onBlurHandler;
+            if (onBlurHandler) {
+                input.removeEventListener('blur', onBlurHandler);
+            }
+            cleanupTimeInputHandlers(instance, input, portal, onHourInputHandler, onMinuteInputHandler);
+            cleanupPositioning(instance);
+        },
+        ...datePickerOptions,
+        // 어드민 환경 — 모바일에서 native picker 로 fallback 되지 않도록 강제 (datePickerOptions 로 override 불가)
+        disableMobile: true,
+    }), [
+        portal,
+        onChangeDateHandler,
+        onInputHandler,
+        onHourInputHandler,
+        onMinuteInputHandler,
+        datePickerOptions,
+        getPortalContainer,
+    ]);
+    const iconName = hasTimeOption && datePickerOptions && Object.hasOwn(datePickerOptions, 'noCalendar') ? 'clock' : 'calendar';
+    // ──────────────────────────────────────────────
+    // 시간 옵션에 따른 currentDate 전처리
+    // enableTime일 때 시간이 없으면 기본값(00:00 또는 23:59) 부여
+    // ──────────────────────────────────────────────
+    const processedCurrentDate = useMemo(() => {
+        const hasTime = options.enableTime;
+        const isTimeOnly = options.noCalendar;
+        const hasSeconds = options.enableSeconds;
+        if (!hasTime && !isTimeOnly)
+            return currentDate;
+        if (currentDate?.includes(':'))
+            return currentDate;
+        if (isTimeOnly)
+            return getTimeOnlyDefault(hasSeconds, isEndDate);
+        return getDateTimeDefault(currentDate, hasSeconds, isEndDate);
+    }, [currentDate, isEndDate, options.enableSeconds, options.enableTime, options.noCalendar]);
+    // ──────────────────────────────────────────────
+    // 렌더링
+    // ──────────────────────────────────────────────
+    const flatpickrElement = (_jsx(Flatpickr, { ...attrs, ref: ref || undefined, className: classNames('ncua-date-picker__input'), options: options, value: processedCurrentDate, render: ({ defaultValue, value, ...props }, ref) => {
+            // flatpickr 전용 옵션이 input DOM에 전달되지 않도록 제거
+            const { allowInput: _allowInput, dateFormat: _dateFormat, minDate: _minDate, maxDate: _maxDate, enableTime: _enableTime, enableSeconds: _enableSeconds, noCalendar: _noCalendar, render: _render, ...inputProps
+            // biome-ignore lint/suspicious/noExplicitAny: react-flatpickr render 콜백의 props 타입이 불완전하여 정확한 타이핑 불가
+             } = props;
+            return (_jsx(CustomInput, { ...inputProps, id: inputId, iconSize: size, disabled: !!attrs.disabled, defaultValue: defaultValue, iconName: iconName, ref: ref, onInput: onInputHandler, placeholder: attrs.placeholder }));
+        } }));
+    return (_jsxs("div", { className: classNames('ncua-date-picker', `ncua-date-picker--${size}`, {
+            'ncua-date-picker--portal': portal,
+            'ncua-date-picker--disabled': attrs.disabled,
+            'ncua-date-picker--has-time': hasTimeOption,
+            'ncua-date-picker--destructive': attrs.destructive,
+        }, className), children: [flatpickrElement, attrs.destructive && _jsx("p", { className: "ncua-date-picker__destructive", children: attrs.destructive })] }));
+});
+DatePicker.displayName = 'DatePicker';

package/dist/temp/src/components/forms-and-input/date-picker/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DatePicker';
+export * from './CustomInput';
+export * from './utils';

package/dist/temp/src/components/forms-and-input/date-picker/index.js

@@ -0,0 +1,3 @@
+export * from './DatePicker';
+export * from './CustomInput';
+export * from './utils';

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

@@ -0,0 +1,87 @@
+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 '../../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";
+    FileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
+    FileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
+})(FileInputErrorType || (FileInputErrorType = {}));
+export const FileInput = forwardRef(({ size = 'xs', accept, multiple = false, maxFileSize, maxFileCount, value, onChange, onFileSelect, onFail, buttonLabel = '파일 찾기', disabled, label, hintItems, validation, destructive, isRequired, showHelpIcon, hintText, ...props }, _ref) => {
+    const fileInputRef = useRef(null);
+    const [internalFiles, setInternalFiles] = useState([]);
+    // Determine if component is controlled or uncontrolled
+    const isControlled = value !== undefined;
+    const files = isControlled ? value : internalFiles;
+    // Sync internal state with controlled value
+    useEffect(() => {
+        if (isControlled && value) {
+            setInternalFiles(value);
+        }
+    }, [isControlled, value]);
+    const updateFiles = (newFiles) => {
+        if (isControlled) {
+            onChange?.(newFiles);
+        }
+        else {
+            setInternalFiles(newFiles);
+            onFileSelect?.(newFiles);
+        }
+    };
+    const handleFileChange = (event) => {
+        const selectedFiles = event.target.files;
+        if (!selectedFiles || selectedFiles.length === 0)
+            return;
+        const { validFiles, invalidFiles } = validateFiles(Array.from(selectedFiles));
+        const nextFiles = [...files, ...validFiles];
+        updateFiles(nextFiles);
+        if (onFail && invalidFiles.length > 0) {
+            onFail(invalidFiles);
+        }
+    };
+    const validateFiles = (fileList) => {
+        const validFiles = [];
+        const invalidFiles = [];
+        for (const file of fileList) {
+            if (files.some((f) => f.name === file.name && f.size === file.size)) {
+                invalidFiles.push({ ...file, errorType: FileInputErrorType.ALREADY_UPLOADED });
+                continue;
+            }
+            if (!!maxFileSize && file.size > maxFileSize) {
+                invalidFiles.push({ ...file, errorType: FileInputErrorType.EXCEED_MAX_FILE_SIZE });
+                continue;
+            }
+            if (!!maxFileCount && files.length + validFiles.length >= maxFileCount) {
+                invalidFiles.push({ ...file, errorType: FileInputErrorType.EXCEED_MAX_FILE_COUNT });
+                continue;
+            }
+            validFiles.push(file);
+        }
+        return { validFiles, invalidFiles };
+    };
+    const handleBrowseClick = () => {
+        if (fileInputRef.current && !disabled) {
+            fileInputRef.current.click();
+        }
+    };
+    const handleRemoveFile = (index) => {
+        const newFiles = [...files];
+        newFiles.splice(index, 1);
+        updateFiles(newFiles);
+    };
+    const renderFileTagList = () => {
+        if (files.length === 0)
+            return null;
+        return (_jsx("div", { className: "ncua-file-input__file-tags", children: files.map((file, index) => (_jsxs("div", { className: "ncua-file-input__file-tag-container", children: [_jsx(Tag, { text: file.name, size: size === 'xs' ? 'sm' : 'md', close: true, onButtonClick: () => handleRemoveFile(index) }), file.type.startsWith('image/') && (_jsx("img", { className: "ncua-file-input__file-image", src: URL.createObjectURL(file), alt: file.name }))] }, `${file.name}-${index}`))) }));
+    };
+    const renderHintList = () => {
+        if (!hintItems || hintItems.length === 0)
+            return null;
+        return (_jsx("ul", { className: "ncua-file-input__hint-list", children: hintItems.map((hint) => (_jsx("li", { className: "ncua-file-input__hint-item", children: hint }, hint))) }));
+    };
+    return (_jsxs("div", { className: classNames('ncua-file-input', `ncua-file-input--${size}`), children: [_jsx("input", { hidden: true, ref: fileInputRef, type: "file", accept: accept, multiple: multiple, onChange: handleFileChange, tabIndex: -1, "aria-hidden": "true", ...props }), _jsxs("div", { className: "ncua-file-input__input-container", children: [_jsxs("div", { className: "ncua-file-input__label", children: [_jsx(Label, { isRequired: isRequired, children: label }), showHelpIcon && _jsx(HelpCircle, { className: "ncua-input__help-icon" })] }), _jsx(Button, { size: size, onClick: handleBrowseClick, disabled: disabled, leadingIcon: { type: 'icon', icon: Upload01 }, label: buttonLabel }), hintText && _jsx(HintText, { destructive: destructive, children: hintText })] }), renderHintList(), renderFileTagList()] }));
+});