@ncds/ui-admin 1.3.0 → 1.5.0

package/dist/esm/src/components/date-picker/CustomInput.js

@@ -0,0 +1,45 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import Icon from '@ncds/ui-admin-icon/dynamic';
+export var CustomInput = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var disabled = _a.disabled,
+    iconSize = _a.iconSize,
+    iconName = _a.iconName,
+    props = __rest(_a, ["disabled", "iconSize", "iconName"]);
+  var svgSize = iconSize === 'xs' ? 14 : 16;
+  return _jsxs(_Fragment, {
+    children: [_jsx("input", __assign({
+      ref: ref,
+      disabled: disabled,
+      autoComplete: props.autoComplete || 'off'
+    }, props)), _jsx("label", __assign({
+      className: "ncua-date-picker__ico",
+      htmlFor: props.id
+    }, {
+      children: _jsx(Icon, {
+        name: iconName,
+        width: svgSize,
+        height: svgSize
+      })
+    }))]
+  });
+});
+CustomInput.displayName = 'CustomInput';

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

@@ -19,9 +19,15 @@ var __rest = this && this.__rest || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { Korean } from 'flatpickr/dist/l10n/ko';
-import { forwardRef } from 'react';
+import moment from 'moment';
+import { forwardRef, useId, useMemo } from 'react';
 import Flatpickr from 'react-flatpickr';
-import { COLOR } from '../../../constant/color';
+import { formatDateInput, formatHourInput, formatMinuteInput } from '../../utils/date-picker';
+import { CustomInput } from './CustomInput';
+var isValidDate = function (dateString) {
+  var date = new Date(dateString);
+  return date instanceof Date && !isNaN(date.getTime());
+};
 export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.shouldFocus,
     shouldFocus = _b === void 0 ? true : _b,
@@ -30,48 +36,144 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     size = _c === void 0 ? 'xs' : _c,
     onChangeDate = _a.onChangeDate,
     datePickerOptions = _a.datePickerOptions,
-    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
+    _d = _a.isEndDate,
+    isEndDate = _d === void 0 ? false : _d,
+    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate"]);
   var onChangeDateHandler = function (dateTimeStamp, dateStr) {
-    return onChangeDate(dateStr);
+    var formattedDate = formatDateInput(dateStr);
+    isValidDate(formattedDate) ? onChangeDate(formattedDate) : onChangeDate(dateStr);
+  };
+  var onInputHandler = function (e) {
+    var target = e.target;
+    var input = target.value;
+    var formattedInput = formatDateInput(input);
+    if (formattedInput === input) return;
+    target.value = formattedInput;
+  };
+  var onHourInputHandler = function (e) {
+    var target = e.target;
+    var input = target.value;
+    var formattedInput = formatHourInput(input);
+    if (formattedInput === input) return;
+    target.value = formattedInput;
   };
+  var onMinuteInputHandler = function (e) {
+    var target = e.target;
+    var input = target.value;
+    var formattedInput = formatMinuteInput(input);
+    if (formattedInput === input) return;
+    target.value = formattedInput;
+  };
+  var inputId = useId();
   var options = __assign({
     mode: 'single',
     static: true,
     locale: Korean,
     dateFormat: 'Y-m-d',
     clickOpens: true,
+    time_24hr: true,
     onChange: onChangeDateHandler,
-    allowInvalidPreload: true
+    allowInvalidPreload: true,
+    onReady: function (selectedDates, dateStr, instance) {
+      var _a;
+      var input = instance.input;
+      if (!input) return;
+      input.addEventListener('input', onInputHandler);
+      var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
+      if (!timeInputWrapper) return;
+      var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
+      var minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+      if (!hourInput || !minuteInput) return;
+      hourInput.addEventListener('input', onHourInputHandler);
+      minuteInput.addEventListener('input', onMinuteInputHandler);
+      var handleMouseDown = function (e) {
+        var _a;
+        var flatpickrCalendar = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-calendar.open');
+        if (flatpickrCalendar && !flatpickrCalendar.contains(e.target)) {
+          var timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
+          timeInputs.forEach(function (timeInput) {
+            if (document.activeElement === timeInput) {
+              timeInput.blur();
+            }
+          });
+        }
+      };
+      document.addEventListener('mousedown', handleMouseDown, true);
+      instance._handleMouseDown = handleMouseDown;
+    },
+    onDestroy: function (selectedDates, dateStr, instance) {
+      var _a;
+      var input = instance.input;
+      if (!input) return;
+      // 메인 input 이벤트 리스너 제거
+      input.removeEventListener('input', onInputHandler);
+      var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
+      if (!timeInputWrapper) return;
+      // 시간 input 이벤트 리스너 제거
+      var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
+      if (hourInput) {
+        hourInput.removeEventListener('input', onHourInputHandler);
+      }
+      // 분 input 이벤트 리스너 제거
+      var minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
+      if (minuteInput) {
+        minuteInput.removeEventListener('input', onMinuteInputHandler);
+      }
+      var handleMouseDown = instance._handleMouseDown;
+      if (handleMouseDown) {
+        document.removeEventListener('mousedown', handleMouseDown, true);
+      }
+    }
   }, datePickerOptions);
