@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -0,0 +1,499 @@
+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 && !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 && !isNaN(date.getTime())) {
+        return false;
+    }
+    const previousDate = instance._previousDateBeforeInput;
+    if (previousDate && previousDate instanceof Date && !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 && !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 && !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);
+    }, []);
+    /** 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;
+        }
+    }, []);
+    /** 시간 입력 필드 - 시(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) || 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,
+    }), [
+        portal,
+        size,
+        hasTimeOption,
+        datePickerOptionsKey,
+        onChangeDateHandler,
+        onInputHandler,
+        onHourInputHandler,
+        onMinuteInputHandler,
+    ]);
+    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/date-picker/index.d.ts

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

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

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

package/dist/temp/src/components/date-picker/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function getToday(): Date;
+export declare function getDateFormat(date?: Date | string): string;

package/dist/temp/src/components/date-picker/utils.js

@@ -0,0 +1,7 @@
+import moment from 'moment';
+export function getToday() {
+    return moment().toDate();
+}
+export function getDateFormat(date = getToday()) {
+    return moment(date).format('YYYY-MM-DD');
+}

package/dist/temp/src/components/divider/Divider.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+export type DividerType = 'text' | 'heading' | 'button' | 'button-group' | 'button-icon' | 'button-group-icon';
+export type DividerStyle = 'single-line' | 'background-fill';
+export interface DividerProps {
+    className?: string;
+    type: DividerType;
+    style?: DividerStyle;
+    children: ReactNode;
+}
+/**
+ * @param {DividerProps} props
+ * @param {ReactNode} props.children Button 컴포넌트는 xs로 ButtonGroup은 sm 사이즈로 추가하는 것이 권장됩니다.
+ * @returns {ReactNode}
+ */
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/temp/src/components/divider/Divider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+/**
+ * @param {DividerProps} props
+ * @param {ReactNode} props.children Button 컴포넌트는 xs로 ButtonGroup은 sm 사이즈로 추가하는 것이 권장됩니다.
+ * @returns {ReactNode}
+ */
+export const Divider = forwardRef(({ className, type, style = 'single-line', children }, ref) => (_jsxs("div", { className: classNames('ncua-divider', `ncua-divider--${type}`, `ncua-divider--${style}`, className), ref: ref, children: [style === 'single-line' && _jsx("div", { className: "ncua-divider__line" }), _jsx("div", { className: "ncua-divider__content", children: children }), style === 'single-line' && _jsx("div", { className: "ncua-divider__line" })] })));

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

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

package/dist/temp/src/components/divider/index.js

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

package/dist/temp/src/components/dot/Dot.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from 'react';
+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'> {
+    /**
+     * The color of the dot
+     * @default 'success'
+     */
+    color?: DotColor;
+    /**
+     * The size of the dot
+     * @default 'md'
+     */
+    size?: DotSize;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+declare const Dot: import("react").ForwardRefExoticComponent<DotProps & import("react").RefAttributes<HTMLSpanElement>>;
+export type { DotColor, DotSize, DotProps };
+export { Dot };

package/dist/temp/src/components/dot/Dot.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+const Dot = forwardRef(({ color = 'success', size = 'sm', className, ...props }, ref) => {
+    return (_jsx("span", { ref: ref, className: classNames('ncua-dot', `ncua-dot--${color}`, `ncua-dot--${size}`, className), ...props }));
+});
+Dot.displayName = 'Dot';
+export { Dot };

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

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

package/dist/temp/src/components/dot/index.js

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

package/dist/temp/src/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,52 @@
+import type { SlotIconComponent } from '../../types/side-slot';
+export type AvatarTrigger = {
+    type: 'avatar';
+    avatar: string;
+};
+export type ButtonTrigger = {
+    type: 'button';
+    text: string;
+};
+export type IconTrigger = {
+    type: 'icon';
+    icon?: SlotIconComponent;
+};
+export type CustomTrigger = {
+    type: 'custom';
+    children: React.ReactNode;
+};
+export type DropdownItemType = {
+    id: string;
+    text: string;
+    icon?: SlotIconComponent;
+    shortcut?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    type?: 'default' | 'danger';
+    className?: string;
+};
+export type DropdownGroup = {
+    items: DropdownItemType[];
+};
+export type AvatarHeader = {
+    type: 'avatar';
+    avatar: string;
+    title: string;
+    subtitle: string;
+};
+export type TextHeader = {
+    type: 'text';
+    title: string;
+};
+export type DropdownHeaderType = AvatarHeader | TextHeader;
+export type DropdownProps = {
+    trigger: AvatarTrigger | ButtonTrigger | IconTrigger | CustomTrigger;
+    opened?: boolean;
+    closeOnClickOutside?: boolean;
+    closeOnClickItem?: boolean;
+    align?: 'left' | 'right';
+    header?: DropdownHeaderType;
+    groups: DropdownGroup[];
+    className?: string;
+};
+export declare const Dropdown: ({ trigger, align, header, groups, className, opened, closeOnClickItem, closeOnClickOutside, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;