oolib 2.226.0 → 2.226.2

package/dist/utils/_EXPORTS/index.d.ts

@@ -23,3 +23,4 @@ export { decideLinkCompAndTarget } from "../../components/cards/utils/decideLink
 export { isExternalUrl } from "../../components/cards/utils/isExternalUrl";
 export { getPercentage } from "../getPercentage";
 export { getTotalCount } from "../getTotalCount";
+export { getColorContrast } from "../color";

package/dist/utils/_EXPORTS/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTotalCount = exports.getPercentage = exports.isExternalUrl = exports.decideLinkCompAndTarget = exports.stitchLink = exports.getDaysDiff = exports.useContainerQuery = exports.useScreenWidth = exports.testJSON = exports.useHandleClickOutside = exports.usePopOutOfOverflowHiddenParent = exports.useScroll = exports.isStringMatch = exports.sortData = exports.makeArrayFromLength = exports.toArray = exports.formatCamelCaseToSentenceCase = exports.formatTextToCamelCase = exports.injectHttps = exports.getBlockLabelProps = exports.getKeyCode = exports.getText = exports.deleteVal = exports.setVal = exports.getVal = void 0;
+exports.getColorContrast = exports.getTotalCount = exports.getPercentage = exports.isExternalUrl = exports.decideLinkCompAndTarget = exports.stitchLink = exports.getDaysDiff = exports.useContainerQuery = exports.useScreenWidth = exports.testJSON = exports.useHandleClickOutside = exports.usePopOutOfOverflowHiddenParent = exports.useScroll = exports.isStringMatch = exports.sortData = exports.makeArrayFromLength = exports.toArray = exports.formatCamelCaseToSentenceCase = exports.formatTextToCamelCase = exports.injectHttps = exports.getBlockLabelProps = exports.getKeyCode = exports.getText = exports.deleteVal = exports.setVal = exports.getVal = void 0;
 //the holy setter, getter & deleter
 var getVal_1 = require("../getterSetterDeleter/getVal");
 Object.defineProperty(exports, "getVal", { enumerable: true, get: function () { return getVal_1.getVal; } });
@@ -56,3 +56,5 @@ var getPercentage_1 = require("../getPercentage");
 Object.defineProperty(exports, "getPercentage", { enumerable: true, get: function () { return getPercentage_1.getPercentage; } });
 var getTotalCount_1 = require("../getTotalCount");
 Object.defineProperty(exports, "getTotalCount", { enumerable: true, get: function () { return getTotalCount_1.getTotalCount; } });
+var color_1 = require("../color");
+Object.defineProperty(exports, "getColorContrast", { enumerable: true, get: function () { return color_1.getColorContrast; } });

package/dist/utils/color.d.ts

@@ -1,7 +1,7 @@
 /**
  * Calculates the color contrast ratio between two colors according to WCAG 2.1
- * @param color1 - First color (any CSS color format: hex, rgb, oklch, oklab, color())
- * @param color2 - Second color (any CSS color format: hex, rgb, oklch, oklab, color())
+ * @param color1 - First color (CSS color format: hex, rgb, hsl, oklch, oklab, color())
+ * @param color2 - Second color (CSS color format: hex, rgb, hsl, oklch, oklab, color())
  * @returns Contrast ratio between 1 and 21
  */
 export declare const getColorContrast: (color1: string, color2: string) => number;

package/dist/utils/color.js

@@ -2,6 +2,74 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getColorContrast = void 0;
 var color_1 = require("@texel/color");
