gov-layout 1.3.1 → 1.3.5

package/dist/index.mjs

@@ -1,7 +1,30 @@
 import { createContext, useState, useEffect, useRef, useCallback, useContext, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// src/sidebar/StaffSidebar.tsx
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles.css
+styleInject(".text-primary,\n.text-text-primary {\n  color: var(--color-alias-text-colors-primary, #060d26);\n}\n.text-secondary,\n.text-text-secondary {\n  color: var(--color-alias-text-colors-secondary, #1e7d55);\n}\n.text-tertiary,\n.text-text-tertiary {\n  color: var(--color-alias-text-colors-tertiary, #475272);\n}\n.text-placeholder,\n.text-text-placeholder {\n  color: var(--color-alias-text-colors-placeholder, #707993);\n}\n.text-critical,\n.text-text-critical {\n  color: var(--color-alias-text-colors-critical, #f21515);\n}\n");
 function useDarkMode() {
   const [isDark, setIsDark] = useState(false);
   useEffect(() => {
@@ -623,6 +646,25 @@ function ProfileIcon() {
     }
   );
 }
+function AvatarPlaceholder({ size = 40 }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: `${size}px`,
+        height: `${size}px`,
+        borderRadius: "50%",
+        backgroundColor: "#f1f5f9",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.05)"
+      },
+      children: /* @__PURE__ */ jsx("svg", { width: size * 0.6, height: size * 0.6, viewBox: "0 0 24 24", fill: "#94a3b8", children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) })
+    }
+  );
+}
 function SidebarUserProfile({
   user,
   roleLabel,
@@ -631,6 +673,10 @@ function SidebarUserProfile({
   onProfile
 }) {
   const isDark = useDarkMode();
+  const [imgError, setImgError] = useState(false);
+  useEffect(() => {
+    setImgError(false);
+  }, [user?.pictureUrl]);
   if (!user) return null;
   const getFullName = () => {
     if (user.firstName && user.lastName) {
@@ -638,9 +684,6 @@ function SidebarUserProfile({
     }
     return user.firstName || user.lastName || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
   };
-  const getInitial = () => {
-    return user.firstName?.charAt(0) || user.lastName?.charAt(0) || "?";
-  };
   if (collapsed) {
     return /* @__PURE__ */ jsxs("div", { style: {
       padding: "12px 8px",
@@ -656,36 +699,21 @@ function SidebarUserProfile({
           onClick: onProfile,
           title: onProfile ? "\u0E14\u0E39\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C" : getFullName(),
           style: { cursor: onProfile ? "pointer" : "default" },
-          children: user.pictureUrl ? /* @__PURE__ */ jsx(
+          children: user.pictureUrl && !imgError ? /* @__PURE__ */ jsx(
             "img",
             {
               src: user.pictureUrl,
               alt: getFullName(),
+              onError: () => setImgError(true),
               style: {
                 width: "36px",
                 height: "36px",
                 borderRadius: "50%",
-                objectFit: "cover"
+                objectFit: "cover",
+                flexShrink: 0
               }
             }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                width: "36px",
-                height: "36px",
-                borderRadius: "50%",
-                background: "var(--color-alias-color-brand-primary, #1e7d55)",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                color: "#fff",
-                fontWeight: 700,
-                fontSize: "14px"
-              },
-              children: getInitial()
-            }
-          )
+          ) : /* @__PURE__ */ jsx(AvatarPlaceholder, { size: 36 })
         }
       ),
       onProfile && /* @__PURE__ */ jsx(
@@ -775,11 +803,12 @@ function SidebarUserProfile({
               transition: "opacity 0.15s ease"
             },
             children: [
-              user.pictureUrl ? /* @__PURE__ */ jsx(
+              user.pictureUrl && !imgError ? /* @__PURE__ */ jsx(
                 "img",
                 {
                   src: user.pictureUrl,
                   alt: getFullName(),
+                  onError: () => setImgError(true),
                   style: {
                     width: "40px",
                     height: "40px",
@@ -788,25 +817,7 @@ function SidebarUserProfile({
                     flexShrink: 0
                   }
                 }
-              ) : /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    width: "40px",
-                    height: "40px",
-                    borderRadius: "50%",
-                    background: "var(--color-alias-color-brand-primary, #1e7d55)",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    color: "#fff",
-                    fontWeight: 700,
-                    fontSize: "16px",
-                    flexShrink: 0
-                  },
-                  children: getInitial()
-                }
-              ),
+              ) : /* @__PURE__ */ jsx(AvatarPlaceholder, { size: 40 }),
               /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
                 /* @__PURE__ */ jsx("p", { style: {
                   fontWeight: 600,
@@ -944,7 +955,8 @@ function StaffSidebar({
   collapsible = false,
   isOpen: controlledIsOpen,
   onToggle,
-  onExpandRequest
+  onExpandRequest,
+  topOffset = 0
 }) {
   const isDark = useDarkMode();
   const [internalOpen, setInternalOpen] = useState(true);
@@ -978,9 +990,9 @@ function StaffSidebar({
         className,
         style: {
           position: "fixed",
-          top: 0,
+          top: topOffset,
           left: 0,
-          height: "100vh",
+          height: `calc(100vh - ${typeof topOffset === "number" ? topOffset + "px" : topOffset})`,
           width: currentWidth,
           background: isDark ? "#1e293b" : "#fff",
           borderRight: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
@@ -1053,7 +1065,7 @@ function StaffSidebar({
           title: sidebarOpen ? "\u0E22\u0E48\u0E2D Sidebar" : "\u0E02\u0E22\u0E32\u0E22 Sidebar",
           style: {
             position: "fixed",
-            top: "10%",
+            top: `calc(${typeof topOffset === "number" ? topOffset + "px" : topOffset} + 10vh)`,
             left: currentWidth,
             zIndex: 51,
             width: "24px",
@@ -1098,6 +1110,25 @@ function HamburgerIcon() {
 function MessageOutlinedIcon(props) {
   return /* @__PURE__ */ jsx("svg", { focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 4h16v12H5.17L4 17.17zm0-2c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm2 10h12v2H6zm0-3h12v2H6zm0-3h12v2H6z" }) });
 }
+function AvatarPlaceholder2({ size = 44 }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: `${size}px`,
+        height: `${size}px`,
+        borderRadius: "50%",
+        backgroundColor: "#f1f5f9",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.05)"
+      },
+      children: /* @__PURE__ */ jsx("svg", { width: size * 0.6, height: size * 0.6, viewBox: "0 0 24 24", fill: "#94a3b8", children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) })
+    }
+  );
+}
 function getNotifBg(type) {
   const map = {
     success: "#dcfce7",
@@ -1129,11 +1160,14 @@ function UserHeader({
   className
 }) {
   const displayName = `${user?.firstName || ""} ${user?.lastName || ""}`.trim() || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
-  const firstChar = user?.firstName?.charAt(0) || "\u0E1C";
   const [isNotifOpen, setIsNotifOpen] = useState(false);
   const [activeFilter, setActiveFilter] = useState("all");
   const notifRef = useRef(null);
   const isDark = useDarkMode();
+  const [imgError, setImgError] = useState(false);
+  useEffect(() => {
+    setImgError(false);
+  }, [user?.pictureUrl]);
   useEffect(() => {
     const handleClickOutside = (e) => {
       if (notifRef.current && !notifRef.current.contains(e.target)) {
@@ -1196,42 +1230,22 @@ function UserHeader({
                   overflow: "hidden"
                 },
                 children: [
-                  user?.pictureUrl ? /* @__PURE__ */ jsx(
+                  user?.pictureUrl && !imgError ? /* @__PURE__ */ jsx(
                     "img",
                     {
                       src: user.pictureUrl,
                       alt: displayName,
+                      onError: () => setImgError(true),
                       style: {
                         width: "44px",
                         height: "44px",
                         borderRadius: "50%",
                         objectFit: "cover",
-                        border: "2px solid rgba(255,255,255,0.7)"
-                      }
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        width: "44px",
-                        height: "44px",
-                        borderRadius: "50%",
-                        background: "rgba(255,255,255,0.2)",
                         border: "2px solid rgba(255,255,255,0.7)",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
-                      },
-                      children: /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          style: { color: "#fff", fontSize: "18px", fontWeight: 600 },
-                          children: firstChar
-                        }
-                      )
+                        flexShrink: 0
+                      }
                     }
-                  ),
+                  ) : /* @__PURE__ */ jsx(AvatarPlaceholder2, { size: 44 }),
                   /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
                     /* @__PURE__ */ jsxs(
                       "p",
@@ -1623,6 +1637,25 @@ function ProfileIcon2() {
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
   ] });
 }
+function AvatarPlaceholder3({ size = 56 }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: `${size}px`,
+        height: `${size}px`,
+        borderRadius: "50%",
+        backgroundColor: "#f1f5f9",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.05)"
+      },
+      children: /* @__PURE__ */ jsx("svg", { width: size * 0.6, height: size * 0.6, viewBox: "0 0 24 24", fill: "#94a3b8", children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) })
+    }
+  );
+}
 function UserSidebar({
   user,
   roleLabel,
@@ -1635,6 +1668,10 @@ function UserSidebar({
   onProfile
 }) {
   const isDark = useDarkMode();
+  const [imgError, setImgError] = useState(false);
+  useEffect(() => {
+    setImgError(false);
+  }, [user?.pictureUrl]);
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
@@ -1650,10 +1687,6 @@ function UserSidebar({
     if (user.firstName && user.lastName) return `${user.firstName} ${user.lastName}`;
     return user.firstName || user.lastName || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
   };
-  const getInitial = () => {
-    if (!user) return "?";
-    return user.firstName?.charAt(0) || user.lastName?.charAt(0) || "?";
-  };
   const handleMenuClick = (path) => {
     onNavigate(path);
     onClose();
@@ -1713,38 +1746,22 @@ function UserSidebar({
                     padding: "8px"
                   },
                   children: [
-                    user.pictureUrl ? /* @__PURE__ */ jsx(
+                    user.pictureUrl && !imgError ? /* @__PURE__ */ jsx(
                       "img",
                       {
                         src: user.pictureUrl,
                         alt: getFullName(),
+                        onError: () => setImgError(true),
                         style: {
                           width: "56px",
                           height: "56px",
                           borderRadius: "50%",
                           objectFit: "cover",
+                          flexShrink: 0,
                           boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
                         }
                       }
-                    ) : /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          width: "56px",
-                          height: "56px",
-                          borderRadius: "50%",
-                          background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          color: "#fff",
-                          fontWeight: 700,
-                          fontSize: "20px",
-                          boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
-                        },
-                        children: getInitial()
-                      }
-                    ),
+                    ) : /* @__PURE__ */ jsx(AvatarPlaceholder3, { size: 56 }),
                     /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
                       /* @__PURE__ */ jsx(
                         "p",