@ikatec/nebula-react 1.0.25 → 1.0.26

package/dist/index.js

@@ -2242,15 +2242,9 @@ var StyledAsyncCreatable = createStyledSelect(
   "AsyncCreatable"
 );
 var InputText = React8__namespace.forwardRef(
-  ({
-    className,
-    icon,
-    isError = false,
-    onClean,
-    iconPlacement = "start",
-    disabled,
-    ...props
-  }, ref) => {
+  ({ className, isError = false, onClean, disabled, suffix, ...props }, ref) => {
+    const icon = "icon" in props ? props.icon : null;
+    const iconPlacement = "iconPlacement" in props || props.type !== "password" ? props.iconPlacement || "start" : null;
     const initialInputType = props.type || "text";
     const [type, setType] = React8__namespace.useState(initialInputType);
     const iconClass = {
@@ -2261,71 +2255,92 @@ var InputText = React8__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("relative w-full", {
-          "pointer-events-none": disabled
-        }),
+        className: cn(
+          "w-full flex outline-none",
+          "rounded-input",
+          "border border-inputText-border-default focus-within:ring-[3px] focus-within:ring-inputText-border-focus focus-within:border-inputText-border-focus",
+          "focus-within:text-inputText-text-focus placeholder:text-inputText-text-default disabled:text-inputText-text-disabled",
+          isError && "border-inputText-border-danger focus-within:border-inputText-border-danger focus-within:ring-button-danger-border-focus",
+          disabled && "pointer-events-none"
+        ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds relative w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref,
+                className: cn(
+                  "w-full h-10 outline-none text-sm leading-none font-medium",
+                  "bg-inputText-background-default disabled:bg-inputText-background-disabled",
+                  "text-inputText-text-filled",
+                  "disabled:cursor-not-allowed",
+                  "rounded-input",
+                  "pl-4",
+                  !!suffix && "rounded-r-none",
+                  {
+                    "pl-10 pr-4": !!icon && iconPlacement === "start",
+                    "pr-10": initialInputType === "password",
+                    "pr-10 pl-4": !!icon && iconPlacement === "end" && initialInputType !== "password"
+                  },
+                  className
+                ),
+                ...{ ...props, icon: void 0, iconPlacement: void 0 },
+                disabled,
+                type
+              }
+            ),
+            onClean && props.value && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: cn("absolute top-1/2 transform -translate-y-1/2", {
+                  "right-10": initialInputType === "password" || iconPlacement === "end",
+                  "right-4": initialInputType === "text" && iconPlacement === "start"
+                }),
+                onClick: onClean,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { className: cn("w-4 h-4", iconClass) })
+              }
+            ),
+            initialInputType === "password" && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "nebula-ds absolute right-4 top-1/2 transform -translate-y-1/2",
+                onClick: () => setType((prev) => prev === "text" ? "password" : "text"),
+                children: type === "text" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: cn("w-4 h-4", iconClass) }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: cn("w-4 h-4", iconClass) })
+              }
+            ),
+            icon && initialInputType !== "password" && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn("absolute top-1/2 transform -translate-y-1/2", {
+                  "left-4": iconPlacement === "start",
+                  "right-4": iconPlacement === "end"
+                }),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "w-4 h-4 flex items-center justify-center disabled:text-inputText-icon-disabled",
+                      iconClass
+                    ),
+                    children: icon
+                  }
+                )
+              }
+            )
+          ] }),
+          !!suffix && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              ref,
               className: cn(
-                "w-full h-10 outline-none rounded-input text-sm leading-none font-medium",
-                "bg-inputText-background-default disabled:bg-inputText-background-disabled",
-                "border border-inputText-border-default focus:ring-[3px] focus:ring-inputText-border-focus focus:border-inputText-border-focus",
-                "text-inputText-text-filled focus:text-inputText-text-focus placeholder:text-inputText-text-default disabled:text-inputText-text-disabled",
-                "disabled:cursor-not-allowed",
-                {
-                  "pl-10 pr-4": !!icon && iconPlacement === "start",
-                  "pr-10 pl-4": !!icon && iconPlacement === "end" && initialInputType !== "password",
-                  "px-4": !icon,
-                  "border-inputText-border-danger focus:border-inputText-border-danger focus:ring-button-danger-border-focus": isError
-                },
-                className
+                "w-fit h-10 outline-none rounded-input text-sm leading-none font-medium rounded-l-none flex items-center px-4",
+                "bg-inputText-suffixBackground disabled:bg-inputText-background-disabled",
+                "text-inputText-text-filled",
+                "border-l border-inputText-border-default",
+                "rounded-input rounded-l-none"
               ),
