@deepnoid/ui 0.1.27 → 0.1.29

package/dist/{chunk-3IU2RPSM.mjs → chunk-2SDYFOZL.mjs}

@@ -518,22 +518,61 @@ var template = {
       }
     );
   },
-  // ----------------------------------- old ---------------------------------
-  // ** Status **
-  plus: ({ className, fill }) => {
+  plus: ({ className }) => {
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M4.5 9H13.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+          /* @__PURE__ */ jsx("path", { d: "M9 13.5V4.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+        ]
+      }
+    );
+  },
+  minus: ({ className }) => {
     return /* @__PURE__ */ jsx(
       "svg",
       {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
         fill: "none",
+        className,
+        children: /* @__PURE__ */ jsx("path", { d: "M4.5 9H13.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+      }
+    );
+  },
+  pencil: ({ className }) => {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
         xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
         className,
-        children: /* @__PURE__ */ jsx("path", { d: "M12 4.5V19.5M19.5 12H4.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12.6465 3.36525L13.9117 2.09925C14.1755 1.83549 14.5332 1.68732 14.9062 1.68732C15.2793 1.68732 15.637 1.83549 15.9008 2.09925C16.1645 2.36301 16.3127 2.72074 16.3127 3.09375C16.3127 3.46676 16.1645 3.82449 15.9008 4.08825L7.9365 12.0525C7.53999 12.4488 7.05102 12.74 6.51375 12.9L4.5 13.5L5.1 11.4863C5.25996 10.949 5.55123 10.46 5.9475 10.0635L12.6465 3.36525ZM12.6465 3.36525L14.625 5.34375M13.5 10.5V14.0625C13.5 14.5101 13.3222 14.9393 13.0057 15.2557C12.6893 15.5722 12.2601 15.75 11.8125 15.75H3.9375C3.48995 15.75 3.06072 15.5722 2.74426 15.2557C2.42779 14.9393 2.25 14.5101 2.25 14.0625V6.1875C2.25 5.73995 2.42779 5.31073 2.74426 4.99426C3.06072 4.67779 3.48995 4.5 3.9375 4.5H7.5",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
       }
     );
   },
+  // ----------------------------------- old ---------------------------------
+  // ** Status **
   check: ({ className, fill }) => {
     return /* @__PURE__ */ jsx(
       "svg",
@@ -2180,34 +2219,6 @@ var template = {
       }
     );
   },
-  pencil: ({ className, fill }) => {
-    return /* @__PURE__ */ jsx(
-      "svg",
-      {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        className,
-        children: fill ? /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M21.7313 2.26918C21.239 1.77699 20.5714 1.50049 19.8753 1.50049C19.1791 1.50049 18.5115 1.77699 18.0193 2.26918L16.8623 3.42618L20.5743 7.13818L21.7313 5.98118C22.2234 5.48891 22.4999 4.8213 22.4999 4.12518C22.4999 3.42906 22.2234 2.76145 21.7313 2.26918ZM19.5133 8.19918L15.8013 4.48718L3.65125 16.6372C3.03411 17.254 2.58043 18.015 2.33125 18.8512L1.53125 21.5362C1.49263 21.6657 1.48975 21.8033 1.52292 21.9344C1.55608 22.0655 1.62407 22.1852 1.71967 22.2808C1.81527 22.3764 1.93494 22.4443 2.06601 22.4775C2.19709 22.5107 2.33469 22.5078 2.46425 22.4692L5.14925 21.6692C5.98548 21.42 6.74642 20.9663 7.36325 20.3492L19.5133 8.19918Z",
-            fill: "currentColor"
-          }
-        ) : /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M16.862 4.487L18.549 2.799C18.9007 2.44733 19.3777 2.24976 19.875 2.24976C20.3723 2.24976 20.8493 2.44733 21.201 2.799C21.5527 3.15068 21.7502 3.62766 21.7502 4.125C21.7502 4.62235 21.5527 5.09933 21.201 5.451L6.832 19.82C6.30332 20.3484 5.65137 20.7367 4.935 20.95L2.25 21.75L3.05 19.065C3.26328 18.3486 3.65163 17.6967 4.18 17.168L16.863 4.487H16.862ZM16.862 4.487L19.5 7.125",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      }
-    );
-  },
   "pencil-square": ({ className, fill }) => {
     return /* @__PURE__ */ jsx(
       "svg",

package/dist/{chunk-HWL7TPUN.mjs → chunk-2TKEWFGH.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   template
-} from "./chunk-3IU2RPSM.mjs";
+} from "./chunk-2SDYFOZL.mjs";
 
 // src/components/icon/Icon.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/chunk-3KVZDFMV.mjs

@@ -0,0 +1,132 @@
+"use client";
+import {
+  input_default
+} from "./chunk-EHRFXDSN.mjs";
+import {
+  button_default
+} from "./chunk-7J3KVOTS.mjs";
+import {
+  icon_button_default
+} from "./chunk-6K3E5BVO.mjs";
+
+// src/components/fileUpload/fileUpload.tsx
+import { useRef, useState, useEffect } from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "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 = useRef(null);
+  const uploadIntervalRef = useRef(null);
+  const [file, setFile] = useState(null);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [errorMessage, setErrorMessage] = 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("");
+  };
+  useEffect(() => {
+    return () => {
+      if (uploadIntervalRef.current) {
+        clearInterval(uploadIntervalRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ jsxs("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
+      /* @__PURE__ */ jsxs("div", { className: slots.inputWrapper(), children: [
+        /* @__PURE__ */ jsx(input_default, { name: "file", readOnly: true, variant: "outline", full: true, placeholder, defaultValue: file == null ? void 0 : file.name }),
+        file && /* @__PURE__ */ jsx(
+          icon_button_default,
+          {
+            name: "close",
+            variant: "ghost",
+            color: "neutral",
+            onClick: handleCancelUpload,
+            classNames: { base: slots.cancelButton() },
+            "aria-label": "cancel"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, children: buttonText }),
+      /* @__PURE__ */ jsx("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept.join(","), onChange: handleFileChange })
+    ] }),
+    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ jsx("div", { className: slots.progressBarContainer(), children: /* @__PURE__ */ jsx("div", { className: slots.progressBar(), style: { width: `${uploadProgress}%` } }) }),
+    !errorMessage && helperMessage && /* @__PURE__ */ jsx("p", { className: slots.helperMessage(), children: helperMessage }),
+    errorMessage && /* @__PURE__ */ jsx("p", { className: slots.errorMessage(), children: errorMessage })
+  ] });
+}
+FileUpload.displayName = "FileUpload";
+var fileUpload_default = FileUpload;
+var fileUploadStyle = 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"]
+  }
+});
+
+export {
+  FileUpload,
+  fileUpload_default,
+  fileUploadStyle
+};

package/dist/{chunk-PMMTMYRI.mjs → chunk-6K3E5BVO.mjs}

@@ -1,19 +1,19 @@
 "use client";
-import {
-  useRipple
-} from "./chunk-6PNKRBUT.mjs";
 import {
   ripple_default
 } from "./chunk-LXHUO6VM.mjs";
 import {
-  Icon_default
-} from "./chunk-HWL7TPUN.mjs";
+  useRipple
+} from "./chunk-6PNKRBUT.mjs";
 import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
+  Icon_default
+} from "./chunk-2TKEWFGH.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
 
 // src/components/button/icon-button.tsx
 import { forwardRef, useMemo, useCallback } from "react";

package/dist/{chunk-BQUZRVYW.mjs → chunk-7J3KVOTS.mjs}

@@ -1,19 +1,19 @@
 "use client";
-import {
-  useRipple
-} from "./chunk-6PNKRBUT.mjs";
 import {
   ripple_default
 } from "./chunk-LXHUO6VM.mjs";
 import {
-  Icon_default
-} from "./chunk-HWL7TPUN.mjs";
+  useRipple
+} from "./chunk-6PNKRBUT.mjs";
 import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
