@ncds/ui-admin 1.3.0 → 1.5.0

package/dist/cjs/src/components/combobox/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComboBox", {
+  enumerable: true,
+  get: function () {
+    return _ComboBox.ComboBox;
+  }
+});
+var _ComboBox = require("./ComboBox");

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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomInput = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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 CustomInput = exports.CustomInput = /*#__PURE__*/(0, _react.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 (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)("input", __assign({
+      ref: ref,
+      disabled: disabled,
+      autoComplete: props.autoComplete || 'off'
+    }, props)), (0, _jsxRuntime.jsx)("label", __assign({
+      className: "ncua-date-picker__ico",
+      htmlFor: props.id
+    }, {
+      children: (0, _jsxRuntime.jsx)(_dynamic.default, {
+        name: iconName,
+        width: svgSize,
+        height: svgSize
+      })
+    }))]
+  });
+});
+CustomInput.displayName = 'CustomInput';

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

@@ -7,9 +7,11 @@ exports.DatePicker = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ko = require("flatpickr/dist/l10n/ko");
+var _moment = _interopRequireDefault(require("moment"));
 var _react = require("react");
 var _reactFlatpickr = _interopRequireDefault(require("react-flatpickr"));
-var _color = require("../../../constant/color");
+var _datePicker = require("../../utils/date-picker");
+var _CustomInput = require("./CustomInput");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -29,6 +31,10 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
+var isValidDate = function (dateString) {
+  var date = new Date(dateString);
+  return date instanceof Date && !isNaN(date.getTime());
+};
 var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.shouldFocus,
     shouldFocus = _b === void 0 ? true : _b,
@@ -37,48 +43,144 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     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 = (0, _datePicker.formatDateInput)(dateStr);
+    isValidDate(formattedDate) ? onChangeDate(formattedDate) : onChangeDate(dateStr);
+  };
+  var onInputHandler = function (e) {
+    var target = e.target;
+    var input = target.value;
+    var formattedInput = (0, _datePicker.formatDateInput)(input);
+    if (formattedInput === input) return;
+    target.value = formattedInput;
+  };
+  var onHourInputHandler = function (e) {
+    var target = e.target;
+    var input = target.value;
+    var formattedInput = (0, _datePicker.formatHourInput)(input);
+    if (formattedInput === input) return;
+    target.value = formattedInput;
   };
+  var onMinuteInputHandler = function (e) {
+    var target = e.target;
+    var input = target.value;
+    var formattedInput = (0, _datePicker.formatMinuteInput)(input);
+    if (formattedInput === input) return;
+    target.value = formattedInput;
+  };
+  var inputId = (0, _react.useId)();
   var options = __assign({
     mode: 'single',
     static: true,
     locale: _ko.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 = (0, _react.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 = (0, _moment.default)(currentDate);
+    return isEndDate ? momentDate.endOf('day').format(format) : momentDate.startOf('day').format(format);
+  }, [currentDate, isEndDate, options.enableSeconds, options.enableTime, options.noCalendar]);
   return (0, _jsxRuntime.jsxs)("div", __assign({
     className: (0, _classnames.default)('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: [(0, _jsxRuntime.jsx)(_reactFlatpickr.default, __assign({}, attrs, {
       ref: ref || undefined,
       className: (0, _classnames.default)('ncua-date-picker__input'),
       options: options,
-      value: currentDate
-    })), (0, _jsxRuntime.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 (0, _jsxRuntime.jsx)(_CustomInput.CustomInput, __assign({}, props, {
+          id: inputId,
+          iconSize: size,
+          disabled: !!attrs.disabled,
+          defaultValue: defaultValue,
+          iconName: iconName,
+          ref: ref,
+          onInput: onInputHandler,
+          placeholder: attrs.placeholder
+        }));
+      }
+    })), attrs.destructive && (0, _jsxRuntime.jsx)("p", __assign({
+      className: "ncua-date-picker__destructive"
     }, {
-      children: (0, _jsxRuntime.jsx)("svg", __assign({
-        xmlns: "http://www.w3.org/2000/svg",
-        width: svgSize,
-        height: svgSize,
-        viewBox: "0 0 16 16",
-        fill: "none"
-      }, {
-        children: (0, _jsxRuntime.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.COLOR.gray300 : 'black',
-          strokeWidth: "1.33333",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        })
-      }))
+      children: attrs.destructive
     }))]
   }));
 });

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

