@deepnoid/ui 0.1.97 → 0.1.99

package/dist/components/chip/index.mjs

@@ -2,12 +2,12 @@
 import "../../chunk-MGEWSREV.mjs";
 import {
   chip_default
-} from "../../chunk-PZSIYVDW.mjs";
+} from "../../chunk-HZMGNGQN.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-SCZB4QC7.mjs";
-import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-6XFKID3T.mjs";
 import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   chip_default as Chip

package/dist/components/dateTimePicker/calendar.mjs

@@ -2,13 +2,13 @@
 import {
   calendarStyle,
   calendar_default
-} from "../../chunk-BHSZP2XF.mjs";
+} from "../../chunk-7KVNCGIG.mjs";
 import "../../chunk-P732YGHO.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-SCZB4QC7.mjs";
-import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-6XFKID3T.mjs";
 import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   calendarStyle,

package/dist/components/dateTimePicker/dateTimePicker.mjs

@@ -2,20 +2,20 @@
 import {
   dateTimePickerStyle,
   dateTimePicker_default
-} from "../../chunk-35D6XC62.mjs";
-import "../../chunk-45BNDZHL.mjs";
+} from "../../chunk-DRK7NMLJ.mjs";
+import "../../chunk-7KVNCGIG.mjs";
+import "../../chunk-DUO76TCX.mjs";
 import "../../chunk-7MVEAQ7Z.mjs";
-import "../../chunk-3IILPVRA.mjs";
-import "../../chunk-23WOW2NZ.mjs";
+import "../../chunk-2Q3V5U7K.mjs";
+import "../../chunk-EXQG2GHG.mjs";
 import "../../chunk-FWJ2ZKH6.mjs";
-import "../../chunk-BHSZP2XF.mjs";
 import "../../chunk-P732YGHO.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-SCZB4QC7.mjs";
-import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-ANBGNXIU.mjs";
 import "../../chunk-6XFKID3T.mjs";
 import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   dateTimePickerStyle,

package/dist/components/dateTimePicker/index.mjs

@@ -2,20 +2,20 @@
 import "../../chunk-75HLCORR.mjs";
 import {
   dateTimePicker_default
-} from "../../chunk-35D6XC62.mjs";
-import "../../chunk-45BNDZHL.mjs";
+} from "../../chunk-DRK7NMLJ.mjs";
+import "../../chunk-7KVNCGIG.mjs";
+import "../../chunk-DUO76TCX.mjs";
 import "../../chunk-7MVEAQ7Z.mjs";
-import "../../chunk-3IILPVRA.mjs";
-import "../../chunk-23WOW2NZ.mjs";
+import "../../chunk-2Q3V5U7K.mjs";
+import "../../chunk-EXQG2GHG.mjs";
 import "../../chunk-FWJ2ZKH6.mjs";
-import "../../chunk-BHSZP2XF.mjs";
 import "../../chunk-P732YGHO.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-SCZB4QC7.mjs";
-import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-ANBGNXIU.mjs";
 import "../../chunk-6XFKID3T.mjs";
 import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   dateTimePicker_default as DateTimePicker

package/dist/components/dateTimePicker/timePicker.mjs

@@ -1,16 +1,16 @@
 "use client";
 import {
   timePicker_default
-} from "../../chunk-45BNDZHL.mjs";
+} from "../../chunk-DUO76TCX.mjs";
 import "../../chunk-7MVEAQ7Z.mjs";
-import "../../chunk-3IILPVRA.mjs";
-import "../../chunk-23WOW2NZ.mjs";
+import "../../chunk-2Q3V5U7K.mjs";
+import "../../chunk-EXQG2GHG.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-SCZB4QC7.mjs";
-import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-ANBGNXIU.mjs";
 import "../../chunk-6XFKID3T.mjs";
 import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   timePicker_default as default

package/dist/components/drawer/drawer.mjs

@@ -1,10 +1,10 @@
 "use client";
 import {
   drawer_default
-} from "../../chunk-S7Y7XUBL.mjs";
-import "../../chunk-E3G5QXSH.mjs";
+} from "../../chunk-UDVA3BUM.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-27Y6K5NK.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   drawer_default as default

package/dist/components/drawer/index.mjs

@@ -2,10 +2,10 @@
 import "../../chunk-32GA3YW4.mjs";
 import {
   drawer_default
-} from "../../chunk-S7Y7XUBL.mjs";
-import "../../chunk-E3G5QXSH.mjs";
+} from "../../chunk-UDVA3BUM.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-27Y6K5NK.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   drawer_default as Drawer

