elseware-ui 2.36.5 → 2.36.6

package/dist/index.d.mts

@@ -2204,6 +2204,7 @@ declare const ThemeSwitch: () => React__default.JSX.Element | null;
 
 declare const ShapeSwitch: () => React__default.JSX.Element;
 
+type AsyncLoadingType = "spinner" | "skeleton";
 interface AsyncComponentWrapperProps {
     children: React__default.ReactNode;
     isLoading?: boolean;
@@ -2215,10 +2216,14 @@ interface AsyncComponentWrapperProps {
     isEmpty?: boolean;
     loadingText?: string;
     fetchingText?: string;
+    emptyTitle?: string;
     emptyText?: string;
-    loadingType?: "spinner" | "skeleton";
+    errorTitle?: string;
+    retryText?: string;
+    loadingType?: AsyncLoadingType;
     skeletonCount?: number;
     skeletonClassName?: string;
+    skeletonWrapperClassName?: string;
     spinnerProps?: Partial<SpinnerProps>;
     fetchingSpinnerProps?: Partial<SpinnerProps>;
     loadingFallback?: React__default.ReactNode;
@@ -2229,8 +2234,10 @@ interface AsyncComponentWrapperProps {
     errorFormatter?: (error: unknown) => string;
     className?: string;
     contentClassName?: string;
+    stateClassName?: string;
 }
-declare function AsyncComponentWrapper({ children, isLoading, isFetching, isSuccess, isError, isUninitialized, error, isEmpty, loadingText, fetchingText, emptyText, loadingType, skeletonCount, skeletonClassName, spinnerProps, fetchingSpinnerProps, loadingFallback, emptyFallback, errorFallback, showFetchingIndicator, onRetry, errorFormatter, className, contentClassName, }: AsyncComponentWrapperProps): React__default.JSX.Element | null;
+
+declare function AsyncComponentWrapper({ children, isLoading, isFetching, isSuccess, isError, isUninitialized, error, isEmpty, loadingText, fetchingText, emptyTitle, emptyText, errorTitle, retryText, loadingType, skeletonCount, skeletonClassName, skeletonWrapperClassName, spinnerProps, fetchingSpinnerProps, loadingFallback, emptyFallback, errorFallback, showFetchingIndicator, onRetry, errorFormatter, className, contentClassName, stateClassName, }: AsyncComponentWrapperProps): React__default.JSX.Element | null;
 declare const _default: React__default.MemoExoticComponent<typeof AsyncComponentWrapper>;
 
 interface GlowWrapperProps {

package/dist/index.d.ts

@@ -2204,6 +2204,7 @@ declare const ThemeSwitch: () => React__default.JSX.Element | null;
 
 declare const ShapeSwitch: () => React__default.JSX.Element;
 
+type AsyncLoadingType = "spinner" | "skeleton";
 interface AsyncComponentWrapperProps {
     children: React__default.ReactNode;
     isLoading?: boolean;
@@ -2215,10 +2216,14 @@ interface AsyncComponentWrapperProps {
     isEmpty?: boolean;
     loadingText?: string;
     fetchingText?: string;
+    emptyTitle?: string;
     emptyText?: string;
-    loadingType?: "spinner" | "skeleton";
+    errorTitle?: string;
+    retryText?: string;
+    loadingType?: AsyncLoadingType;
     skeletonCount?: number;
     skeletonClassName?: string;
+    skeletonWrapperClassName?: string;
     spinnerProps?: Partial<SpinnerProps>;
     fetchingSpinnerProps?: Partial<SpinnerProps>;
     loadingFallback?: React__default.ReactNode;
@@ -2229,8 +2234,10 @@ interface AsyncComponentWrapperProps {
     errorFormatter?: (error: unknown) => string;
     className?: string;
     contentClassName?: string;
+    stateClassName?: string;
 }
-declare function AsyncComponentWrapper({ children, isLoading, isFetching, isSuccess, isError, isUninitialized, error, isEmpty, loadingText, fetchingText, emptyText, loadingType, skeletonCount, skeletonClassName, spinnerProps, fetchingSpinnerProps, loadingFallback, emptyFallback, errorFallback, showFetchingIndicator, onRetry, errorFormatter, className, contentClassName, }: AsyncComponentWrapperProps): React__default.JSX.Element | null;
+
+declare function AsyncComponentWrapper({ children, isLoading, isFetching, isSuccess, isError, isUninitialized, error, isEmpty, loadingText, fetchingText, emptyTitle, emptyText, errorTitle, retryText, loadingType, skeletonCount, skeletonClassName, skeletonWrapperClassName, spinnerProps, fetchingSpinnerProps, loadingFallback, emptyFallback, errorFallback, showFetchingIndicator, onRetry, errorFormatter, className, contentClassName, stateClassName, }: AsyncComponentWrapperProps): React__default.JSX.Element | null;
 declare const _default: React__default.MemoExoticComponent<typeof AsyncComponentWrapper>;
 
 interface GlowWrapperProps {

package/dist/index.js

@@ -21068,6 +21068,60 @@ function UnderConstructionBanner({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-5", children: /* @__PURE__ */ jsxRuntime.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,
+  onAction,
+  className
+}) {
+  const isError = type === "error";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex min-h-[220px] w-full items-center justify-center rounded-xl border p-6",
+        "border-eui-dark-300/10 bg-white/70 shadow-sm",
+        "dark:border-eui-light-400/10 dark:bg-eui-dark-900/40",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-md flex-col items-center gap-4 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.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-dark-500/10 text-eui-dark-500 dark:bg-eui-light-500/10 dark:text-eui-light-400"
+            ),
+            children: isError ? "!" : "\u2013"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-eui-dark-900 dark:text-eui-light-50", children: title }),
+          isError ? /* @__PURE__ */ jsxRuntime.jsx(FormResponse_default, { text: message, variant: "danger" }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-eui-dark-500 dark:text-eui-light-400", children: message })
+        ] }),
+        onAction && actionText && /* @__PURE__ */ jsxRuntime.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__default.default.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;
@@ -21102,10 +21156,14 @@ 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,
@@ -21115,7 +21173,8 @@ function AsyncComponentWrapper({
   onRetry,
   errorFormatter,
   className,
-  contentClassName
+  contentClassName,
+  stateClassName
 }) {
   const errorMessage = React2.useMemo(() => {
     if (!isError) return "";
@@ -21125,14 +21184,14 @@ function AsyncComponentWrapper({
   const renderLoading = () => {
     if (loadingFallback) return loadingFallback;
     if (loadingType === "skeleton") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 py-4", children: Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: skeletonClassName }, index)) });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(skeletonWrapperClassName), children: Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: skeletonClassName }, index)) });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Spinner_default,
       {
         centered: true,
         label: loadingText,
-        type: "border",
+        type: "bars",
         size: "md",
         variant: "primary",
         ...spinnerProps
@@ -21143,25 +21202,31 @@ function AsyncComponentWrapper({
     if (typeof errorFallback === "function") {
       return errorFallback(errorMessage);
     }
-    if (errorFallback) {
-      return errorFallback;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(FormResponse_default, { text: errorMessage, variant: "danger" }),
-      onRetry && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onRetry,
-          className: "mt-3 rounded-md border px-4 py-2",
-          children: "Retry"
-        }
-      )
-    ] });
+    if (errorFallback) return errorFallback;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AsyncStateCard_default,
+      {
+        type: "error",
+        title: errorTitle,
+        message: errorMessage,
+        actionText: onRetry ? retryText : void 0,
+        actionLoading: isFetching,
+        onAction: onRetry,
+        className: stateClassName
+      }
+    );
   };
   const renderEmpty = () => {
     if (emptyFallback) return emptyFallback;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-10 text-center text-gray-500", children: emptyText });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AsyncStateCard_default,
+      {
+        type: "empty",
+        title: emptyTitle,
+        message: emptyText,
+        className: stateClassName
+      }
+    );
   };
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "aria-live": "polite", children: renderLoading() });
@@ -21176,12 +21241,12 @@ function AsyncComponentWrapper({
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    showFetchingIndicator && isFetching && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-2 text-sm text-gray-500", children: [
+    showFetchingIndicator && isFetching && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-2 text-sm text-eui-dark-500 dark:text-eui-light-400", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Spinner_default,
         {
           size: "xs",
-          type: "border",
+          type: "bars",
           variant: "primary",
           showLabel: false,
           ariaLabel: fetchingText,