@arkyn/components 3.0.1-beta.22 → 3.0.1-beta.23

package/dist/components/audioUpload/index.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useForm } from "../../hooks/useForm";
+import { FieldError } from "../fieldError";
+import { FieldLabel } from "../fieldLabel";
+import { FieldWrapper } from "../fieldWrapper";
+import { HasFileContent } from "./hasFileContent";
+import { NoFileContent } from "./noFileContent";
+import "./styles.css";
+/**
+ * AudioUpload component - handles audio file upload with drag & drop functionality and server upload
+ *
+ * @param props - AudioUpload component properties
+ * @param props.name - Required field name for form handling
+ * @param props.action - Required server endpoint URL for file upload
+ * @param props.fileName - Name of the file field in FormData. Default: "file"
+ * @param props.method - HTTP method for upload request. Default: "POST"
+ * @param props.acceptAudio - Audio file types to accept. Default: "audio/*"
+ * @param props.dropAudioText - Text displayed in drop zone. Default: "Ou arraste e solte um arquivo de áudio aqui"
+ * @param props.selectAudioButtonText - Text for file selection button. Default: "Selecionar arquivo de áudio"
+ * @param props.changeAudioButtonText - Text for change file button. Default: "Trocar arquivo de áudio"
+ * @param props.onChange - Callback function called after successful upload with the file URL
+ * @param props.fileResponseName - Name of the URL field in server response. Default: "url"
+ * @param props.label - Optional label text to display above the upload area
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields. Default: false
+ * @param props.disabled - Whether the upload is disabled. Default: false
+ * @param props.defaultValue - Default audio URL value
+ *
+ * @returns AudioUpload JSX element with drag & drop zone or audio preview
+ *
+ * @example
+ * ```tsx
+ * // Basic audio upload
+ * <AudioUpload
+ *   name="audio"
+ *   action="/api/upload"
+ * />
+ *
+ * // Audio upload with label and custom texts
+ * <AudioUpload
+ *   name="podcast"
+ *   action="/api/upload/podcast"
+ *   label="Upload Podcast"
+ *   showAsterisk
+ *   selectAudioButtonText="Choose Audio File"
+ *   dropAudioText="Drop your audio file here"
+ *   changeAudioButtonText="Change Audio"
+ * />
+ *
+ * // Audio upload with callback and custom settings
+ * <AudioUpload
+ *   name="recording"
+ *   action="/api/upload"
+ *   label="Voice Recording"
+ *   acceptAudio="audio/mp3,audio/wav"
+ *   onChange={(url) => console.log('Uploaded:', url)}
+ *   fileResponseName="audioUrl"
+ *   fileName="recording"
+ *   method="PUT"
+ * />
+ *
+ * // Disabled audio upload with default value
+ * <AudioUpload
+ *   name="preview"
+ *   action="/api/upload"
+ *   disabled
+ *   defaultValue="/path/to/audio.mp3"
+ *   label="Audio Preview"
+ * />
+ * ```
+ */
+function AudioUpload(props) {
+    const { name, label, fileName = "file", method = "POST", onChange, fileResponseName = "url", selectAudioButtonText = "Selecionar arquivo de áudio", dropAudioText = "Ou arraste e solte um arquivo de áudio aqui", changeAudioButtonText = "Trocar arquivo de áudio", acceptAudio = "audio/*", action, defaultValue = "", showAsterisk = false, disabled = false, } = props;
+    const { fieldErrors } = useForm();
+    const fieldError = fieldErrors?.[name];
+    const [value, setValue] = useState(defaultValue);
+    const [error, setError] = useState("");
+    const [file, setFile] = useState(null);
+    const [filePath, setFilePath] = useState(defaultValue);
+    const [isLoading, setIsLoading] = useState(false);
+    async function handleUploadAudio(file) {
+        if (disabled)
+            return;
+        setIsLoading(true);
+        setFile(file);
+        setError("");
+        const formData = new FormData();
+        formData.append(fileName, file);
+        await fetch(action, { method: method, body: formData })
+            .then(async (response) => await response.json())
+            .then((response) => {
+            if (!!response?.error)
+                setError(response.error);
+            else
+                setValue(response?.[fileResponseName]);
+            onChange && onChange(response?.[fileResponseName]);
+        })
+            .catch((error) => {
+            console.error(error);
+            setError("Erro ao enviar audio");
+        })
+            .finally(() => setIsLoading(false));
+    }
+    function handleSelectFile(file) {
+        if (disabled)
+            return;
+        if (file.type.indexOf("audio") === -1) {
+            setError("O arquivo selecionado não é um arquivo de áudio");
+            return;
+        }
+        setFilePath(URL.createObjectURL(file));
+        handleUploadAudio(file);
+    }
+    const errorMessage = fieldError || error;
+    const hasErrorClassName = errorMessage ? "hasError" : "noHasError";
+    const hasImageClassName = filePath ? "hasAudio" : "noHasAudio";
+    const className = `arkynAudioUpload ${hasErrorClassName} ${hasImageClassName}`;
+    return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs("div", { className: className, children: [_jsx("input", { type: "hidden", name: name, value: value || "" }), !filePath && (_jsx(NoFileContent, { disabled: disabled, isLoading: isLoading, acceptAudio: acceptAudio, dropAudioText: dropAudioText, handleSelectFile: handleSelectFile, selectAudioButtonText: selectAudioButtonText })), filePath && (_jsx(HasFileContent, { filePath: filePath, acceptAudio: acceptAudio, changeAudioButtonText: changeAudioButtonText, disabled: disabled, handleSelectFile: handleSelectFile, isLoading: isLoading, reSendAudio: !!errorMessage && file ? () => handleUploadAudio(file) : undefined }))] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+}
+export { AudioUpload };

package/dist/components/audioUpload/noFileContent/index.d.ts

@@ -0,0 +1,12 @@
+import "./styles.css";
+type NoFileContentProps = {
+    disabled: boolean;
+    acceptAudio: string;
+    isLoading: boolean;
+    selectAudioButtonText: string;
+    dropAudioText: string;
+    handleSelectFile: (file: File) => void;
+};
+declare function NoFileContent(props: NoFileContentProps): import("react/jsx-runtime").JSX.Element;
+export { NoFileContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/audioUpload/noFileContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/audioUpload/noFileContent/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAkD/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/audioUpload/noFileContent/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../button";
+import "./styles.css";
+function NoFileContent(props) {
+    const { dropAudioText, isLoading, acceptAudio, handleSelectFile, selectAudioButtonText, disabled, } = props;
+    function handleDrop(event) {
+        if (disabled)
+            return;
+        event.preventDefault();
+        const file = event.dataTransfer.files[0];
+        if (file)
+            handleSelectFile(file);
+    }
+    function handleClick() {
+        if (disabled)
+            return;
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = acceptAudio;
+        input.onchange = (event) => {
+            const file = event.target.files?.[0];
+            if (file)
+                handleSelectFile(file);
+        };
+        input.click();
+    }
+    return (_jsxs("div", { onDrop: handleDrop, className: "arkynAudioUploadNoFileContent", children: [_jsx(Button, { isLoading: isLoading, onClick: handleClick, variant: "ghost", size: "sm", type: "button", disabled: disabled, children: selectAudioButtonText }), _jsx("p", { children: dropAudioText })] }));
+}
+export { NoFileContent };

package/dist/components/clientOnly.d.ts

@@ -0,0 +1,86 @@
+type ClientOnlyProps = {
+    children(): React.ReactNode;
+    fallback?: React.ReactNode;
+};
+/**
+ * ClientOnly component - renders children only after hydration on the client side
+ *
+ * This component prevents hydration mismatches by rendering different content during SSR
+ * and after client-side hydration. It's useful for components that rely on browser APIs
+ * or need to render differently on server and client.
+ *
+ * @param props - ClientOnly component properties
+ * @param props.children - Function that returns React nodes to render after hydration
+ * @param props.fallback - Optional React node to render during SSR or before hydration
+ *
+ * @returns React fragment containing either fallback content or children based on hydration state
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with loading fallback
+ * <ClientOnly fallback={<div>Loading...</div>}>
+ *   {() => <InteractiveWidget />}
+ * </ClientOnly>
+ *
+ * // Client-only component without fallback
+ * <ClientOnly>
+ *   {() => (
+ *     <div>
+ *       <p>This content only appears on the client</p>
+ *       <p>Current time: {new Date().toLocaleString()}</p>
+ *     </div>
+ *   )}
+ * </ClientOnly>
+ *
+ * // Using with browser APIs
+ * <ClientOnly fallback={<div>Preparing location services...</div>}>
+ *   {() => <GeolocationComponent />}
+ * </ClientOnly>
+ *
+ * // Complex interactive component
+ * <ClientOnly fallback={<StaticPlaceholder />}>
+ *   {() => (
+ *     <div>
+ *       <Chart data={chartData} />
+ *       <InteractiveControls />
+ *       <RealtimeUpdates />
+ *     </div>
+ *   )}
+ * </ClientOnly>
+ *
+ * // Conditional rendering based on client capabilities
+ * <ClientOnly fallback={<BasicTable data={data} />}>
+ *   {() => (
+ *     <AdvancedDataGrid
+ *       data={data}
+ *       features={['sorting', 'filtering', 'virtualization']}
+ *     />
+ *   )}
+ * </ClientOnly>
+ *
+ * // Using with dynamic imports
+ * <ClientOnly fallback={<div>Loading editor...</div>}>
+ *   {() => <LazyCodeEditor />}
+ * </ClientOnly>
+ *
+ * // Preventing layout shift
+ * <ClientOnly fallback={<div className="skeleton-loader" />}>
+ *   {() => <UserDashboard />}
+ * </ClientOnly>
+ *
+ * // Multiple client-only sections
+ * <div>
+ *   <Header />
+ *   <ClientOnly fallback={<div>Loading navigation...</div>}>
+ *     {() => <InteractiveNavigation />}
+ *   </ClientOnly>
+ *   <MainContent />
+ *   <ClientOnly>
+ *     {() => <ChatWidget />}
+ *   </ClientOnly>
+ * </div>
+ * ```
+ */
+declare function ClientOnly(props: ClientOnlyProps): import("react/jsx-runtime").JSX.Element;
+export { ClientOnly };
+//# sourceMappingURL=clientOnly.d.ts.map

package/dist/components/clientOnly.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clientOnly.d.ts","sourceRoot":"","sources":["../../src/components/clientOnly.tsx"],"names":[],"mappings":"AAEA,KAAK,eAAe,GAAG;IACrB,QAAQ,IAAI,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAGzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/clientOnly.js

@@ -0,0 +1,86 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useHydrated } from "../hooks/useHydrated";
+/**
+ * ClientOnly component - renders children only after hydration on the client side
+ *
+ * This component prevents hydration mismatches by rendering different content during SSR
+ * and after client-side hydration. It's useful for components that rely on browser APIs
+ * or need to render differently on server and client.
+ *
+ * @param props - ClientOnly component properties
+ * @param props.children - Function that returns React nodes to render after hydration
+ * @param props.fallback - Optional React node to render during SSR or before hydration
+ *
+ * @returns React fragment containing either fallback content or children based on hydration state
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with loading fallback
+ * <ClientOnly fallback={<div>Loading...</div>}>
+ *   {() => <InteractiveWidget />}
+ * </ClientOnly>
+ *
+ * // Client-only component without fallback
+ * <ClientOnly>
+ *   {() => (
+ *     <div>
+ *       <p>This content only appears on the client</p>
+ *       <p>Current time: {new Date().toLocaleString()}</p>
+ *     </div>
+ *   )}
+ * </ClientOnly>
+ *
+ * // Using with browser APIs
+ * <ClientOnly fallback={<div>Preparing location services...</div>}>
+ *   {() => <GeolocationComponent />}
+ * </ClientOnly>
+ *
+ * // Complex interactive component
+ * <ClientOnly fallback={<StaticPlaceholder />}>
+ *   {() => (
+ *     <div>
+ *       <Chart data={chartData} />
+ *       <InteractiveControls />
+ *       <RealtimeUpdates />
+ *     </div>
+ *   )}
+ * </ClientOnly>
+ *
+ * // Conditional rendering based on client capabilities
+ * <ClientOnly fallback={<BasicTable data={data} />}>
+ *   {() => (
+ *     <AdvancedDataGrid
+ *       data={data}
+ *       features={['sorting', 'filtering', 'virtualization']}
+ *     />
+ *   )}
+ * </ClientOnly>
+ *
+ * // Using with dynamic imports
+ * <ClientOnly fallback={<div>Loading editor...</div>}>
+ *   {() => <LazyCodeEditor />}
+ * </ClientOnly>
+ *
+ * // Preventing layout shift
+ * <ClientOnly fallback={<div className="skeleton-loader" />}>
+ *   {() => <UserDashboard />}
+ * </ClientOnly>
+ *
+ * // Multiple client-only sections
+ * <div>
+ *   <Header />
+ *   <ClientOnly fallback={<div>Loading navigation...</div>}>
+ *     {() => <InteractiveNavigation />}
+ *   </ClientOnly>
+ *   <MainContent />
+ *   <ClientOnly>
+ *     {() => <ChatWidget />}
+ *   </ClientOnly>
+ * </div>
+ * ```
+ */
+function ClientOnly(props) {
+    const { children, fallback = null } = props;
+    return useHydrated() ? _jsx(_Fragment, { children: children() }) : _jsx(_Fragment, { children: fallback });
+}
+export { ClientOnly };

package/dist/components/fileUpload/hasFileContent/index.d.ts

@@ -0,0 +1,13 @@
+import "./styles.css";
+type HasFileContentProps = {
+    disabled: boolean;
+    acceptFile: string;
+    isLoading: boolean;
+    changeFileButtonText: string;
+    file: File;
+    reSendFile?: () => void;
+    handleSelectFile: (file: File) => void;
+};
+declare function HasFileContent(props: HasFileContentProps): import("react/jsx-runtime").JSX.Element;
+export { HasFileContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/fileUpload/hasFileContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/fileUpload/hasFileContent/index.tsx"],"names":[],"mappings":"AAaA,OAAO,cAAc,CAAC;AAEtB,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAyEjD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/fileUpload/hasFileContent/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { File, FileArchive, FileAudio, FileImage, RefreshCw, } from "lucide-react";
+import { Button } from "../../button";
+import { Divider } from "../../divider";
+import { IconButton } from "../../iconButton";
+import { Tooltip } from "../../tooltip";
+import "./styles.css";
+function HasFileContent(props) {
+    const { disabled, file, isLoading, acceptFile, changeFileButtonText, handleSelectFile, reSendFile, } = props;
+    function handleClick() {
+        if (disabled)
+            return;
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = acceptFile;
+        input.onchange = (event) => {
+            const file = event.target.files?.[0];
+            if (file)
+                handleSelectFile(file);
+        };
+        input.click();
+    }
+    function FileIcon() {
+        if (file.type.startsWith("image/"))
+            return _jsx(FileImage, {});
+        if (file.type.startsWith("audio/"))
+            return _jsx(FileAudio, {});
+        if (file.type.startsWith("application/zip"))
+            return _jsx(FileArchive, {});
+        return _jsx(File, {});
+    }
+    return (_jsxs("div", { className: "arkynFileUploadHasFileContent", children: [_jsxs("section", { className: "arkynFileUploadFileContainer", children: [_jsx(FileIcon, {}), _jsx("p", { children: file.name })] }), _jsx(Divider, {}), _jsxs("div", { className: "arkynFileUploadButtonsContainer", children: [!!reSendFile && (_jsx(Tooltip, { orientation: "bottom", text: "Reenviar arquivo", children: _jsx(IconButton, { type: "button", "aria-label": "resend file", variant: "outline", scheme: "danger", size: "sm", isLoading: isLoading, onClick: reSendFile, icon: RefreshCw, disabled: disabled }) })), _jsx(Button, { isLoading: isLoading, onClick: handleClick, variant: "outline", size: "sm", type: "button", disabled: disabled, children: changeFileButtonText })] })] }));
+}
+export { HasFileContent };

package/dist/components/fileUpload/index.d.ts

@@ -0,0 +1,94 @@
+import "./styles.css";
+type FileUploadProps = {
+    name: string;
+    action: string;
+    disabled?: boolean;
+    label?: string;
+    showAsterisk?: boolean;
+    changeFileButtonText?: string;
+    selectFileButtonText?: string;
+    dropFileText?: string;
+    method?: string;
+    fileName?: string;
+    fileResponseName?: string;
+    acceptFile?: string;
+    onChange?: (url?: string) => void;
+};
+/**
+ * FileUpload component - used for uploading files with drag and drop functionality
+ *
+ * @param props - FileUpload component properties
+ * @param props.name - Required field name for form handling
+ * @param props.action - Required endpoint URL where the file will be uploaded
+ * @param props.disabled - Whether the file upload is disabled. Default: false
+ * @param props.label - Optional label text to display above the file upload area
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields. Default: false
+ * @param props.changeFileButtonText - Text for the button to change/replace an uploaded file. Default: "Alterar arquivo"
+ * @param props.selectFileButtonText - Text for the button to select a file. Default: "Selecionar arquivo"
+ * @param props.dropFileText - Text displayed in the drop zone area. Default: "Ou arraste e solte o arquivo aqui"
+ * @param props.method - HTTP method for the upload request. Default: "POST"
+ * @param props.fileName - Form data field name for the file. Default: "file"
+ * @param props.fileResponseName - Property name in the response object containing the file URL. Default: "url"
+ * @param props.acceptFile - File types accepted by the input (e.g., "image/*", ".pdf"). Default: "*"
+ * @param props.onChange - Callback function called when file upload completes successfully, receives the file URL
+ *
+ * @returns FileUpload JSX element wrapped in FieldGroup with optional label and error handling
+ *
+ * @example
+ * ```tsx
+ * // Basic file upload
+ * <FileUpload
+ *   name="document"
+ *   action="/api/upload"
+ * />
+ *
+ * // File upload with label and custom text
+ * <FileUpload
+ *   name="avatar"
+ *   action="/api/upload/avatar"
+ *   label="Profile Picture"
+ *   showAsterisk
+ *   selectFileButtonText="Choose Image"
+ *   changeFileButtonText="Change Image"
+ *   dropFileText="Drop your image here"
+ * />
+ *
+ * // File upload with restrictions and callback
+ * <FileUpload
+ *   name="pdf"
+ *   action="/api/upload/document"
+ *   label="Upload PDF Document"
+ *   acceptFile=".pdf"
+ *   fileName="document"
+ *   fileResponseName="documentUrl"
+ *   onChange={(url) => console.log('File uploaded:', url)}
+ * />
+ *
+ * // Disabled file upload
+ * <FileUpload
+ *   name="attachment"
+ *   action="/api/upload"
+ *   label="Attachment"
+ *   disabled
+ * />
+ *
+ * // File upload with custom HTTP method and response handling
+ * <FileUpload
+ *   name="file"
+ *   action="/api/files"
+ *   method="PUT"
+ *   fileName="uploadedFile"
+ *   fileResponseName="fileUrl"
+ *   label="Custom Upload"
+ *   onChange={(url) => {
+ *     if (url) {
+ *       setFileUrl(url);
+ *       console.log('Upload successful:', url);
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+declare function FileUpload(props: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+export { FileUpload };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/fileUpload/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/fileUpload/index.tsx"],"names":[],"mappings":"AASA,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IAEf,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAgGzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/fileUpload/index.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useForm } from "../../hooks/useForm";
+import { FieldError } from "../fieldError";
+import { FieldLabel } from "../fieldLabel";
+import { FieldWrapper } from "../fieldWrapper";
+import { HasFileContent } from "./hasFileContent";
+import { NoFileContent } from "./noFileContent";
+import "./styles.css";
+/**
+ * FileUpload component - used for uploading files with drag and drop functionality
+ *
+ * @param props - FileUpload component properties
+ * @param props.name - Required field name for form handling
+ * @param props.action - Required endpoint URL where the file will be uploaded
+ * @param props.disabled - Whether the file upload is disabled. Default: false
+ * @param props.label - Optional label text to display above the file upload area
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields. Default: false
+ * @param props.changeFileButtonText - Text for the button to change/replace an uploaded file. Default: "Alterar arquivo"
+ * @param props.selectFileButtonText - Text for the button to select a file. Default: "Selecionar arquivo"
+ * @param props.dropFileText - Text displayed in the drop zone area. Default: "Ou arraste e solte o arquivo aqui"
+ * @param props.method - HTTP method for the upload request. Default: "POST"
+ * @param props.fileName - Form data field name for the file. Default: "file"
+ * @param props.fileResponseName - Property name in the response object containing the file URL. Default: "url"
+ * @param props.acceptFile - File types accepted by the input (e.g., "image/*", ".pdf"). Default: "*"
+ * @param props.onChange - Callback function called when file upload completes successfully, receives the file URL
+ *
+ * @returns FileUpload JSX element wrapped in FieldGroup with optional label and error handling
+ *
+ * @example
+ * ```tsx
+ * // Basic file upload
+ * <FileUpload
+ *   name="document"
+ *   action="/api/upload"
+ * />
+ *
+ * // File upload with label and custom text
+ * <FileUpload
+ *   name="avatar"
+ *   action="/api/upload/avatar"
+ *   label="Profile Picture"
+ *   showAsterisk
+ *   selectFileButtonText="Choose Image"
+ *   changeFileButtonText="Change Image"
+ *   dropFileText="Drop your image here"
+ * />
+ *
+ * // File upload with restrictions and callback
+ * <FileUpload
+ *   name="pdf"
+ *   action="/api/upload/document"
+ *   label="Upload PDF Document"
+ *   acceptFile=".pdf"
+ *   fileName="document"
+ *   fileResponseName="documentUrl"
+ *   onChange={(url) => console.log('File uploaded:', url)}
+ * />
+ *
+ * // Disabled file upload
+ * <FileUpload
+ *   name="attachment"
+ *   action="/api/upload"
+ *   label="Attachment"
+ *   disabled
+ * />
+ *
+ * // File upload with custom HTTP method and response handling
+ * <FileUpload
+ *   name="file"
+ *   action="/api/files"
+ *   method="PUT"
+ *   fileName="uploadedFile"
+ *   fileResponseName="fileUrl"
+ *   label="Custom Upload"
+ *   onChange={(url) => {
+ *     if (url) {
+ *       setFileUrl(url);
+ *       console.log('Upload successful:', url);
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+function FileUpload(props) {
+    const { name, label, showAsterisk = false, action, fileName = "file", method = "POST", acceptFile = "*", fileResponseName = "url", changeFileButtonText = "Alterar arquivo", selectFileButtonText = "Selecionar arquivo", dropFileText = "Ou arraste e solte o arquivo aqui", onChange, disabled = false, } = props;
+    const { fieldErrors } = useForm();
+    const fieldError = fieldErrors?.[name];
+    const [value, setValue] = useState("");
+    const [error, setError] = useState("");
+    const [file, setFile] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    async function handleUploadFile(file) {
+        if (disabled)
+            return;
+        setIsLoading(true);
+        setFile(file);
+        setError("");
+        const formData = new FormData();
+        formData.append(fileName, file);
+        await fetch(action, { method: method, body: formData })
+            .then(async (response) => await response.json())
+            .then((response) => {
+            if (!!response?.error)
+                setError(response.error);
+            else
+                setValue(response?.[fileResponseName]);
+            onChange && onChange(response?.[fileResponseName]);
+        })
+            .catch((error) => {
+            console.error(error);
+            setError("Erro ao enviar o arquivo");
+        })
+            .finally(() => setIsLoading(false));
+    }
+    function handleSelectFile(file) {
+        if (disabled)
+            return;
+        handleUploadFile(file);
+    }
+    const errorMessage = fieldError || error;
+    const hasErrorClassName = errorMessage ? "hasError" : "noHasError";
+    const hasFileClassName = file ? "hasFile" : "noHasFile";
+    const className = `arkynFileUpload ${hasErrorClassName} ${hasFileClassName}`;
+    return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs("div", { className: className, children: [_jsx("input", { type: "hidden", name: name, value: value || "" }), !file && (_jsx(NoFileContent, { disabled: disabled, isLoading: isLoading, acceptFile: acceptFile, dropFileText: dropFileText, handleSelectFile: handleSelectFile, selectFileButtonText: selectFileButtonText })), file && (_jsx(HasFileContent, { disabled: disabled, isLoading: isLoading, acceptFile: acceptFile, file: file, handleSelectFile: handleSelectFile, changeFileButtonText: changeFileButtonText, reSendFile: !!errorMessage && file ? () => handleUploadFile(file) : undefined }))] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+}
+export { FileUpload };

package/dist/components/fileUpload/noFileContent/index.d.ts

@@ -0,0 +1,12 @@
+import "./styles.css";
+type NoFileContentProps = {
+    disabled: boolean;
+    acceptFile: string;
+    isLoading: boolean;
+    selectFileButtonText: string;
+    dropFileText: string;
+    handleSelectFile: (file: File) => void;
+};
+declare function NoFileContent(props: NoFileContentProps): import("react/jsx-runtime").JSX.Element;
+export { NoFileContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/fileUpload/noFileContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/fileUpload/noFileContent/index.tsx"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAkD/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}