@g4rcez/components 1.1.1 → 1.2.0

package/dist/src/components/core/heading.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from "react";
+export declare const Heading: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=heading.d.ts.map

package/dist/src/components/core/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../../src/components/core/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,OAAO,GAAI,OAAO,iBAAiB,4CAE/C,CAAC"}

package/dist/src/components/core/heading.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Polymorph } from "./polymorph";
+export const Heading = (props) => {
+    return _jsx(Polymorph, { as: "h2", children: props.children });
+};

package/dist/src/components/floating/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/menu.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAoB,WAAW,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAA2E,MAAM,OAAO,CAAC;AA6BhG,MAAM,MAAM,SAAS,GAAG,OAAO,CAC3B;IACI,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,KAAK,CAAC,WAAW,CAAC;CACxC,GAAG,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CACzE,CAAC;AAkKF,KAAK,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAE1F,eAAO,MAAM,QAAQ,oKAmCpB,CAAC;AAEF,eAAO,MAAM,IAAI;WAnNF,OAAO;WACP,OAAO;YACN,OAAO;aACN,OAAO;cACN,OAAO;kBACH,OAAO;cACX,KAAK,CAAC,SAAS;uBACN,MAAM;uBACN,KAAK,CAAC,WAAW;;WAC1B,MAAM;;WATT,OAAO;WACP,OAAO;YACN,OAAO;aACN,OAAO;cACN,OAAO;kBACH,OAAO;cACX,KAAK,CAAC,SAAS;uBACN,MAAM;uBACN,KAAK,CAAC,WAAW;;WACN,KAAK,CAAC,YAAY;WAAS,MAAM;qDAmNrE,CAAC"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/menu.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAoB,WAAW,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAA2E,MAAM,OAAO,CAAC;AA6BhG,MAAM,MAAM,SAAS,GAAG,OAAO,CAC3B;IACI,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,KAAK,CAAC,WAAW,CAAC;CACxC,GAAG,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CACzE,CAAC;AA0KF,KAAK,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAE1F,eAAO,MAAM,QAAQ,oKAmCpB,CAAC;AAEF,eAAO,MAAM,IAAI;WA3NF,OAAO;WACP,OAAO;YACN,OAAO;aACN,OAAO;cACN,OAAO;kBACH,OAAO;cACX,KAAK,CAAC,SAAS;uBACN,MAAM;uBACN,KAAK,CAAC,WAAW;;WAC1B,MAAM;;WATT,OAAO;WACP,OAAO;YACN,OAAO;aACN,OAAO;cACN,OAAO;kBACH,OAAO;cACX,KAAK,CAAC,SAAS;uBACN,MAAM;uBACN,KAAK,CAAC,WAAW;;WACN,KAAK,CAAC,YAAY;WAAS,MAAM;qDA2NrE,CAAC"}

package/dist/src/components/floating/menu.js

