@tecsinapse/cortex-react 1.13.1 → 1.13.3-beta.0

package/dist/esm/components/TimePicker/TimeFieldInput.js

@@ -0,0 +1,83 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
+import { useMemo } from 'react';
+import { Input } from '../Input/index.js';
+import { LiaClock } from 'react-icons/lia';
+import { timePickerInputBase } from '../../styles/time-field-input.js';
+import { IoMdClose } from 'react-icons/io';
+import { TimeField } from './TimeField.js';
+
+const { icon } = timePickerInputBase();
+const TimeFieldInput = ({
+  variants,
+  label,
+  disabled = false,
+  value,
+  onChange,
+  onToggle,
+  onClean,
+  hourCycle,
+  granularity
+}) => {
+  const showCloseIcon = useMemo(() => {
+    const hasTime = value != void 0;
+    return hasTime;
+  }, [value]);
+  return /* @__PURE__ */ jsxs(
+    Input.Face,
+    {
+      variants,
+      className: "flex flex-row justify-between",
+      "data-testid": "time-field-input",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: labelStyle({}), children: label }),
+        /* @__PURE__ */ jsx("div", { className: inputBox("", label), children: /* @__PURE__ */ jsx(
+          TimeField,
+          {
+            onClickTime: onToggle,
+            disabled,
+            value,
+            onChange,
+            hourCycle,
+            granularity
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Input.Right, { className: "h-full justify-center", children: showCloseIcon ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "flex bg-transparent items-center",
+            onClick: onClean,
+            disabled,
+            "data-testid": "time-picker-input-base-clean-button",
+            type: "button",
+            children: /* @__PURE__ */ jsx(
+              IoMdClose,
+              {
+                className: icon({ disabled }),
+                "data-testid": "time-picker-input-base-clean-icon"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "flex bg-transparent items-center",
+            onClick: onToggle,
+            disabled,
+            "data-testid": "time-picker-input-base-calendar-button",
+            type: "button",
+            children: /* @__PURE__ */ jsx(
+              LiaClock,
+              {
+                className: icon({ disabled }),
+                "data-testid": "time-picker-input-base-calendar-icon"
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+export { TimeFieldInput };

package/dist/esm/components/TimePicker/TimePickerInput.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import 'react';
+import '../../provider/MenubarContext.js';
+import '../../provider/SnackbarProvider.js';
+import '../../provider/CalendarProvider.js';
+import '../Popover/Context.js';
+import 'react-dropzone';
+import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
+import { useTimePickerInput } from '../../hooks/useTimePickerInput.js';
+import { Popover } from '../Popover/index.js';
+import { Content } from '../Content.js';
+import { TimeFieldInput } from './TimeFieldInput.js';
+import { TimePickerSelector } from './TimePickerSelector.js';
+
+const TimePickerInputWithPopover = (props) => {
+  const {
+    onChange,
+    value,
+    label,
+    variants,
+    hourCycle = 24,
+    disabled = false,
+    granularity = "minute",
+    minuteInterval = 1,
+    hourLabel,
+    minuteLabel,
+    dayPeriodLabel
+  } = props;
+  const {
+    handleTogglePopover,
+    handleTimeFieldChange,
+    handleChangeTimeOnSelector,
+    popoverTime
+  } = useTimePickerInput({
+    value,
+    onChange,
+    minuteInterval
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { disabled: true, children: /* @__PURE__ */ jsx(
+      TimeFieldInput,
+      {
+        variants,
+        label,
+        disabled,
+        value,
+        onChange: handleTimeFieldChange,
+        onClean: () => handleTimeFieldChange(null),
+        onToggle: handleTogglePopover,
+        hourCycle,
+        granularity
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        className: "bg-white shadow-default border-none p-deca flex flex-col",
+        initialFocus: -1,
+        children: /* @__PURE__ */ jsx(
+          TimePickerSelector,
+          {
+            onChangeTime: handleChangeTimeOnSelector,
+            value: popoverTime,
+            hourCycle,
+            minuteInterval,
+            onPressOkButton: handleTogglePopover,
+            hourLabel,
+            minuteLabel,
+            dayPeriodLabel
+          }
+        )
+      }
+    )
+  ] });
+};
+const TimePickerInput = (props) => /* @__PURE__ */ jsx(Popover.Root, { placement: "bottom-start", trigger: "click", children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(TimePickerInputWithPopover, { ...props }) }) });
+
+export { TimePickerInput };

package/dist/esm/components/TimePicker/TimePickerSelector.js

@@ -0,0 +1,136 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Time } from '@internationalized/date';
+import { useMemo } from 'react';
+import { ScrollableDigitSelector } from '../ScrollableDigitSelector.js';
+import clsx from 'clsx';
+import { Button } from '../Button.js';
+import { MdClose } from 'react-icons/md';
+
+const dayPeriodStyle = "p-micro rounded-micro border-1 border-transparent hover:bg-primary-light hover:border-primary cursor-pointer";
+const TimePickerSelector = ({
+  value,
+  hourCycle,
+  minuteInterval,
+  onPressOkButton,
+  onChangeTime,
+  hourLabel = "Hour",
+  minuteLabel = "Minute",
+  dayPeriodLabel = "Day Period"
+}) => {
+  const handleHourChange = (hour) => {
+    let newHour = hour;
+    if (hourCycle === 12) {
+      if (isPM && newHour < 12) {
+        newHour += 12;
+      } else if (!isPM && newHour >= 12) {
+        newHour -= 12;
+      }
+    }
+    const newTime = new Time(newHour, value.minute, value.second);
+    onChangeTime(newTime);
+  };
+  const handleMinuteChange = (minute) => {
+    const newTime = new Time(value.hour, minute, value.second);
+    onChangeTime(newTime);
+  };
+  const handlePeriodChange = (isPM2) => {
+    if (value === void 0) return;
+    let newHour = value.hour;
+    if (hourCycle === 12) {
+      if (isPM2 && newHour < 12) {
+        newHour += 12;
+      } else if (!isPM2 && newHour >= 12) {
+        newHour -= 12;
+      }
+    }
+    const newTime = new Time(newHour, value.minute, value.second);
+    onChangeTime(newTime);
+  };
+  const isPM = value && value?.hour >= 12;
+  const displayHour = useMemo(() => {
+    if (value === void 0) return 0;
+    return hourCycle === 12 ? value.hour === 0 ? 12 : value.hour > 12 ? value.hour - 12 : value.hour : value.hour;
+  }, [value, hourCycle]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "p-micro",
+        variants: {
+          size: "circle",
+          variant: "outline"
+        },
+        onClick: onPressOkButton,
+        children: /* @__PURE__ */ jsx(MdClose, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-x-deca max-h-[300px] overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-base font-bold text-center", children: hourLabel }),
+        /* @__PURE__ */ jsx(
+          ScrollableDigitSelector,
+          {
+            value: displayHour,
+            onChange: handleHourChange,
+            min: hourCycle === 12 ? 1 : 0,
+            max: hourCycle === 12 ? 12 : 23
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-base font-bold text-center", children: minuteLabel }),
+        /* @__PURE__ */ jsx(
+          ScrollableDigitSelector,
+          {
+            value: value?.minute ?? 0,
+            onChange: handleMinuteChange,
+            min: 0,
+            max: 59,
+            step: minuteInterval
+          }
+        )
+      ] }),
+      hourCycle === 12 && /* @__PURE__ */ jsxs("div", { className: "min-w-7 flex flex-col gap-y-micro p-micro", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-base font-bold text-center", children: dayPeriodLabel }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-micro p-micro overflow-auto", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: () => handlePeriodChange(false),
+              className: "flex justify-center",
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: clsx(
+                    dayPeriodStyle,
+                    !isPM && "bg-primary-medium text-white"
+                  ),
+                  children: "AM"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              onClick: () => handlePeriodChange(true),
+              className: "flex justify-center",
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: clsx(
+                    dayPeriodStyle,
+                    isPM && "bg-primary-medium text-white"
+                  ),
+                  children: "PM"
+                }
+              )
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+export { TimePickerSelector };

package/dist/esm/components/Toggle.js

@@ -1,23 +1,27 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { styleLabelElement, styleInputElement, toggle } from '@tecsinapse/cortex-core';
-import React__default, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 const Toggle = forwardRef((props, ref) => {
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: "flex flex-row items-center gap-x-centi",
-      "data-testid": "toggle-div"
-    },
-    /* @__PURE__ */ React__default.createElement("label", { className: styleLabelElement() }, /* @__PURE__ */ React__default.createElement(
-      "input",
-      {
-        type: "checkbox",
-        className: styleInputElement(),
-        ref,
-        "data-testid": "toggle-input",
-        ...props
-      }
-    ), /* @__PURE__ */ React__default.createElement("div", { className: toggle() }))
+      "data-testid": "toggle-div",
+      children: /* @__PURE__ */ jsxs("label", { className: styleLabelElement(), children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            className: styleInputElement(),
+            ref,
+            "data-testid": "toggle-input",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: toggle() })
+      ] })
+    }
   );
 });
 

package/dist/esm/components/Tooltip.js

@@ -1,9 +1,13 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { FloatingArrow } from '@floating-ui/react';
-import React__default, { forwardRef, useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import { cloneWithProps } from '../utils/react.js';
+import '../provider/MenubarContext.js';
+import '../provider/SnackbarProvider.js';
+import '../provider/CalendarProvider.js';
 import './Popover/Context.js';
 import 'react-dropzone';
 import 'uuid';
@@ -34,25 +38,30 @@ const Tooltip = forwardRef(
       floatingStyles,
       getFloatingProps
     } = useFloatingElement({ placement, arrowRef, trigger, delay });
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, cloneWithProps(children, triggerProps), isOpen ? /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        ref: ref || refs.setFloating,
-        className: "bg-black text-white p-2 rounded z-50 shadow-md text-justify",
-        style: {
-          position: strategy,
-          top: y ?? 0,
-          left: x ?? 0,
-          width,
-          height,
-          ...style,
-          ...floatingStyles
-        },
-        ...getFloatingProps()
-      },
-      text,
-      /* @__PURE__ */ React__default.createElement(FloatingArrow, { ref: arrowRef, context, fill: "black" })
-    ) : null);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      cloneWithProps(children, triggerProps),
+      isOpen ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: ref || refs.setFloating,
+          className: "bg-black text-white p-2 rounded z-50 shadow-md text-justify",
+          style: {
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            width,
+            height,
+            ...style,
+            ...floatingStyles
+          },
+          ...getFloatingProps(),
+          children: [
+            text,
+            /* @__PURE__ */ jsx(FloatingArrow, { ref: arrowRef, context, fill: "black" })
+          ]
+        }
+      ) : null
+    ] });
   }
 );
 

