@blerp/design 1.4.2 → 1.4.4

package/dist/cjs/neo-components/Dialog.js

@@ -244,6 +244,11 @@ const BaseModal = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref)
 
   if (disablePortal) {
     return modalContent;
+  } // SSR check - don't use createPortal on the server
+
+
+  if (typeof window === 'undefined') {
+    return null;
   }
 
   return /*#__PURE__*/ReactDOM.createPortal(modalContent, container || document.body);

package/dist/cjs/neo-components/FormControls.js

@@ -21,7 +21,7 @@ const _excluded = ["checked", "defaultChecked", "disabled", "onChange", "color",
       _excluded2 = ["checked", "defaultChecked", "disabled", "onChange", "color", "size", "name", "value", "inputProps", "style"],
       _excluded3 = ["checked", "defaultChecked", "disabled", "onChange", "color", "size", "name", "value", "inputProps", "style"],
       _excluded4 = ["value", "defaultValue", "onChange", "children", "disabled", "multiple", "native", "variant", "label", "fullWidth", "size", "error", "displayEmpty", "renderValue", "MenuProps", "inputProps", "style", "IconComponent", "disableBorder", "color"],
-      _excluded5 = ["value", "defaultValue", "onChange", "onChangeCommitted", "min", "max", "step", "marks", "disabled", "orientation", "color", "size", "valueLabelDisplay", "valueLabelFormat", "getAriaValueText", "track", "style"],
+      _excluded5 = ["value", "defaultValue", "onChange", "onChangeCommitted", "min", "max", "step", "marks", "disabled", "orientation", "color", "size", "valueLabelDisplay", "valueLabelFormat", "getAriaValueText", "track", "disableSwap", "style"],
       _excluded6 = ["value", "defaultValue", "onChange", "max", "precision", "disabled", "readOnly", "size", "emptyIcon", "icon", "name", "style"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -764,6 +764,7 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
     valueLabelFormat,
     getAriaValueText,
     track = "normal",
+    disableSwap = false,
     style
   } = _ref5,
       props = _objectWithoutProperties__default["default"](_ref5, _excluded5);
@@ -771,55 +772,103 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
   const {
     colors
   } = ThemeProvider.useTheme();
+  const isRange = Array.isArray(value) || Array.isArray(defaultValue);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const [isDragging, setIsDragging] = React.useState(false);
+  const [activeThumb, setActiveThumb] = React.useState(-1);
   const sliderRef = React.useRef(null);
   const currentValue = value !== undefined ? value : internalValue;
   const colorValue = colors[color] || colors.primary;
   const mainColor = typeof colorValue === "object" ? colorValue.main : colorValue;
   const trackThickness = 4;
-  const thumbSize = 20;
-  const percentage = (currentValue - min) / (max - min) * 100;
+  const thumbSize = 20; // Calculate percentages for range or single
 
-  const handleChange = newValue => {
-    const clampedValue = Math.min(max, Math.max(min, newValue));
-    const steppedValue = Math.round(clampedValue / step) * step;
+  const getPercentage = val => (val - min) / (max - min) * 100;
 
-    if (value === undefined) {
-      setInternalValue(steppedValue);
-    }
+  const percentage = isRange ? [getPercentage(currentValue[0]), getPercentage(currentValue[1])] : getPercentage(currentValue);
 
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      target: {
-        value: steppedValue
+  const handleChange = (newValue, thumbIndex) => {
+    if (isRange) {
+      const clampedValue = Math.min(max, Math.max(min, newValue));
+      const steppedValue = Math.round(clampedValue / step) * step;
+      let newRange = [...currentValue];
+      newRange[thumbIndex] = steppedValue; // Handle swap prevention
+
+      if (disableSwap) {
+        if (thumbIndex === 0 && steppedValue > currentValue[1]) {
+          newRange[0] = currentValue[1];
+        } else if (thumbIndex === 1 && steppedValue < currentValue[0]) {
+          newRange[1] = currentValue[0];
+        }
+      } else {
+        // Auto-swap if needed
+        if (newRange[0] > newRange[1]) {
+          newRange = [newRange[1], newRange[0]];
+        }
+      }
+
+      if (value === undefined) {
+        setInternalValue(newRange);
       }
-    }, steppedValue);
+
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        target: {
+          value: newRange
+        }
+      }, newRange, thumbIndex);
+    } else {
+      const clampedValue = Math.min(max, Math.max(min, newValue));
+      const steppedValue = Math.round(clampedValue / step) * step;
+
+      if (value === undefined) {
+        setInternalValue(steppedValue);
+      }
+
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        target: {
+          value: steppedValue
+        }
+      }, steppedValue);
+    }
+  };
+
+  const getClosestThumb = clientX => {
+    if (!sliderRef.current || !isRange) return 0;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const percent = (clientX - rect.left) / rect.width;
+    const clickValue = min + percent * (max - min);
+    const dist0 = Math.abs(currentValue[0] - clickValue);
+    const dist1 = Math.abs(currentValue[1] - clickValue);
+    return dist0 <= dist1 ? 0 : 1;
   };
 