-              ...props,
-              disabled,
-              type
-            }
-          ),
-          onClean && props.value && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: cn("absolute top-1/2 transform -translate-y-1/2", {
-                "right-10": initialInputType === "password" || iconPlacement === "end",
-                "right-4": initialInputType === "text" && iconPlacement === "start"
-              }),
-              onClick: onClean,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { className: cn("w-4 h-4", iconClass) })
-            }
-          ),
-          initialInputType === "password" && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: "nebula-ds absolute right-4 top-1/2 transform -translate-y-1/2",
-              onClick: () => setType((prev) => prev === "text" ? "password" : "text"),
-              children: type === "text" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: cn("w-4 h-4", iconClass) }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: cn("w-4 h-4", iconClass) })
-            }
-          ),
-          icon && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn("absolute top-1/2 transform -translate-y-1/2", {
-                "left-4": iconPlacement === "start",
-                "right-4": iconPlacement === "end" && initialInputType !== "password"
-              }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: cn(
-                    "w-4 h-4 flex items-center justify-center disabled:text-inputText-icon-disabled",
-                    iconClass
-                  ),
-                  children: icon
-                }
-              )
+              children: suffix
             }
           )
         ]
@@ -4243,7 +4258,10 @@ var InputDateTimePickerSingle = ({
   ...rest
 }) => {
   const [innerTimeValue, setInnerTimeValue] = React8.useState(
-    value?.split?.(DATA_TIME_SEPARATOR)?.at?.(-1) ?? ""
+    () => {
+      const [, time] = (value || "")?.split?.(DATA_TIME_SEPARATOR);
+      return time ?? "";
+    }
   );
   const formattedDateByLanguage = formatDateToSubmit(
     value?.split(DATA_TIME_SEPARATOR)?.at(0) ?? ""
@@ -4310,8 +4328,9 @@ var InputDateTimePickerSingle = ({
     if (date && !dateFormatIsValid(date, locale)) {
       handleClearValue();
     }
+    const hasInputtedDate = date.length === "__/__/____".length;
     onChange?.(
-      date + (newTime ? DATA_TIME_SEPARATOR + newTime : ""),
+      date + (newTime && hasInputtedDate ? DATA_TIME_SEPARATOR + newTime : ""),
       innerDate,
       newTime
     );
@@ -4443,11 +4462,11 @@ var InputDateTimePickerSingle = ({
     ) })
   ] });
 };
