@umodeapporg/ui 0.1.0

package/dist/components/Upload/SimpleUploaderComponent.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { useNotification } from "../../hooks/useNotification.js";
+import CustomBadge from "../UI/CustomBadge.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+const SimpleUploaderComponent = ({
+  allowedTypes,
+  handleFilesSelected,
+  multiple = false,
+  className
+}) => {
+  const { t } = useTranslation("ui");
+  const { notify } = useNotification();
+  const MAX_FILE_SIZE_MB = 1;
+  const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
+  const [files, setFiles] = useState([]);
+  const handleFiles = (newFiles) => {
+    setFiles(newFiles);
+    if (!multiple && newFiles.length === 1) {
+      handleFilesSelected(newFiles);
+    }
+  };
+  const handleFileChange = (event) => {
+    const selectedFiles = event.target.files;
+    if (selectedFiles && selectedFiles.length > 0) {
+      const newFiles = Array.from(selectedFiles).filter((file) => file.size <= MAX_FILE_SIZE_BYTES);
+      if (newFiles.length < selectedFiles.length) {
+        notify({
+          message: t("uploader.filesIgnoredMaxSize", { size: MAX_FILE_SIZE_MB }),
+          type: "error"
+        });
+      }
+      if (newFiles.length > 0) {
+        handleFiles(newFiles);
+      }
+    }
+  };
+  const tooltipContent = t("uploader.allowedFormatsTooltip", {
+    formats: allowedTypes.map((type) => type.startsWith(".") ? type : "." + type.split("/")[1]).join(" "),
+    size: MAX_FILE_SIZE_MB
+  });
+  return /* @__PURE__ */ jsx(CustomBadge, { content: files.length, invisible: files.length === 0, children: /* @__PURE__ */ jsx(ControlledTooltip, { content: tooltipContent, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "flex w-10 cursor-pointer items-center justify-center rounded-md border bg-muted p-2 transition-colors duration-slow hover:bg-muted-active",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "file",
+            id: "simple-browse",
+            onChange: handleFileChange,
+            accept: allowedTypes.join(", "),
+            multiple,
+            className: "hidden"
+          }
+        ),
+        /* @__PURE__ */ jsx("label", { htmlFor: "simple-browse", className: "flex cursor-pointer items-center justify-center", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "attach_file", size: 23, color: "rgb(var(--color-foreground))" }) })
+      ]
+    }
+  ) }) });
+};
+export {
+  SimpleUploaderComponent as default
+};
+//# sourceMappingURL=SimpleUploaderComponent.js.map

package/dist/components/Upload/SimpleUploaderComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleUploaderComponent.js","sources":["../../../src/components/Upload/SimpleUploaderComponent.tsx"],"sourcesContent":["import { useState } from 'react';\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\n\nimport { useNotification } from '../../hooks/useNotification';\nimport CustomBadge from '../UI/CustomBadge';\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\ninterface ISimpleUploaderComponentProps {\n  allowedTypes: Array<string>;\n  handleFilesSelected: (files: Array<File>) => void;\n  multiple?: boolean;\n  className?: string;\n}\n\nconst SimpleUploaderComponent: React.FC<ISimpleUploaderComponentProps> = ({\n  allowedTypes,\n  handleFilesSelected,\n  multiple = false,\n  className,\n}) => {\n  const { t } = useTranslation('ui');\n  const { notify } = useNotification();\n\n  const MAX_FILE_SIZE_MB = 1;\n  const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;\n  const [files, setFiles] = useState<Array<File>>([]);\n\n  const handleFiles = (newFiles: Array<File>) => {\n    setFiles(newFiles);\n    if (!multiple && newFiles.length === 1) {\n      handleFilesSelected(newFiles);\n    }\n  };\n\n  const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const selectedFiles = event.target.files;\n    if (selectedFiles && selectedFiles.length > 0) {\n      const newFiles = Array.from(selectedFiles).filter((file) => file.size <= MAX_FILE_SIZE_BYTES);\n\n      if (newFiles.length < selectedFiles.length) {\n        notify({\n          message: t('uploader.filesIgnoredMaxSize', { size: MAX_FILE_SIZE_MB }),\n          type: 'error',\n        });\n      }\n\n      if (newFiles.length > 0) {\n        handleFiles(newFiles);\n      }\n    }\n  };\n\n  const tooltipContent = t('uploader.allowedFormatsTooltip', {\n    formats: allowedTypes.map((type) => (type.startsWith('.') ? type : '.' + type.split('/')[1])).join(' '),\n    size: MAX_FILE_SIZE_MB,\n  });\n\n  return (\n    <CustomBadge content={files.length} invisible={files.length === 0}>\n      <ControlledTooltip content={tooltipContent}>\n        <div\n          className={classNames(\n            'flex w-10 cursor-pointer items-center justify-center rounded-md border bg-muted p-2 transition-colors duration-slow hover:bg-muted-active',\n            className,\n          )}\n        >\n          <input\n            type=\"file\"\n            id=\"simple-browse\"\n            onChange={handleFileChange}\n            accept={allowedTypes.join(', ')}\n            multiple={multiple}\n            className=\"hidden\"\n          />\n          <label htmlFor=\"simple-browse\" className=\"flex cursor-pointer items-center justify-center\">\n            <MaterialSymbol icon=\"attach_file\" size={23} color=\"rgb(var(--color-foreground))\" />\n          </label>\n        </div>\n      </ControlledTooltip>\n    </CustomBadge>\n  );\n};\n\nexport default SimpleUploaderComponent;\n"],"names":[],"mappings":";;;;;;;;AAkBA,MAAM,0BAAmE,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,EAAE,OAAA,IAAW,gBAAA;AAEnB,QAAM,mBAAmB;AACzB,QAAM,sBAAsB,mBAAmB,OAAO;AACtD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,CAAA,CAAE;AAElD,QAAM,cAAc,CAAC,aAA0B;AAC7C,aAAS,QAAQ;AACjB,QAAI,CAAC,YAAY,SAAS,WAAW,GAAG;AACtC,0BAAoB,QAAQ;AAAA,IAC9B;AAAA,EACF;AAEA,QAAM,mBAA+D,CAAC,UAAU;AAC9E,UAAM,gBAAgB,MAAM,OAAO;AACnC,QAAI,iBAAiB,cAAc,SAAS,GAAG;AAC7C,YAAM,WAAW,MAAM,KAAK,aAAa,EAAE,OAAO,CAAC,SAAS,KAAK,QAAQ,mBAAmB;AAE5F,UAAI,SAAS,SAAS,cAAc,QAAQ;AAC1C,eAAO;AAAA,UACL,SAAS,EAAE,gCAAgC,EAAE,MAAM,kBAAkB;AAAA,UACrE,MAAM;AAAA,QAAA,CACP;AAAA,MACH;AAEA,UAAI,SAAS,SAAS,GAAG;AACvB,oBAAY,QAAQ;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBAAiB,EAAE,kCAAkC;AAAA,IACzD,SAAS,aAAa,IAAI,CAAC,SAAU,KAAK,WAAW,GAAG,IAAI,OAAO,MAAM,KAAK,MAAM,GAAG,EAAE,CAAC,CAAE,EAAE,KAAK,GAAG;AAAA,IACtG,MAAM;AAAA,EAAA,CACP;AAED,SACE,oBAAC,aAAA,EAAY,SAAS,MAAM,QAAQ,WAAW,MAAM,WAAW,GAC9D,UAAA,oBAAC,mBAAA,EAAkB,SAAS,gBAC1B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,IAAG;AAAA,YACH,UAAU;AAAA,YACV,QAAQ,aAAa,KAAK,IAAI;AAAA,YAC9B;AAAA,YACA,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,oBAAC,SAAA,EAAM,SAAQ,iBAAgB,WAAU,mDACvC,UAAA,oBAAC,gBAAA,EAAe,MAAK,eAAc,MAAM,IAAI,OAAM,gCAA+B,EAAA,CACpF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEJ,EAAA,CACF;AAEJ;"}

