@ncds/ui-admin 1.8.1 → 1.8.3

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

@@ -0,0 +1,96 @@
+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 '../../action/button';
+import { Tooltip } from '../../overlays/tooltip';
+import { HintText, Label } from '../../shared';
+import { FileInputErrorType as ImageFileInputErrorType } from '../file-input/FileInput';
+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);
+    useImperativeHandle(ref, () => fileInputRef.current);
+    const [internalFiles, setInternalFiles] = useState([]);
+    const [isButtonHovered, setIsButtonHovered] = useState(false);
+    // 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));
+        // Replace existing file if maxFileCount is 1
+        const nextFiles = maxFileCount === 1 ? validFiles : [...files, ...validFiles];
+        updateFiles(nextFiles);
+        if (onFail && invalidFiles.length > 0) {
+            onFail(invalidFiles);
+        }
+        event.target.value = '';
+    };
+    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: ImageFileInputErrorType.ALREADY_UPLOADED,
+                });
+                continue;
+            }
+            if (!!maxFileSize && file.size > maxFileSize) {
+                invalidFiles.push({
+                    ...file,
+                    errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE,
+                });
+                continue;
+            }
+            // Skip max count check if maxFileCount is 1 (allow replacement)
+            if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
+                invalidFiles.push({
+                    ...file,
+                    errorType: ImageFileInputErrorType.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 renderImagePreview = (files = []) => {
+        const showEmptySlot = maxFileCount ? files.length < maxFileCount : files.length === 0;
+        return (_jsxs("div", { className: "ncua-image-file-input__previews", children: [files.map((file, index) => (_jsx(ImagePreview, { file: file, onRemove: () => handleRemoveFile(index) }, `${file.name}-${index}`))), showEmptySlot && (_jsxs("div", { className: "ncua-image-file-input__empty-slot-wrapper", onMouseEnter: () => !disabled && setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), onClick: handleBrowseClick, children: [_jsx(Button, { onlyIcon: true, size: size, className: classNames('ncua-image-file-input__preview-container'), onClick: handleBrowseClick, disabled: disabled, label: imagePreviewTooltipLabel }), isButtonHovered && !disabled && _jsx(Tooltip, { content: imagePreviewTooltipLabel, position: "bottom" })] }))] }));
+    };
+    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-image-file-input', `ncua-image-file-input--${size}`, { destructive: destructive }), children: [renderImagePreview(files), showFileInput && (_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: "xs", onClick: handleBrowseClick, disabled: disabled, leadingIcon: { type: 'icon', icon: Upload01 }, label: buttonLabel }), showHintText && hintText && _jsx(HintText, { destructive: destructive, children: hintText })] }), showHintText && renderHintList()] }))] }));
+});

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Trash03 } from '@ncds/ui-admin-icon';
+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" })] }));
+};

package/dist/temp/src/components/forms-and-input/image-file-input/components/index.d.ts

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

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

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

package/dist/temp/src/components/forms-and-input/image-file-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ImageFileInput';
+export * from './components';

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

@@ -0,0 +1,2 @@
+export * from './ImageFileInput';
+export * from './components';

package/dist/temp/src/components/forms-and-input/input-base/InputBase.d.ts

