@arkyn/components 2.0.1-beta.0 → 2.0.1-beta.1

package/dist/components/GoogleSearchPlaces/index.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StandaloneSearchBox } from "@react-google-maps/api";
+import { useState } from "react";
+import { Input } from "../Input";
+function GoogleSearchPlaces({ onChange, onPlaceChanged, options, ...rest }) {
+    const [searchBox, setSearchBox] = useState(null);
+    const handleLoad = (ref) => setSearchBox(ref);
+    const handlePlacesChanged = () => {
+        const places = searchBox.getPlaces();
+        const place = places[0];
+        const address_components = place?.address_components;
+        function findData(key) {
+            const data = address_components.find((item) => item.types[0] === key);
+            if (data)
+                return data.long_name;
+            return "";
+        }
+        function findDataShort(key) {
+            const data = address_components.find((item) => item.types[0] === key);
+            if (data)
+                return data.short_name;
+            return "";
+        }
+        if (place) {
+            const street = findData("route");
+            const streetNumber = findData("street_number");
+            const district = findData("sublocality_level_1");
+            const city = findData("administrative_area_level_2");
+            const state = findData("administrative_area_level_1");
+            const stateShortName = findDataShort("administrative_area_level_1");
+            const cep = findData("postal_code");
+            const lat = place.geometry?.location?.lat();
+            const lng = place.geometry?.location?.lng();
+            const sendPlace = {
+                street,
+                city,
+                state,
+                district,
+                cep,
+                streetNumber,
+                stateShortName,
+                coordinates: { lat, lng },
+            };
+            onPlaceChanged && onPlaceChanged(sendPlace);
+        }
+    };
+    return (_jsx(StandaloneSearchBox, { onLoad: handleLoad, onPlacesChanged: handlePlacesChanged, options: options, children: _jsx(Input, { type: "text", onChange: (e) => onChange(e.target.value), ...rest }) }));
+}
+export { GoogleSearchPlaces };

package/dist/components/GoogleTagManager/GoogleTagManager.client.d.ts

@@ -0,0 +1,11 @@
+type GoogleTagManagerClientProps = {
+    gtmId: string;
+    events: Record<string, string>;
+    dataLayer: Record<string, string>;
+    dataLayerName: string;
+    auth: string;
+    preview: string;
+};
+declare function GoogleTagManagerClient(props: GoogleTagManagerClientProps): import("react/jsx-runtime").JSX.Element;
+export { GoogleTagManagerClient };
+//# sourceMappingURL=GoogleTagManager.client.d.ts.map

package/dist/components/GoogleTagManager/GoogleTagManager.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GoogleTagManager.client.d.ts","sourceRoot":"","sources":["../../../src/components/GoogleTagManager/GoogleTagManager.client.tsx"],"names":[],"mappings":"AAEA,KAAK,2BAA2B,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,iBAAS,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAKjE;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/components/GoogleTagManager/GoogleTagManager.client.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { GoogleTagManager } from "./googleTagManager";
+function GoogleTagManagerClient(props) {
+    const googleTagManager = new GoogleTagManager();
+    googleTagManager.initialize(props);
+    return _jsx(_Fragment, {});
+}
+export { GoogleTagManagerClient };

package/dist/components/GoogleTagManager/googleTagManager.d.ts

@@ -0,0 +1,20 @@
+type InitializeDataLayerProps = {
+    dataLayerName: string;
+    dataLayer: Record<string, string>;
+};
+type InitializeProps = {
+    gtmId: string;
+    events: Record<string, string>;
+    dataLayer: Record<string, string>;
+    dataLayerName: string;
+    auth: string;
+    preview: string;
+};
+declare class GoogleTagManager {
+    private initializeDataScript;
+    private initializeGTMElements;
+    initializeDataLayer(props: InitializeDataLayerProps): any;
+    initialize(props: InitializeProps): void;
+}
+export { GoogleTagManager };
+//# sourceMappingURL=googleTagManager.d.ts.map

