opus-toolkit-components 2.0.0 → 2.0.2

package/lib/main.js

@@ -590,32 +590,32 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-/**
- * The visual intent / theme of the Card.
- * @typedef {'default'|'info'|'warning'|'success'|'error'|'brand'|'brandSecondary'} CardIntent
+/**
+ * The visual intent / theme of the Card.
+ * @typedef {'default'|'info'|'warning'|'success'|'error'|'brand'|'brandSecondary'} CardIntent
  */
 
-/**
- * Props for the Card component.
- *
- * @typedef {Object} CardProps
- * @property {CardIntent} [intent]
- *   Controls the background + text color theme of the card.
- *
- * @property {boolean} [hasOutline=true]
- *   Toggles the default card outline.
- *
- * @property {string} [className]
- *   Additional custom class names.
- *
- * @property {React.ReactNode} [children]
- *   Card content.
+/**
+ * Props for the Card component.
+ *
+ * @typedef {Object} CardProps
+ * @property {CardIntent} [intent]
+ *   Controls the background + text color theme of the card.
+ *
+ * @property {boolean} [hasOutline=true]
+ *   Toggles the default card outline.
+ *
+ * @property {string} [className]
+ *   Additional custom class names.
+ *
+ * @property {React.ReactNode} [children]
+ *   Card content.
  */
 
-/**
- * Card component with typed JSDoc for TS autocomplete.
- *
- * @param {CardProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * Card component with typed JSDoc for TS autocomplete.
+ *
+ * @param {CardProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function Card(_ref) {
@@ -637,7 +637,7 @@ function Card(_ref) {
     brandSecondary: "bg-[--color-brand-secondary] text-[--color-white]"
   };
   const resolvedIntent = intent || "default";
-  const cardClasses = (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])("p-5", "rounded-lg", "shadow-lg", hasOutline ? "border-2 border-solid border-[--color-stroke]" : "border-0", intentClasses[resolvedIntent], className);
+  const cardClasses = (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])("p-5", "rounded-lg", "shadow-lg", hasOutline ? "border border-solid border-[--color-stroke]" : "border-0", intentClasses[resolvedIntent], className);
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
     className: cardClasses,
     ...rest,
@@ -1413,34 +1413,37 @@ function DatePicker(_ref) {
         className: "ml-1 text-[--color-util-red]",
         children: "*"
       })]
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("input", {
-      type: "date",
-      id: name,
-      name: name,
-      ref: inputRef,
-      value: selectedDate,
-      min: normalizedMinDate,
-      max: normalizedMaxDate,
-      title: title,
-      onChange: handleDateChange,
-      required: required,
-      disabled: disabled,
-      "data-cy": (0,_utils_getDataCy__WEBPACK_IMPORTED_MODULE_3__.getDataCy)({
-        name,
-        dataCy
-      }),
-      "aria-invalid": !isValid,
-      "aria-describedby": !isValid ? `${name}-error` : undefined,
-      className: `w-full rounded-md border bg-[--color-input-bg] px-3 py-2 pr-10 ${isValid ? "border-[--color-stroke]" : "border-[--color-util-red]"} text-md font-normal text-[--color-text-strong] ${disabled ? "cursor-not-allowed opacity-50" : ""} ${className}`
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("button", {
-      type: "button",
-      onClick: handleIconClick,
-      className: "datepicker-icon-button absolute right-3 top-1/2 mt-1 transform",
-      "aria-label": "Open date picker",
-      disabled: disabled,
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_2__.CalendarIcon, {
-        className: `h-5 w-5 ${disabled ? "text-[--color-text-disabled]" : "text-[--color-text-weak] hover:text-[--color-primary-btn-hover]"} transition`
-      })
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
+      className: "relative",
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("input", {
+        type: "date",
+        id: name,
+        name: name,
+        ref: inputRef,
+        value: selectedDate,
+        min: normalizedMinDate,
+        max: normalizedMaxDate,
+        title: title,
+        onChange: handleDateChange,
+        required: required,
+        disabled: disabled,
+        "data-cy": (0,_utils_getDataCy__WEBPACK_IMPORTED_MODULE_3__.getDataCy)({
+          name,
+          dataCy
+        }),
+        "aria-invalid": !isValid,
+        "aria-describedby": !isValid ? `${name}-error` : undefined,
+        className: `w-full rounded-md border bg-[--color-input-bg] px-3 py-2 pr-10 ${isValid ? "border-[--color-stroke]" : "border-[--color-util-red]"} text-md font-normal text-[--color-text-strong] ${disabled ? "cursor-not-allowed opacity-50" : ""} ${className}`
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("button", {
+        type: "button",
+        onClick: handleIconClick,
+        className: "datepicker-icon-button absolute right-3 top-1/2 -translate-y-1/2",
+        "aria-label": "Open date picker",
+        disabled: disabled,
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_2__.CalendarIcon, {
+          className: `h-5 w-5 ${disabled ? "text-[--color-text-disabled]" : "text-[--color-text-weak] hover:text-[--color-primary-btn-hover]"} transition`
+        })
+      })]
     }), !isValid && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
       as: "span",
       id: `${name}-error`,
@@ -3912,75 +3915,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) {
@@ -3994,6 +4000,7 @@ function Sidebar(_ref) {
     onSearchChange,
     openGroupKey,
     onGroupToggle,
+    onLogout,
     ...rest
   } = _ref;
   const [open, setOpen] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
@@ -4008,10 +4015,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", {
@@ -4033,7 +4040,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", {
@@ -4055,7 +4062,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,
@@ -4077,7 +4084,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
       })]
     })
   });
@@ -4328,27 +4336,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"
+        })
+      })]
     })]
   });
 }
@@ -4725,7 +4747,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___);