package/dist/components/fileUpload/fileUpload.d.mts

@@ -7,6 +7,7 @@ type FileUploadProps = {
     buttonText: string;
     maxSizeMB?: number;
     placeholder?: string;
+    errorMessage?: string;
     accept?: string[];
     acceptErrorMessage?: string;
     sizeErrorMessage?: string;
@@ -16,7 +17,7 @@ type FileUploadProps = {
     name?: string;
     classNames?: SlotsToClasses<FileUploadSlots>;
 };
-declare function FileUpload({ buttonText, maxSizeMB, placeholder, accept, acceptErrorMessage, sizeErrorMessage, onFileUpload, helperMessage, showProgress, name, classNames, }: FileUploadProps): react_jsx_runtime.JSX.Element;
+declare function FileUpload({ buttonText, maxSizeMB, placeholder, errorMessage, accept, acceptErrorMessage, sizeErrorMessage, onFileUpload, helperMessage, showProgress, name, classNames, }: FileUploadProps): react_jsx_runtime.JSX.Element;
 declare namespace FileUpload {
     var displayName: string;
 }
@@ -30,8 +31,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
             errorMessage?: tailwind_merge.ClassNameValue;
             inputWrapper?: tailwind_merge.ClassNameValue;
             cancelButton?: tailwind_merge.ClassNameValue;
-            progressBarContainer?: tailwind_merge.ClassNameValue;
-            progressBar?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
@@ -43,8 +42,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
             errorMessage?: tailwind_merge.ClassNameValue;
             inputWrapper?: tailwind_merge.ClassNameValue;
             cancelButton?: tailwind_merge.ClassNameValue;
-            progressBarContainer?: tailwind_merge.ClassNameValue;
-            progressBar?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -52,8 +49,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
     container: string[];
     inputWrapper: string[];
     cancelButton: string[];
-    progressBarContainer: string[];
-    progressBar: string[];
     errorMessage: string[];
     helperMessage: string[];
 }, undefined, {
@@ -65,8 +60,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
             errorMessage?: tailwind_merge.ClassNameValue;
             inputWrapper?: tailwind_merge.ClassNameValue;
             cancelButton?: tailwind_merge.ClassNameValue;
-            progressBarContainer?: tailwind_merge.ClassNameValue;
-            progressBar?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -74,8 +67,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
     container: string[];
     inputWrapper: string[];
     cancelButton: string[];
-    progressBarContainer: string[];
-    progressBar: string[];
     errorMessage: string[];
     helperMessage: string[];
 }, tailwind_variants.TVReturnType<unknown, {
@@ -83,8 +74,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
     container: string[];
     inputWrapper: string[];
     cancelButton: string[];
-    progressBarContainer: string[];
-    progressBar: string[];
     errorMessage: string[];
     helperMessage: string[];
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/fileUpload/fileUpload.d.ts

@@ -7,6 +7,7 @@ type FileUploadProps = {
     buttonText: string;
     maxSizeMB?: number;
     placeholder?: string;
+    errorMessage?: string;
     accept?: string[];
     acceptErrorMessage?: string;
     sizeErrorMessage?: string;
@@ -16,7 +17,7 @@ type FileUploadProps = {
     name?: string;
     classNames?: SlotsToClasses<FileUploadSlots>;
 };
-declare function FileUpload({ buttonText, maxSizeMB, placeholder, accept, acceptErrorMessage, sizeErrorMessage, onFileUpload, helperMessage, showProgress, name, classNames, }: FileUploadProps): react_jsx_runtime.JSX.Element;
+declare function FileUpload({ buttonText, maxSizeMB, placeholder, errorMessage, accept, acceptErrorMessage, sizeErrorMessage, onFileUpload, helperMessage, showProgress, name, classNames, }: FileUploadProps): react_jsx_runtime.JSX.Element;
 declare namespace FileUpload {
     var displayName: string;
 }
@@ -30,8 +31,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
             errorMessage?: tailwind_merge.ClassNameValue;
             inputWrapper?: tailwind_merge.ClassNameValue;
             cancelButton?: tailwind_merge.ClassNameValue;
-            progressBarContainer?: tailwind_merge.ClassNameValue;
-            progressBar?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
@@ -43,8 +42,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
             errorMessage?: tailwind_merge.ClassNameValue;
             inputWrapper?: tailwind_merge.ClassNameValue;
             cancelButton?: tailwind_merge.ClassNameValue;
-            progressBarContainer?: tailwind_merge.ClassNameValue;
-            progressBar?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -52,8 +49,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
     container: string[];
     inputWrapper: string[];
     cancelButton: string[];
-    progressBarContainer: string[];
-    progressBar: string[];
     errorMessage: string[];
     helperMessage: string[];
 }, undefined, {
@@ -65,8 +60,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
             errorMessage?: tailwind_merge.ClassNameValue;
             inputWrapper?: tailwind_merge.ClassNameValue;
             cancelButton?: tailwind_merge.ClassNameValue;
-            progressBarContainer?: tailwind_merge.ClassNameValue;
-            progressBar?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -74,8 +67,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
     container: string[];
     inputWrapper: string[];
     cancelButton: string[];
-    progressBarContainer: string[];
-    progressBar: string[];
     errorMessage: string[];
     helperMessage: string[];
 }, tailwind_variants.TVReturnType<unknown, {
@@ -83,8 +74,6 @@ declare const fileUploadStyle: tailwind_variants.TVReturnType<{
     container: string[];
     inputWrapper: string[];
     cancelButton: string[];
-    progressBarContainer: string[];
-    progressBar: string[];
     errorMessage: string[];
     helperMessage: string[];
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/fileUpload/fileUpload.js

@@ -107,8 +107,8 @@ __export(fileUpload_exports, {
   fileUploadStyle: () => fileUploadStyle
 });
 module.exports = __toCommonJS(fileUpload_exports);
-var import_react5 = require("react");
-var import_tailwind_variants5 = require("tailwind-variants");
+var import_react7 = require("react");
+var import_tailwind_variants6 = require("tailwind-variants");
 
 // src/components/input/input.tsx
 var import_react = require("react");
@@ -5198,12 +5198,10 @@ var inputStyle = tv(
       errorMessage: ["text-danger-main"],
       readonlyWrapper: [
         "pointer-events-none",
-        "!text-body-foreground",
-        "placeholder:!text-body-foreground",
-        "group-has-[p.error]/input:!text-danger-main",
-        "group-has-[p.error]/input:placeholder:!text-danger-main",
-        "[&>input]:!text-body-foreground",
-        "[&>input]:placeholder:!text-body-foreground"
+        "text-body-foreground",
+        "placeholder:text-body-foreground",
+        "[&>input]:text-body-foreground",
+        "[&>input]:placeholder:text-body-foreground"
       ],
       readonly: []
     },
@@ -5312,6 +5310,16 @@ var inputStyle = tv(
           helperMessage: ["!text-neutral-light"],
           errorMessage: ["!text-danger-light"]
         }
+      },
+      readonly: {
+        true: {
+          readonlyWrapper: ["pointer-events-none"],
+          input: [
+            "group-has-[p.error]/input:!text-danger-main",
+            "group-has-[p.error]/input:placeholder:!text-danger-main"
+          ],
+          content: ["group-has-[p.error]/input:!text-danger-main"]
+        }
       }
     },
     compoundVariants: [
@@ -5381,6 +5389,22 @@ var inputStyle = tv(
             "group-has-[p.error]/input:placeholder:!text-danger-light"
           ]
         }
+      },
+      {
+        readonly: true,
+        color: "primary",
+        class: {
+          input: ["!text-primary-main", "placeholder:!text-primary-main"],
+          content: ["!text-primary-main"]
+        }
+      },
+      {
+        readonly: true,
+        color: "secondary",
+        class: {
+          input: ["!text-secondary-main", "placeholder:!text-secondary-main"],
+          content: ["!text-secondary-main"]
+        }
       }
     ],
     defaultVariants: {
@@ -6111,7 +6135,7 @@ var iconButtonStyle = tv({
       variant: "outline",
       color: "neutral",
       class: {
-        base: ["bg-body-background", "!border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
+        base: ["bg-body-background", "!border-neutral-light", "text-neutral-main", "hover:bg-neutral-soft"]
       }
     },
     {
@@ -6248,12 +6272,161 @@ var iconButtonStyle = tv({
   }
 });
 
-// src/components/fileUpload/fileUpload.tsx
+// src/components/progress/progress.tsx
+var import_react6 = require("react");
+
+// src/hooks/useIsMounted.ts
+var import_react5 = require("react");
+function useIsMounted(props = {}) {
+  const { rerender = false, delay = 0 } = props;
+  const isMountedRef = (0, import_react5.useRef)(false);
+  const [isMounted, setIsMounted] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
+    isMountedRef.current = true;
+    let timer = null;
+    if (rerender) {
+      if (delay > 0) {
+        timer = setTimeout(() => {
+          setIsMounted(true);
+        }, delay);
+      } else {
+        setIsMounted(true);
+      }
+    }
+    return () => {
+      isMountedRef.current = false;
+      if (rerender) {
+        setIsMounted(false);
+      }
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [rerender]);
+  return [(0, import_react5.useCallback)(() => isMountedRef.current, []), isMounted];
+}
+
+// src/components/progress/progress.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var Progress = (originalProps) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, progressStyle.variantKeys);
+  const { children, classNames, value = 0, minValue = 0, maxValue = 100, ...progressProps } = props;
+  const isIndeterminate = originalProps.isIndeterminate;
+  const [, isMounted] = useIsMounted({
+    rerender: true,
+    delay: 100
+  });
+  const selfMounted = variantProps.disableAnimation ? true : isMounted;
+  const percentage = (0, import_react6.useMemo)(
+    () => isIndeterminate || !selfMounted ? void 0 : clampPercentage((value - minValue) / (maxValue - minValue) * 100),
+    [selfMounted, isIndeterminate, value, minValue, maxValue]
+  );
+  const slots = (0, import_react6.useMemo)(() => progressStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: slots.track({ class: classNames == null ? void 0 : classNames.track }), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: slots.indicator({ class: classNames == null ? void 0 : classNames.indicator }),
+      style: {
+        transform: `translateX(-${100 - (percentage || 0)}%)`
+      }
+    }
+  ) }) });
+};
+var progress_default = Progress;
+var progressStyle = tv({
+  slots: {
+    base: ["flex flex-col gap-2 w-full"],
+    track: ["z-0", "relative", "bg-neutral-soft", "overflow-hidden", "rtl:rotate-180"],
+    indicator: ["h-full"],
+    value: ""
+  },
+  variants: {
+    color: {
+      primary: {
+        indicator: ["bg-gradient-to-r from-primary-light via-primary-light to-primary-main"]
+      },
+      secondary: {
+        indicator: ["bg-gradient-to-r from-secondary-light via-secondary-light to-secondary-main"]
+      },
+      neutral: {
+        indicator: ["bg-gradient-to-r from-neutral-light via-neutral-light to-neutral-main"]
+      },
+      info: {
+        indicator: ["bg-gradient-to-r from-info-light via-info-light to-info-main"]
+      },
+      success: {
+        indicator: ["bg-gradient-to-r from-success-light via-success-light to-success-main"]
+      },
+      warning: {
+        indicator: ["bg-gradient-to-r from-warning-light via-warning-light to-warning-main"]
+      },
+      danger: {
+        indicator: ["bg-gradient-to-r from-danger-light via-danger-light to-danger-main"]
+      }
+    },
+    size: {
+      sm: {
+        track: ["h-[4px]", "rounded-sm"],
+        indicator: "rounded-sm"
+      },
+      md: {
+        track: ["h-[6px]", "rounded-md"],
+        indicator: "rounded-md"
+      },
+      lg: {
+        track: ["h-[8px]", "rounded-lg"],
+        indicator: "rounded-lg"
+      },
+      xl: {
+        track: ["h-[10px]", "rounded-xl"],
+        indicator: "rounded-xl"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "opacity-disabled cursor-not-allowed"
+      }
+    },
+    disableAnimation: {
+      true: {},
+      false: {
+        indicator: "transition-transform !duration-500"
+      }
+    },
+    isIndeterminate: {
+      true: {
+        indicator: ["absolute", "w-full", "origin-left", "animate-indeterminate-bar"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    isDisabled: false,
+    disableAnimation: false,
+    isIndeterminate: false
+  },
+  compoundVariants: [
+    {
+      isIndeterminate: true,
+      disableAnimation: false,
+      className: {
+        indicator: "!transition-none motion-reduce:transition-none"
+      }
+    }
+  ]
+});
+var clampPercentage = (value) => {
+  return Math.min(100, Math.max(0, value));
+};
+
+// src/components/fileUpload/fileUpload.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function FileUpload({
   buttonText,
   maxSizeMB = 10,
   placeholder,
+  errorMessage,
   accept = [],
   acceptErrorMessage = "The file type is not allowed.",
   sizeErrorMessage = `File is too large.`,
@@ -6263,11 +6436,11 @@ function FileUpload({
   name,
   classNames
 }) {
-  const fileInputRef = (0, import_react5.useRef)(null);
-  const uploadIntervalRef = (0, import_react5.useRef)(null);
-  const [file, setFile] = (0, import_react5.useState)(null);
-  const [uploadProgress, setUploadProgress] = (0, import_react5.useState)(0);
-  const [errorMessage, setErrorMessage] = (0, import_react5.useState)("");
+  const fileInputRef = (0, import_react7.useRef)(null);
+  const uploadIntervalRef = (0, import_react7.useRef)(null);
+  const [file, setFile] = (0, import_react7.useState)(null);
+  const [uploadProgress, setUploadProgress] = (0, import_react7.useState)(0);
+  const [message, setMessage] = (0, import_react7.useState)(errorMessage);
   const slots = fileUploadStyle();
   const handleButtonClick = () => {
     var _a;
@@ -6301,12 +6474,12 @@ function FileUpload({
     if (!selectedFile) return;
     const error = validateFile(selectedFile);
     if (error) {
-      setErrorMessage(error);
+      setMessage(error);
       setFile(null);
       return;
     }
     setFile(selectedFile);
-    setErrorMessage("");
+    setMessage("");
     startUploadSimulation(selectedFile);
   };
   const handleCancelUpload = () => {
@@ -6315,20 +6488,34 @@ function FileUpload({
     }
     setFile(null);
     setUploadProgress(0);
-    setErrorMessage("");
+    setMessage("");
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     return () => {
       if (uploadIntervalRef.current) {
         clearInterval(uploadIntervalRef.current);
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.inputWrapper(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(input_default, { name, readOnly: true, variant: "outline", full: true, placeholder, defaultValue: file == null ? void 0 : file.name }),
-        file && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  (0, import_react7.useEffect)(() => {
+    setMessage(errorMessage);
+  }, [setMessage, errorMessage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: slots.inputWrapper(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          input_default,
+          {
+            name,
+            readOnly: true,
+            variant: "outline",
+            full: true,
+            placeholder,
+            defaultValue: file == null ? void 0 : file.name,
+            errorMessage: message
+          }
+        ),
+        file && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           icon_button_default,
           {
             name: "close",
@@ -6340,24 +6527,21 @@ function FileUpload({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, children: buttonText }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept.join(","), onChange: handleFileChange })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, children: buttonText }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept.join(","), onChange: handleFileChange })
     ] }),
-    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: slots.progressBarContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: slots.progressBar(), style: { width: `${uploadProgress}%` } }) }),
-    !errorMessage && helperMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: slots.helperMessage(), children: helperMessage }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: slots.errorMessage(), children: errorMessage })
+    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(progress_default, { value: uploadProgress }),
+    !message && helperMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: slots.helperMessage(), children: helperMessage })
   ] });
 }
 FileUpload.displayName = "FileUpload";
 var fileUpload_default = FileUpload;
