@sikka/hawa 0.23.2-next → 0.23.7-next

package/dist/elements/index.mjs

@@ -4,8 +4,6 @@ import {
   AccordionItem,
   AccordionRoot,
   AccordionTrigger,
-  ActionCard,
-  AdCard,
   Alert,
   AppStores,
   Avatar,
@@ -72,9 +70,7 @@ import {
   FileUploader,
   Input,
   InterfaceSettings,
-  ItemCard,
   Label,
-  LandingCard,
   Loading,
   Logos,
   NavigationMenu,
@@ -94,7 +90,6 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-  PricingCard,
   Progress,
   ProgressCircle,
   Radio,
@@ -144,7 +139,7 @@ import {
   Tooltip,
   buttonVariants,
   navigationMenuTriggerStyle
-} from "../chunk-X6PCWJYD.mjs";
+} from "../chunk-2R2QPJT7.mjs";
 import "../chunk-343SRWR4.mjs";
 export {
   Accordion,
@@ -152,8 +147,6 @@ export {
   AccordionItem,
   AccordionRoot,
   AccordionTrigger,
-  ActionCard,
-  AdCard,
   Alert,
   AppStores,
   Avatar,
@@ -220,9 +213,7 @@ export {
   FileUploader,
   Input,
   InterfaceSettings,
-  ItemCard,
   Label,
-  LandingCard,
   Loading,
   Logos,
   NavigationMenu,
@@ -242,7 +233,6 @@ export {
   Popover,
   PopoverContent,
   PopoverTrigger,
-  PricingCard,
   Progress,
   ProgressCircle,
   Radio,

package/dist/fileDropzone/index.mjs

@@ -1,10 +1,232 @@
 import {
-  FileDropzone
-} from "../chunk-BK5WF7UO.mjs";
-import "../chunk-FRDYTR55.mjs";
-import "../chunk-SYB66JGL.mjs";
+  Alert
+} from "../chunk-FRDYTR55.mjs";
+import {
+  Button
+} from "../chunk-SYB66JGL.mjs";
 import "../chunk-PUQV6URH.mjs";
 import "../chunk-TE3BKEXL.mjs";
+
+// components/elements/fileDropzone/FileDropzone.tsx
+import React, { useEffect, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import clsx from "clsx";
+var FileDropzone = ({
+  texts,
+  files,
+  setFiles,
+  setDeletedFiles,
+  onAcceptedFiles,
+  errorMessages,
+  maxFiles,
+  accept,
+  showPreview,
+  onDeleteFile,
+  onClearFiles,
+  disclaimer,
+  maxSize,
+  label,
+  termsLink,
+  privacyLink
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const [cmp, setCmp] = useState(0);
+  const [max, setMax] = useState(0);
+  const {
+    getRootProps,
+    getInputProps,
+    fileRejections,
+    acceptedFiles,
+    isDragActive
+  } = useDropzone({
+    multiple: true,
+    accept,
+    maxSize,
+    maxFiles,
+    onDrop: (acceptedFiles2) => {
+      setFiles(
+        acceptedFiles2.map(
+          (file, index) => Object.assign(file, {
+            preview: URL.createObjectURL(file)
+          })
+        )
+      );
+    }
+  });
+  useEffect(
+    () => () => {
+      files == null ? void 0 : files.forEach((file) => {
+        URL.revokeObjectURL(file.preview);
+      });
+    },
+    [files]
+  );
+  useEffect(() => {
+    setFiles(acceptedFiles);
+  }, [acceptedFiles, cmp, setFiles]);
+  onClearFiles = () => {
+    acceptedFiles.length = 0;
+    acceptedFiles.splice(0, acceptedFiles.length);
+    setFiles([]);
+  };
+  const clearAllFiles = () => {
+    acceptedFiles.length = 0;
+    setFiles([]);
+  };
+  useEffect(() => {
+    if (maxSize > 0) {
+      const k = 1024;
+      const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+      const i = Math.floor(Math.log(maxSize) / Math.log(1024));
+      setMax(
+        parseFloat((maxSize / Math.pow(1024, i)).toFixed(2)) + " " + sizes[i]
+      );
+    }
+  }, [maxSize]);
+  const errs = fileRejections.map((rej, i) => {
+    switch (rej.errors[0].code) {
+      case "file-too-large":
+        return /* @__PURE__ */ React.createElement(
+          Alert,
+          {
+            key: i,
+            text: rej.file.name,
+            title: texts.fileTooLarge,
+            severity: "error"
+          }
+        );
+      case "too-many-files":
+        return /* @__PURE__ */ React.createElement(
+          Alert,
+          {
+            key: i,
+            text: rej.file.name,
+            title: texts.tooManyFiles,
+            severity: "error"
+          }
+        );
+      case "file-invalid-type":
+        return /* @__PURE__ */ React.createElement(
+          Alert,
+          {
+            key: i,
+            text: rej.file.name,
+            title: texts.invalidFileType,
+            severity: "error"
+          }
+        );
+      default:
+        return /* @__PURE__ */ React.createElement(
+          Alert,
+          {
+            key: i,
+            text: rej.file.name,
+            title: rej.errors[0].code,
+            severity: "error"
+          }
+        );
+    }
+  });
+  const thumbs = files == null ? void 0 : files.map((file, index) => /* @__PURE__ */ React.createElement("div", { className: "hawa-relative hawa-rounded", key: index }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        acceptedFiles.splice(acceptedFiles.indexOf(file), 1);
+        setCmp(Math.random);
+        onDeleteFile(file);
+      },
+      type: "button",
+      className: "hawa-absolute hawa-left-0 hawa-ml-auto hawa-inline-flex hawa-items-center hawa-rounded-inner hawa-rounded-bl-none hawa-rounded-tr-none hawa-bg-gray-900 hawa-p-1.5 hawa-text-sm hawa-text-gray-400 hawa-transition-all hover:hawa-bg-gray-200 hover:hawa-text-gray-900 dark:hover:hawa-bg-gray-600 dark:hover:hawa-text-white",
+      "data-modal-toggle": "defaultModal"
+    },
+    /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className: "hawa-h-5 hawa-w-5",
+        fill: "currentColor",
+        viewBox: "0 0 20 20"
+      },
+      /* @__PURE__ */ React.createElement(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+          clipRule: "evenodd"
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement("span", { className: "hawa-sr-only" }, "Close modal")
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+        height: 100,
+        width: 100,
+        backgroundImage: `url(${file.preview})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        border: "1px solid black"
+      },
+      className: "hawa-rounded",
+      key: file.name
+    }
+  )));
+  return /* @__PURE__ */ React.createElement("div", null, label && /* @__PURE__ */ React.createElement("div", { className: "hawa-mb-2 hawa-block hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300" }, label), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        "hawa-flex hawa-flex-col hawa-justify-center hawa-rounded hawa-border hawa-border-dashed  hawa-p-6 hawa-transition-all  ",
+        isDragActive ? "hawa-bg-muted" : "hawa-bg-muted/20 hover:hawa-bg-muted/50 "
+      )
+    },
+    /* @__PURE__ */ React.createElement("div", { ...getRootProps({}) }, /* @__PURE__ */ React.createElement("p", { ...getInputProps() }), /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center hawa-gap-2 hawa-pt-4 hawa-text-center" }, /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        stroke: "currentColor",
+        fill: "none",
+        strokeWidth: "2",
+        viewBox: "0 0 24 24",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        height: "1.5em",
+        width: "1.5em"
+      },
+      /* @__PURE__ */ React.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+      /* @__PURE__ */ React.createElement("path", { d: "M19 11v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" }),
+      /* @__PURE__ */ React.createElement("path", { d: "M13 13l9 3l-4 2l-2 4l-3 -9" }),
+      /* @__PURE__ */ React.createElement("path", { d: "M3 3l0 .01" }),
+      /* @__PURE__ */ React.createElement("path", { d: "M7 3l0 .01" }),
+      /* @__PURE__ */ React.createElement("path", { d: "M11 3l0 .01" }),
+      /* @__PURE__ */ React.createElement("path", { d: "M15 3l0 .01" }),
+      /* @__PURE__ */ React.createElement("path", { d: "M3 7l0 .01" }),
+      /* @__PURE__ */ React.createElement("path", { d: "M3 11l0 .01" }),
+      /* @__PURE__ */ React.createElement("path", { d: "M3 15l0 .01" })
+    ), typeof texts.clickHereToUpload === "function" ? texts.clickHereToUpload() : texts.clickHereToUpload), /* @__PURE__ */ React.createElement("div", { className: "hawa-select-none hawa-pt-2 hawa-text-center hawa-text-xs" }, texts.acceptedFileTypes, " ", accept.split(",")), /* @__PURE__ */ React.createElement("div", { className: "hawa-select-none hawa-pb-2 hawa-pt-1 hawa-text-center hawa-text-xs" }, texts.maxFileSize, " ", max)),
+    acceptedFiles.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-justify-center hawa-rounded-lg  hawa-p-2 " }, /* @__PURE__ */ React.createElement(Button, { onClick: clearAllFiles }, "Clear All")),
+    acceptedFiles.length > 0 && thumbs && showPreview ? /* @__PURE__ */ React.createElement("aside", { className: "hawa-flex hawa-flex-row hawa-flex-wrap hawa-justify-center  hawa-gap-2 hawa-rounded-lg  hawa-p-2" }, thumbs) : null,
+    /* @__PURE__ */ React.createElement("div", { className: "px-4" }, ((_b = (_a = fileRejections[0]) == null ? void 0 : _a.errors[0]) == null ? void 0 : _b.code) && errs)
+  ), disclaimer && /* @__PURE__ */ React.createElement("div", { className: "hawa-mt-2 hawa-text-sm hawa-text-muted-foreground/50" }, (_c = texts.disclaimer) != null ? _c : "By uploading a file you agree to our", " ", /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      href: termsLink,
+      className: "clickable-link hawa-text-muted-foreground/50"
+    },
+    (_d = texts.terms) != null ? _d : "Terms"
+  ), " ", (_e = texts.and) != null ? _e : "and", " ", /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      href: privacyLink,
+      className: "clickable-link hawa-text-muted-foreground/50"
+    },
+    (_f = texts.privacyPolicy) != null ? _f : "Privacy Policy"
+  )));
+};
 export {
   FileDropzone
 };