opus-toolkit-components 1.7.5 → 1.7.8

package/lib/{opus-components.main.js → main.js}

@@ -3655,16 +3655,16 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(94178);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
 
-/**
- * @typedef {Object} BarLayoutProps
- * @property {React.ReactNode} [left]   Left content area
- * @property {React.ReactNode} [center] Center content area
- * @property {React.ReactNode} [right]  Right content area
- * @property {string} [className]       Optional wrapper class
+/**
+ * @typedef {Object} BarLayoutProps
+ * @property {React.ReactNode} [left]   Left content area
+ * @property {React.ReactNode} [center] Center content area
+ * @property {React.ReactNode} [right]  Right content area
+ * @property {string} [className]       Optional wrapper class
  */
 
-/**
- * @param {BarLayoutProps} props
+/**
+ * @param {BarLayoutProps} props
  */
 
 const BarLayout = _ref => {
@@ -5558,66 +5558,72 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-/**
- * A single menu item (no children).
- * @typedef {Object} SidebarMenuItem
- * @property {string|number} key
- * @property {string} name
- * @property {string} [icon]        // optional icon name depending on your app
- * @property {string} [href]        // optional link target
+/**
+ * A single menu item (no children).
+ * @typedef {Object} SidebarMenuItem
+ * @property {string|number} key
+ * @property {string} name
+ * @property {string} [icon]        // optional icon name depending on your app
+ * @property {string} [href]        // optional link target
  */
 
-/**
- * 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]   // optional depending on your design
+/**
+ * Minimal shape expected for SidebarProfile.
+ * @typedef {Object} SidebarUser
+ * @property {string|number} id
+ * @property {string} name
+ * @property {string} role
+ * @property {string} [avatar]   // optional depending on your design
  */
 
-/**
- * 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='']
- *
- * @property {(value: string) => void} [onSearchChange]
+/**
+ * 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='']
+ /**
+ * @property {string|number|null} [openGroupKey]
+ *   Key of the currently expanded group (controlled).
+ *
+ * @property {(key: string|number) => void} [onGroupToggle]
+ *   Fired when a group header is clicked.
+ *
+ * @property {(value: string) => void} [onSearchChange]
  */
 
-/**
- * Fully typed Sidebar component.
- *
- * @param {SidebarProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * Fully typed Sidebar component.
+ *
+ * @param {SidebarProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function Sidebar(_ref) {
@@ -5628,7 +5634,9 @@ function Sidebar(_ref) {
     onItemClick,
     logo,
     searchValue = "",
-    onSearchChange
+    onSearchChange,
+    openGroupKey,
+    onGroupToggle
   } = _ref;
   const [open, setOpen] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
@@ -5685,7 +5693,9 @@ function Sidebar(_ref) {
             open: open,
             activeItem: activeItem,
             onItemClick: onItemClick,
-            toggleSidebar: setOpen
+            toggleSidebar: setOpen,
+            isOpen: openGroupKey === menu.key,
+            onToggle: () => onGroupToggle === null || onGroupToggle === void 0 ? void 0 : onGroupToggle(menu.key)
           }, "group-".concat(menu.key, "-").concat(menu.name)) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_SidebarItem__WEBPACK_IMPORTED_MODULE_2__["default"], {
             // composite key
             menu: menu,
@@ -48689,80 +48699,80 @@ __webpack_require__.r(__webpack_exports__);
  // Import a spinner icon
 
 
-/**
- * @typedef {'primary'|'secondary'|'tertiary'|'outline'|'destructive'} ButtonRank
+/**
+ * @typedef {'primary'|'secondary'|'tertiary'|'outline'|'destructive'} ButtonRank
  */
 
-/**
- * @typedef {'default'|'disabled'} ButtonState
+/**
+ * @typedef {'default'|'disabled'} ButtonState
  */
 
-/**
- * @typedef {'sm'|'md'|'lg'|'xl'|string} ButtonSize
- *  (Supports custom tailwind text sizes too)
+/**
+ * @typedef {'sm'|'md'|'lg'|'xl'|string} ButtonSize
+ *  (Supports custom tailwind text sizes too)
  */
 
-/**
- * Icon component type from react-icons or your own components
- * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
+/**
+ * Icon component type from react-icons or your own components
+ * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
  */
 
-/**
- * @typedef {Object} ButtonProps
- *
- * @property {'button'|'submit'|'reset'} [type]
- *   Native button type.
- *
- * @property {ButtonRank} [rank]
- *   Visual rank: primary, secondary, etc.
- *
- * @property {ButtonState} [state]
- *   Current state (default, disabled).
- *
- * @property {string} [text]
- *   Text shown inside the button (ignored when isSaving is true).
- *
- * @property {ButtonSize} [size]
- *   Tailwind text size (sm, md, lg, xl).
- *
- * @property {string} [name]
- *   Standard HTML name attribute + for data-cy.
- *
- * @property {string} [dataCy]
- *   Override for auto-generated test selector.
- *
- * @property {number} [tabIndex]
- *
- * @property {boolean} [isFullWidth]
- *   Expand to full container width.
- *
- * @property {IconComponent} [icon]
- *   Optional icon component (left or right).
- *
- * @property {'left'|'right'} [iconPosition]
- *   Position of icon.
- *
- * @property {boolean} [isIconAnimated]
- *   Enables subtle translate animation on hover.
- *
- * @property {boolean} [isSaving]
- *   Shows a spinner and disables all interaction.
- *
- * @property {string} [savingText]
- *   Text shown when isSaving = true.
- *
- * @property {string} [className]
- *   Extra custom classes.
- *
- * @property {string} [title]
- *   Adds accessible label / tooltip.
- *
- * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick]
- *   Click handler. Not called during saving or disabled state.
+/**
+ * @typedef {Object} ButtonProps
+ *
+ * @property {'button'|'submit'|'reset'} [type]
+ *   Native button type.
+ *
+ * @property {ButtonRank} [rank]
+ *   Visual rank: primary, secondary, etc.
+ *
+ * @property {ButtonState} [state]
+ *   Current state (default, disabled).
+ *
+ * @property {string} [text]
+ *   Text shown inside the button (ignored when isSaving is true).
+ *
+ * @property {ButtonSize} [size]
+ *   Tailwind text size (sm, md, lg, xl).
+ *
+ * @property {string} [name]
+ *   Standard HTML name attribute + for data-cy.
+ *
+ * @property {string} [dataCy]
+ *   Override for auto-generated test selector.
+ *
+ * @property {number} [tabIndex]
+ *
+ * @property {boolean} [isFullWidth]
+ *   Expand to full container width.
+ *
+ * @property {IconComponent} [icon]
+ *   Optional icon component (left or right).
+ *
+ * @property {'left'|'right'} [iconPosition]
+ *   Position of icon.
+ *
+ * @property {boolean} [isIconAnimated]
+ *   Enables subtle translate animation on hover.
+ *
+ * @property {boolean} [isSaving]
+ *   Shows a spinner and disables all interaction.
+ *
+ * @property {string} [savingText]
+ *   Text shown when isSaving = true.
+ *
+ * @property {string} [className]
+ *   Extra custom classes.
+ *
+ * @property {string} [title]
+ *   Adds accessible label / tooltip.
+ *
+ * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick]
+ *   Click handler. Not called during saving or disabled state.
  */
 
-/**
- * @param {ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>} props
+/**
+ * @param {ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>} props
  */
 
 function Button(_ref) {
@@ -48794,7 +48804,7 @@ function Button(_ref) {
   // Define styles for button ranks
   const rankStyles = {
     primary: "bg-[--color-primary-btn] hover:bg-[--color-primary-btn-hover] text-[--color-primary-btn-txt] border-solid border-2 border-[--color-primary-btn] hover:border-[--color-primary-btn-hover]",
-    secondary: "bg-transparent border-2 border-2 border-[--color-primary-btn] hover:border-[--color-secondary-btn-hover] hover:text-[--color-secondary-btn-hover] text-[--color-primary-btn]",
+    secondary: "border-2 border-2 bg-[--color-brand-secondary] border-[--color-stroke] hover:bg-[--color-primary-btn-hover] text-[--color-white]",
     tertiary: "bg-transparent underline text-[--color-text-strong]",
     outline: "bg-[--color-input-bg] border-solid border-2 border-[--color-outline-btn] hover:border-[--color-outline-btn-hover] text-[--color-text-strong]",
     destructive: "bg-[--color-destructive-btn] hover:bg-[--color-destructive-btn-hover] text-[--color-destructive-btn-txt] border-solid border-2 border-[--color-destructive-btn] hover:border-[--color-destructive-btn-hover]"
@@ -50661,55 +50671,64 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 
 
 
-/**
- * Icon props used by your dynamic Icon component (optional).
- * @typedef {import('../Icon/Icon').IconProps} IconProps
+/**
+ * Icon props used by your dynamic Icon component (optional).
+ * @typedef {import('../Icon/Icon').IconProps} IconProps
  */
 
-/**
- * A single child menu item.
- * @typedef {Object} SidebarChild
- * @property {string|number} key
- * @property {string} name
- * @property {string} [path]
- * @property {string} [href]
- * @property {IconProps} [iconProps]
+/**
+ * A single child menu item.
+ * @typedef {Object} SidebarChild
+ * @property {string|number} key
+ * @property {string} name
+ * @property {string} [path]
+ * @property {string} [href]
+ * @property {IconProps} [iconProps]
  */
 
-/**
- * Sidebar group object containing children.
- * @typedef {Object} SidebarGroupMenu
- * @property {string|number} key
- * @property {string} name
- * @property {SidebarChild[]} children
- * @property {IconProps} [iconProps]
+/**
+ * Sidebar group object containing children.
+ * @typedef {Object} SidebarGroupMenu
+ * @property {string|number} key
+ * @property {string} name
+ * @property {SidebarChild[]} children
+ * @property {IconProps} [iconProps]
  */
 
-/**
- * Props for SidebarGroup component.
- *
- * @typedef {Object} SidebarGroupProps
- *
- * @property {SidebarGroupMenu} menu
- *   The group menu containing children.
- *
- * @property {boolean} open
- *   Whether the sidebar is currently expanded.
- *
- * @property {string|number|null} activeItem
- *   The currently selected menu item key.
- *
- * @property {(key: string|number) => void} onItemClick
- *   Handler fired when a child item is selected.
- *
- * @property {(open: boolean) => void} toggleSidebar
- *   Used to open the sidebar when clicking a group.
+/**
+ * Props for SidebarGroup component.
+ *
+ * @typedef {Object} SidebarGroupProps
+ *
+ * @property {SidebarGroupMenu} menu
+ *   The group menu containing children.
+ *
+ * @property {boolean} open
+ *   Whether the sidebar itself is expanded (wide mode vs collapsed).
+ *
+ * @property {string|number|null} activeItem
+ *   The currently selected menu item key.
+ *
+ * @property {(key: string|number) => void} onItemClick
+ *   Handler fired when a child item is selected.
+ *
+ * @property {(open: boolean) => void} toggleSidebar
+ *   Opens the sidebar when a user clicks a collapsed group.
+ *
+ *
+ * // NEW CONTROLLED STATE PROPS:
+ *
+ * @property {boolean} isOpen
+ *   Whether THIS group’s children are currently expanded.
+ *
+ * @property {(key: string|number) => void} onToggle
+ *   Fired when the group header is clicked. Parent controls open/close.
  */
 
-/**
- * Fully typed SidebarGroup component.
- *
- * @param {SidebarGroupProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * Fully typed SidebarGroup component.
+ *
+ * @param {SidebarGroupProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function SidebarGroup(_ref) {
@@ -50718,25 +50737,26 @@ function SidebarGroup(_ref) {
     open,
     activeItem,
     onItemClick,
-    toggleSidebar
+    toggleSidebar,
+    isOpen,
+    onToggle
   } = _ref;
-  const [expanded, setExpanded] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
     children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
       className: "group relative flex cursor-pointer items-center justify-between p-4 transition-all duration-500 ease-in-out",
       onClick: () => {
         if (!open) toggleSidebar(true);
-        setExpanded(!expanded);
+        onToggle(menu.key); // let parent handle open/close
       },
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
-        className: "absolute left-0 top-0 h-full w-[5px] rounded-r transition-all duration-300 ease-in-out ".concat(expanded || activeItem === menu.key ? "bg-[--color-brand-primary]" : "bg-[--color-stroke] group-hover:bg-[--color-brand-primary]", " ")
+        className: "absolute left-0 top-0 h-full w-[5px] rounded-r transition-all duration-300 ease-in-out ".concat(isOpen || activeItem === menu.key ? "bg-[--color-brand-primary]" : "bg-[--color-stroke] group-hover:bg-[--color-brand-primary]")
       }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
         className: "flex items-center gap-3",
         children: [menu.iconProps && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Icon_Icon__WEBPACK_IMPORTED_MODULE_4__["default"], _objectSpread({}, menu.iconProps)), !open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
           className: "absolute left-full top-1/2 ml-2 -translate-y-1/2 whitespace-nowrap rounded bg-[--color-primary-bg] px-2 py-1 text-xs text-[--color-text-strong] opacity-0 transition-opacity duration-300 group-hover:opacity-100",
           children: menu.name
         }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
-          className: "overflow-hidden whitespace-nowrap transition-all duration-500 ease-in-out ".concat(open ? "ml-2 w-auto translate-y-0 opacity-100" : "ml-0 w-0 translate-y-2 opacity-0", " "),
+          className: "overflow-hidden whitespace-nowrap transition-all duration-500 ease-in-out ".concat(open ? "ml-2 w-auto translate-y-0 opacity-100" : "ml-0 w-0 translate-y-2 opacity-0"),
           children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_3__["default"], {
             as: "span",
             variant: "label",
@@ -50744,12 +50764,11 @@ function SidebarGroup(_ref) {
           })
         })]
       }), open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__.ChevronDownIcon, {
-        className: "h-4 w-4 transition-transform duration-300 ".concat(expanded ? "rotate-180" : "")
+        className: "h-4 w-4 transition-transform duration-300 ".concat(isOpen ? "rotate-180" : "")
       })]
     }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
-      className: "ml-10 mt-1 overflow-hidden transition-all duration-300 ease-in-out ".concat(expanded && open ? "max-h-96 opacity-100" : "max-h-0 opacity-0"),
+      className: "ml-10 mt-1 overflow-hidden transition-all duration-300 ease-in-out ".concat(isOpen && open ? "max-h-96 opacity-100" : "max-h-0 opacity-0"),
       children: menu.children.map(child => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_SidebarItem__WEBPACK_IMPORTED_MODULE_2__["default"], {
-        // composite unique key
         menu: child,
         open: open,
         active: activeItem === child.key,
@@ -63690,4 +63709,4 @@ __webpack_require__.r(__webpack_exports__);
 module.exports = __webpack_exports__;
 /******/ })()
 ;
-//# sourceMappingURL=opus-components.main.js.map
+//# sourceMappingURL=main.js.map