@ncds/ui-admin 1.1.3 → 1.2.1

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/badge/utils.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import { COLOR } from '../../../constant/color';
 import { Dot } from '../dot/Dot';
 var DEFAULT_DOT_COLOR = 'neutral';

package/dist/esm/src/components/breadcrumb/BreadCrumb.js

@@ -9,7 +9,7 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 var BreadcrumbItem = function (_a) {
   var href = _a.href,

package/dist/esm/src/components/button/Button.js

@@ -18,8 +18,8 @@ var __rest = this && this.__rest || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, forwardRef, useEffect, useState } from 'react';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classnames from 'classnames';
-import Icon from '@ncds/ui-admin-icon';
 import { COLOR } from '../../../constant/color';
 import { Dot } from '../dot';
 export var svgSize = {

package/dist/esm/src/components/button/ButtonCloseX.js

@@ -9,7 +9,7 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classnames from 'classnames';
 var svgSize = {
   xs: 16,

package/dist/esm/src/components/button/ButtonGroup.js

@@ -17,7 +17,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 import React, { createElement } from 'react';
 import { COLOR } from '../../../constant/color';

package/dist/esm/src/components/carousel/CarouselArrow.js

@@ -10,7 +10,7 @@ var __assign = this && this.__assign || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 export var CarouselArrow = function (_a) {
   var _b;
   var _c = _a.type,

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

@@ -9,7 +9,7 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import { useEffect, useRef, useState } from 'react';
 export var Dropdown = function (_a) {
   var trigger = _a.trigger,

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

@@ -17,7 +17,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 var iconSizeMap = {

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/dynamic';
+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/InputBase.js

@@ -17,7 +17,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { COLOR } from '../../../constant/color';

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/components/notification/FullWidthNotification.js

@@ -17,7 +17,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { COLOR } from '../../../constant/color';

package/dist/esm/src/components/select/Select.js

@@ -17,7 +17,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { HintText } from '../shared/hintText/HintText';

package/dist/esm/src/components/tag/Tag.js

@@ -9,7 +9,7 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
+import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 import { COLOR } from '../../../constant/color';
 import { Dot } from '../dot';

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/dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '@ncds/ui-admin-icon';
+import { type IconName } from '@ncds/ui-admin-icon/dynamic';
 export type AvatarTrigger = {
     type: 'avatar';
     avatar: string;

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

@@ -1,4 +1,4 @@
-import { IconName } from '@ncds/ui-admin-icon';
+import { type IconName } from '@ncds/ui-admin-icon/dynamic';
 import { ComponentPropsWithoutRef } from 'react';
 export type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
 export type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';

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