package/dist/components/GoogleTagManager/googleTagManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"googleTagManager.d.ts","sourceRoot":"","sources":["../../../src/components/GoogleTagManager/googleTagManager.ts"],"names":[],"mappings":"AAGA,KAAK,wBAAwB,GAAG;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC,CAAC;AAWF,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAQF,cAAM,gBAAgB;IACpB,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,qBAAqB;IAwB7B,mBAAmB,CAAC,KAAK,EAAE,wBAAwB;IAWnD,UAAU,CAAC,KAAK,EAAE,eAAe;CAuBlC;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/GoogleTagManager/googleTagManager.js

@@ -0,0 +1,52 @@
+import { appendToDataLayer } from "./snippets/appendToDataLayer";
+import { generateGTMElements } from "./snippets/generateGTMElements";
+class GoogleTagManager {
+    initializeDataScript(dataLayer) {
+        const script = document.createElement("script");
+        script.innerHTML = dataLayer;
+        return script;
+    }
+    initializeGTMElements(props) {
+        const snippets = generateGTMElements(props);
+        const noScript = () => {
+            const noscript = document.createElement("noscript");
+            noscript.innerHTML = snippets.iframe;
+            return noscript;
+        };
+        const script = () => {
+            const script = document.createElement("script");
+            script.innerHTML = snippets.script;
+            return script;
+        };
+        const dataScript = this.initializeDataScript(snippets.dataLayerVar);
+        return {
+            noScript,
+            script,
+            dataScript,
+        };
+    }
+    initializeDataLayer(props) {
+        const { dataLayer, dataLayerName } = props;
+        if (window[dataLayerName])
+            return window[dataLayerName].push(dataLayer);
+        const snippets = appendToDataLayer({ dataLayer, dataLayerName });
+        const dataScript = this.initializeDataScript(snippets);
+        document.head.insertBefore(dataScript, document.head.childNodes[0]);
+    }
+    initialize(props) {
+        const { events, gtmId, dataLayer, auth = "", preview = "", dataLayerName = "dataLayer", } = props;
+        const gtm = this.initializeGTMElements({
+            id: gtmId,
+            events: events,
+            dataLayer: dataLayer || undefined,
+            dataLayerName: dataLayerName,
+            auth,
+            preview,
+        });
+        if (dataLayer)
+            document.head.appendChild(gtm.dataScript);
+        document.head.insertBefore(gtm.script(), document.head.childNodes[0]);
+        document.body.insertBefore(gtm.noScript(), document.body.childNodes[0]);
+    }
+}
+export { GoogleTagManager };

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

@@ -0,0 +1,12 @@
+type GoogleTagManagerProps = {
+    gtmId: string;
+    events?: Record<string, string>;
+    dataLayer?: Record<string, string>;
+    dataLayerName?: string;
+    auth?: string;
+    preview?: string;
+    showInDevMode?: boolean;
+};
+declare function GoogleTagManager(props: GoogleTagManagerProps): import("react/jsx-runtime").JSX.Element;
+export { GoogleTagManager };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GoogleTagManager/index.tsx"],"names":[],"mappings":"AAGA,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CA6BrD;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/GoogleTagManager/index.js

@@ -0,0 +1,11 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { ClientOnly } from "../../components/ClientOnly";
+import { GoogleTagManagerClient } from "./GoogleTagManager.client";
+function GoogleTagManager(props) {
+    const { gtmId, auth = "", preview = "", dataLayerName = "dataLayer", events = {}, dataLayer = {}, showInDevMode = false, } = props;
+    if (process.env.NODE_ENV !== "production" && !showInDevMode) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsx(ClientOnly, { children: () => (_jsx(GoogleTagManagerClient, { auth: auth, dataLayer: dataLayer, dataLayerName: dataLayerName, events: events, gtmId: gtmId, preview: preview })) }));
+}
+export { GoogleTagManager };

package/dist/components/GoogleTagManager/snippets/appendToDataLayer.d.ts

