@ncds/ui-admin 1.1.3 → 1.2.0

package/dist/cjs/index.js

@@ -310,4 +310,15 @@ Object.keys(_components).forEach(function (key) {
       return _components[key];
     }
   });
+});
+var _hooks = require("./src/hooks");
+Object.keys(_hooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _hooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _hooks[key];
+    }
+  });
 });

package/dist/cjs/src/components/input/FileInput.js

@@ -0,0 +1,222 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FileInputErrorType = exports.FileInput = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _Tag = require("../tag/Tag");
+var _button = require("../button");
+var _shared = require("../shared");
+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 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 || (exports.FileInputErrorType = FileInputErrorType = {}));
+var FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'xs' : _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,
+    disabled = _a.disabled,
+    label = _a.label,
+    hintItems = _a.hintItems,
+    validation = _a.validation,
+    destructive = _a.destructive,
+    isRequired = _a.isRequired,
+    showHelpIcon = _a.showHelpIcon,
+    hintText = _a.hintText,
+    props = __rest(_a, ["size", "accept", "multiple", "maxFileSize", "maxFileCount", "value", "onChange", "onFileSelect", "onFail", "buttonLabel", "disabled", "label", "hintItems", "validation", "destructive", "isRequired", "showHelpIcon", "hintText"]);
+  var fileInputRef = (0, _react.useRef)(null);
+  var _e = (0, _react.useState)([]),
+    internalFiles = _e[0],
+    setInternalFiles = _e[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;
+    var nextFiles = __spreadArray(__spreadArray([], files, true), validFiles, true);
+    updateFiles(nextFiles);
+    if (onFail && invalidFiles.length > 0) {
+      onFail(invalidFiles);
+    }
+  };
+  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: FileInputErrorType.ALREADY_UPLOADED
+        }));
+        return "continue";
+      }
+      if (!!maxFileSize && file.size > maxFileSize) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: FileInputErrorType.EXCEED_MAX_FILE_SIZE
+        }));
+        return "continue";
+      }
+      if (!!maxFileCount && files.length + validFiles.length >= maxFileCount) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: FileInputErrorType.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 renderFileTagList = function () {
+    if (files.length === 0) return null;
+    return (0, _jsxRuntime.jsx)("div", __assign({
+      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));
+      })
+    }));
+  };
+  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-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)(_uiAdminIcon.default, {
+          className: "ncua-input__help-icon",
+          name: "help-circle"
+        })]
+      })), (0, _jsxRuntime.jsx)(_button.Button, {
+        size: size,
+        onClick: handleBrowseClick,
+        disabled: disabled,
+        leadingIcon: {
+          type: 'icon',
+          icon: 'upload-cloud-02'
+        },
+        label: buttonLabel
+      }), hintText && (0, _jsxRuntime.jsx)(_shared.HintText, __assign({
+        destructive: destructive
+      }, {
+        children: hintText
+      }))]
+    })), renderHintList(), renderFileTagList()]
+  }));
+});