@@ -118,5 +118,5 @@ export const MenuItem = React.forwardRef(({ title, Right, disabled, children, ..
 });
 export const Menu = React.forwardRef((props, ref) => {
     const parentId = useFloatingParentNodeId();
-    return parentId !== null ? (_jsx(MenuComponent, { ...props, isParent: false, ref: ref })) : (_jsx(FloatingTree, { children: _jsx(MenuComponent, { ...props, isParent: true, ref: ref }) }));
+    return parentId === null ? (_jsx(FloatingTree, { children: _jsx(MenuComponent, { ...props, isParent: true, ref: ref }) })) : (_jsx(MenuComponent, { ...props, isParent: false, ref: ref }));
 });

package/dist/src/components/form/file-upload.d.ts

@@ -2,10 +2,10 @@ import React from "react";
 import { DropzoneProps } from "react-dropzone";
 import { Override } from "sidekicker";
 type Props = Override<React.ComponentProps<"input">, DropzoneProps> & {
-    onDeleteFile?: (file: File) => void;
     files?: File[];
     idle?: React.ReactElement;
     onDrop?: (file: File[]) => void;
+    onDeleteFile?: (file: File) => void;
 };
 export declare const FileUpload: ({ idle, onDeleteFile, onDrop, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/form/file-upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../../src/components/form/file-upload.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAe,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,GAAG;IAClE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CACnC,CAAC;AAmGF,eAAO,MAAM,UAAU,GAAI,0CAAwD,KAAK,4CAiBvF,CAAC"}
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../../src/components/form/file-upload.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmE,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,aAAa,EAAe,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAatC,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,GAAG;IAClE,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACvC,CAAC;AA6HF,eAAO,MAAM,UAAU,GAAI,0CAAwD,KAAK,4CA8BvF,CAAC"}

package/dist/src/components/form/file-upload.js

@@ -1,57 +1,90 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FileIcon, Trash2Icon, UploadIcon } from "lucide-react";
+import { AudioLinesIcon, FileIcon, FileJsonIcon, FileTextIcon, FileVideo2, FolderIcon, FolderOpenIcon, SheetIcon, XIcon, } from "lucide-react";
 import prettyBytes from "pretty-bytes";
-import { Fragment, useEffect, useState } from "react";
+import { createContext, Fragment, useContext, useEffect, useState } from "react";
 import { useDropzone } from "react-dropzone";
-import { Button } from "../core/button";
-const mime = {
-    isImage: (file) => file.type.includes("image"),
+import { useTranslations } from "../../hooks/use-translations";
+import { Modal } from "../floating/modal";
+const Context = createContext([null, () => { }]);
+const useFileManager = () => useContext(Context);
+const getMimeType = (file) => {
+    if (file.type.startsWith("image/"))
+        return "img";
+    if (file.type.startsWith("audio/"))
+        return "audio";
+    if (file.type.startsWith("video/"))
+        return "video";
+    return file.type;
 };
-const FileViewer = (props) => {
+const extensionMap = {
+    csv: SheetIcon,
+    xls: SheetIcon,
+    mov: FileVideo2,
+    mp4: FileVideo2,
+    xlsx: SheetIcon,
+    pdf: FileTextIcon,
+    txt: FileTextIcon,
+    json: FileJsonIcon,
+    mp3: AudioLinesIcon,
+};
+const ItemViewer = (props) => {
+    const [, setManager] = useFileManager();
     const [info, setInfo] = useState({ url: "", type: "", size: "" });
     useEffect(() => {
-        if (mime.isImage(props.file)) {
-            const url = URL.createObjectURL(props.file);
-            setInfo({ url, type: "img", size: prettyBytes(props.file.size) });
-            return () => {
-                URL.revokeObjectURL(url);
-            };
-        }
-        setInfo({ url: "", type: props.file.type, size: prettyBytes(props.file.size) });
+        const file = props.file;
+        const url = URL.createObjectURL(file);
+        setInfo({ url, type: getMimeType(file), size: prettyBytes(file.size) });
+        return () => URL.revokeObjectURL(url);
     }, [props.file]);
-    if (info.type === "img") {
-        return (_jsxs("div", { className: "gap-jade-200 flex w-full flex-row items-center justify-between", children: [_jsxs("header", { className: "gap-jade-200 flex flex-row items-center", children: [_jsx("img", { src: info.url, className: "size-jade-500 rounded-jade-xsmall", alt: `Miniatura do arquivo ${props.file.name}` }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: props.file.name }), _jsx("span", { children: info.size })] })] }), _jsx(Button, { className: "isolate", type: "button", theme: "raw", onClick: (e) => {
-                        e.stopPropagation();
-                        props.onDeleteFile?.(props.file);
-                    }, children: _jsx(Trash2Icon, {}) })] }));
-    }
-    return (_jsxs("div", { className: "gap-jade-200 flex w-full flex-row items-center justify-between", children: [_jsxs("header", { className: "flex flex-row items-center gap-4", children: [_jsx(FileIcon, { size: 48 }), _jsxs("div", { className: "flex flex-col items-start justify-start text-left", children: [_jsx("span", { children: props.file.name }), _jsx("span", { children: info.size })] })] }), _jsx(Button, { className: "isolate", type: "button", theme: "raw", onClick: (e) => {
-                    e.stopPropagation();
-                    props.onDeleteFile?.(props.file);
-                }, children: _jsx(Trash2Icon, { className: "text-danger" }) })] }));
+    const onViewFile = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setManager({ ...info, file: props.file });
+    };
+    const onDeleteFile = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        props.onDeleteFile?.(props.file);
+    };
+    const Icon = extensionMap[props.file.name.split(".").at(-1)] ?? FileIcon;
+    const Element = info.type === "img" ? (_jsx("img", { src: info.url, className: "block w-full", alt: props.file.name })) : (_jsx(Icon, { strokeWidth: 2, absoluteStrokeWidth: true, size: 48 }));
+    return (_jsxs("li", { className: "flex flex-row gap-4 justify-between items-center pb-6 w-full border-b border-card-border last:border-b-transparent", children: [_jsxs("header", { className: "flex flex-row gap-4 items-center", children: [_jsx("button", { type: "button", onClick: onViewFile, className: "flex justify-center items-center size-20", children: Element }), _jsxs("div", { className: "flex flex-col justify-start items-start text-left", children: [_jsx("span", { children: props.file.name }), _jsx("span", { className: "text-sm italic", children: info.size })] })] }), _jsx("button", { onClick: onDeleteFile, type: "button", className: "p-2 transition-colors duration-300 ease-linear hover:text-danger-hover", children: _jsx(XIcon, { size: 16 }) })] }));
 };
 const DefaultViewer = (props) => {
-    return (_jsx("ul", { className: "space-y-jade-200 w-full", children: props.files.map((file) => {
-            return _jsx(FileViewer, { onDeleteFile: props.onDeleteFile, file: file }, file.name);
+    return (_jsx("ul", { className: "space-y-8 w-full", children: props.files.map((file) => {
+            return _jsx(ItemViewer, { onDeleteFile: props.onDeleteFile, file: file }, file.name);
         }) }));
 };
+const Idle = (props) => {
+    const t = useTranslations();
+    const Icon = props.dragging ? FolderOpenIcon : FolderIcon;
+    return (_jsxs("div", { className: "flex flex-col justify-center items-center", children: [_jsx("div", { className: "flex flex-col gap-2 justify-center items-center", children: _jsx(Icon, { className: "text-primary", size: 80 }) }), _jsxs("div", { className: "flex flex-col gap-1 items-center my-4", children: [_jsx("p", { children: t.uploadIdle }), _jsx("button", { className: "underline text-primary", type: "button", children: t.uploadIdleButton })] })] }));
+};
 const InteractiveArea = (props) => {
-    if (props.isDragActive) {
-        return _jsx("p", { children: "Solte os arquivos selecionados" });
-    }
+    if (props.isDragActive)
+        return _jsx(Idle, { files: props.files, dragging: true });
     if (props.files.length > 0) {
         return _jsx(DefaultViewer, { onDeleteFile: props.onDeleteFile, files: props.files });
     }
     return _jsx(Fragment, { children: props.idle });
 };
-const DefaultIdle = (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4", children: [_jsx(UploadIcon, { size: 64 }), _jsxs("p", { children: ["You can drag your files or", " ", _jsx("button", { className: "text-primary underline", type: "button", children: "drag to here" })] })] }));
+const DefaultIdle = _jsx(Idle, { dragging: false });
+const FileViewer = (props) => {
+    const file = props.item.file;
+    const type = props.item.type;
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("p", { className: "text-lg font-medium", children: props.item.file.name }), _jsx("p", { className: "text-base", children: props.item.size }), type === "img" ? (_jsx("img", { className: "container block w-80", src: props.item.url, alt: file.name })) : type === "video" ? (_jsx("video", { className: "container block w-80", src: props.item.url, controls: true, muted: true })) : type === "audio" ? _jsx("figure", { children: _jsx("audio", { controls: true, src: props.item.url }) }) : null] }));
+};
 export const FileUpload = ({ idle = DefaultIdle, onDeleteFile, onDrop, ...props }) => {
+    const t = useTranslations();
+    const state = useState(null);
     const [files, setFiles] = useState([]);
+    const items = props.files ?? files;
+    const close = () => state[1](null);
     const drop = (x) => {
         onDrop?.(x);
-        setFiles(x);
+        setFiles((prev) => prev.concat(x));
     };
     const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: drop });
-    return (_jsxs("div", { ...getRootProps(), "data-active": props.files?.length ? props.files.length > 0 : false, className: "flex flex-col items-center justify-center rounded-lg border-2 border-card-border p-6 text-foreground data-[active=true]:border-solid data-[active=false]:border-dashed data-[active=true]:bg-card-background", children: [_jsx("input", { ...getInputProps(props), name: props.name, id: props.name }), _jsx(InteractiveArea, { onDeleteFile: onDeleteFile, isDragActive: isDragActive, idle: idle, files: props.files ?? files })] }));
+    return (_jsxs(Context.Provider, { value: state, children: [_jsx(Modal, { overlayClickClose: true, title: t.uploadDialogTitle, ariaTitle: t.uploadDialogTitle, open: state[0] !== null, onChange: close, children: state[0] ? _jsx(FileViewer, { item: state[0] }) : null }), _jsxs("div", { ...getRootProps(), "data-active": items ? items.length > 0 : false, className: "flex flex-col border items-center justify-center rounded-lg border-card-border p-6 text-foreground data-[active=true]:border-solid data-[active=false]:border-dashed data-[active=true]:bg-card-background data-[active=true]:border-transparent", children: [_jsx("input", { ...getInputProps(props), name: props.name, id: props.name }), _jsx(InteractiveArea, { onDeleteFile: onDeleteFile, isDragActive: isDragActive, idle: idle, files: items })] })] }));
 };