@@ -134,7 +134,9 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
     children: [(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, startDateOptions, {
       ref: undefined,
       size: size
-    })), "-", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, endDateOptions, {
+    })), "~", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({
+      isEndDate: true
+    }, endDateOptions, {
       ref: undefined,
       size: size
     }))]

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

@@ -21,8 +21,8 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 var RangeDatePickerWithButtons = function (_a) {
-  var _b = _a.fixedEndDate,
-    fixedEndDate = _b === void 0 ? (0, _datePicker2.getDateFormat)() : _b,
+  var _b = _a.useYesterdayAsEndDate,
+    useYesterdayAsEndDate = _b === void 0 ? false : _b,
     _c = _a.size,
     size = _c === void 0 ? 'xs' : _c,
     currentButtonId = _a.currentButtonId,
@@ -47,7 +47,11 @@ var RangeDatePickerWithButtons = function (_a) {
       unit: currentPeriodItem.unit
     }));
     startDateOptions.onChangeDate(startDate);
-    endDateOptions.onChangeDate(fixedEndDate);
+    var endDate = useYesterdayAsEndDate ? (0, _datePicker2.getDateFormat)((0, _datePicker2.getSubtractDate)({
+      period: 1,
+      unit: 'days'
+    })) : (0, _datePicker2.getDateFormat)();
+    endDateOptions.onChangeDate(endDate);
   };
   var handleOnChangeDate = function (date, type) {
     type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);

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

@@ -152,14 +152,22 @@ var FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)(function
       className: "ncua-file-input__file-tags"
     }, {
       children: files.map(function (file, index) {
-        return (0, _jsxRuntime.jsx)(_Tag.Tag, {
-          text: file.name,
-          size: size === 'xs' ? 'sm' : 'md',
-          close: true,
-          onButtonClick: function () {
-            return handleRemoveFile(index);
-          }
-        }, "".concat(file.name, "-").concat(index));
+        return (0, _jsxRuntime.jsxs)("div", __assign({
+          className: "ncua-file-input__file-tag-container"
+        }, {
+          children: [(0, _jsxRuntime.jsx)(_Tag.Tag, {
+            text: file.name,
+            size: size === 'xs' ? 'sm' : 'md',
+            close: true,
+            onButtonClick: function () {
+              return handleRemoveFile(index);
+            }
+          }), file.type.startsWith('image/') && (0, _jsxRuntime.jsx)("img", {
+            className: "ncua-file-input__file-image",
+            src: URL.createObjectURL(file),
+            alt: file.name
+          })]
+        }), "".concat(file.name, "-").concat(index));
       })
     }));
   };
@@ -209,7 +217,7 @@ var FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)(function
         disabled: disabled,
         leadingIcon: {
           type: 'icon',
-          icon: 'upload-cloud-02'
+          icon: 'share-01'
         },
         label: buttonLabel
       }), hintText && (0, _jsxRuntime.jsx)(_shared.HintText, __assign({

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _FileInput = require("./FileInput");
+Object.keys(_FileInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FileInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FileInput[key];
+    }
+  });
+});

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