+/**
+ * Parses an HSL color string and converts to RGB (0-1 range)
+ * @param hslString - HSL color string like "hsl(252, 83%, 56%)"
+ * @returns [r, g, b] array with values in 0-1 range, or null if invalid
+ */
+var parseHSL = function (hslString) {
+    var match = hslString.match(/hsl\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*\)/i);
+    if (!match)
+        return null;
+    var h = parseFloat(match[1]) / 360;
+    var s = parseFloat(match[2]) / 100;
+    var l = parseFloat(match[3]) / 100;
+    // HSL to RGB conversion
+    if (s === 0) {
+        return [l, l, l];
+    }
+    var hue2rgb = function (p, q, t) {
+        if (t < 0)
+            t += 1;
+        if (t > 1)
+            t -= 1;
+        if (t < 1 / 6)
+            return p + (q - p) * 6 * t;
+        if (t < 1 / 2)
+            return q;
+        if (t < 2 / 3)
+            return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+    };
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    var p = 2 * l - q;
+    var r = hue2rgb(p, q, h + 1 / 3);
+    var g = hue2rgb(p, q, h);
+    var b = hue2rgb(p, q, h - 1 / 3);
+    return [r, g, b];
+};
+/**
+ * Parses a color string to RGB (0-1 range)
+ * Supports: hex, rgb(), hsl(), and formats supported by @texel/color
+ * @param colorString - CSS color string
+ * @returns [r, g, b] array with values in 0-1 range
+ */
+var parseColor = function (colorString) {
+    var trimmed = colorString.trim().toLowerCase();
+    // Handle HSL format (not supported by @texel/color)
+    if (trimmed.startsWith("hsl(")) {
+        var rgb = parseHSL(trimmed);
+        if (rgb)
+            return rgb;
+        throw new Error("Invalid HSL color format: ".concat(colorString));
+    }
+    // Handle hex format
+    if (trimmed.startsWith("#") || /^[0-9a-f]{3,8}$/i.test(trimmed)) {
+        var hex = trimmed.startsWith("#") ? trimmed : "#".concat(trimmed);
+        var rgb = (0, color_1.hexToRGB)(hex);
+        return [rgb[0], rgb[1], rgb[2]];
+    }
+    // Try @texel/color parser for other formats (rgb, oklch, oklab, color())
+    try {
+        var rgb = (0, color_1.parse)(colorString, color_1.sRGB);
+        if (rgb)
+            return [rgb[0], rgb[1], rgb[2]];
+    }
+    catch (_a) {
+        // Fall through to error
+    }
+    throw new Error("Could not parse color string: ".concat(colorString));
+};
 /**
  * Calculates the relative luminance of a color according to WCAG 2.1
  * @param r - Red component (0-1)
@@ -17,17 +85,13 @@ var getRelativeLuminance = function (r, g, b) {
 };
 /**
  * Calculates the color contrast ratio between two colors according to WCAG 2.1
- * @param color1 - First color (any CSS color format: hex, rgb, oklch, oklab, color())
- * @param color2 - Second color (any CSS color format: hex, rgb, oklch, oklab, color())
+ * @param color1 - First color (CSS color format: hex, rgb, hsl, oklch, oklab, color())
+ * @param color2 - Second color (CSS color format: hex, rgb, hsl, oklch, oklab, color())
  * @returns Contrast ratio between 1 and 21
  */
 var getColorContrast = function (color1, color2) {
-    // Parse colors and convert to sRGB (returns [r, g, b] in 0-1 range)
-    var rgb1 = (0, color_1.parse)(color1, color_1.sRGB);
-    var rgb2 = (0, color_1.parse)(color2, color_1.sRGB);
-    if (!rgb1 || !rgb2) {
-        throw new Error("Invalid color format provided");
-    }
+    var rgb1 = parseColor(color1);
+    var rgb2 = parseColor(color2);
     // Get luminance values (rgb values are in 0-1 range)
     var l1 = getRelativeLuminance(rgb1[0], rgb1[1], rgb1[2]);
     var l2 = getRelativeLuminance(rgb2[0], rgb2[1], rgb2[2]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.226.0",
+  "version": "2.226.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -75,6 +75,7 @@
     "typescript": "^5.4.3"
   },
   "peerDependencies": {
+    "@texel/color": "^1.1.10",
     "date-fns": "^2.0.0",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
@@ -96,7 +97,6 @@
     "@material/material-color-utilities": "^0.3.0",
     "@phosphor-icons/react": "^2.1.10",
     "@react-hook/resize-observer": "^1.2.6",
-    "@texel/color": "^1.1.10",
     "babel-polyfill": "^6.26.0",
     "d3": "^7.8.5",
     "d3-collection": "^1.0.7",