package/dist/esm/components/Uploader/Dropzone.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { HiOutlineCloudArrowUp } from 'react-icons/hi2';
 import { button } from '@tecsinapse/cortex-core';
 import clsx from 'clsx';
@@ -11,7 +11,7 @@ const Dropzone = ({
   buttonText = "Select File"
 }) => {
   const { getRootProps, getInputProps, isDragActive, isFileLimitReached } = dropzoneProps;
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ...getRootProps(),
@@ -20,10 +20,19 @@ const Dropzone = ({
         {
           "border-success-medium bg-gray-100": isDragActive
         }
-      )
-    },
-    /* @__PURE__ */ React__default.createElement("input", { ...getInputProps() }),
-    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col justify-center text-center items-center gap-deca" }, /* @__PURE__ */ React__default.createElement(HiOutlineCloudArrowUp, { className: "text-primary-medium", size: 35 }), /* @__PURE__ */ React__default.createElement("div", { className: "gap-mili" }, /* @__PURE__ */ React__default.createElement("p", { className: "text-lg font-semibold", "data-testid": "select-dropzone" }, selectFileText), /* @__PURE__ */ React__default.createElement("p", { className: "text-sm text-secondary-medium" }, dropText)), isFileLimitReached ? /* @__PURE__ */ React__default.createElement(Tooltip, { text: "Voc\xEA s\xF3 pode selecionar um \xFAnico arquivo." }, /* @__PURE__ */ React__default.createElement("button", { disabled: true, className: clsx(button(), "cursor-not-allowed") }, buttonText)) : /* @__PURE__ */ React__default.createElement("button", { className: button() }, buttonText))
+      ),
+      children: [
+        /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center text-center items-center gap-deca", children: [
+          /* @__PURE__ */ jsx(HiOutlineCloudArrowUp, { className: "text-primary-medium", size: 35 }),
+          /* @__PURE__ */ jsxs("div", { className: "gap-mili", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", "data-testid": "select-dropzone", children: selectFileText }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-medium", children: dropText })
+          ] }),
+          isFileLimitReached ? /* @__PURE__ */ jsx(Tooltip, { text: "Voc\xEA s\xF3 pode selecionar um \xFAnico arquivo.", children: /* @__PURE__ */ jsx("button", { disabled: true, className: clsx(button(), "cursor-not-allowed"), children: buttonText }) }) : /* @__PURE__ */ jsx("button", { className: button(), children: buttonText })
+        ] })
+      ]
+    }
   );
 };
 

