opus-toolkit-components 1.7.8 → 1.8.0

package/lib/components/Profile/ProfileCard/index.d.ts

@@ -1,12 +1,11 @@
- export interface ProfileCardUser {
-    name: string;
-    role: string;
-  }
+export interface ProfileCardUser {
+  name: string;
+  role: string;
+}
 
-  export interface ProfileCardProps
-    extends React.HTMLAttributes<HTMLDivElement> {
-    user: ProfileCardUser;
-    href?: string;
-  }
+export interface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  user: ProfileCardUser;
+  href?: string;
+}
 
-  export const ProfileCard: React.FC<ProfileCardProps>;
+export const ProfileCard: React.FC<ProfileCardProps>;

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

@@ -1,48 +1,48 @@
- export interface SidebarMenuItem {
-    key: string | number;
-    name: string;
-    icon?: string;
-    href?: string;
-  }
-
-  export interface SidebarMenuGroup {
-    key: string | number;
-    name: string;
-    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;
-
-    /** Controlled open/closed state for menu groups */
-    openGroupKey?: string | number | null;
-
-    /**
-     * Fired when the user clicks a group header.
-     * Use this to update `openGroupKey` in the parent.
-     */
-    onGroupToggle?: (key: string | number) => void;
-  }
-
-  export const Sidebar: React.FC<SidebarProps>;
+export interface SidebarMenuItem {
+  key: string | number;
+  name: string;
+  icon?: string;
+  href?: string;
+}
+
+export interface SidebarMenuGroup {
+  key: string | number;
+  name: string;
+  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;
+
+  /** Controlled open/closed state for menu groups */
+  openGroupKey?: string | number | null;
+
+  /**
+   * Fired when the user clicks a group header.
+   * Use this to update `openGroupKey` in the parent.
+   */
+  onGroupToggle?: (key: string | number) => void;
+}
+
+export const Sidebar: React.FC<SidebarProps>;

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

@@ -1,18 +1,18 @@
 export interface TableColumn {
-    key: string;
-    header: string;
-    render?: (row: any) => React.ReactNode;
-  }
+  key: string;
+  header: string;
+  render?: (row: any) => React.ReactNode;
+}
 
-  export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
-    data?: TableColumn[];
-    rows?: any[];
-    className?: string;
-    rowClassName?: string;
-    cellClassName?: string;
-    headRowClassName?: string;
-    headCellClassName?: string;
-    rowKeyExtractor?: (row: any, index: number) => string | number;
-  }
+export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
+  data?: TableColumn[];
+  rows?: any[];
+  className?: string;
+  rowClassName?: string;
+  cellClassName?: string;
+  headRowClassName?: string;
+  headCellClassName?: string;
+  rowKeyExtractor?: (row: any, index: number) => string | number;
+}
 
-  export const Table: React.FC<TableProps>;
+export const Table: React.FC<TableProps>;

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

@@ -1,25 +1,25 @@
 export type TextVariant =
-    | "h1"
-    | "h2"
-    | "h3"
-    | "h4"
-    | "h5"
-    | "h6"
-    | "body"
-    | "small"
-    | "caption"
-    | "label";
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "body"
+  | "small"
+  | "caption"
+  | "label";
 
-  export type TextAs = keyof JSX.IntrinsicElements | React.ComponentType<any>;
+export type TextAs = keyof JSX.IntrinsicElements | React.ComponentType<any>;
 
-  export interface TextProps extends React.HTMLAttributes<HTMLElement> {
-    variant?: TextVariant;
-    as?: TextAs;
-    className?: string;
-    color?: string;
-    children?: React.ReactNode;
-    name?: string;
-    dataCy?: string;
-  }
+export interface TextProps extends React.HTMLAttributes<HTMLElement> {
+  variant?: TextVariant;
+  as?: TextAs;
+  className?: string;
+  color?: string;
+  children?: React.ReactNode;
+  name?: string;
+  dataCy?: string;
+}
 
-  export const Text: React.FC<TextProps>;
+export const Text: React.FC<TextProps>;

package/lib/main.js

@@ -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:
@@ -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: "border-2 border-2 bg-[--color-brand-secondary] border-[--color-stroke] hover:bg-[--color-primary-btn-hover] text-[--color-white]",
+    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);
+