package/dist/src/config/default-translations.d.ts

@@ -56,6 +56,12 @@ export declare const defaultTranslations: {
     tableSortOrderInputTitle: string;
     tableSortTypeInputPlaceholder: string;
     tableSortTypeInputTitle: string;
+    uploadIdle: string;
+    uploadIdleButton: string;
+    uploadDragging: (props: {
+        n: number;
+    }) => string;
+    uploadDialogTitle: string;
 };
 export type Translations = typeof defaultTranslations;
 //# sourceMappingURL=default-translations.d.ts.map

package/dist/src/config/default-translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default-translations.d.ts","sourceRoot":"","sources":["../../../src/config/default-translations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAsCQ;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;;;;;;;;CAkBxI,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,mBAAmB,CAAC"}
+{"version":3,"file":"default-translations.d.ts","sourceRoot":"","sources":["../../../src/config/default-translations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAsCQ;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;;;;;;;;;;4BAqB7G;QAAE,CAAC,EAAE,MAAM,CAAA;KAAE;;CAExC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,mBAAmB,CAAC"}

package/dist/src/config/default-translations.js

@@ -51,4 +51,8 @@ export const defaultTranslations = {
     tableSortOrderInputTitle: "Order by",
     tableSortTypeInputPlaceholder: "Ascending",
     tableSortTypeInputTitle: "Sort type",
+    uploadIdle: "You can drag your files here",
+    uploadIdleButton: "Choose your files",
+    uploadDragging: (props) => `Dragging ${props.n} ${props.n > 0 ? "files" : "file"}`,
+    uploadDialogTitle: "Details of your file",
 };

package/dist/src/hooks/use-translations.d.ts

@@ -55,5 +55,11 @@ export declare const useTranslations: () => {
     tableSortOrderInputTitle: string;
     tableSortTypeInputPlaceholder: string;
     tableSortTypeInputTitle: string;
+    uploadIdle: string;
+    uploadIdleButton: string;
+    uploadDragging: (props: {
+        n: number;
+    }) => string;
+    uploadDialogTitle: string;
 };
 //# sourceMappingURL=use-translations.d.ts.map

package/dist/src/hooks/use-translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-translations.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAKs0C,CAAC;;;;;;;;;;;;;;;;CADl2C,CAAC"}
+{"version":3,"file":"use-translations.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAKs0C,CAAC;;;;;;;;;;;;;;;;;;;;;;CADl2C,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g4rcez/components",
   "description": "Customizable react components.",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "sideEffects": false,
   "private": false,
   "packageManager": "pnpm@10.7.0",