package/dist/esm/components/Uploader/Files.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { File } from './Upload.js';
 
 const Files = ({
@@ -6,7 +6,13 @@ const Files = ({
   onDelete,
   uploadProgressText = "Upload(s) in progress"
 }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "bg-white w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili h-[18rem]" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-mili items-center mb-deca" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-white" }, `${files.length}`), /* @__PURE__ */ React__default.createElement("h2", { className: "text-md font-semibold", "data-testid": "upload-progress" }, uploadProgressText)), files.map((file, index) => /* @__PURE__ */ React__default.createElement(File, { key: file.uid, file, index, onDelete })));
+  return /* @__PURE__ */ jsxs("div", { className: "bg-white w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili h-[18rem]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-mili items-center mb-deca", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-white", children: `${files.length}` }),
+      /* @__PURE__ */ jsx("h2", { className: "text-md font-semibold", "data-testid": "upload-progress", children: uploadProgressText })
+    ] }),
+    files.map((file, index) => /* @__PURE__ */ jsx(File, { file, index, onDelete }, file.uid))
+  ] });
 };
 
 export { Files };

package/dist/esm/components/Uploader/Modal.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { MdClose } from 'react-icons/md';
 import { button } from '@tecsinapse/cortex-core';
 import { Modal as Modal$1 } from '../Modal.js';
