@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/temp/src/components/radio/Radio.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+import { type RadioInputProps } from './RadioInput';
+export interface RadioProps extends Omit<RadioInputProps, 'type'> {
+    text?: ReactNode;
+    supportText?: string;
+}
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/temp/src/components/radio/Radio.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { RadioInput } from './RadioInput';
+export const Radio = forwardRef(({ size = 'xs', text, supportText, disabled, checked, className, onChange, ...props }, ref) => {
+    return (_jsxs("label", { className: classNames('ncua-radio-field', `ncua-radio-field--${size}`, { 'has-text': text }, className), children: [_jsx(RadioInput, { size: size, ref: ref, checked: checked, disabled: disabled, onChange: onChange, className: "ncua-radio-field__input", ...props }), _jsxs("span", { children: [text && _jsx("span", { className: "ncua-radio-field__text", children: text }), supportText && _jsx("span", { className: "ncua-radio-field__support-text", children: supportText })] })] }));
+});

package/dist/temp/src/components/radio/RadioInput.d.ts

@@ -0,0 +1,8 @@
+import { type ChangeEvent, type ComponentPropsWithRef } from 'react';
+import type { Size } from '../../../constant/size';
+export interface RadioInputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'ref'> {
+    size?: Extract<Size, 'xs' | 'sm'>;
+    destructive?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const RadioInput: import("react").ForwardRefExoticComponent<RadioInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/temp/src/components/radio/RadioInput.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+export const RadioInput = forwardRef(({ size = 'xs', disabled, className, destructive = false, onChange, ...props }, ref) => {
+    return (_jsx("span", { className: classNames('ncua-radio-input', `ncua-radio-input--${size}`, { destructive }, className), children: _jsx("input", { type: "radio", ref: ref, onChange: onChange, disabled: disabled, ...props }) }));
+});

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

@@ -0,0 +1,2 @@
+export * from './Radio';
+export * from './RadioInput';

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

@@ -0,0 +1,2 @@
+export * from './Radio';
+export * from './RadioInput';

package/dist/{types/src/components/date-picker → temp/src/components/range-date-picker}/RangeDatePicker.d.ts

@@ -1,6 +1,6 @@
-import { unitOfTime } from 'moment';
-import { DatePickerProps } from './DatePicker';
-export type RangeDatePickerProps = {
+import { type unitOfTime } from 'moment';
+import { type DatePickerProps } from '../date-picker/DatePicker';
+type RangeDatePickerProps = {
     startDateOptions: DatePickerProps;
     endDateOptions: DatePickerProps;
     validationOption?: {
@@ -21,5 +21,6 @@ export type RangeDatePickerProps = {
     }) => void;
     size?: 'xs' | 'sm';
 };
-export declare const RangeDatePicker: import("react").ForwardRefExoticComponent<RangeDatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=RangeDatePicker.d.ts.map
+declare const RangeDatePicker: import("react").ForwardRefExoticComponent<RangeDatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export { RangeDatePicker };
+export type { RangeDatePickerProps };

package/dist/temp/src/components/range-date-picker/RangeDatePicker.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from 'moment';
+import { forwardRef, useCallback, useEffect } from 'react';
+import { DatePicker } from '../date-picker/DatePicker';
+import { getDateFormat } from '../date-picker/utils';
+const RangeDatePicker = forwardRef(({ startDateOptions, endDateOptions, validationOption, onDateValidation, size = 'xs' }, ref) => {
+    const getOverlapResult = useCallback((type) => {
+        if (type === 'start' && moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
+            return { newDate: endDateOptions.currentDate, currentDate: startDateOptions.currentDate };
+        }
+        if (type === 'end' && moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
+            return { newDate: startDateOptions.currentDate, currentDate: endDateOptions.currentDate };
+        }
+        return null;
+    }, [startDateOptions.currentDate, endDateOptions.currentDate]);
+    const getSettingNewDate = useCallback((type, isOverPeriod, unit, period) => {
+        if (type === 'start') {
+            if (isOverPeriod) {
+                return getDateFormat(moment(endDateOptions.currentDate).subtract(period, unit).toDate());
+            }
+            if (moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
+                return endDateOptions.currentDate;
+            }
+        }
+        else {
+            if (isOverPeriod) {
+                return getDateFormat(moment(startDateOptions.currentDate).add(period, unit).toDate());
+            }
+            if (moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
+                return startDateOptions.currentDate;
+            }
+        }
+        return '';
+    }, [startDateOptions.currentDate, endDateOptions.currentDate]);
+    const changeSettingDateAndAlert = useCallback((type, isOverPeriod = false) => {
+        if (!validationOption?.setting) {
+            const result = getOverlapResult(type);
+            if (result) {
+                onDateValidation?.({ type, errorType: 'overlap', ...result });
+            }
+            return;
+        }
+        const { unit, period } = validationOption.setting;
+        const newDate = getSettingNewDate(type, isOverPeriod, unit, period);
+        if (newDate) {
+            onDateValidation?.({
+                type,
+                errorType: isOverPeriod ? 'period' : 'overlap',
+                newDate,
+                currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate,
+            });
+        }
+    }, [startDateOptions, endDateOptions, validationOption, onDateValidation, getOverlapResult, getSettingNewDate]);
+    useEffect(() => {
+        const isOverDate = moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+        if (isOverDate) {
+            changeSettingDateAndAlert('start');
+            return;
+        }
+        if (!validationOption?.setting) {
+            return;
+        }
+        const { unit, period } = validationOption.setting;
+        const isValidPeriod = moment(startDateOptions.currentDate).isSameOrAfter(moment(endDateOptions.currentDate).subtract(period, unit));
+        if (isValidPeriod) {
+            onDateValidation?.({
+                type: 'start',
+                errorType: null,
+                newDate: startDateOptions.currentDate,
+                currentDate: startDateOptions.currentDate,
+            });
+        }
+        else {
+            changeSettingDateAndAlert('start', true);
+        }
+    }, [startDateOptions.currentDate]);
+    useEffect(() => {
+        const isNotTodayEndDate = !moment(endDateOptions.currentDate).isSame(moment(), 'day');
+        if (!validationOption?.setting || !isNotTodayEndDate) {
+            return;
+        }
+        const isOverDate = moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
+        if (isOverDate) {
+            changeSettingDateAndAlert('end');
+            return;
+        }
+        const { unit, period } = validationOption.setting;
+        const isValidPeriod = moment(endDateOptions.currentDate).isSameOrBefore(moment(startDateOptions.currentDate).add(period, unit));
+        if (isValidPeriod) {
+            onDateValidation?.({
+                type: 'end',
+                errorType: null,
+                newDate: endDateOptions.currentDate,
+                currentDate: endDateOptions.currentDate,
+            });
+        }
+        else {
+            changeSettingDateAndAlert('end', true);
+        }
+    }, [endDateOptions.currentDate]);
+    return (_jsxs("div", { className: "ncua-range-date-picker", ref: ref || undefined, children: [_jsx(DatePicker, { ...startDateOptions, ref: undefined, size: size }), "~", _jsx(DatePicker, { isEndDate: true, ...endDateOptions, ref: undefined, size: size })] }));
+});
+RangeDatePicker.displayName = 'RangeDatePicker';
+export { RangeDatePicker };

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

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

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

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

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

@@ -1,7 +1,7 @@
 import { type Dispatch, type SetStateAction } from 'react';
 import { PERIOD_ITEM, type PeriodItemMap } from '../../constant/date-picker';
-import { type RangeDatePickerProps } from './RangeDatePicker';
-export type PeriodKeyType = keyof typeof PERIOD_ITEM;
+import { type RangeDatePickerProps } from '../range-date-picker/RangeDatePicker';
+type PeriodKeyType = keyof typeof PERIOD_ITEM;
 type RangeDatePickerWithButtonsProps<T extends PeriodItemMap = typeof PERIOD_ITEM> = {
     useYesterdayAsEndDate?: boolean;
     currentButtonId: keyof T & string;
@@ -10,7 +10,7 @@ type RangeDatePickerWithButtonsProps<T extends PeriodItemMap = typeof PERIOD_ITE
     periodItems?: T;
     size?: 'xs' | 'sm';
 } & RangeDatePickerProps;
-export declare const RangeDatePickerWithButtons: <T extends PeriodItemMap = {
+declare const RangeDatePickerWithButtons: <T extends PeriodItemMap = {
     TODAY: {
         text: string;
         period: number;
@@ -67,5 +67,5 @@ export declare const RangeDatePickerWithButtons: <T extends PeriodItemMap = {
         unit: null;
     };
 }>({ useYesterdayAsEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, periodItems, onDateValidation, }: RangeDatePickerWithButtonsProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=RangeDatePickerWithButtons.d.ts.map
+export type { PeriodKeyType };
+export { RangeDatePickerWithButtons };

package/dist/temp/src/components/range-date-picker-with-buttons/RangeDatePickerWithButtons.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { PERIOD_ITEM } from '../../constant/date-picker';
+import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
+import { ButtonGroup } from '../button-group';
+import { RangeDatePicker } from '../range-date-picker/RangeDatePicker';
+const RangeDatePickerWithButtons = ({ useYesterdayAsEndDate = false, size = 'xs', currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, periodItems, onDateValidation, }) => {
+    const items = (periodItems ?? PERIOD_ITEM);
+    const setCalculatedDate = () => {
+        const currentPeriodItem = items[currentButtonId];
+        if (!currentPeriodItem) {
+            return;
+        }
+        if (currentButtonId === 'ENTIRE') {
+            startDateOptions.onChangeDate('');
+            endDateOptions.onChangeDate('');
+            return;
+        }
+        const startDate = getDateFormat(getSubtractDate({
+            period: currentPeriodItem.period,
+            unit: currentPeriodItem.unit,
+        }));
+        startDateOptions.onChangeDate(startDate);
+        const endDate = useYesterdayAsEndDate
+            ? getDateFormat(getSubtractDate({
+                period: 1,
+                unit: 'days',
+            }))
+            : getDateFormat();
+        endDateOptions.onChangeDate(endDate);
+    };
+    const handleOnChangeDate = (date, type) => {
+        type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);
+        currentButtonId && setCurrentButtonId('NONE');
+    };
+    useEffect(() => {
+        if (currentButtonId !== 'NONE') {
+            setCalculatedDate();
+        }
+    }, [currentButtonId]);
+    return (_jsxs("div", { className: "ncua-range-date-picker-with-buttons", children: [_jsx(ButtonGroup, { size: size, children: periodKeys.map((key) => (_jsx(ButtonGroup.Item, { isCurrent: currentButtonId === key, label: items[key].text, onClick: () => setCurrentButtonId(key) }, key))) }), _jsx(RangeDatePicker, { startDateOptions: { ...startDateOptions, onChangeDate: (date) => handleOnChangeDate(date, 'START') }, endDateOptions: { ...endDateOptions, onChangeDate: (date) => handleOnChangeDate(date, 'END') }, validationOption: validationOption, onDateValidation: onDateValidation, size: size })] }));
+};
+export { RangeDatePickerWithButtons };

package/dist/temp/src/components/range-date-picker-with-buttons/index.d.ts

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

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

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

package/dist/temp/src/components/select/Select.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import type { UseFormRegisterReturn } from 'react-hook-form';
+import type { Size } from '../../../constant/size';
+import type { OptionType } from '../../types/dropdown';
+export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, 'size'> {
+    placeholder?: string;
+    disabledPlaceholder?: boolean;
+    hintText?: string;
+    destructive?: boolean;
+    size?: Extract<Size, 'xs' | 'sm' | 'md'>;
+    optionItems?: OptionType[];
+    register?: UseFormRegisterReturn;
+    type?: 'default' | 'simple';
+    children?: ReactNode;
+}
+export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/temp/src/components/select/Select.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { HintText } from '../shared/hintText/HintText';
+export const Select = forwardRef(({ placeholder, disabledPlaceholder = false, id, className, hintText, children, size = 'xs', type = 'default', destructive = false, value, optionItems, register, disabled = false, ...props }, ref) => {
+    return (_jsxs("span", { className: classNames('ncua-select', {
+            destructive: destructive,
+            'ncua-select--simple': type === 'simple',
+        }, className, `ncua-select--${size}`), children: [_jsx("span", { className: "ncua-select__content", children: _jsxs("select", { value: value, ref: ref, id: id, className: classNames('ncua-select__tag', className), disabled: disabled, ...register, ...props, children: [placeholder && (_jsx("option", { value: "", selected: true, disabled: disabledPlaceholder, children: placeholder })), optionItems?.map((item) => (_jsx("option", { value: item.id, children: item.label }, item.id))), children] }) }), hintText && (_jsx(HintText, { destructive: destructive, className: "ncua-hint-text", children: hintText }))] }));
+});

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

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

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

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

package/dist/{types/src/components/selectbox → temp/src/components/select-box}/SelectBox.d.ts

@@ -2,8 +2,8 @@ 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';
-export declare const DEFAULT_MAX_HEIGHT = 275;
-export type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> & {
+declare const DEFAULT_MAX_HEIGHT = 275;
+type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> & {
     children?: ReactNode;
     placeholder?: string;
     disabledPlaceholder?: boolean;
@@ -22,5 +22,6 @@ export type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChan
     onEdit?: () => void;
     align?: 'left' | 'right';
 };
-export declare const SelectBox: import("react").ForwardRefExoticComponent<Omit<SelectBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=SelectBox.d.ts.map
+declare const SelectBox: import("react").ForwardRefExoticComponent<Omit<SelectBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type { SelectBoxProps };
+export { DEFAULT_MAX_HEIGHT, SelectBox };

package/dist/temp/src/components/select-box/SelectBox.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { COLOR } from '../../../constant/color';
+import { useDropdown, useScrollLock } from '../../hooks/dropdown';
+import { useMultiSelect } from '../../utils/dropdown/multiSelect';
+import { SelectDropdown } from '../select-dropdown';
+import { HintText } from '../shared/hintText/HintText';
+import { Tag } from '../tag';
+const ICON_SIZE_XS = 14;
+const ICON_SIZE_SM = 16;
+const DEFAULT_MAX_HEIGHT = 275;
+function computeNewValue(option, value, multiple) {
+    if (multiple) {
+        const currentValues = Array.isArray(value) ? value : [];
+        if (currentValues.includes(option.id)) {
+            return currentValues.filter((v) => v !== option.id);
+        }
+        return [...currentValues, option.id];
+    }
+    return option.id;
+}
+function notifyRegister(register, newValue, multiple) {
+    if (!register?.onChange)
+        return;
+    register.onChange({
+        target: {
+            value: multiple ? JSON.stringify(newValue) : newValue,
+            name: register.name,
+        },
+    });
+}
+function DisplayValue({ displayValue }) {
+    if (typeof displayValue === 'string') {
+        return _jsx("span", { className: "ncua-selectbox__value-text", children: displayValue });
+    }
+    return (_jsxs("div", { className: "ncua-selectbox__value-container", children: [displayValue.icon && (_jsx("span", { className: "ncua-selectbox__value-icon", children: _jsx(displayValue.icon, { width: 16, height: 16 }) })), _jsx("span", { className: "ncua-selectbox__value-text", children: displayValue.label })] }));
+}
+const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceholder = false, hintText, size = 'xs', type = 'default', autoWidth = true, destructive = false, value, optionItems = [], disabled = false, maxHeight = DEFAULT_MAX_HEIGHT, multiple = false, align = 'left', id, className, children, register, onChange, onEdit, ...props }, ref) => {
+    const internalRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const [selectedTags, setSelectedTags] = useState([]);
+    const selectedOption = useMemo(() => {
+        if (multiple)
+            return null;
+        return optionItems.find((option) => option.id === value);
+    }, [optionItems, value, multiple]);
+    const displayValue = useMemo(() => {
+        if (multiple) {
+            return placeholder;
+        }
+        return selectedOption ? selectedOption : placeholder;
+    }, [multiple, selectedOption, placeholder]);
+    const handleOptionSelect = (option) => {
+        if (disabled)
+            return;
+        const newValue = computeNewValue(option, value, multiple);
+        onChange?.(newValue);
+        notifyRegister(register, newValue, multiple);
+    };
+    const { isOpen, direction: dropdownDirection, focusedIndex, toggleDropdown, closeDropdown, handleKeyDown, handleOptionSelect: handleDropdownSelect, handleMouseMove, isKeyboardNavigation, setFocusedIndex, } = useDropdown({
+        triggerRef: internalRef,
+        dropdownRef,
+        maxHeight,
+        itemCount: optionItems.length,
+        optionItems,
+        disabled,
+        multiple,
+        onSelect: handleOptionSelect,
+    });
+    const activeDescendantId = useMemo(() => {
+        if (!isOpen || focusedIndex < 0 || focusedIndex >= optionItems.length) {
+            return undefined;
+        }
+        const focusedOption = optionItems[focusedIndex];
+        return `selectbox-options-${id || 'default'}-${focusedOption.id}`;
+    }, [isOpen, focusedIndex, optionItems, id]);
+    const handleOptionHover = useCallback((index) => {
+        handleMouseMove();
+        setFocusedIndex(index);
+    }, [handleMouseMove, setFocusedIndex]);
+    // Multiple select 관련 로직
+    const currentSelectedValues = multiple && Array.isArray(value) ? value : [];
+    const { buttonText: selectAllButtonText, toggleSelectAll, getSelectedTagsData, removeTag, } = useMultiSelect(currentSelectedValues, optionItems);
+    const handleSelectAll = () => {
+        if (!multiple || !onChange)
+            return;
+        const newSelectedValues = toggleSelectAll();
+        onChange(newSelectedValues);
+    };
+    const handleEdit = () => {
+        onEdit?.();
+    };
+    const handleComplete = () => {
+        if (multiple) {
+            const tags = getSelectedTagsData();
+            setSelectedTags(tags);
+        }
+        closeDropdown();
+    };
+    const handleRemoveTag = (tagId) => {
+        if (!onChange)
+            return;
+        if (multiple) {
+            const newSelectedValues = removeTag(tagId);
+            onChange(newSelectedValues);
+            setSelectedTags((prev) => prev.filter((tag) => tag.id !== tagId));
+        }
+    };
+    useScrollLock(isOpen, dropdownRef);
+    useLayoutEffect(() => {
+        if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
+            const dropdownWidth = dropdownRef.current.offsetWidth;
+            internalRef.current.style.width = `${dropdownWidth}px`;
+        }
+    }, [autoWidth, isOpen, optionItems]);
+    useImperativeHandle(ref, () => internalRef.current, []);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: internalRef, className: classNames('ncua-selectbox', `ncua-selectbox--${size}`, {
+                    'ncua-selectbox--open': isOpen,
+                    'ncua-selectbox--disabled': disabled,
+                    'ncua-selectbox--simple': type === 'simple',
+                    'ncua-selectbox--multiple': multiple,
+                    destructive: destructive,
+                }, className), ...props, children: [_jsxs("div", { className: classNames('ncua-selectbox__content'), onClick: toggleDropdown, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": `selectbox-options-${id || 'default'}`, "aria-disabled": disabled, "aria-label": selectedOption ? selectedOption.label : placeholder, "aria-activedescendant": activeDescendantId, children: [_jsxs("div", { className: "ncua-selectbox__content-inner", children: [_jsx("div", { className: "ncua-selectbox__value", children: _jsx(DisplayValue, { displayValue: displayValue }) }), _jsx(ChevronDown, { width: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM, height: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM, color: disabled ? COLOR.gray300 : COLOR.gray500, className: classNames('ncua-selectbox__arrow', {
+                                            'ncua-selectbox__arrow--up': isOpen,
+                                        }) })] }), _jsx(SelectDropdown, { ref: dropdownRef, isOpen: isOpen, direction: dropdownDirection, size: size, options: optionItems, value: value, focusedIndex: focusedIndex, maxHeight: maxHeight, listboxId: `selectbox-options-${id || 'default'}`, multiple: multiple, showFooterButtons: multiple, selectAllButtonText: selectAllButtonText, componentType: "selectbox", isKeyboardNavigation: isKeyboardNavigation, activeDescendantId: activeDescendantId, align: align, onOptionSelect: handleDropdownSelect, onMouseMove: handleMouseMove, onOptionHover: handleOptionHover, onSelectAll: handleSelectAll, onEdit: handleEdit, onComplete: handleComplete, children: children })] }), hintText && (_jsx(HintText, { destructive: destructive, className: "ncua-hint-text", children: hintText })), register && (_jsx("input", { type: "hidden", ...register, value: multiple ? JSON.stringify(value || []) : String(value || '') }))] }), selectedTags.length > 0 && (_jsx("div", { className: "ncua-selectbox__tags", children: selectedTags.map((tag) => (_jsx(Tag, { text: tag.label, size: "sm", close: true, onButtonClick: () => handleRemoveTag(tag.id) }, tag.id))) }))] }));
+});
+SelectBox.displayName = 'SelectBox';
+export { DEFAULT_MAX_HEIGHT, SelectBox };