-  var svgSize = size === 'xs' ? 14 : 16;
+  var hasTimeOption = datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.hasOwnProperty('enableTime');
+  var iconName = hasTimeOption && (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.hasOwnProperty('noCalendar')) ? 'clock' : 'calendar';
+  var processedCurrentDate = useMemo(function () {
+    var hasTime = options.enableTime;
+    var isTimeOnly = options.noCalendar;
+    var hasSeconds = options.enableSeconds;
+    if (!hasTime && !isTimeOnly) return currentDate;
+    if (currentDate === null || currentDate === void 0 ? void 0 : currentDate.includes(':')) return currentDate;
+    if (isTimeOnly) {
+      var endTime = hasSeconds ? '23:59:59' : '23:59';
+      var startTime = hasSeconds ? '00:00:00' : '00:00';
+      return isEndDate ? endTime : startTime;
+    }
+    if (!currentDate) return '';
+    var format = hasSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
+    var momentDate = moment(currentDate);
+    return isEndDate ? momentDate.endOf('day').format(format) : momentDate.startOf('day').format(format);
+  }, [currentDate, isEndDate, options.enableSeconds, options.enableTime, options.noCalendar]);
   return _jsxs("div", __assign({
     className: classNames('ncua-date-picker', "ncua-date-picker--".concat(size), {
-      'ncua-date-picker--disabled': attrs.disabled
+      'ncua-date-picker--disabled': attrs.disabled,
+      'ncua-date-picker--has-time': hasTimeOption,
+      'ncua-date-picker--destructive': attrs.destructive
     })
   }, {
     children: [_jsx(Flatpickr, __assign({}, attrs, {
       ref: ref || undefined,
       className: classNames('ncua-date-picker__input'),
       options: options,
-      value: currentDate
-    })), _jsx("span", __assign({
-      className: "ncua-date-picker__ico"
+      value: processedCurrentDate,
+      render: function (_a, ref) {
+        var defaultValue = _a.defaultValue,
+          value = _a.value,
+          props = __rest(_a, ["defaultValue", "value"]);
+        return _jsx(CustomInput, __assign({}, props, {
+          id: inputId,
+          iconSize: size,
+          disabled: !!attrs.disabled,
+          defaultValue: defaultValue,
+          iconName: iconName,
+          ref: ref,
+          onInput: onInputHandler,
+          placeholder: attrs.placeholder
+        }));
+      }
+    })), attrs.destructive && _jsx("p", __assign({
+      className: "ncua-date-picker__destructive"
     }, {
-      children: _jsx("svg", __assign({
-        xmlns: "http://www.w3.org/2000/svg",
-        width: svgSize,
-        height: svgSize,
-        viewBox: "0 0 16 16",
-        fill: "none"
-      }, {
-        children: _jsx("path", {
-          d: "M14 6.66671H2M10.6667 1.33337V4.00004M5.33333 1.33337V4.00004M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.257 13.5903 13.951 13.782 13.5747C14 13.1469 14 12.5868 14 11.4667V5.86671C14 4.7466 14 4.18655 13.782 3.75873C13.5903 3.3824 13.2843 3.07644 12.908 2.88469C12.4802 2.66671 11.9201 2.66671 10.8 2.66671H5.2C4.0799 2.66671 3.51984 2.66671 3.09202 2.88469C2.71569 3.07644 2.40973 3.3824 2.21799 3.75873C2 4.18655 2 4.7466 2 5.86671V11.4667C2 12.5868 2 13.1469 2.21799 13.5747C2.40973 13.951 2.71569 14.257 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z",
-          stroke: attrs.disabled ? COLOR.gray300 : 'black',
-          strokeWidth: "1.33333",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        })
-      }))
+      children: attrs.destructive
     }))]
   }));
 });