@@ -0,0 +1,7 @@
+type AppendToDataLayer = {
+    dataLayer: Record<string, string>;
+    dataLayerName: string;
+};
+declare function appendToDataLayer(props: AppendToDataLayer): string;
+export { appendToDataLayer };
+//# sourceMappingURL=appendToDataLayer.d.ts.map

package/dist/components/GoogleTagManager/snippets/appendToDataLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appendToDataLayer.d.ts","sourceRoot":"","sources":["../../../../src/components/GoogleTagManager/snippets/appendToDataLayer.ts"],"names":[],"mappings":"AAAA,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,iBAAS,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,UAMlD;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/GoogleTagManager/snippets/appendToDataLayer.js

@@ -0,0 +1,7 @@
+function appendToDataLayer(props) {
+    const { dataLayer, dataLayerName } = props;
+    return `
+  window.${dataLayerName} = window.${dataLayerName} || [];
+  window.${dataLayerName}.push(${JSON.stringify(dataLayer)})`;
+}
+export { appendToDataLayer };

package/dist/components/GoogleTagManager/snippets/generateGTMElements.d.ts

@@ -0,0 +1,15 @@
+type GenerateGTMElementsProps = {
+    id: string;
+    events: Record<string, string>;
+    dataLayer: Record<string, string>;
+    dataLayerName: string;
+    preview: string;
+    auth: string;
+};
+declare function generateGTMElements(props: GenerateGTMElementsProps): {
+    iframe: string;
+    script: string;
+    dataLayerVar: string;
+};
+export { generateGTMElements };
+//# sourceMappingURL=generateGTMElements.d.ts.map

package/dist/components/GoogleTagManager/snippets/generateGTMElements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateGTMElements.d.ts","sourceRoot":"","sources":["../../../../src/components/GoogleTagManager/snippets/generateGTMElements.ts"],"names":[],"mappings":"AAEA,KAAK,wBAAwB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB;;;;EA6B3D;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/GoogleTagManager/snippets/generateGTMElements.js

@@ -0,0 +1,25 @@
+import { appendToDataLayer } from "./appendToDataLayer";
+function generateGTMElements(props) {
+    const { id, events, dataLayer, dataLayerName, preview, auth } = props;
+    const gtmAuth = `&gtm_auth=${auth}`;
+    const gtmPreview = `&gtm_preview=${preview}`;
+    if (!id)
+        console.warn("GTM Id is required");
+    const iframe = `
+    <iframe src="https://www.googletagmanager.com/ns.html?id=${id}${gtmAuth}${gtmPreview}&gtm_cookies_win=x"
+      height="0" width="0" style="display:none;visibility:hidden" id="tag-manager"></iframe>`;
+    const script = `
+    (function(w,d,s,l,i){w[l]=w[l]||[];
+      w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js', ${JSON.stringify(events).slice(1, -1)}});
+      var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
+      j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+'${gtmAuth}${gtmPreview}&gtm_cookies_win=x';
+      f.parentNode.insertBefore(j,f);
+    })(window,document,'script','${dataLayerName}','${id}');`;
+    const dataLayerVar = appendToDataLayer({ dataLayer, dataLayerName });
+    return {
+        iframe,
+        script,
+        dataLayerVar,
+    };
+}
+export { generateGTMElements };

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