-  const updateValue = e => {
+  const updateValue = (e, thumbIdx) => {
     if (!sliderRef.current) return;
     const rect = sliderRef.current.getBoundingClientRect();
     const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
     const newValue = min + percent * (max - min);
-    handleChange(newValue);
+    handleChange(newValue, thumbIdx);
   };
 
   const handleMouseDown = e => {
     if (disabled) return;
     e.preventDefault();
+    const thumbIdx = isRange ? getClosestThumb(e.clientX) : 0;
+    setActiveThumb(thumbIdx);
     setIsDragging(true);
-    updateValue(e);
+    updateValue(e, thumbIdx);
   };
 
   React.useEffect(() => {
     if (!isDragging) return;
 
     const handleMouseMove = e => {
-      updateValue(e);
+      updateValue(e, activeThumb);
     };
 
     const handleMouseUp = () => {
       setIsDragging(false);
+      setActiveThumb(-1);
       onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted({
         target: {
           value: currentValue
@@ -833,7 +882,7 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [isDragging, currentValue, min, max, step]);
+  }, [isDragging, activeThumb, currentValue, min, max, step]);
 
   const containerStyle = _objectSpread(_objectSpread({
     position: "relative",
@@ -855,7 +904,17 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
     borderRadius: "".concat(trackThickness / 2, "px"),
     backgroundColor: "rgba(255, 255, 255, 0.3)"
   };
-  const trackStyle = {
+  const trackStyle = isRange ? {
+    position: "absolute",
+    left: "".concat(percentage[0], "%"),
+    width: "".concat(percentage[1] - percentage[0], "%"),
+    height: "".concat(trackThickness, "px"),
+    top: "50%",
+    transform: "translateY(-50%)",
+    borderRadius: "".concat(trackThickness / 2, "px"),
+    backgroundColor: mainColor,
+    transition: isDragging ? "none" : "left 150ms, width 150ms"
+  } : {
     position: "absolute",
     width: "".concat(percentage, "%"),
     height: "".concat(trackThickness, "px"),
@@ -866,22 +925,22 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
     transition: isDragging ? "none" : "width 150ms"
   };
 
-  const thumbStyle = _objectSpread({
+  const getThumbStyle = (pct, idx) => _objectSpread({
     position: "absolute",
     width: "".concat(thumbSize, "px"),
     height: "".concat(thumbSize, "px"),
     borderRadius: "50%",
     backgroundColor: mainColor,
     boxShadow: "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
-    left: "calc(".concat(percentage, "% - ").concat(thumbSize / 2, "px)"),
+    left: "calc(".concat(pct, "% - ").concat(thumbSize / 2, "px)"),
     top: "50%",
     transform: "translateY(-50%)",
-    transition: isDragging ? "none" : "left 150ms",
-    cursor: "grab"
-  }, isDragging && {
+    transition: isDragging && activeThumb === idx ? "none" : "left 150ms",
+    cursor: "grab",
+    zIndex: activeThumb === idx ? 2 : 1
+  }, isDragging && activeThumb === idx && {
     cursor: "grabbing"
-  }); // Render marks if provided
-
+  });
 
   const renderMarks = () => {
     if (!marks) return null;
@@ -919,7 +978,12 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
     });
   };
 
-  const displayValue = valueLabelFormat ? valueLabelFormat(currentValue) : getAriaValueText ? getAriaValueText(currentValue) : currentValue;
+  const formatDisplayValue = val => {
+    if (valueLabelFormat) return valueLabelFormat(val);
+    if (getAriaValueText) return getAriaValueText(val);
+    return val;
+  };
+
   return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
     ref: node => {
       sliderRef.current = node;
@@ -935,15 +999,44 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
     role: "slider",
     "aria-valuemin": min,
     "aria-valuemax": max,
-    "aria-valuenow": currentValue,
-    "aria-valuetext": getAriaValueText === null || getAriaValueText === void 0 ? void 0 : getAriaValueText(currentValue),
+    "aria-valuenow": isRange ? currentValue[0] : currentValue,
     tabIndex: disabled ? -1 : 0
   }, props), /*#__PURE__*/React__default["default"].createElement("span", {
     style: railStyle
   }), track !== false && /*#__PURE__*/React__default["default"].createElement("span", {
     style: trackStyle
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
-    style: thumbStyle
+  }), isRange ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
+    style: getThumbStyle(percentage[0], 0)
+  }, valueLabelDisplay === "on" || valueLabelDisplay === "auto" && isDragging && activeThumb === 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      position: "absolute",
+      bottom: "calc(100% + 8px)",
+      left: "50%",
+      transform: "translateX(-50%)",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      backgroundColor: "rgba(0, 0, 0, 0.87)",
+      color: "#fff",
+      fontSize: "12px",
+      whiteSpace: "nowrap"
+    }
+  }, formatDisplayValue(currentValue[0])) : null), /*#__PURE__*/React__default["default"].createElement("span", {
+    style: getThumbStyle(percentage[1], 1)
+  }, valueLabelDisplay === "on" || valueLabelDisplay === "auto" && isDragging && activeThumb === 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      position: "absolute",
+      bottom: "calc(100% + 8px)",
+      left: "50%",
+      transform: "translateX(-50%)",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      backgroundColor: "rgba(0, 0, 0, 0.87)",
+      color: "#fff",
+      fontSize: "12px",
+      whiteSpace: "nowrap"
+    }
+  }, formatDisplayValue(currentValue[1])) : null)) : /*#__PURE__*/React__default["default"].createElement("span", {
+    style: getThumbStyle(percentage, 0)
   }, valueLabelDisplay === "on" && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       position: "absolute",
@@ -957,7 +1050,7 @@ const BaseSlider = /*#__PURE__*/React__default["default"].forwardRef((_ref5, ref
       fontSize: "12px",
       whiteSpace: "nowrap"
     }
-  }, displayValue)), renderMarks());
+  }, formatDisplayValue(currentValue))), renderMarks());
 });
 BaseSlider.displayName = "BaseSlider";
 const Slider = withSx.withSx(BaseSlider);

