@cere/cere-design-system 0.0.15 → 0.0.17

package/dist/index.mjs

@@ -3431,11 +3431,11 @@ SideNav.displayName = "SideNav";
 
 // src/components/navigation/SideNav/SideNavHeader.tsx
 import React4 from "react";
-import { Box as Box5, Typography as Typography4, IconButton as IconButton4, Tooltip as Tooltip2 } from "@mui/material";
+import { Box as Box5, Typography as Typography4, IconButton as IconButton4, Tooltip as Tooltip2, ButtonBase } from "@mui/material";
 import { styled as styled12 } from "@mui/material/styles";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 var HeaderContainer = styled12(Box5, {
   shouldForwardProp: (prop) => prop !== "isCollapsed"
 })(({ theme: theme2, isCollapsed }) => ({
@@ -3450,15 +3450,60 @@ var HeaderContainer = styled12(Box5, {
     duration: theme2.transitions.duration.shorter
   })
 }));
+var BrandingButton = styled12(ButtonBase)(({ theme: theme2 }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme2.spacing(1.5),
+  minWidth: 0,
+  padding: 0,
+  borderRadius: theme2.shape.borderRadius,
+  // Subtle hover feedback only when clickable
+  "&:hover": {
+    opacity: 0.8
+  },
+  "&:focus-visible": {
+    outline: `2px solid ${theme2.palette.primary.main}`,
+    outlineOffset: 2
+  }
+}));
 var SideNavHeader = React4.memo(({
   logo,
   title,
   showCollapseButton = true,
   onCollapse,
+  onLogoClick,
   ariaLabel,
   collapsed = false
 }) => {
   const headerAriaLabel = ariaLabel || `${title} navigation header`;
+  const brandingContent = /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    logo && /* @__PURE__ */ jsx22(
+      Box5,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0
+        },
+        children: logo
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsx22(
+      Typography4,
+      {
+        variant: "subtitle1",
+        sx: {
+          fontWeight: 700,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          minWidth: 0
+        },
+        children: title
+      }
+    )
+  ] });
   return /* @__PURE__ */ jsxs8(
     HeaderContainer,
     {
@@ -3466,31 +3511,24 @@ var SideNavHeader = React4.memo(({
       "aria-label": headerAriaLabel,
       isCollapsed: collapsed,
       children: [
-        logo && /* @__PURE__ */ jsx22(
+        onLogoClick ? /* @__PURE__ */ jsx22(
+          BrandingButton,
+          {
+            onClick: onLogoClick,
+            "aria-label": `Go to ${title} home`,
+            "data-testid": "sidenav-home-link",
+            children: brandingContent
+          }
+        ) : /* @__PURE__ */ jsx22(
           Box5,
           {
             sx: {
               display: "flex",
               alignItems: "center",
-              justifyContent: "center",
-              flexShrink: 0
-            },
-            children: logo
-          }
-        ),
-        !collapsed && /* @__PURE__ */ jsx22(
-          Typography4,
-          {
-            variant: "subtitle1",
-            sx: {
-              flexGrow: 1,
-              fontWeight: 700,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
+              gap: 1.5,
               minWidth: 0
             },
-            children: title
+            children: brandingContent
           }
         ),
         showCollapseButton && /* @__PURE__ */ jsx22(
@@ -3508,6 +3546,7 @@ var SideNavHeader = React4.memo(({
                 size: "small",
                 sx: {
                   flexShrink: 0,
+                  marginLeft: collapsed ? 0 : "auto",
                   color: "text.secondary",
                   "&:hover": {
                     backgroundColor: "action.hover",
@@ -4246,7 +4285,7 @@ import {
   Divider
 } from "@mui/material";
 import { styled as styled21 } from "@mui/material/styles";
-import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
 var StyledMenu = styled21(MuiMenu)({
   "& .MuiPaper-root": {
     borderRadius: 8,
@@ -4287,7 +4326,7 @@ var MenuItem = ({
   disabled = false,
   divider = false
 }) => {
-  return /* @__PURE__ */ jsxs12(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
     /* @__PURE__ */ jsxs12(MuiMenuItem, { onClick, disabled, children: [
       icon && /* @__PURE__ */ jsx32(ListItemIcon3, { children: icon }),
       /* @__PURE__ */ jsx32(ListItemText5, { children: label })
@@ -4351,7 +4390,7 @@ var Link3 = ({ underline = "hover", ...props }) => {
 };
 
 // src/components/navigation/Selector.tsx
-import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs13 } from "react/jsx-runtime";
 var Selector = ({
   options: options2,
   selectedId,
@@ -4388,7 +4427,7 @@ var Selector = ({
     /* @__PURE__ */ jsx35(Typography7, { variant: "body2", children: option.name })
   ] });
   if (compact) {
-    return /* @__PURE__ */ jsxs13(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs13(Fragment6, { children: [
       /* @__PURE__ */ jsx35(IconButton, { onClick: handleOpen, size: "small", children: selectedOption ? selectedOption.avatar ? /* @__PURE__ */ jsx35(Avatar4, { src: selectedOption.avatar, sx: { width: 32, height: 32 } }) : /* @__PURE__ */ jsx35(Avatar4, { sx: { width: 32, height: 32, bgcolor: colors.primary.main }, children: selectedOption.name.charAt(0) }) : /* @__PURE__ */ jsx35(Avatar4, { sx: { width: 32, height: 32, bgcolor: colors.grey[400] }, children: "?" }) }),
       /* @__PURE__ */ jsx35(
         Menu4,
@@ -4399,7 +4438,7 @@ var Selector = ({
           PaperProps: {
             sx: { width, maxHeight: 600, mt: 1 }
           },
-          children: loading ? /* @__PURE__ */ jsx35(Box9, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx35(CircularProgress2, { size: 24 }) }) : /* @__PURE__ */ jsxs13(Fragment5, { children: [
+          children: loading ? /* @__PURE__ */ jsx35(Box9, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx35(CircularProgress2, { size: 24 }) }) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
             options2.length > 5 && /* @__PURE__ */ jsx35(Box9, { sx: { p: 1, borderBottom: `1px solid ${colors.grey[200]}` }, children: /* @__PURE__ */ jsx35(
               TextField,
               {
@@ -4446,7 +4485,7 @@ var Selector = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs13(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
     /* @__PURE__ */ jsxs13(Box9, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
       selectedOption ? renderSelected ? /* @__PURE__ */ jsx35(Link3, { onClick: handleOpen, underline: "hover", children: renderSelected(selectedOption) }) : /* @__PURE__ */ jsx35(Link3, { onClick: handleOpen, underline: "hover", children: defaultRenderSelected(selectedOption) }) : /* @__PURE__ */ jsx35(Typography7, { variant: "body2", color: "text.secondary", children: placeholder }),
       /* @__PURE__ */ jsx35(IconButton, { onClick: handleOpen, size: "small", sx: { p: 0.2, ml: 0.5 }, children: /* @__PURE__ */ jsx35(KeyboardArrowDownIcon3, { fontSize: "small" }) })
@@ -4460,7 +4499,7 @@ var Selector = ({
         PaperProps: {
           sx: { width, maxHeight: 600, mt: 1 }
         },
-        children: loading ? /* @__PURE__ */ jsx35(Box9, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx35(CircularProgress2, { size: 24 }) }) : /* @__PURE__ */ jsxs13(Fragment5, { children: [
+        children: loading ? /* @__PURE__ */ jsx35(Box9, { sx: { display: "flex", justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx35(CircularProgress2, { size: 24 }) }) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
           options2.length > 5 && /* @__PURE__ */ jsx35(Box9, { sx: { p: 1, borderBottom: `1px solid ${colors.grey[200]}` }, children: /* @__PURE__ */ jsx35(
             TextField,
             {
@@ -4557,7 +4596,7 @@ import {
   CircularProgress as CircularProgress3
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
 var Dialog = ({
   open,
   title,
@@ -4616,9 +4655,9 @@ var Dialog = ({
         ] }),
         dividers && /* @__PURE__ */ jsx38(Divider2, {}),
         /* @__PURE__ */ jsx38(DialogContent, { dividers, children }),
-        (showActions || customActions) && /* @__PURE__ */ jsxs16(Fragment6, { children: [
+        (showActions || customActions) && /* @__PURE__ */ jsxs16(Fragment7, { children: [
           dividers && /* @__PURE__ */ jsx38(Divider2, {}),
-          /* @__PURE__ */ jsx38(DialogActions, { children: customActions || /* @__PURE__ */ jsxs16(Fragment6, { children: [
+          /* @__PURE__ */ jsx38(DialogActions, { children: customActions || /* @__PURE__ */ jsxs16(Fragment7, { children: [
             /* @__PURE__ */ jsx38(
               Button6,
               {
@@ -4650,7 +4689,7 @@ import MuiDrawer from "@mui/material/Drawer";
 import { styled as styled25 } from "@mui/material/styles";
 import { Box as Box11, IconButton as IconButton7, Typography as Typography9, Divider as Divider3, Tabs, Tab as Tab2 } from "@mui/material";
 import CloseIcon2 from "@mui/icons-material/Close";
-import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
 var StyledDrawer2 = styled25(MuiDrawer, {
   shouldForwardProp: (prop) => prop !== "width" && prop !== "miniWidth" && prop !== "collapsed" && prop !== "topOffset"
 })(({ theme: theme2, width = 240, miniWidth = 72, collapsed, topOffset = 0 }) => ({
@@ -4722,7 +4761,7 @@ var Drawer2 = ({
       },
       ...props,
       children: [
-        hasHeader && /* @__PURE__ */ jsxs17(Fragment7, { children: [
+        hasHeader && /* @__PURE__ */ jsxs17(Fragment8, { children: [
           /* @__PURE__ */ jsx39(
             Box11,
             {
@@ -4735,7 +4774,7 @@ var Drawer2 = ({
                 borderBottom: 1,
                 borderColor: "divider"
               },
-              children: header || /* @__PURE__ */ jsxs17(Fragment7, { children: [
+              children: header || /* @__PURE__ */ jsxs17(Fragment8, { children: [
                 /* @__PURE__ */ jsx39(Box11, { sx: { flex: 1 }, children: typeof title === "string" ? /* @__PURE__ */ jsx39(Typography9, { variant: "h6", children: title }) : title }),
                 shouldShowClose && onClose && /* @__PURE__ */ jsx39(
                   IconButton7,
@@ -4785,7 +4824,7 @@ var Drawer2 = ({
             children
           }
         ),
-        footer && /* @__PURE__ */ jsxs17(Fragment7, { children: [
+        footer && /* @__PURE__ */ jsxs17(Fragment8, { children: [
           /* @__PURE__ */ jsx39(Divider3, {}),
           /* @__PURE__ */ jsx39(
             Box11,
@@ -5987,9 +6026,9 @@ var Truncate = ({
 
 // src/components/utilities/BytesSize/BytesSize.tsx
 import size from "byte-size";
-import { Fragment as Fragment8, jsx as jsx75 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx75 } from "react/jsx-runtime";
 var BytesSize = ({ bytes }) => {
-  return /* @__PURE__ */ jsx75(Fragment8, { children: size(bytes).toString() });
+  return /* @__PURE__ */ jsx75(Fragment9, { children: size(bytes).toString() });
 };
 
 // src/components/utilities/QRCode/QRCode.tsx