@ncds/ui-admin 1.2.2 → 1.4.1

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

@@ -19,9 +19,14 @@ 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 { forwardRef, useId } from 'react';
 import Flatpickr from 'react-flatpickr';
-import { COLOR } from '../../../constant/color';
+import { CustomInput } from './CustomInput';
+import { formatDateInput, formatHourInput, formatMinuteInput } from '../../utils/date-picker';
+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,
@@ -32,46 +37,104 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     datePickerOptions = _a.datePickerOptions,
     attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
   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);
+    },
+    onDestroy: function (selectedDates, dateStr, instance) {
+      var _a, _b;
+      var input = instance.input;
+      if (!input) return;
+      // 메인 input 이벤트 리스너 제거
+      input.removeEventListener('input', onInputHandler);
+      // 시간 input 이벤트 리스너 제거
+      var hourInput = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-hour');
+      if (hourInput) {
+        hourInput.removeEventListener('input', onHourInputHandler);
+      }
+      // 분 input 이벤트 리스너 제거
+      var minuteInput = (_b = input.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector('.flatpickr-min');
+      if (minuteInput) {
+        minuteInput.removeEventListener('input', onMinuteInputHandler);
+      }
+    }
   }, 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';
   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: currentDate,
+      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,7 @@ export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     children: [_jsx(DatePicker, __assign({}, startDateOptions, {
       ref: undefined,
       size: size
-    })), "-", _jsx(DatePicker, __assign({}, endDateOptions, {
+    })), "~", _jsx(DatePicker, __assign({}, endDateOptions, {
       ref: undefined,
       size: size
     }))]

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';

package/dist/esm/src/components/input/InputBase.js

@@ -19,7 +19,7 @@ var __rest = this && this.__rest || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { COLOR } from '../../../constant/color';
 import { HintText } from '../shared/hintText/HintText';
 import { Label } from '../shared/label/Label';
@@ -43,7 +43,27 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
     leadingElement = _a.leadingElement,
     trailingElement = _a.trailingElement,
     showHelpIcon = _a.showHelpIcon,
-    props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement", "showHelpIcon"]);
+    maxLength = _a.maxLength,
+    showTextCount = _a.showTextCount,
+    props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement", "showHelpIcon", "maxLength", "showTextCount"]);
+  var inputRef = useRef(null);
+  var _c = useState(0),
+    textCount = _c[0],
+    setTextCount = _c[1];
+  useEffect(function () {
+    if (inputRef.current && showTextCount) {
+      setTextCount(inputRef.current.value.length);
+      var handleInput_1 = function () {
+        var _a, _b;
+        setTextCount((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.length) !== null && _b !== void 0 ? _b : 0);
+      };
+      inputRef.current.addEventListener('input', handleInput_1);
+      return function () {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', handleInput_1);
+      };
+    }
+  }, [showTextCount]);
   var renderOutsideSlot = function (slot) {
     if (slot.type === 'custom' && slot.placement !== 'outside') {
       return null;
@@ -156,17 +176,41 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
     })
   }, {
     children: [renderLabel(), _jsxs("div", __assign({
-      className: "ncua-input__content"
+      className: "ncua-input__content-wrap"
     }, {
-      children: [leadingElement && renderOutsideSlot(leadingElement), _jsxs("div", __assign({
-        className: classNames('ncua-input__field', "ncua-input__field--".concat(size))
+      children: [_jsxs("div", __assign({
+        className: "ncua-input__content"
+      }, {
+        children: [leadingElement && renderOutsideSlot(leadingElement), _jsxs("div", __assign({
+          className: classNames('ncua-input__field', "ncua-input__field--".concat(size))
+        }, {
+          children: [leadingElement && renderInsideSlot(leadingElement, 'left'), _jsx("input", __assign({
+            ref: function (node) {
+              if (typeof ref === 'function') {
+                ref(node);
+              } else if (ref) {
+                ref.current = node;
+              }
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore - ref assignment is needed for internal tracking
+              inputRef.current = node;
+            },
+            type: "text",
+            disabled: disabled,
+            maxLength: maxLength
+          }, props)), renderClearButton(), trailingElement && renderInsideSlot(trailingElement, 'right'), renderStatusIcon()]
+        })), trailingElement && renderOutsideSlot(trailingElement)]
+      })), showTextCount && maxLength && _jsxs("div", __assign({
+        className: "ncua-input__field-text-count"
       }, {
-        children: [leadingElement && renderInsideSlot(leadingElement, 'left'), _jsx("input", __assign({
-          ref: ref,
-          type: "text",
-          disabled: disabled
-        }, props)), trailingElement && renderInsideSlot(trailingElement, 'right'), renderClearButton(), renderStatusIcon()]
-      })), trailingElement && renderOutsideSlot(trailingElement)]
+        children: [_jsx("output", __assign({
+          className: "ncua-input__field-text-count-current"
+        }, {
+          children: textCount
+        })), _jsxs("span", {
+          children: ["/", maxLength]
+        })]
+      }))]
     })), hintText && _jsx(HintText, __assign({
       className: "ncua-input__hint-text",
       destructive: destructive

package/dist/esm/src/components/input/Textarea.js

@@ -63,26 +63,18 @@ export var Textarea = /*#__PURE__*/forwardRef(function (_a, ref) {
       isRequired: required
     }, {
       children: label
-    })), _jsx("div", __assign({
-      className: "ncua-input__content"
-    }, {
-      children: _jsx("div", __assign({
-        className: "ncua-input__field"
-      }, {
-        children: _jsx("textarea", __assign({
-          ref: function (node) {
-            if (typeof ref === 'function') {
-              ref(node);
-            } else if (ref) {
-              ref.current = node;
-            }
-            textareaRef.current = node;
-          },
-          className: "ncua-input__textarea",
-          disabled: disabled
-        }, props))
-      }))
-    })), shouldShowHintArea && _jsxs("div", __assign({
+    })), _jsx("textarea", __assign({
+      ref: function (node) {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+        textareaRef.current = node;
+      },
+      className: "ncua-input__textarea",
+      disabled: disabled
+    }, props)), shouldShowHintArea && _jsxs("div", __assign({
       className: "ncua-input__text-count-wrap"
     }, {
       children: [hintText && _jsx(HintText, __assign({

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

@@ -1,4 +1,3 @@
 export * from './InputBase';
 export * from './PasswordInput';
-export * from './Textarea';
-export * from './FileInput';
+export * from './Textarea';