package/dist/components/Upload/UploaderComponent.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+interface IUploaderComponentProps {
+    allowedTypes: Array<string>;
+    handleFilesSelected: (files: Array<File>) => void;
+    multiple?: boolean;
+    className?: string;
+    simpleLayout?: boolean;
+    maxSizeMB?: number;
+    /**
+     * When true, valid files are sent immediately via `handleFilesSelected` instead of
+     * being staged behind a manual "send" button. Keeps the default behavior elsewhere.
+     */
+    autoUpload?: boolean;
+    /**
+     * Visual style of the full dropzone. `'default'` keeps the neutral gray boxed look used
+     * across the app; `'borderless'` drops the dashed frame/background and shows only the
+     * centered content with the product accent (lilac icon and link, softer typography).
+     * For panels where drag/paste already works anywhere and the frame is redundant.
+     */
+    variant?: 'default' | 'borderless';
+    /**
+     * When true, the component stops handling its own drag/drop (it still opens the file
+     * picker on click and handles paste). Use when a parent container owns drag-and-drop for
+     * a larger area and should be the single drop target, avoiding duplicated uploads.
+     */
+    disableDragDrop?: boolean;
+}
+declare const UploaderComponent: React.FC<IUploaderComponentProps>;
+export default UploaderComponent;

package/dist/components/Upload/UploaderComponent.js

