oolib 2.225.10 → 2.226.0

package/dist/stories/v2/components/List.stories.js

@@ -29,14 +29,15 @@ var ListItem_1 = require("../../../v2/components/List/comps/ListItem");
 var dropdownOptions_1 = require("./Dropdown/dropdownOptions");
 var availableColors = __spreadArray([undefined], Object.keys(__1.colors2).sort(), true);
 var availableIcons = __spreadArray([undefined], Object.keys(__1.icons).sort(), true);
+var longText = "If music be the food of love, play on;\n                      Give me excess of it, that, surfeiting,\n                      The appetite may sicken, and so die.\n                      That strain again! it had a dying fall:\n                      O, it came o'er my ear like the sweet sound,\n                      That breathes upon a bank of violets,\n                      Stealing and giving odour! Enough; no more:\n                      'Tis not so sweet now as it was before.\n                      O spirit of love! how quick and fresh art thou,\n                      That, notwithstanding thy capacity\n                      Receiveth as the sea, nought enters there,\n                      Of what validity and pitch soe'er,\n                      But falls into abatement and low price,\n                      Even in a minute: so full of shapes is fancy\n                      That it alone is high fantastical.";
 var dropdownOptions = [
     {
-        display: "Option with a slightly longer name",
+        display: longText,
         value: "india",
         color: themes_1.colors.lightRed,
         // image: "xyz",
         icon: "CirclesFour",
-        desc: "There is this one very annoying bug in the list component. basically the options ka description na, I was trying to put a 3 line line clamp on it. but for that to work, the outer wrapper of both the display and description cannot have ellipsis. but if I remove that ellipsis horizontal scroll comes. its a complete brain fry\u2026 could you check it out? in case you have a quick solution for it?",
+        desc: longText,
         // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
     },
     {

package/dist/utils/color.d.ts

@@ -0,0 +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())
+ * @returns Contrast ratio between 1 and 21
+ */
+export declare const getColorContrast: (color1: string, color2: string) => number;

package/dist/utils/color.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColorContrast = void 0;
+var color_1 = require("@texel/color");
+/**
+ * Calculates the relative luminance of a color according to WCAG 2.1
+ * @param r - Red component (0-1)
+ * @param g - Green component (0-1)
+ * @param b - Blue component (0-1)
+ * @returns Relative luminance value
+ */
+var getRelativeLuminance = function (r, g, b) {
+    var _a = [r, g, b].map(function (c) {
+        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    }), rs = _a[0], gs = _a[1], bs = _a[2];
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+};
+/**
+ * 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())
+ * @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");
+    }
+    // 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]);
+    // Calculate contrast ratio (lighter color + 0.05) / (darker color + 0.05)
+    var lighter = Math.max(l1, l2);
+    var darker = Math.min(l1, l2);
+    return (lighter + 0.05) / (darker + 0.05);
+};
+exports.getColorContrast = getColorContrast;

package/dist/v2/components/List/comps/ListItem.js

@@ -96,7 +96,8 @@ var ListItem = function (_a) {
                     marginTop: "0.1rem",
                     display: "flex",
                     alignItems: "center",
-                    gap: "0.5rem"
+                    gap: "0.5rem",
+                    flex: "none"
                 } },
                 alignCheckbox === "left" && renderCheckBox(),
                 icon &&

package/dist/v2/components/List/comps/styled.js

@@ -13,6 +13,8 @@ var themes_1 = require("../../../themes");
 var getDynamicColors_1 = require("../../../themes/utils/getDynamicColors");
 var mixins_1 = require("../../../../themes/mixins");
 var grey10 = themes_1.colors.grey10;
+var textLineClamp = 2;
+var descriptionLineClamp = 3;
 exports.StyledListItemWrapper = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* padding: ", "; */\n  padding: 0.8rem;\n  border-radius: 0.4rem;\n  gap: 1rem;\n\n  justify-content: space-between;\n\n  background-color: ", ";\n\n  .OKE-Dropdown__optionText {\n    color: ", ";\n  }\n\n  .OKE-Dropdown__optionIcon {\n    color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:first-of-type {\n    /* margin-top: 0.4rem; */\n  }\n\n  &:last-of-type {\n    /* margin-bottom: 0.4rem; */\n  }\n\n  .OKE-Dropdown__optionDesc {\n    ", "\n    white-space: normal;\n  }\n\n  .OKE-Dropdown__optionImg {\n    flex: 0 0 auto;\n  }\n\n  .OKE-Dropdown__checkboxClickArea {\n    position: absolute;\n    width: 2rem;\n    height: 2rem;\n  }\n  .OKE-Dropdown__checkboxClickArea-box {\n    margin-top: 0.2rem;\n    flex-shrink: 0;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  /* padding: ", "; */\n  padding: 0.8rem;\n  border-radius: 0.4rem;\n  gap: 1rem;\n\n  justify-content: space-between;\n\n  background-color: ", ";\n\n  .OKE-Dropdown__optionText {\n    color: ", ";\n  }\n\n  .OKE-Dropdown__optionIcon {\n    color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:first-of-type {\n    /* margin-top: 0.4rem; */\n  }\n\n  &:last-of-type {\n    /* margin-bottom: 0.4rem; */\n  }\n\n  .OKE-Dropdown__optionDesc {\n    ", "\n    white-space: normal;\n  }\n\n  .OKE-Dropdown__optionImg {\n    flex: 0 0 auto;\n  }\n\n  .OKE-Dropdown__checkboxClickArea {\n    position: absolute;\n    width: 2rem;\n    height: 2rem;\n  }\n  .OKE-Dropdown__checkboxClickArea-box {\n    margin-top: 0.2rem;\n    flex-shrink: 0;\n  }\n"])), function (_a) {
     var S = _a.S;
     return (S ? "0.8rem" : "0.6rem 0.8rem");
@@ -28,7 +30,7 @@ exports.StyledListItemWrapper = styled_components_1.default.li(templateObject_1
 }, themes_1.colors.grey80, themes_1.colors.grey80, function (_a) {
     var theme = _a.theme;
     return "".concat(grey10);
-}, (0, mixins_1.clampText)(3));
+}, (0, mixins_1.clampText)(descriptionLineClamp));
 exports.StyledRightSection = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 0.1rem;\n  display: flex;\n  gap: 0.5rem;\n  align-self: flex-start;\n  justify-content: space-between;\n"], ["\n  margin-top: 0.1rem;\n  display: flex;\n  gap: 0.5rem;\n  align-self: flex-start;\n  justify-content: space-between;\n"])));
-exports.StyledWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  overflow: hidden;\n  min-width: 0;\n  flex: 1;\n  \n  /* Ensure direct child divs can shrink below content width */\n  > div {\n    min-width: 0;\n  }\n  \n  .OKE-Dropdown__optionText {\n    ", "\n  }\n"], ["\n  overflow: hidden;\n  min-width: 0;\n  flex: 1;\n  \n  /* Ensure direct child divs can shrink below content width */\n  > div {\n    min-width: 0;\n  }\n  \n  .OKE-Dropdown__optionText {\n    ", "\n  }\n"])), mixins_1.ellipsis);
+exports.StyledWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  overflow: hidden;\n  min-width: 0;\n  flex: 1;\n  \n  /* Ensure direct child divs can shrink below content width */\n  > div {\n    min-width: 0;\n  }\n  \n  .OKE-Dropdown__optionText {\n    ", "\n    white-space: normal;\n  }\n"], ["\n  overflow: hidden;\n  min-width: 0;\n  flex: 1;\n  \n  /* Ensure direct child divs can shrink below content width */\n  > div {\n    min-width: 0;\n  }\n  \n  .OKE-Dropdown__optionText {\n    ", "\n    white-space: normal;\n  }\n"])), (0, mixins_1.clampText)(textLineClamp));
 var templateObject_1, templateObject_2, templateObject_3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.225.10",
+  "version": "2.226.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -96,6 +96,7 @@
     "@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",