@sudobility/building_blocks 0.0.77 → 0.0.79

package/dist/{SafeSubscriptionContext-C2Nxvjir.js → SafeSubscriptionContext-BN1cInbb.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useLayoutEffect, useState, createContext, memo, useMemo, useCallback, Suspense, useRef, useEffect, useContext } from "react";
+import React__default, { useLayoutEffect, useState, createContext, memo, useMemo, useCallback, useContext, useEffect, Suspense, useRef } from "react";
 import { Link, useLocation, BrowserRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { HelmetProvider } from "react-helmet-async";
@@ -6449,6 +6449,191 @@ function zl({
   );
   return /* @__PURE__ */ jsx(qr.Provider, { value: u, children: e });
 }
+const vn = {
+  success: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "h-5 w-5",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M5 13l4 4L19 7"
+        }
+      )
+    }
+  ),
+  error: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "h-5 w-5",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M6 18L18 6M6 6l12 12"
+        }
+      )
+    }
+  ),
+  warning: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "h-5 w-5",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+        }
+      )
+    }
+  ),
+  info: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "h-5 w-5",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        }
+      )
+    }
+  )
+}, wn = {
+  success: {
+    container: "bg-green-50 border-green-200 dark:bg-green-900/30 dark:border-green-800",
+    icon: "text-green-500 dark:text-green-400",
+    text: "text-green-800 dark:text-green-200"
+  },
+  error: {
+    container: "bg-red-50 border-red-200 dark:bg-red-900/30 dark:border-red-800",
+    icon: "text-red-500 dark:text-red-400",
+    text: "text-red-800 dark:text-red-200"
+  },
+  warning: {
+    container: "bg-yellow-50 border-yellow-200 dark:bg-yellow-900/30 dark:border-yellow-800",
+    icon: "text-yellow-500 dark:text-yellow-400",
+    text: "text-yellow-800 dark:text-yellow-200"
+  },
+  info: {
+    container: "bg-blue-50 border-blue-200 dark:bg-blue-900/30 dark:border-blue-800",
+    icon: "text-blue-500 dark:text-blue-400",
+    text: "text-blue-800 dark:text-blue-200"
+  }
+};
+function kn({
+  toast: e,
+  onDismiss: t
+}) {
+  const [r, n] = useState(false), [o, s] = useState(false), { type: i, message: c, id: d } = e, l = wn[i];
+  useEffect(() => {
+    const u = setTimeout(() => n(true), 10);
+    return () => clearTimeout(u);
+  }, []);
+  const g = () => {
+    s(true), setTimeout(() => {
+      t(d);
+    }, 200);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `
+        flex items-center gap-3 px-4 py-3 rounded-lg border shadow-lg
+        transition-all duration-200 ease-out
+        ${l.container}
+        ${r && !o ? "opacity-100 translate-x-0" : "opacity-0 translate-x-4"}
+      `,
+      role: "alert",
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: l.icon, children: vn[i] }),
+        /* @__PURE__ */ jsx("span", { className: `flex-1 text-sm font-medium ${l.text}`, children: c }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: g,
+            className: `
+          p-1 rounded-md transition-colors
+          hover:bg-black/10 dark:hover:bg-white/10
+          ${l.text}
+        `,
+            "aria-label": "Dismiss notification",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "h-4 w-4",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M6 18L18 6M6 6l12 12"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+const Nn = {
+  "top-right": "top-4 right-4",
+  "top-left": "top-4 left-4",
+  "bottom-right": "bottom-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "top-center": "top-4 left-1/2 -translate-x-1/2",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
+};
+function Bl({
+  toasts: e,
+  onDismiss: t,
+  position: r = "bottom-right"
+}) {
+  return e.length === 0 ? null : /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `fixed z-50 flex flex-col gap-2 max-w-sm w-full ${Nn[r]}`,
+      "aria-label": "Notifications",
+      children: e.map((n) => /* @__PURE__ */ jsx(kn, { toast: n, onDismiss: t }, n.id))
+    }
+  );
+}
+function Fl() {
+  const e = useContext(qr);
+  if (!e)
+    throw new Error("useToast must be used within a ToastProvider");
+  return e;
+}
 var gt = {}, B = {}, Kt;
 function Me() {
   if (Kt) return B;
@@ -10143,6 +10328,18 @@ function createDefaultThemeProvider(storageKeyPrefix) {
 function DefaultToastProvider({ children }) {
   return /* @__PURE__ */ jsx(zl, { children });
 }
+function DefaultToastContainer() {
+  const { toasts, removeToast } = Fl();
+  if (toasts.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    Bl,
+    {
+      toasts,
+      onDismiss: removeToast,
+      position: "bottom-right"
+    }
+  );
+}
 function SudobilityApp({
   children,
   i18n: i18nInstance,
@@ -10162,11 +10359,12 @@ function SudobilityApp({
   const PageTrackerComponent = PageTrackerProp === false ? null : PageTrackerProp ?? DefaultPageTracker;
   const ThemeProviderComponent = ThemeProviderProp ?? createDefaultThemeProvider(storageKeyPrefix);
   const ToastProviderComponent = ToastProviderProp ?? DefaultToastProvider;
+  const ToastContainerComponent = ToastContainer ?? DefaultToastContainer;
   const queryClientInstance = queryClient ?? getDefaultQueryClient();
   let routerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     PageTrackerComponent && /* @__PURE__ */ jsx(PageTrackerComponent, {}),
     /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingFallback, {}), children }),
-    ToastContainer && /* @__PURE__ */ jsx(ToastContainer, {}),
+    /* @__PURE__ */ jsx(ToastContainerComponent, {}),
     showInfoBanner && /* @__PURE__ */ jsx(InfoBanner, {})
   ] });
   routerContent = /* @__PURE__ */ jsx(BrowserRouter, { children: routerContent });
@@ -10201,11 +10399,14 @@ function useSafeSubscription() {
   return useContext(SafeSubscriptionContext);
 }
 export {
+  Bl as B,
+  Fl as F,
   SudobilityApp as S,
   SafeSubscriptionContext as a,
   STUB_SUBSCRIPTION_VALUE as b,
   getI18n as g,
   initializeI18n as i,
-  useSafeSubscription as u
+  useSafeSubscription as u,
+  zl as z
 };
-//# sourceMappingURL=SafeSubscriptionContext-C2Nxvjir.js.map
+//# sourceMappingURL=SafeSubscriptionContext-BN1cInbb.js.map