-var fileUploadStyle = (0, import_tailwind_variants5.tv)({
+var fileUploadStyle = (0, import_tailwind_variants6.tv)({
   slots: {
     base: ["flex", "flex-col", "gap-[5px]"],
-    container: ["flex", "items-center", "gap-[10px]"],
+    container: ["flex", "gap-[10px]"],
     inputWrapper: ["relative", "flex-1"],
     cancelButton: ["absolute", "top-1/2", "right-0", "-translate-y-1/2"],
-    progressBarContainer: ["w-full", "h-[5px]", "bg-neutral-light", "rounded-full", "overflow-hidden"],
-    progressBar: ["h-full", "bg-primary-main", "transition-all"],
     errorMessage: ["text-danger-main", "text-sm"],
     helperMessage: ["text-neutral-main", "text-sm"]
   }

package/dist/components/fileUpload/fileUpload.mjs

@@ -3,23 +3,26 @@ import {
   FileUpload,
   fileUploadStyle,
   fileUpload_default
-} from "../../chunk-QDQBFAE2.mjs";
+} from "../../chunk-NDZ7LM6I.mjs";
+import "../../chunk-7VOQKIIK.mjs";
+import "../../chunk-T46JIGEU.mjs";
 import "../../chunk-2GCSFWHD.mjs";
-import "../../chunk-VFFLJN5N.mjs";
+import "../../chunk-Q44DM7T3.mjs";
 import "../../chunk-MY5U63QO.mjs";
-import "../../chunk-JBSV7GCL.mjs";
 import "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-IW57F7WZ.mjs";
-import "../../chunk-WV77476I.mjs";
+import "../../chunk-4VIQED4M.mjs";
+import "../../chunk-KNLCEVJX.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-6PNKRBUT.mjs";
+import "../../chunk-G5CNDGIE.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-SCZB4QC7.mjs";
-import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-3V4HT2K5.mjs";
 import "../../chunk-6XFKID3T.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-27Y6K5NK.mjs";
+import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   FileUpload,