@@ -0,0 +1,241 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useId } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { useNotification } from "../../hooks/useNotification.js";
+import ControlledButton from "../Form/ControlledButton.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+const UploaderComponent = ({
+  allowedTypes,
+  handleFilesSelected,
+  multiple = false,
+  className,
+  simpleLayout = false,
+  maxSizeMB = 1,
+  autoUpload = false,
+  variant = "default",
+  disableDragDrop = false
+}) => {
+  const { t } = useTranslation("ui");
+  const { notify } = useNotification();
+  const isBorderless = variant === "borderless";
+  const MAX_FILE_SIZE_MB = maxSizeMB;
+  const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
+  const [files, setFiles] = useState([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const inputId = useId();
+  const matchesAllowedType = (file) => {
+    if (allowedTypes.includes(file.type)) return true;
+    const extension = "." + (file.name.split(".").pop() ?? "").toLowerCase();
+    return allowedTypes.some((type) => type.toLowerCase() === extension);
+  };
+  const handleFiles = (newFiles) => {
+    if (autoUpload) {
+      handleFilesSelected(newFiles);
+      return;
+    }
+    setFiles(newFiles);
+    if (!multiple && newFiles.length === 1) {
+      handleFilesSelected(newFiles);
+    }
+  };
+  const acceptExternalFiles = (candidates) => {
+    const typeMatched = candidates.filter(matchesAllowedType);
+    const validFiles = typeMatched.filter((file) => file.size <= MAX_FILE_SIZE_BYTES);
+    if (validFiles.length < typeMatched.length) {
+      notify({ message: t("uploader.filesIgnoredMaxSize", { size: MAX_FILE_SIZE_MB }), type: "error" });
+    }
+    if (validFiles.length > 0) {
+      handleFiles(validFiles);
+    } else {
+      notify({ message: t("uploader.invalidFormat"), type: "error" });
+    }
+  };
+  const clipboardFiles = (clipboardData) => {
+    const fromFiles = Array.from(clipboardData?.files ?? []);
+    if (fromFiles.length > 0) return fromFiles;
+    return Array.from(clipboardData?.items ?? []).filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter((file) => file !== null);
+  };
+  const handlePaste = (event) => {
+    const pasted = clipboardFiles(event.clipboardData);
+    if (pasted.length === 0) return;
+    event.preventDefault();
+    acceptExternalFiles(pasted);
+  };
+  const handleDragEnterOrOver = (event) => {
+    event.preventDefault();
+    if (!isDragging) setIsDragging(true);
+  };
+  const handleDragLeave = (event) => {
+    if (event.currentTarget.contains(event.relatedTarget)) return;
+    setIsDragging(false);
+  };
+  const handleFileChange = (event) => {
+    const selectedFiles = event.target.files;
+    if (selectedFiles && selectedFiles.length > 0) {
+      const newFiles = Array.from(selectedFiles).filter((file) => file.size <= MAX_FILE_SIZE_BYTES);
+      if (newFiles.length < selectedFiles.length) {
+        notify({
+          message: t("uploader.filesIgnoredMaxSize", { size: MAX_FILE_SIZE_MB }),
+          type: "error"
+        });
+      }
+      if (newFiles.length > 0) {
+        handleFiles(newFiles);
+      }
+    }
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    setIsDragging(false);
+    acceptExternalFiles(Array.from(event.dataTransfer.files));
+  };
+  const handleRemoveFile = (index) => {
+    setFiles((prevFiles) => {
+      const next = prevFiles.filter((_, i) => i !== index);
+      if (!multiple && next.length === 0) {
+        handleFilesSelected([]);
+      }
+      return next;
+    });
+  };
+  if (simpleLayout) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        tabIndex: 0,
+        className: classNames(
+          "aspect-square w-[4.5rem] cursor-pointer rounded-lg border-2 border-dashed p-4 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-border",
+          isDragging ? "border-brand bg-brand-soft" : "border-border-strong hover:bg-muted",
+          className
+        ),
+        onDrop: handleDrop,
+        onDragEnter: handleDragEnterOrOver,
+        onDragOver: handleDragEnterOrOver,
+        onDragLeave: handleDragLeave,
+        onPaste: handlePaste,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "file",
+              id: inputId,
+              onChange: handleFileChange,
+              accept: allowedTypes.join(", "),
+              multiple,
+              className: "hidden"
+            }
+          ),
+          /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "flex size-full cursor-pointer items-center justify-center", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "add_photo_alternate", size: 23, color: "rgb(var(--color-foreground-subtle))" }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      tabIndex: 0,
+      className: classNames(
+        "flex w-full flex-col items-center justify-center rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-border",
+        isBorderless ? "py-4" : "border-2 border-dashed px-4 py-8",
+        !isBorderless && (isDragging ? "border-brand bg-brand-soft" : "border-border-strong"),
+        isBorderless && isDragging && "bg-brand-soft/60",
+        className
+      ),
+      onDrop: disableDragDrop ? void 0 : handleDrop,
+      onDragEnter: disableDragDrop ? void 0 : handleDragEnterOrOver,
+      onDragOver: disableDragDrop ? void 0 : handleDragEnterOrOver,
+      onDragLeave: disableDragDrop ? void 0 : handleDragLeave,
+      onPaste: handlePaste,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames(
+              "flex flex-col items-center justify-center gap-y-2",
+              isBorderless ? "text-foreground-muted" : "text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(MaterialSymbol, { icon: "cloud_upload", size: 30, className: isBorderless ? "text-brand-emphasis" : void 0 }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: classNames(
+                    "flex flex-row flex-wrap justify-center gap-x-1",
+                    isBorderless ? "font-medium" : "font-bold"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "file",
+                        id: inputId,
+                        onChange: handleFileChange,
+                        accept: allowedTypes.join(", "),
+                        multiple,
+                        className: "hidden"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { children: t("uploader.dragOr") }),
+                    /* @__PURE__ */ jsx(
+                      "label",
+                      {
+                        htmlFor: inputId,
+                        className: classNames(
+                          "cursor-pointer underline underline-offset-2",
+                          isBorderless ? "font-semibold text-brand-emphasis" : "text-underline"
+                        ),
+                        children: t("uploader.selectFile")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "font-normal text-foreground-subtle", children: t("uploader.orPaste") })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "text-xs", children: [
+                t("uploader.allowedFormats"),
+                " ",
+                allowedTypes.map((type) => type.startsWith(".") ? type : "." + type.split("/")[1]).join(" "),
+                " ",
+                t("uploader.upTo"),
+                " ",
+                MAX_FILE_SIZE_MB,
+                t("uploader.megabytesSuffix")
+              ] })
+            ]
+          }
+        ),
+        files.length > 0 && /* @__PURE__ */ jsx("div", { className: "my-5 flex max-h-40 w-full flex-col gap-y-2 overflow-y-scroll", children: files.map((file, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between rounded-lg border border-border-emphasis p-2",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-1", children: /* @__PURE__ */ jsx("p", { className: "m-0 text-sm text-foreground", children: file.name }) }),
+              /* @__PURE__ */ jsx("div", { className: "cursor-pointer", onClick: () => handleRemoveFile(index), children: /* @__PURE__ */ jsx(ControlledTooltip, { content: t("actions.remove"), children: /* @__PURE__ */ jsx(MaterialSymbol, { size: 20, icon: "delete_sweep", color: "rgb(var(--color-danger))" }) }) })
+            ]
+          },
+          `${file.name}-${file.size}-${file.lastModified}`
+        )) }),
+        files.length > 0 && multiple && /* @__PURE__ */ jsxs(
+          ControlledButton,
+          {
+            variant: "outlined",
+            tone: "neutral",
+            size: "sm",
+            className: "inter-font flex items-center justify-center gap-x-2 rounded-md normal-case text-foreground",
+            onClick: () => handleFilesSelected(files),
+            children: [
+              t("uploader.sendFiles"),
+              /* @__PURE__ */ jsx(MaterialSymbol, { icon: "difference", size: 16, color: "rgb(var(--color-foreground))" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  UploaderComponent as default
+};
+//# sourceMappingURL=UploaderComponent.js.map

package/dist/components/Upload/UploaderComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploaderComponent.js","sources":["../../../src/components/Upload/UploaderComponent.tsx"],"sourcesContent":["import { useId, useState } from 'react';\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\n\nimport { useNotification } from '../../hooks/useNotification';\nimport ControlledButton from '../Form/ControlledButton';\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\ninterface IUploaderComponentProps {\n  allowedTypes: Array<string>;\n  handleFilesSelected: (files: Array<File>) => void;\n  multiple?: boolean;\n  className?: string;\n  simpleLayout?: boolean;\n  maxSizeMB?: number;\n  /**\n   * When true, valid files are sent immediately via `handleFilesSelected` instead of\n   * being staged behind a manual \"send\" button. Keeps the default behavior elsewhere.\n   */\n  autoUpload?: boolean;\n  /**\n   * Visual style of the full dropzone. `'default'` keeps the neutral gray boxed look used\n   * across the app; `'borderless'` drops the dashed frame/background and shows only the\n   * centered content with the product accent (lilac icon and link, softer typography).\n   * For panels where drag/paste already works anywhere and the frame is redundant.\n   */\n  variant?: 'default' | 'borderless';\n  /**\n   * When true, the component stops handling its own drag/drop (it still opens the file\n   * picker on click and handles paste). Use when a parent container owns drag-and-drop for\n   * a larger area and should be the single drop target, avoiding duplicated uploads.\n   */\n  disableDragDrop?: boolean;\n}\n\nconst UploaderComponent: React.FC<IUploaderComponentProps> = ({\n  allowedTypes,\n  handleFilesSelected,\n  multiple = false,\n  className,\n  simpleLayout = false,\n  maxSizeMB = 1,\n  autoUpload = false,\n  variant = 'default',\n  disableDragDrop = false,\n}) => {\n  const { t } = useTranslation('ui');\n  const { notify } = useNotification();\n  const isBorderless = variant === 'borderless';\n\n  const MAX_FILE_SIZE_MB = maxSizeMB;\n  const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;\n  const [files, setFiles] = useState<Array<File>>([]);\n  const [isDragging, setIsDragging] = useState(false);\n  const inputId = useId();\n\n  const matchesAllowedType = (file: File): boolean => {\n    if (allowedTypes.includes(file.type)) return true;\n    const extension = '.' + (file.name.split('.').pop() ?? '').toLowerCase();\n    return allowedTypes.some((type) => type.toLowerCase() === extension);\n  };\n\n  const handleFiles = (newFiles: Array<File>) => {\n    if (autoUpload) {\n      handleFilesSelected(newFiles);\n      return;\n    }\n    setFiles(newFiles);\n    if (!multiple && newFiles.length === 1) {\n      handleFilesSelected(newFiles);\n    }\n  };\n\n  const acceptExternalFiles = (candidates: Array<File>) => {\n    const typeMatched = candidates.filter(matchesAllowedType);\n    const validFiles = typeMatched.filter((file) => file.size <= MAX_FILE_SIZE_BYTES);\n\n    if (validFiles.length < typeMatched.length) {\n      notify({ message: t('uploader.filesIgnoredMaxSize', { size: MAX_FILE_SIZE_MB }), type: 'error' });\n    }\n\n    if (validFiles.length > 0) {\n      handleFiles(validFiles);\n    } else {\n      notify({ message: t('uploader.invalidFormat'), type: 'error' });\n    }\n  };\n\n  const clipboardFiles = (clipboardData: DataTransfer | null): Array<File> => {\n    const fromFiles = Array.from(clipboardData?.files ?? []);\n    if (fromFiles.length > 0) return fromFiles;\n    return Array.from(clipboardData?.items ?? [])\n      .filter((item) => item.kind === 'file')\n      .map((item) => item.getAsFile())\n      .filter((file): file is File => file !== null);\n  };\n\n  const handlePaste: React.ClipboardEventHandler<HTMLDivElement> = (event) => {\n    const pasted = clipboardFiles(event.clipboardData);\n    if (pasted.length === 0) return;\n    event.preventDefault();\n    acceptExternalFiles(pasted);\n  };\n\n  const handleDragEnterOrOver: React.DragEventHandler<HTMLDivElement> = (event) => {\n    event.preventDefault();\n    if (!isDragging) setIsDragging(true);\n  };\n\n  const handleDragLeave: React.DragEventHandler<HTMLDivElement> = (event) => {\n    if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;\n    setIsDragging(false);\n  };\n\n  const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const selectedFiles = event.target.files;\n    if (selectedFiles && selectedFiles.length > 0) {\n      const newFiles = Array.from(selectedFiles).filter((file) => file.size <= MAX_FILE_SIZE_BYTES);\n\n      if (newFiles.length < selectedFiles.length) {\n        notify({\n          message: t('uploader.filesIgnoredMaxSize', { size: MAX_FILE_SIZE_MB }),\n          type: 'error',\n        });\n      }\n\n      if (newFiles.length > 0) {\n        handleFiles(newFiles);\n      }\n    }\n  };\n\n  const handleDrop: React.DragEventHandler<HTMLDivElement> = (event) => {\n    event.preventDefault();\n    setIsDragging(false);\n    acceptExternalFiles(Array.from(event.dataTransfer.files));\n  };\n\n  const handleRemoveFile = (index: number) => {\n    setFiles((prevFiles) => {\n      const next = prevFiles.filter((_, i) => i !== index);\n      if (!multiple && next.length === 0) {\n        handleFilesSelected([]);\n      }\n      return next;\n    });\n  };\n\n  if (simpleLayout) {\n    return (\n      <div\n        tabIndex={0}\n        className={classNames(\n          'aspect-square w-[4.5rem] cursor-pointer rounded-lg border-2 border-dashed p-4 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-border',\n          isDragging ? 'border-brand bg-brand-soft' : 'border-border-strong hover:bg-muted',\n          className,\n        )}\n        onDrop={handleDrop}\n        onDragEnter={handleDragEnterOrOver}\n        onDragOver={handleDragEnterOrOver}\n        onDragLeave={handleDragLeave}\n        onPaste={handlePaste}\n      >\n        <input\n          type=\"file\"\n          id={inputId}\n          onChange={handleFileChange}\n          accept={allowedTypes.join(', ')}\n          multiple={multiple}\n          className=\"hidden\"\n        />\n        <label htmlFor={inputId} className=\"flex size-full cursor-pointer items-center justify-center\">\n          <MaterialSymbol icon=\"add_photo_alternate\" size={23} color=\"rgb(var(--color-foreground-subtle))\" />\n        </label>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      tabIndex={0}\n      className={classNames(\n        'flex w-full flex-col items-center justify-center rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-border',\n        isBorderless ? 'py-4' : 'border-2 border-dashed px-4 py-8',\n        !isBorderless && (isDragging ? 'border-brand bg-brand-soft' : 'border-border-strong'),\n        isBorderless && isDragging && 'bg-brand-soft/60',\n        className,\n      )}\n      onDrop={disableDragDrop ? undefined : handleDrop}\n      onDragEnter={disableDragDrop ? undefined : handleDragEnterOrOver}\n      onDragOver={disableDragDrop ? undefined : handleDragEnterOrOver}\n      onDragLeave={disableDragDrop ? undefined : handleDragLeave}\n      onPaste={handlePaste}\n    >\n      <div\n        className={classNames(\n          'flex flex-col items-center justify-center gap-y-2',\n          isBorderless ? 'text-foreground-muted' : 'text-foreground',\n        )}\n      >\n        {/* Sem `color`: herda o `currentColor` do bloco acima, que já nomeia um token nos dois ramos. */}\n        <MaterialSymbol icon=\"cloud_upload\" size={30} className={isBorderless ? 'text-brand-emphasis' : undefined} />\n        <div\n          className={classNames(\n            'flex flex-row flex-wrap justify-center gap-x-1',\n            isBorderless ? 'font-medium' : 'font-bold',\n          )}\n        >\n          <input\n            type=\"file\"\n            id={inputId}\n            onChange={handleFileChange}\n            accept={allowedTypes.join(', ')}\n            multiple={multiple}\n            className=\"hidden\"\n          />\n          <span>{t('uploader.dragOr')}</span>\n          <label\n            htmlFor={inputId}\n            className={classNames(\n              'cursor-pointer underline underline-offset-2',\n              isBorderless ? 'font-semibold text-brand-emphasis' : 'text-underline',\n            )}\n          >\n            {t('uploader.selectFile')}\n          </label>\n          <span className=\"font-normal text-foreground-subtle\">{t('uploader.orPaste')}</span>\n        </div>\n        <span className=\"text-xs\">\n          {t('uploader.allowedFormats')}{' '}\n          {allowedTypes.map((type) => (type.startsWith('.') ? type : '.' + type.split('/')[1])).join(' ')}{' '}\n          {t('uploader.upTo')} {MAX_FILE_SIZE_MB}\n          {t('uploader.megabytesSuffix')}\n        </span>\n      </div>\n\n      {files.length > 0 && (\n        <div className=\"my-5 flex max-h-40 w-full flex-col gap-y-2 overflow-y-scroll\">\n          {files.map((file, index) => (\n            <div\n              className=\"flex items-center justify-between rounded-lg border border-border-emphasis p-2\"\n              key={`${file.name}-${file.size}-${file.lastModified}`}\n            >\n              <div className=\"flex flex-1 flex-col gap-1\">\n                <p className=\"m-0 text-sm text-foreground\">{file.name}</p>\n              </div>\n              <div className=\"cursor-pointer\" onClick={() => handleRemoveFile(index)}>\n                <ControlledTooltip content={t('actions.remove')}>\n                  <MaterialSymbol size={20} icon=\"delete_sweep\" color=\"rgb(var(--color-danger))\" />\n                </ControlledTooltip>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {files.length > 0 && multiple && (\n        <ControlledButton\n          variant=\"outlined\"\n          tone=\"neutral\"\n          size=\"sm\"\n          className=\"inter-font flex items-center justify-center gap-x-2 rounded-md normal-case text-foreground\"\n          onClick={() => handleFilesSelected(files)}\n        >\n          {t('uploader.sendFiles')}\n          <MaterialSymbol icon=\"difference\" size={16} color=\"rgb(var(--color-foreground))\" />\n        </ControlledButton>\n      )}\n    </div>\n  );\n};\n\nexport default UploaderComponent;\n"],"names":[],"mappings":"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"}

package/dist/components/Upload/XlsExportButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IXlsExportButtonProps {
+    onClickHook?: () => void;
+    fetchFunction?: () => Promise<Blob>;
+    filename?: string;
+    isLoading?: boolean;
+    disabled?: boolean;
+    buttonText?: string;
+    className?: string;
+    tooltipText?: string;
+}
+declare const XlsExportButton: React.FC<IXlsExportButtonProps>;
+export default XlsExportButton;

package/dist/components/Upload/XlsExportButton.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import classNames from "classnames";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { handleDownload } from "../../helpers/utilityHelpers.js";
+import ControlledButton from "../Form/ControlledButton.js";
+import LoadingSpinner from "../UI/LoadingSpinner.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+const XlsExportButton = ({
+  onClickHook,
+  fetchFunction,
+  filename = "export.xls",
+  isLoading: externalLoading,
+  disabled = false,
+  buttonText = "Exportar",
+  className,
+  tooltipText = "Exportar dados da tabela"
+}) => {
+  const [internalLoading, setInternalLoading] = useState(false);
+  const isLoading = externalLoading !== void 0 ? externalLoading : internalLoading;
+  const handleClick = async () => {
+    if (fetchFunction) {
+      await handleDownload(fetchFunction, filename, setInternalLoading);
+    } else if (onClickHook) {
+      onClickHook();
+    }
+  };
+  return /* @__PURE__ */ jsx(ControlledTooltip, { content: tooltipText, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    ControlledButton,
+    {
+      onClick: handleClick,
+      disabled: isLoading || disabled,
+      className: classNames(
+        "rounded-md border border-border-subtle bg-transparent px-4 py-2 text-sm font-semibold capitalize text-foreground-muted shadow-none hover:bg-muted-hover hover:shadow-none",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center align-middle", children: [
+        isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, color: "foreground" }) : /* @__PURE__ */ jsx(MaterialSymbol, { icon: "download", size: 18 }),
+        /* @__PURE__ */ jsx("span", { className: "ml-2", children: buttonText })
+      ] })
+    }
+  ) }) });
+};
+export {
+  XlsExportButton as default
+};
+//# sourceMappingURL=XlsExportButton.js.map

