@beautinique/frontend-components 1.0.4 → 1.0.6

package/dist/toast/index.js

@@ -1,56 +1,9 @@
-import { nanoid } from 'nanoid';
-import { create } from 'zustand';
 import { addCollection, Icon } from '@iconify/react';
 import { memo, useState, useRef, useCallback, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
-// src/lib/constants.ts
-var TOAST_TYPES = [
-  "success",
-  "error",
-  "warning",
-  "progress",
-  "uploads",
-  "loading",
-  "default",
-  "custom"
-];
-var TOAST_TYPE = Object.fromEntries(TOAST_TYPES.map((type) => [type, type]));
-
-// src/toast/toast.store.ts
-var useToastStore = create((set) => ({
-  toasts: [],
-  add: /* @__PURE__ */ __name((toast) => {
-    const id = nanoid();
-    set((state) => ({ toasts: [...state.toasts, { ...toast, id }] }));
-    return id;
-  }, "add"),
-  update: {
-    progress: /* @__PURE__ */ __name((id, progress) => {
-      set((state) => ({
-        toasts: state.toasts.map((toast) => toast.id === id ? { ...toast, progress } : toast)
-      }));
-    }, "progress"),
-    uploadItem: /* @__PURE__ */ __name((id, itemId, patch) => {
-      set((state) => ({
-        toasts: state.toasts.map(
-          (toast) => toast.id === id && toast.type === TOAST_TYPE.uploads ? {
-            ...toast,
-            items: toast.items.map(
-              (item) => item.id === itemId ? { ...item, ...patch } : item
-            )
-          } : toast
-        )
-      }));
-    }, "uploadItem")
-  },
-  remove: /* @__PURE__ */ __name((id) => {
-    set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) }));
-  }, "remove")
-}));
 var TOAST_ICON_SETS = [
   {
     prefix: "solar",
@@ -112,6 +65,19 @@ var TOAST_ICON_NAMES = TOAST_ICON_SETS.flatMap(
   ({ prefix, icons }) => Object.keys(icons).map((name) => `${prefix}:${name}`)
 );
 
+// src/lib/constants.ts
+var TOAST_TYPES = [
+  "success",
+  "error",
+  "warning",
+  "progress",
+  "uploads",
+  "loading",
+  "default",
+  "custom"
+];
+var TOAST_TYPE = Object.fromEntries(TOAST_TYPES.map((type) => [type, type]));
+
 // src/lib/button.ts
 var PATTERN_CSS = {
   primary: "text-white bg-sky-blue-burst shadow-primary-btn hover:shadow-primary-btn-hover",
@@ -149,52 +115,6 @@ var Button = /* @__PURE__ */ __name(({
   )
 ), "Button");
 
-// src/toast/toaster.ts
-var { add, update, remove } = useToastStore.getState();
-var toaster = {
-  success: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.success }), "success"),
-  error: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.error }), "error"),
-  warning: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.warning }), "warning"),
-  default: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.default }), "default"),
-  loading: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.loading }), "loading"),
-  custom: /* @__PURE__ */ __name((data) => add(data), "custom"),
-  progress: {
-    start: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.progress }), "start"),
-    update: /* @__PURE__ */ __name((toastId, progress) => {
-      update.progress(toastId, progress);
-    }, "update"),
-    end: /* @__PURE__ */ __name((toastId) => {
-      remove(toastId);
-    }, "end")
-  },
-  uploads: {
-    start: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.uploads }), "start"),
-    update: /* @__PURE__ */ __name((toastId, itemId, patch) => {
-      update.uploadItem(toastId, itemId, patch);
-    }, "update")
-  },
-  remove: /* @__PURE__ */ __name((toastId) => {
-    remove(toastId);
-  }, "remove")
-};
-var withProgressToast = /* @__PURE__ */ __name(async ({
-  title,
-  description,
-  request
-}) => {
-  const toastId = toaster.progress.start({ title, description, progress: 0 });
-  try {
-    const response = await request((event) => {
-      if (!event.total) return;
-      toaster.progress.update(toastId, Math.round(event.loaded * 100 / event.total));
-    });
-    toaster.progress.update(toastId, 100);
-    return response;
-  } finally {
-    toaster.progress.end(toastId);
-  }
-}, "withProgressToast");
-
 // src/toast/uploads.ts
 var sum = /* @__PURE__ */ __name((numbers) => numbers.reduce((total, value) => total + value, 0), "sum");
 var isUploadItemSettled = /* @__PURE__ */ __name(({ status }) => status === "success" || status === "error", "isUploadItemSettled");
@@ -244,92 +164,95 @@ var getUploadsSummary = /* @__PURE__ */ __name((items) => {
   };
 }, "getUploadsSummary");
 var getFormDataFiles = /* @__PURE__ */ __name((data, key = "files") => data.getAll(key).filter((value) => value instanceof File), "getFormDataFiles");