+  Icon_default
+} from "./chunk-2TKEWFGH.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
 
 // src/components/button/button.tsx
 import React, { forwardRef, useMemo, useCallback } from "react";

package/dist/{chunk-OUAKGMDW.mjs → chunk-7W2ZI2DD.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-HWL7TPUN.mjs";
-import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
+} from "./chunk-2TKEWFGH.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
 
 // src/components/toast/toast.tsx
 import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";

package/dist/{chunk-XRC5OUYQ.mjs → chunk-A5KQHWS3.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   checkbox_default
-} from "./chunk-D6QI3DJG.mjs";
+} from "./chunk-YLRYHUTW.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";

package/dist/{chunk-YBDA3WQP.mjs → chunk-BB7MFKNQ.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-ZOTHPHXA.mjs";
 import {
   toast_default
-} from "./chunk-OUAKGMDW.mjs";
+} from "./chunk-7W2ZI2DD.mjs";
 
 // src/components/toast/use-toast.tsx
 import { createContext, useContext, useState, useCallback, useEffect, useRef } from "react";

package/dist/{chunk-SCFTSNCK.mjs → chunk-ECMBAKSJ.mjs}

@@ -1,22 +1,22 @@
 "use client";
 import {
   calendar_default
-} from "./chunk-Q72LZAPG.mjs";
+} from "./chunk-X6D7C7QZ.mjs";
 import {
   timePicker_default
-} from "./chunk-DLQFMOBN.mjs";
+} from "./chunk-QJJKJYNR.mjs";
 import {
   useDatePicker
 } from "./chunk-FWJ2ZKH6.mjs";
 import {
   Icon_default
-} from "./chunk-HWL7TPUN.mjs";
-import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
+} from "./chunk-2TKEWFGH.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
 
 // src/components/dateTimePicker/dateTimePicker.tsx
 import React, { forwardRef, useCallback, useMemo } from "react";