@@ -0,0 +1,5 @@
+import { IconButtonProps } from "@arkyn/types";
+import "./styles.css";
+declare function IconButton(props: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export { IconButton };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,cAAc,CAAC;AAEtB,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CA+BzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/IconButton/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+import "./styles.css";
+function IconButton(props) {
+    const { isLoading = false, scheme = "primary", variant = "solid", size = "md", icon: Icon, disabled, className: baseClassName = "", ...rest } = props;
+    const iconSize = { xs: 12, sm: 16, md: 20, lg: 24 };
+    const loading = isLoading ? "loadingTrue" : "loadingFalse";
+    const className = `arkynIconButton ${variant} ${scheme} ${size} ${loading} ${baseClassName}`;
+    return (_jsxs("button", { disabled: disabled || isLoading, className: className.trim(), ...rest, children: [_jsx("div", { className: "arkynIconButtonSpinner", children: _jsx(Loader2, { size: iconSize[size], strokeWidth: 2.5 }) }), _jsx("div", { className: "arkynIconButtonContent", children: _jsx(Icon, { size: iconSize[size], strokeWidth: 2.5 }) })] }));
+}
+export { IconButton };

package/dist/components/ImageUpload/HasFileContent/index.d.ts

@@ -0,0 +1,5 @@
+import { ImageUploadHasFileContentProps } from "@arkyn/types";
+import "./styles.css";
+declare function HasFileContent(props: ImageUploadHasFileContentProps): import("react/jsx-runtime").JSX.Element;
+export { HasFileContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ImageUpload/HasFileContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageUpload/HasFileContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,8BAA8B,EAAE,MAAM,cAAc,CAAC;AAO9D,OAAO,cAAc,CAAC;AAEtB,iBAAS,cAAc,CAAC,KAAK,EAAE,8BAA8B,2CA4D5D;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/ImageUpload/HasFileContent/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RefreshCw } from "lucide-react";
+import { Button } from "../../Button";
+import { IconButton } from "../../IconButton";
+import { Tooltip } from "../../Tooltip";
+import "./styles.css";
+function HasFileContent(props) {
+    const { disabled, filePath, isLoading, acceptImage, changeImageButtonText, handleSelectFile, reSendImage, } = props;
+    function handleClick() {
+        if (disabled)
+            return;
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = acceptImage;
+        input.onchange = (event) => {
+            const file = event.target.files?.[0];
+            if (file)
+                handleSelectFile(file);
+        };
+        input.click();
+    }
+    return (_jsxs("div", { className: "arkynImageUploadHasFileContent", style: { backgroundImage: `url("${filePath}")` }, children: [reSendImage && (_jsx(Tooltip, { orientation: "bottom", text: "Reenviar imagem", children: _jsx(IconButton, { type: "button", "aria-label": "resend image", variant: "outline", scheme: "danger", size: "sm", isLoading: isLoading, onClick: reSendImage, icon: RefreshCw, disabled: disabled }) })), _jsx(Button, { isLoading: isLoading, onClick: handleClick, variant: "outline", size: "sm", type: "button", disabled: disabled, children: changeImageButtonText })] }));
+}
+export { HasFileContent };

package/dist/components/ImageUpload/ImageUploadError/index.d.ts

@@ -0,0 +1,5 @@
+import { ImageUploadErrorProps } from "@arkyn/types";
+import "./styles.css";
+declare function ImageUploadError(props: ImageUploadErrorProps): import("react/jsx-runtime").JSX.Element;
+export { ImageUploadError };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ImageUpload/ImageUploadError/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageUpload/ImageUploadError/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,cAAc,CAAC;AAEtB,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAMrD;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/ImageUpload/ImageUploadError/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import "./styles.css";
+function ImageUploadError(props) {
+    const { error } = props;
+    const className = `arkynImageUploadError`;
+    if (error)
+        return _jsx("strong", { className: className, children: error });
+    return _jsx(_Fragment, {});
+}
+export { ImageUploadError };

package/dist/components/ImageUpload/ImageUploadLabel/index.d.ts

@@ -0,0 +1,5 @@
+import { ImageUploadLabelProps } from "@arkyn/types";
+import "./styles.css";
+declare function ImageUploadLabel(props: ImageUploadLabelProps): import("react/jsx-runtime").JSX.Element;
+export { ImageUploadLabel };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ImageUpload/ImageUploadLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageUpload/ImageUploadLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,cAAc,CAAC;AAEtB,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAOrD;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/ImageUpload/ImageUploadLabel/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+function ImageUploadLabel(props) {
+    const { label, showAsterisk } = props;
+    const show = showAsterisk ? "asteriskTrue" : "asteriskFalse";
+    const className = `arkynImageUploadLabel ${show}`;
+    return _jsx("strong", { className: className.trim(), children: label });
+}
+export { ImageUploadLabel };

package/dist/components/ImageUpload/NoFileContent/index.d.ts

@@ -0,0 +1,5 @@
+import { ImageUploadNoFileContentProps } from "@arkyn/types";
+import "./styles.css";
+declare function NoFileContent(props: ImageUploadNoFileContentProps): import("react/jsx-runtime").JSX.Element;
+export { NoFileContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ImageUpload/NoFileContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageUpload/NoFileContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,cAAc,CAAC;AAK7D,OAAO,cAAc,CAAC;AAEtB,iBAAS,aAAa,CAAC,KAAK,EAAE,6BAA6B,2CAkD1D;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/ImageUpload/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 { dropImageText, isLoading, acceptImage, handleSelectFile, selectImageButtonText, 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 = acceptImage;
+        input.onchange = (event) => {
+            const file = event.target.files?.[0];
+            if (file)
+                handleSelectFile(file);
+        };
+        input.click();
+    }
+    return (_jsxs("div", { onDrop: handleDrop, className: "arkynImageUploadNoFileContent", children: [_jsx(Button, { isLoading: isLoading, onClick: handleClick, variant: "ghost", size: "sm", type: "button", disabled: disabled, children: selectImageButtonText }), _jsx("p", { children: dropImageText })] }));
+}
+export { NoFileContent };

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

@@ -0,0 +1,5 @@
+import { ImageUploadProps } from "@arkyn/types";
+import "./styles.css";
+declare function ImageUpload(props: ImageUploadProps): import("react/jsx-runtime").JSX.Element;
+export { ImageUpload };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageUpload/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAUhD,OAAO,cAAc,CAAC;AAEtB,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAoG3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/ImageUpload/index.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useFieldErrors } from "../../hooks/useFieldErrors";
+import { HasFileContent } from "./HasFileContent";
+import { ImageUploadError } from "./ImageUploadError";
+import { ImageUploadLabel } from "./ImageUploadLabel";
+import { NoFileContent } from "./NoFileContent";
+import "./styles.css";
+function ImageUpload(props) {
+    const { name, defaultValue = "", label, showAsterisk = false, action, fileName = "file", method = "POST", acceptImage = "image/*", fileResponseName = "url", changeImageButtonText = "Alterar imagem", selectImageButtonText = "Selecionar imagem", dropImageText = "Ou arraste e solte a imagem aqui", onUpload, disabled = false, } = props;
+    const fieldErrors = useFieldErrors();
+    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 handleUploadImage(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]);
+            onUpload && onUpload(response?.[fileResponseName]);
+        })
+            .catch((error) => {
+            console.error(error);
+            setError("Erro ao enviar imagem");
+        })
+            .finally(() => setIsLoading(false));
+    }
+    function handleSelectFile(file) {
+        if (disabled)
+            return;
+        setFilePath(URL.createObjectURL(file));
+        handleUploadImage(file);
+    }
+    const errorMessage = fieldError || error;
+    const hasErrorClassName = errorMessage ? "hasError" : "noHasError";
+    const hasImageClassName = filePath ? "hasImage" : "noHasImage";
+    const className = `arkynImageUpload ${hasErrorClassName} ${hasImageClassName}`;
+    return (_jsxs("div", { className: "arkynImageUploadContainer", children: [label && _jsx(ImageUploadLabel, { label: label, showAsterisk: showAsterisk }), _jsxs("div", { className: className, children: [_jsx("input", { type: "hidden", name: name, value: value || "" }), !filePath && (_jsx(NoFileContent, { disabled: disabled, isLoading: isLoading, acceptImage: acceptImage, dropImageText: dropImageText, handleSelectFile: handleSelectFile, selectImageButtonText: selectImageButtonText })), filePath && (_jsx(HasFileContent, { disabled: disabled, isLoading: isLoading, acceptImage: acceptImage, filePath: filePath, handleSelectFile: handleSelectFile, changeImageButtonText: changeImageButtonText, reSendImage: !!errorMessage && file ? () => handleUploadImage(file) : undefined }))] }), errorMessage && _jsx(ImageUploadError, { error: errorMessage })] }));
+}
+export { ImageUpload };