@@ -0,0 +1,263 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageFileInputErrorType = exports.ImageFileInput = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
+var _button = require("../button");
+var _shared = require("../shared");
+var _ImagePreview = require("./components/ImagePreview");
+var _tooltip = require("../tooltip");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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 = void 0 && (void 0).__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));
+};
+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 || (exports.ImageFileInputErrorType = ImageFileInputErrorType = {}));
+var ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.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 = (0, _react.useRef)(null);
+  var _j = (0, _react.useState)([]),
+    internalFiles = _j[0],
+    setInternalFiles = _j[1];
+  var _k = (0, _react.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
+  (0, _react.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 (0, _jsxRuntime.jsxs)("div", __assign({
+      className: "ncua-image-file-input__previews"
+    }, {
+      children: [files.map(function (file, index) {
+        return (0, _jsxRuntime.jsx)(_ImagePreview.ImagePreview, {
+          file: file,
+          onRemove: function () {
+            return handleRemoveFile(index);
+          }
+        }, "".concat(file.name, "-").concat(index));
+      }), showEmptySlot && (0, _jsxRuntime.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: [(0, _jsxRuntime.jsx)(_button.Button, {
+          onlyIcon: true,
+          size: size,
+          className: "ncua-image-file-input__preview-container",
+          onClick: handleBrowseClick,
+          disabled: disabled,
+          label: imagePreviewTooltipLabel
+        }), isButtonHovered && !disabled && (0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+          content: imagePreviewTooltipLabel,
+          position: "bottom"
+        })]
+      }))]
+    }));
+  };
+  var renderHintList = function () {
+    if (!hintItems || hintItems.length === 0) return null;
+    return (0, _jsxRuntime.jsx)("ul", __assign({
+      className: "ncua-file-input__hint-list"
+    }, {
+      children: hintItems.map(function (hint, index) {
+        return (0, _jsxRuntime.jsx)("li", __assign({
+          className: "ncua-file-input__hint-item"
+        }, {
+          children: hint
+        }), index);
+      })
+    }));
+  };
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: (0, _classnames.default)('ncua-image-file-input', "ncua-image-file-input--".concat(size))
+  }, {
+    children: [renderImagePreview(files), showFileInput && (0, _jsxRuntime.jsxs)("div", __assign({
+      className: (0, _classnames.default)('ncua-file-input', "ncua-file-input--".concat(size))
+    }, {
+      children: [(0, _jsxRuntime.jsx)("input", __assign({
+        hidden: true,
+        ref: fileInputRef,
+        type: "file",
+        accept: accept,
+        multiple: multiple,
+        onChange: handleFileChange,
+        tabIndex: -1,
+        "aria-hidden": "true"
+      }, props)), (0, _jsxRuntime.jsxs)("div", __assign({
+        className: "ncua-file-input__input-container"
+      }, {
+        children: [(0, _jsxRuntime.jsxs)("div", __assign({
+          className: "ncua-file-input__label"
+        }, {
+          children: [(0, _jsxRuntime.jsx)(_shared.Label, __assign({
+            isRequired: isRequired
+          }, {
+            children: label
+          })), showHelpIcon && (0, _jsxRuntime.jsx)(_dynamic.default, {
+            className: "ncua-input__help-icon",
+            name: "help-circle"
+          })]
+        })), (0, _jsxRuntime.jsx)(_button.Button, {
+          size: "xs",
+          onClick: handleBrowseClick,
+          disabled: disabled,
+          leadingIcon: {
+            type: 'icon',
+            icon: 'share-01'
+          },
+          label: buttonLabel
+        }), showHintText && hintText && (0, _jsxRuntime.jsx)(_shared.HintText, __assign({
+          destructive: destructive
+        }, {
+          children: hintText
+        }))]
+      })), showHintText && renderHintList()]
+    }))]
+  }));
+});

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImagePreview = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _button = require("../../button");
+var __assign = void 0 && (void 0).__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 ImagePreview = function (_a) {
+  var file = _a.file,
+    onRemove = _a.onRemove;
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: "ncua-image-file-input__preview-container"
+  }, {
+    children: [(0, _jsxRuntime.jsx)("img", {
+      className: "ncua-image-file-input__preview-image",
+      src: URL.createObjectURL(file),
+      alt: file.name
+    }), (0, _jsxRuntime.jsx)(_button.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"
+    })]
+  }));
+};
+exports.ImagePreview = ImagePreview;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ImageFileInput = require("./ImageFileInput");
+Object.keys(_ImageFileInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ImageFileInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ImageFileInput[key];
+    }
+  });
+});