package/dist/components/Upload/XlsExportButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"XlsExportButton.js","sources":["../../../src/components/Upload/XlsExportButton.tsx"],"sourcesContent":["import { useState } from 'react';\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { handleDownload } from '@/helpers/utilityHelpers';\n\nimport ControlledButton from '../Form/ControlledButton';\nimport LoadingSpinner from '../UI/LoadingSpinner';\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\ninterface IXlsExportButtonProps {\n  onClickHook?: () => void;\n  fetchFunction?: () => Promise<Blob>;\n  filename?: string;\n  isLoading?: boolean;\n  disabled?: boolean;\n  buttonText?: string;\n  className?: string;\n  tooltipText?: string;\n}\n\nconst XlsExportButton: React.FC<IXlsExportButtonProps> = ({\n  onClickHook,\n  fetchFunction,\n  filename = 'export.xls',\n  isLoading: externalLoading,\n  disabled = false,\n  buttonText = 'Exportar',\n  className,\n  tooltipText = 'Exportar dados da tabela',\n}) => {\n  const [internalLoading, setInternalLoading] = useState(false);\n\n  const isLoading = externalLoading !== undefined ? externalLoading : internalLoading;\n\n  const handleClick = async () => {\n    if (fetchFunction) {\n      await handleDownload(fetchFunction, filename, setInternalLoading);\n    } else if (onClickHook) {\n      onClickHook();\n    }\n  };\n\n  return (\n    <ControlledTooltip content={tooltipText}>\n      <div>\n        <ControlledButton\n          onClick={handleClick}\n          disabled={isLoading || disabled}\n          className={classNames(\n            'rounded-md border border-border-subtle bg-transparent px-4 py-2 text-sm font-semibold capitalize text-foreground-muted shadow-none hover:bg-muted-hover hover:shadow-none',\n            className,\n          )}\n        >\n          <div className=\"flex flex-row items-center align-middle\">\n            {isLoading ? <LoadingSpinner size={4} color=\"foreground\" /> : <MaterialSymbol icon=\"download\" size={18} />}\n            <span className=\"ml-2\">{buttonText}</span>\n          </div>\n        </ControlledButton>\n      </div>\n    </ControlledTooltip>\n  );\n};\n\nexport default XlsExportButton;\n"],"names":[],"mappings":";;;;;;;;AAsBA,MAAM,kBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,cAAc;AAChB,MAAM;AACJ,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAE5D,QAAM,YAAY,oBAAoB,SAAY,kBAAkB;AAEpE,QAAM,cAAc,YAAY;AAC9B,QAAI,eAAe;AACjB,YAAM,eAAe,eAAe,UAAU,kBAAkB;AAAA,IAClE,WAAW,aAAa;AACtB,kBAAA;AAAA,IACF;AAAA,EACF;AAEA,SACE,oBAAC,mBAAA,EAAkB,SAAS,aAC1B,8BAAC,OAAA,EACC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU,aAAa;AAAA,MACvB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA,qBAAC,OAAA,EAAI,WAAU,2CACZ,UAAA;AAAA,QAAA,YAAY,oBAAC,gBAAA,EAAe,MAAM,GAAG,OAAM,aAAA,CAAa,IAAK,oBAAC,gBAAA,EAAe,MAAK,YAAW,MAAM,IAAI;AAAA,QACxG,oBAAC,QAAA,EAAK,WAAU,QAAQ,UAAA,WAAA,CAAW;AAAA,MAAA,EAAA,CACrC;AAAA,IAAA;AAAA,EAAA,GAEJ,EAAA,CACF;AAEJ;"}

