lecom-ui 4.5.3 → 4.5.4

package/dist/components/Upload/Upload.js

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { cn } from '../../lib/utils.js';
+import { ArrowDownToLine, Trash } from 'lucide-react';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
+import { Typography } from '../Typography/Typography.js';
+import { initializeI18n } from '../../i18n/index.js';
+
+initializeI18n();
+const Upload = ({
+  onFilesSelected,
+  className,
+  accept,
+  multiple
+}) => {
+  const [files, setFiles] = React.useState([]);
+  const { t } = useTranslation();
+  const handleFileChange = (event) => {
+    const selectedFiles = event.target.files;
+    if (selectedFiles && selectedFiles.length > 0) {
+      const newFiles = Array.from(selectedFiles);
+      setFiles((prevFiles) => [...prevFiles, ...newFiles]);
+    }
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    const droppedFiles = event.dataTransfer.files;
+    if (droppedFiles.length > 0) {
+      const newFiles = Array.from(droppedFiles);
+      setFiles((prevFiles) => [...prevFiles, ...newFiles]);
+    }
+  };
+  const handleDownloadFile = (index) => {
+    const currentFile = files.find((_, i) => i === index) || {};
+    const objectURL = URL.createObjectURL(currentFile);
+    const link = document.createElement("a");
+    link.download = currentFile.name;
+    link.href = objectURL;
+    link.click();
+  };
+  const handleRemoveFile = (index) => {
+    setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
+  };
+  React.useEffect(() => {
+    onFilesSelected?.(files);
+  }, [files, onFilesSelected]);
+  const handleClickUpload = () => {
+    if (!hasFile()) {
+      document.getElementById("browse")?.click();
+    }
+  };
+  const hasFile = () => files.length > 0;
+  if (hasFile()) {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn(
+          "px-4 border border-grey-400 rounded-[4px] w-full h-10 flex items-center",
+          className
+        )
+      },
+      files.map((file, index) => /* @__PURE__ */ React.createElement("div", { key: index, className: "flex gap-4 w-full" }, /* @__PURE__ */ React.createElement(
+        Typography,
+        {
+          variant: "body-medium-400",
+          textColor: "text-grey-950",
+          className: "grow truncate"
+        },
+        file.name
+      ), /* @__PURE__ */ React.createElement("div", { className: "flex gap-4 shrink-0" }, /* @__PURE__ */ React.createElement(TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+        ArrowDownToLine,
+        {
+          size: 20,
+          onClick: () => handleDownloadFile(index),
+          className: "text-grey-800 hover:cursor-pointer hover:text-grey-950 transition-all"
+        }
+      )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("upload.download"))), /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+        Trash,
+        {
+          size: 20,
+          onClick: () => handleRemoveFile(index),
+          className: "text-grey-800 hover:cursor-pointer hover:text-grey-950 transition-all"
+        }
+      )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, t("upload.remove")))))))
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        "p-4 border border-grey-400 border-dashed rounded-[4px] h-[96px] w-full hover:cursor-pointer hover:border-grey-600 transition-all",
+        className
+      ),
+      onDrop: handleDrop,
+      onDragOver: (event) => event.preventDefault(),
+      onClick: handleClickUpload
+    },
+    /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body-medium-400", textColor: "text-grey-500" }, t("upload.label")), /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "file",
+        hidden: true,
+        id: "browse",
+        onChange: handleFileChange,
+        accept: accept || "*",
+        multiple: !!multiple
+      }
+    ))
+  );
+};
+Upload.displayName = "Upload";
+
+export { Upload };

package/dist/index.d.ts

@@ -541,8 +541,8 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
 
 declare const inputVariants: (props?: ({
     variant?: "default" | "filled" | "borderless" | null | undefined;
-    size?: "default" | "small" | "large" | null | undefined;
-    radius?: "default" | "small" | "large" | null | undefined;
+    size?: "small" | "default" | "large" | null | undefined;
+    radius?: "small" | "default" | "large" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'sufix' | 'prefix'>, VariantProps<typeof inputVariants> {
     sufix?: React$1.ReactNode;
@@ -746,6 +746,22 @@ type SidebarContext = {
 declare const SidebarContext: React$1.Context<SidebarContext | null>;
 declare function useSidebar(): SidebarContext;
 
+interface File {
+    name: string;
+    size: number;
+    type: string;
+}
+interface UploadProps {
+    onFilesSelected?: (files: File[]) => void;
+    className?: string;
+    accept?: string;
+    multiple?: boolean;
+}
+declare const Upload: {
+    ({ onFilesSelected, className, accept, multiple, }: UploadProps): React$1.JSX.Element;
+    displayName: string;
+};
+
 declare function useIsMobile(): boolean;
 
 declare enum Translations {
@@ -768,5 +784,5 @@ declare const fonts: {
     ibm: string[];
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, CadastroFacil, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorEmptyDisplay, Input, Layout, LogoLecom, LogoLecomBrand, ModoTeste, Notification, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, Rpa, ScrollArea, ScrollBar, Skeleton, Spin, Switch, TOAST_REMOVE_DELAY, Tag, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, accordionVariants, buttonVariants, colors, fonts, getPositionClass, initializeI18n, inputVariants, notificationVariants, reducer, tagVariants, toast, typographyVariants, useIsMobile, useNotificationToast, usePagination, useSidebar };
-export type { BgColor, BuildCellSelect, BuildColumns, BuildHeaderSelect, ButtonProps, CadastroFacilProps, CalloutNotificationProps, CheckboxProps, CheckedCell, CheckedCellChange, CheckedHeader, CheckedHeaderChange, Color, ColorToken, Column, ColumnRender, ColumnSort, ColumnTitle, CustomStyles$1 as CustomStyles, DataTableProps, ErrorEmptyDisplayProps, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, TagProps, TextColor, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UsePaginationItem };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, CadastroFacil, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorEmptyDisplay, Input, Layout, LogoLecom, LogoLecomBrand, ModoTeste, Notification, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, Rpa, ScrollArea, ScrollBar, Skeleton, Spin, Switch, TOAST_REMOVE_DELAY, Tag, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, Upload, accordionVariants, buttonVariants, colors, fonts, getPositionClass, initializeI18n, inputVariants, notificationVariants, reducer, tagVariants, toast, typographyVariants, useIsMobile, useNotificationToast, usePagination, useSidebar };
+export type { BgColor, BuildCellSelect, BuildColumns, BuildHeaderSelect, ButtonProps, CadastroFacilProps, CalloutNotificationProps, CheckboxProps, CheckedCell, CheckedCellChange, CheckedHeader, CheckedHeaderChange, Color, ColorToken, Column, ColumnRender, ColumnSort, ColumnTitle, CustomStyles$1 as CustomStyles, DataTableProps, ErrorEmptyDisplayProps, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, TagProps, TextColor, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UploadProps, UsePaginationItem };

package/dist/index.js

@@ -26,6 +26,7 @@ export { RadioGroup, RadioGroupItem } from './components/RadioGroup/RadioGroup.j
 export { ScrollArea, ScrollBar } from './components/ScrollArea/ScrollArea.js';
 export { Spin } from './components/Spin/Spin.js';
 export { useSidebar } from './components/Sidebar/Sidebar.js';
+export { Upload } from './components/Upload/Upload.js';
 export { useIsMobile } from './hooks/useIsMobile.js';
 export { usePagination } from './hooks/usePagination.js';
 export { Translations, initializeI18n } from './i18n/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lecom-ui",
-  "version": "4.5.3",
+  "version": "4.5.4",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",