@bwp-web/components 1.0.5 → 1.0.6

package/README.md

@@ -11,7 +11,7 @@ npm install @bwp-web/components
 ### Peer Dependencies
 
 - `@bwp-web/styles` >= 1.0.3
-- `@bwp-web/assets` >= 1.0.1
+- `@bwp-web/assets` >= 1.0.2
 - `@mui/material` >= 7.0.0
 - `react` >= 18.0.0
 - `react-dom` >= 18.0.0
@@ -48,6 +48,7 @@ For `BiampTable` only:
 | `SegmentedButtonGroup`  | Horizontal container for grouping segmented toggle buttons                       |
 | `SegmentedButton`       | Individual toggle button for use inside `SegmentedButtonGroup`                   |
 | `BiampTable`            | Composable data table with sorting, selection, pagination, and more              |
+| `UserInitialsIcon`      | Avatar-style icon showing a user's initials with a deterministic color           |
 
 ## Usage
 
@@ -216,6 +217,28 @@ Horizontal header container. Compose with `BiampHeaderTitle`, `BiampHeaderSearch
 | `title`    | `string`          | Optional title text    |
 | `subtitle` | `string`          | Optional subtitle text |
 
+### UserInitialsIcon
+
+An avatar-style icon that displays a user's initials over a deterministic background color. The color is seeded by the user's `id`, so the same user always gets the same color. The icon scales proportionally — font size adjusts automatically with `width`/`height`.
+
+```tsx
+import { UserInitialsIcon } from '@bwp-web/components';
+
+<UserInitialsIcon name="Jane Doe" id="user-123" />
+<UserInitialsIcon name="Jane Doe" id="user-123" width={64} height={64} />
+```
+
+#### UserInitialsIcon Props
+
+| Prop     | Type       | Default | Description                                                 |
+| -------- | ---------- | ------- | ----------------------------------------------------------- |
+| `name`   | `string`   | —       | Full name; initials are derived from the first two words    |
+| `id`     | `string`   | —       | Seed for deterministic background and text color            |
+| `width`  | `number`   | `40`    | Icon width in pixels                                        |
+| `height` | `number`   | `40`    | Icon height in pixels                                       |
+| `sx`     | `SxProps`  | —       | MUI `sx` style overrides                                    |
+| `...`    | `BoxProps` | —       | All other MUI `Box` props are forwarded to the root element |
+
 ### BiampTable
 
 A composable data table built on TanStack React Table v8 with support for sorting, row selection, pagination, column visibility, global search, column filters, and CSV export.
@@ -235,3 +258,4 @@ Detailed per-component docs are available in the repository's [`/docs`](../../do
 | [biamp-banner.md](../../docs/biamp-banner.md)               | `BiampBanner` family — props, examples, design details                              |
 | [biamp-global-search.md](../../docs/biamp-global-search.md) | `BiampGlobalSearch` — options, filtering, async loading, navigation                 |
 | [biamp-table.md](../../docs/biamp-table.md)                 | `BiampTable` — columns, sorting, selection, pagination, filters, export             |
+| [user-initials-icon.md](../../docs/user-initials-icon.md)   | `UserInitialsIcon` — props, color seeding, sizing, edge cases                       |

package/dist/UserInitialsIcon/UserInitialsIcon.d.ts

@@ -0,0 +1,8 @@
+import { BoxProps } from '@mui/material';
+type Props = BoxProps & {
+    name: string;
+    id: string;
+};
+export declare function UserInitialsIcon({ name, id, width, height, sx, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=UserInitialsIcon.d.ts.map

package/dist/UserInitialsIcon/UserInitialsIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserInitialsIcon.d.ts","sourceRoot":"","sources":["../../src/UserInitialsIcon/UserInitialsIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAc,MAAM,eAAe,CAAC;AAI1D,KAAK,KAAK,GAAG,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAKF,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,EAAE,EACF,KAAoB,EACpB,MAAqB,EACrB,EAAE,EACF,GAAG,KAAK,EACT,EAAE,KAAK,2CAkCP"}

package/dist/UserInitialsIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { UserInitialsIcon } from './UserInitialsIcon';
+//# sourceMappingURL=index.d.ts.map

package/dist/UserInitialsIcon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/UserInitialsIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.cjs

@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,6 +30,373 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// ../../node_modules/randomcolor/randomColor.js
+var require_randomColor = __commonJS({
+  "../../node_modules/randomcolor/randomColor.js"(exports2, module2) {
+    "use strict";
+    (function(root, factory) {
+      if (typeof exports2 === "object") {
+        var randomColor2 = factory();
+        if (typeof module2 === "object" && module2 && module2.exports) {
+          exports2 = module2.exports = randomColor2;
+        }
+        exports2.randomColor = randomColor2;
+      } else if (typeof define === "function" && define.amd) {
+        define([], factory);
+      } else {
+        root.randomColor = factory();
+      }
+    })(exports2, function() {
+      var seed = null;
+      var colorDictionary = {};
+      loadColorBounds();
+      var colorRanges = [];
+      var randomColor2 = function(options) {
+        options = options || {};
+        if (options.seed !== void 0 && options.seed !== null && options.seed === parseInt(options.seed, 10)) {
+          seed = options.seed;
+        } else if (typeof options.seed === "string") {
+          seed = stringToInteger(options.seed);
+        } else if (options.seed !== void 0 && options.seed !== null) {
+          throw new TypeError("The seed value must be an integer or string");
+        } else {
+          seed = null;
+        }
+        var H, S, B;
+        if (options.count !== null && options.count !== void 0) {
+          var totalColors = options.count, colors = [];
+          for (var i = 0; i < options.count; i++) {
+            colorRanges.push(false);
+          }
+          options.count = null;
+          while (totalColors > colors.length) {
+            var color = randomColor2(options);
+            if (seed !== null) {
+              options.seed = seed;
+            }
+            colors.push(color);
+          }
+          options.count = totalColors;
+          return colors;
+        }
+        H = pickHue(options);
+        S = pickSaturation(H, options);
+        B = pickBrightness(H, S, options);
+        return setFormat([H, S, B], options);
+      };
+      function pickHue(options) {
+        if (colorRanges.length > 0) {
+          var hueRange = getRealHueRange(options.hue);
+          var hue = randomWithin(hueRange);
+          var step = (hueRange[1] - hueRange[0]) / colorRanges.length;
+          var j = parseInt((hue - hueRange[0]) / step);
+          if (colorRanges[j] === true) {
+            j = (j + 2) % colorRanges.length;
+          } else {
+            colorRanges[j] = true;
+          }
+          var min = (hueRange[0] + j * step) % 359, max = (hueRange[0] + (j + 1) * step) % 359;
+          hueRange = [min, max];
+          hue = randomWithin(hueRange);
+          if (hue < 0) {
+            hue = 360 + hue;
+          }
+          return hue;
+        } else {
+          var hueRange = getHueRange(options.hue);
+          hue = randomWithin(hueRange);
+          if (hue < 0) {
+            hue = 360 + hue;
+          }
+          return hue;
+        }
+      }
+      function pickSaturation(hue, options) {
+        if (options.hue === "monochrome") {
+          return 0;
+        }
+        if (options.luminosity === "random") {
+          return randomWithin([0, 100]);
+        }
+        var saturationRange = getSaturationRange(hue);
+        var sMin = saturationRange[0], sMax = saturationRange[1];
+        switch (options.luminosity) {
+          case "bright":
+            sMin = 55;
+            break;
+          case "dark":
+            sMin = sMax - 10;
+            break;
+          case "light":
+            sMax = 55;
+            break;
+        }
+        return randomWithin([sMin, sMax]);
+      }
+      function pickBrightness(H, S, options) {
+        var bMin = getMinimumBrightness(H, S), bMax = 100;
+        switch (options.luminosity) {
+          case "dark":
+            bMax = bMin + 20;
+            break;
+          case "light":
+            bMin = (bMax + bMin) / 2;
+            break;
+          case "random":
+            bMin = 0;
+            bMax = 100;
+            break;
+        }
+        return randomWithin([bMin, bMax]);
+      }
+      function setFormat(hsv, options) {
+        switch (options.format) {
+          case "hsvArray":
+            return hsv;
+          case "hslArray":
+            return HSVtoHSL(hsv);
+          case "hsl":
+            var hsl = HSVtoHSL(hsv);
+            return "hsl(" + hsl[0] + ", " + hsl[1] + "%, " + hsl[2] + "%)";
+          case "hsla":
+            var hslColor = HSVtoHSL(hsv);
+            var alpha4 = options.alpha || Math.random();
+            return "hsla(" + hslColor[0] + ", " + hslColor[1] + "%, " + hslColor[2] + "%, " + alpha4 + ")";
+          case "rgbArray":
+            return HSVtoRGB(hsv);
+          case "rgb":
+            var rgb = HSVtoRGB(hsv);
+            return "rgb(" + rgb.join(", ") + ")";
+          case "rgba":
+            var rgbColor = HSVtoRGB(hsv);
+            var alpha4 = options.alpha || Math.random();
+            return "rgba(" + rgbColor.join(", ") + ", " + alpha4 + ")";
+          default:
+            return HSVtoHex(hsv);
+        }
+      }
+      function getMinimumBrightness(H, S) {
+        var lowerBounds = getColorInfo(H).lowerBounds;
+        for (var i = 0; i < lowerBounds.length - 1; i++) {
+          var s1 = lowerBounds[i][0], v1 = lowerBounds[i][1];
+          var s2 = lowerBounds[i + 1][0], v2 = lowerBounds[i + 1][1];
+          if (S >= s1 && S <= s2) {
+            var m = (v2 - v1) / (s2 - s1), b = v1 - m * s1;
+            return m * S + b;
+          }
+        }
+        return 0;
+      }
+      function getHueRange(colorInput) {
+        if (typeof parseInt(colorInput) === "number") {
+          var number = parseInt(colorInput);
+          if (number < 360 && number > 0) {
+            return [number, number];
+          }
+        }
+        if (typeof colorInput === "string") {
+          if (colorDictionary[colorInput]) {
+            var color = colorDictionary[colorInput];
+            if (color.hueRange) {
+              return color.hueRange;
+            }
+          } else if (colorInput.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)) {
+            var hue = HexToHSB(colorInput)[0];
+            return [hue, hue];
+          }
+        }
+        return [0, 360];
+      }
+      function getSaturationRange(hue) {
+        return getColorInfo(hue).saturationRange;
+      }
+      function getColorInfo(hue) {
+        if (hue >= 334 && hue <= 360) {
+          hue -= 360;
+        }
+        for (var colorName in colorDictionary) {
+          var color = colorDictionary[colorName];
+          if (color.hueRange && hue >= color.hueRange[0] && hue <= color.hueRange[1]) {
+            return colorDictionary[colorName];
+          }
+        }
+        return "Color not found";
+      }
+      function randomWithin(range) {
+        if (seed === null) {
+          var golden_ratio = 0.618033988749895;
+          var r = Math.random();
+          r += golden_ratio;
+          r %= 1;
+          return Math.floor(range[0] + r * (range[1] + 1 - range[0]));
+        } else {
+          var max = range[1] || 1;
+          var min = range[0] || 0;
+          seed = (seed * 9301 + 49297) % 233280;
+          var rnd = seed / 233280;
+          return Math.floor(min + rnd * (max - min));
+        }
+      }
+      function HSVtoHex(hsv) {
+        var rgb = HSVtoRGB(hsv);
+        function componentToHex(c) {
+          var hex2 = c.toString(16);
+          return hex2.length == 1 ? "0" + hex2 : hex2;
+        }
+        var hex = "#" + componentToHex(rgb[0]) + componentToHex(rgb[1]) + componentToHex(rgb[2]);
+        return hex;
+      }
+      function defineColor(name, hueRange, lowerBounds) {
+        var sMin = lowerBounds[0][0], sMax = lowerBounds[lowerBounds.length - 1][0], bMin = lowerBounds[lowerBounds.length - 1][1], bMax = lowerBounds[0][1];
+        colorDictionary[name] = {
+          hueRange,
+          lowerBounds,
+          saturationRange: [sMin, sMax],
+          brightnessRange: [bMin, bMax]
+        };
+      }
+      function loadColorBounds() {
+        defineColor(
+          "monochrome",
+          null,
+          [[0, 0], [100, 0]]
+        );
+        defineColor(
+          "red",
+          [-26, 18],
+          [[20, 100], [30, 92], [40, 89], [50, 85], [60, 78], [70, 70], [80, 60], [90, 55], [100, 50]]
+        );
+        defineColor(
+          "orange",
+          [18, 46],
+          [[20, 100], [30, 93], [40, 88], [50, 86], [60, 85], [70, 70], [100, 70]]
+        );
+        defineColor(
+          "yellow",
+          [46, 62],
+          [[25, 100], [40, 94], [50, 89], [60, 86], [70, 84], [80, 82], [90, 80], [100, 75]]
+        );
+        defineColor(
+          "green",
+          [62, 178],
+          [[30, 100], [40, 90], [50, 85], [60, 81], [70, 74], [80, 64], [90, 50], [100, 40]]
+        );
+        defineColor(
+          "blue",
+          [178, 257],
+          [[20, 100], [30, 86], [40, 80], [50, 74], [60, 60], [70, 52], [80, 44], [90, 39], [100, 35]]
+        );
+        defineColor(
+          "purple",
+          [257, 282],
+          [[20, 100], [30, 87], [40, 79], [50, 70], [60, 65], [70, 59], [80, 52], [90, 45], [100, 42]]
+        );
+        defineColor(
+          "pink",
+          [282, 334],
+          [[20, 100], [30, 90], [40, 86], [60, 84], [80, 80], [90, 75], [100, 73]]
+        );
+      }
+      function HSVtoRGB(hsv) {
+        var h = hsv[0];
+        if (h === 0) {
+          h = 1;
+        }
+        if (h === 360) {
+          h = 359;
+        }
+        h = h / 360;
+        var s = hsv[1] / 100, v = hsv[2] / 100;
+        var h_i = Math.floor(h * 6), f = h * 6 - h_i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s), r = 256, g = 256, b = 256;
+        switch (h_i) {
+          case 0:
+            r = v;
+            g = t;
+            b = p;
+            break;
+          case 1:
+            r = q;
+            g = v;
+            b = p;
+            break;
+          case 2:
+            r = p;
+            g = v;
+            b = t;
+            break;
+          case 3:
+            r = p;
+            g = q;
+            b = v;
+            break;
+          case 4:
+            r = t;
+            g = p;
+            b = v;
+            break;
+          case 5:
+            r = v;
+            g = p;
+            b = q;
+            break;
+        }
+        var result = [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)];
+        return result;
+      }
+      function HexToHSB(hex) {
+        hex = hex.replace(/^#/, "");
+        hex = hex.length === 3 ? hex.replace(/(.)/g, "$1$1") : hex;
+        var red = parseInt(hex.substr(0, 2), 16) / 255, green = parseInt(hex.substr(2, 2), 16) / 255, blue = parseInt(hex.substr(4, 2), 16) / 255;
+        var cMax = Math.max(red, green, blue), delta = cMax - Math.min(red, green, blue), saturation = cMax ? delta / cMax : 0;
+        switch (cMax) {
+          case red:
+            return [60 * ((green - blue) / delta % 6) || 0, saturation, cMax];
+          case green:
+            return [60 * ((blue - red) / delta + 2) || 0, saturation, cMax];
+          case blue:
+            return [60 * ((red - green) / delta + 4) || 0, saturation, cMax];
+        }
+      }
+      function HSVtoHSL(hsv) {
+        var h = hsv[0], s = hsv[1] / 100, v = hsv[2] / 100, k = (2 - s) * v;
+        return [
+          h,
+          Math.round(s * v / (k < 1 ? k : 2 - k) * 1e4) / 100,
+          k / 2 * 100
+        ];
+      }
+      function stringToInteger(string) {
+        var total = 0;
+        for (var i = 0; i !== string.length; i++) {
+          if (total >= Number.MAX_SAFE_INTEGER) break;
+          total += string.charCodeAt(i);
+        }
+        return total;
+      }
+      function getRealHueRange(colorHue) {
+        if (!isNaN(colorHue)) {
+          var number = parseInt(colorHue);
+          if (number < 360 && number > 0) {
+            return getColorInfo(colorHue).hueRange;
+          }
+        } else if (typeof colorHue === "string") {
+          if (colorDictionary[colorHue]) {
+            var color = colorDictionary[colorHue];
+            if (color.hueRange) {
+              return color.hueRange;
+            }
+          } else if (colorHue.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)) {
+            var hue = HexToHSB(colorHue)[0];
+            return getColorInfo(hue).hueRange;
+          }
+        }
+        return [0, 360];
+      }
+      return randomColor2;
+    });
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
@@ -70,6 +440,7 @@ __export(index_exports, {
   BiampWrapper: () => BiampWrapper,
   SegmentedButton: () => SegmentedButton,
   SegmentedButtonGroup: () => SegmentedButtonGroup,
+  UserInitialsIcon: () => UserInitialsIcon,
   buildCsvString: () => buildCsvString,
   exportToCsv: () => exportToCsv,
   getColumnVisibilityDirtyCount: () => getColumnVisibilityDirtyCount,
@@ -2324,6 +2695,62 @@ function BiampGlobalSearch({
     }
   );
 }
+
+// src/UserInitialsIcon/UserInitialsIcon.tsx
+var import_material22 = require("@mui/material");
+var import_styles2 = require("@mui/material/styles");
+var import_randomcolor = __toESM(require_randomColor(), 1);
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var DEFAULT_SIZE = 40;
+var TEXT_RATIO = 0.4;
+function UserInitialsIcon({
+  name,
+  id,
+  width = DEFAULT_SIZE,
+  height = DEFAULT_SIZE,
+  sx,
+  ...props
+}) {
+  const userInitials = getInitials(name);
+  const bgColor = (0, import_randomcolor.default)({ luminosity: "light", seed: id });
+  const textColor = (0, import_styles2.darken)((0, import_randomcolor.default)({ luminosity: "dark", seed: id }), 0.3);
+  const size = typeof width === "number" ? width : DEFAULT_SIZE;
+  const fontSize = size * TEXT_RATIO;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_material22.Box,
+    {
+      minWidth: width,
+      width,
+      minHeight: height,
+      height,
+      borderRadius: 1.5,
+      bgcolor: bgColor,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      sx: { ...sx },
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        import_material22.Typography,
+        {
+          variant: "h3",
+          color: textColor,
+          sx: {
+            userSelect: "none",
+            fontSize: size !== DEFAULT_SIZE ? `${fontSize}px` : void 0
+          },
+          children: userInitials
+        }
+      )
+    }
+  );
+}
+var getInitials = (name) => {
+  if (!name) return "--";
+  const words = name.trim().split(/\s+/);
+  const initials = words.filter(Boolean).slice(0, 2).map((word) => word[0].toUpperCase()).join("");
+  return initials;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BIAMP_TABLE_DEBOUNCE_DELAY,
@@ -2366,6 +2793,7 @@ function BiampGlobalSearch({
   BiampWrapper,
   SegmentedButton,
   SegmentedButtonGroup,
+  UserInitialsIcon,
   buildCsvString,
   exportToCsv,
   getColumnVisibilityDirtyCount,