opus-toolkit-components 1.7.6 → 1.7.9

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 => {
@@ -22489,7 +22489,11 @@ class Virtualizer {
     this.isScrolling = false;
     this.measurementsCache = [];
     this.itemSizeCache = /* @__PURE__ */ new Map();
+    this.laneAssignments = /* @__PURE__ */ new Map();
     this.pendingMeasuredCacheIndexes = [];
+    this.prevLanes = void 0;
+    this.lanesChangedFlag = false;
+    this.lanesSettling = false;
     this.scrollRect = null;
     this.scrollOffset = null;
     this.scrollDirection = null;
@@ -22688,47 +22692,99 @@ class Virtualizer {
         this.options.paddingStart,
         this.options.scrollMargin,
         this.options.getItemKey,
-        this.options.enabled
+        this.options.enabled,
+        this.options.lanes
       ],
-      (count, paddingStart, scrollMargin, getItemKey, enabled) => {
+      (count, paddingStart, scrollMargin, getItemKey, enabled, lanes) => {
+        const lanesChanged = this.prevLanes !== void 0 && this.prevLanes !== lanes;
+        if (lanesChanged) {
+          this.lanesChangedFlag = true;
+        }
+        this.prevLanes = lanes;
         this.pendingMeasuredCacheIndexes = [];
         return {
           count,
           paddingStart,
           scrollMargin,
           getItemKey,
-          enabled
+          enabled,
+          lanes
         };
       },
       {
-        key: false
+        key: false,
+        skipInitialOnChange: true,
+        onChange: () => {
+          this.notify(this.isScrolling);
+        }
       }
     );
     this.getMeasurements = (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.memo)(
       () => [this.getMeasurementOptions(), this.itemSizeCache],
-      ({ count, paddingStart, scrollMargin, getItemKey, enabled }, itemSizeCache) => {
+      ({ count, paddingStart, scrollMargin, getItemKey, enabled, lanes }, itemSizeCache) => {
         if (!enabled) {
           this.measurementsCache = [];
           this.itemSizeCache.clear();
+          this.laneAssignments.clear();
           return [];
         }
+        if (this.laneAssignments.size > count) {
+          for (const index of this.laneAssignments.keys()) {
+            if (index >= count) {
+              this.laneAssignments.delete(index);
+            }
+          }
+        }
+        if (this.lanesChangedFlag) {
+          this.lanesChangedFlag = false;
+          this.lanesSettling = true;
+          this.measurementsCache = [];
+          this.itemSizeCache.clear();
+          this.laneAssignments.clear();
+          this.pendingMeasuredCacheIndexes = [];
+        }
         if (this.measurementsCache.length === 0) {
           this.measurementsCache = this.options.initialMeasurementsCache;
           this.measurementsCache.forEach((item) => {
             this.itemSizeCache.set(item.key, item.size);
           });
         }
-        const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
+        const min = this.lanesSettling ? 0 : this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
         this.pendingMeasuredCacheIndexes = [];
+        if (this.lanesSettling && this.measurementsCache.length === count) {
+          this.lanesSettling = false;
+        }
         const measurements = this.measurementsCache.slice(0, min);
+        const laneLastIndex = new Array(lanes).fill(
+          void 0
+        );
+        for (let m = 0; m < min; m++) {
+          const item = measurements[m];
+          if (item) {
+            laneLastIndex[item.lane] = m;
+          }
+        }
         for (let i = min; i < count; i++) {
           const key = getItemKey(i);
-          const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
-          const start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
+          const cachedLane = this.laneAssignments.get(i);
+          let lane;
+          let start;
+          if (cachedLane !== void 0 && this.options.lanes > 1) {
+            lane = cachedLane;
+            const prevIndex = laneLastIndex[lane];
+            const prevInLane = prevIndex !== void 0 ? measurements[prevIndex] : void 0;
+            start = prevInLane ? prevInLane.end + this.options.gap : paddingStart + scrollMargin;
+          } else {
+            const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
+            start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
+            lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
+            if (this.options.lanes > 1) {
+              this.laneAssignments.set(i, lane);
+            }
+          }
           const measuredSize = itemSizeCache.get(key);
           const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
           const end = start + size;
-          const lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
           measurements[i] = {
             index: i,
             start,
@@ -22737,6 +22793,7 @@ class Virtualizer {
             key,
             lane
           };
+          laneLastIndex[lane] = i;
         }
         this.measurementsCache = measurements;
         return measurements;
@@ -23028,6 +23085,7 @@ class Virtualizer {
     };
     this.measure = () => {
       this.itemSizeCache = /* @__PURE__ */ new Map();
+      this.laneAssignments = /* @__PURE__ */ new Map();
       this.notify(false);
     };
     this.setOptions(opts);
@@ -23359,6 +23417,78 @@ function $bdb11010cef70236$export$b4cc09c592e8fdb8(depArray = []) {
 //# sourceMappingURL=useId.module.js.map
 
 
+/***/ }),
+
+/***/ 43155:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ IconButton)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9206);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _utils_getDataCy__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(67339);
+/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(57739);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(94178);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__);
+const _excluded = ["rank", "size", "title", "iconName", "iconLibrary", "isFullWidth", "className", "name", "dataCy"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+
+
+
+
+const rankStyles = {
+  primary: "bg-[--color-primary-btn] hover:bg-[--color-primary-btn-hover] text-[--color-primary-btn-txt] border-2 border-[--color-primary-btn] hover:border-[--color-primary-btn-hover] rounded-full",
+  secondary: "bg-[--color-brand-secondary] text-[--color-white] border-2 border-[--color-stroke] hover:bg-[--color-primary-btn-hover] hover:border-[--color-primary-btn-hover] rounded-full",
+  outline: "bg-[--color-input-bg] border-2 border-[--color-stroke] hover:border-[--color-text-strong] text-[--color-text-strong] rounded-full",
+  destructive: "bg-[--color-destructive-btn] hover:bg-[--color-destructive-btn-hover] text-[--color-destructive-btn-txt] border-2 border-[--color-destructive-btn] hover:border-[--color-destructive-btn-hover] rounded-full"
+};
+
+// Map button size to icon size in pixels
+const iconSizes = {
+  sm: 16,
+  md: 20,
+  lg: 24
+};
+const DEFAULT_ICON = "PlusIcon";
+function IconButton(_ref) {
+  let {
+      rank = "primary",
+      size = "md",
+      title = "Icon Button",
+      iconName = DEFAULT_ICON,
+      iconLibrary = "hero",
+      // 'hero' or 'c247'
+      isFullWidth = false,
+      className = "",
+      name,
+      dataCy
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const classNames = "\n    ".concat(rankStyles[rank] || rankStyles.primary, "\n    flex\n    items-center\n    justify-center\n   p-3\n    transition\n    ease-in-out\n    duration-700\n    hover:shadow-lg\n    ").concat(isFullWidth ? "w-full" : "", "\n    ").concat(className, "\n  ");
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("button", _objectSpread(_objectSpread(_objectSpread({
+    title: title,
+    name: name,
+    className: classNames
+  }, rest), (0,_utils_getDataCy__WEBPACK_IMPORTED_MODULE_1__.getDataCy)({
+    name,
+    dataCy
+  })), {}, {
+    children: iconName && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Icon_Icon__WEBPACK_IMPORTED_MODULE_2__["default"], {
+      name: iconName,
+      library: iconLibrary,
+      size: iconSizes[size] || iconSizes.md
+    })
+  }));
+}
+
 /***/ }),
 
 /***/ 43199:
@@ -48699,80 +48829,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) {
@@ -48804,7 +48934,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-secondary-btn] 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]"
@@ -52068,8 +52198,9 @@ __webpack_require__.r(__webpack_exports__);
 function memo(getDeps, fn, opts) {
   let deps = opts.initialDeps ?? [];
   let result;
+  let isInitial = true;
   function memoizedFunction() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     let depTime;
     if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts))) depTime = Date.now();
     const newDeps = getDeps();