package/dist/{types/src/components/selectbox → temp/src/components/select-box}/index.d.ts

@@ -1,2 +1 @@
 export { SelectBox, type SelectBoxProps } from './SelectBox';
-//# sourceMappingURL=index.d.ts.map

package/dist/temp/src/components/select-box/index.js

@@ -0,0 +1 @@
+export { SelectBox } from './SelectBox';

package/dist/temp/src/components/select-dropdown/SelectDropdown.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import type { DropdownDirection, OptionSelectHandler, OptionType, OptionValue } from '../../types/dropdown';
+type SelectDropdownProps = ComponentPropsWithRef<'div'> & {
+    isOpen: boolean;
+    direction?: DropdownDirection;
+    size?: 'xs' | 'sm' | 'md';
+    options: OptionType[];
+    value?: OptionValue;
+    focusedIndex: number;
+    maxHeight?: number;
+    listboxId?: string;
+    onOptionSelect: OptionSelectHandler;
+    onMouseMove?: () => void;
+    isKeyboardNavigation?: () => boolean;
+    onOptionHover?: (validIndex: number) => void;
+    children?: ReactNode;
+    multiple?: boolean;
+    showFooterButtons?: boolean;
+    selectAllButtonText?: string;
+    onSelectAll?: () => void;
+    onEdit?: () => void;
+    onComplete?: () => void;
+    activeDescendantId?: string;
+    componentType?: 'selectbox' | 'combobox';
+    align?: 'left' | 'right';
+};
+declare const SelectDropdown: import("react").ForwardRefExoticComponent<Omit<SelectDropdownProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type { DropdownDirection, SelectDropdownProps };
+export { SelectDropdown };