package/dist/helpers/composeRefs.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'react';
+/**
+ * Applies one node to several refs. Floating surfaces need this: the handler registers the
+ * node as the positioning reference while an outer wrapper (a tooltip on the same trigger)
+ * registers it as its own reference, and a plain clone would silently drop one of them.
+ */
+export declare const composeRefs: <T>(...refs: Array<Ref<T> | undefined>) => (node: T | null) => void;

package/dist/helpers/composeRefs.js

@@ -0,0 +1,14 @@
+const composeRefs = (...refs) => (node) => {
+  refs.forEach((ref) => {
+    if (!ref) return;
+    if (typeof ref === "function") {
+      ref(node);
+      return;
+    }
+    ref.current = node;
+  });
+};
+export {
+  composeRefs
+};
+//# sourceMappingURL=composeRefs.js.map

package/dist/helpers/composeRefs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composeRefs.js","sources":["../../src/helpers/composeRefs.ts"],"sourcesContent":["import type { MutableRefObject, Ref } from 'react';\n\n/**\n * Applies one node to several refs. Floating surfaces need this: the handler registers the\n * node as the positioning reference while an outer wrapper (a tooltip on the same trigger)\n * registers it as its own reference, and a plain clone would silently drop one of them.\n */\nexport const composeRefs =\n  <T>(...refs: Array<Ref<T> | undefined>) =>\n  (node: T | null): void => {\n    refs.forEach((ref) => {\n      if (!ref) return;\n      if (typeof ref === 'function') {\n        ref(node);\n        return;\n      }\n      (ref as MutableRefObject<T | null>).current = node;\n    });\n  };\n"],"names":[],"mappings":"AAOO,MAAM,cACX,IAAO,SACP,CAAC,SAAyB;AACxB,OAAK,QAAQ,CAAC,QAAQ;AACpB,QAAI,CAAC,IAAK;AACV,QAAI,OAAO,QAAQ,YAAY;AAC7B,UAAI,IAAI;AACR;AAAA,IACF;AACC,QAAmC,UAAU;AAAA,EAChD,CAAC;AACH;"}