package/dist/cjs/neo-components/Text.js

@@ -194,8 +194,8 @@ const BaseText = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "notblack") return "#FFFFFF";
     if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "notblack.main") return "#FFFFFF"; // Hardcode plain white / black detection
 
-    if (colorValue.toLowerCase() === "white") return "#FFFFFF";
-    if (colorValue.toLowerCase() === "black") return "#000000"; // Handle "white.override" or similar
+    if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "white") return "#FFFFFF";
+    if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "black") return "#000000"; // Handle "white.override" or similar
 
     if (colorValue === "white.override" || colorValue === "whiteOverride") {
       var _colors$whiteOverride;

package/dist/esm/neo-components/Dialog.js

@@ -233,6 +233,11 @@ const BaseModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 
   if (disablePortal) {
     return modalContent;
+  } // SSR check - don't use createPortal on the server
+
+
+  if (typeof window === 'undefined') {
+    return null;
   }
 
   return /*#__PURE__*/createPortal(modalContent, container || document.body);

package/dist/esm/neo-components/FormControls.js

@@ -10,7 +10,7 @@ const _excluded = ["checked", "defaultChecked", "disabled", "onChange", "color",
       _excluded2 = ["checked", "defaultChecked", "disabled", "onChange", "color", "size", "name", "value", "inputProps", "style"],
       _excluded3 = ["checked", "defaultChecked", "disabled", "onChange", "color", "size", "name", "value", "inputProps", "style"],
       _excluded4 = ["value", "defaultValue", "onChange", "children", "disabled", "multiple", "native", "variant", "label", "fullWidth", "size", "error", "displayEmpty", "renderValue", "MenuProps", "inputProps", "style", "IconComponent", "disableBorder", "color"],
-      _excluded5 = ["value", "defaultValue", "onChange", "onChangeCommitted", "min", "max", "step", "marks", "disabled", "orientation", "color", "size", "valueLabelDisplay", "valueLabelFormat", "getAriaValueText", "track", "style"],
+      _excluded5 = ["value", "defaultValue", "onChange", "onChangeCommitted", "min", "max", "step", "marks", "disabled", "orientation", "color", "size", "valueLabelDisplay", "valueLabelFormat", "getAriaValueText", "track", "disableSwap", "style"],
       _excluded6 = ["value", "defaultValue", "onChange", "max", "precision", "disabled", "readOnly", "size", "emptyIcon", "icon", "name", "style"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -753,6 +753,7 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     valueLabelFormat,
     getAriaValueText,
     track = "normal",
+    disableSwap = false,
     style
   } = _ref5,
       props = _objectWithoutProperties(_ref5, _excluded5);
@@ -760,55 +761,103 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const {
     colors
   } = useTheme();
+  const isRange = Array.isArray(value) || Array.isArray(defaultValue);
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [isDragging, setIsDragging] = useState(false);
+  const [activeThumb, setActiveThumb] = useState(-1);
   const sliderRef = useRef(null);
   const currentValue = value !== undefined ? value : internalValue;
   const colorValue = colors[color] || colors.primary;
   const mainColor = typeof colorValue === "object" ? colorValue.main : colorValue;
   const trackThickness = 4;
-  const thumbSize = 20;
-  const percentage = (currentValue - min) / (max - min) * 100;
+  const thumbSize = 20; // Calculate percentages for range or single
 
-  const handleChange = newValue => {
-    const clampedValue = Math.min(max, Math.max(min, newValue));
-    const steppedValue = Math.round(clampedValue / step) * step;
+  const getPercentage = val => (val - min) / (max - min) * 100;
 
-    if (value === undefined) {
-      setInternalValue(steppedValue);
-    }
+  const percentage = isRange ? [getPercentage(currentValue[0]), getPercentage(currentValue[1])] : getPercentage(currentValue);
 
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      target: {
-        value: steppedValue
+  const handleChange = (newValue, thumbIndex) => {
+    if (isRange) {
+      const clampedValue = Math.min(max, Math.max(min, newValue));
+      const steppedValue = Math.round(clampedValue / step) * step;
+      let newRange = [...currentValue];
+      newRange[thumbIndex] = steppedValue; // Handle swap prevention
+
+      if (disableSwap) {
+        if (thumbIndex === 0 && steppedValue > currentValue[1]) {
+          newRange[0] = currentValue[1];
+        } else if (thumbIndex === 1 && steppedValue < currentValue[0]) {
+          newRange[1] = currentValue[0];
+        }
+      } else {
+        // Auto-swap if needed
+        if (newRange[0] > newRange[1]) {
+          newRange = [newRange[1], newRange[0]];
+        }
+      }
+
+      if (value === undefined) {
+        setInternalValue(newRange);
       }
-    }, steppedValue);
+
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        target: {
+          value: newRange
+        }
+      }, newRange, thumbIndex);
+    } else {
+      const clampedValue = Math.min(max, Math.max(min, newValue));
+      const steppedValue = Math.round(clampedValue / step) * step;
+
+      if (value === undefined) {
+        setInternalValue(steppedValue);
+      }
+
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        target: {
+          value: steppedValue
+        }
+      }, steppedValue);
+    }
+  };
+
+  const getClosestThumb = clientX => {
+    if (!sliderRef.current || !isRange) return 0;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const percent = (clientX - rect.left) / rect.width;
+    const clickValue = min + percent * (max - min);
+    const dist0 = Math.abs(currentValue[0] - clickValue);
+    const dist1 = Math.abs(currentValue[1] - clickValue);
+    return dist0 <= dist1 ? 0 : 1;
   };
 