-var createUploadsToast = /* @__PURE__ */ __name(({
-  title,
-  description,
-  items
-}) => {
-  if (items.length === 0) return void 0;
-  const statuses = new Map(items.map(({ id }) => [id, "pending"]));
-  const toastId = toaster.uploads.start({
+var createUploadsHelpers = /* @__PURE__ */ __name((toaster) => {
+  const createUploadsToast = /* @__PURE__ */ __name(({
     title,
     description,
-    items: items.map(({ id, label, files }) => {
-      const fileSizes = files.map(({ size }) => size);
-      return { id, label, status: "pending", loaded: 0, total: sum(fileSizes), fileSizes };
-    })
-  });
-  const patch = /* @__PURE__ */ __name((id, changes) => {
-    if (changes.status) statuses.set(id, changes.status);
-    toaster.uploads.update(toastId, id, changes);
-  }, "patch");
-  return {
-    item: /* @__PURE__ */ __name((id) => ({
-      run: /* @__PURE__ */ __name(async (request) => {
-        patch(id, { status: "uploading" });
-        try {
-          const result = await request((event) => {
-            if (!event.total) return;
-            patch(id, { loaded: event.loaded, total: event.total });
-          });
-          patch(id, { status: "success" });
-          return result;
-        } catch (error) {
-          patch(id, { status: "error" });
-          throw error;
+    items
+  }) => {
+    if (items.length === 0) return void 0;
+    const statuses = new Map(items.map(({ id }) => [id, "pending"]));
+    const toastId = toaster.uploads.start({
+      title,
+      description,
+      items: items.map(({ id, label, files }) => {
+        const fileSizes = files.map(({ size }) => size);
+        return { id, label, status: "pending", loaded: 0, total: sum(fileSizes), fileSizes };
+      })
+    });
+    const patch = /* @__PURE__ */ __name((id, changes) => {
+      if (changes.status) statuses.set(id, changes.status);
+      toaster.uploads.update(toastId, id, changes);
+    }, "patch");
+    return {
+      item: /* @__PURE__ */ __name((id) => ({
+        run: /* @__PURE__ */ __name(async (request) => {
+          patch(id, { status: "uploading" });
+          try {
+            const result = await request((event) => {
+              if (!event.total) return;
+              patch(id, { loaded: event.loaded, total: event.total });
+            });
+            patch(id, { status: "success" });
+            return result;
+          } catch (error) {
+            patch(id, { status: "error" });
+            throw error;
+          }
+        }, "run")
+      }), "item"),
+      end: /* @__PURE__ */ __name(() => {
+        for (const [id, status] of statuses) {
+          if (status === "pending" || status === "uploading") patch(id, { status: "error" });
         }
-      }, "run")
-    }), "item"),
-    end: /* @__PURE__ */ __name(() => {
-      for (const [id, status] of statuses) {
-        if (status === "pending" || status === "uploading") patch(id, { status: "error" });
-      }
-    }, "end")
-  };
-}, "createUploadsToast");
-var withUploadsToast = /* @__PURE__ */ __name(async ({
-  title,
-  description,
-  files,
-  request
-}) => {
-  const group = createUploadsToast({
+      }, "end")
+    };
+  }, "createUploadsToast");
+  const withUploadsToast = /* @__PURE__ */ __name(async ({
     title,
     description,
-    items: files.length > 0 ? [{ id: "files", label: description ?? title, files }] : []
-  });
-  if (!group) return request(() => void 0);
-  try {
-    return await group.item("files").run(request);
-  } finally {
-    group.end();
-  }
-}, "withUploadsToast");
-var runUploadsInToast = /* @__PURE__ */ __name(async ({
-  title,
-  description,
-  uploads,
-  run
-}) => {
-  const group = createUploadsToast({
+    files,
+    request
+  }) => {
+    const group = createUploadsToast({
+      title,
+      description,
+      items: files.length > 0 ? [{ id: "files", label: description ?? title, files }] : []
+    });
+    if (!group) return request(() => void 0);
+    try {
+      return await group.item("files").run(request);
+    } finally {
+      group.end();
+    }
+  }, "withUploadsToast");
+  const runUploadsInToast = /* @__PURE__ */ __name(async ({
     title,
     description,
-    items: uploads.filter(({ files }) => files.length > 0)
-  });
-  const settled = await Promise.allSettled(uploads.map(({ id }) => run(id, group?.item(id))));
-  group?.end();
-  const results = {};
-  settled.forEach((result, index) => {
-    if (result.status === "fulfilled") results[uploads[index].id] = result.value;
-  });
-  const failure = settled.find(
-    (result) => result.status === "rejected"
-  );
-  if (failure) {
-    throw failure.reason instanceof Error ? failure.reason : new Error("Upload failed");
-  }
-  return results;
-}, "runUploadsInToast");
+    uploads,
+    run
+  }) => {
+    const group = createUploadsToast({
+      title,
+      description,
+      items: uploads.filter(({ files }) => files.length > 0)
+    });
+    const settled = await Promise.allSettled(uploads.map(({ id }) => run(id, group?.item(id))));
+    group?.end();
+    const results = {};
+    settled.forEach((result, index) => {
+      if (result.status === "fulfilled") results[uploads[index].id] = result.value;
+    });
+    const failure = settled.find(
+      (result) => result.status === "rejected"
+    );
+    if (failure) {
+      throw failure.reason instanceof Error ? failure.reason : new Error("Upload failed");
+    }
+    return results;
+  }, "runUploadsInToast");
+  return { createUploadsToast, withUploadsToast, runUploadsInToast };
+}, "createUploadsHelpers");
 registerToastIcons();
 var CircularProgress = /* @__PURE__ */ __name(({ progress, ...props }) => {
   const radius = 10;
@@ -476,9 +399,9 @@ var ToasterItem = /* @__PURE__ */ __name((props) => {
     buttonProps,
     isClosable = true,
     autoClose = true,
-    closeTimer = 5e3
+    closeTimer = 5e3,
+    onRemove
   } = props;
-  const remove2 = useToastStore((s) => s.remove);
   const [visible, setVisible] = useState(false);
   const [mounted, setMounted] = useState(true);
   const timeoutRef = useRef(null);
@@ -500,9 +423,9 @@ var ToasterItem = /* @__PURE__ */ __name((props) => {
     setVisible(false);
     timeoutRef.current = setTimeout(() => {
       setMounted(false);
-      remove2(props.id);
+      onRemove?.(props.id);
     }, 300);
-  }, [remove2, props.id]);
+  }, [onRemove, props.id]);
   useEffect(() => {
     const enterTimer = setTimeout(() => {
       setVisible(true);
@@ -588,12 +511,65 @@ var ToasterItem = /* @__PURE__ */ __name((props) => {
   );
 }, "ToasterItem");
 var Toaster = memo(ToasterItem);
-var ToastContainer = /* @__PURE__ */ __name(() => {
+var ToastContainer = /* @__PURE__ */ __name(({ store: useToastStore }) => {
   const toasts = useToastStore((s) => s.toasts);
+  const remove = useToastStore((s) => s.remove);
   if (toasts.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: "base:max-w-sm fixed right-2 bottom-2 z-999 flex w-full max-w-xs flex-col gap-2 sm:max-w-md md:right-4 md:bottom-4 md:max-w-lg lg:right-8 lg:bottom-8 lg:max-w-xl", children: toasts.map((toast) => /* @__PURE__ */ jsx(Toaster, { ...toast, id: toast.id }, toast.id)) });
+  return /* @__PURE__ */ jsx("div", { className: "base:max-w-sm fixed right-2 bottom-2 z-999 flex w-full max-w-xs flex-col gap-2 sm:max-w-md md:right-4 md:bottom-4 md:max-w-lg lg:right-8 lg:bottom-8 lg:max-w-xl", children: toasts.map((toast) => /* @__PURE__ */ jsx(Toaster, { ...toast, id: toast.id, onRemove: remove }, toast.id)) });
 }, "ToastContainer");
 
-export { TOAST_ICON_NAMES, ToastContainer, Toaster, createUploadsToast, getFormDataFiles, getUploadItemFilesDone, getUploadItemPercent, getUploadsSummary, isUploadItemSettled, runUploadsInToast, toaster, useToastStore, withProgressToast, withUploadsToast };
+// src/toast/toaster.ts
+var createToasterApi = /* @__PURE__ */ __name((store) => {
+  const { add, update, remove } = store.getState();
+  return {
+    success: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.success }), "success"),
+    error: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.error }), "error"),
+    warning: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.warning }), "warning"),
+    default: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.default }), "default"),
+    loading: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.loading }), "loading"),
+    custom: /* @__PURE__ */ __name((data) => add(data), "custom"),
+    progress: {
+      start: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.progress }), "start"),
+      update: /* @__PURE__ */ __name((toastId, progress) => {
+        update.progress(toastId, progress);
+      }, "update"),
+      end: /* @__PURE__ */ __name((toastId) => {
+        remove(toastId);
+      }, "end")
+    },
+    uploads: {
+      start: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.uploads }), "start"),
+      update: /* @__PURE__ */ __name((toastId, itemId, patch) => {
+        update.uploadItem(toastId, itemId, patch);
+      }, "update")
+    },
+    remove: /* @__PURE__ */ __name((toastId) => {
+      remove(toastId);
+    }, "remove")
+  };
+}, "createToasterApi");
+var createToaster = /* @__PURE__ */ __name((store) => {
+  const toaster = createToasterApi(store);
+  const withProgressToast = /* @__PURE__ */ __name(async ({
+    title,
+    description,
+    request
+  }) => {
+    const toastId = toaster.progress.start({ title, description, progress: 0 });
+    try {
+      const response = await request((event) => {
+        if (!event.total) return;
+        toaster.progress.update(toastId, Math.round(event.loaded * 100 / event.total));
+      });
+      toaster.progress.update(toastId, 100);
+      return response;
+    } finally {
+      toaster.progress.end(toastId);
+    }
+  }, "withProgressToast");
+  return { toaster, withProgressToast, ...createUploadsHelpers(toaster) };
+}, "createToaster");
+
+export { TOAST_ICON_NAMES, ToastContainer, Toaster, createToaster, getFormDataFiles, getUploadItemFilesDone, getUploadItemPercent, getUploadsSummary, isUploadItemSettled };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map