package/dist/esm/src/components/date-picker/RangeDatePicker.js

@@ -127,7 +127,9 @@ export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: [_jsx(DatePicker, __assign({}, startDateOptions, {
       ref: undefined,
       size: size
-    })), "-", _jsx(DatePicker, __assign({}, endDateOptions, {
+    })), "~", _jsx(DatePicker, __assign({
+      isEndDate: true
+    }, endDateOptions, {
       ref: undefined,
       size: size
     }))]

package/dist/esm/src/components/date-picker/RangeDatePickerWithButtons.js

@@ -15,8 +15,8 @@ import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
 import { ButtonGroup } from '../button';
 import { RangeDatePicker } from './RangeDatePicker';
 export var RangeDatePickerWithButtons = function (_a) {
-  var _b = _a.fixedEndDate,
-    fixedEndDate = _b === void 0 ? getDateFormat() : _b,
+  var _b = _a.useYesterdayAsEndDate,
+    useYesterdayAsEndDate = _b === void 0 ? false : _b,
     _c = _a.size,
     size = _c === void 0 ? 'xs' : _c,
     currentButtonId = _a.currentButtonId,
@@ -41,7 +41,11 @@ export var RangeDatePickerWithButtons = function (_a) {
       unit: currentPeriodItem.unit
     }));
     startDateOptions.onChangeDate(startDate);
-    endDateOptions.onChangeDate(fixedEndDate);
+    var endDate = useYesterdayAsEndDate ? getDateFormat(getSubtractDate({
+      period: 1,
+      unit: 'days'
+    })) : getDateFormat();
+    endDateOptions.onChangeDate(endDate);
   };
   var handleOnChangeDate = function (date, type) {
     type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);

package/dist/esm/src/components/{input → file-upload}/FileInput.js

@@ -145,14 +145,22 @@ export var FileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       className: "ncua-file-input__file-tags"
     }, {
       children: files.map(function (file, index) {
-        return _jsx(Tag, {
-          text: file.name,
-          size: size === 'xs' ? 'sm' : 'md',
-          close: true,
-          onButtonClick: function () {
-            return handleRemoveFile(index);
-          }
-        }, "".concat(file.name, "-").concat(index));
+        return _jsxs("div", __assign({
+          className: "ncua-file-input__file-tag-container"
+        }, {
+          children: [_jsx(Tag, {
+            text: file.name,
+            size: size === 'xs' ? 'sm' : 'md',
+            close: true,
+            onButtonClick: function () {
+              return handleRemoveFile(index);
+            }
+          }), file.type.startsWith('image/') && _jsx("img", {
+            className: "ncua-file-input__file-image",
+            src: URL.createObjectURL(file),
+            alt: file.name
+          })]
+        }), "".concat(file.name, "-").concat(index));
       })
     }));
   };
