@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/temp/src/components/dropdown/Dropdown.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DotsVertical } from '@ncds/ui-admin-icon';
+import { useEffect, useRef, useState } from 'react';
+export const Dropdown = ({ trigger, align = 'left', header, groups, className, opened = false, closeOnClickItem = true, closeOnClickOutside = true, }) => {
+    const [isOpen, setIsOpen] = useState(opened);
+    const dropdownRef = useRef(null);
+    const toggleDropdown = () => {
+        setIsOpen(!isOpen);
+    };
+    const handleClickOutside = (event) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+    const handleClickItem = (item) => {
+        if (!item.disabled && item.onClick) {
+            item.onClick();
+            if (closeOnClickItem) {
+                setIsOpen(false);
+            }
+        }
+    };
+    useEffect(() => {
+        if (closeOnClickOutside) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }
+    }, [closeOnClickOutside]);
+    const renderTrigger = () => {
+        switch (trigger.type) {
+            case 'custom':
+                return (_jsx("button", { className: "ncua-dropdown__trigger", onClick: toggleDropdown, children: trigger.children }));
+            case 'icon': {
+                const TriggerIcon = trigger.icon ?? DotsVertical;
+                return (_jsx("button", { className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon", onClick: toggleDropdown, children: _jsx(TriggerIcon, {}) }));
+            }
+            case 'avatar':
+                return (_jsx("button", { className: "ncua-dropdown__trigger ncua-dropdown__trigger--avatar", onClick: toggleDropdown, children: _jsx("div", { className: "ncua-dropdown__avatar", children: _jsx("img", { src: trigger.avatar, alt: "avatar" }) }) }));
+            case 'button':
+                return (_jsx("button", { className: "ncua-dropdown__trigger ncua-dropdown__trigger--button", onClick: toggleDropdown, children: trigger.text }));
+            default:
+                return null;
+        }
+    };
+    const renderHeader = () => {
+        if (!header)
+            return null;
+        if (header.type === 'avatar' && header.avatar) {
+            return (_jsx("div", { className: "ncua-dropdown__header", children: _jsxs("div", { className: "ncua-dropdown__header-avatar-group", children: [_jsx("div", { className: "ncua-dropdown__avatar", children: _jsx("img", { src: header.avatar, alt: "avatar" }) }), _jsxs("div", { className: "ncua-dropdown__header-text", children: [header.title && _jsx("div", { className: "ncua-dropdown__header-title", children: header.title }), header.subtitle && _jsx("div", { className: "ncua-dropdown__header-subtitle", children: header.subtitle })] })] }) }));
+        }
+        if (header.type === 'text' && header.title) {
+            return (_jsx("div", { className: "ncua-dropdown__header", children: _jsx("div", { className: "ncua-dropdown__header-title", children: header.title }) }));
+        }
+        return null;
+    };
+    const renderItem = (item) => {
+        const ItemIcon = item.icon;
+        const itemClasses = [
+            'ncua-dropdown__item',
+            item.disabled ? 'is-disabled' : '',
+            item.type === 'danger' ? 'is-danger' : '',
+            item.className,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (_jsxs("div", { className: itemClasses, children: [_jsx("button", { className: "ncua-dropdown__item-clickable-layer", onClick: () => handleClickItem(item) }), _jsxs("div", { className: "ncua-dropdown__item-content", children: [_jsxs("div", { className: "ncua-dropdown__item-text-group", children: [ItemIcon && _jsx(ItemIcon, { className: "ncua-dropdown__item-icon" }), _jsx("span", { className: "ncua-dropdown__item-text", children: item.text })] }), item.shortcut && _jsx("span", { className: "ncua-dropdown__item-shortcut", children: item.shortcut })] })] }, item.id));
+    };
+    const dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : '']
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: dropdownClasses, ref: dropdownRef, children: [renderTrigger(), isOpen && (_jsxs("div", { className: "ncua-dropdown__menu", children: [renderHeader(), _jsx("div", { className: "ncua-dropdown__menu-items", children: groups.map((group) => (_jsx("div", { className: "ncua-dropdown__group", children: group.items.map(renderItem) }, group.items[0]?.id))) })] }))] }));
+};

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

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

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

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

