opus-toolkit-components 2.0.0 → 2.0.2

package/lib/components/Sidebar/index.d.ts

@@ -1,57 +1,60 @@
-import type { IconProps } from "../Icon";
-
-export interface SidebarMenuItem {
-  key: string | number;
-  name: string;
-  path?: string;
-  href?: string;
-  iconProps?: IconProps;
-  onClick?: (key: string | number) => void;
-}
-
-export interface SidebarMenuGroup {
-  key: string | number;
-  name: string;
-  iconProps?: IconProps;
-  children: SidebarMenuItem[];
-}
-
-export type SidebarMenu = SidebarMenuItem | SidebarMenuGroup;
-
-export interface SidebarUser {
-  id: string | number;
-  name: string;
-  role: string;
-  avatar?: string;
-}
-
-export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-  menus: SidebarMenu[];
-  user: SidebarUser;
-
-  /** Currently selected (active) menu item */
-  activeItem?: string | number | null;
-  onItemClick?: (key: string | number) => void;
-
-  /** Optional logo override */
-  logo?: string;
-
-  /** Controlled search input state */
-  searchValue?: string;
-  onSearchChange?: (value: string) => void;
-
-  /**
-   * Optional controlled key of the currently expanded group.
-   * Set to `null` to collapse all groups.
-   * When omitted, the Sidebar manages expansion state internally.
-   */
-  openGroupKey?: string | number | null;
-
-  /**
-   * Optional controlled change handler.
-   * Receives the NEXT openGroupKey value.
-   */
-  onGroupToggle?: (openGroupKey: string | number | null) => void;
-}
-
-export const Sidebar: React.FC<SidebarProps>;
+import type { IconProps } from "../Icon";
+
+export interface SidebarMenuItem {
+  key: string | number;
+  name: string;
+  path?: string;
+  href?: string;
+  iconProps?: IconProps;
+  onClick?: (key: string | number) => void;
+}
+
+export interface SidebarMenuGroup {
+  key: string | number;
+  name: string;
+  iconProps?: IconProps;
+  children: SidebarMenuItem[];
+}
+
+export type SidebarMenu = SidebarMenuItem | SidebarMenuGroup;
+
+export interface SidebarUser {
+  id: string | number;
+  name: string;
+  role: string;
+  avatar?: string;
+}
+
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+  menus: SidebarMenu[];
+  user: SidebarUser;
+
+  /** Currently selected (active) menu item */
+  activeItem?: string | number | null;
+  onItemClick?: (key: string | number) => void;
+
+  /** Optional logo override */
+  logo?: string;
+
+  /** Controlled search input state */
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+
+  /**
+   * Optional controlled key of the currently expanded group.
+   * Set to `null` to collapse all groups.
+   * When omitted, the Sidebar manages expansion state internally.
+   */
+  openGroupKey?: string | number | null;
+
+  /**
+   * Optional controlled change handler.
+   * Receives the NEXT openGroupKey value.
+   */
+  onGroupToggle?: (openGroupKey: string | number | null) => void;
+
+  /** Optional callback fired when the user clicks the logout button in the profile card. */
+  onLogout?: () => void;
+}
+
+export const Sidebar: React.FC<SidebarProps>;

package/lib/components/Sidebar/index.js

@@ -820,27 +820,41 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (/* binding */ SidebarProfile)
 /* harmony export */ });
-/* harmony import */ var _Profile_ProfileCard_ProfileCard__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4977);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4178);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(148);
+/* harmony import */ var _heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _Profile_ProfileCard_ProfileCard__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4977);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4178);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__);
+
 
 
 function SidebarProfile(_ref) {
   let {
     user,
     open,
-    href
+    href,
+    onLogout
   } = _ref;
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div", {
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", {
     className: "mt-auto flex items-center gap-3 p-2 pb-4",
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("img", {
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("img", {
       src: user.avatar,
       alt: "profile",
       className: "h-8 w-8 rounded-full"
-    }), open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Profile_ProfileCard_ProfileCard__WEBPACK_IMPORTED_MODULE_0__["default"], {
-      user: user,
-      href: href,
-      variant: "sidebar"
+    }), open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", {
+      className: "flex flex-1 items-center justify-between gap-2",
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Profile_ProfileCard_ProfileCard__WEBPACK_IMPORTED_MODULE_1__["default"], {
+        user: user,
+        href: href,
+        variant: "sidebar"
+      }), onLogout && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("button", {
+        onClick: onLogout,
+        title: "Log out",
+        className: "rounded p-1 text-[--color-text-strong] transition-colors hover:bg-[--color-primary-bg-hover] hover:text-[--color-primary]",
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_0__.ArrowRightOnRectangleIcon, {
+          className: "h-5 w-5"
+        })
+      })]
     })]
   });
 }