-var FileUploadError = /* @__PURE__ */ ((FileUploadError2) => {
-  FileUploadError2["MAX_FILES_EXCEEDED"] = "MAX_FILES_EXCEEDED";
-  FileUploadError2["MAXIMUM_FILE_SIZE_EXCEEDED"] = "MAXIMUM_FILE_SIZE_EXCEEDED";
-  FileUploadError2["INVALID_FORMAT"] = "INVALID_FORMAT";
-  return FileUploadError2;
+var FileUploadError = /* @__PURE__ */ ((FileUploadError4) => {
+  FileUploadError4["MAX_FILES_EXCEEDED"] = "MAX_FILES_EXCEEDED";
+  FileUploadError4["MAXIMUM_FILE_SIZE_EXCEEDED"] = "MAXIMUM_FILE_SIZE_EXCEEDED";
+  FileUploadError4["INVALID_FORMAT"] = "INVALID_FORMAT";
+  return FileUploadError4;
 })(FileUploadError || {});
 var useFileUpload = (options = {}) => {
   const {
@@ -4548,9 +4567,6 @@ var useFileUpload = (options = {}) => {
       const newFilesArray = Array.from(newFiles);
       const errors = [];
       setState((prev) => ({ ...prev, errors: [] }));
-      if (!multiple) {
-        clearFiles();
-      }
       if (multiple && maxFiles !== Infinity && state.files.length + newFilesArray.length > maxFiles) {
         errors.push({ error: "MAX_FILES_EXCEEDED" /* MAX_FILES_EXCEEDED */ });
         setState((prev) => ({ ...prev, errors }));
@@ -4585,6 +4601,9 @@ var useFileUpload = (options = {}) => {
         }
       });
       if (validFiles.length > 0) {
+        if (!multiple) {
+          clearFiles();
+        }
         onFilesAdded?.(validFiles);
         setState((prev) => {
           const newFiles2 = !multiple ? validFiles : [...prev.files, ...validFiles];
@@ -4881,6 +4900,7 @@ function FileUpload({
     ) })
   ] });
 }
+FileUpload.displayName = "FileUpload";
 var TextArea = React8__namespace.forwardRef(
   ({
     className,
@@ -4958,6 +4978,102 @@ var TextArea = React8__namespace.forwardRef(
   }
 );
 TextArea.displayName = "TextArea";
+var ProfileImage = ({
+  maxSizeMB = 2,
+  subtitle,
+  onError,
+  maxFiles = Infinity,
+  onRemove,
+  ...rest
+}) => {
+  const maxSize = maxSizeMB * 1024 * 1024;
+  const [
+    { files, isDragging, errors },
+    {
+      handleDragEnter,
+      handleDragLeave,
+      handleDragOver,
+      handleDrop,
+      openFileDialog,
+      removeFile,
+      getInputProps
+    }
+  ] = useFileUpload({
+    multiple: false,
+    maxSize: maxSize > 0 ? maxSize : void 0,
+    accept: "image/*",
+    ...rest,
+    maxFiles
+  });
+  React8.useEffect(() => {
+    onError?.(errors);
+  }, [errors, onError]);
+  const [file] = files;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "button",
+        onClick: openFileDialog,
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        "data-dragging": isDragging || void 0,
+        className: cn(
+          "relative border border-transparent rounded-full size-fit",
+          "bg-fileUpload-background hover:bg-fileUpload-backgroundHover transition-colors",
+          !file && "border-dashed border-fileUpload-border"
+        ),
+        "data-testid": "select-image-profile",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ...getInputProps(),
+              className: "nebula-ds sr-only",
+              "aria-label": "Upload file"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "nebula-ds flex size-12 shrink-0 items-center justify-center rounded-full",
+              "aria-hidden": "true",
+              children: [
+                file && file.preview && /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: file.preview,
+                    alt: file.file.name,
+                    className: "nebula-ds rounded-[inherit] object-cover h-full w-full"
+                  }
+                ),
+                !file && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserIcon, { className: "nebula-ds size-4 opacity-60 text-fileUpload-icon" })
+              ]
+            }
+          ),
+          file && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: "nebula-ds box-border absolute flex items-center justify-center -top-1 -right-1 rounded-full size-5 text-profileImage-removeImageButton-icon border-2 border-profileImage-removeImageButton-border bg-profileImage-removeImageButton-background hover:bg-profileImage-removeImageButton-hover",
+              "data-testid": "remove-profile-image",
+              onClick: (e) => {
+                e.stopPropagation();
+                removeFile(file.id);
+                onRemove?.();
+              },
+              type: "button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "nebula-ds size-2" })
+            }
+          )
+        ]
+      }
+    ) }),
+    !!subtitle && /* @__PURE__ */ jsxRuntime.jsx(Paragraph, { className: "nebula-ds text-center", size: "sm", children: subtitle })
+  ] });
+};
+ProfileImage.displayName = "ProfileImage";
 
 // src/tailwind.ts
 function content({ base = "./" } = {}) {
@@ -5061,6 +5177,7 @@ exports.Paragraph = Paragraph;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
+exports.ProfileImage = ProfileImage;
 exports.Select = StyledSelect;
 exports.Separator = Separator2;
 exports.Skeleton = Skeleton;

package/dist/index.mjs

@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { ChevronRight, Check, Circle, CircleX, Eye, EyeOff, X, Minus, ClockIcon, ChevronsLeft, ChevronLeft, ChevronsRight, MoreHorizontal, ChevronDown, ChevronLeftIcon, ChevronDownIcon, ChevronRightIcon, CalendarIcon, ImageUpIcon, XIcon, PhoneIcon, FileTextIcon, FileAudioIcon, FileVideoIcon, Info, CircleCheckBig } from 'lucide-react';
+import { ChevronRight, Check, Circle, CircleX, Eye, EyeOff, X, Minus, ClockIcon, ChevronsLeft, ChevronLeft, ChevronsRight, MoreHorizontal, ChevronDown, ChevronLeftIcon, ChevronDownIcon, ChevronRightIcon, CalendarIcon, ImageUpIcon, XIcon, UserIcon, PhoneIcon, FileTextIcon, FileAudioIcon, FileVideoIcon, Info, CircleCheckBig } from 'lucide-react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import Select, { components } from 'react-select';
 import Creatable from 'react-select/creatable';
@@ -2202,15 +2202,9 @@ var StyledAsyncCreatable = createStyledSelect(
   "AsyncCreatable"
 );
 var InputText = React8.forwardRef(
-  ({
-    className,
-    icon,
-    isError = false,
-    onClean,
-    iconPlacement = "start",
-    disabled,
-    ...props
-  }, ref) => {
+  ({ className, isError = false, onClean, disabled, suffix, ...props }, ref) => {
+    const icon = "icon" in props ? props.icon : null;
+    const iconPlacement = "iconPlacement" in props || props.type !== "password" ? props.iconPlacement || "start" : null;
     const initialInputType = props.type || "text";
     const [type, setType] = React8.useState(initialInputType);
     const iconClass = {
@@ -2221,71 +2215,92 @@ var InputText = React8.forwardRef(
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn("relative w-full", {
-          "pointer-events-none": disabled
-        }),
+        className: cn(
+          "w-full flex outline-none",
+          "rounded-input",
+          "border border-inputText-border-default focus-within:ring-[3px] focus-within:ring-inputText-border-focus focus-within:border-inputText-border-focus",
+          "focus-within:text-inputText-text-focus placeholder:text-inputText-text-default disabled:text-inputText-text-disabled",
+          isError && "border-inputText-border-danger focus-within:border-inputText-border-danger focus-within:ring-button-danger-border-focus",
+          disabled && "pointer-events-none"
+        ),
         children: [
-          /* @__PURE__ */ jsx(
-            "input",
+          /* @__PURE__ */ jsxs("div", { className: "nebula-ds relative w-full", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                className: cn(
+                  "w-full h-10 outline-none text-sm leading-none font-medium",
+                  "bg-inputText-background-default disabled:bg-inputText-background-disabled",
+                  "text-inputText-text-filled",
+                  "disabled:cursor-not-allowed",
+                  "rounded-input",
+                  "pl-4",
+                  !!suffix && "rounded-r-none",
+                  {
+                    "pl-10 pr-4": !!icon && iconPlacement === "start",
+                    "pr-10": initialInputType === "password",
+                    "pr-10 pl-4": !!icon && iconPlacement === "end" && initialInputType !== "password"
+                  },
+                  className
+                ),
+                ...{ ...props, icon: void 0, iconPlacement: void 0 },
+                disabled,
+                type
+              }
+            ),
+            onClean && props.value && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cn("absolute top-1/2 transform -translate-y-1/2", {
+                  "right-10": initialInputType === "password" || iconPlacement === "end",
+                  "right-4": initialInputType === "text" && iconPlacement === "start"
+                }),
+                onClick: onClean,
+                children: /* @__PURE__ */ jsx(CircleX, { className: cn("w-4 h-4", iconClass) })
+              }
+            ),
+            initialInputType === "password" && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "nebula-ds absolute right-4 top-1/2 transform -translate-y-1/2",
+                onClick: () => setType((prev) => prev === "text" ? "password" : "text"),
+                children: type === "text" ? /* @__PURE__ */ jsx(Eye, { className: cn("w-4 h-4", iconClass) }) : /* @__PURE__ */ jsx(EyeOff, { className: cn("w-4 h-4", iconClass) })
+              }
+            ),
+            icon && initialInputType !== "password" && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn("absolute top-1/2 transform -translate-y-1/2", {
+                  "left-4": iconPlacement === "start",
+                  "right-4": iconPlacement === "end"
+                }),
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "w-4 h-4 flex items-center justify-center disabled:text-inputText-icon-disabled",
+                      iconClass
+                    ),
+                    children: icon
+                  }
+                )
+              }
+            )
+          ] }),
+          !!suffix && /* @__PURE__ */ jsx(
+            "div",
             {
-              ref,
               className: cn(
-                "w-full h-10 outline-none rounded-input text-sm leading-none font-medium",
-                "bg-inputText-background-default disabled:bg-inputText-background-disabled",
-                "border border-inputText-border-default focus:ring-[3px] focus:ring-inputText-border-focus focus:border-inputText-border-focus",
-                "text-inputText-text-filled focus:text-inputText-text-focus placeholder:text-inputText-text-default disabled:text-inputText-text-disabled",
-                "disabled:cursor-not-allowed",
-                {
-                  "pl-10 pr-4": !!icon && iconPlacement === "start",
-                  "pr-10 pl-4": !!icon && iconPlacement === "end" && initialInputType !== "password",
-                  "px-4": !icon,
-                  "border-inputText-border-danger focus:border-inputText-border-danger focus:ring-button-danger-border-focus": isError
-                },
-                className
+                "w-fit h-10 outline-none rounded-input text-sm leading-none font-medium rounded-l-none flex items-center px-4",
+                "bg-inputText-suffixBackground disabled:bg-inputText-background-disabled",
+                "text-inputText-text-filled",
+                "border-l border-inputText-border-default",
+                "rounded-input rounded-l-none"
               ),
-              ...props,
-              disabled,
-              type
-            }
-          ),
-          onClean && props.value && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: cn("absolute top-1/2 transform -translate-y-1/2", {
-                "right-10": initialInputType === "password" || iconPlacement === "end",
-                "right-4": initialInputType === "text" && iconPlacement === "start"
-              }),
-              onClick: onClean,
-              children: /* @__PURE__ */ jsx(CircleX, { className: cn("w-4 h-4", iconClass) })
-            }
-          ),
-          initialInputType === "password" && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "nebula-ds absolute right-4 top-1/2 transform -translate-y-1/2",
-              onClick: () => setType((prev) => prev === "text" ? "password" : "text"),
-              children: type === "text" ? /* @__PURE__ */ jsx(Eye, { className: cn("w-4 h-4", iconClass) }) : /* @__PURE__ */ jsx(EyeOff, { className: cn("w-4 h-4", iconClass) })
-            }
-          ),
-          icon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn("absolute top-1/2 transform -translate-y-1/2", {
-                "left-4": iconPlacement === "start",
-                "right-4": iconPlacement === "end" && initialInputType !== "password"
-              }),
-              children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "w-4 h-4 flex items-center justify-center disabled:text-inputText-icon-disabled",
-                    iconClass
-                  ),
-                  children: icon
-                }
-              )
+              children: suffix
             }
           )
         ]