package/dist/temp/src/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,14 @@
+import { type ButtonProps } from '../button/Button';
+interface ButtonOptions extends Pick<ButtonProps, 'hierarchy' | 'size' | 'leadingIcon' | 'trailingIcon'> {
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+interface EmptyStateProps {
+    title: string;
+    description: string;
+    buttons?: ButtonOptions | ButtonOptions[];
+}
+declare const EmptyState: ({ title, description, buttons }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export type { ButtonOptions };
+export { EmptyState };

package/dist/temp/src/components/empty-state/EmptyState.js

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

package/dist/temp/src/components/empty-state/index.d.ts

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

package/dist/temp/src/components/empty-state/index.js

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

package/dist/temp/src/components/featured-icon/FeaturedIcon.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import type { SlotIconComponent } from '../../types/side-slot';
+type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
+type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';
+type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';
+interface FeaturedIconProps extends Omit<ComponentPropsWithoutRef<'div'>, 'color'> {
+    icon: SlotIconComponent;
+    theme?: FeaturedIconTheme;
+    color?: FeaturedIconColor;
+    size?: FeaturedIconSize;
+    className?: string;
+}
+declare const FeaturedIcon: import("react").ForwardRefExoticComponent<FeaturedIconProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { FeaturedIconTheme, FeaturedIconColor, FeaturedIconSize, FeaturedIconProps };
+export { FeaturedIcon };

package/dist/temp/src/components/featured-icon/FeaturedIcon.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+const iconSizeMap = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 28,
+};
+const FeaturedIcon = forwardRef(({ icon: Icon, theme = 'light-circle', color = 'neutral', size = 'sm', className, ...rest }, ref) => {
+    return (_jsxs("div", { ref: ref, className: classNames('ncua-featured-icon', `ncua-featured-icon--${theme}`, `ncua-featured-icon--${color}`, `ncua-featured-icon--${size}`, className), ...rest, children: [theme === 'outline-circle' && (_jsxs(_Fragment, { children: [_jsx("div", { className: "ncua-featured-icon__outline ncua-featured-icon__outline--inner" }), _jsx("div", { className: "ncua-featured-icon__outline ncua-featured-icon__outline--outer" })] })), _jsx(Icon, { width: iconSizeMap[size], height: iconSizeMap[size] })] }));
+});
+export { FeaturedIcon };

package/dist/temp/src/components/featured-icon/index.d.ts

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

package/dist/temp/src/components/featured-icon/index.js

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

package/dist/temp/src/components/file-input/FileInput.d.ts

@@ -0,0 +1,61 @@
+import type { InputBaseProps } from '../input-base/InputBase';
+export declare enum FileInputErrorType {
+    ALREADY_UPLOADED = "ALREADY_UPLOADED",
+    EXCEED_MAX_FILE_SIZE = "EXCEED_MAX_FILE_SIZE",
+    EXCEED_MAX_FILE_COUNT = "EXCEED_MAX_FILE_COUNT"
+}
+export interface InvalidFile extends Omit<File, 'constructor'> {
+    errorType: FileInputErrorType;
+}
+export interface FileInputProps extends Omit<InputBaseProps, 'clearText' | 'onClearText' | 'hintText' | 'value' | 'onChange'> {
+    /**
+     * Accepted file types
+     * e.g. '.jpg,.png,.pdf' or 'image/*'
+     */
+    accept?: string;
+    /**
+     * Maximum number of files
+     */
+    maxFileCount?: number;
+    /**
+     * Maximum file size in bytes
+     */
+    maxFileSize?: number;
+    /**
+     * Current files (controlled mode)
+     */
+    value?: File[];
+    /**
+     * Callback when files change (controlled mode)
+     */
+    onChange?: (files: File[]) => void;
+    /**
+     * Callback when files are selected (uncontrolled mode)
+     */
+    onFileSelect?: (files: File[]) => void;
+    /**
+     * Callback when file selection fails
+     */
+    onFail?: (files: InvalidFile[]) => void;
+    /**
+     * Label shown on the button
+     */
+    buttonLabel?: string;
+    /**
+     * Hint text items to display as a list
+     */
+    hintItems?: string[];
+    /**
+     * Whether the input is required
+     */
+    isRequired?: boolean;
+    /**
+     * Whether to show the help icon
+     */
+    showHelpIcon?: boolean;
+    /**
+     * Hint text to display
+     */
+    hintText?: string;
+}
+export declare const FileInput: import("react").ForwardRefExoticComponent<FileInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/temp/src/components/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 '../button';
+import { HintText, Label } from '../shared';
+import { Tag } from '../tag/Tag';
+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()] }));
+});

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

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

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

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

