@northlight/ui 2.36.9 → 2.36.11

package/dist/es/northlight.d.ts

@@ -2589,7 +2589,7 @@ declare const useOverflowGroup: () => {
     containerRef: (node: any) => void;
 };
 
-declare const getContrastColor: (color: string) => "text.default" | "text.inverted";
+declare const getContrastColor: (color: string) => "text.default" | "text.inverted" | undefined;
 
 declare const luminosity: (hexcolor: string) => number;
 

package/dist/es/northlight.js

@@ -364,12 +364,16 @@ const useDidUpdateEffect = (effect, dependencies) => {
 };
 
 const luminosity = (hexcolor) => {
-  let color = hexcolor;
-  if (color.slice(0, 1) === "#") {
-    color = color.slice(1);
+  if (!hexcolor || typeof hexcolor !== "string")
+    return Number.NaN;
+  let color = hexcolor.trim();
+  if (!/^#?[0-9a-f]{3}([0-9a-f]{3})?$/i.test(color)) {
+    return Number.NaN;
   }
+  if (color[0] === "#")
+    color = color.slice(1);
   if (color.length === 3) {
-    color = color.split("").map((hex) => hex + hex).join("");
+    color = color.split("").map((h) => h + h).join("");
   }
   const r = parseInt(color.substring(0, 2), 16);
   const g = parseInt(color.substring(2, 4), 16);
@@ -378,16 +382,28 @@ const luminosity = (hexcolor) => {
   return brightness;
 };
 
+function safeUseToken(tokenOrValue) {
+  try {
+    return useToken("colors", tokenOrValue);
+  } catch (e) {
+    return tokenOrValue;
+  }
+}
 const getContrastColor = (color) => {
-  const colorTwo = useToken("colors", "text.default");
-  const colorOne = useToken("colors", "text.inverted");
-  const colorInHex = useToken("colors", color);
-  const l1 = luminosity(colorOne);
-  const l2 = luminosity(colorTwo);
-  const threshold = (l1 + l2) / 2;
-  const brightColor = l1 > l2 ? colorOne : colorTwo;
-  const darkColor = l1 > l2 ? colorTwo : colorOne;
-  return luminosity(colorInHex) >= threshold ? darkColor : brightColor;
+  const textDefault = useToken("colors", "text.default");
+  const textInverted = useToken("colors", "text.inverted");
+  const normalized = typeof color === "string" ? color.trim() : color;
+  const isHex = /^#?[0-9a-f]{3}([0-9a-f]{3})?$/i.test(normalized);
+  const bgResolved = isHex ? normalized[0] === "#" ? normalized : `#${normalized}` : safeUseToken(normalized);
+  const lInverted = luminosity(textInverted);
+  const lDefault = luminosity(textDefault);
+  const threshold = (lInverted + lDefault) / 2;
+  const brightColor = lInverted > lDefault ? textInverted : textDefault;
+  const darkColor = lInverted > lDefault ? textDefault : textInverted;
+  const lBg = luminosity(bgResolved);
+  if (Number.isNaN(lBg))
+    return void 0;
+  return lBg >= threshold ? darkColor : brightColor;
 };
 
 const ring = {
@@ -784,14 +800,14 @@ const Button$1 = {
       }
     }),
     brandSubdued: ({ theme: { colors: color } }) => ({
-      color: color.text.button.link,
+      color: color.text.button.brandSubdued,
       bgColor: color.background.button.ghost,
       _hover: {
         bg: color.background.button.brand,
         color: color.text.inverted,
         _disabled: {
           bgColor: color.background.button.ghost,
-          color: color.text.button.link
+          color: color.text.button.brandSubdued
         }
       },
       _active: {
@@ -1646,7 +1662,8 @@ const Tag$1 = {
   variants: {
     solid: ({ theme: { colors }, bgColor, colorScheme, currentTheme }) => {
       const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme });
-      const tagBgColor = bgColor != null ? bgColor : colors[processedColorScheme] && colors[processedColorScheme][500] ? colors[processedColorScheme][500] : processedColorScheme;
+      const tagBgColorRaw = bgColor != null ? bgColor : colors[processedColorScheme] && colors[processedColorScheme][500] ? colors[processedColorScheme][500] : processedColorScheme;
+      const tagBgColor = typeof tagBgColorRaw === "string" ? tagBgColorRaw.trim() : tagBgColorRaw;
       const tagColor = getContrastColor(useToken$1("colors", tagBgColor));
       return {
         container: {
@@ -1657,7 +1674,8 @@ const Tag$1 = {
     },
     subtle: ({ theme: { colors }, colorScheme, bgColor, currentTheme }) => {
       const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme });
-      const tagBgColor = bgColor != null ? bgColor : colors[processedColorScheme] && colors[processedColorScheme][100] ? colors[processedColorScheme][100] : processedColorScheme;
+      const tagBgColorRaw = bgColor != null ? bgColor : colors[processedColorScheme] && colors[processedColorScheme][100] ? colors[processedColorScheme][100] : processedColorScheme;
+      const tagBgColor = typeof tagBgColorRaw === "string" ? tagBgColorRaw.trim() : tagBgColorRaw;
       const tagColor = getContrastColor(useToken$1("colors", tagBgColor));
       return {
         container: {
@@ -3576,12 +3594,13 @@ const Badge$1 = {
     };
   },
   variants: {
-    solid: ({ colorScheme, theme: { colors }, currentTheme }) => {
+    solid: ({ colorScheme, theme: { colors }, currentTheme, bg, bgColor }) => {
+      var _a;
       const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme });
-      const bgColor = processedColorScheme === "mediatoolBlue" ? colors[processedColorScheme][500] : colors[processedColorScheme] && colors[processedColorScheme][500];
+      const finalBg = (_a = bg != null ? bg : bgColor) != null ? _a : processedColorScheme === "mediatoolBlue" ? colors[processedColorScheme][500] : colors[processedColorScheme] && colors[processedColorScheme][500];
       return {
-        bgColor,
-        color: getContrastColor(bgColor != null ? bgColor : useToken$1("colors", processedColorScheme))
+        bgColor: finalBg,
+        color: getContrastColor(finalBg != null ? finalBg : useToken$1("colors", processedColorScheme))
       };
     },
     outline: ({ colorScheme, theme: { colors }, currentTheme }) => {
@@ -3616,7 +3635,8 @@ const Badge$1 = {
     }
   },
   defaultProps: {
-    size: "sm"
+    size: "sm",
+    variant: "solid"
   }
 };
 
@@ -13485,10 +13505,8 @@ const FormattedNumberInput = (_a) => {
     "inputRightElement",
     "onBlur"
   ]);
-  const [valueState, setValueState] = useState(valueProp);
-  const isControlled = typeof valueProp !== "undefined";
-  const value = isControlled ? valueProp : valueState;
   const props = presetMap[preset];
+  const value = valueProp != null ? valueProp : "";
   const getNumberFormatValues = (number) => ({
     floatValue: number,
     formattedValue: numericFormatter(number.toString(), props),
@@ -13501,18 +13519,15 @@ const FormattedNumberInput = (_a) => {
     const factor = isPercentage ? 100 : 1;
     if (vNum * factor > max) {
       const newValue = roundToPrecision(max / factor, numberOfDecimals);
-      setValueState(newValue);
       onChange(getNumberFormatValues(newValue));
     }
     if (vNum * factor < min) {
       const newValue = roundToPrecision(min / factor, numberOfDecimals);
-      setValueState(newValue);
       onChange(getNumberFormatValues(newValue));
     }
   };
   const onValueChangeHandler = (values, sourceInfo) => {
     const newFloatValue = values.floatValue && isPercentage ? roundToPrecision(values.floatValue / 100, numberOfDecimals) : values.floatValue;
-    setValueState(newFloatValue);
     onChange(
       __spreadProps$3(__spreadValues$k({}, values), {
         floatValue: newFloatValue
@@ -14748,13 +14763,9 @@ const ComboPicker = (_a) => {
   ]);
   var _a2, _b2, _c;
   const { isOpen, onToggle, onClose } = useDisclosure();
-  const [inputValueState, setInputValueState] = useState(valueProp == null ? void 0 : valueProp.input);
-  const [selectOptionState, setselectOptionState] = useState(valueProp == null ? void 0 : valueProp.option);
+  const [inputValue, setInputValue] = useState(valueProp == null ? void 0 : valueProp.input);
+  const [selectOption, setSelectOption] = useState(valueProp == null ? void 0 : valueProp.option);
   const [enableSelectInput, setEnableSelectInput] = useState(false);
-  const isInputValueControlled = typeof (valueProp == null ? void 0 : valueProp.input) !== "undefined";
-  const inputValue = isInputValueControlled ? valueProp.input : inputValueState;
-  const isOptionControlled = typeof (valueProp == null ? void 0 : valueProp.option) !== "undefined";
-  const selectOption = isOptionControlled ? valueProp.option : selectOptionState;
   const buttonRef = useRef();
   const selectRef = useRef();
   const getNewValue = (option, input) => {
@@ -14762,8 +14773,7 @@ const ComboPicker = (_a) => {
     return is(Number, input) ? { input: Number(input), option: newValueOption } : { option: newValueOption };
   };
   const handleInputChange = (newInputvalue) => {
-    const newValue = getNewValue(selectOption, newInputvalue);
-    setInputValueState(newValue.input);
+    const newValue = getNewValue(valueProp == null ? void 0 : valueProp.option, newInputvalue);
     onChange == null ? void 0 : onChange(newValue);
   };
   const handleSelectClose = () => {
@@ -14775,8 +14785,7 @@ const ComboPicker = (_a) => {
   };
   const handleSelectChange = (selectedOption) => {
     if (selectedOption) {
-      setselectOptionState(selectedOption);
-      onChange == null ? void 0 : onChange(getNewValue(selectedOption, inputValue));
+      onChange == null ? void 0 : onChange(getNewValue(selectedOption, valueProp == null ? void 0 : valueProp.input));
       if (isOpen) {
         handleSelectClose();
       }
@@ -14794,20 +14803,13 @@ const ComboPicker = (_a) => {
     }
   }, [enableSelectInput]);
   useEffect(() => {
-    const needsToCorrectOption = !selectOption;
-    const needsToCorrectInput = !is(Number, inputValue) && defaultToZeroIfEmpty;
-    const option = needsToCorrectOption ? options[0] : selectOption;
-    const input = needsToCorrectInput ? clamp(min, max, 0) : inputValue;
-    if (needsToCorrectOption) {
-      setselectOptionState(option);
-    }
-    if (needsToCorrectInput) {
-      setInputValueState(input);
-    }
-    if (needsToCorrectOption || needsToCorrectInput) {
-      onChange == null ? void 0 : onChange(getNewValue(option, input));
-    }
-  }, [inputValue, defaultToZeroIfEmpty]);
+    var _a3, _b3;
+    const option = (_a3 = valueProp == null ? void 0 : valueProp.option) != null ? _a3 : options[0];
+    const input = defaultToZeroIfEmpty ? (_b3 = valueProp == null ? void 0 : valueProp.input) != null ? _b3 : 0 : valueProp == null ? void 0 : valueProp.input;
+    setSelectOption(option);
+    setInputValue(input);
+    onChange == null ? void 0 : onChange(getNewValue(option, input));
+  }, [valueProp == null ? void 0 : valueProp.input, valueProp == null ? void 0 : valueProp.option, defaultToZeroIfEmpty, options]);
   const buttonWidth = (_b2 = (_a2 = buttonRef.current) == null ? void 0 : _a2.offsetWidth) != null ? _b2 : 0;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     FormattedNumberInput,