@deepnoid/ui 0.1.28 → 0.1.29

package/dist/components/tree/index.js

@@ -4350,7 +4350,7 @@ function toVal(mix) {
 // src/components/tree/tree.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var TreeNodeItem = (0, import_react.forwardRef)(
-  ({ node, depth, fileIcon, isLoading, classNames, onExpand }, ref) => {
+  ({ node, depth, fileIcon, selectedId, isLoading, classNames, onExpand }, ref) => {
     const [isOpen, setIsOpen] = (0, import_react.useState)(false);
     const [children, setChildren] = (0, import_react.useState)(node.children);
     const [isLoadingChildren, setIsLoadingChildren] = (0, import_react.useState)(false);
@@ -4374,10 +4374,10 @@ var TreeNodeItem = (0, import_react.forwardRef)(
       }
       setIsOpen((prev) => !prev);
     }, [isOpen, children, onExpand, node]);
-    const handleClick = () => {
+    const handleClick = (e) => {
       var _a;
       toggleOpen();
-      (_a = node.onClick) == null ? void 0 : _a.call(node);
+      (_a = node.onClick) == null ? void 0 : _a.call(node, e);
     };
     const handleRightClick = (e) => {
       var _a;
@@ -4398,7 +4398,7 @@ var TreeNodeItem = (0, import_react.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             "div",
             {
-              className: slots.group({ class: classNames == null ? void 0 : classNames.group }),
+              className: clsx(slots.node({ class: classNames == null ? void 0 : classNames.node }), selectedId == node.id ? "bg-neutral-soft" : ""),
               onClick: handleClick,
               onContextMenu: handleRightClick,
               children: [
@@ -4424,6 +4424,7 @@ var TreeNodeItem = (0, import_react.forwardRef)(
               {
                 node: child,
                 depth: depth + 1,
+                selectedId,
                 classNames,
                 fileIcon,
                 onExpand
@@ -4442,44 +4443,27 @@ var Tree = ({
   group,
   groupIcon,
   fileIcon,
+  selectedId,
   isLoading = false,
   classNames,
   onExpand
 }) => {
   const slots = (0, import_react.useMemo)(() => treeStyle(), []);
-  const [isOpen, setIsOpen] = (0, import_react.useState)(true);
-  const handleToggle = () => {
-    var _a;
-    setIsOpen((prev) => !prev);
-    (_a = group.onClick) == null ? void 0 : _a.call(group);
-  };
-  const handleRightClick = (e) => {
-    var _a;
-    e.preventDefault();
-    (_a = group.onRightClick) == null ? void 0 : _a.call(group, e);
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     headerContent && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: headerContent }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        "div",
-        {
-          className: slots.group({ class: classNames == null ? void 0 : classNames.group }),
-          onClick: handleToggle,
-          onContextMenu: handleRightClick,
-          children: [
-            groupIcon,
-            group.label
-          ]
-        }
-      ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.group({ class: classNames == null ? void 0 : classNames.group }), children: [
+        groupIcon,
+        group.label
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         TreeNodeItem,
         {
           node,
           depth: 1,
           classNames,
           fileIcon,
+          selectedId,
           isLoading,
           onExpand
         },
@@ -4494,7 +4478,8 @@ var treeStyle = tv({
   slots: {
     base: ["border", "border-neutral-light", "rounded-xl", "p-[20px]", "flex", "flex-col", "gap-[20px]", "select-none"],
     wrapper: ["flex", "flex-col", "gap-[5px]"],
-    group: [
+    group: ["flex", "items-center", "gap-[5px]", "text-md", "font-bold", "text-body-foreground", "p-[5px]"],
+    node: [
       "flex",
       "items-center",
       "gap-[5px]",

package/dist/components/tree/index.mjs

@@ -2,12 +2,12 @@
 import "../../chunk-MBLZYQCN.mjs";
 import {
   tree_default
-} from "../../chunk-4OSN2OE2.mjs";
+} from "../../chunk-X4F7JYBA.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-2TKEWFGH.mjs";
 import "../../chunk-2SDYFOZL.mjs";
-import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-27Y6K5NK.mjs";
+import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   tree_default as Tree

package/dist/components/tree/tree.d.mts

@@ -9,25 +9,24 @@ type TreeNode = {
     label: string;
     isLeaf?: boolean;
     children?: TreeNode[];
-    onClick?: () => void;
-    onRightClick?: (event: MouseEvent<HTMLSpanElement>) => void;
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    onRightClick?: (event: MouseEvent<HTMLDivElement>) => void;
 };
 interface TreeProps {
     headerContent?: ReactNode;
     group: {
         label: string;
         data: TreeNode[];
-        onClick?: () => void;
-        onRightClick?: (event: MouseEvent<HTMLSpanElement>) => void;
     };
     groupIcon?: ReactNode;
     fileIcon?: ReactNode;
+    selectedId?: number | string;
     isLoading?: boolean;
     classNames?: SlotsToClasses<TreeSlots>;
     onExpand?: (node: TreeNode) => Promise<TreeNode[]>;
 }
 declare const Tree: {
-    ({ headerContent, group, groupIcon, fileIcon, isLoading, classNames, onExpand, }: TreeProps): react_jsx_runtime.JSX.Element;
+    ({ headerContent, group, groupIcon, fileIcon, selectedId, isLoading, classNames, onExpand, }: TreeProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -37,6 +36,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
             base?: tailwind_merge.ClassNameValue;
             group?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
+            node?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
@@ -45,28 +45,33 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
             base?: tailwind_merge.ClassNameValue;
             group?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
+            node?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
     base: string[];
     wrapper: string[];
     group: string[];
+    node: string[];
 }, undefined, {
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
             base?: tailwind_merge.ClassNameValue;
             group?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
+            node?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
     base: string[];
     wrapper: string[];
     group: string[];
+    node: string[];
 }, tailwind_variants.TVReturnType<unknown, {
     base: string[];
     wrapper: string[];
     group: string[];
+    node: string[];
 }, undefined, unknown, unknown, undefined>>;
 type TreeSlots = keyof ReturnType<typeof treeStyle>;
 

package/dist/components/tree/tree.d.ts

@@ -9,25 +9,24 @@ type TreeNode = {
     label: string;
     isLeaf?: boolean;
     children?: TreeNode[];
-    onClick?: () => void;
-    onRightClick?: (event: MouseEvent<HTMLSpanElement>) => void;
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    onRightClick?: (event: MouseEvent<HTMLDivElement>) => void;
 };
 interface TreeProps {
     headerContent?: ReactNode;
     group: {
         label: string;
         data: TreeNode[];
-        onClick?: () => void;
-        onRightClick?: (event: MouseEvent<HTMLSpanElement>) => void;
     };
     groupIcon?: ReactNode;
     fileIcon?: ReactNode;
+    selectedId?: number | string;
     isLoading?: boolean;
     classNames?: SlotsToClasses<TreeSlots>;
     onExpand?: (node: TreeNode) => Promise<TreeNode[]>;
 }
 declare const Tree: {
-    ({ headerContent, group, groupIcon, fileIcon, isLoading, classNames, onExpand, }: TreeProps): react_jsx_runtime.JSX.Element;
+    ({ headerContent, group, groupIcon, fileIcon, selectedId, isLoading, classNames, onExpand, }: TreeProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -37,6 +36,7 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
             base?: tailwind_merge.ClassNameValue;
             group?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
+            node?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
@@ -45,28 +45,33 @@ declare const treeStyle: tailwind_variants.TVReturnType<{
             base?: tailwind_merge.ClassNameValue;
             group?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
+            node?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
     base: string[];
     wrapper: string[];
     group: string[];
+    node: string[];
 }, undefined, {
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
             base?: tailwind_merge.ClassNameValue;
             group?: tailwind_merge.ClassNameValue;
             wrapper?: tailwind_merge.ClassNameValue;
+            node?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
     base: string[];
     wrapper: string[];
     group: string[];
+    node: string[];
 }, tailwind_variants.TVReturnType<unknown, {
     base: string[];
     wrapper: string[];
     group: string[];
+    node: string[];
 }, undefined, unknown, unknown, undefined>>;
 type TreeSlots = keyof ReturnType<typeof treeStyle>;
 

package/dist/components/tree/tree.js

@@ -4349,7 +4349,7 @@ function toVal(mix) {
 // src/components/tree/tree.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var TreeNodeItem = (0, import_react.forwardRef)(
-  ({ node, depth, fileIcon, isLoading, classNames, onExpand }, ref) => {
+  ({ node, depth, fileIcon, selectedId, isLoading, classNames, onExpand }, ref) => {
     const [isOpen, setIsOpen] = (0, import_react.useState)(false);
     const [children, setChildren] = (0, import_react.useState)(node.children);
     const [isLoadingChildren, setIsLoadingChildren] = (0, import_react.useState)(false);
@@ -4373,10 +4373,10 @@ var TreeNodeItem = (0, import_react.forwardRef)(
       }
       setIsOpen((prev) => !prev);
     }, [isOpen, children, onExpand, node]);
-    const handleClick = () => {
+    const handleClick = (e) => {
       var _a;
       toggleOpen();
-      (_a = node.onClick) == null ? void 0 : _a.call(node);
+      (_a = node.onClick) == null ? void 0 : _a.call(node, e);
     };
     const handleRightClick = (e) => {
       var _a;
@@ -4397,7 +4397,7 @@ var TreeNodeItem = (0, import_react.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             "div",
             {
-              className: slots.group({ class: classNames == null ? void 0 : classNames.group }),
+              className: clsx(slots.node({ class: classNames == null ? void 0 : classNames.node }), selectedId == node.id ? "bg-neutral-soft" : ""),
               onClick: handleClick,
               onContextMenu: handleRightClick,
               children: [
@@ -4423,6 +4423,7 @@ var TreeNodeItem = (0, import_react.forwardRef)(
               {
                 node: child,
                 depth: depth + 1,
+                selectedId,
                 classNames,
                 fileIcon,
                 onExpand
@@ -4441,44 +4442,27 @@ var Tree = ({
   group,
   groupIcon,
   fileIcon,
+  selectedId,
   isLoading = false,
   classNames,
   onExpand
 }) => {
   const slots = (0, import_react.useMemo)(() => treeStyle(), []);
-  const [isOpen, setIsOpen] = (0, import_react.useState)(true);
-  const handleToggle = () => {
-    var _a;
-    setIsOpen((prev) => !prev);
-    (_a = group.onClick) == null ? void 0 : _a.call(group);
-  };
-  const handleRightClick = (e) => {
-    var _a;
-    e.preventDefault();
-    (_a = group.onRightClick) == null ? void 0 : _a.call(group, e);
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     headerContent && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: headerContent }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        "div",
-        {
-          className: slots.group({ class: classNames == null ? void 0 : classNames.group }),
-          onClick: handleToggle,
-          onContextMenu: handleRightClick,
-          children: [
-            groupIcon,
-            group.label
-          ]
-        }
-      ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.group({ class: classNames == null ? void 0 : classNames.group }), children: [
+        groupIcon,
+        group.label
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         TreeNodeItem,
         {
           node,
           depth: 1,
           classNames,
           fileIcon,
+          selectedId,
           isLoading,
           onExpand
         },
@@ -4493,7 +4477,8 @@ var treeStyle = tv({
   slots: {
     base: ["border", "border-neutral-light", "rounded-xl", "p-[20px]", "flex", "flex-col", "gap-[20px]", "select-none"],
     wrapper: ["flex", "flex-col", "gap-[5px]"],
-    group: [
+    group: ["flex", "items-center", "gap-[5px]", "text-md", "font-bold", "text-body-foreground", "p-[5px]"],
+    node: [
       "flex",
       "items-center",
       "gap-[5px]",

package/dist/components/tree/tree.mjs

@@ -2,12 +2,12 @@
 import {
   Tree,
   tree_default
-} from "../../chunk-4OSN2OE2.mjs";
+} from "../../chunk-X4F7JYBA.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-2TKEWFGH.mjs";
 import "../../chunk-2SDYFOZL.mjs";
-import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-27Y6K5NK.mjs";
+import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   Tree,

package/dist/index.d.mts

@@ -26,6 +26,7 @@ export { ToastProvider, useToast } from './components/toast/use-toast.mjs';
 export { default as DateTimePicker } from './components/dateTimePicker/dateTimePicker.mjs';
 export { default as ScrollArea } from './components/scroll/scrollArea.mjs';
 export { default as Tree, TreeNode } from './components/tree/tree.mjs';
+export { default as FileUpload } from './components/fileUpload/fileUpload.mjs';
 export { tv } from './utils/tailwind-variants.mjs';
 export { deepnoidUi } from '@deepnoid/tailwind-config';
 export { VariantProps } from 'tailwind-variants';

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export { ToastProvider, useToast } from './components/toast/use-toast.js';
 export { default as DateTimePicker } from './components/dateTimePicker/dateTimePicker.js';
 export { default as ScrollArea } from './components/scroll/scrollArea.js';
 export { default as Tree, TreeNode } from './components/tree/tree.js';
+export { default as FileUpload } from './components/fileUpload/fileUpload.js';
 export { tv } from './utils/tailwind-variants.js';
 export { deepnoidUi } from '@deepnoid/tailwind-config';
 export { VariantProps } from 'tailwind-variants';

package/dist/index.js

@@ -111,6 +111,7 @@ __export(index_exports, {
   Chip: () => chip_default,
   DateTimePicker: () => dateTimePicker_default,
   DefinitionTable: () => definition_table_default,
+  FileUpload: () => fileUpload_default,
   Icon: () => Icon_default,
   IconButton: () => icon_button_default,
   Input: () => input_default,
@@ -5957,9 +5958,10 @@ var Input = (0, import_react9.forwardRef)((originalProps, ref) => {
                   {
                     ...inputProps,
                     ref: ref || inputRef,
+                    readOnly: props.readOnly,
                     className: clsx(
                       slots.input({ class: classNames == null ? void 0 : classNames.input }),
-                      inputProps.readOnly ? "!text-body-foreground placeholder:text-body-foreground" : ""
+                      inputProps.readOnly ? "!text-body-foreground placeholder:!text-body-foreground" : ""
                     ),
                     size: 0
                   }
@@ -10006,7 +10008,7 @@ var dateTimePickerStyle = tv({
 var import_react34 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var TreeNodeItem = (0, import_react34.forwardRef)(
-  ({ node, depth, fileIcon, isLoading, classNames, onExpand }, ref) => {
+  ({ node, depth, fileIcon, selectedId, isLoading, classNames, onExpand }, ref) => {
     const [isOpen, setIsOpen] = (0, import_react34.useState)(false);
     const [children, setChildren] = (0, import_react34.useState)(node.children);
     const [isLoadingChildren, setIsLoadingChildren] = (0, import_react34.useState)(false);
@@ -10030,10 +10032,10 @@ var TreeNodeItem = (0, import_react34.forwardRef)(
       }
       setIsOpen((prev) => !prev);
     }, [isOpen, children, onExpand, node]);
-    const handleClick = () => {
+    const handleClick = (e) => {
       var _a;
       toggleOpen();
-      (_a = node.onClick) == null ? void 0 : _a.call(node);
+      (_a = node.onClick) == null ? void 0 : _a.call(node, e);
     };
     const handleRightClick = (e) => {
       var _a;
@@ -10054,7 +10056,7 @@ var TreeNodeItem = (0, import_react34.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
             "div",
             {
-              className: slots.group({ class: classNames == null ? void 0 : classNames.group }),
+              className: clsx(slots.node({ class: classNames == null ? void 0 : classNames.node }), selectedId == node.id ? "bg-neutral-soft" : ""),
               onClick: handleClick,
               onContextMenu: handleRightClick,
               children: [
@@ -10080,6 +10082,7 @@ var TreeNodeItem = (0, import_react34.forwardRef)(
               {
                 node: child,
                 depth: depth + 1,
+                selectedId,
                 classNames,
                 fileIcon,
                 onExpand
@@ -10098,44 +10101,27 @@ var Tree = ({
   group,
   groupIcon,
   fileIcon,
+  selectedId,
   isLoading = false,
   classNames,
   onExpand
 }) => {
   const slots = (0, import_react34.useMemo)(() => treeStyle(), []);
-  const [isOpen, setIsOpen] = (0, import_react34.useState)(true);
-  const handleToggle = () => {
-    var _a;
-    setIsOpen((prev) => !prev);
-    (_a = group.onClick) == null ? void 0 : _a.call(group);
-  };
-  const handleRightClick = (e) => {
-    var _a;
-    e.preventDefault();
-    (_a = group.onRightClick) == null ? void 0 : _a.call(group, e);
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     headerContent && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: headerContent }),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-        "div",
-        {
-          className: slots.group({ class: classNames == null ? void 0 : classNames.group }),
-          onClick: handleToggle,
-          onContextMenu: handleRightClick,
-          children: [
-            groupIcon,
-            group.label
-          ]
-        }
-      ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: slots.group({ class: classNames == null ? void 0 : classNames.group }), children: [
+        groupIcon,
+        group.label
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: group.data.map((node) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         TreeNodeItem,
         {
           node,
           depth: 1,
           classNames,
           fileIcon,
+          selectedId,
           isLoading,
           onExpand
         },
@@ -10150,7 +10136,8 @@ var treeStyle = tv({
   slots: {
     base: ["border", "border-neutral-light", "rounded-xl", "p-[20px]", "flex", "flex-col", "gap-[20px]", "select-none"],
     wrapper: ["flex", "flex-col", "gap-[5px]"],
-    group: [
+    group: ["flex", "items-center", "gap-[5px]", "text-md", "font-bold", "text-body-foreground", "p-[5px]"],
+    node: [
       "flex",
       "items-center",
       "gap-[5px]",
@@ -10164,6 +10151,122 @@ var treeStyle = tv({
     ]
   }
 });
+
+// src/components/fileUpload/fileUpload.tsx
+var import_react35 = require("react");
+var import_tailwind_variants29 = require("tailwind-variants");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function FileUpload({
+  buttonText,
+  maxSizeMB = 10,
+  placeholder,
+  accept = [],
+  acceptErrorMessage = "The file type is not allowed.",
+  sizeErrorMessage = `File is too large.`,
+  onFileUpload,
+  helperMessage,
+  showProgress,
+  classNames
+}) {
+  const fileInputRef = (0, import_react35.useRef)(null);
+  const uploadIntervalRef = (0, import_react35.useRef)(null);
+  const [file, setFile] = (0, import_react35.useState)(null);
+  const [uploadProgress, setUploadProgress] = (0, import_react35.useState)(0);
+  const [errorMessage, setErrorMessage] = (0, import_react35.useState)("");
+  const slots = fileUploadStyle();
+  const handleButtonClick = () => {
+    var _a;
+    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+  };
+  const validateFile = (file2) => {
+    if (accept.length && !accept.includes(file2.type)) {
+      return acceptErrorMessage;
+    }
+    const sizeMB = file2.size / 1024 / 1024;
+    if (sizeMB > maxSizeMB) {
+      return `${sizeErrorMessage} (${maxSizeMB}MB)`;
+    }
+    return null;
+  };
+  const startUploadSimulation = (file2) => {
+    let progress = 0;
+    setUploadProgress(0);
+    uploadIntervalRef.current = window.setInterval(() => {
+      progress += 10;
+      setUploadProgress(progress);
+      if (progress >= 100) {
+        clearInterval(uploadIntervalRef.current);
+        onFileUpload == null ? void 0 : onFileUpload(file2);
+      }
+    }, 100);
+  };
+  const handleFileChange = (e) => {
+    var _a;
+    const selectedFile = (_a = e.target.files) == null ? void 0 : _a[0];
+    if (!selectedFile) return;
+    const error = validateFile(selectedFile);
+    if (error) {
+      setErrorMessage(error);
+      setFile(null);
+      return;
+    }
+    setFile(selectedFile);
+    setErrorMessage("");
+    startUploadSimulation(selectedFile);
+  };
+  const handleCancelUpload = () => {
+    if (uploadIntervalRef.current) {
+      clearInterval(uploadIntervalRef.current);
+    }
+    setFile(null);
+    setUploadProgress(0);
+    setErrorMessage("");
+  };
+  (0, import_react35.useEffect)(() => {
+    return () => {
+      if (uploadIntervalRef.current) {
+        clearInterval(uploadIntervalRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: slots.inputWrapper(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(input_default, { name: "file", readOnly: true, variant: "outline", full: true, placeholder, defaultValue: file == null ? void 0 : file.name }),
+        file && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          icon_button_default,
+          {
+            name: "close",
+            variant: "ghost",
+            color: "neutral",
+            onClick: handleCancelUpload,
+            classNames: { base: slots.cancelButton() },
+            "aria-label": "cancel"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, children: buttonText }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept.join(","), onChange: handleFileChange })
+    ] }),
+    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: slots.progressBarContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: slots.progressBar(), style: { width: `${uploadProgress}%` } }) }),
+    !errorMessage && helperMessage && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: slots.helperMessage(), children: helperMessage }),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: slots.errorMessage(), children: errorMessage })
+  ] });
+}
+FileUpload.displayName = "FileUpload";
+var fileUpload_default = FileUpload;
+var fileUploadStyle = (0, import_tailwind_variants29.tv)({
+  slots: {
+    base: ["flex", "flex-col", "gap-[5px]"],
+    container: ["flex", "items-center", "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"]
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -10175,6 +10278,7 @@ var treeStyle = tv({
   Chip,
   DateTimePicker,
   DefinitionTable,
+  FileUpload,
   Icon,
   IconButton,
   Input,