package/dist/temp/src/components/horizontal-tab/HorizontalTab.d.ts

@@ -0,0 +1,12 @@
+import { type TabButtonProps, type TabSize, type TabType } from '../tab/TabButton';
+type HorizontalTabProps = {
+    type?: Exclude<TabType, 'line-vertical'>;
+    size?: TabSize;
+    activeTab?: string;
+    fullWidth?: boolean;
+    menus?: TabButtonProps[];
+    className?: string;
+};
+declare const HorizontalTab: ({ type, size, activeTab, fullWidth, menus, className, }: HorizontalTabProps) => import("react/jsx-runtime").JSX.Element | null;
+export type { HorizontalTabProps };
+export { HorizontalTab };

package/dist/temp/src/components/horizontal-tab/HorizontalTab.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { uniqueId } from 'lodash-es';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { TabButton } from '../tab/TabButton';
+const UNDERLINE_GAP = 16;
+const DEFAULT_GAP = 8;
+const HorizontalTab = ({ type = 'button-primary', size = 'sm', activeTab, fullWidth = false, menus = [], className, }) => {
+    const getTabGap = (type) => {
+        const gap = {
+            underline: UNDERLINE_GAP,
+        };
+        return gap[type] ?? DEFAULT_GAP;
+    };
+    if (!menus.length)
+        return null;
+    return (_jsx("div", { className: classNames('ncua-horizontal-tab', `ncua-horizontal-tab--${type}`, `ncua-horizontal-tab--${size}`, {
+            'full-width': fullWidth,
+        }, className), children: _jsx(Swiper, { slidesPerView: "auto", spaceBetween: getTabGap(type), children: menus.map((menu) => {
+                const isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
+                return (_jsx(SwiperSlide, { className: "ncua-horizontal-tab__item", children: _jsx(TabButton, { ...menu, isActive: isActive, tabButtonType: type, size: size }) }, uniqueId('horizontal-tab')));
+            }) }) }));
+};
+export { HorizontalTab };

package/dist/temp/src/components/horizontal-tab/index.d.ts

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

package/dist/temp/src/components/horizontal-tab/index.js

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

package/dist/temp/src/components/image-file-input/ImageFileInput.d.ts

