elseware-ui 2.36.5 → 2.36.7

package/dist/index.mjs

@@ -21040,6 +21040,59 @@ function UnderConstructionBanner({
 }) {
   return /* @__PURE__ */ jsx("div", { className: "my-5", children: /* @__PURE__ */ jsx(Info_default, { children: text ? text : "This component is currently under construction and will be made available soon" }) });
 }
+function AsyncStateCard({
+  type,
+  title,
+  message,
+  actionText,
+  actionLoading = false,
+  onAction,
+  className
+}) {
+  const isError = type === "error";
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-[240px] w-full items-center justify-center py-6", children: /* @__PURE__ */ jsx(
+    Card_default,
+    {
+      bgVariant: "default",
+      borderVariant: isError ? "danger" : "secondary",
+      shape: "softRoundedSquare",
+      hoverAnimation: "softLift",
+      styles: cn("w-full max-w-xl", className),
+      children: /* @__PURE__ */ jsx(CardContent_default, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-5 px-4 py-8 text-center", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-12 w-12 items-center justify-center rounded-full text-xl font-bold",
+              isError ? "bg-eui-danger-500/10 text-eui-danger-500" : "bg-eui-secondary-500/10 text-eui-secondary-500"
+            ),
+            children: isError ? "!" : "\u2013"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-eui-dark-900 dark:text-eui-light-50", children: title }),
+          isError ? /* @__PURE__ */ jsx(FormResponse_default, { text: message, variant: "danger" }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-eui-dark-500 dark:text-eui-light-400", children: message })
+        ] }),
+        onAction && actionText && /* @__PURE__ */ jsx(
+          Button_default,
+          {
+            type: "button",
+            text: actionText,
+            loading: actionLoading,
+            disabled: actionLoading,
+            onClick: onAction,
+            variant: isError ? "danger" : "primary",
+            appearance: "solid",
+            size: "sm"
+          }
+        )
+      ] }) })
+    }
+  ) });
+}
+var AsyncStateCard_default = React2.memo(AsyncStateCard);
+
+// src/components/utils/async-component-wrapper/asyncError.utils.ts
 var getDefaultErrorMessage = (error) => {
   if (!error) return "Something went wrong.";
   if (typeof error === "string") return error;
@@ -21074,37 +21127,44 @@ function AsyncComponentWrapper({
   isEmpty = false,
   loadingText = "Loading...",
   fetchingText = "Updating...",
+  emptyTitle = "No data found",
   emptyText = "No data available.",
+  errorTitle = "Something went wrong",
+  retryText = "Retry",
   loadingType = "spinner",
   skeletonCount = 3,
   skeletonClassName = "h-24 w-full rounded-md",
+  skeletonWrapperClassName = "flex flex-col gap-3 py-4",
   spinnerProps,
   fetchingSpinnerProps,
   loadingFallback,
   emptyFallback,
   errorFallback,
   showFetchingIndicator = true,
+  showLoadingOnRetry = true,
   onRetry,
   errorFormatter,
   className,
-  contentClassName
+  contentClassName,
+  stateClassName
 }) {
   const errorMessage = useMemo(() => {
     if (!isError) return "";
     return errorFormatter ? errorFormatter(error) : getDefaultErrorMessage(error);
   }, [isError, error, errorFormatter]);
   const hasSuccess = isSuccess ?? (!isLoading && !isError && !isUninitialized);
+  const shouldShowLoading = isLoading || showLoadingOnRetry && isFetching && isError;
   const renderLoading = () => {
     if (loadingFallback) return loadingFallback;
     if (loadingType === "skeleton") {
-      return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 py-4", children: Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: skeletonClassName }, index)) });
+      return /* @__PURE__ */ jsx("div", { className: cn(skeletonWrapperClassName), children: Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: skeletonClassName }, index)) });
     }
     return /* @__PURE__ */ jsx(
       Spinner_default,
       {
         centered: true,
         label: loadingText,
-        type: "border",
+        type: "bars",
         size: "md",
         variant: "primary",
         ...spinnerProps
@@ -21115,27 +21175,33 @@ function AsyncComponentWrapper({
     if (typeof errorFallback === "function") {
       return errorFallback(errorMessage);
     }
-    if (errorFallback) {
-      return errorFallback;
-    }
-    return /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
-      /* @__PURE__ */ jsx(FormResponse_default, { text: errorMessage, variant: "danger" }),
-      onRetry && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onRetry,
-          className: "mt-3 rounded-md border px-4 py-2",
-          children: "Retry"
-        }
-      )
-    ] });
+    if (errorFallback) return errorFallback;
+    return /* @__PURE__ */ jsx(
+      AsyncStateCard_default,
+      {
+        type: "error",
+        title: errorTitle,
+        message: errorMessage,
+        actionText: onRetry ? retryText : void 0,
+        actionLoading: false,
+        onAction: onRetry,
+        className: stateClassName
+      }
+    );
   };
   const renderEmpty = () => {
     if (emptyFallback) return emptyFallback;
-    return /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-gray-500", children: emptyText });
+    return /* @__PURE__ */ jsx(
+      AsyncStateCard_default,
+      {
+        type: "empty",
+        title: emptyTitle,
+        message: emptyText,
+        className: stateClassName
+      }
+    );
   };
-  if (isLoading) {
+  if (shouldShowLoading) {
     return /* @__PURE__ */ jsx("div", { className, "aria-live": "polite", children: renderLoading() });
   }
   if (isError) {
@@ -21148,12 +21214,12 @@ function AsyncComponentWrapper({
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { className, children: [
-    showFetchingIndicator && isFetching && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2 text-sm text-gray-500", children: [
+    showFetchingIndicator && isFetching && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2 text-sm text-eui-dark-500 dark:text-eui-light-400", children: [
       /* @__PURE__ */ jsx(
         Spinner_default,
         {
           size: "xs",
-          type: "border",
+          type: "bars",
           variant: "primary",
           showLabel: false,
           ariaLabel: fetchingText,