package/dist/helpers/dateHelpers.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Get the month name in Portuguese from a Date object
+ * @param date - The date object to extract the month name from
+ * @returns Capitalized month name in Portuguese
+ */
+export declare const getMonthName: (date: Date) => string;
+/**
+ * Format a Date object as DD/MM/YYYY string
+ * @param date - The date object to format
+ * @returns Formatted date string in DD/MM/YYYY format or '-' if invalid
+ */
+export declare const formatDate: (date: Date) => string;
+/**
+ * Format a Date object as simple date with abbreviated month in Portuguese
+ * @param date - The date object to format
+ * @returns Formatted date string like "15 Jan"
+ */
+export declare const formatSimpleDate: (date: Date) => string;
+/**
+ * Format an ISO date string as DD/MM/YYYY
+ * @param raw - ISO date string ('YYYY-MM-DD' or 'YYYY-MM-DDTHH:mm...')
+ * @returns Formatted date string in DD/MM/YYYY format, or the input unchanged if not parseable
+ */
+export declare const formatIsoDate: (raw: string) => string;
+/**
+ * Get current timestamp in local timezone as ISO-like string
+ * @returns Local timestamp string in format "YYYY-MM-DDTHH:MM:SS"
+ */
+export declare const getLocalTimestamp: () => string;
+/**
+ * Format an ISO timestamp string to DD/MM/YYYY HH:MM format
+ * @param input - ISO timestamp string (e.g., "2023-12-15T14:30:00")
+ * @returns Formatted timestamp string in DD/MM/YYYY HH:MM format
+ */
+export declare const formatTimeStamps: (input: string) => string;
+/**
+ * Format a Date object as a full date label in Portuguese
+ * @param date - The date object to format
+ * @returns Full date string like "segunda-feira, 15 de janeiro de 2024"
+ */
+export declare const getFormatedDateLabel: (date: Date) => string;
+/**
+ * Calculate and format duration from milliseconds to days
+ * @param duration - Duration in milliseconds
+ * @returns Formatted duration string like "5 dia(s)" or "Indisponível"
+ */
+export declare const calculateDuration: (duration: number) => string;