@@ -11,23 +11,29 @@ const Modal = ({
   title = "File Upload"
 }) => {
   return createPortal(
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ jsxs(
       Modal$1,
       {
         open,
         onClose,
-        className: "flex flex-col bg-secondary-xlight rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto"
-      },
-      /* @__PURE__ */ React__default.createElement("div", { className: "flex w-full items-center justify-between mb-deca" }, /* @__PURE__ */ React__default.createElement("div", null), /* @__PURE__ */ React__default.createElement("h2", { className: "text-deca font-semibold" }, title), /* @__PURE__ */ React__default.createElement(
-        "button",
-        {
-          className: button({ size: "square" }),
-          onClick: onClose,
-          "data-testid": "close-button"
-        },
-        /* @__PURE__ */ React__default.createElement(MdClose, { size: 20 })
-      )),
-      children
+        className: "flex flex-col bg-secondary-xlight rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between mb-deca", children: [
+            /* @__PURE__ */ jsx("div", {}),
+            /* @__PURE__ */ jsx("h2", { className: "text-deca font-semibold", children: title }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: button({ size: "square" }),
+                onClick: onClose,
+                "data-testid": "close-button",
+                children: /* @__PURE__ */ jsx(MdClose, { size: 20 })
+              }
+            )
+          ] }),
+          children
+        ]
+      }
     ),
     document.body
   );

package/dist/esm/components/Uploader/Root.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Modal } from './Modal.js';
 import { Dropzone } from './Dropzone.js';
 import { Files } from './Files.js';