package/dist/cjs/src/components/input/PasswordInput.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PasswordInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = require("@ncds/ui-admin-icon");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _InputBase = require("./InputBase");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("../../hooks");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -36,13 +37,25 @@ var PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(
   var _b = _a.size,
     size = _b === void 0 ? 'xs' : _b,
     props = __rest(_a, ["size"]);
-  var inputRef = (0, _react.useRef)(null);
   var _c = (0, _react.useState)(false),
     isVisible = _c[0],
     setIsVisible = _c[1];
   var _d = (0, _react.useState)(false),
     hasContent = _d[0],
     setHasContent = _d[1];
+  var callbackRef = (0, _hooks.useCallbackRef)(function (node) {
+    if (node) {
+      setHasContent(!!node.value);
+      var handleInput_1 = function () {
+        setHasContent(!!node.value);
+      };
+      node.addEventListener('input', handleInput_1);
+      return function () {
+        node.removeEventListener('input', handleInput_1);
+      };
+    }
+  });
+  var mergedRef = (0, _hooks.useMergeRefs)([ref, callbackRef]);
   var svgProps = {
     width: svgSize[size],
     height: svgSize[size]
@@ -50,29 +63,8 @@ var PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(
   var handleVisibilityChange = function () {
     setIsVisible(!isVisible);
   };
-  (0, _react.useEffect)(function () {
-    if (inputRef.current) {
-      setHasContent(!!inputRef.current.value);
-      var handleInput_1 = function () {
-        var _a;
-        setHasContent(!!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value));
-      };
-      inputRef.current.addEventListener('input', handleInput_1);
-      return function () {
-        var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', handleInput_1);
-      };
-    }
-  }, []);
   return (0, _jsxRuntime.jsx)(_InputBase.InputBase, __assign({
-    ref: function (node) {
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-      inputRef.current = node;
-    },
+    ref: mergedRef,
     size: size,
     type: isVisible ? 'text' : 'password',
     leadingElement: {

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

@@ -35,4 +35,15 @@ Object.keys(_Textarea).forEach(function (key) {
       return _Textarea[key];
     }
   });
+});
+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/hooks/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useCallbackRef", {
+  enumerable: true,
+  get: function () {
+    return _useCallbackRef.useCallbackRef;
+  }
+});
+Object.defineProperty(exports, "useMediaQuery", {
+  enumerable: true,
+  get: function () {
+    return _useMediaQuery.useMediaQuery;
+  }
+});
+Object.defineProperty(exports, "useMergeRefs", {
+  enumerable: true,
+  get: function () {
+    return _useMergeRefs.useMergeRefs;
+  }
+});
+var _useMediaQuery = require("./useMediaQuery");
+var _useMergeRefs = require("./useMergeRefs");
+var _useCallbackRef = require("./useCallbackRef");

package/dist/cjs/src/hooks/useCallbackRef.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCallbackRef = useCallbackRef;
+var _react = require("react");
+/**
+ * A callback ref hook that supports cleanup functions.
+ * This is useful when you need to perform setup/cleanup operations when the ref changes.
+ *
+ * @param callback - Function that receives the node and optionally returns a cleanup function
+ * @returns A callback ref
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const ref = useCallbackRef<HTMLInputElement>((node) => {
+ *     if (node) {
+ *       const handleInput = () => console.log('input changed');
+ *       node.addEventListener('input', handleInput);
+ *
+ *       // Return cleanup function
+ *       return () => {
+ *         node.removeEventListener('input', handleInput);
+ *       };
+ *     }
+ *   });
+ *
+ *   return <input ref={ref} />;
+ * };
+ * ```
+ */
+function useCallbackRef(callback) {
+  var cleanupRef = (0, _react.useRef)();
+  return (0, _react.useCallback)(function (node) {
+    // Cleanup previous ref
+    if (cleanupRef.current) {
+      cleanupRef.current();
+      cleanupRef.current = undefined;
+    }
+    // Set up new ref
+    if (node) {
+      cleanupRef.current = callback(node);
+    } else {
+      callback(null);
+    }
+  }, [callback]);
+}

package/dist/cjs/src/hooks/useMergeRefs.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMergeRefs = useMergeRefs;
+/**
+ * Merges multiple refs into a single callback ref.
+ * This is useful when you need to forward a ref while also keeping an internal ref.
+ *
+ * @param refs - Array of refs to merge
+ * @returns A callback ref that will update all provided refs
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = forwardRef<HTMLInputElement, Props>((props, ref) => {
+ *   const internalRef = useRef<HTMLInputElement>(null);
+ *   const mergedRef = useMergeRefs([ref, internalRef]);
+ *
+ *   return <input ref={mergedRef} />;
+ * });
+ * ```
+ */
+function useMergeRefs(refs) {
+  return function (node) {
+    refs.forEach(function (ref) {
+      if (ref) {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else {
+          ref.current = node;
+        }
+      }
+    });
+  };
+}

package/dist/esm/index.js

@@ -25,4 +25,5 @@ export * from './src/components/tab';
 export * from './src/components/tag';
 export * from './src/components/toggle';
 export * from './src/components/tooltip';
-export * from './src/components';
+export * from './src/components';
+export * from './src/hooks';

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

@@ -0,0 +1,215 @@
+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';
+import { Tag } from '../tag/Tag';
+import { Button } from '../button';
+import { HintText, Label } from '../shared';
+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 var FileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'xs' : _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,
+    disabled = _a.disabled,
+    label = _a.label,
+    hintItems = _a.hintItems,
+    validation = _a.validation,
+    destructive = _a.destructive,
+    isRequired = _a.isRequired,
+    showHelpIcon = _a.showHelpIcon,
+    hintText = _a.hintText,
+    props = __rest(_a, ["size", "accept", "multiple", "maxFileSize", "maxFileCount", "value", "onChange", "onFileSelect", "onFail", "buttonLabel", "disabled", "label", "hintItems", "validation", "destructive", "isRequired", "showHelpIcon", "hintText"]);
+  var fileInputRef = useRef(null);
+  var _e = useState([]),
+    internalFiles = _e[0],
+    setInternalFiles = _e[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;
+    var nextFiles = __spreadArray(__spreadArray([], files, true), validFiles, true);
+    updateFiles(nextFiles);
+    if (onFail && invalidFiles.length > 0) {
+      onFail(invalidFiles);
+    }
+  };
+  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: FileInputErrorType.ALREADY_UPLOADED
+        }));
+        return "continue";
+      }
+      if (!!maxFileSize && file.size > maxFileSize) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: FileInputErrorType.EXCEED_MAX_FILE_SIZE
+        }));
+        return "continue";
+      }
+      if (!!maxFileCount && files.length + validFiles.length >= maxFileCount) {
+        invalidFiles.push(__assign(__assign({}, file), {
+          errorType: FileInputErrorType.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 renderFileTagList = function () {
+    if (files.length === 0) return null;
+    return _jsx("div", __assign({
+      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));
+      })
+    }));
+  };
+  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-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: size,
+        onClick: handleBrowseClick,
+        disabled: disabled,
+        leadingIcon: {
+          type: 'icon',
+          icon: 'upload-cloud-02'
+        },
+        label: buttonLabel
+      }), hintText && _jsx(HintText, __assign({
+        destructive: destructive
+      }, {
+        children: hintText
+      }))]
+    })), renderHintList(), renderFileTagList()]
+  }));
+});

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