package/dist/temp/src/components/select-dropdown/SelectDropdown.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { Button } from '../button';
+const SelectDropdown = forwardRef(({ isOpen, direction = 'down', size = 'xs', options, value, focusedIndex, maxHeight, listboxId = 'selectbox-options-default', onOptionSelect, onMouseMove, isKeyboardNavigation, onOptionHover, children, multiple = false, showFooterButtons = false, selectAllButtonText = '전체 선택', onSelectAll, onEdit, onComplete, className, activeDescendantId, componentType, align = 'left', ...props }, ref) => {
+    if (!isOpen)
+        return null;
+    return (_jsxs("div", { ref: ref, className: classNames('ncua-select-dropdown', `ncua-select-dropdown--${direction}`, `ncua-select-dropdown--${size}`, {
+            'ncua-select-dropdown--multiple': multiple,
+            'ncua-select-dropdown--align-right': align === 'right',
+            'ncua-select-dropdown--selectbox-single': componentType === 'selectbox' && !multiple,
+        }, className), onMouseMove: onMouseMove, onClick: (e) => e.stopPropagation(), ...props, children: [_jsx("div", { className: "ncua-select-dropdown__content", children: _jsxs("ul", { className: "ncua-select-dropdown__options", role: "listbox", id: listboxId, style: { maxHeight }, children: [options.map((option, index) => {
+                            const isFocused = index === focusedIndex;
+                            const optionId = `${listboxId}-${option.id}`;
+                            const isSelected = multiple && Array.isArray(value) ? value.includes(option.id) : option.id === value;
+                            const handleMouseEnter = () => {
+                                onOptionHover?.(index);
+                            };
+                            return (_jsxs("li", { id: optionId, className: classNames('ncua-select-dropdown__option', {
+                                    'ncua-select-dropdown__option--selected': isSelected,
+                                    'ncua-select-dropdown__option--focused': isFocused,
+                                }), onClick: () => onOptionSelect(option), onMouseEnter: handleMouseEnter, role: "option", "aria-selected": isSelected, children: [option.icon && (_jsx("span", { className: "ncua-select-dropdown__option-icon", children: _jsx(option.icon, { width: 16, height: 16 }) })), _jsx("span", { className: "ncua-select-dropdown__option-text", children: option.label })] }, option.id));
+                        }), children] }) }), showFooterButtons && (_jsx("div", { className: "ncua-select-dropdown__footer", children: _jsxs("div", { className: "ncua-select-dropdown__footer-buttons", children: [_jsx("div", { className: "ncua-select-dropdown__footer-left", children: multiple && (_jsx(Button, { label: selectAllButtonText, hierarchy: "text", size: "xs", onClick: onSelectAll, underline: true })) }), _jsxs("div", { className: "ncua-select-dropdown__footer-right", children: [_jsx(Button, { label: "\uD3B8\uC9D1", hierarchy: "secondary-gray", size: "xs", onClick: onEdit }), multiple && _jsx(Button, { label: "\uC120\uD0DD \uC644\uB8CC", hierarchy: "secondary", size: "xs", onClick: onComplete })] })] }) }))] }));
+});
+SelectDropdown.displayName = 'SelectDropdown';
+export { SelectDropdown };