@@ -4203,7 +4218,10 @@ var InputDateTimePickerSingle = ({
   ...rest
 }) => {
   const [innerTimeValue, setInnerTimeValue] = useState(
-    value?.split?.(DATA_TIME_SEPARATOR)?.at?.(-1) ?? ""
+    () => {
+      const [, time] = (value || "")?.split?.(DATA_TIME_SEPARATOR);
+      return time ?? "";
+    }
   );
   const formattedDateByLanguage = formatDateToSubmit(
     value?.split(DATA_TIME_SEPARATOR)?.at(0) ?? ""
@@ -4270,8 +4288,9 @@ var InputDateTimePickerSingle = ({
     if (date && !dateFormatIsValid(date, locale)) {
       handleClearValue();
     }
+    const hasInputtedDate = date.length === "__/__/____".length;
     onChange?.(
-      date + (newTime ? DATA_TIME_SEPARATOR + newTime : ""),
+      date + (newTime && hasInputtedDate ? DATA_TIME_SEPARATOR + newTime : ""),
       innerDate,
       newTime
     );
@@ -4403,11 +4422,11 @@ var InputDateTimePickerSingle = ({
     ) })
   ] });
 };
-var FileUploadError = /* @__PURE__ */ ((FileUploadError2) => {
-  FileUploadError2["MAX_FILES_EXCEEDED"] = "MAX_FILES_EXCEEDED";
-  FileUploadError2["MAXIMUM_FILE_SIZE_EXCEEDED"] = "MAXIMUM_FILE_SIZE_EXCEEDED";
-  FileUploadError2["INVALID_FORMAT"] = "INVALID_FORMAT";
-  return FileUploadError2;
+var FileUploadError = /* @__PURE__ */ ((FileUploadError4) => {
+  FileUploadError4["MAX_FILES_EXCEEDED"] = "MAX_FILES_EXCEEDED";
+  FileUploadError4["MAXIMUM_FILE_SIZE_EXCEEDED"] = "MAXIMUM_FILE_SIZE_EXCEEDED";
+  FileUploadError4["INVALID_FORMAT"] = "INVALID_FORMAT";
+  return FileUploadError4;
 })(FileUploadError || {});
 var useFileUpload = (options = {}) => {
   const {
@@ -4508,9 +4527,6 @@ var useFileUpload = (options = {}) => {
       const newFilesArray = Array.from(newFiles);
       const errors = [];
       setState((prev) => ({ ...prev, errors: [] }));
-      if (!multiple) {
-        clearFiles();
-      }
       if (multiple && maxFiles !== Infinity && state.files.length + newFilesArray.length > maxFiles) {
         errors.push({ error: "MAX_FILES_EXCEEDED" /* MAX_FILES_EXCEEDED */ });
         setState((prev) => ({ ...prev, errors }));
@@ -4545,6 +4561,9 @@ var useFileUpload = (options = {}) => {
         }
       });
       if (validFiles.length > 0) {
+        if (!multiple) {
+          clearFiles();
+        }
         onFilesAdded?.(validFiles);
         setState((prev) => {
           const newFiles2 = !multiple ? validFiles : [...prev.files, ...validFiles];
@@ -4841,6 +4860,7 @@ function FileUpload({
     ) })
   ] });
 }
+FileUpload.displayName = "FileUpload";
 var TextArea = React8.forwardRef(
   ({
     className,
@@ -4918,6 +4938,102 @@ var TextArea = React8.forwardRef(
   }
 );
 TextArea.displayName = "TextArea";
+var ProfileImage = ({
+  maxSizeMB = 2,
+  subtitle,
+  onError,
+  maxFiles = Infinity,
+  onRemove,
+  ...rest
+}) => {
+  const maxSize = maxSizeMB * 1024 * 1024;
+  const [
+    { files, isDragging, errors },
+    {
+      handleDragEnter,
+      handleDragLeave,
+      handleDragOver,
+      handleDrop,
+      openFileDialog,
+      removeFile,
+      getInputProps
+    }
+  ] = useFileUpload({
+    multiple: false,
+    maxSize: maxSize > 0 ? maxSize : void 0,
+    accept: "image/*",
+    ...rest,
+    maxFiles
+  });
+  useEffect(() => {
+    onError?.(errors);
+  }, [errors, onError]);
+  const [file] = files;
+  return /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "nebula-ds flex justify-center", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "button",
+        onClick: openFileDialog,
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        "data-dragging": isDragging || void 0,
+        className: cn(
+          "relative border border-transparent rounded-full size-fit",
+          "bg-fileUpload-background hover:bg-fileUpload-backgroundHover transition-colors",
+          !file && "border-dashed border-fileUpload-border"
+        ),
+        "data-testid": "select-image-profile",
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...getInputProps(),
+              className: "nebula-ds sr-only",
+              "aria-label": "Upload file"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "nebula-ds flex size-12 shrink-0 items-center justify-center rounded-full",
+              "aria-hidden": "true",
+              children: [
+                file && file.preview && /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: file.preview,
+                    alt: file.file.name,
+                    className: "nebula-ds rounded-[inherit] object-cover h-full w-full"
+                  }
+                ),
+                !file && /* @__PURE__ */ jsx(UserIcon, { className: "nebula-ds size-4 opacity-60 text-fileUpload-icon" })
+              ]
+            }
+          ),
+          file && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "nebula-ds box-border absolute flex items-center justify-center -top-1 -right-1 rounded-full size-5 text-profileImage-removeImageButton-icon border-2 border-profileImage-removeImageButton-border bg-profileImage-removeImageButton-background hover:bg-profileImage-removeImageButton-hover",
+              "data-testid": "remove-profile-image",
+              onClick: (e) => {
+                e.stopPropagation();
+                removeFile(file.id);
+                onRemove?.();
+              },
+              type: "button",
+              children: /* @__PURE__ */ jsx(XIcon, { className: "nebula-ds size-2" })
+            }
+          )
+        ]
+      }
+    ) }),
+    !!subtitle && /* @__PURE__ */ jsx(Paragraph, { className: "nebula-ds text-center", size: "sm", children: subtitle })
+  ] });
+};
+ProfileImage.displayName = "ProfileImage";
 
 // src/tailwind.ts
 function content({ base = "./" } = {}) {
@@ -4929,4 +5045,4 @@ var tailwind = {
   // plugin: () => require("tailwindcss")("node_modules/@nebulareact/dist/tailwind.config.js"),
 };
 
-export { Accordion, AccordionContent, AccordionDescription, AccordionItem, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Caption, Checkbox, StyledCreatable as Creatable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, FileUploadError, Heading, InputDatePickerSingle, InputDateTimePickerSingle, InputPhone, InputText, InputTime, Label, Link, NebulaI18nProvider, Pagination, Paragraph, Popover, PopoverContent, PopoverTrigger, StyledSelect as Select, Separator2 as Separator, Skeleton, Space, SpaceDirectionEnum, SpaceSizeEnum, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TextArea, Toaster, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages16 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useClickOutside, useFileUpload, useKeyPress, useNebulaI18n };
+export { Accordion, AccordionContent, AccordionDescription, AccordionItem, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Caption, Checkbox, StyledCreatable as Creatable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, FileUploadError, Heading, InputDatePickerSingle, InputDateTimePickerSingle, InputPhone, InputText, InputTime, Label, Link, NebulaI18nProvider, Pagination, Paragraph, Popover, PopoverContent, PopoverTrigger, ProfileImage, StyledSelect as Select, Separator2 as Separator, Skeleton, Space, SpaceDirectionEnum, SpaceSizeEnum, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TextArea, Toaster, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages16 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useClickOutside, useFileUpload, useKeyPress, useNebulaI18n };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "React components",
   "publishConfig": {
     "access": "public"