package/dist/{chunk-GRA2LU42.mjs → chunk-EHRFXDSN.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-HWL7TPUN.mjs";
-import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
+} from "./chunk-2TKEWFGH.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
 
 // src/components/input/input.tsx
 import React, { forwardRef, useRef, useCallback, useMemo } from "react";
@@ -103,9 +103,10 @@ var Input = 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
                   }

package/dist/{chunk-IRAHS4WS.mjs → chunk-III2QUWF.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   text_button_default
-} from "./chunk-WFMFC7R6.mjs";
+} from "./chunk-2PKM7SLZ.mjs";
 import {
   Icon_default
-} from "./chunk-HWL7TPUN.mjs";
+} from "./chunk-2TKEWFGH.mjs";
 import {
   tv
 } from "./chunk-4ZJFD3L3.mjs";

package/dist/{chunk-E4UUZOR4.mjs → chunk-KLUC2BV6.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-HWL7TPUN.mjs";
-import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
+} from "./chunk-2TKEWFGH.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
 
 // src/components/select/select.tsx
 import { forwardRef, useMemo, useState, useRef, useEffect } from "react";

package/dist/{chunk-C7OF5HJF.mjs → chunk-KXA73VTJ.mjs}

@@ -4,19 +4,19 @@ import {
 } from "./chunk-F3HENRVM.mjs";
 import {
   input_default
-} from "./chunk-GRA2LU42.mjs";
+} from "./chunk-EHRFXDSN.mjs";
 import {
   Icon_default
-} from "./chunk-HWL7TPUN.mjs";
-import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
+} from "./chunk-2TKEWFGH.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
 
 // src/components/pagination/pagination.tsx
 import { forwardRef, useMemo, useState } from "react";

package/dist/{chunk-B3DFSXGC.mjs → chunk-LR3SWRB4.mjs}

@@ -1,19 +1,19 @@
 "use client";
 import {
   backdrop_default
-} from "./chunk-LL6F3WDX.mjs";
+} from "./chunk-P5QCU457.mjs";
 import {
   button_default
-} from "./chunk-BQUZRVYW.mjs";
+} from "./chunk-7J3KVOTS.mjs";
 import {
   Icon_default
-} from "./chunk-HWL7TPUN.mjs";
-import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
+} from "./chunk-2TKEWFGH.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
 
 // src/components/modal/modal.tsx
 import { forwardRef, useMemo, useEffect } from "react";

package/dist/{chunk-DLQFMOBN.mjs → chunk-QJJKJYNR.mjs}

@@ -1,10 +1,10 @@
 "use client";
-import {
-  list_default
-} from "./chunk-HIVPDIEP.mjs";
 import {
   listItem_default
-} from "./chunk-QY7LYAXT.mjs";
+} from "./chunk-W45H2ZMW.mjs";
+import {
+  list_default
+} from "./chunk-UFVQPPPW.mjs";
 
 // src/components/dateTimePicker/timePicker.tsx
 import { useState, useRef, useEffect } from "react";

package/dist/{chunk-XA6PVFTW.mjs → chunk-RCJOJPRS.mjs}

@@ -1,16 +1,16 @@
 "use client";
+import {
+  scrollArea_default
+} from "./chunk-M37VBNB3.mjs";
 import {
   table_body_default
-} from "./chunk-XRC5OUYQ.mjs";
+} from "./chunk-A5KQHWS3.mjs";
 import {
   table_head_default
-} from "./chunk-UNH3BCGN.mjs";
-import {
-  scrollArea_default
-} from "./chunk-M37VBNB3.mjs";
+} from "./chunk-26MNALVL.mjs";
 import {
   pagination_default
-} from "./chunk-C7OF5HJF.mjs";
+} from "./chunk-KXA73VTJ.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";

package/dist/chunk-RLXOHILK.mjs

@@ -0,0 +1 @@
+"use client";

package/dist/{chunk-XQGD4ZIX.mjs → chunk-SP3JVQY3.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   template
-} from "./chunk-3IU2RPSM.mjs";
+} from "./chunk-2SDYFOZL.mjs";
 import {
   tv
 } from "./chunk-4ZJFD3L3.mjs";

package/dist/{chunk-QY7LYAXT.mjs → chunk-W45H2ZMW.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   avatar_default
-} from "./chunk-XQGD4ZIX.mjs";
+} from "./chunk-SP3JVQY3.mjs";
 import {
   Icon_default
-} from "./chunk-HWL7TPUN.mjs";
-import {
-  tv
-} from "./chunk-4ZJFD3L3.mjs";
+} from "./chunk-2TKEWFGH.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
 
 // src/components/list/listItem.tsx
 import { forwardRef, useMemo } from "react";