@juv/codego-react-ui 3.5.21 → 3.6.1

package/dist/index.js

@@ -27,6 +27,7 @@ function FloatingPortal({ children }) {
 
 // src/components/ui/button.tsx
 import * as React from "react";
+import * as ReactDOM2 from "react-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Button = React.forwardRef(
   ({
@@ -105,6 +106,8 @@ var Button = React.forwardRef(
     confirmBeforeClickModalTitle,
     confirmBeforeClickModalContent,
     confirmBeforeClickFooterAction,
+    onConfirm,
+    onCancel,
     href,
     target,
     as = "button",
@@ -200,11 +203,13 @@ var Button = React.forwardRef(
     };
     function handleConfirmProceed() {
       setConfirmOpen(false);
+      onConfirm?.();
       onClick?.(pendingEvent.current ?? void 0);
       pendingEvent.current = null;
     }
     function handleConfirmCancel() {
       setConfirmOpen(false);
+      onCancel?.();
       pendingEvent.current = null;
     }
     const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -232,46 +237,49 @@ var Button = React.forwardRef(
       tabIndex,
       "data-testid": testID
     };
-    const confirmModal = confirmBeforeClick && confirmOpen ? /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "fixed inset-0 z-50 flex items-center justify-center",
-        onClick: handleConfirmCancel,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm" }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "relative z-10 w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-2xl",
-              onClick: (e) => e.stopPropagation(),
-              children: [
-                /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-foreground mb-2", children: confirmBeforeClickModalTitle ?? "Are you sure?" }),
-                confirmBeforeClickModalContent && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mb-5", children: confirmBeforeClickModalContent }),
-                /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-2 mt-4", children: confirmBeforeClickFooterAction ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: handleConfirmCancel,
-                      className: "inline-flex items-center justify-center rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-accent transition-colors",
-                      children: "Cancel"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: handleConfirmProceed,
-                      className: "inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary-hover transition-colors",
-                      children: "Proceed"
-                    }
-                  )
-                ] }) })
-              ]
-            }
-          )
-        ]
-      }
+    const confirmModal = confirmBeforeClick && confirmOpen ? ReactDOM2.createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "fixed inset-0 z-[9999] flex items-center justify-center",
+          onClick: handleConfirmCancel,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm" }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "relative z-10 w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-2xl",
+                onClick: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-foreground mb-2", children: confirmBeforeClickModalTitle ?? "Are you sure?" }),
+                  confirmBeforeClickModalContent && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mb-5", children: confirmBeforeClickModalContent }),
+                  /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-2 mt-4", children: confirmBeforeClickFooterAction ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleConfirmCancel,
+                        className: "inline-flex items-center justify-center rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-accent transition-colors",
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleConfirmProceed,
+                        className: "inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary-hover transition-colors",
+                        children: "Proceed"
+                      }
+                    )
+                  ] }) })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      document.body
     ) : null;
     if (Element === "a") {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1435,69 +1443,9 @@ function Breadcrumb({
 
 // src/components/ui/bulletin-board.tsx
 import * as React8 from "react";
-import { createPortal as createPortal2 } from "react-dom";
+import { createPortal as createPortal3 } from "react-dom";
 import axios2 from "axios";
 import { Search, Pin, Tag, MoreHorizontal as MoreHorizontal2, AlertCircle, AlertTriangle, Info, X, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, Pencil, Trash, Loader2 } from "lucide-react";
-
-// src/components/tools/decryptPayload.ts
-import CryptoJS from "crypto-js";
-function getLaravelSecretKey() {
-  const viteKey = (() => {
-    try {
-      return new Function("return import.meta.env")();
-    } catch {
-      return void 0;
-    }
-  })()?.VITE_LARAVEL_KEY;
-  const legacyKey = globalThis?.process?.env?.REACT_APP_LARAVEL_KEY;
-  const windowKey = globalThis?.__LARAVEL_KEY__;
-  const key = viteKey || legacyKey || windowKey;
-  if (!key) {
-    throw new Error("Missing Laravel decryption key. Set VITE_LARAVEL_KEY in your .env or inject window.__LARAVEL_KEY__ via Blade.");
-  }
-  return key;
-}
-function parseLaravelKey(secretKey) {
-  if (secretKey.startsWith("base64:")) {
-    return CryptoJS.enc.Base64.parse(secretKey.slice("base64:".length));
-  }
-  return CryptoJS.enc.Utf8.parse(secretKey);
-}
-function parseLaravelEncryptedPayload(payload) {
-  let jsonStr = payload;
-  try {
-    jsonStr = atob(payload);
-  } catch {
-  }
-  return JSON.parse(jsonStr);
-}
-function decryptLaravelPayload(payload, secretKey) {
-  const resolvedKey = secretKey ?? getLaravelSecretKey();
-  const parsed = parseLaravelEncryptedPayload(payload);
-  if (parsed.tag) {
-    throw new Error("Unsupported Laravel cipher (AEAD tag present). Expected AES-*-CBC payload.");
-  }
-  const key = parseLaravelKey(resolvedKey);
-  const expectedMac = CryptoJS.HmacSHA256(parsed.iv + parsed.value, key).toString(CryptoJS.enc.Hex);
-  if (expectedMac !== parsed.mac) {
-    throw new Error("Invalid payload MAC (wrong key or tampered payload).");
-  }
-  const iv = CryptoJS.enc.Base64.parse(parsed.iv);
-  const ciphertext = CryptoJS.enc.Base64.parse(parsed.value);
-  const cipherParams = CryptoJS.lib.CipherParams.create({ ciphertext });
-  const decrypted = CryptoJS.AES.decrypt(cipherParams, key, {
-    iv,
-    mode: CryptoJS.mode.CBC,
-    padding: CryptoJS.pad.Pkcs7
-  });
-  const plaintext = decrypted.toString(CryptoJS.enc.Utf8);
-  if (!plaintext) {
-    throw new Error("Decryption produced empty plaintext (wrong key/cipher).");
-  }
-  return JSON.parse(plaintext);
-}
-
-// src/components/ui/bulletin-board.tsx
 import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var PRIORITY_CONFIG = {
   urgent: { label: "Urgent", icon: /* @__PURE__ */ jsx10(AlertCircle, { className: "h-3 w-3" }), badge: "error" },
@@ -1527,82 +1475,13 @@ function AuthorAvatar({ item }) {
   }
   return null;
 }
-function useServerBulletin({
-  url,
-  params,
-  encrypt,
-  key,
-  decryptPayloadLog,
-  transform
-}) {
-  const [items, setItems] = React8.useState([]);
-  const [currentPage, setCurrentPage] = React8.useState(1);
-  const [pagination, setPagination] = React8.useState(null);
-  const [loading, setLoading] = React8.useState(false);
-  const [error, setError] = React8.useState(null);
-  const [tick, setTick] = React8.useState(0);
-  React8.useEffect(() => {
-    let cancelled = false;
-    setLoading(true);
-    setError(null);
-    axios2.get(url, { params: { ...params, page: currentPage } }).then(({ data: res }) => {
-      if (cancelled) return;
-      let payload;
-      try {
-        payload = encrypt ? decryptLaravelPayload(res, key) : res;
-      } catch (decryptErr) {
-        console.error("[useServerBulletin] decryption failed:", decryptErr?.message ?? decryptErr);
-        if (!cancelled) setError(decryptErr?.message ?? "Decryption failed");
-        return;
-      }
-      if (encrypt && decryptPayloadLog) console.log("[useServerBulletin] decrypted:", payload);
-      const rows = Array.isArray(payload) ? payload : payload.data ?? [];
-      setItems(transform ? rows.map(transform) : rows);
-      if (!Array.isArray(payload)) {
-        const rawTotal = payload.total;
-        const rawPerPage = payload.per_page;
-        const rawLastPage = payload.last_page;
-        const lastPage = rawLastPage ?? Math.ceil(rawTotal / rawPerPage);
-        const pg = payload.pagination ?? {
-          first_page_url: payload.first_page_url ?? `${url}?page=1`,
-          last_page_url: payload.last_page_url ?? `${url}?page=${lastPage}`,
-          last_page: lastPage,
-          next_page_url: payload.next_page_url !== void 0 ? payload.next_page_url : currentPage < lastPage ? `${url}?page=${currentPage + 1}` : null,
-          prev_page_url: payload.prev_page_url !== void 0 ? payload.prev_page_url : currentPage > 1 ? `${url}?page=${currentPage - 1}` : null,
-          per_page: rawPerPage,
-          total: rawTotal,
-          links: payload.links ?? []
-        };
-        setPagination(pg);
-      }
-    }).catch((err) => {
-      if (cancelled) return;
-      setError(err?.response?.data?.message ?? err.message ?? "Request failed");
-    }).finally(() => {
-      if (!cancelled) setLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [url, currentPage, tick, JSON.stringify(params), encrypt, decryptPayloadLog]);
-  return {
-    items,
-    currentPage,
-    pagination,
-    serverPagination: pagination ? { pagination, currentPage, goToPage: (p) => setCurrentPage(p) } : null,
-    loading,
-    error,
-    goToPage: (p) => setCurrentPage(p),
-    reload: () => setTick((t) => t + 1)
-  };
-}
-function BulletinPreview({ item, onClose, onEdit, onDelete, onView, customActions }) {
+function BulletinPreview({ item, onClose, onEdit, onDelete, onView, customActions, headerAction, footerAction }) {
   const priority = item.priority ? PRIORITY_CONFIG[item.priority] : null;
-  return createPortal2(
+  return createPortal3(
     /* @__PURE__ */ jsx10(
       "div",
       {
-        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+        className: "fixed inset-0 z-50 flex glass items-center justify-center p-4",
         style: { background: "rgba(0,0,0,0.55)" },
         onMouseDown: (e) => {
           if (e.target === e.currentTarget) onClose();
@@ -1615,7 +1494,8 @@ function BulletinPreview({ item, onClose, onEdit, onDelete, onView, customAction
                 " Pinned"
               ] }),
               priority && /* @__PURE__ */ jsx10(Badge, { variant: priority.badge, size: "sm", icon: priority.icon ?? void 0, children: priority.label }),
-              item.category && /* @__PURE__ */ jsx10(Badge, { variant: "outline", size: "sm", children: item.category })
+              item.category && /* @__PURE__ */ jsx10(Badge, { variant: "outline", size: "sm", children: item.category }),
+              headerAction
             ] }),
             /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1 shrink-0", children: [
               onEdit && /* @__PURE__ */ jsx10(
@@ -1714,6 +1594,7 @@ function BulletinPreview({ item, onClose, onEdit, onDelete, onView, customAction
               ] })
             ] }) }),
             /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+              footerAction,
               onEdit && /* @__PURE__ */ jsxs9(
                 "button",
                 {
@@ -1775,7 +1656,7 @@ function BulletinDeleteConfirm({
       setLoading(false);
     }
   };
-  return createPortal2(
+  return createPortal3(
     /* @__PURE__ */ jsx10(
       "div",
       {
@@ -1845,7 +1726,7 @@ function BulletinEditModal({
       setLoading(false);
     }
   };
-  return createPortal2(
+  return createPortal3(
     /* @__PURE__ */ jsx10(
       "div",
       {
@@ -2108,6 +1989,9 @@ function BulletinBoard({
   deleteBaseUrl,
   deleteIdKey = "id",
   serverPagination,
+  footerAction,
+  headerPreviewAction,
+  footerPreviewAction,
   className
 }) {
   const [previewItem, setPreviewItem] = React8.useState(null);
@@ -2192,6 +2076,7 @@ function BulletinBoard({
       /* @__PURE__ */ jsx10(Pin, { className: "h-8 w-8 opacity-20" }),
       emptyMessage
     ] }) : layout === "list" ? /* @__PURE__ */ jsx10("div", { className: "flex flex-col gap-3", children: filtered.map((item) => /* @__PURE__ */ jsx10(BulletinCard, { item, variant, layout: "list", onClick: handleCardClick }, item.id)) }) : layout === "masonry" ? /* @__PURE__ */ jsx10("div", { className: cn("gap-4", COLS_CLASS[columns]), style: { display: "grid", gridTemplateRows: "masonry" }, children: filtered.map((item) => /* @__PURE__ */ jsx10(BulletinCard, { item, variant, layout: "masonry", onClick: handleCardClick }, item.id)) }) : /* @__PURE__ */ jsx10("div", { className: cn("grid gap-4", COLS_CLASS[columns]), children: filtered.map((item) => /* @__PURE__ */ jsx10(BulletinCard, { item, variant, layout: "grid", onClick: handleCardClick }, item.id)) }),
+    footerAction && /* @__PURE__ */ jsx10("div", { children: footerAction }),
     serverPagination && (() => {
       const { pagination, currentPage: cp, goToPage } = serverPagination;
       const totalPages = pagination.last_page ?? Math.ceil(pagination.total / pagination.per_page);
@@ -2268,7 +2153,9 @@ function BulletinBoard({
           setDeleteItem(item);
         } : onDelete ? (item) => {
           onDelete(item);
-        } : void 0
+        } : void 0,
+        footerAction: footerPreviewAction ? footerPreviewAction(previewItem) : void 0,
+        headerAction: headerPreviewAction
       }
     ),
     editItem && editBaseUrl && editFields && /* @__PURE__ */ jsx10(
@@ -3741,7 +3628,67 @@ function MetricRow({ items, divided = true, className }) {
 
 // src/components/ui/data-grid.tsx
 import * as React29 from "react";
-import { createPortal as createPortal4 } from "react-dom";
+import { createPortal as createPortal5 } from "react-dom";
+
+// src/components/tools/decryptPayload.ts
+import CryptoJS from "crypto-js";
+function getLaravelSecretKey() {
+  const viteKey = (() => {
+    try {
+      return new Function("return import.meta.env")();
+    } catch {
+      return void 0;
+    }
+  })()?.VITE_LARAVEL_KEY;
+  const legacyKey = globalThis?.process?.env?.REACT_APP_LARAVEL_KEY;
+  const windowKey = globalThis?.__LARAVEL_KEY__;
+  const key = viteKey || legacyKey || windowKey;
+  if (!key) {
+    throw new Error("Missing Laravel decryption key. Set VITE_LARAVEL_KEY in your .env or inject window.__LARAVEL_KEY__ via Blade.");
+  }
+  return key;
+}
+function parseLaravelKey(secretKey) {
+  if (secretKey.startsWith("base64:")) {
+    return CryptoJS.enc.Base64.parse(secretKey.slice("base64:".length));
+  }
+  return CryptoJS.enc.Utf8.parse(secretKey);
+}
+function parseLaravelEncryptedPayload(payload) {
+  let jsonStr = payload;
+  try {
+    jsonStr = atob(payload);
+  } catch {
+  }
+  return JSON.parse(jsonStr);
+}
+function decryptLaravelPayload(payload, secretKey) {
+  const resolvedKey = secretKey ?? getLaravelSecretKey();
+  const parsed = parseLaravelEncryptedPayload(payload);
+  if (parsed.tag) {
+    throw new Error("Unsupported Laravel cipher (AEAD tag present). Expected AES-*-CBC payload.");
+  }
+  const key = parseLaravelKey(resolvedKey);
+  const expectedMac = CryptoJS.HmacSHA256(parsed.iv + parsed.value, key).toString(CryptoJS.enc.Hex);
+  if (expectedMac !== parsed.mac) {
+    throw new Error("Invalid payload MAC (wrong key or tampered payload).");
+  }
+  const iv = CryptoJS.enc.Base64.parse(parsed.iv);
+  const ciphertext = CryptoJS.enc.Base64.parse(parsed.value);
+  const cipherParams = CryptoJS.lib.CipherParams.create({ ciphertext });
+  const decrypted = CryptoJS.AES.decrypt(cipherParams, key, {
+    iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7
+  });
+  const plaintext = decrypted.toString(CryptoJS.enc.Utf8);
+  if (!plaintext) {
+    throw new Error("Decryption produced empty plaintext (wrong key/cipher).");
+  }
+  return JSON.parse(plaintext);
+}
+
+// src/components/ui/data-grid.tsx
 import axios4 from "axios";
 import { ChevronUp as ChevronUp2, ChevronDown as ChevronDown5, ChevronsUpDown as ChevronsUpDown2, ChevronLeft as ChevronLeft7, ChevronRight as ChevronRight9, Search as Search6, Settings2, Check as Check5, Eye as Eye3, Pencil as Pencil3, Trash as Trash4, Loader2 as Loader23, X as X10 } from "lucide-react";
 
@@ -6364,7 +6311,7 @@ function NotificationBanner({
 
 // src/components/ui/table.tsx
 import * as React28 from "react";
-import { createPortal as createPortal3 } from "react-dom";
+import { createPortal as createPortal4 } from "react-dom";
 import axios3 from "axios";
 import { ChevronLeft as ChevronLeft6, ChevronRight as ChevronRight8, Search as Search5, Trash2 as Trash22, ChevronsUpDown, ChevronUp, ChevronDown as ChevronDown4, X as X9, Eye as Eye2, Pencil as Pencil2, Trash as Trash3, Loader2 as Loader22 } from "lucide-react";
 import { Fragment as Fragment12, jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
@@ -6681,11 +6628,11 @@ var MODAL_WIDTH = {
   full: "max-w-full"
 };
 function ModalShell({ title, onClose, children, footer, width = "lg" }) {
-  return createPortal3(
+  return createPortal4(
     /* @__PURE__ */ jsx32(
       "div",
       {
-        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+        className: "fixed inset-0 z-50 flex glass items-center justify-center p-4",
         style: { background: "rgba(0,0,0,0.5)" },
         onMouseDown: (e) => {
           if (e.target === e.currentTarget) onClose();
@@ -8096,7 +8043,7 @@ function Table({
         }
       }
     ),
-    bulkConfirm && createPortal3(
+    bulkConfirm && createPortal4(
       /* @__PURE__ */ jsx32(
         "div",
         {
@@ -8236,7 +8183,7 @@ function ActionBtn2({
   );
 }
 function DGModalShell({ title, onClose, children, footer, width = "lg" }) {
-  return createPortal4(
+  return createPortal5(
     /* @__PURE__ */ jsx33(
       "div",
       {
@@ -11042,7 +10989,7 @@ import { PanelLeftClose, PanelLeftOpen, Sun as Sun3, Moon as Moon2, Loader2 as L
 
 // src/components/ui/tooltip.tsx
 import * as React38 from "react";
-import * as ReactDOM2 from "react-dom";
+import * as ReactDOM3 from "react-dom";
 import { Fragment as Fragment17, jsx as jsx44, jsxs as jsxs40 } from "react/jsx-runtime";
 function Tooltip({
   content,
@@ -11097,7 +11044,7 @@ function Tooltip({
       onBlur: () => setVisible(false),
       children: [
         children,
-        visible && ReactDOM2.createPortal(
+        visible && ReactDOM3.createPortal(
           /* @__PURE__ */ jsx44(
             "div",
             {
@@ -13696,6 +13643,12 @@ function createStore(initialValue, sessionName, expireInterval) {
   };
   return { store, getStore };
 }
+
+// src/core/decryption/decode.ts
+function decryptResponse(response, key) {
+  const payload = typeof response === "string" ? response : response.data;
+  return decryptLaravelPayload(payload, key);
+}
 export {
   Accordion,
   Authentication,
@@ -13795,7 +13748,11 @@ export {
   Wizard,
   api,
   createStore,
-  useServerBulletin,
+  decryptLaravelPayload,
+  decryptResponse,
+  getLaravelSecretKey,
+  parseLaravelEncryptedPayload,
+  parseLaravelKey,
   useServerDataGrid,
   useServerTable,
   useTheme,

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "3.5.21",
+  "version": "3.6.1",
   "description": "Reusable React UI components",
   "license": "MIT",
   "main": "dist/index.js",