@@ -52104,7 +52235,10 @@ function memo(getDeps, fn, opts) {
         opts == null ? void 0 : opts.key
       );
     }
-    (_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
+    if ((opts == null ? void 0 : opts.onChange) && !(isInitial && opts.skipInitialOnChange)) {
+      opts.onChange(result);
+    }
+    isInitial = false;
     return result;
   }
   memoizedFunction.updateDeps = (newDeps) => {
@@ -63650,6 +63784,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   Footer: () => (/* reexport safe */ _components_Footer_Footer__WEBPACK_IMPORTED_MODULE_18__["default"]),
 /* harmony export */   Header: () => (/* reexport safe */ _components_Header_Header__WEBPACK_IMPORTED_MODULE_16__["default"]),
 /* harmony export */   Icon: () => (/* reexport safe */ _components_Icon_Icon__WEBPACK_IMPORTED_MODULE_17__["default"]),
+/* harmony export */   IconButton: () => (/* reexport safe */ _components_IconButton_IconButton__WEBPACK_IMPORTED_MODULE_22__["default"]),
 /* harmony export */   Input: () => (/* reexport safe */ _components_Forms_Inputs_Input__WEBPACK_IMPORTED_MODULE_3__["default"]),
 /* harmony export */   Loader: () => (/* reexport safe */ _components_Loader_Loader__WEBPACK_IMPORTED_MODULE_11__["default"]),
 /* harmony export */   Modal: () => (/* reexport safe */ _components_Modals_Modal__WEBPACK_IMPORTED_MODULE_10__["default"]),
@@ -63684,6 +63819,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_PageTemplate_PageTemplate__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(3179);
 /* harmony import */ var _components_BarLayout_BarLayout__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(7779);
 /* harmony import */ var _components_Profile_ProfileCard_ProfileCard__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(64977);
+/* harmony import */ var _components_IconButton_IconButton__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(43155);
+
 
 
 
@@ -63709,4 +63846,4 @@ __webpack_require__.r(__webpack_exports__);
 module.exports = __webpack_exports__;
 /******/ })()
 ;
-//# sourceMappingURL=opus-components.main.js.map
+//# sourceMappingURL=main.js.map