gov-layout 1.3.6 → 1.3.8

package/dist/index.mjs

@@ -1,30 +1,7 @@
-import { createContext, useState, useEffect, useRef, useCallback, useContext, useId } from 'react';
+import { createContext, useState, useEffect, useCallback, useRef, useContext, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// #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");
+// src/sidebar/StaffSidebar.tsx
 function useDarkMode() {
   const [isDark, setIsDark] = useState(false);
   useEffect(() => {
@@ -901,6 +878,18 @@ function SidebarUserProfile({
     }
   );
 }
+function useIsMobile(breakpoint = 768) {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    setIsMobile(mql.matches);
+    const handler = (e) => setIsMobile(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [breakpoint]);
+  return isMobile;
+}
 function ToggleIcon({ isOpen }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -921,6 +910,21 @@ function ToggleIcon({ isOpen }) {
     }
   );
 }
+function HamburgerIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "24", height: "18", viewBox: "0 0 27 18", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M1.1875 17.8426C0.851042 17.8426 0.569077 17.7287 0.341604 17.501C0.113868 17.2735 0 16.9914 0 16.6547C0 16.3182 0.113868 16.0363 0.341604 15.8088C0.569077 15.5816 0.851042 15.468 1.1875 15.468H25.7292C26.0656 15.468 26.3476 15.5817 26.5751 15.8092C26.8028 16.0369 26.9167 16.3192 26.9167 16.6559C26.9167 16.9923 26.8028 17.2743 26.5751 17.5018C26.3476 17.729 26.0656 17.8426 25.7292 17.8426H1.1875ZM1.1875 10.1088C0.851042 10.1088 0.569077 9.99492 0.341604 9.76719C0.113868 9.53945 0 9.25735 0 8.9209C0 8.58417 0.113868 8.30221 0.341604 8.075C0.569077 7.84753 0.851042 7.73379 1.1875 7.73379H25.7292C26.0656 7.73379 26.3476 7.84766 26.5751 8.0754C26.8028 8.30313 26.9167 8.58523 26.9167 8.92169C26.9167 9.25841 26.8028 9.54037 26.5751 9.76758C26.3476 9.99506 26.0656 10.1088 25.7292 10.1088H1.1875ZM1.1875 2.3746C0.851042 2.3746 0.569077 2.26087 0.341604 2.0334C0.113868 1.80566 0 1.52343 0 1.18671C0 0.850249 0.113868 0.568284 0.341604 0.340812C0.569077 0.113604 0.851042 0 1.1875 0H25.7292C26.0656 0 26.3476 0.113868 26.5751 0.341604C26.8028 0.569077 26.9167 0.851174 26.9167 1.1879C26.9167 1.52435 26.8028 1.80632 26.5751 2.03379C26.3476 2.261 26.0656 2.3746 25.7292 2.3746H1.1875Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
 function HelpCircleIcon2() {
   return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
@@ -956,10 +960,13 @@ function StaffSidebar({
   isOpen: controlledIsOpen,
   onToggle,
   onExpandRequest,
-  topOffset = 0
+  topOffset = 0,
+  mobileBreakpoint = 768
 }) {
   const isDark = useDarkMode();
+  const isMobile = useIsMobile(mobileBreakpoint);
   const [internalOpen, setInternalOpen] = useState(true);
+  const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
   const sidebarOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalOpen;
   const collapsed = collapsible && !sidebarOpen;
   const collapsedWidth = "64px";
@@ -983,6 +990,283 @@ function StaffSidebar({
       }
     }
   };
+  const openDrawer = useCallback(() => setMobileDrawerOpen(true), []);
+  const closeDrawer = useCallback(() => setMobileDrawerOpen(false), []);
+  const handleMobileNavigate = useCallback((path) => {
+    onNavigate(path);
+    if (isMobile) closeDrawer();
+  }, [onNavigate, isMobile, closeDrawer]);
+  useEffect(() => {
+    if (isMobile && mobileDrawerOpen) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [isMobile, mobileDrawerOpen]);
+  useEffect(() => {
+    if (!isMobile || !mobileDrawerOpen) return;
+    const handler = (e) => {
+      if (e.key === "Escape") closeDrawer();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [isMobile, mobileDrawerOpen, closeDrawer]);
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "header",
+        {
+          style: {
+            position: "sticky",
+            top: 0,
+            left: 0,
+            right: 0,
+            height: "60px",
+            background: "linear-gradient(to bottom left, #3AAE7D, #346D55)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "0 16px",
+            zIndex: 49,
+            boxShadow: "0 2px 8px rgba(0,0,0,0.15)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", flex: 1, minWidth: 0 }, children: [
+              orgLogo ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: orgLogo,
+                  alt: orgName,
+                  style: {
+                    width: "40px",
+                    height: "40px",
+                    borderRadius: "50%",
+                    objectFit: "cover",
+                    flexShrink: 0,
+                    border: "2px solid rgba(255,255,255,0.3)"
+                  }
+                }
+              ) : /* @__PURE__ */ jsx("div", { style: {
+                width: "40px",
+                height: "40px",
+                borderRadius: "50%",
+                background: "rgba(255,255,255,0.2)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "#fff",
+                fontWeight: 700,
+                fontSize: "16px",
+                flexShrink: 0
+              }, children: orgName.slice(0, 2) }),
+              /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx("p", { style: {
+                  color: "#fff",
+                  fontWeight: 700,
+                  fontSize: "15px",
+                  lineHeight: "20px",
+                  margin: 0,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                }, children: orgName }),
+                orgSubtitle && /* @__PURE__ */ jsx("p", { style: {
+                  color: "rgba(255,255,255,0.75)",
+                  fontSize: "12px",
+                  lineHeight: "16px",
+                  margin: 0,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                }, children: orgSubtitle })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: openDrawer,
+                "aria-label": "\u0E40\u0E1B\u0E34\u0E14\u0E40\u0E21\u0E19\u0E39",
+                style: {
+                  width: "44px",
+                  height: "44px",
+                  borderRadius: "10px",
+                  border: "none",
+                  background: "rgba(255,255,255,0.12)",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#ffffff",
+                  flexShrink: 0,
+                  transition: "background-color 0.15s ease",
+                  WebkitTapHighlightColor: "transparent"
+                },
+                children: /* @__PURE__ */ jsx(HamburgerIcon, {})
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          onClick: closeDrawer,
+          style: {
+            position: "fixed",
+            inset: 0,
+            background: "rgba(0,0,0,0.45)",
+            zIndex: 99,
+            opacity: mobileDrawerOpen ? 1 : 0,
+            pointerEvents: mobileDrawerOpen ? "auto" : "none",
+            transition: "opacity 0.3s ease",
+            WebkitTapHighlightColor: "transparent"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "aside",
+        {
+          className,
+          style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            bottom: 0,
+            width: "min(85vw, 320px)",
+            background: isDark ? "#1e293b" : "#fff",
+            zIndex: 100,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            boxShadow: mobileDrawerOpen ? "4px 0 24px rgba(0,0,0,0.2)" : "none",
+            transform: mobileDrawerOpen ? "translateX(0)" : "translateX(-100%)",
+            transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+            color: isDark ? "#ffffff" : void 0
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "16px 16px 16px 20px",
+              background: "linear-gradient(to bottom left, #3AAE7D, #346D55)",
+              flexShrink: 0
+            }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", flex: 1, minWidth: 0 }, children: [
+                orgLogo ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: orgLogo,
+                    alt: orgName,
+                    style: {
+                      width: "44px",
+                      height: "44px",
+                      borderRadius: "50%",
+                      objectFit: "cover",
+                      flexShrink: 0,
+                      border: "2px solid rgba(255,255,255,0.3)"
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx("div", { style: {
+                  width: "44px",
+                  height: "44px",
+                  borderRadius: "50%",
+                  background: "rgba(255,255,255,0.2)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#fff",
+                  fontWeight: 700,
+                  fontSize: "16px",
+                  flexShrink: 0
+                }, children: orgName.slice(0, 2) }),
+                /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx("p", { style: {
+                    color: "#fff",
+                    fontWeight: 700,
+                    fontSize: "15px",
+                    lineHeight: "20px",
+                    margin: 0,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  }, children: orgName }),
+                  orgSubtitle && /* @__PURE__ */ jsx("p", { style: {
+                    color: "rgba(255,255,255,0.75)",
+                    fontSize: "12px",
+                    lineHeight: "16px",
+                    margin: 0
+                  }, children: orgSubtitle })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: closeDrawer,
+                  "aria-label": "\u0E1B\u0E34\u0E14\u0E40\u0E21\u0E19\u0E39",
+                  style: {
+                    width: "40px",
+                    height: "40px",
+                    borderRadius: "10px",
+                    border: "none",
+                    background: "rgba(255,255,255,0.15)",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: "#ffffff",
+                    flexShrink: 0,
+                    transition: "background-color 0.15s ease",
+                    WebkitTapHighlightColor: "transparent"
+                  },
+                  children: /* @__PURE__ */ jsx(CloseIcon, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: /* @__PURE__ */ jsx(
+              SidebarMenu,
+              {
+                menuItems,
+                onItemClick: handleMobileNavigate,
+                currentPath,
+                collapsed: false
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { style: { flexShrink: 0 }, children: [
+              resolvedBottomMenu && resolvedBottomMenu.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("hr", { style: {
+                  border: "none",
+                  borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
+                  margin: "4px 12px"
+                } }),
+                /* @__PURE__ */ jsx(
+                  SidebarMenu,
+                  {
+                    menuItems: resolvedBottomMenu,
+                    onItemClick: handleMobileNavigate,
+                    currentPath,
+                    collapsed: false
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                SidebarUserProfile,
+                {
+                  user,
+                  roleLabel,
+                  onLogout,
+                  onProfile,
+                  collapsed: false
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "aside",
@@ -1098,7 +1382,7 @@ function BellIcon2() {
     }
   ) });
 }
-function HamburgerIcon() {
+function HamburgerIcon2() {
   return /* @__PURE__ */ jsx("svg", { width: "24", height: "18", viewBox: "0 0 27 18", fill: "none", children: /* @__PURE__ */ jsx(
     "path",
     {
@@ -1614,7 +1898,7 @@ function UserHeader({
                   onMouseLeave: (e) => {
                     e.currentTarget.style.backgroundColor = "transparent";
                   },
-                  children: /* @__PURE__ */ jsx(HamburgerIcon, {})
+                  children: /* @__PURE__ */ jsx(HamburgerIcon2, {})
                 }
               )
             ] })