@@ -0,0 +1,70 @@
+import { type InvalidFile } from '../file-input/FileInput';
+import type { InputBaseProps } from '../input-base/InputBase';
+export interface ImageFileInputProps extends Omit<InputBaseProps, 'clearText' | 'onClearText' | 'hintText' | 'value' | 'onChange'> {
+    /**
+     * Accepted file types
+     * e.g. '.jpg,.png,.pdf' or 'image/*'
+     */
+    accept?: string;
+    /**
+     * Maximum number of files
+     */
+    maxFileCount?: number;
+    /**
+     * Maximum file size in bytes
+     */
+    maxFileSize?: number;
+    /**
+     * Current files (controlled mode)
+     */
+    value?: File[];
+    /**
+     * Callback when files change (controlled mode)
+     */
+    onChange?: (files: File[]) => void;
+    /**
+     * Callback when files are selected (uncontrolled mode)
+     */
+    onFileSelect?: (files: File[]) => void;
+    /**
+     * Callback when file selection fails
+     */
+    onFail?: (files: InvalidFile[]) => void;
+    /**
+     * Label shown on the button
+     */
+    buttonLabel?: string;
+    /**
+     * Label shown on the image preview
+     */
+    imagePreviewTooltipLabel?: string;
+    /**
+     * Hint text items to display as a list
+     */
+    hintItems?: string[];
+    /**
+     * Whether the input is required
+     */
+    isRequired?: boolean;
+    /**
+     * Whether to show the help icon
+     */
+    showHelpIcon?: boolean;
+    /**
+     * Hint text to display
+     */
+    hintText?: string;
+    /**
+     * Whether to show the file tag list
+     */
+    showFileTagList?: boolean;
+    /**
+     * Whether to show the hint text
+     */
+    showHintText?: boolean;
+    /**
+     * Whether to show the file input section
+     */
+    showFileInput?: boolean;
+}
+export declare const ImageFileInput: import("react").ForwardRefExoticComponent<ImageFileInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/temp/src/components/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 '../button';
+import { FileInputErrorType as ImageFileInputErrorType } from '../file-input/FileInput';
+import { HintText, Label } from '../shared';
+import { Tooltip } from '../tooltip';
+import { ImagePreview } from './components/ImagePreview';
+export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = false, maxFileSize, maxFileCount, value, onChange, onFileSelect, onFail, buttonLabel = '파일 찾기', imagePreviewTooltipLabel = '이미지 업로드', disabled, label, hintItems, validation, destructive, isRequired, showHelpIcon, hintText, showFileTagList = true, showHintText = true, showFileInput = true, ...props }, ref) => {
+    const fileInputRef = useRef(null);
+    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/image-file-input/components/ImagePreview.d.ts

@@ -0,0 +1,5 @@
+export interface ImagePreviewProps {
+    file: File;
+    onRemove: () => void;
+}
+export declare const ImagePreview: ({ file, onRemove }: ImagePreviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/temp/src/components/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 '../../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/image-file-input/index.d.ts

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

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

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

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

@@ -0,0 +1,45 @@
+export type { SideSlotType, SlotIconComponent } from '../types';
+export * from './badge';
+export * from './badge-group';
+export * from './bread-crumb';
+export * from './button';
+export * from './button-group';
+export * from './carousel-arrow';
+export * from './carousel-number-group';
+export * from './checkbox';
+export * from './combo-box';
+export * from './data-grid';
+export * from './date-picker';
+export * from './divider';
+export * from './dot';
+export * from './dropdown';
+export * from './empty-state';
+export * from './featured-icon';
+export * from './file-input';
+export * from './horizontal-tab';
+export * from './image-file-input';
+export * from './input-base';
+export * from './modal';
+export * from './notification';
+export * from './number-input';
+export * from './pagination';
+export * from './password-input';
+export * from './progress-bar';
+export * from './progress-circle';
+export * from './radio';
+export * from './range-date-picker';
+export * from './range-date-picker-with-buttons';
+export * from './select';
+export * from './select-box';
+export * from './select-dropdown';
+export * from './shared';
+export * from './slider';
+export * from './spinner';
+export * from './switch';
+export * from './tab';
+export * from './table';
+export * from './tag';
+export * from './textarea';
+export * from './toggle';
+export * from './tooltip';
+export * from './vertical-tab';

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

@@ -0,0 +1,44 @@
+export * from './badge';
+export * from './badge-group';
+export * from './bread-crumb';
+export * from './button';
+export * from './button-group';
+export * from './carousel-arrow';
+export * from './carousel-number-group';
+export * from './checkbox';
+export * from './combo-box';
+export * from './data-grid';
+export * from './date-picker';
+export * from './divider';
+export * from './dot';
+export * from './dropdown';
+export * from './empty-state';
+export * from './featured-icon';
+export * from './file-input';
+export * from './horizontal-tab';
+export * from './image-file-input';
+export * from './input-base';
+export * from './modal';
+export * from './notification';
+export * from './number-input';
+export * from './pagination';
+export * from './password-input';
+export * from './progress-bar';
+export * from './progress-circle';
+export * from './radio';
+export * from './range-date-picker';
+export * from './range-date-picker-with-buttons';
+export * from './select';
+export * from './select-box';
+export * from './select-dropdown';
+export * from './shared';
+export * from './slider';
+export * from './spinner';
+export * from './switch';
+export * from './tab';
+export * from './table';
+export * from './tag';
+export * from './textarea';
+export * from './toggle';
+export * from './tooltip';
+export * from './vertical-tab';