@@ -17,10 +17,11 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { InputBase } from './InputBase';
 import { Eye, EyeOff } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { forwardRef, useEffect, useRef, useState } from 'react';
-import { InputBase } from './InputBase';
+import { useMergeRefs, useCallbackRef } from '../../hooks';
 var svgSize = {
   xs: 14,
   sm: 20
@@ -29,13 +30,25 @@ export var PasswordInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.size,
     size = _b === void 0 ? 'xs' : _b,
     props = __rest(_a, ["size"]);
-  var inputRef = useRef(null);
   var _c = useState(false),
     isVisible = _c[0],
     setIsVisible = _c[1];
   var _d = useState(false),
     hasContent = _d[0],
     setHasContent = _d[1];
+  var callbackRef = useCallbackRef(function (node) {
+    if (node) {
+      setHasContent(!!node.value);
+      var handleInput_1 = function () {
+        setHasContent(!!node.value);
+      };
+      node.addEventListener('input', handleInput_1);
+      return function () {
+        node.removeEventListener('input', handleInput_1);
+      };
+    }
+  });
+  var mergedRef = useMergeRefs([ref, callbackRef]);
   var svgProps = {
     width: svgSize[size],
     height: svgSize[size]
@@ -43,29 +56,8 @@ export var PasswordInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var handleVisibilityChange = function () {
     setIsVisible(!isVisible);
   };
-  useEffect(function () {
-    if (inputRef.current) {
-      setHasContent(!!inputRef.current.value);
-      var handleInput_1 = function () {
-        var _a;
-        setHasContent(!!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value));
-      };
-      inputRef.current.addEventListener('input', handleInput_1);
-      return function () {
-        var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', handleInput_1);
-      };
-    }
-  }, []);
   return _jsx(InputBase, __assign({
-    ref: function (node) {
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-      inputRef.current = node;
-    },
+    ref: mergedRef,
     size: size,
     type: isVisible ? 'text' : 'password',
     leadingElement: {

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

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

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

@@ -0,0 +1,3 @@
+export { useMediaQuery } from './useMediaQuery';
+export { useMergeRefs } from './useMergeRefs';
+export { useCallbackRef } from './useCallbackRef';

package/dist/esm/src/hooks/useCallbackRef.js

@@ -0,0 +1,43 @@
+import { useCallback, useRef } from 'react';
+/**
+ * A callback ref hook that supports cleanup functions.
+ * This is useful when you need to perform setup/cleanup operations when the ref changes.
+ *
+ * @param callback - Function that receives the node and optionally returns a cleanup function
+ * @returns A callback ref
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const ref = useCallbackRef<HTMLInputElement>((node) => {
+ *     if (node) {
+ *       const handleInput = () => console.log('input changed');
+ *       node.addEventListener('input', handleInput);
+ *
+ *       // Return cleanup function
+ *       return () => {
+ *         node.removeEventListener('input', handleInput);
+ *       };
+ *     }
+ *   });
+ *
+ *   return <input ref={ref} />;
+ * };
+ * ```
+ */
+export function useCallbackRef(callback) {
+  var cleanupRef = useRef();
+  return useCallback(function (node) {
+    // Cleanup previous ref
+    if (cleanupRef.current) {
+      cleanupRef.current();
+      cleanupRef.current = undefined;
+    }
+    // Set up new ref
+    if (node) {
+      cleanupRef.current = callback(node);
+    } else {
+      callback(null);
+    }
+  }, [callback]);
+}

package/dist/esm/src/hooks/useMergeRefs.js

@@ -0,0 +1,30 @@
+/**
+ * Merges multiple refs into a single callback ref.
+ * This is useful when you need to forward a ref while also keeping an internal ref.
+ *
+ * @param refs - Array of refs to merge
+ * @returns A callback ref that will update all provided refs
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = forwardRef<HTMLInputElement, Props>((props, ref) => {
+ *   const internalRef = useRef<HTMLInputElement>(null);
+ *   const mergedRef = useMergeRefs([ref, internalRef]);
+ *
+ *   return <input ref={mergedRef} />;
+ * });
+ * ```
+ */
+export function useMergeRefs(refs) {
+  return function (node) {
+    refs.forEach(function (ref) {
+      if (ref) {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else {
+          ref.current = node;
+        }
+      }
+    });
+  };
+}

package/dist/types/index.d.ts

@@ -26,4 +26,5 @@ export * from './src/components/tag';
 export * from './src/components/toggle';
 export * from './src/components/tooltip';
 export * from './src/components';
+export * from './src/hooks';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/input/FileInput.d.ts

@@ -0,0 +1,62 @@
+import { InputBaseProps } from './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 type InvalidFile = File & {
+    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>>;
+//# sourceMappingURL=FileInput.d.ts.map

package/dist/types/src/components/input/index.d.ts

@@ -1,4 +1,5 @@
 export * from './InputBase';
 export * from './PasswordInput';
 export * from './Textarea';
+export * from './FileInput';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { useMediaQuery } from './useMediaQuery';
+export { useMergeRefs } from './useMergeRefs';
+export { useCallbackRef } from './useCallbackRef';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/hooks/useCallbackRef.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A callback ref hook that supports cleanup functions.
+ * This is useful when you need to perform setup/cleanup operations when the ref changes.
+ *
+ * @param callback - Function that receives the node and optionally returns a cleanup function
+ * @returns A callback ref
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const ref = useCallbackRef<HTMLInputElement>((node) => {
+ *     if (node) {
+ *       const handleInput = () => console.log('input changed');
+ *       node.addEventListener('input', handleInput);
+ *
+ *       // Return cleanup function
+ *       return () => {
+ *         node.removeEventListener('input', handleInput);
+ *       };
+ *     }
+ *   });
+ *
+ *   return <input ref={ref} />;
+ * };
+ * ```
+ */
+export declare function useCallbackRef<T>(callback: (node: T | null) => (() => void) | void): React.RefCallback<T>;
+//# sourceMappingURL=useCallbackRef.d.ts.map

package/dist/types/src/hooks/useMergeRefs.d.ts

@@ -0,0 +1,21 @@
+type Ref<T> = React.RefCallback<T> | React.MutableRefObject<T | null> | null | undefined;
+/**
+ * Merges multiple refs into a single callback ref.
+ * This is useful when you need to forward a ref while also keeping an internal ref.
+ *
+ * @param refs - Array of refs to merge
+ * @returns A callback ref that will update all provided refs
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = forwardRef<HTMLInputElement, Props>((props, ref) => {
+ *   const internalRef = useRef<HTMLInputElement>(null);
+ *   const mergedRef = useMergeRefs([ref, internalRef]);
+ *
+ *   return <input ref={mergedRef} />;
+ * });
+ * ```
+ */
+export declare function useMergeRefs<T>(refs: Array<Ref<T>>): React.RefCallback<T>;
+export {};
+//# sourceMappingURL=useMergeRefs.d.ts.map

package/dist/ui-admin/assets/styles/style.css

@@ -1188,6 +1188,60 @@ button {
   color: var(--primary-red-600);
 }
 
+.ncua-file-input {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+.ncua-file-input__input-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+.ncua-file-input__label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.ncua-file-input__file-tags {
+  display: flex;
+  padding: 12px 8px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  align-self: stretch;
+  background: var(--gray-50);
+}
+.ncua-file-input__hint-list {
+  margin: 0;
+  list-style: disc;
+  color: var(--gray-400);
+}
+.ncua-file-input--xs {
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+.ncua-file-input--sm {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-file-input--xs .ncua-file-input__input-container {
+  gap: 4px;
+}
+.ncua-file-input--sm .ncua-file-input__input-container {
+  gap: 6px;
+}
+.ncua-file-input--xs .ncua-file-input__hint-list {
+  font-size: var(--font-size-xxxs);
+  line-height: var(--line-heights-xxxs);
+}
+.ncua-file-input--md .ncua-file-input__hint-list {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .ncua-input {
   display: inline-flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -63,7 +63,7 @@
   "dependencies": {
     "@ncds/types-common": "^1.0.0",
     "@ncds/types-layout": "^1.0.0",
-    "@ncds/ui-admin-icon": "0.0.16",
+    "@ncds/ui-admin-icon": "0.0.17",
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",