@@ -992,7 +1006,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.sidebar-logo{width:24px;height:auto}`, "",{"version":3,"sources":["webpack://./src/components/Sidebar/sidebar.scss"],"names":[],"mappings":"AAAA,cACI,UAAA,CACA,WAAA","sourcesContent":[".sidebar-logo {\r\n    width:24px;\r\n    height: auto;\r\n}"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `.sidebar-logo{width:24px;height:auto}.menu-item-container{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;min-height:0}.menu-item-container::-webkit-scrollbar{display:none}`, "",{"version":3,"sources":["webpack://./src/components/Sidebar/sidebar.scss"],"names":[],"mappings":"AAAA,cACI,UAAA,CACA,WAAA,CAGJ,qBACI,eAAA,CACA,oBAAA,CACA,uBAAA,CACA,YAAA,CAEA,wCACI,YAAA","sourcesContent":[".sidebar-logo {\r\n    width:24px;\r\n    height: auto;\r\n}\r\n\r\n.menu-item-container {\r\n    overflow-y: auto;\r\n    scrollbar-width: none;\r\n    -ms-overflow-style: none;\r\n    min-height: 0;\r\n\r\n    &::-webkit-scrollbar {\r\n        display: none;\r\n    }\r\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -1567,75 +1581,78 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-/**
- * A single menu item (no children).
- * @typedef {Object} SidebarMenuItem
- * @property {string|number} key
- * @property {string} name
- * @property {string} [path]
- * @property {string} [href]
- * @property {import('../Icon').IconProps} [iconProps]
- * @property {(key: string|number) => void} [onClick]
+/**
+ * A single menu item (no children).
+ * @typedef {Object} SidebarMenuItem
+ * @property {string|number} key
+ * @property {string} name
+ * @property {string} [path]
+ * @property {string} [href]
+ * @property {import('../Icon').IconProps} [iconProps]
+ * @property {(key: string|number) => void} [onClick]
  */
 
-/**
- * A grouped menu entry with children.
- * @typedef {Object} SidebarMenuGroup
- * @property {string|number} key
- * @property {string} name
- * @property {SidebarMenuItem[]} children
+/**
+ * A grouped menu entry with children.
+ * @typedef {Object} SidebarMenuGroup
+ * @property {string|number} key
+ * @property {string} name
+ * @property {SidebarMenuItem[]} children
  */
 
-/**
- * A full menu entry (either group or leaf item).
- * @typedef {SidebarMenuItem | SidebarMenuGroup} SidebarMenu
+/**
+ * A full menu entry (either group or leaf item).
+ * @typedef {SidebarMenuItem | SidebarMenuGroup} SidebarMenu
  */
 
-/**
- * Minimal shape expected for SidebarProfile.
- * @typedef {Object} SidebarUser
- * @property {string|number} id
- * @property {string} name
- * @property {string} role
- * @property {string} [avatar]
+/**
+ * Minimal shape expected for SidebarProfile.
+ * @typedef {Object} SidebarUser
+ * @property {string|number} id
+ * @property {string} name
+ * @property {string} role
+ * @property {string} [avatar]
  */
 
-/**
- * Props for Sidebar.
- *
- * @typedef {Object} SidebarProps
- *
- * @property {SidebarMenu[]} menus
- *   All sidebar menu items (groups + items).
- *
- * @property {SidebarUser} user
- *   The current logged-in user.
- *
- * @property {string|number|null} [activeItem]
- *   Key of the currently selected item.
- *
- * @property {(key: string|number) => void} [onItemClick]
- *   Fired when a menu item is clicked.
- *
- * @property {string} [logo]
- *   Optional logo override.
- *
- * @property {string} [searchValue]
- *   Controlled search input value.
- *
- * @property {(value: string) => void} [onSearchChange]
- *
- * @property {string|number|null} [openGroupKey]
- *   Optional controlled key of the currently expanded group.
- *
- * @property {(openGroupKey: string|number|null) => void} [onGroupToggle]
- *   Optional controlled change handler. If omitted, Sidebar manages group state internally.
+/**
+ * Props for Sidebar.
+ *
+ * @typedef {Object} SidebarProps
+ *
+ * @property {SidebarMenu[]} menus
+ *   All sidebar menu items (groups + items).
+ *
+ * @property {SidebarUser} user
+ *   The current logged-in user.
+ *
+ * @property {string|number|null} [activeItem]
+ *   Key of the currently selected item.
+ *
+ * @property {(key: string|number) => void} [onItemClick]
+ *   Fired when a menu item is clicked.
+ *
+ * @property {string} [logo]
+ *   Optional logo override.
+ *
+ * @property {string} [searchValue]
+ *   Controlled search input value.
+ *
+ * @property {(value: string) => void} [onSearchChange]
+ *
+ * @property {string|number|null} [openGroupKey]
+ *   Optional controlled key of the currently expanded group.
+ *
+ * @property {(openGroupKey: string|number|null) => void} [onGroupToggle]
+ *   Optional controlled change handler. If omitted, Sidebar manages group state internally.
+ *
+ * @property {() => void} [onLogout]
+ *   Optional callback fired when the user clicks the logout button in the profile card.
  */
 
-/**
- * Fully typed Sidebar component.
- *
- * @param {SidebarProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * Fully typed Sidebar component.
+ *
+ * @param {SidebarProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function Sidebar(_ref) {
@@ -1649,6 +1666,7 @@ function Sidebar(_ref) {
     onSearchChange,
     openGroupKey,
     onGroupToggle,
+    onLogout,
     ...rest
   } = _ref;
   const [open, setOpen] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
@@ -1663,10 +1681,10 @@ function Sidebar(_ref) {
     setInternalOpenGroupKey(nextOpenGroupKey);
   };
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
-    className: "flex",
+    className: "flex h-full",
     ...rest,
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("div", {
-      className: `${open ? "w-[20rem]" : "w-[3rem]"} transition-width flex min-h-screen flex-col bg-[--color-primary-bg] text-[--color-text-strong] duration-300 ease-in-out`,
+      className: `${open ? "w-[20rem]" : "w-[3rem]"} transition-width flex h-full flex-col bg-[--color-primary-bg] text-[--color-text-strong] duration-300 ease-in-out`,
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("div", {
         className: "flex items-center justify-between p-3 pr-0",
         children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("img", {
@@ -1688,7 +1706,7 @@ function Sidebar(_ref) {
           className: "h-6 w-6 text-[--color-text-strong] hover:text-[--color-primary-hover]"
         })
       }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("nav", {
-        className: "mt-2 flex-1 space-y-1",
+        className: "mt-2 flex min-h-0 flex-1 flex-col overflow-hidden",
         children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
           className: "border-b-solid border-b-2 border-[--color-stroke] px-3 pb-2",
           children: open ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("div", {
@@ -1710,7 +1728,7 @@ function Sidebar(_ref) {
             })
           })
         }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
-          className: "menu-item-container",
+          className: "menu-item-container flex-1",
           children: menus.map(menu => menu.children ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_SidebarGroup__WEBPACK_IMPORTED_MODULE_3__["default"], {
             menu: menu,
             open: open,
@@ -1732,7 +1750,8 @@ function Sidebar(_ref) {
       }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_SidebarProfile__WEBPACK_IMPORTED_MODULE_4__["default"], {
         user: user,
         open: open,
-        href: `/users/${user.id}`
+        href: `/users/${user.id}`,
+        onLogout: onLogout
       })]
     })
   });