@@ -15,22 +15,25 @@ const Root = ({
   uploadProgressText,
   titleModal
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Modal, { onClose, open, title: titleModal }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-1 flex-col w-full gap-deca md:flex-row" }, /* @__PURE__ */ React__default.createElement(
-    Dropzone,
-    {
-      dropzoneProps,
-      selectFileText,
-      dropText,
-      buttonText
-    }
-  ), /* @__PURE__ */ React__default.createElement(
-    Files,
-    {
-      files,
-      onDelete,
-      uploadProgressText
-    }
-  )));
+  return /* @__PURE__ */ jsx(Modal, { onClose, open, title: titleModal, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col w-full gap-deca md:flex-row", children: [
+    /* @__PURE__ */ jsx(
+      Dropzone,
+      {
+        dropzoneProps,
+        selectFileText,
+        dropText,
+        buttonText
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Files,
+      {
+        files,
+        onDelete,
+        uploadProgressText
+      }
+    )
+  ] }) });
 };
 
 export { Root };

package/dist/esm/components/Uploader/Upload.js

@@ -1,5 +1,5 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { button } from '@tecsinapse/cortex-core';
-import React__default from 'react';
 import { FaRegFileLines } from 'react-icons/fa6';
 import { MdClose } from 'react-icons/md';
 import { ProgressBar } from '../ProgressBar/ProgressBar.js';
@@ -15,31 +15,46 @@ const File = ({ file, index, onDelete }) => {
         return "info";
     }
   }
-  return /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col", key: index }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-between border rounded-t-mili shadow p-mili" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-centi" }, file.file && file.file.type.startsWith("image/") ? /* @__PURE__ */ React__default.createElement(
-    "img",
-    {
-      src: URL.createObjectURL(file.file),
-      alt: "Preview",
-      className: "w-tera h-tera rounded-mili"
-    }
-  ) : /* @__PURE__ */ React__default.createElement("span", { className: "border-2 text-kilo text-primary-medium w-tera h-tera flex items-center justify-center rounded-mili" }, /* @__PURE__ */ React__default.createElement(FaRegFileLines, null)), /* @__PURE__ */ React__default.createElement("div", { className: "flex-col" }, /* @__PURE__ */ React__default.createElement("p", { className: "font-semibold truncate max-w-[200px]" }, file.file.name), /* @__PURE__ */ React__default.createElement("p", { className: "text-sm text-gray-500" }, (file.file.size / 1024).toFixed(2), " KB"))), file.status === "success" && /* @__PURE__ */ React__default.createElement(
-    "button",
-    {
-      onClick: () => onDelete(index),
-      "data-testid": "remove-button",
-      className: button({
-        className: " bg-inherit border-2 border-primary-light text-primary-light",
-        size: "small"
-      })
-    },
-    /* @__PURE__ */ React__default.createElement(MdClose, { size: 20 })
-  )), /* @__PURE__ */ React__default.createElement(
-    ProgressBar,
-    {
-      intent: statusIntent(file.status),
-      infinite: file.status === "uploading"
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border rounded-t-mili shadow p-mili", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-centi", children: [
+        file.file && file.file.type.startsWith("image/") ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: URL.createObjectURL(file.file),
+            alt: "Preview",
+            className: "w-tera h-tera rounded-mili"
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "border-2 text-kilo text-primary-medium w-tera h-tera flex items-center justify-center rounded-mili", children: /* @__PURE__ */ jsx(FaRegFileLines, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-col", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-semibold truncate max-w-[200px]", children: file.file.name }),
+          /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500", children: [
+            (file.file.size / 1024).toFixed(2),
+            " KB"
+          ] })
+        ] })
+      ] }),
+      file.status === "success" && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onDelete(index),
+          "data-testid": "remove-button",
+          className: button({
+            className: " bg-inherit border-2 border-primary-light text-primary-light",
+            size: "small"
+          }),
+          children: /* @__PURE__ */ jsx(MdClose, { size: 20 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      ProgressBar,
+      {
+        intent: statusIntent(file.status),
+        infinite: file.status === "uploading"
+      }
+    )
+  ] }, index);
 };
 
 export { File };