@@ -0,0 +1,55 @@
+import type React from 'react';
+import { COLOR } from '../../../../constant/color';
+import type { Size } from '../../../../constant/size';
+import type { SlotIconComponent } from '../../../types/side-slot';
+interface InputSideButtonSlot {
+    type: 'button';
+    label: string;
+    isSubmit?: boolean;
+    onClick: () => void;
+}
+interface InputSideTextSlot {
+    type: 'text';
+    text: string;
+}
+interface InputSideIconSlot {
+    type: 'icon';
+    icon: SlotIconComponent;
+    size?: number;
+    color?: keyof typeof COLOR;
+    className?: string;
+}
+interface InputSideCustomSlot {
+    type: 'custom';
+    children: React.ReactNode;
+    placement?: 'inside' | 'outside';
+}
+type InputLeadingSlotType = InputSideTextSlot | InputSideIconSlot | InputSideCustomSlot;
+type InputTrailingSlotType = InputSideButtonSlot | InputSideIconSlot | InputSideCustomSlot;
+interface InputBaseCommonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    required?: boolean;
+    label?: string;
+    hintText?: string;
+    size?: Extract<Size, 'xs' | 'sm'>;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    validation?: boolean;
+    destructive?: boolean;
+    leadingElement?: InputLeadingSlotType;
+    trailingElement?: InputTrailingSlotType;
+    showHelpIcon?: boolean;
+    showTextCount?: boolean;
+    maxLength?: number;
+}
+interface NoneClearableInputBaseProps extends InputBaseCommonProps {
+    clearText?: never;
+    onClearText?: never;
+}
+interface ClearableInputBaseProps extends InputBaseCommonProps {
+    clearText: boolean;
+    onClearText: () => void;
+}
+type InputBaseProps = NoneClearableInputBaseProps | ClearableInputBaseProps;
+declare const InputBase: React.ForwardRefExoticComponent<InputBaseProps & React.RefAttributes<HTMLInputElement>>;
+export type { InputBaseProps };
+export { InputBase };