package/dist/helpers/dateHelpers.js

@@ -0,0 +1,69 @@
+const getMonthName = (date) => {
+  return capitalize(Intl.DateTimeFormat("pt-BR", { month: "long" }).format(date));
+};
+const formatDate = (date) => {
+  if (!(date instanceof Date) || isNaN(date.getTime())) {
+    return "-";
+  }
+  const day = String(date.getUTCDate()).padStart(2, "0");
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const year = date.getUTCFullYear();
+  return `${day}/${month}/${year}`;
+};
+const formatSimpleDate = (date) => {
+  return new Intl.DateTimeFormat("pt-BR", {
+    day: "2-digit",
+    month: "short",
+    timeZone: "UTC"
+  }).format(date);
+};
+const formatIsoDate = (raw) => {
+  const [year, month, day] = raw.slice(0, 10).split("-");
+  return year && month && day ? `${day}/${month}/${year}` : raw;
+};
+const getLocalTimestamp = () => {
+  const now = /* @__PURE__ */ new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const day = String(now.getDate()).padStart(2, "0");
+  const hours = String(now.getHours()).padStart(2, "0");
+  const minutes = String(now.getMinutes()).padStart(2, "0");
+  const seconds = String(now.getSeconds()).padStart(2, "0");
+  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+};
+const formatTimeStamps = (input) => {
+  const [datePart, timePart] = input?.split("T") ?? [];
+  if (!datePart || !timePart) return "-";
+  const [year, month, day] = datePart.split("-").map(Number);
+  const [hour, minute] = timePart.split(":").map(Number);
+  return `${day.toString().padStart(2, "0")}/${month.toString().padStart(2, "0")}/${year} ${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+};
+const getFormatedDateLabel = (date) => {
+  const options = {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  };
+  return new Intl.DateTimeFormat("pt-BR", options).format(date);
+};
+const calculateDuration = (duration) => {
+  if (!duration) return "Indisponível";
+  const durationInDays = Math.ceil(duration / (1e3 * 60 * 60 * 24));
+  return `${durationInDays} dia(s)`;
+};
+const capitalize = (str) => {
+  if (!str || typeof str !== "string") return "";
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+};
+export {
+  calculateDuration,
+  formatDate,
+  formatIsoDate,
+  formatSimpleDate,
+  formatTimeStamps,
+  getFormatedDateLabel,
+  getLocalTimestamp,
+  getMonthName
+};
+//# sourceMappingURL=dateHelpers.js.map

package/dist/helpers/dateHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateHelpers.js","sources":["../../src/helpers/dateHelpers.ts"],"sourcesContent":["/**\n * Get the month name in Portuguese from a Date object\n * @param date - The date object to extract the month name from\n * @returns Capitalized month name in Portuguese\n */\nexport const getMonthName = (date: Date) => {\n  return capitalize(Intl.DateTimeFormat('pt-BR', { month: 'long' }).format(date));\n};\n\n/**\n * Format a Date object as DD/MM/YYYY string\n * @param date - The date object to format\n * @returns Formatted date string in DD/MM/YYYY format or '-' if invalid\n */\nexport const formatDate = (date: Date) => {\n  if (!(date instanceof Date) || isNaN(date.getTime())) {\n    return '-';\n  }\n\n  const day = String(date.getUTCDate()).padStart(2, '0');\n  const month = String(date.getUTCMonth() + 1).padStart(2, '0');\n  const year = date.getUTCFullYear();\n  return `${day}/${month}/${year}`;\n};\n\n/**\n * Format a Date object as simple date with abbreviated month in Portuguese\n * @param date - The date object to format\n * @returns Formatted date string like \"15 Jan\"\n */\nexport const formatSimpleDate = (date: Date) => {\n  return new Intl.DateTimeFormat('pt-BR', {\n    day: '2-digit',\n    month: 'short',\n    timeZone: 'UTC',\n  }).format(date);\n};\n\n/**\n * Format an ISO date string as DD/MM/YYYY\n * @param raw - ISO date string ('YYYY-MM-DD' or 'YYYY-MM-DDTHH:mm...')\n * @returns Formatted date string in DD/MM/YYYY format, or the input unchanged if not parseable\n */\nexport const formatIsoDate = (raw: string): string => {\n  const [year, month, day] = raw.slice(0, 10).split('-');\n  return year && month && day ? `${day}/${month}/${year}` : raw;\n};\n\n/**\n * Get current timestamp in local timezone as ISO-like string\n * @returns Local timestamp string in format \"YYYY-MM-DDTHH:MM:SS\"\n */\nexport const getLocalTimestamp = (): string => {\n  const now = new Date();\n  const year = now.getFullYear();\n  const month = String(now.getMonth() + 1).padStart(2, '0');\n  const day = String(now.getDate()).padStart(2, '0');\n  const hours = String(now.getHours()).padStart(2, '0');\n  const minutes = String(now.getMinutes()).padStart(2, '0');\n  const seconds = String(now.getSeconds()).padStart(2, '0');\n  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;\n};\n\n/**\n * Format an ISO timestamp string to DD/MM/YYYY HH:MM format\n * @param input - ISO timestamp string (e.g., \"2023-12-15T14:30:00\")\n * @returns Formatted timestamp string in DD/MM/YYYY HH:MM format\n */\nexport const formatTimeStamps = (input: string): string => {\n  const [datePart, timePart] = input?.split('T') ?? [];\n  if (!datePart || !timePart) return '-';\n\n  const [year, month, day] = datePart.split('-').map(Number);\n  const [hour, minute] = timePart.split(':').map(Number);\n\n  return `${day.toString().padStart(2, '0')}/${month.toString().padStart(2, '0')}/${year} ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;\n};\n\n/**\n * Format a Date object as a full date label in Portuguese\n * @param date - The date object to format\n * @returns Full date string like \"segunda-feira, 15 de janeiro de 2024\"\n */\nexport const getFormatedDateLabel = (date: Date) => {\n  const options: Intl.DateTimeFormatOptions = {\n    weekday: 'long',\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  };\n\n  return new Intl.DateTimeFormat('pt-BR', options).format(date);\n};\n\n/**\n * Calculate and format duration from milliseconds to days\n * @param duration - Duration in milliseconds\n * @returns Formatted duration string like \"5 dia(s)\" or \"Indisponível\"\n */\nexport const calculateDuration = (duration: number) => {\n  // eslint-disable-next-line i18n-check/no-portuguese-strings\n  if (!duration) return 'Indisponível';\n\n  const durationInDays = Math.ceil(duration / (1000 * 60 * 60 * 24));\n\n  return `${durationInDays} dia(s)`;\n};\n\n/**\n * Capitalize the first letter of a string and lowercase the rest\n * @param str - The string to capitalize\n * @returns Capitalized string or empty string if invalid input\n */\nconst capitalize = (str?: string) => {\n  if (!str || typeof str !== 'string') return '';\n  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();\n};\n"],"names":[],"mappings":"AAKO,MAAM,eAAe,CAAC,SAAe;AAC1C,SAAO,WAAW,KAAK,eAAe,SAAS,EAAE,OAAO,QAAQ,EAAE,OAAO,IAAI,CAAC;AAChF;AAOO,MAAM,aAAa,CAAC,SAAe;AACxC,MAAI,EAAE,gBAAgB,SAAS,MAAM,KAAK,QAAA,CAAS,GAAG;AACpD,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,OAAO,KAAK,WAAA,CAAY,EAAE,SAAS,GAAG,GAAG;AACrD,QAAM,QAAQ,OAAO,KAAK,YAAA,IAAgB,CAAC,EAAE,SAAS,GAAG,GAAG;AAC5D,QAAM,OAAO,KAAK,eAAA;AAClB,SAAO,GAAG,GAAG,IAAI,KAAK,IAAI,IAAI;AAChC;AAOO,MAAM,mBAAmB,CAAC,SAAe;AAC9C,SAAO,IAAI,KAAK,eAAe,SAAS;AAAA,IACtC,KAAK;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,EAAA,CACX,EAAE,OAAO,IAAI;AAChB;AAOO,MAAM,gBAAgB,CAAC,QAAwB;AACpD,QAAM,CAAC,MAAM,OAAO,GAAG,IAAI,IAAI,MAAM,GAAG,EAAE,EAAE,MAAM,GAAG;AACrD,SAAO,QAAQ,SAAS,MAAM,GAAG,GAAG,IAAI,KAAK,IAAI,IAAI,KAAK;AAC5D;AAMO,MAAM,oBAAoB,MAAc;AAC7C,QAAM,0BAAU,KAAA;AAChB,QAAM,OAAO,IAAI,YAAA;AACjB,QAAM,QAAQ,OAAO,IAAI,SAAA,IAAa,CAAC,EAAE,SAAS,GAAG,GAAG;AACxD,QAAM,MAAM,OAAO,IAAI,QAAA,CAAS,EAAE,SAAS,GAAG,GAAG;AACjD,QAAM,QAAQ,OAAO,IAAI,SAAA,CAAU,EAAE,SAAS,GAAG,GAAG;AACpD,QAAM,UAAU,OAAO,IAAI,WAAA,CAAY,EAAE,SAAS,GAAG,GAAG;AACxD,QAAM,UAAU,OAAO,IAAI,WAAA,CAAY,EAAE,SAAS,GAAG,GAAG;AACxD,SAAO,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,KAAK,IAAI,OAAO,IAAI,OAAO;AAC/D;AAOO,MAAM,mBAAmB,CAAC,UAA0B;AACzD,QAAM,CAAC,UAAU,QAAQ,IAAI,OAAO,MAAM,GAAG,KAAK,CAAA;AAClD,MAAI,CAAC,YAAY,CAAC,SAAU,QAAO;AAEnC,QAAM,CAAC,MAAM,OAAO,GAAG,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI,MAAM;AACzD,QAAM,CAAC,MAAM,MAAM,IAAI,SAAS,MAAM,GAAG,EAAE,IAAI,MAAM;AAErD,SAAO,GAAG,IAAI,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAI,MAAM,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAI,IAAI,IAAI,KAAK,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAI,OAAO,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC;AAClK;AAOO,MAAM,uBAAuB,CAAC,SAAe;AAClD,QAAM,UAAsC;AAAA,IAC1C,SAAS;AAAA,IACT,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAGR,SAAO,IAAI,KAAK,eAAe,SAAS,OAAO,EAAE,OAAO,IAAI;AAC9D;AAOO,MAAM,oBAAoB,CAAC,aAAqB;AAErD,MAAI,CAAC,SAAU,QAAO;AAEtB,QAAM,iBAAiB,KAAK,KAAK,YAAY,MAAO,KAAK,KAAK,GAAG;AAEjE,SAAO,GAAG,cAAc;AAC1B;AAOA,MAAM,aAAa,CAAC,QAAiB;AACnC,MAAI,CAAC,OAAO,OAAO,QAAQ,SAAU,QAAO;AAC5C,SAAO,IAAI,OAAO,CAAC,EAAE,gBAAgB,IAAI,MAAM,CAAC,EAAE,YAAA;AACpD;"}

package/dist/helpers/fileAttachments.d.ts

@@ -0,0 +1,3 @@
+import { SymbolCodepoints } from '../components/UI/MaterialSymbol';
+export declare const formatFileSize: (sizeInBytes: number) => string;
+export declare const iconForMimeType: (mimeType: string) => SymbolCodepoints;

package/dist/helpers/fileAttachments.js

@@ -0,0 +1,17 @@
+const formatFileSize = (sizeInBytes) => {
+  if (!Number.isFinite(sizeInBytes) || sizeInBytes <= 0) return "0 KB";
+  if (sizeInBytes < 1024 * 1024) return `${Math.max(1, Math.round(sizeInBytes / 1024))} KB`;
+  return `${(sizeInBytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+const iconForMimeType = (mimeType) => {
+  if ((mimeType ?? "").startsWith("image/")) return "image";
+  if ((mimeType ?? "").startsWith("audio/")) return "mic";
+  if ((mimeType ?? "").startsWith("video/")) return "videocam";
+  if (mimeType === "application/pdf") return "picture_as_pdf";
+  return "description";
+};
+export {
+  formatFileSize,
+  iconForMimeType
+};
+//# sourceMappingURL=fileAttachments.js.map