@@ -202,7 +210,7 @@ export var FileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
         disabled: disabled,
         leadingIcon: {
           type: 'icon',
-          icon: 'upload-cloud-02'
+          icon: 'share-01'
         },
         label: buttonLabel
       }), hintText && _jsx(HintText, __assign({

package/dist/esm/src/components/file-upload/index.js

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

package/dist/esm/src/components/image-file-input/ImageFileInput.js

@@ -0,0 +1,256 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import Icon from '@ncds/ui-admin-icon/dynamic';
+import { Button } from '../button';
+import { HintText, Label } from '../shared';
+import { ImagePreview } from './components/ImagePreview';
+import { Tooltip } from '../tooltip';
+export var ImageFileInputErrorType;
+(function (ImageFileInputErrorType) {
+  ImageFileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
+  ImageFileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
+  ImageFileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
+})(ImageFileInputErrorType || (ImageFileInputErrorType = {}));
+export var ImageFileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'sm' : _b,
+    accept = _a.accept,
+    _c = _a.multiple,
+    multiple = _c === void 0 ? false : _c,
+    maxFileSize = _a.maxFileSize,
+    maxFileCount = _a.maxFileCount,
+    value = _a.value,
+    onChange = _a.onChange,
+    onFileSelect = _a.onFileSelect,
+    onFail = _a.onFail,
+    _d = _a.buttonLabel,
+    buttonLabel = _d === void 0 ? '파일 찾기' : _d,
+    _e = _a.imagePreviewTooltipLabel,
+    imagePreviewTooltipLabel = _e === void 0 ? '이미지 업로드' : _e,
+    disabled = _a.disabled,
+    label = _a.label,
+    hintItems = _a.hintItems,
+    validation = _a.validation,
+    destructive = _a.destructive,
+    isRequired = _a.isRequired,
+    showHelpIcon = _a.showHelpIcon,
+    hintText = _a.hintText,
+    _f = _a.showFileTagList,
+    showFileTagList = _f === void 0 ? true : _f,
+    _g = _a.showHintText,
+    showHintText = _g === void 0 ? true : _g,
+    _h = _a.showFileInput,
+    showFileInput = _h === void 0 ? true : _h,
+    props = __rest(_a, ["size", "accept", "multiple", "maxFileSize", "maxFileCount", "value", "onChange", "onFileSelect", "onFail", "buttonLabel", "imagePreviewTooltipLabel", "disabled", "label", "hintItems", "validation", "destructive", "isRequired", "showHelpIcon", "hintText", "showFileTagList", "showHintText", "showFileInput"]);
+  var fileInputRef = useRef(null);
+  var _j = useState([]),
+    internalFiles = _j[0],
+    setInternalFiles = _j[1];
+  var _k = useState(false),
+    isButtonHovered = _k[0],
+    setIsButtonHovered = _k[1];
+  // Determine if component is controlled or uncontrolled
+  var isControlled = value !== undefined;
+  var files = isControlled ? value : internalFiles;
+  // Sync internal state with controlled value
+  useEffect(function () {
+    if (isControlled && value) {
+      setInternalFiles(value);
+    }
+  }, [isControlled, value]);
+  var updateFiles = function (newFiles) {
+    if (isControlled) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(newFiles);
+    } else {
+      setInternalFiles(newFiles);
+      onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(newFiles);
+    }
+  };
+  var handleFileChange = function (event) {
+    var selectedFiles = event.target.files;
+    if (!selectedFiles || selectedFiles.length === 0) return;
+    var _a = validateFiles(Array.from(selectedFiles)),
+      validFiles = _a.validFiles,
+      invalidFiles = _a.invalidFiles;
+    // Replace existing file if maxFileCount is 1
+    var nextFiles = maxFileCount === 1 ? validFiles : __spreadArray(__spreadArray([], files, true), validFiles, true);
+    updateFiles(nextFiles);
+    if (onFail && invalidFiles.length > 0) {
+      onFail(invalidFiles);
+    }
+    event.target.value = '';
+  };
+  var validateFiles = function (fileList) {
+    var validFiles = [];
+    var invalidFiles = [];
+    var _loop_1 = function (file) {
+      if (files.some(function (f) {
+        return f.name === file.name && f.size === file.size;
+      })) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: ImageFileInputErrorType.ALREADY_UPLOADED
+        }));
+        return "continue";
+      }
+      if (!!maxFileSize && file.size > maxFileSize) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE
+        }));
+        return "continue";
+      }
+      // Skip max count check if maxFileCount is 1 (allow replacement)
+      if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT
+        }));
+        return "continue";
+      }
+      validFiles.push(file);
+    };
+    for (var _i = 0, fileList_1 = fileList; _i < fileList_1.length; _i++) {
+      var file = fileList_1[_i];
+      _loop_1(file);
+    }
+    return {
+      validFiles: validFiles,
+      invalidFiles: invalidFiles
+    };
+  };
+  var handleBrowseClick = function () {
+    if (fileInputRef.current && !disabled) {
+      fileInputRef.current.click();
+    }
+  };
+  var handleRemoveFile = function (index) {
+    var newFiles = __spreadArray([], files, true);
+    newFiles.splice(index, 1);
+    updateFiles(newFiles);
+  };
+  var renderImagePreview = function (files) {
+    if (files === void 0) {
+      files = [];
+    }
+    var showEmptySlot = maxFileCount ? files.length < maxFileCount : files.length === 0;
+    return _jsxs("div", __assign({
+      className: "ncua-image-file-input__previews"
+    }, {
+      children: [files.map(function (file, index) {
+        return _jsx(ImagePreview, {
+          file: file,
+          onRemove: function () {
+            return handleRemoveFile(index);
+          }
+        }, "".concat(file.name, "-").concat(index));
+      }), showEmptySlot && _jsxs("div", __assign({
+        className: "ncua-image-file-input__empty-slot-wrapper",
+        onMouseEnter: function () {
+          return !disabled && setIsButtonHovered(true);
+        },
+        onMouseLeave: function () {
+          return setIsButtonHovered(false);
+        },
+        onClick: handleBrowseClick
+      }, {
+        children: [_jsx(Button, {
+          onlyIcon: true,
+          size: size,
+          className: "ncua-image-file-input__preview-container",
+          onClick: handleBrowseClick,
+          disabled: disabled,
+          label: imagePreviewTooltipLabel
+        }), isButtonHovered && !disabled && _jsx(Tooltip, {
+          content: imagePreviewTooltipLabel,
+          position: "bottom"
+        })]
+      }))]
+    }));
+  };
+  var renderHintList = function () {
+    if (!hintItems || hintItems.length === 0) return null;
+    return _jsx("ul", __assign({
+      className: "ncua-file-input__hint-list"
+    }, {
+      children: hintItems.map(function (hint, index) {
+        return _jsx("li", __assign({
+          className: "ncua-file-input__hint-item"
+        }, {
+          children: hint
+        }), index);
+      })
+    }));
+  };
+  return _jsxs("div", __assign({
+    className: classNames('ncua-image-file-input', "ncua-image-file-input--".concat(size))
+  }, {
+    children: [renderImagePreview(files), showFileInput && _jsxs("div", __assign({
+      className: classNames('ncua-file-input', "ncua-file-input--".concat(size))
+    }, {
+      children: [_jsx("input", __assign({
+        hidden: true,
+        ref: fileInputRef,
+        type: "file",
+        accept: accept,
+        multiple: multiple,
+        onChange: handleFileChange,
+        tabIndex: -1,
+        "aria-hidden": "true"
+      }, props)), _jsxs("div", __assign({
+        className: "ncua-file-input__input-container"
+      }, {
+        children: [_jsxs("div", __assign({
+          className: "ncua-file-input__label"
+        }, {
+          children: [_jsx(Label, __assign({
+            isRequired: isRequired
+          }, {
+            children: label
+          })), showHelpIcon && _jsx(Icon, {
+            className: "ncua-input__help-icon",
+            name: "help-circle"
+          })]
+        })), _jsx(Button, {
+          size: "xs",
+          onClick: handleBrowseClick,
+          disabled: disabled,
+          leadingIcon: {
+            type: 'icon',
+            icon: 'share-01'
+          },
+          label: buttonLabel
+        }), showHintText && hintText && _jsx(HintText, __assign({
+          destructive: destructive
+        }, {
+          children: hintText
+        }))]
+      })), showHintText && renderHintList()]
+    }))]
+  }));
+});

package/dist/esm/src/components/image-file-input/components/ImagePreview.js

@@ -0,0 +1,37 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../button';
+export var ImagePreview = function (_a) {
+  var file = _a.file,
+    onRemove = _a.onRemove;
+  return _jsxs("div", __assign({
+    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: 'trash-03',
+        color: 'gray200'
+      },
+      label: "Remove image",
+      onClick: onRemove,
+      className: "ncua-image-file-input__preview-remove-button"
+    })]
+  }));
+};

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

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

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

@@ -3,6 +3,7 @@ export * from './breadcrumb';
 export * from './button';
 export * from './carousel';
 export * from './checkbox';
+export * from './combobox';
 export * from './date-picker';
 export * from './divider';
 export * from './dot';
@@ -17,9 +18,12 @@ export * from './progress-bar';
 export * from './progress-circle';
 export * from './radio';
 export * from './select';
+export * from './select-dropdown';
+export * from './selectbox';
 export * from './shared';
 export * from './slider';
 export * from './spinner';
+export * from './switch';
 export * from './tab';
 export * from './tag';
 export * from './toggle';