package/dist/temp/src/components/forms-and-input/input-base/InputBase.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle, HelpCircle, InfoCircle, X } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { COLOR } from '../../../../constant/color';
+import { HintText } from '../../shared/hintText/HintText';
+import { Label } from '../../shared/label/Label';
+const validationSvgSize = {
+    xs: 14,
+    sm: 16,
+};
+const generalSvgSize = {
+    xs: 14,
+    sm: 20,
+};
+const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled, fullWidth = false, validation, destructive, leadingElement, trailingElement, showHelpIcon, maxLength, showTextCount, className, ...props }, ref) => {
+    const inputRef = useRef(null);
+    const [textCount, setTextCount] = useState(0);
+    useEffect(() => {
+        if (inputRef.current && showTextCount) {
+            setTextCount(inputRef.current.value.length);
+            const handleInput = () => {
+                setTextCount(inputRef.current?.value.length ?? 0);
+            };
+            inputRef.current.addEventListener('input', handleInput);
+            return () => {
+                inputRef.current?.removeEventListener('input', handleInput);
+            };
+        }
+    }, [showTextCount]);
+    const renderOutsideSlot = (slot) => {
+        if (slot.type === 'custom' && slot.placement !== 'outside') {
+            return null;
+        }
+        switch (slot.type) {
+            case 'button':
+                return (_jsx("button", { type: slot.isSubmit ? 'submit' : 'button', className: classNames('ncua-input__button', `ncua-input__button--${size}`), onClick: slot.onClick, children: slot.label }));
+            case 'text':
+                return (_jsx("span", { className: classNames('ncua-input__leading-text', `ncua-input__leading-text--${size}`), children: slot.text }));
+            case 'custom':
+                return slot.children;
+            default:
+                return null;
+        }
+    };
+    const renderInsideSlot = (slot, position) => {
+        switch (slot.type) {
+            case 'icon': {
+                const SlotIcon = slot.icon;
+                return (_jsx("div", { className: "ncua-input__icon-wrap", children: _jsx(SlotIcon, { className: classNames(`ncua-input__${position}-icon`, slot.className), color: slot.color ? COLOR[slot.color] : undefined, width: slot.size ?? generalSvgSize[size], height: slot.size ?? generalSvgSize[size] }) }));
+            }
+            case 'custom':
+                if (slot.placement !== 'inside') {
+                    return null;
+                }
+                return slot.children;
+            default:
+                return null;
+        }
+    };
+    const renderClearButton = () => {
+        if (!props.clearText)
+            return null;
+        return (_jsx("button", { type: "button", className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'), onClick: props.onClearText, children: _jsx(X, { className: "ncua-input__clear-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
+    };
+    const renderStatusIcon = () => {
+        if (destructive) {
+            return (_jsx("div", { className: "ncua-input__icon-wrap ncua-input__right-icon", children: _jsx(InfoCircle, { className: "ncua-input__destructive-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
+        }
+        if (validation) {
+            return (_jsx("div", { className: "ncua-input__icon-wrap ncua-input__right-icon", children: _jsx(CheckCircle, { className: "ncua-input__validation-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
+        }
+        return null;
+    };
+    const renderLabel = () => {
+        if (!label)
+            return null;
+        return (_jsxs("div", { className: classNames('ncua-input__label', `ncua-input__label--${size}`), children: [_jsx(Label, { isRequired: required, htmlFor: props.id, children: label }), showHelpIcon && _jsx(HelpCircle, { className: "ncua-input__help-icon" })] }));
+    };
+    return (_jsxs("div", { className: classNames('ncua-input', `ncua-input--${size}`, {
+            destructive: destructive,
+            'is-disabled': disabled,
+            'full-width': fullWidth,
+            'ncua-input__trailing-button': trailingElement?.type === 'button',
+            'ncua-input__leading-text-wrap': leadingElement?.type === 'text',
+        }, className), children: [renderLabel(), _jsxs("div", { className: "ncua-input__content-wrap", children: [_jsxs("div", { className: "ncua-input__content", children: [leadingElement && renderOutsideSlot(leadingElement), _jsxs("div", { className: classNames('ncua-input__field', `ncua-input__field--${size}`), children: [leadingElement && renderInsideSlot(leadingElement, 'left'), _jsx("input", { ref: (node) => {
+                                            if (typeof ref === 'function') {
+                                                ref(node);
+                                            }
+                                            else if (ref) {
+                                                ref.current = node;
+                                            }
+                                            inputRef.current = node;
+                                        }, type: "text", disabled: disabled, maxLength: maxLength, ...props }), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')] }), trailingElement && renderOutsideSlot(trailingElement)] }), showTextCount && maxLength && (_jsxs("div", { className: "ncua-input__field-text-count", children: [_jsx("output", { className: "ncua-input__field-text-count-current", children: textCount }), _jsxs("span", { children: ["/", maxLength] })] }))] }), hintText && (_jsx(HintText, { className: "ncua-input__hint-text", destructive: destructive, children: hintText }))] }));
+});
+export { InputBase };

package/dist/temp/src/components/forms-and-input/number-input/NumberInput.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef } from 'react';
+import { useMergeRefs } from '../../../hooks';
+import { ButtonStepper } from '../../action/button';
+import { InputBase } from '../input-base/InputBase';
+export const NumberInput = forwardRef(({ size = 'xs', minValue, maxValue, step = 1, stepperPosition, disabled, ...props }, ref) => {
+    const inputRef = useRef(null);
+    const mergedRef = useMergeRefs([ref, inputRef]);
+    const getCurrentValue = useCallback(() => {
+        const value = inputRef.current?.value;
+        return value ? Number.parseFloat(value) : 0;
+    }, []);
+    const updateValue = useCallback((newValue) => {
+        if (!inputRef.current)
+            return;
+        // min/max 범위 체크
+        let clampedValue = newValue;
+        if (minValue !== undefined && clampedValue < minValue) {
+            clampedValue = minValue;
+        }
+        if (maxValue !== undefined && clampedValue > maxValue) {
+            clampedValue = maxValue;
+        }
+        inputRef.current.value = clampedValue.toString();
+        // onChange 이벤트 트리거
+        const event = new Event('input', { bubbles: true });
+        inputRef.current.dispatchEvent(event);
+    }, [minValue, maxValue]);
+    const handleIncrement = useCallback(() => {
+        const currentValue = getCurrentValue();
+        const newValue = currentValue + step;
+        if (maxValue === undefined || newValue <= maxValue) {
+            updateValue(newValue);
+        }
+    }, [getCurrentValue, step, maxValue, updateValue]);
+    const handleDecrement = useCallback(() => {
+        const currentValue = getCurrentValue();
+        const newValue = currentValue - step;
+        if (minValue === undefined || newValue >= minValue) {
+            updateValue(newValue);
+        }
+    }, [getCurrentValue, step, minValue, updateValue]);
+    const handleKeyDown = useCallback((event) => {
+        if (disabled)
+            return;
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            handleIncrement();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            handleDecrement();
+        }
+        // 기존 onKeyDown prop이 있으면 호출
+        props.onKeyDown?.(event);
+    }, [disabled, handleIncrement, handleDecrement, props]);
+    const renderStepperButtonGroup = (position) => {
+        if (position !== stepperPosition) {
+            return null;
+        }
+        return (_jsxs("div", { className: "ncua-input__stepper-button-group", children: [_jsx(ButtonStepper, { size: size, direction: "up", onClick: handleIncrement, disabled: disabled }), _jsx(ButtonStepper, { size: size, direction: "down", onClick: handleDecrement, disabled: disabled })] }));
+    };
+    return (_jsx(InputBase, { type: "number", leadingElement: renderStepperButtonGroup('leading')
+            ? { type: 'custom', children: renderStepperButtonGroup('leading'), placement: 'inside' }
+            : props.leadingElement, trailingElement: renderStepperButtonGroup('trailing')
+            ? { type: 'custom', children: renderStepperButtonGroup('trailing'), placement: 'inside' }
+            : props.trailingElement, ref: mergedRef, size: size, disabled: disabled, min: minValue, max: maxValue, step: step, onKeyDown: handleKeyDown, className: "ncua-input__number", ...props }));
+});

package/dist/temp/src/components/forms-and-input/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/forms-and-input/range-date-picker-with-buttons/RangeDatePickerWithButtons.d.ts

@@ -0,0 +1,71 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import { PERIOD_ITEM, type PeriodItemMap } from '../../../constant/date-picker';
+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;
+    setCurrentButtonId: Dispatch<SetStateAction<keyof T & string>>;
+    periodKeys: (keyof T & string)[];
+    periodItems?: T;
+    size?: 'xs' | 'sm';
+} & RangeDatePickerProps;
+declare const RangeDatePickerWithButtons: <T extends PeriodItemMap = {
+    TODAY: {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    YESTERDAY: {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '3DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '7DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1WEEK': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '15DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1MONTHS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '3MONTHS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1YEAR': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    ENTIRE: {
+        text: string;
+        period: number;
+        unit: null;
+    };
+    NONE: {
+        text: string;
+        period: number;
+        unit: null;
+    };
+}>({ useYesterdayAsEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, periodItems, onDateValidation, }: RangeDatePickerWithButtonsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export type { PeriodKeyType };
+export { RangeDatePickerWithButtons };

package/dist/temp/src/components/forms-and-input/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 '../../action/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/forms-and-input/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/forms-and-input/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: "", 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/forms-and-input/select-box/SelectBox.d.ts

@@ -0,0 +1,27 @@
+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';
+declare const DEFAULT_MAX_HEIGHT = 275;
+type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> & {
+    children?: ReactNode;
+    placeholder?: string;
+    disabledPlaceholder?: boolean;
+    hintText?: string;
+    destructive?: boolean;
+    size?: Extract<Size, 'xs' | 'sm' | 'md'>;
+    autoWidth?: boolean;
+    type?: 'default' | 'simple';
+    optionItems?: OptionType[];
+    value?: OptionValue;
+    onChange?: OptionChangeHandler;
+    disabled?: boolean;
+    register?: UseFormRegisterReturn;
+    maxHeight?: number;
+    multiple?: boolean;
+    onEdit?: () => void;
+    align?: 'left' | 'right';
+};
+declare const SelectBox: import("react").ForwardRefExoticComponent<Omit<SelectBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type { SelectBoxProps };
+export { DEFAULT_MAX_HEIGHT, SelectBox };