@cere/cere-design-system 0.0.15 → 0.0.17

package/dist/index.d.mts

@@ -749,6 +749,12 @@ interface SideNavHeaderProps {
      * Wire this up to toggle sidebar expanded/collapsed state (V2).
      */
     onCollapse?: () => void;
+    /**
+     * Callback fired when the logo/title branding area is clicked.
+     * Use this for "go to home" navigation. Only the logo + title region
+     * is clickable — the collapse button and surrounding padding are excluded.
+     */
+    onLogoClick?: () => void;
     /**
      * Accessibility label for the header region
      * @default '{title} navigation header'
@@ -823,7 +829,11 @@ declare const SideNav: SideNavComponent;
  *
  * Renders the app branding area at the top of the side navigation.
  * Includes an optional logo, a title, and an optional collapse toggle button.
- * V2: In collapsed state, shows logo stacked vertically above toggle button
+ * V2: In collapsed state, shows logo stacked vertically above toggle button.
+ *
+ * If `onLogoClick` is provided, only the logo+title area is clickable
+ * (e.g. to navigate back to the home page). The rest of the header
+ * (collapse button, surrounding padding) does NOT trigger that callback.
  */
 declare const SideNavHeader: React__default.NamedExoticComponent<SideNavHeaderProps>;
 

package/dist/index.d.ts

@@ -749,6 +749,12 @@ interface SideNavHeaderProps {
      * Wire this up to toggle sidebar expanded/collapsed state (V2).
      */
     onCollapse?: () => void;
+    /**
+     * Callback fired when the logo/title branding area is clicked.
+     * Use this for "go to home" navigation. Only the logo + title region
+     * is clickable — the collapse button and surrounding padding are excluded.
+     */
+    onLogoClick?: () => void;
     /**
      * Accessibility label for the header region
      * @default '{title} navigation header'
@@ -823,7 +829,11 @@ declare const SideNav: SideNavComponent;
  *
  * Renders the app branding area at the top of the side navigation.
  * Includes an optional logo, a title, and an optional collapse toggle button.
- * V2: In collapsed state, shows logo stacked vertically above toggle button
+ * V2: In collapsed state, shows logo stacked vertically above toggle button.
+ *
+ * If `onLogoClick` is provided, only the logo+title area is clickable
+ * (e.g. to navigate back to the home page). The rest of the header
+ * (collapse button, surrounding padding) does NOT trigger that callback.
  */
 declare const SideNavHeader: React__default.NamedExoticComponent<SideNavHeaderProps>;
 

package/dist/index.js

@@ -3549,15 +3549,60 @@ var HeaderContainer = (0, import_styles11.styled)(import_material14.Box, {
     duration: theme2.transitions.duration.shorter
   })
 }));
+var BrandingButton = (0, import_styles11.styled)(import_material14.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 = import_react7.default.memo(({
   logo,
   title,
   showCollapseButton = true,
   onCollapse,
+  onLogoClick,
   ariaLabel,
   collapsed = false
 }) => {
   const headerAriaLabel = ariaLabel || `${title} navigation header`;
+  const brandingContent = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    logo && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_material14.Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0
+        },
+        children: logo
+      }
+    ),
+    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_material14.Typography,
+      {
+        variant: "subtitle1",
+        sx: {
+          fontWeight: 700,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          minWidth: 0
+        },
+        children: title
+      }
+    )
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     HeaderContainer,
     {
@@ -3565,31 +3610,24 @@ var SideNavHeader = import_react7.default.memo(({
       "aria-label": headerAriaLabel,
       isCollapsed: collapsed,
       children: [
-        logo && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        onLogoClick ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          BrandingButton,
+          {
+            onClick: onLogoClick,
+            "aria-label": `Go to ${title} home`,
+            "data-testid": "sidenav-home-link",
+            children: brandingContent
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           import_material14.Box,
           {
             sx: {
               display: "flex",
               alignItems: "center",
-              justifyContent: "center",
-              flexShrink: 0
-            },
-            children: logo
-          }
-        ),
-        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_material14.Typography,
-          {
-            variant: "subtitle1",
-            sx: {
-              flexGrow: 1,
-              fontWeight: 700,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
+              gap: 1.5,
               minWidth: 0
             },
-            children: title
+            children: brandingContent
           }
         ),
         showCollapseButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -3607,6 +3645,7 @@ var SideNavHeader = import_react7.default.memo(({
                 size: "small",
                 sx: {
                   flexShrink: 0,
+                  marginLeft: collapsed ? 0 : "auto",
                   color: "text.secondary",
                   "&:hover": {
                     backgroundColor: "action.hover",