package/dist/temp/src/components/select-dropdown/index.d.ts

@@ -0,0 +1 @@
+export { type DropdownDirection, SelectDropdown, type SelectDropdownProps } from './SelectDropdown';

package/dist/temp/src/components/select-dropdown/index.js

@@ -0,0 +1 @@
+export { SelectDropdown } from './SelectDropdown';

package/dist/temp/src/components/shared/hintText/HintText.d.ts

@@ -0,0 +1,7 @@
+interface HintTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    as?: React.ElementType;
+    destructive?: boolean;
+    children: React.ReactNode;
+}
+export declare const HintText: ({ as: Component, children, className, destructive, ...props }: HintTextProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/temp/src/components/shared/hintText/HintText.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+export const HintText = ({ as: Component = 'span', children, className, destructive, ...props }) => {
+    return (_jsx(Component, { className: classNames('ncua-hint-text', { destructive }, className), ...props, children: children }));
+};

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

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

package/dist/temp/src/components/shared/hintText/index.js

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

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

@@ -0,0 +1,2 @@
+export * from './hintText';
+export * from './label';

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

@@ -0,0 +1,2 @@
+export * from './hintText';
+export * from './label';

package/dist/temp/src/components/shared/label/Label.d.ts

@@ -0,0 +1,7 @@
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    as?: React.ElementType;
+    isRequired?: boolean;
+    children: React.ReactNode;
+}
+export declare const Label: ({ as: Component, children, className, isRequired, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/temp/src/components/shared/label/Label.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+export const Label = ({ as: Component = 'label', children, className, isRequired, ...props }) => {
+    return (_jsx(Component, { className: classNames('ncua-label', { 'is-required': isRequired }, className), ...props, children: children }));
+};

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

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

package/dist/temp/src/components/shared/label/index.js

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

package/dist/temp/src/components/slider/Slider.d.ts

@@ -0,0 +1,14 @@
+import { type SliderOptions } from '../../../assets/scripts/slider';
+export type SliderLabelPosition = SliderOptions['labelPosition'];
+export interface SliderProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number | [number, number];
+    onChange?: (value: number | [number, number]) => void;
+    labelPosition?: SliderLabelPosition;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const Slider: ({ min, max, step, value, onChange, labelPosition, disabled, className, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export default Slider;

package/dist/temp/src/components/slider/Slider.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Slider as NcuaSlider } from '../../../assets/scripts/slider';
+export const Slider = ({ min = 0, max = 100, step = 1, value = 0, onChange, labelPosition, disabled = false, className, }) => {
+    const containerRef = useRef(null);
+    const sliderInstanceRef = useRef(null);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        sliderInstanceRef.current = new NcuaSlider(containerRef.current, {
+            min,
+            max,
+            step,
+            value,
+            onChange,
+            labelPosition,
+            disabled,
+        });
+        return () => {
+            if (sliderInstanceRef.current) {
+                sliderInstanceRef.current.destroy();
+                sliderInstanceRef.current = null;
+            }
+        };
+    }, [typeof value, onChange, min, max, step, labelPosition]);
+    useEffect(() => {
+        if (sliderInstanceRef.current) {
+            sliderInstanceRef.current.setValue(value);
+        }
+    }, [sliderInstanceRef, value]);
+    useEffect(() => {
+        if (sliderInstanceRef.current) {
+            if (disabled) {
+                sliderInstanceRef.current.disable();
+            }
+            else {
+                sliderInstanceRef.current.enable();
+            }
+        }
+    }, [disabled]);
+    return _jsx("div", { ref: containerRef, className: `ncua-slider ${className || ''}` });
+};
+export default Slider;