@beautinique/frontend-components 0.0.0-stage → 1.0.0

package/dist/toast/index.js

@@ -0,0 +1,603 @@
+import { nanoid } from 'nanoid';
+import { create } from 'zustand';
+import { addCollection, Icon } from '@iconify/react';
+import { 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",
+    width: 24,
+    height: 24,
+    icons: {
+      // warning and error toasts
+      "danger-triangle-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M5.31171 10.7615C8.23007 5.58716 9.68925 3 12 3C14.3107 3 15.7699 5.58716 18.6883 10.7615L19.0519 11.4063C21.4771 15.7061 22.6897 17.856 21.5937 19.428C20.4978 21 17.7864 21 12.3637 21H11.6363C6.21356 21 3.50217 21 2.40626 19.428C1.31034 17.856 2.52291 15.7061 4.94805 11.4063L5.31171 10.7615Z"/><path d="M12 8V13"/><path stroke-linejoin="round" d="M12 16H12.0001"/></g>'
+      },
+      // success toast
+      "check-circle-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path stroke-linejoin="round" d="M8.5 12.5L10.5 14.5L15.5 9.5"/></g>'
+      },
+      // an upload that is waiting its turn, in an uploads toast
+      "clock-circle-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path stroke-linejoin="round" d="M12 8V12L14.5 14.5"/></g>'
+      },
+      // default and custom toasts
+      "info-circle-outline": {
+        body: '<g fill="currentColor"><path d="M12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75Z"/><path d="M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z"/><path fill-rule="evenodd" d="M1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.9371 2.75 12 2.75Z" clip-rule="evenodd"/></g>'
+      }
+    }
+  },
+  {
+    prefix: "beautinique",
+    width: 24,
+    height: 24,
+    icons: {
+      /*
+       * The spinner of the loading toast and of an upload that is going on. It turns itself, inside
+       * the svg (`animateTransform`, around the centre of the ring), instead of being turned by a
+       * css `animate-spin` on the svg: the browser then draws the ring again at the exact angle on
+       * every frame. A css turn rotates a picture of the whole svg, and on a screen with a scaling of
+       * 125% an icon of 20px is 25 device pixels, so the middle of that picture is half a pixel off
+       * and the ring jumps up and down a little while it turns. Do not add `animate-spin` to it.
+       */
+      "loading-spin": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 3.34A10 10 0 1 0 22 12"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/></path>'
+      }
+    }
+  },
+  {
+    prefix: "lucide",
+    width: 24,
+    height: 24,
+    icons: {
+      // the close button of a closable toast
+      x: {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/>'
+      }
+    }
+  }
+];
+for (const iconSet of TOAST_ICON_SETS) addCollection(iconSet);
+var TOAST_ICON_NAMES = TOAST_ICON_SETS.flatMap(
+  ({ prefix, icons }) => Object.keys(icons).map((name) => `${prefix}:${name}`)
+);
+
+// src/lib/button.ts
+var getButtonCss = /* @__PURE__ */ __name((pattern) => {
+  switch (pattern) {
+    case "primary":
+      return "text-white bg-sky-blue-burst shadow-primary-btn hover:shadow-primary-btn-hover";
+    case "secondary":
+      return "text-secondary-invert bg-secondary shadow-secondary-btn hover:shadow-secondary-btn-hover";
+    case "tertiary":
+      return "text-tertiary-invert bg-tertiary shadow-tertiary-btn hover:shadow-tertiary-btn-hover";
+    case "outline":
+      return "text-primary border border-primary shadow-outline-btn hover:shadow-outline-btn-hover";
+    case "transparent":
+    default:
+      return "bg-transparent border border-primary/30 text-secondary";
+  }
+}, "getButtonCss");
+var Button = /* @__PURE__ */ __name(({
+  pattern,
+  content,
+  className = "",
+  leftIcon,
+  rightIcon,
+  buttonProps
+}) => {
+  const btnCSS = getButtonCss(pattern);
+  const handleClick = /* @__PURE__ */ __name((e) => {
+    if (buttonProps?.disabled) return;
+    buttonProps?.onClick?.(e);
+  }, "handleClick");
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...buttonProps,
+      className: `group flex w-full cursor-pointer items-center justify-center gap-1 rounded-lg px-4 py-3 text-sm leading-4 transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-85 lg:px-5 lg:py-4 xl:text-base ${btnCSS} ${className} ${buttonProps?.className ?? ""}`,
+      type: buttonProps?.type ?? "button",
+      onClick: handleClick,
+      children: [
+        leftIcon && /* @__PURE__ */ jsx(Icon, { ...leftIcon }),
+        typeof content === "object" ? /* @__PURE__ */ jsx(Icon, { ...content }) : content,
+        rightIcon && /* @__PURE__ */ jsx(Icon, { ...rightIcon })
+      ]
+    }
+  );
+}, "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");
+var getUploadItemFilesDone = /* @__PURE__ */ __name(({
+  status,
+  loaded,
+  fileSizes
+}) => {
+  if (status === "success") return fileSizes.length;
+  if (status !== "uploading") return 0;
+  let sent = 0;
+  let bytes = 0;
+  for (const size of fileSizes) {
+    bytes += size;
+    if (bytes > loaded) break;
+    sent += 1;
+  }
+  return Math.min(sent, Math.max(fileSizes.length - 1, 0));
+}, "getUploadItemFilesDone");
+var getUploadItemPercent = /* @__PURE__ */ __name(({
+  status,
+  loaded,
+  total
+}) => {
+  if (status === "success") return 100;
+  if (status === "pending" || total <= 0) return 0;
+  return Math.min(99, Math.round(Math.min(loaded, total) * 100 / total));
+}, "getUploadItemPercent");
+var getUploadsSummary = /* @__PURE__ */ __name((items) => {
+  const failed = items.filter(({ status }) => status === "error").length;
+  const isSettled = items.every(isUploadItemSettled);
+  const bytesTotal = sum(items.map(({ total }) => total));
+  const bytesDone = sum(
+    items.map(
+      (item) => item.status === "success" ? item.total : Math.min(item.loaded, item.total)
+    )
+  );
+  let percent = bytesTotal > 0 ? Math.round(bytesDone * 100 / bytesTotal) : 0;
+  if (isSettled && failed === 0) percent = 100;
+  else percent = Math.min(percent, 99);
+  return {
+    percent,
+    filesDone: sum(items.map(getUploadItemFilesDone)),
+    filesTotal: sum(items.map(({ fileSizes }) => fileSizes.length)),
+    failed,
+    isSettled
+  };
+}, "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({
+    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" });
+      }
+    }, "end")
+  };
+}, "createUploadsToast");
+var withUploadsToast = /* @__PURE__ */ __name(async ({
+  title,
+  description,
+  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");
+var runUploadsInToast = /* @__PURE__ */ __name(async ({
+  title,
+  description,
+  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");
+var CircularProgress = /* @__PURE__ */ __name(({ progress, ...props }) => {
+  const radius = 10;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - progress / 100 * circumference;
+  return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", ...props, children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: "12",
+        cy: "12",
+        r: radius,
+        fill: "none",
+        stroke: "currentColor",
+        strokeOpacity: 0.15,
+        strokeWidth: "1.5"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: "12",
+        cy: "12",
+        r: radius,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeDasharray: circumference,
+        strokeDashoffset: offset,
+        transform: "rotate(-90 12 12)"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "text",
+      {
+        x: "12",
+        y: "12",
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        fontSize: "6",
+        fontWeight: "500",
+        fill: "currentColor",
+        children: [
+          progress,
+          "%"
+        ]
+      }
+    )
+  ] });
+}, "CircularProgress");
+var GREEN_RGB = "var(--primary-green-rgb)";
+var RED_RGB = "var(--primary-red-rgb)";
+var UPLOAD_ITEM_ICON = {
+  pending: { icon: "solar:clock-circle-linear", rgb: "var(--primary-rgb)" },
+  uploading: { icon: "beautinique:loading-spin", rgb: "var(--primary-rgb)" },
+  success: { icon: "solar:check-circle-linear", rgb: GREEN_RGB },
+  error: { icon: "solar:danger-triangle-linear", rgb: RED_RGB }
+};
+var uploadsRgb = /* @__PURE__ */ __name(({ isSettled, failed }) => {
+  if (!isSettled) return "var(--primary-rgb)";
+  return failed > 0 ? RED_RGB : GREEN_RGB;
+}, "uploadsRgb");
+var uploadsSummaryText = /* @__PURE__ */ __name(({ filesDone, filesTotal, failed, isSettled }) => {
+  if (!isSettled) return `${String(filesDone)} of ${String(filesTotal)} uploaded`;
+  if (failed === 0) return filesTotal === 1 ? "Uploaded" : `All ${String(filesTotal)} uploaded`;
+  return `${String(filesDone)} of ${String(filesTotal)} uploaded, ${String(failed)} failed`;
+}, "uploadsSummaryText");
+var uploadsHeading = /* @__PURE__ */ __name((title, { failed, isSettled }, uploads) => {
+  if (!isSettled) return title;
+  if (failed === 0) return "Upload complete";
+  return failed === uploads ? "Upload failed" : "Some uploads failed";
+}, "uploadsHeading");
+var UploadRow = /* @__PURE__ */ __name(({ item }) => {
+  const percent = getUploadItemPercent(item);
+  const { icon, rgb } = UPLOAD_ITEM_ICON[item.status];
+  return /* @__PURE__ */ jsxs("li", { "data-status": item.status, className: "flex items-center gap-1.5 md:gap-2", children: [
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        icon,
+        className: "size-3.5 shrink-0 md:size-4",
+        style: { color: `rgb(${rgb})`, opacity: item.status === "pending" ? 0.4 : 1 }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-primary w-20 shrink-0 truncate text-[9px] md:w-28 md:text-xs", children: item.label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "progressbar",
+        "aria-label": `${item.label} upload`,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": percent,
+        className: "bg-primary/10 h-1 min-w-0 flex-1 overflow-hidden rounded-full",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full rounded-full transition-[width] duration-300",
+            style: { width: `${String(percent)}%`, backgroundColor: `rgb(${rgb})` }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "text-tertiary w-8 shrink-0 text-right text-[9px] tabular-nums md:text-xs", children: [
+      getUploadItemFilesDone(item),
+      "/",
+      item.fileSizes.length
+    ] })
+  ] });
+}, "UploadRow");
+var UploadsBody = /* @__PURE__ */ __name(({ title, description, items, summary, rgb }) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", "aria-live": "polite", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx("p", { className: "line-clamp-1 text-xs font-semibold md:text-sm", style: { color: `rgb(${rgb})` }, children: uploadsHeading(title, summary, items.length) }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-tertiary line-clamp-1 text-[9px]/3 md:text-xs", children: description }),
+    /* @__PURE__ */ jsx("p", { className: "text-tertiary text-[9px]/3 tabular-nums md:text-xs", children: uploadsSummaryText(summary) })
+  ] }),
+  items.length > 1 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: items.map((item) => /* @__PURE__ */ jsx(UploadRow, { item }, item.id)) })
+] }), "UploadsBody");
+var cardConfig = /* @__PURE__ */ __name((type) => {
+  switch (type) {
+    case TOAST_TYPE.success:
+      return { iconName: "solar:check-circle-linear", rgb: GREEN_RGB };
+    case TOAST_TYPE.error:
+      return { iconName: "solar:danger-triangle-linear", rgb: RED_RGB };
+    case TOAST_TYPE.warning:
+      return { iconName: "solar:danger-triangle-linear", rgb: "var(--primary-yellow-rgb)" };
+    case TOAST_TYPE.progress:
+    case TOAST_TYPE.uploads:
+      return { iconName: "", rgb: "var(--primary-rgb)" };
+    case TOAST_TYPE.loading:
+      return { iconName: "beautinique:loading-spin", rgb: "var(--primary-rgb)" };
+    case TOAST_TYPE.default:
+    case TOAST_TYPE.custom:
+    default:
+      return { iconName: "solar:info-circle-outline", rgb: "var(--primary-rgb)" };
+  }
+}, "cardConfig");
+var Toaster = /* @__PURE__ */ __name((props) => {
+  const {
+    className = "",
+    type,
+    icon,
+    buttonProps,
+    isClosable = true,
+    autoClose = true,
+    closeTimer = 5e3
+  } = props;
+  const remove2 = useToastStore((s) => s.remove);
+  const [visible, setVisible] = useState(false);
+  const [mounted, setMounted] = useState(true);
+  const timeoutRef = useRef(null);
+  const uploadsSummary = props.type === TOAST_TYPE.uploads ? getUploadsSummary(props.items) : null;
+  const isUploadsSettled = uploadsSummary?.isSettled ?? false;
+  let resolvedAutoClose = autoClose;
+  let resolvedIsClosable = isClosable;
+  let resolvedCloseTimer = closeTimer;
+  if (TOAST_TYPE.loading === type || TOAST_TYPE.progress === type) {
+    resolvedAutoClose = false;
+    resolvedIsClosable = false;
+  } else if (uploadsSummary) {
+    resolvedAutoClose = isUploadsSettled;
+    resolvedIsClosable = isUploadsSettled;
+    resolvedCloseTimer = uploadsSummary.failed > 0 ? 8e3 : 2500;
+  }
+  const config = uploadsSummary ? { iconName: "", rgb: uploadsRgb(uploadsSummary) } : cardConfig(type);
+  const handleClose = useCallback(() => {
+    setVisible(false);
+    timeoutRef.current = setTimeout(() => {
+      setMounted(false);
+      remove2(props.id);
+    }, 300);
+  }, [remove2, props.id]);
+  useEffect(() => {
+    const enterTimer = setTimeout(() => {
+      setVisible(true);
+    }, 50);
+    let autoTimer = null;
+    if (resolvedAutoClose) {
+      autoTimer = setTimeout(() => {
+        handleClose();
+      }, resolvedCloseTimer);
+    }
+    return () => {
+      clearTimeout(enterTimer);
+      if (autoTimer) clearTimeout(autoTimer);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [resolvedAutoClose, resolvedCloseTimer, handleClose]);
+  if (!mounted) return null;
+  const isCustom = type === TOAST_TYPE.custom;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `rounded-xl border-2 transition-all duration-300 ease-in-out ${visible ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"} ${className}`,
+      style: {
+        borderColor: `rgba(${config.rgb}, 0.2)`,
+        boxShadow: `0 10px 10px 0px rgba(${config.rgb}, 0.1)`
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "bg-secondary-invert flex w-full items-center gap-2 rounded-[10.25px] p-1.5 md:p-2.5 lg:p-3 [&>svg]:size-5 [&>svg]:shrink-0 [&>svg]:md:size-6 [&>svg]:lg:size-7", children: [
+        icon ?? (props.type === TOAST_TYPE.progress ? /* @__PURE__ */ jsx(
+          CircularProgress,
+          {
+            progress: props.progress,
+            style: { strokeColor: `rgb(${config.rgb})` }
+          }
+        ) : uploadsSummary ? /* @__PURE__ */ jsx(
+          CircularProgress,
+          {
+            progress: uploadsSummary.percent,
+            style: { color: `rgb(${config.rgb})` }
+          }
+        ) : /* @__PURE__ */ jsx(Icon, { icon: config.iconName, style: { color: `rgb(${config.rgb})` } })),
+        props.type === TOAST_TYPE.uploads && uploadsSummary ? /* @__PURE__ */ jsx(
+          UploadsBody,
+          {
+            title: props.title,
+            description: props.description,
+            items: props.items,
+            summary: uploadsSummary,
+            rgb: config.rgb
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+            !isCustom && "title" in props && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "line-clamp-1 text-xs font-semibold md:text-sm",
+                style: { color: `rgb(${config.rgb})` },
+                children: props.title
+              }
+            ),
+            !isCustom && "description" in props && /* @__PURE__ */ jsx("p", { className: "text-tertiary line-clamp-2 text-[9px]/3 whitespace-pre-line md:text-xs", children: props.description }),
+            isCustom && "children" in props && props.children
+          ] }),
+          buttonProps && type !== TOAST_TYPE.loading && type !== TOAST_TYPE.progress && /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...buttonProps,
+              content: buttonProps.content ?? "Try Again",
+              pattern: buttonProps.pattern ?? "secondary",
+              className: `w-fit! rounded-md! px-2! py-1! pt-1.5! text-[10px] whitespace-nowrap md:text-xs! ${buttonProps.className ?? ""}`
+            }
+          )
+        ] }),
+        resolvedIsClosable && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "lucide:x",
+            className: "text-primary cursor-pointer md:size-5",
+            onClick: handleClose
+          }
+        )
+      ] })
+    }
+  );
+}, "Toaster");
+var ToastContainer = /* @__PURE__ */ __name(() => {
+  const toasts = useToastStore((s) => s.toasts);
+  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)) });
+}, "ToastContainer");
+
+export { TOAST_ICON_NAMES, ToastContainer, Toaster, createUploadsToast, getFormDataFiles, getUploadItemFilesDone, getUploadItemPercent, getUploadsSummary, isUploadItemSettled, runUploadsInToast, toaster, useToastStore, withProgressToast, withUploadsToast };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map