-  const updateValue = e => {
+  const updateValue = (e, thumbIdx) => {
     if (!sliderRef.current) return;
     const rect = sliderRef.current.getBoundingClientRect();
     const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
     const newValue = min + percent * (max - min);
-    handleChange(newValue);
+    handleChange(newValue, thumbIdx);
   };
 
   const handleMouseDown = e => {
     if (disabled) return;
     e.preventDefault();
+    const thumbIdx = isRange ? getClosestThumb(e.clientX) : 0;
+    setActiveThumb(thumbIdx);
     setIsDragging(true);
-    updateValue(e);
+    updateValue(e, thumbIdx);
   };
 
   useEffect(() => {
     if (!isDragging) return;
 
     const handleMouseMove = e => {
-      updateValue(e);
+      updateValue(e, activeThumb);
     };
 
     const handleMouseUp = () => {
       setIsDragging(false);
+      setActiveThumb(-1);
       onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted({
         target: {
           value: currentValue
@@ -822,7 +871,7 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [isDragging, currentValue, min, max, step]);
+  }, [isDragging, activeThumb, currentValue, min, max, step]);
 
   const containerStyle = _objectSpread(_objectSpread({
     position: "relative",
@@ -844,7 +893,17 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     borderRadius: "".concat(trackThickness / 2, "px"),
     backgroundColor: "rgba(255, 255, 255, 0.3)"
   };
-  const trackStyle = {
+  const trackStyle = isRange ? {
+    position: "absolute",
+    left: "".concat(percentage[0], "%"),
+    width: "".concat(percentage[1] - percentage[0], "%"),
+    height: "".concat(trackThickness, "px"),
+    top: "50%",
+    transform: "translateY(-50%)",
+    borderRadius: "".concat(trackThickness / 2, "px"),
+    backgroundColor: mainColor,
+    transition: isDragging ? "none" : "left 150ms, width 150ms"
+  } : {
     position: "absolute",
     width: "".concat(percentage, "%"),
     height: "".concat(trackThickness, "px"),
@@ -855,22 +914,22 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     transition: isDragging ? "none" : "width 150ms"
   };
 
-  const thumbStyle = _objectSpread({
+  const getThumbStyle = (pct, idx) => _objectSpread({
     position: "absolute",
     width: "".concat(thumbSize, "px"),
     height: "".concat(thumbSize, "px"),
     borderRadius: "50%",
     backgroundColor: mainColor,
     boxShadow: "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
-    left: "calc(".concat(percentage, "% - ").concat(thumbSize / 2, "px)"),
+    left: "calc(".concat(pct, "% - ").concat(thumbSize / 2, "px)"),
     top: "50%",
     transform: "translateY(-50%)",
-    transition: isDragging ? "none" : "left 150ms",
-    cursor: "grab"
-  }, isDragging && {
+    transition: isDragging && activeThumb === idx ? "none" : "left 150ms",
+    cursor: "grab",
+    zIndex: activeThumb === idx ? 2 : 1
+  }, isDragging && activeThumb === idx && {
     cursor: "grabbing"
-  }); // Render marks if provided
-
+  });
 
   const renderMarks = () => {
     if (!marks) return null;
@@ -908,7 +967,12 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     });
   };
 
-  const displayValue = valueLabelFormat ? valueLabelFormat(currentValue) : getAriaValueText ? getAriaValueText(currentValue) : currentValue;
+  const formatDisplayValue = val => {
+    if (valueLabelFormat) return valueLabelFormat(val);
+    if (getAriaValueText) return getAriaValueText(val);
+    return val;
+  };
+
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: node => {
       sliderRef.current = node;
@@ -924,15 +988,44 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     role: "slider",
     "aria-valuemin": min,
     "aria-valuemax": max,
-    "aria-valuenow": currentValue,
-    "aria-valuetext": getAriaValueText === null || getAriaValueText === void 0 ? void 0 : getAriaValueText(currentValue),
+    "aria-valuenow": isRange ? currentValue[0] : currentValue,
     tabIndex: disabled ? -1 : 0
   }, props), /*#__PURE__*/React.createElement("span", {
     style: railStyle
   }), track !== false && /*#__PURE__*/React.createElement("span", {
     style: trackStyle
-  }), /*#__PURE__*/React.createElement("span", {
-    style: thumbStyle
+  }), isRange ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    style: getThumbStyle(percentage[0], 0)
+  }, valueLabelDisplay === "on" || valueLabelDisplay === "auto" && isDragging && activeThumb === 0 ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      bottom: "calc(100% + 8px)",
+      left: "50%",
+      transform: "translateX(-50%)",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      backgroundColor: "rgba(0, 0, 0, 0.87)",
+      color: "#fff",
+      fontSize: "12px",
+      whiteSpace: "nowrap"
+    }
+  }, formatDisplayValue(currentValue[0])) : null), /*#__PURE__*/React.createElement("span", {
+    style: getThumbStyle(percentage[1], 1)
+  }, valueLabelDisplay === "on" || valueLabelDisplay === "auto" && isDragging && activeThumb === 1 ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      bottom: "calc(100% + 8px)",
+      left: "50%",
+      transform: "translateX(-50%)",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      backgroundColor: "rgba(0, 0, 0, 0.87)",
+      color: "#fff",
+      fontSize: "12px",
+      whiteSpace: "nowrap"
+    }
+  }, formatDisplayValue(currentValue[1])) : null)) : /*#__PURE__*/React.createElement("span", {
+    style: getThumbStyle(percentage, 0)
   }, valueLabelDisplay === "on" && /*#__PURE__*/React.createElement("span", {
     style: {
       position: "absolute",
@@ -946,7 +1039,7 @@ const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       fontSize: "12px",
       whiteSpace: "nowrap"
     }
-  }, displayValue)), renderMarks());
+  }, formatDisplayValue(currentValue))), renderMarks());
 });
 BaseSlider.displayName = "BaseSlider";
 const Slider = withSx(BaseSlider);

package/dist/esm/neo-components/Text.js

@@ -183,8 +183,8 @@ const BaseText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "notblack") return "#FFFFFF";
     if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "notblack.main") return "#FFFFFF"; // Hardcode plain white / black detection
 
-    if (colorValue.toLowerCase() === "white") return "#FFFFFF";
-    if (colorValue.toLowerCase() === "black") return "#000000"; // Handle "white.override" or similar
+    if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "white") return "#FFFFFF";
+    if ((colorValue === null || colorValue === void 0 ? void 0 : colorValue.toLowerCase()) === "black") return "#000000"; // Handle "white.override" or similar
 
     if (colorValue === "white.override" || colorValue === "whiteOverride") {
       var _colors$whiteOverride;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blerp/design",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "Blerp UI",
   "main": "dist/esm/index.js",
   "scripts": {